fix bug with auto resize

2 files changed, 176 insertions, 28 deletions

diff --git a/src/client/views/nodes/DiagramBox.scss b/src/client/views/nodes/DiagramBox.scss
index 1b6efe01d..5b12c6f89 100644
--- a/src/client/views/nodes/DiagramBox.scss
+++ b/src/client/views/nodes/DiagramBox.scss
@@ -1,4 +1,5 @@
 .DiagramBox {
+    overflow:hidden;
     width: 100%;
     height: 100%;
     display: flex;
@@ -27,6 +28,7 @@
         
     }
     .DiagramBox-wrapper {
+        overflow:hidden;
         width: 100%;
         height: 100%;
         display: flex;
@@ -34,6 +36,7 @@
         align-items: center;
         justify-content: center;
         .content {
+            overflow: hidden;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -59,6 +62,9 @@
                 }
             }
             .search-bar {
+                overflow:hidden;
+                position:absolute;
+                top:0;
                 .backButton{
                     text-align: center;
                     padding:0;
@@ -85,34 +91,36 @@
                     border-radius: 10px;
                 }
             }
+            .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);
+                }
+            }
             .diagramBox{
                 flex: 1;
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 svg{
+                    position: relative;
+                    top:25;
                     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);
-                    }
+                    height: calc(100% - 50px);
                 }
             }
         }
diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index 220c43ead..08c889158 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -39,9 +39,11 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @observable menuState = menuState.justCreated;
     @observable renderDiv: React.ReactNode;
     @observable inputValue = '';
+    @observable createInputValue = '';
     @observable loading = false;
     @observable errorMessage = '';
     @observable mermaidCode = '';
+    @observable isExampleMenuOpen = false;
 
     @action handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         this.inputValue = e.target.value;
@@ -115,7 +117,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             const { svg, bindFunctions } = await this.mermaidDiagram(str);
             return { svg, bindFunctions };
         } catch (error) {
-            console.error('Error rendering mermaid diagram:', error);
+            // console.error('Error rendering mermaid diagram:', error);
             return { svg: '', bindFunctions: undefined };
         }
     };
@@ -127,6 +129,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             const dashDiv = document.getElementById('dashDiv' + this.Document.title);
             if (dashDiv) {
                 dashDiv.innerHTML = svg;
+                // this.changeHeightWidth(svg);
                 if (bindFunctions) {
                     bindFunctions(dashDiv);
                 }
@@ -135,6 +138,20 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             console.error('Error rendering Mermaid:', error);
         }
     }
+    changeHeightWidth(svgString: string) {
+        const pattern = /width="([\d.]+)"\s*height="([\d.]+)"/;
+
+        const match = svgString.match(pattern);
+
+        if (match) {
+            const width = parseFloat(match[1]);
+            const height = parseFloat(match[2]);
+            console.log(width);
+            console.log(height);
+            this.Document.width = width;
+            this.Document.height = height;
+        }
+    }
     @action handleRenderClick = () => {
         this.mermaidCode = '';
         if (this.inputValue) {
@@ -143,13 +160,17 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     };
     @action async generateMermaidCode() {
         console.log('Generating Mermaid Code');
+        const dashDiv = document.getElementById('dashDiv' + this.Document.title);
+        if (dashDiv) {
+            dashDiv.innerHTML = '';
+        }
         this.loading = true;
         let prompt = '';
         prompt = 'Write this in mermaid code and only give me the mermaid code: ' + this.inputValue;
         console.log('there is no text save');
         // }
         const res = await gptAPICall(prompt, GPTCallType.MERMAID);
-        this.loading = false;
+        this.loading = true;
         if (res === 'Error connecting with API.') {
             // If GPT call failed
             console.error('GPT call failed');
@@ -167,7 +188,6 @@ 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;
     removeWords(inputStrIn: string) {
@@ -225,9 +245,9 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                                     console.log(linkedDocs.length);
                                     if (linkedDocs.length !== 0) {
                                         const linkedText = (linkedDocs[0].text as RichTextField).Text;
-                                        mermaidCode += Math.abs(rectangle.x) + this.getTextInBox(rectangle, textArray) + '-->|' + linkedText + '|' + Math.abs(rectangle2.x) + this.getTextInBox(rectangle2, textArray) + ';';
+                                        mermaidCode += Math.abs(rectangle.x) + this.getTextInBox(rectangle, textArray) + '---|' + linkedText + '|' + Math.abs(rectangle2.x) + this.getTextInBox(rectangle2, textArray) + ';';
                                     } else {
-                                        mermaidCode += Math.abs(rectangle.x) + this.getTextInBox(rectangle, textArray) + '-->' + Math.abs(rectangle2.x) + this.getTextInBox(rectangle2, textArray) + ';';
+                                        mermaidCode += Math.abs(rectangle.x) + this.getTextInBox(rectangle, textArray) + '---' + Math.abs(rectangle2.x) + this.getTextInBox(rectangle2, textArray) + ';';
                                     }
                                 }
                             }
@@ -336,13 +356,21 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                             Generate
                         </button>
                     </div>
-                    <div id={'dashDiv' + this.Document.title} className="diagramBox" />
+                    {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 {
+        let title = 'asd';
+        if (typeof this.Document.title === 'string') {
+            title = this.removeWhitespace(this.Document.title);
+        }
         return (
             <div ref={this._dragRef} className="DiagramBox-wrapper">
                 <div className="content">
@@ -350,18 +378,130 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         <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)} />
+                        <textarea value={this.createInputValue} className={'textarea' + title} placeholder="Enter Mermaid Code" onChange={this.handleInputChangeEditor} onInput={e => this.autoResize(e.target as HTMLTextAreaElement)} />
+                        <button className="exampleButton" type="button" onClick={this.exampleButton}>
+                            Examples
+                        </button>
                     </div>
+                    {this.isExampleMenuOpen && (
+                        <div className="exampleButtonContainer">
+                            <button type="button" onClick={this.flowButton}>
+                                Flow
+                            </button>
+                            <button type="button" onClick={this.pieButton}>
+                                Pie
+                            </button>
+                            <button type="button" onClick={this.timelineButton}>
+                                Timeline
+                            </button>
+                            <button type="button" onClick={this.classButton}>
+                                Class
+                            </button>
+                            <button type="button" onClick={this.mindmapButton}>
+                                Mindmap
+                            </button>
+                        </div>
+                    )}
                     <div id={'dashDiv' + this.Document.title} className="diagramBox" />
                 </div>
             </div>
         );
     }
+    exampleButton = () => {
+        if (this.isExampleMenuOpen) {
+            this.isExampleMenuOpen = false;
+        } else {
+            this.isExampleMenuOpen = true;
+        }
+    };
+    removeWhitespace(str: string): string {
+        return str.replace(/\s+/g, '');
+    }
+    flowButton = () => {
+        this.createInputValue = `flowchart TD
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{Let me think}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[fa:fa-car Car]`;
+        this.changeSizeManually(115);
+    };
+    pieButton = () => {
+        this.createInputValue = `pie title Pets adopted by volunteers
+        "Dogs" : 386
+        "Cats" : 85
+        "Rats" : 15`;
+        this.changeSizeManually(78);
+    };
+    timelineButton = () => {
+        this.createInputValue = `gantt
+        title A Gantt Diagram
+        dateFormat  YYYY-MM-DD
+        section Section
+        A task           :a1, 2014-01-01, 30d
+        Another task     :after a1  , 20d
+        section Another
+        Task in sec      :2014-01-12  , 12d
+        another task      : 24d`;
+    };
+    classButton = () => {
+        this.createInputValue = `classDiagram
+        Animal <|-- Duck
+        Animal <|-- Fish
+        Animal <|-- Zebra
+        Animal : +int age
+        Animal : +String gender
+        Animal: +isMammal()
+        Animal: +mate()
+        class Duck{
+            +String beakColor
+            +swim()
+            +quack()
+        }
+        class Fish{
+            -int sizeInFeet
+            -canEat()
+        }
+        class Zebra{
+            +bool is_wild
+            +run()
+        }`;
+    };
+    mindmapButton = () => {
+        this.createInputValue = `mindmap
+        root((mindmap))
+            Origins
+            Long history
+            ::icon(fa fa-book)
+            Popularisation
+                British popular psychology author Tony Buzan
+            Research
+            On effectivness<br/>and features
+            On Automatic creation
+                Uses
+                    Creative techniques
+                    Strategic planning
+                    Argument mapping
+            Tools
+            Pen and paper
+            Mermaid`;
+    };
     handleInputChangeEditor = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         if (typeof e.target.value === 'string') {
+            this.createInputValue = e.target.value;
             this.renderMermaidAsync(e.target.value);
+            this.autoResize(e.target);
+            console.log('hellsad');
         }
     };
+    changeSizeManually(size: number) {
+        if (typeof this.Document.title === 'string') {
+            const textarea = document.querySelector<HTMLTextAreaElement>('textarea.textarea' + this.removeWhitespace(this.Document.title));
+            if (textarea) {
+                textarea.style.height = size + 'px';
+            }
+        }
+    }
     timeline = `gantt
     title College Timeline
     dateFormat  YYYY-MM-DD