Initial commit to persist connections.

src/app.ts

@@ -38,8 +38,11 @@ export class App {
     constructor() {
         const config = AppConfig.config;
         log.setLevel('info');
-        log.getLogger('App').setLevel('debug');
+        log.getLogger('App').setLevel('info');
-        log.getLogger('PeerjsNetworkConnection').setLevel('debug');
+        log.getLogger('IndexdbPersistenceManager').setLevel('info');
+        log.getLogger('DiagramManager').setLevel('info');
+
+        log.getLogger('DiagramConnection').setLevel('debug');
         const canvas = document.createElement("canvas");
         canvas.style.width = "100%";
         canvas.style.height = "100%";

src/diagram/diagramConnection.ts

@@ -7,96 +7,133 @@ import {
     TransformNode,
     Vector3
 } from "@babylonjs/core";
+import log, {Logger} from "loglevel";
+
 
 export class DiagramConnection {
-    private mesh: GreasedLineMesh;
+    private logger: Logger = log.getLogger('DiagramConnection');
+
+    constructor(from: string, to: string, scene?: Scene, pointerInfo?: PointerInfo) {
+        this.logger.debug('buildConnection constructor');
+        this.scene = scene;
+        this._to = to;
+        this._from = from;
+        const fromMesh = this.scene.getMeshById(from);
+        if (fromMesh) {
+            this.fromAnchor = fromMesh;
+        }
+        const toMesh = this.scene.getMeshById(to);
+        if (toMesh) {
+            this.toAnchor = toMesh;
+        } else {
+            if (fromMesh) {
+                this.toAnchor = new TransformNode(this.id + "_to", this.scene);
+                this.toAnchor.id = this.id + "_to";
+                this.toAnchor.position = fromMesh.absolutePosition.clone();
+                if (pointerInfo) {
+                    this.toAnchor.setParent(pointerInfo.pickInfo.gripTransform);
+                }
+            }
+        }
+        this.buildConnection();
+    }
     private readonly scene: Scene;
     private toAnchor: TransformNode;
     private fromAnchor: TransformNode;
-    private pointerInfo: PointerInfo;
     private points: Vector3[] = [];
 
-    constructor(from: string, to: string, id: string, scene: Scene, pointerInfo: PointerInfo) {
+    private _mesh: GreasedLineMesh;
-        this._from = from;
-        this._to = to;
-        this._id = id;
-        this.scene = scene;
-        this.pointerInfo = pointerInfo;
 
-        if (from) {
+    public get mesh(): GreasedLineMesh {
-            const fromMesh = this.scene.getMeshById(from);
+        return this._mesh;
-            if (fromMesh) {
-                this.fromAnchor = fromMesh;
-                this.toAnchor = new TransformNode("toAnchor", this.scene);
-                this.toAnchor.position = fromMesh.absolutePosition.clone();
-                this.toAnchor.setParent(pointerInfo.pickInfo.gripTransform);
-
-                this.buildConnection();
-            }
-
-        }
     }
 
-    public _from: string;
+    private _to: string;
-
-    public get from(): string {
-        return this._from;
-    }
-
-    public set from(value: string) {
-        this._from = value;
-    }
-
-    public _to: string;
 
     public get to(): string {
-        return this._to;
+        return this?.toAnchor?.id;
     }
 
     public set to(value: string) {
         if (!value) {
             return;
         }
-        const toMesh = this.scene.getMeshById(value);
+        const toAnchor = this.scene.getMeshById(value);
-        if (toMesh) {
+        if (this.fromAnchor && toAnchor) {
-            const toAnchor = this.toAnchor;
+            this.toAnchor.dispose();
-            this.toAnchor = toMesh;
+            this.toAnchor = toAnchor;
-            toAnchor.dispose();
+            this._mesh.metadata.to = this.to;
+            this._mesh.id = this.id;
             this.recalculate();
             this.setPoints();
-            this._to = value;
         }
     }
 
-    public _id: string;
+    private _from: string;
+
+    public get from(): string {
+        return this?.fromAnchor?.id;
+    }
 
     public get id(): string {
-        return this._id;
+        return "connection_" + this?.fromAnchor?.id + "_" + this?.toAnchor?.id;
     }
 
     private recalculate() {
-        //this.fromAnchor.computeWorldMatrix(true);
+        if (this.fromAnchor && this.toAnchor) {
-        //this.toAnchor.computeWorldMatrix(true);
+            this.points = [this.fromAnchor.absolutePosition, this.toAnchor.absolutePosition];
-        this.points = [this.fromAnchor.absolutePosition, this.toAnchor.absolutePosition];
+        } else {
+            this.points = [Vector3.Zero(), Vector3.Zero()];
+        }
+
     }
 
     private setPoints() {
-        this.mesh.setPoints([GreasedLineTools.ToNumberArray(this.points)]);
+        if (this.points.length > 1) {
+            this._mesh.setPoints([GreasedLineTools.ToNumberArray(this.points)]);
+        }
+
     }
 
     private buildConnection() {
+        this.logger.debug('buildConnection');
+        this.logger.debug(this._to);
+        this.logger.debug(this._from);
 
         this.recalculate();
-
+        this._mesh = CreateGreasedLine(this.id,
-        this.mesh = CreateGreasedLine("connection",
             {points: (GreasedLineTools.ToNumberArray(this.points) as number[]), updatable: true}, null, this.scene);
-
+        this._mesh.id = this.id;
+        if (!this._mesh.metadata) {
+            this._mesh.metadata = {template: "#connection-template", from: this._from};
+        }
+        if (this._to) {
+            this.mesh.metadata.to = this.to;
+        }
         this.setPoints();
         this.scene.onBeforeRenderObservable.add(() => {
             this.recalculate();
             this.setPoints();
         });
+        this.scene.onNewMeshAddedObservable.add((mesh) => {
+            if (mesh && mesh.id) {
+                if (!this.toAnchor || !this.fromAnchor) {
+                    this.logger.debug('render');
+                    if (mesh?.id == this?._to) {
+                        this.logger.debug("Found to anchor");
+                        this.toAnchor = mesh;
+                        this._mesh.metadata.to = this.to;
+                    }
+                    if (mesh?.id == this?._from) {
+                        this.logger.debug("Found from anchor");
+                        this.fromAnchor = mesh;
+                        this._mesh.metadata.from = this.from;
+                    }
+                }
+            }
+
+        }, -1, true, this);
+        return;
 
-        //this.mesh.outlineColor = new Color3(0.5, 0.5, 1);
     }
-}
+}

src/diagram/diagramEntity.ts

@@ -17,6 +17,7 @@ export type DiagramEvent = {
     type: DiagramEventType;
     menustate?: EditMenuState;
     entity?: DiagramEntity;
+
     oldColor?: Color3;
     newColor?: Color3;
 
@@ -24,6 +25,8 @@ export type DiagramEvent = {
 export type DiagramEntity = {
     color?: string;
     id?: string;
+    from?: string;
+    to?: string;
     last_seen?: Date;
     position?: Vector3;
     rotation?: Vector3;

src/diagram/diagramManager.ts

@@ -196,6 +196,9 @@ class DiagramShapePhysics {
             this.logger.error("applyPhysics: mesh.metadata.template is null", mesh);
             return;
         }
+        if (mesh.metadata.template == '#connector-template') {
+            return;
+        }
         if (!scene) {
             this.logger.error("applyPhysics: mesh or scene is null");
             return;

src/diagram/meshConverter.ts

@@ -3,6 +3,7 @@ import {AbstractMesh, Color3, InstancedMesh, Mesh, Quaternion, Scene, StandardMa
 import {v4 as uuidv4} from 'uuid';
 import log from "loglevel";
 import {TextLabel} from "./textLabel";
+import {DiagramConnection} from "./diagramConnection";
 
 export class MeshConverter {
     private static logger = log.getLogger('MeshConverter');
@@ -18,10 +19,13 @@ export class MeshConverter {
         }
         entity.id = mesh.id;
         entity.position = mesh.position;
+
         entity.rotation = mesh.rotation;
         entity.last_seen = new Date();
         entity.template = mesh?.metadata?.template;
         entity.text = mesh?.metadata?.text;
+        entity.from = mesh?.metadata?.from;
+        entity.to = mesh?.metadata?.to;
         entity.scale = mesh.scaling;
         if (mesh.material) {
             entity.color = (mesh.material as any).diffuseColor.toHexString();
@@ -38,10 +42,14 @@ export class MeshConverter {
         if (!entity.id) {
             entity.id = "id" + uuidv4();
         }
-        let mesh = scene.getMeshById(entity.id);
+        let mesh: AbstractMesh = scene.getMeshById(entity.id);
         if (mesh) {
             log.debug('mesh already exists');
         } else {
+            if (entity.template == "#connection-template") {
+                const connection: DiagramConnection = new DiagramConnection(entity.from, entity.to, scene);
+
+            }
             mesh = scene.getMeshById("tool-" + entity.template + "-" + entity.color);
             if (mesh) {
                 if (mesh.isAnInstance) {
@@ -80,6 +88,12 @@ export class MeshConverter {
                 mesh.metadata.text = entity.text;
                 TextLabel.updateTextNode(mesh, entity.text);
             }
+            if (entity.from) {
+                mesh.metadata.from = entity.from;
+            }
+            if (entity.to) {
+                mesh.metadata.to = entity.to;
+            }
         } else {
             this.logger.error("fromDiagramEntity: mesh is null after it should have been created");
         }

src/menus/editMenu.ts

@@ -133,11 +133,11 @@ export class EditMenu {
             this.connection.to = mesh.id;
             this.diagramManager.onDiagramEventObservable.notifyObservers({
                 type: DiagramEventType.ADD,
-                entity: this.connection,
+                entity: MeshConverter.toDiagramEntity(this.connection.mesh)
             });
             this.connection = null;
         } else {
-            this.connection = new DiagramConnection(mesh.id, null, null, this.scene, pointerInfo);
+            this.connection = new DiagramConnection(mesh.id, null, this.scene, pointerInfo);
         }
     }