diff options
| -rw-r--r-- | src/client/views/nodes/DiagramBox.tsx | 89 |
1 files changed, 44 insertions, 45 deletions
diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx index 2e77d1796..efec9c7e2 100644 --- a/src/client/views/nodes/DiagramBox.tsx +++ b/src/client/views/nodes/DiagramBox.tsx @@ -26,7 +26,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im } private _ref: React.RefObject<HTMLDivElement> = React.createRef(); private _dragRef = React.createRef<HTMLDivElement>(); - private chartContent:string + private chartContent: string; constructor(props: FieldViewProps) { super(props); makeObservable(this); @@ -48,12 +48,11 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im startOnLoad: true, flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' }, }); - this.renderMermaidAsync.call(this,this.chartContent); - this.mermaidCode=this.chartContent - this.createMermaidCode() - + this.renderMermaidAsync.call(this, this.chartContent); + this.mermaidCode = this.chartContent; + this.createMermaidCode(); } - renderMermaid = async (str:string) => { + renderMermaid = async (str: string) => { try { const { svg, bindFunctions } = await this.mermaidDiagram(str); return { svg, bindFunctions }; @@ -62,11 +61,11 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im return { svg: '', bindFunctions: undefined }; } }; - mermaidDiagram = async (str:string) => { + mermaidDiagram = async (str: string) => { return await mermaid.render('graph' + Date.now(), str); }; - async renderMermaidAsync(mermaidCode:string) { + async renderMermaidAsync(mermaidCode: string) { try { const { svg, bindFunctions } = await this.renderMermaid(mermaidCode); const dashDiv = document.getElementById('dashDiv'); @@ -86,7 +85,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im // this.htmlCode = modelOutput; this.generateMermaidCode(); }; - @action generateMermaidCode=async()=>{ + @action generateMermaidCode = async () => { console.log('Generating Mermaid Code'); this.loading = true; @@ -96,7 +95,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im // If GPT call failed console.error('GPT call failed'); this.errorMessage = 'GPT call failed; please try again.'; - } else if(res!=null){ + } else if (res != null) { // If GPT call succeeded, set htmlCode;;; TODO: check if valid html if (this.isValidCode(res)) { this.mermaidCode = res; @@ -107,20 +106,18 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im this.errorMessage = 'GPT call succeeded but invalid html; please try again.'; } } - this.renderMermaidAsync.call(this,this.removeWords(this.mermaidCode)); + this.renderMermaidAsync.call(this, this.removeWords(this.mermaidCode)); this.loading = false; - } + }; isValidCode = (html: string) => { return true; }; - - removeWords(inputStr:string) { - inputStr=inputStr.replace("```mermaid","") - return inputStr.replace("```",""); + removeWords(inputStr: string) { + inputStr = inputStr.replace('```mermaid', ''); + return inputStr.replace('```', ''); } - createMermaidCode = async (): Promise<string> => { let mermaidCode = 'graph LR;'; if (this.Document.data instanceof List) { @@ -128,24 +125,26 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im let rectangleArray = docArray.filter(doc => doc.title == 'rectangle' || doc.title == 'circle'); let lineArray = docArray.filter(doc => doc.title == 'line' || doc.title == 'stroke'); let textArray = docArray.filter(doc => doc.type == 'rich text'); - console.log(docArray) - console.log(this.childDocs - .map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.()))); - console.log(this.Document.data.filter(inkView => inkView?.ComponentView instanceof InkingStroke)) - for (let i = 0; i < rectangleArray.length; i++) { - const rectangle = rectangleArray[i]; - for (let j = 0; j < lineArray.length; j++) { - const line = lineArray[j]; - if (this.isLineInFirstBox(rectangle, line)) { - for (let k = 0; k < rectangleArray.length; k++) { - const rectangle2 = rectangleArray[k]; - if (this.isLineInSecondBox(rectangle2, line) && typeof rectangle.x === 'number' && typeof rectangle2.x === 'number') { - mermaidCode += Math.abs(rectangle.x) + this.getTextInBox(rectangle, textArray) + '---' + Math.abs(rectangle2.x) + this.getTextInBox(rectangle2, textArray) + ';'; + console.log(docArray); + setTimeout(() => { + console.log(docArray.map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.()))); + console.log(docArray.filter(inkView => inkView?.ComponentView instanceof InkingStroke)); + + for (let i = 0; i < rectangleArray.length; i++) { + const rectangle = rectangleArray[i]; + for (let j = 0; j < lineArray.length; j++) { + const line = lineArray[j]; + if (this.isLineInFirstBox(rectangle, line)) { + for (let k = 0; k < rectangleArray.length; k++) { + const rectangle2 = rectangleArray[k]; + if (this.isLineInSecondBox(rectangle2, line) && typeof rectangle.x === 'number' && typeof rectangle2.x === 'number') { + mermaidCode += Math.abs(rectangle.x) + this.getTextInBox(rectangle, textArray) + '---' + Math.abs(rectangle2.x) + this.getTextInBox(rectangle2, textArray) + ';'; + } } } } } - } + }); } //console.log(mermaidCode); return mermaidCode; @@ -183,22 +182,22 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im }; render() { - return( - <div ref={this._ref} className="DIYNodeBox"> - <div ref={this._dragRef} className="DIYNodeBox-wrapper"> - <div className="search-bar"> - <input type="text" value={this.inputValue} onChange={this.handleInputChange} /> - <button onClick={this.handleRenderClick}>Generate</button> - </div> - <div className="content"> - {this.mermaidCode ? ( - <div id="dashDiv" className="diagramBox"></div> - ) : ( - <div>{this.loading ? <div className="loading-circle"></div> : <div>{this.errorMessage ? this.errorMessage : 'Insert prompt to generate diagram'}</div>}</div> - )} + return ( + <div ref={this._ref} className="DIYNodeBox"> + <div ref={this._dragRef} className="DIYNodeBox-wrapper"> + <div className="search-bar"> + <input type="text" value={this.inputValue} onChange={this.handleInputChange} /> + <button onClick={this.handleRenderClick}>Generate</button> + </div> + <div className="content"> + {this.mermaidCode ? ( + <div id="dashDiv" className="diagramBox"></div> + ) : ( + <div>{this.loading ? <div className="loading-circle"></div> : <div>{this.errorMessage ? this.errorMessage : 'Insert prompt to generate diagram'}</div>}</div> + )} + </div> </div> </div> - </div> ); } } |