add LR vs TD graph detector

2 files changed, 128 insertions, 26 deletions

diff --git a/src/client/views/nodes/DiagramBox.scss b/src/client/views/nodes/DiagramBox.scss
index 5b12c6f89..d73dd2a97 100644
--- a/src/client/views/nodes/DiagramBox.scss
+++ b/src/client/views/nodes/DiagramBox.scss
@@ -35,6 +35,97 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
+        .contentCode{
+            overflow: hidden;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction:row;
+            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 {
+                overflow:hidden;
+                position:absolute;
+                top:0;
+                .backButton{
+                    text-align: center;
+                    padding:0;
+                    width:50px;
+                    font-size:10px;
+
+                }
+                .exampleButton{
+                    width:100px;
+                    height:30px;
+                }
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-between;
+                align-items: center;
+                width: 100%;
+                button {
+                    padding: 5px 10px;
+                    width:80px;
+                    height:23px;
+                    border-radius: 3px;
+                }
+            }
+            .exampleButtonContainer{
+                display:flex;
+                flex-direction: column;
+                position: absolute;
+                top:37px;
+                right:30px;
+                width:50px;
+                z-index: 200;
+                button{
+                    width:70px;
+                    margin:2px;
+                    padding:0px;
+                    height:15px;
+                    border-radius: 3px;
+                }
+            }
+            textarea {
+                position:relative;
+                width:40%;
+                height: 100%;
+                height: calc(100% - 25px);
+                top:15px;
+                resize:none;
+                overflow: hidden;
+            }
+            .diagramBox{
+                flex: 1;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                svg{
+                    position: relative;
+                    top:25;
+                    max-width: none !important;
+                    height: calc(100% - 50px);
+                }
+            }
+        }
         .content {
             overflow: hidden;
             display: flex;
diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index 08c889158..068c92e6b 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -203,6 +203,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             const rectangleArray = docArray.filter(doc => doc.title === 'rectangle' || doc.title === 'circle');
             const lineArray = docArray.filter(doc => doc.title === 'line' || doc.title === 'stroke');
             const textArray = docArray.filter(doc => doc.type === 'rich text');
+            this.isLeftRightDiagram(docArray);
             const timeoutPromise = () =>
                 new Promise(resolve => {
                     setTimeout(resolve, 0);
@@ -212,7 +213,11 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             console.log(inkStrokeArray.length);
             console.log(lineArray.length);
             if (inkStrokeArray[0] && inkStrokeArray.length === lineArray.length) {
-                mermaidCode = 'graph TD;';
+                if (this.isLeftRightDiagram(docArray)) {
+                    mermaidCode = 'graph LR;';
+                } else {
+                    mermaidCode = 'graph TD;';
+                }
                 const inkingStrokeArray = inkStrokeArray.map(stroke => stroke?.ComponentView);
                 for (let i = 0; i < rectangleArray.length; i++) {
                     const rectangle = rectangleArray[i];
@@ -263,6 +268,29 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             }
         }
     }
+    isLeftRightDiagram = (docArray: Doc[]) => {
+        const filteredDocs = docArray.filter(doc => doc.title === 'rectangle' || doc.title === 'circle');
+        const xDoc = filteredDocs.map(doc => doc.x) as number[];
+        const minX = Math.min(...xDoc);
+        const xWidthDoc = filteredDocs.map(doc => {
+            if (typeof doc.x === 'number' && typeof doc.width === 'number') {
+                return doc.x + doc.width;
+            }
+        }) as number[];
+        const maxX = Math.max(...xWidthDoc);
+        const yDoc = filteredDocs.map(doc => doc.y) as number[];
+        const minY = Math.min(...yDoc);
+        const yHeightDoc = filteredDocs.map(doc => {
+            if (typeof doc.x === 'number' && typeof doc.width === 'number') {
+                return doc.x + doc.width;
+            }
+        }) as number[];
+        const maxY = Math.max(...yHeightDoc);
+        if (maxX - minX > maxY - minY) {
+            return true;
+        }
+        return false;
+    };
     testInkingStroke = () => {
         if (this.Document.data instanceof List) {
             const docArray: Doc[] = DocListCast(this.Document.data);
@@ -295,10 +323,6 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
         return false;
     };
-    autoResize(element: HTMLTextAreaElement): void {
-        element.style.height = '5px';
-        element.style.height = element.scrollHeight + 'px';
-    }
     drawingButton = () => {
         this.Document.menuState = 'drawing';
     };
@@ -351,7 +375,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         <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)} />
+                        <textarea value={this.inputValue} placeholder="Enter GPT prompt" onChange={this.handleInputChange} />
                         <button className="generateButton" type="button" onClick={this.handleRenderClick}>
                             Generate
                         </button>
@@ -367,18 +391,13 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     }
 
     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">
+                <div className="contentCode">
                     <div className="search-bar">
                         <button className="backButton" type="button" onClick={this.optionButton}>
                             Back
                         </button>
-                        <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>
@@ -402,6 +421,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                             </button>
                         </div>
                     )}
+                    <textarea value={this.createInputValue} placeholder="Enter Mermaid Code" onChange={this.handleInputChangeEditor} />
                     <div id={'dashDiv' + this.Document.title} className="diagramBox" />
                 </div>
             </div>
@@ -414,9 +434,6 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             this.isExampleMenuOpen = true;
         }
     };
-    removeWhitespace(str: string): string {
-        return str.replace(/\s+/g, '');
-    }
     flowButton = () => {
         this.createInputValue = `flowchart TD
         A[Christmas] -->|Get money| B(Go shopping)
@@ -424,14 +441,14 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         C -->|One| D[Laptop]
         C -->|Two| E[iPhone]
         C -->|Three| F[fa:fa-car Car]`;
-        this.changeSizeManually(115);
+        this.renderMermaidAsync(this.createInputValue);
     };
     pieButton = () => {
         this.createInputValue = `pie title Pets adopted by volunteers
         "Dogs" : 386
         "Cats" : 85
         "Rats" : 15`;
-        this.changeSizeManually(78);
+        this.renderMermaidAsync(this.createInputValue);
     };
     timelineButton = () => {
         this.createInputValue = `gantt
@@ -443,6 +460,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         section Another
         Task in sec      :2014-01-12  , 12d
         another task      : 24d`;
+        this.renderMermaidAsync(this.createInputValue);
     };
     classButton = () => {
         this.createInputValue = `classDiagram
@@ -466,6 +484,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             +bool is_wild
             +run()
         }`;
+        this.renderMermaidAsync(this.createInputValue);
     };
     mindmapButton = () => {
         this.createInputValue = `mindmap
@@ -485,23 +504,15 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             Tools
             Pen and paper
             Mermaid`;
+        this.renderMermaidAsync(this.createInputValue);
     };
     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