diff options
Diffstat (limited to 'src/client/views/nodes/DiagramBox.tsx')
| -rw-r--r-- | src/client/views/nodes/DiagramBox.tsx | 96 |
1 files changed, 55 insertions, 41 deletions
diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx index a294ed75c..220c43ead 100644 --- a/src/client/views/nodes/DiagramBox.tsx +++ b/src/client/views/nodes/DiagramBox.tsx @@ -45,6 +45,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { @action handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => { this.inputValue = e.target.value; + console.log(e.target.value); }; async componentDidMount() { this._props.setContentViewBox?.(this); @@ -55,9 +56,14 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { flowchart: { useMaxWidth: false, htmlLabels: true, curve: 'cardinal' }, gantt: { useMaxWidth: true, useWidth: 2000 }, }); + if (!this.Document.testValue) { + this.Document.height = 500; + this.Document.width = 500; + } + this.Document.testValue = 'a'; this.mermaidCode = 'a'; - if (typeof this.Document.mermaidCode === 'string') { - this.renderMermaidAsync(this.Document.mermaidCode); + if (typeof this.Document.drawingMermaidCode === 'string' && this.Document.menuState === 'drawing') { + this.renderMermaidAsync(this.Document.drawingMermaidCode); } console.log(this.Document.title); // this.renderMermaidAsync(this.timeline); @@ -77,8 +83,11 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { ); } componentDidUpdate = () => { - if (typeof this.Document.mermaidCode === 'string' && this.Document.menuState === 'drawing') { - this.renderMermaidAsync(this.Document.mermaidCode); + if (typeof this.Document.drawingMermaidCode === 'string' && this.Document.menuState === 'drawing') { + this.renderMermaidAsync(this.Document.drawingMermaidCode); + } + if (typeof this.Document.gptMermaidCode === 'string' && this.Document.menuState === 'gpt') { + this.renderMermaidAsync(this.Document.gptMermaidCode); } }; switchRenderDiv() { @@ -128,7 +137,9 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { } @action handleRenderClick = () => { this.mermaidCode = ''; - this.generateMermaidCode(); + if (this.inputValue) { + this.generateMermaidCode(); + } }; @action async generateMermaidCode() { console.log('Generating Mermaid Code'); @@ -155,6 +166,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { } } this.renderMermaidAsync.call(this, this.removeWords(this.mermaidCode)); + this.Document.gptMermaidCode = this.removeWords(this.mermaidCode); this.loading = false; } isValidCode = (html: string) => true; @@ -224,9 +236,9 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { } // this will save the text if (diagramExists) { - this.Document.mermaidCode = mermaidCode; + this.Document.drawingMermaidCode = mermaidCode; } else { - this.Document.mermaidCode = ''; + this.Document.drawingMermaidCode = ''; } } } @@ -283,27 +295,28 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { return ( <div className="buttonCollections"> <button type="button" onClick={this.drawingButton}> - Drawing + Drawing - Create diagram from ink drawing </button> <button type="button" onClick={this.gptButton}> - GPT + GPT - Generate diagram with AI prompt </button> <button type="button" onClick={this.mermaidButton}> - Mermaid Code + Mermaid Editor - Create diagram with mermaid code </button> </div> ); } - renderDrawing (): React.ReactNode { + renderDrawing(): React.ReactNode { + console.log(this.Document.mermaidCode); return ( <div ref={this._dragRef} className="DiagramBox-wrapper"> - <button type="button" className="backButton" onClick={this.optionButton}> - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> - <path d="M0 0h24v24H0z" fill="none" /> - <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" /> - </svg> - </button> <div className="content"> + <div className="topBar"> + <button className="backButtonDrawing" type="button" onClick={this.optionButton}> + Back + </button> + {!this.Document.mermaidCode && <p>Click the red pen icon to flip onto the collection side and draw a diagram with ink</p>} + </div> <div id={'dashDiv' + this.Document.title} className="diagramBox" /> </div> </div> @@ -313,24 +326,17 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { renderGpt(): React.ReactNode { return ( <div ref={this._dragRef} className="DiagramBox-wrapper"> - <button type="button" className="backButton" onClick={this.optionButton}> - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> - <path d="M0 0h24v24H0z" fill="none" /> - <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" /> - </svg> - </button> - <div className="search-bar"> - <textarea value={this.inputValue} onChange={this.handleInputChange} onInput={e => this.autoResize(e.target as HTMLTextAreaElement)} /> - <button type="button" onClick={this.handleRenderClick}> - Generate - </button> - </div> <div className="content"> - {this.mermaidCode ? ( - <div id={'dashDiv' + this.Document.title} className="diagramBox" /> - ) : ( - <div>{this.loading ? <div className="loading-circle" /> : <div>{this.errorMessage ? this.errorMessage : 'Insert prompt to generate diagram'}</div>}</div> - )} + <div className="search-bar"> + <button className="backButton" type="button" onClick={this.optionButton}> + Back + </button> + <textarea value={this.inputValue} placeholder="Enter GPT prompt" onChange={this.handleInputChange} onInput={e => this.autoResize(e.target as HTMLTextAreaElement)} /> + <button className="generateButton" type="button" onClick={this.handleRenderClick}> + Generate + </button> + </div> + <div id={'dashDiv' + this.Document.title} className="diagramBox" /> </div> </div> ); @@ -339,15 +345,23 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { renderMermaidCode(): React.ReactNode { return ( <div ref={this._dragRef} className="DiagramBox-wrapper"> - <button className="backButton" type="button" onClick={this.optionButton}> - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> - <path d="M0 0h24v24H0z" fill="none" /> - <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" /> - </svg> - </button> + <div className="content"> + <div className="search-bar"> + <button className="backButton" type="button" onClick={this.optionButton}> + Back + </button> + <textarea placeholder="Enter Mermaid Code" onChange={this.handleInputChangeEditor} onInput={e => this.autoResize(e.target as HTMLTextAreaElement)} /> + </div> + <div id={'dashDiv' + this.Document.title} className="diagramBox" /> + </div> </div> ); } + handleInputChangeEditor = (e: React.ChangeEvent<HTMLTextAreaElement>) => { + if (typeof e.target.value === 'string') { + this.renderMermaidAsync(e.target.value); + } + }; timeline = `gantt title College Timeline dateFormat YYYY-MM-DD @@ -385,5 +399,5 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { Docs.Prototypes.TemplateMap.set(DocumentType.DIAGRAM, { layout: { view: DiagramBox, dataField: 'dadta' }, - options: { _height: 300, _layout_fitWidth: false, _layout_nativeDimEditable: true, _layout_reflowVertical: true, waitForDoubleClickToClick: 'always', _layout_reflowHorizontal: true, systemIcon: 'BsGlobe' }, + options: { _height: 700, _width: 700, _layout_fitWidth: false, _layout_nativeDimEditable: true, _layout_reflowVertical: true, waitForDoubleClickToClick: 'always', _layout_reflowHorizontal: true, systemIcon: 'BsGlobe' }, }); |