Fixed up persistenceManager.ts and created mesh converter.

src/controllers/left.ts

@@ -50,7 +50,7 @@ export class Left extends Base {
             Base.stickVector.x = 0;
         }
         if (Math.abs(value.y) > .1) {
-            Controllers.controllerObserver.notifyObservers({type: 'updown', value: value.y * this.speedFactor});
+            Controllers.controllerObserver.notifyObservers({type: 'forwardback', value: value.y * this.speedFactor});
             Base.stickVector.y = 1;
         } else {
             Base.stickVector.y = 0;
@@ -58,7 +58,7 @@ export class Left extends Base {
 
         if (Base.stickVector.equals(Vector3.Zero())) {
             Controllers.controllerObserver.notifyObservers({type: 'leftright', value: 0});
-            Controllers.controllerObserver.notifyObservers({type: 'updown', value: 0});
+            Controllers.controllerObserver.notifyObservers({type: 'forwardback', value: 0});
         } else {
 
         }

src/controllers/right.ts

@@ -103,14 +103,14 @@ export class Right extends Base {
             Controllers.controllerObserver.notifyObservers({type: 'turn', value: 0});
         }
         if (Math.abs(value.y) > .1) {
-            Controllers.controllerObserver.notifyObservers({type: 'forwardback', value: value.y * this.speedFactor});
+            Controllers.controllerObserver.notifyObservers({type: 'updown', value: value.y * this.speedFactor});
             Base.stickVector.z = 1;
         } else {
-            Controllers.controllerObserver.notifyObservers({type: 'forwardback', value: 0});
+            Controllers.controllerObserver.notifyObservers({type: 'updown', value: 0});
             Base.stickVector.z = 0;
         }
         if (Base.stickVector.equals(Vector3.Zero())) {
-            Controllers.controllerObserver.notifyObservers({type: 'forwardback', value: 0});
+            Controllers.controllerObserver.notifyObservers({type: 'updown', value: 0});
         }
     }
 

src/diagram/diagramManager.ts

@@ -1,8 +1,6 @@
 import {
     AbstractMesh,
-    Color3, DynamicTexture,
+    Color3,
-    Mesh,
-    MeshBuilder,
     Observable,
     Scene,
     StandardMaterial,
@@ -10,10 +8,12 @@ import {
 } from "@babylonjs/core";
 import {v4 as uuidv4} from 'uuid';
 import {DiagramEntity, DiagramEvent, DiagramEventType} from "./diagramEntity";
-import {PersistenceManager} from "./persistenceManager";
+import {IPersistenceManager} from "./persistenceManager";
+import {IndexdbPersistenceManager} from "./indexdbPersistenceManager";
+import {MeshConverter} from "./meshConverter";
 
 export class DiagramManager {
-    private persistenceManager: PersistenceManager = new PersistenceManager();
+    private persistenceManager: IPersistenceManager = new IndexdbPersistenceManager("diagram");
     static onDiagramEventObservable = new Observable();
     private readonly scene: Scene;
     private xr: WebXRExperienceHelper;
@@ -48,12 +48,8 @@ export class DiagramManager {
     #onDiagramEvent(event: DiagramEvent) {
         const entity = event.entity;
         let mesh;
-        let material
         if (entity) {
             mesh = this.scene.getMeshByName(entity.id);
-            if (mesh) {
-                material = mesh.material;
-            }
         }
 
         switch (event.type) {
@@ -67,18 +63,17 @@ export class DiagramManager {
                 break;
             case DiagramEventType.DROP:
                 if (DiagramManager.currentMesh) {
-                    this.persistenceManager.add(DiagramManager.currentMesh);
                     const newName = uuidv4();
                     const newMesh = DiagramManager.currentMesh.clone("id" + newName, DiagramManager.currentMesh.parent);
-
+                    newMesh.id = "id" + newName;
                     newMesh.material = DiagramManager.currentMesh.material.clone("material" + newName);
                     DiagramManager.currentMesh.setParent(null);
-                    //DiagramManager.currentMesh.billboardMode = Mesh.BILLBOARDMODE_Y;
+                    this.persistenceManager.add(DiagramManager.currentMesh);
-                    DiagramManager.currentMesh = newMesh;
                     DiagramManager.onDiagramEventObservable.notifyObservers({
                         type: DiagramEventType.DROPPED,
-                        entity: entity
+                        entity: MeshConverter.toDiagramEntity(DiagramManager.currentMesh)
                     });
+                    DiagramManager.currentMesh = newMesh;
                 }
                 break;
             case DiagramEventType.ADD:
@@ -89,12 +84,6 @@ export class DiagramManager {
                     return;
                 } else {
                     mesh = this.#createMesh(entity);
-                    if (!material) {
-
-                    }
-                    if (!mesh) {
-                        return;
-                    }
                 }
                 DiagramManager.currentMesh = mesh;
                 break;
@@ -102,17 +91,7 @@ export class DiagramManager {
                 if (!mesh) {
 
                 } else {
-                    if (!material) {
 
-                    }
-                    mesh.material = material;
-                    mesh.position = entity.position;
-                    mesh.rotation = entity.rotation;
-                    if (entity.parent) {
-                        mesh.parent = this.scene.getMeshByName(entity.parent);
-                    } else {
-
-                    }
                 }
                 DiagramManager.currentMesh = mesh;
                 break;
@@ -120,94 +99,7 @@ export class DiagramManager {
                 break;
         }
     }
-
     #createMesh(entity: DiagramEntity) {
-        if (!entity.id) {
+        return MeshConverter.fromDiagramEntity(entity, this.scene);
-            entity.id = "id" + uuidv4();
-        }
-        let mesh: Mesh;
-        switch (entity.template) {
-            case "#plane-template":
-
-            case "#text-template":
-
-                const material = new StandardMaterial("material-" + entity.id, this.scene);
-                material.backFaceCulling = false;
-                const font_size = 48;
-                const font = "bold 48px roboto";
-                const planeHeight=1;
-                const DTHeight = 1.5*font_size;
-                const ratio = planeHeight / DTHeight;
-                const text = 'This is some text to put on a plane';
-                const tempText = new DynamicTexture("dynamic texture", 64, this.scene);
-                const tempContext = tempText.getContext();
-                tempContext.font = font;
-                const DTWidth = tempContext.measureText(text).width;
-                const planeWidth = DTWidth * ratio;
-
-
-                const myDynamicTexture = new DynamicTexture("dynamic texture",
-                    {width: DTWidth, height: DTHeight},
-                    this.scene, false);
-                mesh= MeshBuilder.CreatePlane(entity.id, {
-                    width: planeWidth,
-                    height: planeHeight
-                }, this.scene);
-
-                myDynamicTexture.drawText('This is some short text',
-                    null, null,
-
-                    font, "#000000", "#FFFFFF",
-                    true, true);
-                material.diffuseTexture = myDynamicTexture;
-                mesh.material = material;
-
-                break;
-            case "#box-template":
-                mesh = MeshBuilder.CreateBox(entity.id,
-                    {
-                        width: 1,
-                        height: 1,
-                        depth: 1
-                    }, this.scene);
-
-                break;
-            case "#sphere-template":
-                mesh = MeshBuilder.CreateSphere(entity.id, {diameter: 1}, this.scene);
-                break
-            case "#cylinder-template":
-                mesh = MeshBuilder.CreateCylinder(entity.id, {
-                    diameter: 1,
-                    height: 1
-                }, this.scene);
-                break;
-            default:
-                mesh = null;
-        }
-        if (mesh) {
-            mesh.metadata = {template: entity.template};
-            if (entity.text) {
-                mesh.metadata.text = entity.text;
-            }
-            if (entity.position) {
-                mesh.position = entity.position;
-            }
-            if (entity.rotation) {
-                mesh.rotation = entity.rotation;
-            }
-            if (entity.parent) {
-                mesh.parent = this.scene.getMeshByName(entity.parent);
-            }
-            if (entity.scale) {
-                mesh.scaling = entity.scale;
-            }
-            if (!mesh.material) {
-                const material = new StandardMaterial("material-" + entity.id, this.scene);
-                material.diffuseColor = Color3.FromHexString(entity.color);
-                mesh.material = material;
-            }
-        }
-
-        return mesh;
     }
 }

src/diagram/indexdbPersistenceManager.ts

@@ -0,0 +1,58 @@
+import {IPersistenceManager} from "./persistenceManager";
+import {AbstractMesh, Observable, Vector3} from "@babylonjs/core";
+import {DiagramEntity} from "./diagramEntity";
+import Dexie from "dexie";
+import {MeshConverter} from "./meshConverter";
+
+export class IndexdbPersistenceManager implements  IPersistenceManager {
+    public updateObserver: Observable<DiagramEntity> = new Observable<DiagramEntity>();
+    private db: Dexie;
+    constructor(name: string) {
+        this.db = new Dexie(name);
+        this.db.version(1).stores({entities: "id,position,rotation,last_seen,template,text,scale,color"});
+    }
+    public  add(mesh: AbstractMesh) {
+        const entity = <any>MeshConverter.toDiagramEntity(mesh);
+        entity.position = this.vectoxys(mesh.position);
+        entity.rotation = this.vectoxys(mesh.rotation);
+        entity.scale = this.vectoxys(mesh.scaling);
+
+        this.db["entities"].add(entity);
+    }
+    private vectoxys(v: Vector3): {x, y ,z} {
+        return {x: v.x, y: v.y, z: v.z};
+    }
+    private xyztovec(xyz: {x, y, z}): Vector3 {
+        return new Vector3(xyz.x, xyz.y, xyz.z);
+    }
+
+    public  remove() {
+
+    }
+    public  modify() {
+
+    }
+    public initialize() {
+        this.db['entities'].each((e) => {
+            e.position = this.xyztovec(e.position);
+            e.rotation = this.xyztovec(e.rotation);
+            e.scale = this.xyztovec(e.scale);
+            console.log(e);
+            this.updateObserver.notifyObservers(e);
+        });
+    }
+
+    private dummyEntity(): DiagramEntity {
+        const entity: DiagramEntity = <DiagramEntity>{};
+        entity.id = "test";
+        entity.position = new Vector3(0,2,-5);
+        entity.rotation = Vector3.Zero();
+        entity.last_seen = new Date();
+        entity.scale = new Vector3(.1,.1,.1);
+        entity.color = "#ff0000";
+        entity.text = "test";
+        entity.parent = null;
+        entity.template = "#text-template";
+        return entity;
+    }
+}

src/diagram/meshConverter.ts

@@ -0,0 +1,120 @@
+import {DiagramEntity} from "./diagramEntity";
+import {
+    AbstractMesh,
+    Color3,
+    DynamicTexture,
+    Mesh,
+    MeshBuilder,
+    Scene,
+    StandardMaterial
+} from "@babylonjs/core";
+import {v4 as uuidv4} from 'uuid';
+
+export class MeshConverter {
+    public static toDiagramEntity(mesh: AbstractMesh): DiagramEntity {
+        const entity = <DiagramEntity>{};
+        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.scale = mesh.scaling;
+        if (mesh.material) {
+            entity.color = (mesh.material as any).diffuseColor.toHexString();
+        }
+        return entity;
+    }
+    public static fromDiagramEntity(entity: DiagramEntity, scene: Scene): AbstractMesh {
+
+            if (!entity.id) {
+                entity.id = "id" + uuidv4();
+            }
+            let mesh: Mesh;
+            switch (entity.template) {
+                case "#plane-template":
+
+                case "#text-template":
+
+                    const material = new StandardMaterial("material-" + entity.id, scene);
+                    material.backFaceCulling = false;
+                    const font_size = 48;
+                    const font = "bold 48px roboto";
+                    const planeHeight=1;
+                    const DTHeight = 1.5*font_size;
+                    const ratio = planeHeight / DTHeight;
+                    const text = 'This is some text to put on a plane';
+                    const tempText = new DynamicTexture("dynamic texture", 64, scene);
+                    const tempContext = tempText.getContext();
+                    tempContext.font = font;
+                    const DTWidth = tempContext.measureText(text).width;
+                    const planeWidth = DTWidth * ratio;
+
+
+                    const myDynamicTexture = new DynamicTexture("dynamic texture",
+                        {width: DTWidth, height: DTHeight},
+                        scene, false);
+                    mesh= MeshBuilder.CreatePlane(entity.id, {
+                        width: planeWidth,
+                        height: planeHeight
+                    }, scene);
+
+                    myDynamicTexture.drawText('This is some short text',
+                        null, null,
+
+                        font, "#000000", "#FFFFFF",
+                        true, true);
+                    material.diffuseTexture = myDynamicTexture;
+                    mesh.material = material;
+
+                    break;
+                case "#box-template":
+                    mesh = MeshBuilder.CreateBox(entity.id,
+                        {
+                            width: 1,
+                            height: 1,
+                            depth: 1
+                        }, scene);
+
+                    break;
+                case "#sphere-template":
+                    mesh = MeshBuilder.CreateSphere(entity.id, {diameter: 1}, scene);
+                    break
+                case "#cylinder-template":
+                    mesh = MeshBuilder.CreateCylinder(entity.id, {
+                        diameter: 1,
+                        height: 1
+                    }, scene);
+                    break;
+                default:
+                    mesh = null;
+            }
+            if (mesh) {
+                mesh.metadata = {template: entity.template};
+                if (entity.text) {
+                    mesh.metadata.text = entity.text;
+                }
+                if (entity.position) {
+                    mesh.position = entity.position;
+                }
+                if (entity.rotation) {
+                    mesh.rotation = entity.rotation;
+                }
+                if (entity.parent) {
+                    mesh.parent = scene.getMeshByName(entity.parent);
+                }
+                if (entity.scale) {
+                    mesh.scaling = entity.scale;
+                }
+                if (!mesh.material) {
+                    const material = new StandardMaterial("material-" + entity.id, scene);
+                    material.diffuseColor = Color3.FromHexString(entity.color);
+                    mesh.material = material;
+                }
+            }
+
+            return mesh;
+
+    }
+
+}

src/diagram/persistenceManager.ts

@@ -1,61 +1,11 @@
-import {AbstractMesh, Observable, StandardMaterial, Vector3} from "@babylonjs/core";
+import {AbstractMesh, Observable} from "@babylonjs/core";
 import {DiagramEntity} from "./diagramEntity";
-import Dexie from "dexie";
 
-export class PersistenceManager {
+export interface IPersistenceManager {
-    public updateObserver: Observable<DiagramEntity> = new Observable<DiagramEntity>();
+    add(mesh: AbstractMesh);
-    private db: Dexie = new Dexie("diagram");
+    remove(mesh: AbstractMesh);
-    constructor() {
+    modify(mesh: AbstractMesh);
-        this.db.version(1).stores({entities: "id,position,rotation,last_seen,template,text,scale,color"});
+    initialize();
-    }
+    updateObserver: Observable<DiagramEntity>;
-    public  add(mesh: AbstractMesh) {
-        const entity = <any>{};
-        entity.id = mesh.id;
-        entity.position = this.vectoxys(mesh.position);
-        entity.rotation = this.vectoxys(mesh.rotation);
-        entity.last_seen = new Date().getDate();
-        entity.template = mesh?.metadata?.template;
-        entity.text = mesh?.metadata?.text;
-        entity.scale = this.vectoxys(mesh.scaling);
-        if (mesh.material) {
-            entity.color = (mesh.material as StandardMaterial).diffuseColor.toHexString();
-        }
-        this.db["entities"].add(entity);
-    }
-    private vectoxys(v: Vector3): {x, y ,z} {
-        return {x: v.x, y: v.y, z: v.z};
-    }
-    private xyztovec(xyz: {x, y, z}): Vector3 {
-        return new Vector3(xyz.x, xyz.y, xyz.z);
-    }
 
-    public  remove() {
-
-    }
-    public  modify() {
-
-    }
-    public initialize() {
-        this.db['entities'].each((e: DiagramEntity) => {
-            e.position = this.xyztovec(e.position);
-            e.rotation = this.xyztovec(e.rotation);
-            e.scale = this.xyztovec(e.scale);
-            console.log(e);
-            this.updateObserver.notifyObservers(e);
-        });
-    }
-
-    private dummyEntity(): DiagramEntity {
-        const entity: DiagramEntity = <DiagramEntity>{};
-        entity.id = "test";
-        entity.position = new Vector3(0,2,-5);
-        entity.rotation = Vector3.Zero();
-        entity.last_seen = new Date();
-        entity.scale = new Vector3(.1,.1,.1);
-        entity.color = "#ff0000";
-        entity.text = "test";
-        entity.parent = null;
-        entity.template = "#text-template";
-        return entity;
-    }
 }