From 551ef2a117325faf90fd9f8087e9ffba39f7322e Mon Sep 17 00:00:00 2001
From: Zachary Zhang <zacharyzhang7@gmail.com>
Date: Thu, 6 Jun 2024 15:18:42 -0400
Subject: bug fixes

---
 src/client/views/nodes/DiagramBox.tsx | 54 ++++++++++++++++++++++++++++++-----
 1 file changed, 47 insertions(+), 7 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 32969fa53..cd58ef846 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -33,7 +33,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @observable errorMessage = '';
     @observable mermaidCode = '';
 
-    @action handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    @action handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         this.inputValue = e.target.value;
     };
     async componentDidMount() {
@@ -41,9 +41,11 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         mermaid.initialize({
             securityLevel: 'loose',
             startOnLoad: true,
-            flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
+            darkMode: true,
+            flowchart: { useMaxWidth: false, htmlLabels: true, curve: 'cardinal' },
+            gantt: { barGap: 1 },
         });
-        this.mermaidCode = 'asdasdasd';
+        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');
@@ -68,12 +70,21 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             });
         }
         console.log(this.Document.title);
+        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.convertDrawingToMermaidCode(),
             { fireImmediately: true }
         );
+        reaction(
+            () =>
+                DocListCast(this.Document.data)
+                    .filter(doc => doc.type === 'rich text')
+                    .map(doc => (doc.text as RichTextField).Text),
+            () => this.convertDrawingToMermaidCode(),
+            { fireImmediately: true }
+        );
     }
     renderMermaid = async (str: string) => {
         try {
@@ -101,6 +112,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
     }
     @action handleRenderClick = () => {
+        this.mermaidCode = '';
         this.generateMermaidCode();
     };
     @action async generateMermaidCode() {
@@ -261,13 +273,41 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
         return false;
     };
-
+    autoResize(element: HTMLTextAreaElement): void {
+        element.style.height = '5px';
+        element.style.height = element.scrollHeight + 'px';
+    }
+    timeline = `gantt
+    title College Timeline
+    dateFormat  YYYY-MM-DD
+    section Semester 1
+    Orientation           :done,    des1, 2023-08-01, 2023-08-03
+    Classes Start         :active,  des2, 2023-08-04, 2023-12-15
+    Midterm Exams         :         des3, 2023-10-15, 2023-10-20
+    End of Semester       :         des4, 2023-12-16, 2023-12-20
+    section Semester 2
+    Classes Start         :         des5, 2024-01-10, 2024-05-15
+    Spring Break          :         des6, 2024-03-15, 2024-03-22
+    Midterm Exams         :         des7, 2024-03-25, 2024-03-30
+    Final Exams           :         des8, 2024-05-10, 2024-05-15
+    section Summer Break
+    Internship            :         des9, 2024-06-01, 2024-08-31
+    section Semester 3
+    Classes Start         :         des10, 2024-09-01, 2025-12-15
+    Midterm Exams         :         des11, 2024-11-15, 2024-11-20
+    End of Semester       :         des12, 2025-12-16, 2025-12-20
+    section Semester 4
+    Classes Start         :         des13, 2025-01-10, 2025-05-15
+    Spring Break          :         des14, 2025-03-15, 2025-03-22
+    Midterm Exams         :         des15, 2025-03-25, 2025-03-30
+    Final Exams           :         des16, 2025-05-10, 2025-05-15
+    Graduation            :         des17, 2025-05-20, 2025-05-21`;
     render() {
         return (
-            <div ref={this._ref} className="DIYNodeBox">
-                <div ref={this._dragRef} className="DIYNodeBox-wrapper">
+            <div ref={this._ref} className="DiagramBox">
+                <div ref={this._dragRef} className="DiagramBox-wrapper">
                     <div className="search-bar">
-                        <input type="text" value={this.inputValue} onChange={this.handleInputChange} />
+                        <textarea value={this.inputValue} onChange={this.handleInputChange} onInput={e => this.autoResize(e.target as HTMLTextAreaElement)} />
                         <button type="button" onClick={this.handleRenderClick}>
                             Generate
                         </button>
-- 
cgit v1.2.3-70-g09d2

