From ee558136b1cd4b60736b2b48ec7b569b526e31ec Mon Sep 17 00:00:00 2001
From: Zachary Zhang <zacharyzhang7@gmail.com>
Date: Wed, 12 Jun 2024 10:57:27 -0400
Subject: ui bug fixes

---
 src/client/views/nodes/DiagramBox.scss | 128 ++++++++++++++++++---------------
 src/client/views/nodes/DiagramBox.tsx  |  96 ++++++++++++++-----------
 2 files changed, 127 insertions(+), 97 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DiagramBox.scss b/src/client/views/nodes/DiagramBox.scss
index 64b0e6c0e..1b6efe01d 100644
--- a/src/client/views/nodes/DiagramBox.scss
+++ b/src/client/views/nodes/DiagramBox.scss
@@ -8,11 +8,12 @@
         justify-content: center;
         flex-direction: column;
         height:100%;
+        padding:20px;
+        padding-right:40px;
         button{
-            font-size:10px;
-            margin:5px;
+            font-size:15px;
             height:100%;
-            width:30%;
+            width:100%;
             border: none;
             border-radius: 5px;
             cursor: pointer;
@@ -23,6 +24,7 @@
         button:hover {
             background-color: #0056b3;
         }
+        
     }
     .DiagramBox-wrapper {
         width: 100%;
@@ -31,43 +33,58 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        .backButton{
-            position: absolute;
-            top:0;
-            left:0;
-        }
-        .search-bar {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            align-items: center;
-            width: 100%;
-            padding: 10px;
-
-            textarea {
-                flex: 1;
-                height: 5px;
-                margin-right: 10px;
-                min-height: 20px;
-                resize:none;
-                overflow: hidden;
-            }
-
-            button {
-                padding: 5px 10px;
-                width:80px;
-                height:30px;
-                border-radius: 10px;
-            }
-        }
-
         .content {
-            flex: 1;
             display: flex;
             justify-content: center;
             align-items: center;
+            flex-direction: column;
+            padding:10px;
             width:100%;
             height:100%;
+            .topbar{
+                .backButtonDrawing{
+                    padding: 5px 10px;
+                    height:23px;
+                    border-radius: 10px;
+                    text-align: center;
+                    padding:0;
+                    width:50px;
+                    font-size:10px;
+                    position:absolute;
+                    top:10px;
+                    left:10px;
+                }
+                p{
+                    margin-left:60px
+                }
+            }
+            .search-bar {
+                .backButton{
+                    text-align: center;
+                    padding:0;
+                    width:50px;
+                    font-size:10px;
+
+                }
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: center;
+                align-items: center;
+                width: 100%;
+                textarea {
+                    flex: 1;
+                    height: 5px;
+                    min-height: 20px;
+                    resize:none;
+                    overflow: hidden;
+                }
+                button {
+                    padding: 5px 10px;
+                    width:80px;
+                    height:23px;
+                    border-radius: 10px;
+                }
+            }
             .diagramBox{
                 flex: 1;
                 display: flex;
@@ -76,28 +93,27 @@
                 svg{
                     max-width: none !important;
                 }
-            }
-        }
-
-        .loading-circle {
-            position: absolute;
-            display:flex;
-            align-items: center;
-            justify-content: center;
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            border: 3px solid #ccc;
-            border-top-color: #333;
-            animation: spin 1s infinite linear;
-        }
-
-        @keyframes spin {
-            0% {
-                transform: rotate(0deg);
-            }
-            100% {
-                transform: rotate(360deg);
+                .loading-circle {
+                    position: absolute;
+                    display:flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 50px;
+                    height: 50px;
+                    border-radius: 50%;
+                    border: 3px solid #ccc;
+                    border-top-color: #333;
+                    animation: spin 1s infinite linear;
+                }
+        
+                @keyframes spin {
+                    0% {
+                        transform: rotate(0deg);
+                    }
+                    100% {
+                        transform: rotate(360deg);
+                    }
+                }
             }
         }
     }
diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index a294ed75c..220c43ead 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -45,6 +45,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     @action handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         this.inputValue = e.target.value;
+        console.log(e.target.value);
     };
     async componentDidMount() {
         this._props.setContentViewBox?.(this);
@@ -55,9 +56,14 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             flowchart: { useMaxWidth: false, htmlLabels: true, curve: 'cardinal' },
             gantt: { useMaxWidth: true, useWidth: 2000 },
         });
+        if (!this.Document.testValue) {
+            this.Document.height = 500;
+            this.Document.width = 500;
+        }
+        this.Document.testValue = 'a';
         this.mermaidCode = 'a';
-        if (typeof this.Document.mermaidCode === 'string') {
-            this.renderMermaidAsync(this.Document.mermaidCode);
+        if (typeof this.Document.drawingMermaidCode === 'string' && this.Document.menuState === 'drawing') {
+            this.renderMermaidAsync(this.Document.drawingMermaidCode);
         }
         console.log(this.Document.title);
         // this.renderMermaidAsync(this.timeline);
@@ -77,8 +83,11 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         );
     }
     componentDidUpdate = () => {
-        if (typeof this.Document.mermaidCode === 'string' && this.Document.menuState === 'drawing') {
-            this.renderMermaidAsync(this.Document.mermaidCode);
+        if (typeof this.Document.drawingMermaidCode === 'string' && this.Document.menuState === 'drawing') {
+            this.renderMermaidAsync(this.Document.drawingMermaidCode);
+        }
+        if (typeof this.Document.gptMermaidCode === 'string' && this.Document.menuState === 'gpt') {
+            this.renderMermaidAsync(this.Document.gptMermaidCode);
         }
     };
     switchRenderDiv() {
@@ -128,7 +137,9 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     }
     @action handleRenderClick = () => {
         this.mermaidCode = '';
-        this.generateMermaidCode();
+        if (this.inputValue) {
+            this.generateMermaidCode();
+        }
     };
     @action async generateMermaidCode() {
         console.log('Generating Mermaid Code');
@@ -155,6 +166,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             }
         }
         this.renderMermaidAsync.call(this, this.removeWords(this.mermaidCode));
+        this.Document.gptMermaidCode = this.removeWords(this.mermaidCode);
         this.loading = false;
     }
     isValidCode = (html: string) => true;
@@ -224,9 +236,9 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 }
                 // this will save the text
                 if (diagramExists) {
-                    this.Document.mermaidCode = mermaidCode;
+                    this.Document.drawingMermaidCode = mermaidCode;
                 } else {
-                    this.Document.mermaidCode = '';
+                    this.Document.drawingMermaidCode = '';
                 }
             }
         }
@@ -283,27 +295,28 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return (
             <div className="buttonCollections">
                 <button type="button" onClick={this.drawingButton}>
-                    Drawing
+                    Drawing - Create diagram from ink drawing
                 </button>
                 <button type="button" onClick={this.gptButton}>
-                    GPT
+                    GPT - Generate diagram with AI prompt
                 </button>
                 <button type="button" onClick={this.mermaidButton}>
-                    Mermaid Code
+                    Mermaid Editor - Create diagram with mermaid code
                 </button>
             </div>
         );
     }
-    renderDrawing (): React.ReactNode {
+    renderDrawing(): React.ReactNode {
+        console.log(this.Document.mermaidCode);
         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 className="topBar">
+                        <button className="backButtonDrawing" type="button" onClick={this.optionButton}>
+                            Back
+                        </button>
+                        {!this.Document.mermaidCode && <p>Click the red pen icon to flip onto the collection side and draw a diagram with ink</p>}
+                    </div>
                     <div id={'dashDiv' + this.Document.title} className="diagramBox" />
                 </div>
             </div>
@@ -313,24 +326,17 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     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 className="search-bar">
+                        <button className="backButton" type="button" onClick={this.optionButton}>
+                            Back
+                        </button>
+                        <textarea value={this.inputValue} placeholder="Enter GPT prompt" onChange={this.handleInputChange} onInput={e => this.autoResize(e.target as HTMLTextAreaElement)} />
+                        <button className="generateButton" type="button" onClick={this.handleRenderClick}>
+                            Generate
+                        </button>
+                    </div>
+                    <div id={'dashDiv' + this.Document.title} className="diagramBox" />
                 </div>
             </div>
         );
@@ -339,15 +345,23 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     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 className="content">
+                    <div className="search-bar">
+                        <button className="backButton" type="button" onClick={this.optionButton}>
+                            Back
+                        </button>
+                        <textarea placeholder="Enter Mermaid Code" onChange={this.handleInputChangeEditor} onInput={e => this.autoResize(e.target as HTMLTextAreaElement)} />
+                    </div>
+                    <div id={'dashDiv' + this.Document.title} className="diagramBox" />
+                </div>
             </div>
         );
     }
+    handleInputChangeEditor = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        if (typeof e.target.value === 'string') {
+            this.renderMermaidAsync(e.target.value);
+        }
+    };
     timeline = `gantt
     title College Timeline
     dateFormat  YYYY-MM-DD
@@ -385,5 +399,5 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
 Docs.Prototypes.TemplateMap.set(DocumentType.DIAGRAM, {
     layout: { view: DiagramBox, dataField: 'dadta' },
-    options: { _height: 300, _layout_fitWidth: false, _layout_nativeDimEditable: true, _layout_reflowVertical: true, waitForDoubleClickToClick: 'always', _layout_reflowHorizontal: true, systemIcon: 'BsGlobe' },
+    options: { _height: 700, _width: 700, _layout_fitWidth: false, _layout_nativeDimEditable: true, _layout_reflowVertical: true, waitForDoubleClickToClick: 'always', _layout_reflowHorizontal: true, systemIcon: 'BsGlobe' },
 });
-- 
cgit v1.2.3-70-g09d2