1 files changed, 128 insertions, 2 deletions

diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index 36deb2d8d..79cf39152 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable prettier/prettier */
+/* eslint-disable jsx-a11y/control-has-associated-label */
 import mermaid from 'mermaid';
 import { action, computed, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -35,12 +37,23 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         super(props);
         makeObservable(this);
     }
-
+    @observable renderDiv: React.ReactNode;
+    @observable inputValue = '';
+    @observable createInputValue = '';
+    @observable loading = false;
+    @observable errorMessage = '';
+    @observable mermaidCode = '';
+    @observable isExampleMenuOpen = false;
     @observable _showCode = false;
     @observable _inputValue = '';
     @observable _generating = false;
     @observable _errorMessage = '';
 
+    @action handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        this.inputValue = e.target.value;
+        console.log(e.target.value);
+    };
+
     @computed get mermaidcode() {
         return Cast(this.Document[DocData].text, RichTextField, null)?.Text ?? '';
     }
@@ -50,7 +63,9 @@ 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: { useMaxWidth: true, useWidth: 2000 },
         });
         // when a new doc/text/ink/shape is created in the freeform view, this generates the corresponding mermaid diagram code
         reaction(
@@ -197,6 +212,117 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             </div>
         );
     }
+    exampleButton = () => {
+        if (this.isExampleMenuOpen) {
+            this.isExampleMenuOpen = false;
+        } else {
+            this.isExampleMenuOpen = true;
+        }
+    };
+    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]`;
+    };
+    pieButton = () => {
+        this.createInputValue = `pie title Pets adopted by volunteers
+        "Dogs" : 386
+        "Cats" : 85
+        "Rats" : 15`;
+    };
+    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;
+        }
+    };
+    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
+    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`;
 }
 
 Docs.Prototypes.TemplateMap.set(DocumentType.DIAGRAM, {