diff --git a/src/controllers/left.ts b/src/controllers/left.ts index cbdaab8..8573547 100644 --- a/src/controllers/left.ts +++ b/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 { } diff --git a/src/controllers/right.ts b/src/controllers/right.ts index 31be1ef..040aad3 100644 --- a/src/controllers/right.ts +++ b/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}); } } diff --git a/src/diagram/diagramManager.ts b/src/diagram/diagramManager.ts index 274779e..ab84d53 100644 --- a/src/diagram/diagramManager.ts +++ b/src/diagram/diagramManager.ts @@ -1,8 +1,6 @@ import { AbstractMesh, - Color3, DynamicTexture, - Mesh, - MeshBuilder, + Color3, 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; - DiagramManager.currentMesh = newMesh; + this.persistenceManager.add(DiagramManager.currentMesh); 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) { - 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; + return MeshConverter.fromDiagramEntity(entity, this.scene); } } \ No newline at end of file diff --git a/src/diagram/indexdbPersistenceManager.ts b/src/diagram/indexdbPersistenceManager.ts new file mode 100644 index 0000000..7d08346 --- /dev/null +++ b/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 = new Observable(); + 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 = 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 = {}; + 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; + } +} \ No newline at end of file diff --git a/src/diagram/meshConverter.ts b/src/diagram/meshConverter.ts new file mode 100644 index 0000000..99d9871 --- /dev/null +++ b/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 = {}; + 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; + + } + +} \ No newline at end of file diff --git a/src/diagram/persistenceManager.ts b/src/diagram/persistenceManager.ts index 33e202b..f7f8550 100644 --- a/src/diagram/persistenceManager.ts +++ b/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 { - public updateObserver: Observable = new Observable(); - private db: Dexie = new Dexie("diagram"); - constructor() { - this.db.version(1).stores({entities: "id,position,rotation,last_seen,template,text,scale,color"}); - } - public add(mesh: AbstractMesh) { - const entity = {}; - 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); - } +export interface IPersistenceManager { + add(mesh: AbstractMesh); + remove(mesh: AbstractMesh); + modify(mesh: AbstractMesh); + initialize(); + updateObserver: Observable; - 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 = {}; - 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; - } -} \ No newline at end of file +}