Code Cleanup.

src/app.ts

@@ -9,7 +9,7 @@ import {CustomEnvironment} from "./util/customEnvironment";
 import {Controllers} from "./controllers/controllers";
 // @ts-ignore
 import workerUrl from "./worker?worker&url";
-import {DiagramEventType} from "./diagram/diagramEntity";
+
 import {PeerjsNetworkConnection} from "./integration/peerjsNetworkConnection";
 import {DiagramExporter} from "./util/diagramExporter";
 import {Spinner} from "./util/spinner";
@@ -25,7 +25,7 @@ export class App {
     constructor() {
 
         log.setDefaultLevel('warn');
-        //log.getLogger('PeerjsNetworkConnection').setLevel('debug');
+
         log.getLogger('App').setLevel('debug');
         log.getLogger('DiagramManager').setLevel('debug');
         log.getLogger('PeerjsNetworkConnection').setLevel('debug');
@@ -43,7 +43,6 @@ export class App {
     }
 
     async initialize(canvas) {
-
         const engine = new Engine(canvas, true);
         engine.setHardwareScalingLevel(1 / window.devicePixelRatio);
         window.onresize = () => {
@@ -54,22 +53,11 @@ export class App {
         const spinner = new Spinner(scene);
         spinner.show();
         const config = new AppConfig();
-        //const peerjsNetworkConnection = new PeerjsNetworkConnection();
-
-        //const persistenceManager = new IndexdbPersistenceManager("diagram");
-        /*const worker = new Worker(workerUrl, {type: 'module'});
-        peerjsNetworkConnection.connectionObservable.add((peerId) => {
-            this.logger.debug('App', 'peerjs network connected', peerId);
-            worker.postMessage({type: 'sync'});
-        });
-
-         */
         const controllers = new Controllers();
         const toolbox = new Toolbox(scene, controllers);
         const diagramManager = new DiagramManager(scene, controllers, toolbox, config);
-        const db = new PouchdbPersistenceManager("diagram");
-        //diagramManager.setPersistenceManager(db);
 
+        const db = new PouchdbPersistenceManager();
         db.configObserver.add((newConfig) => {
             config.onConfigChangedObservable.notifyObservers(newConfig, 1);
         });
@@ -77,36 +65,6 @@ export class App {
             db.setConfig(newConfig);
         }, 2, false, this);
 
-        diagramManager.onDiagramEventObservable.add((evt) => {
-            switch (evt.type) {
-                case DiagramEventType.CHANGECOLOR:
-                    db.changeColor(evt.oldColor, evt.newColor);
-                    break;
-                case DiagramEventType.ADD:
-                    db.add(evt.entity);
-                    break;
-                case DiagramEventType.REMOVE:
-                    db.remove(evt.entity.id);
-                    break;
-                case DiagramEventType.MODIFY:
-                case DiagramEventType.DROP:
-                    db.modify(evt.entity);
-                    break;
-                default:
-                    this.logger.warn('App', 'unknown diagram event type', evt);
-            }
-        }, 2);
-        db.updateObserver.add((evt) => {
-            diagramManager.onDiagramEventObservable.notifyObservers({
-                type: DiagramEventType.ADD,
-                entity: evt
-            }, 1);
-        });
-        db.removeObserver.add((entity) => {
-            diagramManager.onDiagramEventObservable.notifyObservers(
-                {type: DiagramEventType.REMOVE, entity: entity}, 1);
-        });
-
         await db.initialize();
 
         const environment = new CustomEnvironment(scene, "default", config);
@@ -160,7 +118,6 @@ export class App {
 
         this.logger.info('keydown event listener added, use Ctrl+Shift+Alt+I to toggle debug layer');
 
-
         engine.runRenderLoop(() => {
             scene.render();
         });

src/controllers/base.ts

@@ -84,7 +84,6 @@ export class Base {
                                 this.logger.debug("pulse done");
                             });
                     }
-                    ;
                     break;
                 case ControllerEventType.HIDE:
                     this.disable();

src/controllers/rigplatform.ts

@@ -18,7 +18,7 @@ export class Rigplatform {
     public static instance: Rigplatform;
     private rightController: Right;
     private leftController: Left;
-    private xr: WebXRDefaultExperience;
+    private readonly xr: WebXRDefaultExperience;
     private yRotation: number = 0;
     public rigMesh: Mesh;
 

src/controllers/webController.ts

@@ -7,14 +7,14 @@ import {setMenuPosition} from "../util/functions/setMenuPosition";
 import {wheelHandler} from "./functions/wheelHandler";
 
 export class WebController {
-    private scene: Scene;
+    private readonly scene: Scene;
     private speed: number = 1;
     private readonly referencePlane: AbstractMesh;
     private pickedMesh: AbstractMesh;
     private rig: Rigplatform;
     private diagramManager: DiagramManager;
     private mouseDown: boolean = false;
-    private controllers: Controllers;
+    private readonly controllers: Controllers;
     private upDownWheel: boolean = false;
     private fowardBackWheel: boolean = false;
 
@@ -64,6 +64,7 @@ export class WebController {
                                 )
                             }
                         }
+                        break;
                     default:
                         console.log(kbInfo.event);
                 }

src/integration/drawioManager.ts

@@ -35,8 +35,7 @@ class EntityTree {
         const output: Array<DrawIOEntity> = new Array<DrawIOEntity>();
         this.nodes.forEach((node) => {
             if (node.parentEntity) {
-                const geometry = this.computeOffset(node);
+                node.geometry = this.computeOffset(node);
-                node.geometry = geometry;
             }
             output.push(node);
         });
@@ -81,23 +80,21 @@ class EntityTree {
             const parentgeo = this.computeOffset(node.parentEntity);
             if (parentgeo) {
                 const parentzIndex = 1 + parentgeo.zIndex ? parentgeo.zIndex : 0;
-                const geo = {
+                return {
                     x: node.geometry.x,
                     y: node.geometry.y,
                     width: node.geometry.width,
                     height: node.geometry.height,
                     zIndex: node.geometry.zIndex ? node.geometry.zIndex + parentzIndex : parentzIndex + 1
                 };
-                return geo;
             } else {
-                const geo = {
+                return {
                     x: node.geometry.x,
                     y: node.geometry.y,
                     width: node.geometry.width,
                     height: node.geometry.height,
                     zIndex: node.geometry.zIndex ? node.geometry.zIndex : 0
                 };
-                return geo;
             }
 
         } else {
@@ -150,14 +147,12 @@ export class DrawioManager {
         const graph = await fetch(url);
         this.logger.debug('got graph');
         const graphXml = await graph.text();
-        const doc = new DOMParser().parseFromString(graphXml, 'text/html');
+        return new DOMParser().parseFromString(graphXml, 'text/html');
-        return doc;
     }
 
     private getDiagram(doc: Document, index: number): Element {
         const firstDiagram = doc.querySelectorAll('diagram')[index];
-        const mxDiagram = firstDiagram.querySelector('mxGraphModel');
+        return firstDiagram.querySelector('mxGraphModel');
-        return mxDiagram;
     }
 
     private parseDiagram(mxDiagram: Element): EntityTree {

src/integration/iPersistenceManager.ts

@@ -1,6 +1,7 @@
 import {Color3, Observable} from "@babylonjs/core";
 import {DiagramEntity} from "../diagram/diagramEntity";
 import {AppConfigType} from "../util/appConfigType";
+import {DiagramManager} from "../diagram/diagramManager";
 
 export enum DiagramListingEventType {
     GET,
@@ -55,4 +56,6 @@ export interface IPersistenceManager {
     changeColor(oldColor: Color3, newColor: Color3);
 
     setCurrentDiagram(diagram: DiagramListing);
+
+    setDiagramManager(diagramManager: DiagramManager);
 }

src/integration/indexdbPersistenceManager.ts

@@ -4,6 +4,7 @@ import {DiagramEntity} from "../diagram/diagramEntity";
 import Dexie from "dexie";
 import log from "loglevel";
 import {AppConfigType} from "../util/appConfigType";
+import {DiagramManager} from "../diagram/diagramManager";
 
 
 export class IndexdbPersistenceManager implements IPersistenceManager {
@@ -27,6 +28,10 @@ export class IndexdbPersistenceManager implements IPersistenceManager {
         this.logger.debug("IndexdbPersistenceManager constructed");
     }
 
+    public setDiagramManager(diagramManager: DiagramManager) {
+        console.log(diagramManager.config);
+    }
+
     public setCurrentDiagram(diagram: DiagramListing) {
         this.currentDiagramId = diagram.id;
     }

src/integration/pouchdbPersistenceManager.ts

@@ -1,10 +1,11 @@
 import {DiagramListing, DiagramListingEvent, IPersistenceManager} from "./iPersistenceManager";
 import PouchDB from 'pouchdb';
-import {DiagramEntity} from "../diagram/diagramEntity";
+import {DiagramEntity, DiagramEventType} from "../diagram/diagramEntity";
 import {Color3, Observable} from "@babylonjs/core";
 import {AppConfigType} from "../util/appConfigType";
 import {v4 as uuidv4} from 'uuid';
 import axios from "axios";
+import {DiagramManager} from "../diagram/diagramManager";
 
 export class PouchdbPersistenceManager implements IPersistenceManager {
     configObserver: Observable<AppConfigType> = new Observable<AppConfigType>();
@@ -17,12 +18,43 @@ export class PouchdbPersistenceManager implements IPersistenceManager {
     private config: PouchDB;
     private diagramListings: PouchDB;
 
-    constructor(name: string) {
+    constructor() {
-        console.log(name);
         this.config = new PouchDB("config");
         this.diagramListings = new PouchDB("diagramListings");
     }
 
+    public setDiagramManager(diagramManager: DiagramManager) {
+        diagramManager.onDiagramEventObservable.add((evt) => {
+            switch (evt.type) {
+                case DiagramEventType.CHANGECOLOR:
+                    this.changeColor(evt.oldColor, evt.newColor);
+                    break;
+                case DiagramEventType.ADD:
+                    this.add(evt.entity);
+                    break;
+                case DiagramEventType.REMOVE:
+                    this.remove(evt.entity.id);
+                    break;
+                case DiagramEventType.MODIFY:
+                case DiagramEventType.DROP:
+                    this.modify(evt.entity);
+                    break;
+                default:
+                //this.logger.warn('App', 'unknown diagram event type', evt);
+            }
+        }, 2);
+        this.updateObserver.add((evt) => {
+            diagramManager.onDiagramEventObservable.notifyObservers({
+                type: DiagramEventType.ADD,
+                entity: evt
+            }, 1);
+        });
+        this.removeObserver.add((entity) => {
+            diagramManager.onDiagramEventObservable.notifyObservers(
+                {type: DiagramEventType.REMOVE, entity: entity}, 1);
+        });
+    }
+
     private _currentDiagramId: string;
 
     public get currentDiagramId(): string {
@@ -133,11 +165,11 @@ export class PouchdbPersistenceManager implements IPersistenceManager {
             const config = await this.config.get('1');
             if (config.currentDiagramId) {
                 this.db = new PouchDB(config.currentDiagramId);
-                this.beginSync();
+                await this.beginSync();
             } else {
                 config.currentDiagramId = uuidv4();
                 this.db = new PouchDB(config.currentDiagramId);
-                this.beginSync();
+                await this.beginSync();
                 await this.config.put(config);
             }
             this.configObserver.notifyObservers(config);
@@ -160,7 +192,7 @@ export class PouchdbPersistenceManager implements IPersistenceManager {
 
             this.diagramListings.put({_id: defaultConfig.currentDiagramId, name: "New Diagram"});
             this.db = new PouchDB(defaultConfig.currentDiagramId);
-            this.beginSync();
+            await this.beginSync();
             this.configObserver.notifyObservers(defaultConfig);
         }
         try {
@@ -228,7 +260,6 @@ export class PouchdbPersistenceManager implements IPersistenceManager {
             this.remote = new PouchDB('https://syncdb-service-d3f974de56ef.herokuapp.com/' + syncTarget,
                 {auth: {username: syncTarget, password: 'password'}});
 
-            //this.remote.login(syncTarget, 'password');
             this.syncDoc = this.syncDoc.bind(this);
             this.db.sync(this.remote, {live: true, retry: true})
                 .on('change', this.syncDoc);

src/menus/cameraMenu.ts

@@ -1,7 +1,7 @@
 import {Color3, DynamicTexture, Mesh, MeshBuilder, Scene, StandardMaterial, Vector3} from "@babylonjs/core";
 
 export class CameraMenu {
-    private scene: Scene;
+    private readonly scene: Scene;
     private xr;
     private controllers;
 

src/menus/editMenu.ts

@@ -315,6 +315,7 @@ export class EditMenu extends AbstractMenu {
                 if (!this.cameraMenu) {
                     this.cameraMenu = new CameraMenu(this.scene, null, null);
                 }
+                break;
             default:
                 this.logger.error("Unknown button");
                 return;

src/objects/roundButton.ts

@@ -1,7 +1,7 @@
 import {DynamicTexture, MeshBuilder, StandardMaterial, TransformNode, Vector2, Vector3} from "@babylonjs/core";
 
 export class RoundButton {
-    private parent: TransformNode;
+    private readonly parent: TransformNode;
 
     constructor(parent: TransformNode, label: string, description: string, position: Vector2) {
         this.parent = parent;

src/soccer/field.ts

@@ -14,7 +14,7 @@ import {Team} from "./team";
 export class Field {
     private readonly scene: Scene;
     public ball: Ball;
-    private goalMesh: Mesh;
+    private readonly goalMesh: Mesh;
     private material: StandardMaterial;
     private team1: Team;
     private readonly fieldCenter: TransformNode;

src/soccer/player.ts

@@ -48,14 +48,14 @@ export class Player {
     private readonly logger: Logger = log.getLogger('Player');
     public readonly onReadyObservable: Observable<any> = new Observable();
     private readonly scene: Scene;
-    private position: Vector3;
+    private readonly position: Vector3;
     private mesh: Mesh;
     private parent: AbstractMesh;
     private animationGroup: AnimationGroup;
     private physicsAggregate: PhysicsAggregate;
     private skeleton: Skeleton;
-    private number: number;
+    private readonly number: number;
-    private teamName: string;
+    private readonly teamName: string;
     private forward = true;
     private destination: Vector2;
 

src/soccer/team.ts

@@ -4,7 +4,7 @@ import {Scene, Texture, Vector2, Vector3} from "@babylonjs/core";
 export class Team {
     private readonly scene: Scene;
     private players: Player[] = [];
-    private goalSide: number = -1;
+    private readonly goalSide: number = -1;
     private playerFactory: PlayerFactory;
     private positions: Vector2[] = [
         new Vector2(3, 1),
@@ -20,7 +20,7 @@ export class Team {
         new Vector2(0, 47),
     ];
 
-    private name: string;
+    private readonly name: string;
     private uniforms: Texture[] = [];
     constructor(scene: Scene, side: number = 1, name: string = "team") {
         this.scene = scene;

src/tutorial/introduction.ts

@@ -89,12 +89,16 @@ export class Introduction {
             hls.loadSource(src);
             hls.attachMedia(vid);
             hls.on(Hls.Events.MANIFEST_PARSED, function () {
-                vid.play();
+                vid.play().then(() => {
+                    console.log("Video Playing");
+                });
             });
         } else if (vid.canPlayType('application/vnd.apple.mpegurl')) {
             vid.src = src;
             vid.addEventListener('loadedmetadata', function () {
-                vid.play();
+                vid.play().then(() => {
+                    console.log("Video Playing");
+                });
             });
         }
         return mesh;

src/util/diagramExporter.ts

@@ -11,12 +11,7 @@ export class DiagramExporter {
         import("@babylonjs/serializers").then((serializers) => {
             serializers.GLTF2Export.GLBAsync(this.scene, 'diagram.glb', {
                 shouldExportNode: function (node) {
-                    if (node?.metadata?.exportable) {
+                    return (node?.metadata?.exportable as boolean);
-                        return true;
-                    } else {
-                        return false;
-                    }
-
                 }
             }).then((gltf) => {
                 gltf.downloadFiles();

src/util/functions/snapGridVal.ts

@@ -5,9 +5,8 @@ export function snapGridVal(value: Vector3, snap: number): Vector3 {
     if (!snap) {
         return value;
     }
-    const position =
+    return new Vector3(round(value.x, snap),
-        new Vector3(round(value.x, snap),
+        round(value.y, snap),
-            round(value.y, snap),
+        round(value.z, snap))
-            round(value.z, snap))
+
-    return position;
 }

src/util/functions/snapRotateVal.ts

@@ -8,11 +8,10 @@ export function snapRotateVal(value: Vector3, snap: number): Vector3 {
     if (!snap) {
         return value;
     }
-    const rotation = new Vector3(
+    return new Vector3(
         snapAngle(value.x, snap),
         snapAngle(value.y, snap),
         snapAngle(value.z, snap));
-    return rotation;
 }
 
 function snapAngle(val: number, snap: number): number {