diff options
Diffstat (limited to 'src/client/views/nodes/DiagramBox.tsx')
| -rw-r--r-- | src/client/views/nodes/DiagramBox.tsx | 145 |
1 files changed, 16 insertions, 129 deletions
diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx index 79cf39152..0d755fdbe 100644 --- a/src/client/views/nodes/DiagramBox.tsx +++ b/src/client/views/nodes/DiagramBox.tsx @@ -1,5 +1,3 @@ -/* 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'; @@ -20,7 +18,9 @@ import { InkingStroke } from '../InkingStroke'; import './DiagramBox.scss'; import { FieldView, FieldViewProps } from './FieldView'; import { FormattedTextBox } from './formattedText/FormattedTextBox'; - +/** + * this is a class for the diagram box doc type that can be found in the tools section of the side bar + */ @observer export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { public static LayoutString(fieldKey: string) { @@ -37,23 +37,12 @@ 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 ?? ''; } @@ -74,14 +63,21 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { { fireImmediately: true } ); } + /** + * helper method for renderMermaidAsync + * @param str string containing the mermaid code + * @returns + */ renderMermaid = (str: string) => { try { return mermaid.render('graph' + Date.now(), str); - } catch (error) { + } catch { return { svg: '', bindFunctions: undefined }; } }; - + /** + * will update the div containing the mermaid diagram to render the new mermaidCode + */ renderMermaidAsync = async (mermaidCode: string, dashDiv: HTMLDivElement) => { try { const { svg, bindFunctions } = await this.renderMermaid(mermaidCode); @@ -112,7 +108,9 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { res ); }, 'set mermaid code'); - + /** + * will generate mermaid code with GPT based on what the user requested + */ generateMermaidCode = action(() => { this._generating = true; const prompt = 'Write this in mermaid code and only give me the mermaid code: ' + this._inputValue; @@ -212,117 +210,6 @@ 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, { |