test

2 files changed, 83 insertions, 78 deletions

diff --git a/src/client/views/nodes/DiagramBox.scss b/src/client/views/nodes/DiagramBox.scss
index 9ceac15df..e69de29bb 100644
--- a/src/client/views/nodes/DiagramBox.scss
+++ b/src/client/views/nodes/DiagramBox.scss
@@ -1,9 +0,0 @@
-.mermaid {
-    svg {
-        g {
-            g{
-                
-            }
-        }
-    }
-}
diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index a2fb7e2c8..3b9e9d952 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -9,23 +9,10 @@ import { PinProps, PresBox } from './trails';
 import mermaid from 'mermaid';
 import { Doc, DocListCast } from '../../../fields/Doc';
 import { List } from '../../../fields/List';
-
-interface MermaidProps {
-    chart: String;
-}
-
-class Mermaid extends React.Component<MermaidProps> {
-    componentDidMount() {
-        mermaid.contentLoaded();
-    }
-    render() {
-        return <pre className="mermaid">{this.props.chart}</pre>;
-    }
-}
+import { RichTextField } from '../../../fields/RichTextField';
 
 @observer
 export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface {
-    @observable chartContent: string = '';
 
     public static LayoutString(fieldKey: string) {
         return FieldView.LayoutString(DiagramBox, fieldKey);
@@ -33,15 +20,11 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
     constructor(props: FieldViewProps) {
         super(props);
         makeObservable(this);
-        //this.createMermaidCode();
-        this.chartContent = 'flowchart LR;A-->B:::wide;B-->C:::wide; B-->D[hello];';
+        //this.chartContent = 'flowchart LR;A-->B:::wide;B-->C:::wide; B-->D[hello];';
     }
 
     componentDidMount() {
         this._props.setContentViewBox?.(this);
-        // (window as any)["callb"] = (x: any) => {
-        //     alert(x);
-        // };
         mermaid.initialize({
             securityLevel: "loose",
             startOnLoad: true,
@@ -50,17 +33,17 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
 
         const renderMermaid = async (str: string) => {
             try {
-                const { svg, bindFunctions } = await mermaid2(str);
+                const { svg, bindFunctions } = await mermaidDiagram(str);
                 return { svg, bindFunctions };
             } catch (error) {
                 console.error("Error rendering mermaid diagram:", error);
                 return { svg: "", bindFunctions: undefined };
             }
         };
-        const mermaid2 = async (str: string) => {
+        const mermaidDiagram = async (str: string) => {
             return await mermaid.render("graph" + Date.now(), str);
         };
-        renderMermaid(this.chartContent).then(({ svg, bindFunctions }) => {
+        renderMermaid(this.createMermaidCode()).then(({ svg, bindFunctions }) => {
             const dashDiv = document.getElementById('dashDiv');
             if (dashDiv) {
                 dashDiv.innerHTML = svg;
@@ -70,62 +53,93 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
             }
         });
     }
-    createMermaidCode = (): void => {
+    createMermaidCode = (): string => {
+        let mermaidCode = 'graph LR;';
         if (this.Document.data instanceof List) {
             let docArray: Doc[] = DocListCast(this.Document.data);
-            let mermaidCode = 'graph LR;';
-            docArray.map(doc => {
-                if (doc.title == 'rectangle') {
-                    DocListCast(this.Document.data).map(lineDoc => {
-                        if (
-                            (lineDoc.title == 'stroke' || lineDoc.title == 'line') &&
-                            typeof lineDoc.x === 'number' &&
-                            typeof doc.x === 'number' &&
-                            typeof doc.width === 'number' &&
-                            typeof doc.height === 'number' &&
-                            typeof doc.y === 'number' &&
-                            typeof lineDoc.y === 'number'
-                        ) {
-                            if (lineDoc.x < doc.x + doc.width + (doc.width + doc.x) * 0.1 && lineDoc.x > doc.x && lineDoc.y > doc.y && lineDoc.y < doc.y + doc.height) {
-                                DocListCast(this.Document.data).map(doc2 => {
-                                    if (
-                                        doc2.title == 'rectangle' &&
-                                        typeof lineDoc.x === 'number' &&
-                                        typeof lineDoc.width === 'number' &&
-                                        typeof doc2.x === 'number' &&
-                                        typeof doc2.width === 'number' &&
-                                        typeof doc2.y === 'number' &&
-                                        typeof doc2.height === 'number' &&
-                                        typeof lineDoc.y === 'number'
-                                    ) {
-                                        if (
-                                            lineDoc.x + lineDoc.width > doc2.x - (doc2.x - doc2.width) * 0.1 &&
-                                            lineDoc.x + lineDoc.width < doc2.x + doc2.width &&
-                                            lineDoc.y > doc2.y &&
-                                            lineDoc.y < doc2.y + doc2.height &&
-                                            typeof doc.x === 'number' &&
-                                            typeof doc.width === 'number'
-                                        ) {
-                                            mermaidCode += doc.title + Math.floor(doc.x).toString() + '-->' + doc2.title + Math.floor(doc2.x).toString() + ';';
-                                            const indexToRemove = docArray.findIndex(doc => doc === lineDoc);
-                                            if (indexToRemove !== -1) {
-                                                docArray.splice(indexToRemove, 1);
-                                            }
-                                        }
-                                    }
-                                });
+            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')
+            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)+ ';';
                             }
                         }
-                    });
+                    }
                 }
-                this.chartContent = mermaidCode;
-            });
+            }
         }
-    };
+        console.log(mermaidCode);
+        return mermaidCode;
+    }
+    getTextInBox=(box: Doc,richTextArray: Doc[]):string=>{
+        for(let i=0;i<richTextArray.length;i++){
+            let textDoc=richTextArray[i]
+            if(typeof textDoc.x==='number'&&
+            typeof textDoc.y==='number'&&
+            typeof box.x==='number'&&
+            typeof box.height==='number'&&
+            typeof box.width==='number'&&
+            typeof box.y==='number'){
+                if(textDoc.x>box.x&&textDoc.x<box.x+box.width&&textDoc.y>box.y&&textDoc.y<box.y+box.height){
+                    if(box.title=='rectangle'){
+                        return "("+(textDoc.text as RichTextField)?.Text+")"
+                    }
+                    if(box.title=='circle'){
+                        return "(("+(textDoc.text as RichTextField)?.Text+"))"
+                    }
+                }
+            }
+        }
+        return "( )";
+    }
+    isLineInFirstBox=(box: Doc,line: Doc):boolean=>{
+        if(
+        typeof line.x === 'number' &&
+        typeof box.x === 'number' &&
+        typeof box.width === 'number' &&
+        typeof box.height === 'number' &&
+        typeof box.y === 'number' &&
+        typeof line.y === 'number') {
+            return line.x < box.x + box.width + (box.width + box.x) * 0.1 && 
+            line.x > box.x && 
+            line.y > box.y && 
+            line.y < box.y + box.height
+        }
+        else{
+            return false;
+        }
+    }
+    isLineInSecondBox=(box:Doc,line:Doc):boolean=>{
+        if (
+        typeof line.x === 'number' &&
+        typeof line.width === 'number' &&
+        typeof box.x === 'number' &&
+        typeof box.width === 'number' &&
+        typeof box.y === 'number' &&
+        typeof box.height === 'number' &&
+        typeof line.y === 'number') {
+            return line.x + line.width > box.x - (box.x - box.width) * 0.1 &&
+            line.x + line.width < box.x + box.width &&
+            line.y > box.y &&
+            line.y < box.y + box.height;
+        }
+        else{
+            return false;
+        }
+    }
     render() {
-        console.log(this.ScreenToLocalBoxXf().Scale);
         return (
             <div id="dashDiv"></div>
         );
     }
 }
+