1 files changed, 41 insertions, 47 deletions

diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index e2af0b670..376dff15d 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -1,85 +1,79 @@
-import { action, computed, makeObservable, observable } from 'mobx';
+import { makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { emptyFunction, setupMoveUpEvents } from '../../../Utils';
-import { Doc, Opt } from '../../../fields/Doc';
-import { DocCast, NumCast, StrCast } from '../../../fields/Types';
-import { Docs } from '../../documents/Documents';
-import { DragManager } from '../../util/DragManager';
-import { undoBatch } from '../../util/UndoManager';
 import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../DocComponent';
 import { StyleProp } from '../StyleProvider';
 import './ComparisonBox.scss';
 import { FieldView, FieldViewProps } from './FieldView';
 import { PinProps, PresBox } from './trails';
 import mermaid from 'mermaid';
+import { Doc, DocListCast } from '../../../fields/Doc';
+import { List } from '../../../fields/List';
 
 interface MermaidProps {
-    chart: String; 
-  }
+    chart: String;
+}
 
 class Mermaid extends React.Component<MermaidProps> {
     componentDidMount() {
-      mermaid.contentLoaded();
+        mermaid.contentLoaded();
     }
     render() {
-      return <div className="mermaid">{this.props.chart}</div>;
+        return <pre className="mermaid">{this.props.chart}</pre>;
     }
-  }
+}
 
 @observer
 export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface {
-    
+    @observable chartContent: string = '';
+
     public static LayoutString(fieldKey: string) {
         return FieldView.LayoutString(DiagramBox, fieldKey);
     }
     constructor(props: FieldViewProps) {
         super(props);
         makeObservable(this);
-        mermaid.initialize({ startOnLoad: true });
+        //this.createMermaidCode();
+        this.chartContent = 'graph LR;A-->B;B-->C; B-->D[hello];';
     }
 
-    @observable _animating = '';
-
-    @computed get clipWidth() {
-        return NumCast(this.layoutDoc[this.clipWidthKey], 50);
-    }
-    get clipWidthKey() {
-        return '_' + this._props.fieldKey + '_clipWidth';
-    }
- 
     componentDidMount() {
         this._props.setContentViewBox?.(this);
+        mermaid.initialize({ startOnLoad: true });
     }
-    getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => {
-        const anchor = Docs.Create.ConfigDocument({
-            title: 'CompareAnchor:' + this.Document.title,
-            // set presentation timing properties for restoring view
-            presentation_transition: 1000,
-            annotationOn: this.Document,
-        });
-        if (anchor) {
-            if (!addAsAnnotation) anchor.backgroundColor = 'transparent';
-            /* addAsAnnotation &&*/ this.addDocument(anchor);
-            PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), clippable: true } }, this.Document);
-            return anchor;
+    createMermaidCode = (): void => {
+        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);
+                                            }
+                                        }
+                                    }
+                                });
+                            }
+                        }
+                    });
+                }
+                this.chartContent = mermaidCode;
+            });
         }
-        return this.Document;
-    };
-    docStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string): any => {
-        if (property === StyleProp.PointerEvents) return 'none';
-        return this._props.styleProvider?.(doc, props, property);
     };
-    _closeRef = React.createRef<HTMLDivElement>();
     render() {
+        console.log(this.chartContent)
         return (
             <div>
-                <Mermaid chart={`
-                    graph LR;
-                    A-->B;
-                    B-->C;
-                    B-->D[hi];  
-                    `}/>
+                <Mermaid chart={this.chartContent} />
             </div>
         );
     }