Initial web worker commit.

src/app.ts

@@ -15,9 +15,8 @@ import {AppConfig} from "./util/appConfig";
 import {GamepadManager} from "./controllers/gamepadManager";
 import {CustomEnvironment} from "./util/customEnvironment";
 import {Controllers} from "./controllers/controllers";
-import {Introduction} from "./tutorial/introduction";
+import workerUrl from "./worker?worker&url";
-import {IndexdbPersistenceManager} from "./integration/indexdbPersistenceManager";
+import {DiagramEventType} from "./diagram/diagramEntity";
-
 
 export class App {
     //preTasks = [havokModule];
@@ -43,22 +42,44 @@ export class App {
         const logger = log.getLogger('App');
         const engine = new Engine(canvas, true);
         const scene = new Scene(engine);
-
+        const config = new AppConfig();
-        const persistenceManager = new IndexdbPersistenceManager("diagram");
+        //const persistenceManager = new IndexdbPersistenceManager("diagram");
+        const worker = new Worker(workerUrl, {type: 'module'});
 
         const controllers = new Controllers();
         const toolbox = new Toolbox(scene, controllers);
-        const diagramManager = new DiagramManager(scene, controllers, toolbox);
+
-        diagramManager.setPersistenceManager(persistenceManager);
+
-        const config = new AppConfig(persistenceManager);
+        const diagramManager = new DiagramManager(scene, controllers, toolbox, config);
+        diagramManager.onDiagramEventObservable.add((evt) => {
+            worker.postMessage(evt);
+        }, 2);
+        worker.onmessage = (evt) => {
+            if (evt.data.entity) {
+                console.log(evt.data.entity);
+                diagramManager.onDiagramEventObservable.notifyObservers({
+                    type: DiagramEventType.ADD,
+                    entity: evt.data.entity
+                }, 1);
+            }
+            if (evt.data.config) {
+                console.log(evt.data.config);
+                config.onConfigChangedObservable.notifyObservers(evt.data.config, 1);
+            }
+        }
+
+        worker.postMessage({type: 'init'});
+
+        //diagramManager.setPersistenceManager(persistenceManager);
+
         const environment = new CustomEnvironment(scene, "default", config);
-        persistenceManager.initialize().then(() => {
+        /*persistenceManager.initialize().then(() => {
             if (!config.current?.demoCompleted) {
                 const intro = new Introduction(scene, config);
                 intro.start();
             }
         });
-
+*/
         const camera: ArcRotateCamera = new ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 4,
             new Vector3(0, 1.6, 0), scene);
 

src/controllers/base.ts

@@ -157,7 +157,7 @@ export class Base {
                 type: DiagramEventType.ADD,
                 entity: toDiagramEntity(newMesh)
             }
-            this.diagramManager.onDiagramEventObservable.notifyObservers(event);
+            this.diagramManager.onDiagramEventObservable.notifyObservers(event, 2);
         }
     }
 
@@ -202,7 +202,7 @@ export class Base {
             entity: entity
         }
 
-        this.diagramManager.onDiagramEventObservable.notifyObservers(event);
+        this.diagramManager.onDiagramEventObservable.notifyObservers(event, 2);
         const body = mesh?.physicsBody;
         if (body) {
             body.setMotionType(PhysicsMotionType.DYNAMIC);

src/diagram/diagramConnection.ts

@@ -30,12 +30,15 @@ export class DiagramConnection {
             this.toAnchor = toMesh;
         } else {
             if (fromMesh) {
-                this.toAnchor = new TransformNode(this.id + "_to", this.scene);
+                const to = new TransformNode(this.id + "_to", this.scene);
-                this.toAnchor.id = this.id + "_to";
+                to.ignoreNonUniformScaling = true;
-                this.toAnchor.position = fromMesh.absolutePosition.clone();
+                to.id = this.id + "_to";
+                to.position = fromMesh.absolutePosition.clone();
                 if (pointerInfo) {
-                    this.toAnchor.setParent(pointerInfo.pickInfo.gripTransform);
+                    to.setParent(pointerInfo.pickInfo.gripTransform);
                 }
+
+                this.toAnchor = to;
             }
         }
         this.buildConnection();

src/diagram/diagramEntity.ts

@@ -1,4 +1,4 @@
-import {Color3, Vector3} from "@babylonjs/core";
+import {Color3} from "@babylonjs/core";
 import {EditMenuState} from "../menus/editMenuState";
 
 export enum DiagramEventType {
@@ -28,12 +28,13 @@ export type DiagramEntity = {
     from?: string;
     to?: string;
     last_seen?: Date;
-    position?: Vector3;
+    position?: { x: number, y: number, z: number };
-    rotation?: Vector3;
+    rotation?: { x: number, y: number, z: number };
     template?: string;
     text?: string;
-    scale?: Vector3;
+    scale?: { x: number, y: number, z: number };
     parent?: string;
+    diagramlistingid?: string;
 }
 
 

src/diagram/diagramEventHandler.ts

@@ -1,11 +1,11 @@
 import {DiagramEvent, DiagramEventType} from "./diagramEntity";
 import log from "loglevel";
 import {applyPhysics} from "./functions/diagramShapePhysics";
-import {ActionManager, Color3, PhysicsMotionType, Scene} from "@babylonjs/core";
+import {ActionManager, PhysicsMotionType, Scene} from "@babylonjs/core";
 import {TextLabel} from "./textLabel";
 import {Toolbox} from "../toolbox/toolbox";
 import {DiaSounds} from "../util/diaSounds";
-import {IPersistenceManager} from "../integration/iPersistenceManager";
+
 import {fromDiagramEntity} from "./functions/fromDiagramEntity";
 
 
@@ -14,8 +14,7 @@ export function diagramEventHandler(event: DiagramEvent,
                                     toolbox: Toolbox,
                                     physicsEnabled: boolean,
                                     actionManager: ActionManager,
-                                    sounds: DiaSounds,
+                                    sounds: DiaSounds) {
-                                    persistenceManager: IPersistenceManager) {
     const entity = event.entity;
     let mesh;
     if (entity) {
@@ -42,13 +41,15 @@ export function diagramEventHandler(event: DiagramEvent,
             break;
         case DiagramEventType.DROP:
             if (mesh.metadata.template.indexOf('#') > -1) {
-                persistenceManager.modify(mesh);
+                //@TODO refactor
+                // persistenceManager.modify(entity);
                 TextLabel.updateTextNode(mesh, entity.text);
             }
 
             break;
         case DiagramEventType.ADD:
-            persistenceManager.add(mesh);
+            //@TODO refactor
+            //persistenceManager.add(event.entity);
             if (!mesh.actionManager) {
                 mesh.actionManager = actionManager;
             }
@@ -58,7 +59,8 @@ export function diagramEventHandler(event: DiagramEvent,
 
             break;
         case DiagramEventType.MODIFY:
-            persistenceManager.modify(mesh);
+            //@TODO refactor
+            //persistenceManager.modify(mesh);
             if (physicsEnabled) {
                 applyPhysics(sounds, mesh, scene);
             }
@@ -67,16 +69,19 @@ export function diagramEventHandler(event: DiagramEvent,
         case DiagramEventType.CHANGECOLOR:
             if (!event.oldColor) {
                 if (!event.newColor) {
-                    persistenceManager.changeColor(null, Color3.FromHexString(event.entity.color));
+                    //@TODO refactor
+                    //persistenceManager.changeColor(null, Color3.FromHexString(event.entity.color));
                     this.logger.info("Received color change event, sending entity color as new color");
                 } else {
                     this.logger.info("Received color change event, no old color, sending new color");
-                    persistenceManager.changeColor(null, event.newColor);
+                    //@TODO refactor
+                    //persistenceManager.changeColor(null, event.newColor);
                 }
             } else {
                 if (event.newColor) {
                     this.logger.info("changing color from " + event.oldColor + " to " + event.newColor);
-                    persistenceManager.changeColor(event.oldColor, event.newColor);
+                    //@TODO refactor
+                    //persistenceManager.changeColor(event.oldColor, event.newColor);
                 } else {
                     this.logger.error("changing color from " + event.oldColor + ", but no new color found");
                 }
@@ -85,7 +90,8 @@ export function diagramEventHandler(event: DiagramEvent,
             break;
         case DiagramEventType.REMOVE:
             if (mesh) {
-                persistenceManager.remove(mesh)
+                //@TODO refactor
+                //persistenceManager.remove(mesh.id)
                 mesh?.physicsBody?.dispose();
                 mesh.dispose();
                 sounds.exit.play();

src/diagram/diagramManager.ts

@@ -1,6 +1,5 @@
-import {AbstractMesh, Color3, InstancedMesh, Mesh, Observable, PhysicsMotionType, Scene} from "@babylonjs/core";
+import {AbstractMesh, InstancedMesh, Mesh, Observable, Scene} from "@babylonjs/core";
-import {DiagramEntity, DiagramEvent, DiagramEventType} from "./diagramEntity";
+import {DiagramEvent, DiagramEventType} from "./diagramEntity";
-import {IPersistenceManager} from "../integration/iPersistenceManager";
 import log from "loglevel";
 import {Controllers} from "../controllers/controllers";
 import {DiaSounds} from "../util/diaSounds";
@@ -13,13 +12,11 @@ import {deepCopy} from "../util/functions/deepCopy";
 import {applyPhysics} from "./functions/diagramShapePhysics";
 import {applyScaling} from "./functions/applyScaling";
 import {toDiagramEntity} from "./functions/toDiagramEntity";
-import {fromDiagramEntity} from "./functions/fromDiagramEntity";
 
 
 export class DiagramManager {
     public readonly onDiagramEventObservable: Observable<DiagramEvent> = new Observable();
     private readonly logger = log.getLogger('DiagramManager');
-    private persistenceManager: IPersistenceManager = null;
     private readonly toolbox: Toolbox;
     private readonly scene: Scene;
     private readonly sounds: DiaSounds;
@@ -28,9 +25,10 @@ export class DiagramManager {
     private presentationManager: PresentationManager;
     private _config: AppConfig;
 
-    constructor(scene: Scene, controllers: Controllers, toolbox: Toolbox) {
+    constructor(scene: Scene, controllers: Controllers, toolbox: Toolbox, config: AppConfig) {
         this.sounds = new DiaSounds(scene);
         this.scene = scene;
+        this._config = config;
         this.toolbox = toolbox;
         this.controllers = controllers;
         this.presentationManager = new PresentationManager(this.scene);
@@ -40,9 +38,12 @@ export class DiagramManager {
             this.logger.warn("onDiagramEventObservable already has Observers, you should be careful");
         }
         this.toolbox.colorChangeObservable.add((evt) => {
-            this.persistenceManager.changeColor(Color3.FromHexString(evt.oldColor), Color3.FromHexString(evt.newColor));
+            console.log(evt);
+            this.onDiagramEventObservable.notifyObservers({type: DiagramEventType.CHANGECOLOR}, 2);
+            //@TODO Refactor
+            //this.persistenceManager.changeColor(Color3.FromHexString(evt.oldColor), Color3.FromHexString(evt.newColor));
         }, -1, true, this, false);
-        this.onDiagramEventObservable.add(this.onDiagramEvent, -1, true, this);
+        this.onDiagramEventObservable.add(this.onDiagramEvent, 1, true, this);
         this.logger.debug("DiagramManager constructed");
 
         scene.onMeshRemovedObservable.add((mesh) => {
@@ -54,7 +55,7 @@ export class DiagramManager {
                             this.onDiagramEventObservable.notifyObservers({
                                 type: DiagramEventType.REMOVE,
                                 entity: toDiagramEntity(m)
-                            });
+                            }, -1);
                         }
                     });
                 }
@@ -65,11 +66,13 @@ export class DiagramManager {
     public get config(): AppConfig {
         return this._config;
     }
-    public setPersistenceManager(persistenceManager: IPersistenceManager) {
+
+    //@TODO Refactor
+    /*public setPersistenceManager(persistenceManager: IPersistenceManager) {
         this.persistenceManager = persistenceManager;
         this._config = new AppConfig(persistenceManager);
         this.persistenceManager.updateObserver.add(this.onRemoteEvent, -1, true, this);
-    }
+    }*/
     public createCopy(mesh: AbstractMesh, copy: boolean = false): AbstractMesh {
         let newMesh;
         if (!mesh.isAnInstance) {
@@ -90,30 +93,18 @@ export class DiagramManager {
         if (this.config.current?.physicsEnabled) {
             applyPhysics(this.sounds, newMesh, this.scene);
         }
-        this.persistenceManager.add(newMesh);
+        //@TODO Refactor
+        this.onDiagramEventObservable.notifyObservers({
+            type: DiagramEventType.ADD,
+            entity: toDiagramEntity(newMesh)
+        }, 2);
+        //this.persistenceManager.add(toDiagramEntity(newMesh));
         return newMesh;
     }
 
-    private onRemoteEvent(event: DiagramEntity) {
-        this.logger.debug(event);
-        const toolMesh = this.scene.getMeshById("tool-" + event.template + "-" + event.color);
-        if (!toolMesh && (event.template != '#connection-template')) {
-            log.debug('no mesh found for ' + event.template + "-" + event.color, 'adding it');
-            this.toolbox.updateToolbox(event.color);
-        }
-        const mesh = fromDiagramEntity(event, this.scene);
-        mesh.actionManager = this.diagramEntityActionManager.manager;
-        if (event.parent) {
-            mesh.parent = this.scene.getMeshById(event.parent);
-        }
-        if (this.config.current?.physicsEnabled) {
-            applyPhysics(this.sounds, mesh, this.scene, PhysicsMotionType.DYNAMIC);
-        }
-    }
-
     private onDiagramEvent(event: DiagramEvent) {
         diagramEventHandler(
             event, this.scene, this.toolbox, this.config.current.physicsEnabled,
-            this.diagramEntityActionManager.manager, this.sounds, this.persistenceManager);
+            this.diagramEntityActionManager.manager, this.sounds);
     }
 }

src/diagram/functions/fromDiagramEntity.ts

@@ -1,5 +1,5 @@
 import {DiagramEntity} from "../diagramEntity";
-import {AbstractMesh, Color3, InstancedMesh, Mesh, Quaternion, Scene, StandardMaterial} from "@babylonjs/core";
+import {AbstractMesh, Color3, InstancedMesh, Mesh, Quaternion, Scene, StandardMaterial, Vector3} from "@babylonjs/core";
 import {DiagramConnection} from "../diagramConnection";
 import {TextLabel} from "../textLabel";
 import log from "loglevel";
@@ -40,20 +40,20 @@ export function fromDiagramEntity(entity: DiagramEntity, scene: Scene): Abstract
     if (mesh) {
         mesh.metadata = {template: entity.template};
         if (entity.position) {
-            mesh.position = entity.position;
+            mesh.position = xyztovec(entity.position);
         }
         if (entity.rotation) {
             if (mesh.rotationQuaternion) {
                 mesh.rotationQuaternion = Quaternion.FromEulerAngles(entity.rotation.x, entity.rotation.y, entity.rotation.z);
             } else {
-                mesh.rotation = entity.rotation;
+                mesh.rotation = xyztovec(entity.rotation);
             }
         }
         if (entity.parent) {
             mesh.parent = scene.getNodeById(entity.parent);
         }
         if (entity.scale) {
-            mesh.scaling = entity.scale;
+            mesh.scaling = xyztovec(entity.scale);
         }
         if (!mesh.material) {
             const material = new StandardMaterial("material-" + entity.id, scene);
@@ -75,3 +75,8 @@ export function fromDiagramEntity(entity: DiagramEntity, scene: Scene): Abstract
     }
     return mesh;
 }
+
+
+function xyztovec(xyz: { x, y, z }): Vector3 {
+    return new Vector3(xyz.x, xyz.y, xyz.z);
+}

src/diagram/functions/toDiagramEntity.ts

@@ -1,4 +1,4 @@
-import {AbstractMesh} from "@babylonjs/core";
+import {AbstractMesh, Vector3} from "@babylonjs/core";
 import {DiagramEntity} from "../diagramEntity";
 import log from "loglevel";
 import {v4 as uuidv4} from 'uuid';
@@ -16,14 +16,14 @@ export function toDiagramEntity(mesh: AbstractMesh): DiagramEntity {
         mesh.id = "id" + uuidv4();
     }
     entity.id = mesh.id;
-    entity.position = mesh.position;
+    entity.position = vectoxys(mesh.position);
-    entity.rotation = mesh.rotation;
+    entity.rotation = vectoxys(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;
+    entity.scale = vectoxys(mesh.scaling);
     if (mesh.material) {
         entity.color = (mesh.material as any).diffuseColor.toHexString();
     } else {
@@ -31,3 +31,7 @@ export function toDiagramEntity(mesh: AbstractMesh): DiagramEntity {
     }
     return entity;
 }
+
+function vectoxys(v: Vector3): { x, y, z } {
+    return {x: v.x, y: v.y, z: v.z};
+}

src/integration/iPersistenceManager.ts

@@ -1,4 +1,4 @@
-import {AbstractMesh, Color3, Observable} from "@babylonjs/core";
+import {Color3, Observable} from "@babylonjs/core";
 import {DiagramEntity} from "../diagram/diagramEntity";
 import {AppConfigType} from "../util/appConfigType";
 
@@ -33,11 +33,11 @@ export interface IPersistenceManager {
 
     removeDiagram(diagram: DiagramListing);
 
-    add(mesh: AbstractMesh);
+    add(mesh: DiagramEntity);
 
-    remove(mesh: AbstractMesh);
+    remove(id: string);
 
-    modify(mesh: AbstractMesh);
+    modify(mesh: DiagramEntity);
 
     initialize();
 

src/integration/indexdbPersistenceManager.ts

@@ -1,11 +1,9 @@
 import {DiagramListing, DiagramListingEvent, DiagramListingEventType, IPersistenceManager} from "./iPersistenceManager";
-import {AbstractMesh, Observable, Vector3} from "@babylonjs/core";
+import {Observable} from "@babylonjs/core";
 import {DiagramEntity} from "../diagram/diagramEntity";
 import Dexie from "dexie";
-
 import log from "loglevel";
 import {AppConfigType} from "../util/appConfigType";
-import {toDiagramEntity} from "../diagram/functions/toDiagramEntity";
 
 export class IndexdbPersistenceManager implements IPersistenceManager {
     private readonly logger = log.getLogger('IndexdbPersistenceManager');
@@ -29,18 +27,14 @@ export class IndexdbPersistenceManager implements IPersistenceManager {
         this.currentDiagramId = diagram.id;
     }
 
-    public add(mesh: AbstractMesh) {
+    public add(entity: DiagramEntity) {
-        if (!mesh) {
+        if (!entity) {
             this.logger.error("Adding null mesh, early return");
             return;
         }
-        const entity = <any>toDiagramEntity(mesh);
-        entity.position = this.vectoxys(mesh.position);
-        entity.rotation = this.vectoxys(mesh.rotation);
-        entity.scale = this.vectoxys(mesh.scaling);
         entity.diagramlistingid = this.currentDiagramId;
         this.db["entities"].add(entity);
-        this.logger.debug('add', mesh, entity);
+        this.logger.debug('add', entity);
     }
 
     public addDiagram(diagram: DiagramListing) {
@@ -52,12 +46,12 @@ export class IndexdbPersistenceManager implements IPersistenceManager {
         this.diagramListingObserver.notifyObservers(event);
     }
 
-    public remove(mesh: AbstractMesh) {
+    public remove(id: string) {
-        if (!mesh) {
+        if (!id) {
             this.logger.error("Removing null mesh, early return");
             return;
         }
-        this.db["entities"].delete(mesh.id);
+        this.db["entities"].delete(id);
     }
 
     public setConfig(config: AppConfigType) {
@@ -136,9 +130,6 @@ export class IndexdbPersistenceManager implements IPersistenceManager {
             );
         }
         this.getFilteredEntities().each((e) => {
-            e.position = this.xyztovec(e.position);
-            e.rotation = this.xyztovec(e.rotation);
-            e.scale = this.xyztovec(e.scale);
             this.logger.debug('adding', e);
             this.updateObserver.notifyObservers(e);
         });
@@ -146,21 +137,13 @@ export class IndexdbPersistenceManager implements IPersistenceManager {
         this.logger.info("initialize finished");
     }
 
-    public modify(mesh) {
+    public modify(entity: DiagramEntity) {
-        if (!mesh) {
-            this.logger.error("Modifying null mesh, early return");
-            return;
-        }
-        const entity = <any>toDiagramEntity(mesh);
         if (!entity) {
             this.logger.error("Modifying null mesh, early return");
             return;
         }
-        entity.position = this.vectoxys(mesh.position);
+        this.db["entities"].update(entity.id, entity);
-        entity.rotation = this.vectoxys(mesh.rotation);
+        this.logger.debug('modify', entity);
-        entity.scale = this.vectoxys(mesh.scaling);
-        this.db["entities"].update(mesh.id, entity);
-        this.logger.debug('modify', mesh, entity);
     }
 
     public changeColor(oldColor, newColor) {
@@ -199,12 +182,4 @@ export class IndexdbPersistenceManager implements IPersistenceManager {
             }
         );
     }
-
-    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);
-    }
 }

src/menus/editMenu.ts

@@ -20,7 +20,7 @@ import {InputTextView} from "../information/inputTextView";
 import {DiaSounds} from "../util/diaSounds";
 import {TextLabel} from "../diagram/textLabel";
 import {DiagramConnection} from "../diagram/diagramConnection";
-import {GLTF2Export} from "@babylonjs/serializers";
+
 import {toDiagramEntity} from "../diagram/functions/toDiagramEntity";
 import {AbstractMenu} from "./abstractMenu";
 import {Controllers} from "../controllers/controllers";
@@ -119,7 +119,7 @@ export class EditMenu extends AbstractMenu {
         this.diagramManager.onDiagramEventObservable.notifyObservers({
             type: DiagramEventType.MODIFY,
             entity: toDiagramEntity(mesh),
-        });
+        }, -1);
     }
 
     toggle() {
@@ -186,7 +186,7 @@ export class EditMenu extends AbstractMenu {
                     this.diagramManager.onDiagramEventObservable.notifyObservers({
                         type: DiagramEventType.MODIFY,
                         entity: toDiagramEntity(newMesh)
-                    });
+                    }, 2);
 
                 } else {
                     this.logger.error("no paint color selectced");
@@ -200,7 +200,7 @@ export class EditMenu extends AbstractMenu {
             this.diagramManager.onDiagramEventObservable.notifyObservers({
                 type: DiagramEventType.ADD,
                 entity: toDiagramEntity(this.connection.mesh)
-            });
+            }, -1);
             this.connection = null;
         } else {
             this.connection = new DiagramConnection(mesh.id, null, this.scene, pointerInfo);
@@ -214,7 +214,8 @@ export class EditMenu extends AbstractMenu {
             entity:
                 toDiagramEntity(mesh)
         }
-        this.diagramManager.onDiagramEventObservable.notifyObservers(event);
+
+        this.diagramManager.onDiagramEventObservable.notifyObservers(event, -1);
     }
 
     private modifyMesh(mesh: AbstractMesh) {
@@ -228,7 +229,7 @@ export class EditMenu extends AbstractMenu {
                     this.diagramManager.onDiagramEventObservable.notifyObservers({
                             type: DiagramEventType.MODIFY,
                             entity: toDiagramEntity(mesh),
-                        }
+                        }, -1
                     )
                     this.logger.debug(mesh.scaling);
                 });
@@ -306,7 +307,9 @@ export class EditMenu extends AbstractMenu {
                 this.showNewRelic();
                 break;
             case "export":
-                GLTF2Export.GLBAsync(this.scene, 'diagram.glb', {
+                import("@babylonjs/serializers").then((serializers) => {
+
+                    serializers.GLTF2Export.GLBAsync(this.scene, 'diagram.glb', {
                         shouldExportNode: function (node) {
                             if (node?.metadata?.template) {
                                 return true;
@@ -318,6 +321,10 @@ export class EditMenu extends AbstractMenu {
                     }).then((gltf) => {
                         gltf.downloadFiles();
                     });
+
+                });
+
+
                 break;
             default:
                 this.logger.error("Unknown button");

src/util/appConfig.ts

@@ -1,22 +1,26 @@
 import {Observable} from "@babylonjs/core";
 
-import {IPersistenceManager} from "../integration/iPersistenceManager";
+//import {IPersistenceManager} from "../integration/iPersistenceManager";
 import {AppConfigType} from "./appConfigType";
 
 export class AppConfig {
     public readonly onConfigChangedObservable = new Observable<AppConfigType>();
     private _currentConfig: AppConfigType;
-    private persistenceManager: IPersistenceManager;
 
-    constructor(persistenceManager: IPersistenceManager) {
+    //  private persistenceManager: IPersistenceManager;
-        this.persistenceManager = persistenceManager;
+
-        this.persistenceManager.configObserver.add(this.load, -1, false, this, false);
+    constructor() {
+        this.onConfigChangedObservable.add((config, state) => {
+            console.log(state);
+            this._currentConfig = config;
+        }, 2);
+        //this.persistenceManager = persistenceManager;
+        //this.persistenceManager.configObserver.add(this.load, -1, false, this, false);
     }
 
     public get current(): AppConfigType {
         if (!this._currentConfig) {
-            this.persistenceManager.getConfig().then((config) => {
+
-                if (!config) {
             this._currentConfig = {
                 id: 1,
                 gridSnap: .1,
@@ -28,26 +32,22 @@ export class AppConfig {
                 physicsEnabled: false,
                 demoCompleted: false,
             }
-                    this.save();
+
-                } else {
-                    this._currentConfig = config;
-                }
-            });
         }
         return this._currentConfig;
     }
 
     public set current(config: AppConfigType) {
-        this._currentConfig = config;
+        this.onConfigChangedObservable.notifyObservers(config, 2);
         this.save();
     }
 
     public save() {
-        this.persistenceManager.setConfig(this._currentConfig);
+        //this.persistenceManager.setConfig(this._currentConfig);
     }
 
     public load(config: AppConfigType) {
         this._currentConfig = config;
-        this.onConfigChangedObservable.notifyObservers(this._currentConfig);
+        this.onConfigChangedObservable.notifyObservers(this._currentConfig, 1);
     }
 }

src/util/customEnvironment.ts

@@ -32,7 +32,7 @@ export class CustomEnvironment {
                 this._groundMeshObservable.notifyObservers(ground);
             });
         const photo = new PhotoDome('sky',
-            '/assets/textures/outdoor_field2.jpeg', {},
+            '/assets/textures/outdoor_field4.jpeg', {},
             scene);
         try {
             const sounds = new DiaSounds(scene);

src/worker.ts

@@ -0,0 +1,36 @@
+import {IndexdbPersistenceManager} from "./integration/indexdbPersistenceManager";
+import {DiagramEvent, DiagramEventType} from "./diagram/diagramEntity";
+
+const persistenceManager = new IndexdbPersistenceManager("diagram");
+
+const ctx: Worker = self as any;
+
+
+ctx.onmessage = (event) => {
+    console.log(event.data);
+    if (event.data.type == 'init') {
+        persistenceManager.updateObserver.add((event) => {
+            ctx.postMessage({entity: event});
+        });
+        persistenceManager.configObserver.add((event) => {
+            ctx.postMessage({config: event});
+        });
+        persistenceManager.initialize().then(() => {
+            console.log('initialized');
+        });
+    } else {
+        const data = (event.data as DiagramEvent);
+        switch (data.type) {
+            case DiagramEventType.ADD:
+                persistenceManager.add(data.entity);
+                break;
+            case DiagramEventType.MODIFY:
+                persistenceManager.modify(data.entity);
+                break;
+            case DiagramEventType.REMOVE:
+                persistenceManager.remove(data.entity.id);
+                break;
+
+        }
+    }
+};