From 1d9a9f05acc1bae66b65f73246741d17f7a51186 Mon Sep 17 00:00:00 2001
From: Zachary Zhang <zacharyzhang7@gmail.com>
Date: Mon, 10 Jun 2024 15:01:05 -0400
Subject: draft of ui update

---
 src/client/views/nodes/DiagramBox.tsx | 198 ++++++++++++++++++++++------------
 1 file changed, 128 insertions(+), 70 deletions(-)

(limited to 'src/client/views/nodes/DiagramBox.tsx')

diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index af4410394..a294ed75c 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
 import mermaid from 'mermaid';
 import { action, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -5,7 +6,7 @@ import * as React from 'react';
 import { Doc, DocListCast } from '../../../fields/Doc';
 import { List } from '../../../fields/List';
 import { RichTextField } from '../../../fields/RichTextField';
-import { DocCast, NumCast } from '../../../fields/Types';
+import { DocCast } from '../../../fields/Types';
 import { GPTCallType, gptAPICall } from '../../apis/gpt/GPT';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { Docs } from '../../documents/Documents';
@@ -16,6 +17,14 @@ import { InkingStroke } from '../InkingStroke';
 import './DiagramBox.scss';
 import { FieldView, FieldViewProps } from './FieldView';
 
+enum menuState {
+    option,
+    mermaidCode,
+    drawing,
+    gpt,
+    justCreated,
+}
+
 @observer
 export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     public static LayoutString(fieldKey: string) {
@@ -27,7 +36,8 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         super(props);
         makeObservable(this);
     }
-
+    @observable menuState = menuState.justCreated;
+    @observable renderDiv: React.ReactNode;
     @observable inputValue = '';
     @observable loading = false;
     @observable errorMessage = '';
@@ -46,31 +56,11 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             gantt: { useMaxWidth: true, useWidth: 2000 },
         });
         this.mermaidCode = 'a';
-        const docArray: Doc[] = DocListCast(this.Document.data);
-        let mermaidCodeDoc = docArray.filter(doc => doc.type === 'rich text');
-        mermaidCodeDoc = mermaidCodeDoc.filter(doc => (doc.text as RichTextField).Text === 'mermaidCodeTitle');
-        if (mermaidCodeDoc[0]) {
-            if (typeof mermaidCodeDoc[0].title === 'string') {
-                console.log(mermaidCodeDoc[0].title);
-                if (mermaidCodeDoc[0].title !== '') {
-                    this.renderMermaidAsync(mermaidCodeDoc[0].title);
-                }
-            }
-        }
-        // this will create a text doc far away where the user cant to save the mermaid code, where it will then be accessed when flipped to the diagram box side
-        // the code is stored in the title since it is much easier to change than in the text
-        else {
-            DocumentManager.Instance.AddViewRenderedCb(this.Document, docViewForYourCollection => {
-                if (docViewForYourCollection && docViewForYourCollection.ComponentView) {
-                    if (docViewForYourCollection.ComponentView.addDocument && docViewForYourCollection.ComponentView.removeDocument) {
-                        const newDoc = Docs.Create.TextDocument('mermaidCodeTitle', { title: '', x: 9999 + NumCast(this.layoutDoc._width), y: 9999 });
-                        docViewForYourCollection.ComponentView?.addDocument(newDoc);
-                    }
-                }
-            });
+        if (typeof this.Document.mermaidCode === 'string') {
+            this.renderMermaidAsync(this.Document.mermaidCode);
         }
         console.log(this.Document.title);
-        this.renderMermaidAsync(this.timeline);
+        // this.renderMermaidAsync(this.timeline);
         // this is so that ever time a new doc, text node or ink node, is created, this.createMermaidCode will run which will create a save
         reaction(
             () => DocListCast(this.Document.data),
@@ -86,6 +76,31 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             { fireImmediately: true }
         );
     }
+    componentDidUpdate = () => {
+        if (typeof this.Document.mermaidCode === 'string' && this.Document.menuState === 'drawing') {
+            this.renderMermaidAsync(this.Document.mermaidCode);
+        }
+    };
+    switchRenderDiv() {
+        switch (this.Document.menuState) {
+            case 'option':
+                this.renderDiv = this.renderOption();
+                break;
+            case 'drawing':
+                this.renderDiv = this.renderDrawing();
+                break;
+            case 'gpt':
+                this.renderDiv = this.renderGpt();
+                break;
+            case 'mermaidCode':
+                this.renderDiv = this.renderMermaidCode();
+                break;
+            default:
+                this.menuState = menuState.option;
+                this.renderDiv = this.renderOption();
+                console.log(this.renderDiv);
+        }
+    }
     renderMermaid = async (str: string) => {
         try {
             const { svg, bindFunctions } = await this.mermaidDiagram(str);
@@ -119,20 +134,6 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         console.log('Generating Mermaid Code');
         this.loading = true;
         let prompt = '';
-        // let docArray: Doc[] = DocListCast(this.Document.data);
-        // let mermaidCodeDoc = docArray.filter(doc => doc.type == 'rich text')
-        // mermaidCodeDoc=mermaidCodeDoc.filter(doc=>(doc.text as RichTextField).Text=='mermaidCodeTitle')
-        // if(mermaidCodeDoc[0]){
-        //     console.log(mermaidCodeDoc[0].title)
-        //     if(typeof mermaidCodeDoc[0].title=='string'){
-        //         console.log(mermaidCodeDoc[0].title)
-        //         if(mermaidCodeDoc[0].title!=""){
-        //             prompt="Edit this code "+this.inputValue+": "+mermaidCodeDoc[0].title
-        //             console.log("you have to see me")
-        //         }
-        //     }
-        // }
-        // else{
         prompt = 'Write this in mermaid code and only give me the mermaid code: ' + this.inputValue;
         console.log('there is no text save');
         // }
@@ -222,22 +223,11 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     }
                 }
                 // this will save the text
-                DocumentManager.Instance.AddViewRenderedCb(this.Document, docViewForYourCollection => {
-                    if (docViewForYourCollection && docViewForYourCollection.ComponentView) {
-                        if (docViewForYourCollection.ComponentView.addDocument && docViewForYourCollection.ComponentView.removeDocument) {
-                            let docs: Doc[] = DocListCast(this.Document.data);
-                            docs = docs.filter(doc => doc.type === 'rich text');
-                            const mermaidCodeDoc = docs.filter(doc => (doc.text as RichTextField).Text === 'mermaidCodeTitle');
-                            if (mermaidCodeDoc[0]) {
-                                if (diagramExists) {
-                                    mermaidCodeDoc[0].title = mermaidCode;
-                                } else {
-                                    mermaidCodeDoc[0].title = '';
-                                }
-                            }
-                        }
-                    }
-                });
+                if (diagramExists) {
+                    this.Document.mermaidCode = mermaidCode;
+                } else {
+                    this.Document.mermaidCode = '';
+                }
             }
         }
     }
@@ -277,6 +267,87 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         element.style.height = '5px';
         element.style.height = element.scrollHeight + 'px';
     }
+    drawingButton = () => {
+        this.Document.menuState = 'drawing';
+    };
+    gptButton = () => {
+        this.Document.menuState = 'gpt';
+    };
+    mermaidButton = () => {
+        this.Document.menuState = 'mermaidCode';
+    };
+    optionButton = () => {
+        this.Document.menuState = 'option';
+    };
+    renderOption(): React.ReactNode {
+        return (
+            <div className="buttonCollections">
+                <button type="button" onClick={this.drawingButton}>
+                    Drawing
+                </button>
+                <button type="button" onClick={this.gptButton}>
+                    GPT
+                </button>
+                <button type="button" onClick={this.mermaidButton}>
+                    Mermaid Code
+                </button>
+            </div>
+        );
+    }
+    renderDrawing (): React.ReactNode {
+        return (
+            <div ref={this._dragRef} className="DiagramBox-wrapper">
+                <button type="button" className="backButton" onClick={this.optionButton}>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                        <path d="M0 0h24v24H0z" fill="none" />
+                        <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
+                    </svg>
+                </button>
+                <div className="content">
+                    <div id={'dashDiv' + this.Document.title} className="diagramBox" />
+                </div>
+            </div>
+        );
+    }
+
+    renderGpt(): React.ReactNode {
+        return (
+            <div ref={this._dragRef} className="DiagramBox-wrapper">
+                <button type="button" className="backButton" onClick={this.optionButton}>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                        <path d="M0 0h24v24H0z" fill="none" />
+                        <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
+                    </svg>
+                </button>
+                <div className="search-bar">
+                    <textarea value={this.inputValue} onChange={this.handleInputChange} onInput={e => this.autoResize(e.target as HTMLTextAreaElement)} />
+                    <button type="button" onClick={this.handleRenderClick}>
+                        Generate
+                    </button>
+                </div>
+                <div className="content">
+                    {this.mermaidCode ? (
+                        <div id={'dashDiv' + this.Document.title} className="diagramBox" />
+                    ) : (
+                        <div>{this.loading ? <div className="loading-circle" /> : <div>{this.errorMessage ? this.errorMessage : 'Insert prompt to generate diagram'}</div>}</div>
+                    )}
+                </div>
+            </div>
+        );
+    }
+
+    renderMermaidCode(): React.ReactNode {
+        return (
+            <div ref={this._dragRef} className="DiagramBox-wrapper">
+                <button className="backButton" type="button" onClick={this.optionButton}>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                        <path d="M0 0h24v24H0z" fill="none" />
+                        <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
+                    </svg>
+                </button>
+            </div>
+        );
+    }
     timeline = `gantt
     title College Timeline
     dateFormat  YYYY-MM-DD
@@ -303,23 +374,10 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     Final Exams           :         des16, 2025-05-10, 2025-05-15
     Graduation            :         des17, 2025-05-20, 2025-05-21`;
     render() {
+        this.switchRenderDiv();
         return (
             <div ref={this._ref} className="DiagramBox">
-                <div ref={this._dragRef} className="DiagramBox-wrapper">
-                    <div className="search-bar">
-                        <textarea value={this.inputValue} onChange={this.handleInputChange} onInput={e => this.autoResize(e.target as HTMLTextAreaElement)} />
-                        <button type="button" onClick={this.handleRenderClick}>
-                            Generate
-                        </button>
-                    </div>
-                    <div className="content">
-                        {this.mermaidCode ? (
-                            <div id={'dashDiv' + this.Document.title} className="diagramBox" />
-                        ) : (
-                            <div>{this.loading ? <div className="loading-circle" /> : <div>{this.errorMessage ? this.errorMessage : 'Insert prompt to generate diagram'}</div>}</div>
-                        )}
-                    </div>
-                </div>
+                {this.renderDiv}
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2

