From d509f24d29290cfc67d58a7a34c056ac1b163844 Mon Sep 17 00:00:00 2001
From: Zachary Zhang <zacharyzhang7@gmail.com>
Date: Mon, 24 Jun 2024 12:59:21 -0400
Subject: bug fixes + edit gpt generated code + unused code for line locking

---
 src/client/views/nodes/DiagramBox.scss |  11 ++++
 src/client/views/nodes/DiagramBox.tsx  | 102 +++++++++++++++++++++++----------
 2 files changed, 83 insertions(+), 30 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DiagramBox.scss b/src/client/views/nodes/DiagramBox.scss
index d73dd2a97..4bfd4f7cb 100644
--- a/src/client/views/nodes/DiagramBox.scss
+++ b/src/client/views/nodes/DiagramBox.scss
@@ -181,6 +181,17 @@
                     height:23px;
                     border-radius: 10px;
                 }
+                .rightButtons{
+                    display:flex;
+                    flex-direction: column;
+                    button {
+                        padding: 5px 10px;
+                        width:80px;
+                        height:23px;
+                        margin:2;
+                        border-radius: 10px;
+                    }
+                }
             }
             .loading-circle {
                 position: absolute;
diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index fcf6e580b..6ea574aab 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable prettier/prettier */
 /* eslint-disable jsx-a11y/control-has-associated-label */
 import mermaid from 'mermaid';
-import { action, makeObservable, observable, reaction } from 'mobx';
+import { action, makeObservable, observable, reaction, computed } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, DocListCast } from '../../../fields/Doc';
@@ -70,23 +70,33 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         if (typeof this.Document.drawingMermaidCode === 'string' && this.Document.menuState === 'drawing') {
             this.renderMermaidAsync(this.Document.drawingMermaidCode);
         }
-        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),
-        //     () => this.lockInkStroke(),
-        //     { fireImmediately: true }
+        reaction(
+            () => DocListCast(this.Document.data),
+            () => this.lockInkStroke(),
+            { fireImmediately: true }
+        );
+        reaction(
+            () =>
+                DocListCast(this.Document.data)
+                    .filter(doc => doc.type === 'rich text')
+                    .map(doc => (doc.text as RichTextField).Text),
+            () => this.convertDrawingToMermaidCode(),
+            { fireImmediately: true }
+        );
+        // const rectangleXValues = computed(() =>
+        //     DocListCast(this.Document.data)
+        //         .filter(doc => doc.title === 'rectangle')
+        //         .map(doc => doc.x)
         // );
         // reaction(
-        //     () =>
-        //         DocListCast(this.Document.data)
-        //             .filter(doc => doc.type === 'rich text')
-        //             .map(doc => (doc.text as RichTextField).Text),
-        //     () => this.convertDrawingToMermaidCode(),
+        //     () => rectangleXValues.get(),
+        //     () => this.lockInkStroke(),
         //     { fireImmediately: true }
         // );
-        this.lockInkStroke();
+         // this.lockInkStroke();
     }
+    
     componentDidUpdate = () => {
         if (typeof this.Document.drawingMermaidCode === 'string' && this.Document.menuState === 'drawing') {
             this.renderMermaidAsync(this.Document.drawingMermaidCode);
@@ -169,7 +179,6 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         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 = true;
@@ -259,6 +268,8 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
     }
     async lockInkStroke() {
+        console.log("hello")
+        console.log(DocListCast(this.Document.data).filter(doc => doc.title === 'rectangle').map(doc => doc.x))
         if (this.Document.data instanceof List) {
             const docArray: Doc[] = DocListCast(this.Document.data);
             const rectangleArray = docArray.filter(doc => doc.title === 'rectangle' || doc.title === 'circle');
@@ -352,15 +363,14 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     DocumentManager.Instance.AddViewRenderedCb(this.Document, (docViewForYourCollection) => {
                         if (docViewForYourCollection && docViewForYourCollection.ComponentView) {
                             if (docViewForYourCollection.ComponentView.addDocument&&docViewForYourCollection.ComponentView.removeDocument) {
-                                if(!inkToDelete.transformed){
-                                    docViewForYourCollection.ComponentView?.removeDocument(inkToDelete)
-                                    docViewForYourCollection.ComponentView?.addDocument(newInkDoc);
-                                    newInkDoc.transformed=false;
-    
-                                }
-                                const bruh2= DocListCast(this.Document.data).filter(doc => doc.title === 'line' || doc.title === 'stroke').map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.())).filter(inkView => inkView?.ComponentView instanceof InkingStroke).map(stroke => stroke?.ComponentView);
-                                console.log(bruh2)
-                                console.log((bruh2[0] as InkingStroke)?.inkScaledData())
+                                // docViewForYourCollection.ComponentView?.removeDocument(inkToDelete)
+                                // docViewForYourCollection.ComponentView?.addDocument(newInkDoc);
+                            
+
+                            
+                                // const bruh2= DocListCast(this.Document.data).filter(doc => doc.title === 'line' || doc.title === 'stroke').map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.())).filter(inkView => inkView?.ComponentView instanceof InkingStroke).map(stroke => stroke?.ComponentView);
+                                // console.log(bruh2)
+                                // console.log((bruh2[0] as InkingStroke)?.inkScaledData())
                             }
                         }
                     });    
@@ -476,10 +486,15 @@ 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} />
-                        <button className="generateButton" type="button" onClick={this.handleRenderClick}>
-                            Generate
-                        </button>
+                        <textarea value={this.inputValue} placeholder="Enter GPT prompt" onChange={this.handleInputChange}onInput={e => this.autoResize(e.target as HTMLTextAreaElement)} />
+                        <div className="rightButtons">
+                            <button className="generateButton" type="button" onClick={this.handleRenderClick}>
+                                Generate
+                            </button>
+                            <button className="convertButton" type="button" onClick={this.handleConvertButton}>
+                                Edit
+                            </button>
+                        </div>
                     </div>
                     {this.mermaidCode ? (
                         <div id={'dashDiv' + this.Document.title} className="diagramBox" />
@@ -490,7 +505,27 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             </div>
         );
     }
-
+    handleConvertButton=()=>{
+        this.Document.menuState = 'mermaidCode';
+        if(typeof this.Document.gptMermaidCode==='string'){
+            this.createInputValue=this.removeFirstEmptyLine(this.Document.gptMermaidCode);
+            console.log(this.Document.gptMermaidCode)
+            this.renderMermaidAsync(this.Document.gptMermaidCode);
+        }
+    }
+    removeFirstEmptyLine(input: string): string {
+        const lines = input.split('\n');
+        let emptyLineRemoved = false;
+        const resultLines = lines.filter(line => {
+            if (!emptyLineRemoved && line.trim() === '') {
+                emptyLineRemoved = true;
+                return false;
+            }
+            return true;
+        });
+        return resultLines.join('\n');
+    }
+    
     renderMermaidCode(): React.ReactNode {
         return (
             <div ref={this._dragRef} className="DiagramBox-wrapper">
@@ -522,7 +557,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                             </button>
                         </div>
                     )}
-                    <textarea value={this.createInputValue} placeholder="Enter Mermaid Code" onChange={this.handleInputChangeEditor} />
+                    <textarea value={this.createInputValue} placeholder="Enter Mermaid Code" onChange={this.handleInputChangeEditor}/>
                     <div id={'dashDiv' + this.Document.title} className="diagramBox" />
                 </div>
             </div>
@@ -541,14 +576,14 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         B --> C{Let me think}
         C -->|One| D[Laptop]
         C -->|Two| E[iPhone]
-        C -->|Three| F[fa:fa-car Car]`;
+        C -->|Three| F[fa:fa-car Car]`
         this.renderMermaidAsync(this.createInputValue);
     };
     pieButton = () => {
         this.createInputValue = `pie title Pets adopted by volunteers
         "Dogs" : 386
         "Cats" : 85
-        "Rats" : 15`;
+        "Rats" : 15`
         this.renderMermaidAsync(this.createInputValue);
     };
     timelineButton = () => {
@@ -613,6 +648,13 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             this.renderMermaidAsync(e.target.value);
         }
     };
+    removeWhitespace(str: string): string {
+        return str.replace(/\s+/g, '');
+    }
+    autoResize(element: HTMLTextAreaElement): void {
+        element.style.height = '5px';
+        element.style.height = element.scrollHeight + 'px';
+    }
     timeline = `gantt
     title College Timeline
     dateFormat  YYYY-MM-DD
-- 
cgit v1.2.3-70-g09d2