diff options
| -rw-r--r-- | src/client/views/nodes/DiagramBox.tsx | 51 |
1 files changed, 33 insertions, 18 deletions
diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx index c45b9a8be..553d55ac4 100644 --- a/src/client/views/nodes/DiagramBox.tsx +++ b/src/client/views/nodes/DiagramBox.tsx @@ -1,4 +1,4 @@ -import { makeObservable, observable, action } from 'mobx'; +import { makeObservable, observable, action ,reaction} from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../DocComponent'; @@ -49,13 +49,25 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' }, }); this.mermaidCode = 'asdasdasd'; - await this.createMermaidCode(); let docArray: Doc[] = DocListCast(this.Document.data); let mermaidCodeDoc = docArray.filter(doc => doc.title == 'mermaidCodeTitle') if(mermaidCodeDoc[0]){ this.renderMermaidAsync((mermaidCodeDoc[0].text as RichTextField).Text); } - this.testInkingStroke(); + else{ + DocumentManager.Instance.AddViewRenderedCb(this.Document, (docViewForYourCollection) => { + if (docViewForYourCollection && docViewForYourCollection.ComponentView) { + if (docViewForYourCollection.ComponentView.addDocument&&docViewForYourCollection.ComponentView.removeDocument) { + let newDoc=Docs.Create.TextDocument("mermaidCodeTitle", { title: "", x: 9999 + NumCast(this.layoutDoc._width), y: 9999 }) + docViewForYourCollection.ComponentView?.addDocument(newDoc) + } + } + }); + } + reaction(() => DocListCast(this.Document.data), + docs=> this.createMermaidCode(), + {fireImmediately: true} + ) } renderMermaid = async (str: string) => { try { @@ -134,6 +146,9 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im } async createMermaidCode() { + console.log("i just ran") + let mermaidCode="" + let diagramExists=false if (this.Document.data instanceof List) { let docArray: Doc[] = DocListCast(this.Document.data); let rectangleArray = docArray.filter(doc => doc.title == 'rectangle' || doc.title == 'circle'); @@ -146,7 +161,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im await timeoutPromise(); let inkStrokeArray = lineArray.map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.())).filter(inkView => inkView?.ComponentView instanceof InkingStroke); if (inkStrokeArray[0]) { - let mermaidCode = 'graph LR;'; + mermaidCode = 'graph LR;'; let inkingStrokeArray = inkStrokeArray.map(stroke => stroke?.ComponentView); for (let i = 0; i < rectangleArray.length; i++) { const rectangle = rectangleArray[i]; @@ -169,6 +184,7 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im for (let k = 0; k < rectangleArray.length; k++) { const rectangle2 = rectangleArray[k]; if (this.isPointInBox(rectangle2, [EndX, EndY]) && typeof rectangle.x === 'number' && typeof rectangle2.x === 'number') { + diagramExists=true mermaidCode += Math.abs(rectangle.x) + this.getTextInBox(rectangle, textArray) + '---' + Math.abs(rectangle2.x) + this.getTextInBox(rectangle2, textArray) + ';'; //console.log(mermaidCode) } @@ -176,25 +192,24 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im } } } - DocumentManager.Instance.AddViewRenderedCb(this.Document, (docViewForYourCollection) => { - if (docViewForYourCollection && docViewForYourCollection.ComponentView) { - if (docViewForYourCollection.ComponentView.addDocument&&docViewForYourCollection.ComponentView.removeDocument) { - let docArray: Doc[] = DocListCast(this.Document.data); - let mermaidCodeDoc = docArray.filter(doc => doc.title == 'mermaidCodeTitle') - if(mermaidCodeDoc[0]){ - console.log(mermaidCodeDoc[0].title) - } - docViewForYourCollection.ComponentView?.removeDocument(mermaidCodeDoc) - let newDoc=Docs.Create.TextDocument(mermaidCode, { title: 'mermaidCodeTitle', x: NumCast(this.Document.x) + NumCast(this.layoutDoc._width), y: NumCast(this.Document.y) }) - docViewForYourCollection.ComponentView?.addDocument(newDoc) + } + } + if(diagramExists){ + DocumentManager.Instance.AddViewRenderedCb(this.Document, (docViewForYourCollection) => { + if (docViewForYourCollection && docViewForYourCollection.ComponentView) { + if (docViewForYourCollection.ComponentView.addDocument&&docViewForYourCollection.ComponentView.removeDocument) { + let docArray: Doc[] = DocListCast(this.Document.data); + docArray=docArray.filter(doc => doc.type == 'rich text') + let mermaidCodeDoc = docArray.filter(doc => (doc.text as RichTextField).Text == 'mermaidCodeTitle') + if(mermaidCodeDoc[0]){ + mermaidCodeDoc[0].title=mermaidCode } } - }); - } + } + }); } let docArray: Doc[] = DocListCast(this._props.Document.data) console.log(docArray.length) - this.Document.data //console.log(mermaidCode) } |