diff --git a/src/app.ts b/src/app.ts index a57dc06..4300e4d 100644 --- a/src/app.ts +++ b/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(); }); diff --git a/src/controllers/base.ts b/src/controllers/base.ts index a0b61c9..f1a5014 100644 --- a/src/controllers/base.ts +++ b/src/controllers/base.ts @@ -84,7 +84,6 @@ export class Base { this.logger.debug("pulse done"); }); } - ; break; case ControllerEventType.HIDE: this.disable(); diff --git a/src/controllers/rigplatform.ts b/src/controllers/rigplatform.ts index aeb2d73..3e36739 100644 --- a/src/controllers/rigplatform.ts +++ b/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; diff --git a/src/controllers/webController.ts b/src/controllers/webController.ts index 24236ec..796aaca 100644 --- a/src/controllers/webController.ts +++ b/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); } diff --git a/src/integration/drawioManager.ts b/src/integration/drawioManager.ts index d1e6bf5..13b1462 100644 --- a/src/integration/drawioManager.ts +++ b/src/integration/drawioManager.ts @@ -35,8 +35,7 @@ class EntityTree { const output: Array = new Array(); this.nodes.forEach((node) => { if (node.parentEntity) { - const geometry = this.computeOffset(node); - node.geometry = geometry; + node.geometry = this.computeOffset(node); } 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 doc; + return new DOMParser().parseFromString(graphXml, 'text/html'); } private getDiagram(doc: Document, index: number): Element { const firstDiagram = doc.querySelectorAll('diagram')[index]; - const mxDiagram = firstDiagram.querySelector('mxGraphModel'); - return mxDiagram; + return firstDiagram.querySelector('mxGraphModel'); } private parseDiagram(mxDiagram: Element): EntityTree { diff --git a/src/integration/iPersistenceManager.ts b/src/integration/iPersistenceManager.ts index 2be599d..58c9661 100644 --- a/src/integration/iPersistenceManager.ts +++ b/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); } diff --git a/src/integration/indexdbPersistenceManager.ts b/src/integration/indexdbPersistenceManager.ts index df1af15..b63c1b4 100644 --- a/src/integration/indexdbPersistenceManager.ts +++ b/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; } diff --git a/src/integration/pouchdbPersistenceManager.ts b/src/integration/pouchdbPersistenceManager.ts index 34fa0f5..5109703 100644 --- a/src/integration/pouchdbPersistenceManager.ts +++ b/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 = new Observable(); @@ -17,12 +18,43 @@ export class PouchdbPersistenceManager implements IPersistenceManager { private config: PouchDB; private diagramListings: PouchDB; - constructor(name: string) { - console.log(name); + constructor() { 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); diff --git a/src/menus/cameraMenu.ts b/src/menus/cameraMenu.ts index 1ca5798..3869945 100644 --- a/src/menus/cameraMenu.ts +++ b/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; diff --git a/src/menus/editMenu.ts b/src/menus/editMenu.ts index e9a862a..a6211ba 100644 --- a/src/menus/editMenu.ts +++ b/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; diff --git a/src/objects/roundButton.ts b/src/objects/roundButton.ts index 38a1430..b162d26 100644 --- a/src/objects/roundButton.ts +++ b/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; diff --git a/src/soccer/field.ts b/src/soccer/field.ts index 712f67c..19302d1 100644 --- a/src/soccer/field.ts +++ b/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; diff --git a/src/soccer/player.ts b/src/soccer/player.ts index 2a6f901..7ac8e8e 100644 --- a/src/soccer/player.ts +++ b/src/soccer/player.ts @@ -48,14 +48,14 @@ export class Player { private readonly logger: Logger = log.getLogger('Player'); public readonly onReadyObservable: Observable = 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 teamName: string; + private readonly number: number; + private readonly teamName: string; private forward = true; private destination: Vector2; diff --git a/src/soccer/team.ts b/src/soccer/team.ts index 068daa0..e6c35ca 100644 --- a/src/soccer/team.ts +++ b/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; diff --git a/src/tutorial/introduction.ts b/src/tutorial/introduction.ts index 7d96697..a3db6ec 100644 --- a/src/tutorial/introduction.ts +++ b/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; diff --git a/src/util/diagramExporter.ts b/src/util/diagramExporter.ts index 05e45dd..c3b9c95 100644 --- a/src/util/diagramExporter.ts +++ b/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 true; - } else { - return false; - } - + return (node?.metadata?.exportable as boolean); } }).then((gltf) => { gltf.downloadFiles(); diff --git a/src/util/functions/snapGridVal.ts b/src/util/functions/snapGridVal.ts index 077f871..747cdf9 100644 --- a/src/util/functions/snapGridVal.ts +++ b/src/util/functions/snapGridVal.ts @@ -5,9 +5,8 @@ export function snapGridVal(value: Vector3, snap: number): Vector3 { if (!snap) { return value; } - const position = - new Vector3(round(value.x, snap), - round(value.y, snap), - round(value.z, snap)) - return position; + return new Vector3(round(value.x, snap), + round(value.y, snap), + round(value.z, snap)) + } \ No newline at end of file diff --git a/src/util/functions/snapRotateVal.ts b/src/util/functions/snapRotateVal.ts index a76de36..e13feee 100644 --- a/src/util/functions/snapRotateVal.ts +++ b/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 {