diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/nodes/DiagramBox.scss | 27 | ||||
| -rw-r--r-- | src/client/views/nodes/DiagramBox.tsx | 54 |
2 files changed, 64 insertions, 17 deletions
diff --git a/src/client/views/nodes/DiagramBox.scss b/src/client/views/nodes/DiagramBox.scss index d2749f1ad..58a98cc59 100644 --- a/src/client/views/nodes/DiagramBox.scss +++ b/src/client/views/nodes/DiagramBox.scss @@ -1,4 +1,4 @@ -.DIYNodeBox { +.DiagramBox { width: 100%; height: 100%; display: flex; @@ -6,7 +6,7 @@ align-items: center; justify-content: center; - .DIYNodeBox-wrapper { + .DiagramBox-wrapper { width: 100%; height: 100%; display: flex; @@ -26,18 +26,27 @@ .search-bar { display: flex; + flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; padding: 10px; - input[type="text"] { + textarea { flex: 1; + height:5px; margin-right: 10px; + min-height: 20px; + height:auto; + resize:none; + overflow: hidden; } button { padding: 5px 10px; + width:80px; + height:30px; + border-radius: 10px; } } @@ -56,18 +65,16 @@ width:100%; height:100%; svg{ - flex: 1; - display: flex; - justify-content: center; - align-items: center; - width:100%; - height:100%; + max-width: none !important; } } } .loading-circle { - position: relative; + position: absolute; + display:flex; + align-items: center; + justify-content: center; width: 50px; height: 50px; border-radius: 50%; 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> |