changed main menu order and behavior, updated text node handling, refactored logging from console.log.

index.html

@@ -42,6 +42,7 @@
 </script>
 <div class="webApp" id="webApp">
 
+
 </div>
 <script src="/src/webApp.ts" type="module"></script>
 <script src="/src/vrApp.ts" type="module"></script>

public/styles.css

@@ -178,7 +178,18 @@ h1 {
 }
 
 #enterXR {
-    display: none;
+
+}
+
+#enterXR.inactive a {
+    background-color: #222222;
+    color: #555555;
+    border-color: #222222;
+    cursor: not-allowed;
+}
+
+#enterXR.inactive {
+
 }
 
 #loadingGrid {

src/controllers/left.ts

@@ -13,7 +13,7 @@ import log from "loglevel";
 import {DiagramManager} from "../diagram/diagramManager";
 import {RoundButton} from "../objects/roundButton";
 
-
+const logger = log.getLogger('Left');
 export class Left extends Base {
     constructor(controller:
                     WebXRInputSource, scene: Scene, xr: WebXRDefaultExperience, diagramManager: DiagramManager, controllers: Controllers) {
@@ -22,7 +22,7 @@ export class Left extends Base {
             if (init.components['xr-standard-thumbstick']) {
                 init.components['xr-standard-thumbstick']
                     .onAxisValueChangedObservable.add((value) => {
-                    log.trace('Left', `thumbstick moved ${value.x}, ${value.y}`);
+                    logger.trace(`thumbstick moved ${value.x}, ${value.y}`);
                     if (!this.controllers.movable) {
                         this.moveRig(value);
                     } else {
@@ -41,13 +41,10 @@ export class Left extends Base {
                 this.initYButton(init.components['y-button']);
                 const buttonhome = new TransformNode('buttons', scene)
 
-                //const xbutton = new Button(buttonhome, 'X', 'open edit menu', new Vector2(0,0));
-                //const ybutton = new Button(buttonhome, 'Y', 'open edit menu', new Vector2(.4,0));
-
                 this.initTrigger(init.components['xr-standard-trigger']);
                 init.components['xr-standard-thumbstick'].onButtonStateChangedObservable.add((value) => {
                     if (value.pressed) {
-                        log.trace('Left', 'thumbstick changed');
+                        logger.trace('Left', 'thumbstick changed');
                         this.controllers.controllerObserver.notifyObservers({
                             type: ControllerEventType.DECREASE_VELOCITY,
                             value: value.value
@@ -64,6 +61,7 @@ export class Left extends Base {
             trigger
                 .onButtonStateChangedObservable
                 .add((button) => {
+                    logger.trace('trigger pressed');
                     this.controllers.controllerObserver.notifyObservers({
                         type: ControllerEventType.TRIGGER,
                         value: button.value,
@@ -75,9 +73,9 @@ export class Left extends Base {
 
     private initXButton(xbutton: WebXRControllerComponent) {
         if (xbutton) {
-
             xbutton.onButtonStateChangedObservable.add((button) => {
                 if (button.pressed) {
+                    logger.trace('X button pressed');
                     this.controllers.controllerObserver.notifyObservers({
                         type: ControllerEventType.X_BUTTON,
                         value: button.value
@@ -91,6 +89,7 @@ export class Left extends Base {
         if (ybutton) {
             ybutton.onButtonStateChangedObservable.add((button) => {
                 if (button.pressed) {
+                    logger.trace('Y button pressed');
                     this.controllers.controllerObserver.notifyObservers({
                         type: ControllerEventType.Y_BUTTON,
                         value: button.value

src/controllers/right.ts

@@ -9,10 +9,12 @@ import {
     WebXRInputSource
 } from "@babylonjs/core";
 import {ControllerEventType, Controllers} from "./controllers";
-import log from "loglevel";
+
 import {DiagramManager} from "../diagram/diagramManager";
 import {RoundButton} from "../objects/roundButton";
+import log from "loglevel";
 
+const logger = log.getLogger("Right");
 export class Right extends Base {
 
     private startPosition: Vector3 = null;
@@ -21,6 +23,7 @@ export class Right extends Base {
         if (bbutton) {
             bbutton.onButtonStateChangedObservable.add((button) => {
                 if (button.pressed) {
+                    logger.debug('B Button Pressed');
                     this.controllers.controllerObserver.notifyObservers({
                         type: ControllerEventType.B_BUTTON,
                         value: button.value
@@ -62,6 +65,7 @@ export class Right extends Base {
             trigger
                 .onButtonStateChangedObservable
                 .add((button) => {
+                    logger.debug("right trigger pressed");
                     this.controllers.controllerObserver.notifyObservers({
                         type: ControllerEventType.TRIGGER,
                         value: button.value,
@@ -75,7 +79,7 @@ export class Right extends Base {
         if (abutton) {
             abutton.onButtonStateChangedObservable.add((value) => {
                 if (value.pressed) {
-                    log.getLogger("right").debug("a-button pressed");
+                    logger.debug('A button pressed');
                     this.controllers.controllerObserver.notifyObservers({type: ControllerEventType.MENU});
                 }
             });
@@ -85,12 +89,12 @@ export class Right extends Base {
     private initThumbstick(thumbstick: WebXRControllerComponent) {
         if (thumbstick) {
             thumbstick.onAxisValueChangedObservable.add((value) => {
-                log.trace('Right', `thumbstick moved ${value.x}, ${value.y}`);
+                logger.trace(`thumbstick moved ${value.x}, ${value.y}`);
                 this.moveRig(value);
             });
             thumbstick.onButtonStateChangedObservable.add((value) => {
                 if (value.pressed) {
-                    log.trace('Right', `thumbstick changed ${value.value}`);
+                    logger.trace('Right', `thumbstick changed ${value.value}`);
                     this.controllers.controllerObserver.notifyObservers({
                         type: ControllerEventType.INCREASE_VELOCITY,
                         value: value.value

src/diagram/functions/diagramEventHandler.ts

@@ -36,8 +36,11 @@ export function diagramEventHandler(event: DiagramEvent,
             }
         }
     }
-
+    if (isDiagramEntity(mesh) && (mesh.metadata.template.indexOf('#') > -1)) {
+        updateTextNode(mesh, entity.text);
+    }
     switch (event.type) {
+
         case DiagramEventType.RESET:
             scene.getNodes().forEach((node) => {
                 if (node?.metadata?.template && !node?.metadata?.tool) {
@@ -66,7 +69,7 @@ export function diagramEventHandler(event: DiagramEvent,
             if (physicsEnabled) {
                 applyPhysics(sounds, mesh, scene);
             }
-            updateTextNode(mesh, entity.text);
+
             break;
         case DiagramEventType.REMOVE:
             if (mesh) {

src/information/inputTextView.ts

@@ -9,14 +9,14 @@ export type TextEvent = {
     id: string;
     text: string;
 }
-
+const logger: Logger = log.getLogger('InputTextView');
 export class InputTextView {
     public readonly onTextObservable: Observable<TextEvent> = new Observable<TextEvent>();
     private readonly scene: Scene;
     private readonly inputMesh: AbstractMesh;
     private sounds: DiaSounds;
     private readonly controllers: Controllers;
-    private readonly logger: Logger = log.getLogger('InputTextView');
+
     private readonly handle: Handle;
     private inputText: InputText;
     private diagramMesh: AbstractMesh;
@@ -33,13 +33,15 @@ export class InputTextView {
 
     public show(mesh: AbstractMesh) {
         this.handle.mesh.setEnabled(true);
-        if (mesh.metadata?.label) {
+        if (mesh.metadata?.text) {
-            this.inputText.text = mesh.metadata?.label;
+            this.inputText.text = mesh.metadata?.text;
+        } else {
+            this.inputText.text = "";
         }
         this.diagramMesh = mesh;
         this.keyboard.isVisible = true;
         this.inputText.focus();
-        console.log(mesh.metadata);
+        logger.debug(mesh.metadata);
     }
 
     public createKeyboard() {
@@ -56,7 +58,7 @@ export class InputTextView {
         if (!platform) {
             this.scene.onNewMeshAddedObservable.add((mesh) => {
                 if (mesh.id == 'platform') {
-                    this.logger.debug("platform added");
+                    logger.debug("platform added");
                     handle.mesh.parent = mesh;
                     if (!handle.idStored) {
                         handle.mesh.position = position;
@@ -102,7 +104,7 @@ export class InputTextView {
         keyboard.isEnabled = true;
         keyboard.children.forEach((key) => {
             key.onPointerEnterObservable.add((eventData, eventState) => {
-                this.logger.debug(eventData);
+                logger.debug(eventData);
                 const gripId = eventState?.userInfo?.pickInfo?.gripTransform?.id;
                 if (gripId) {
                     this.controllers.controllerObserver.notifyObservers({
@@ -120,7 +122,7 @@ export class InputTextView {
         keyboard.onKeyPressObservable.add((key) => {
             if (key === '↵') {
                 if (this.inputText.text && this.inputText.text.length > 0) {
-                    this.logger.error(this.inputText.text);
+                    logger.error(this.inputText.text);
                     this.onTextObservable.notifyObservers({id: this.diagramMesh.id, text: this.inputText.text});
                 } else {
                     this.onTextObservable.notifyObservers({id: this.diagramMesh.id, text: null});

src/menus/clickMenu.ts

@@ -24,7 +24,7 @@ export class ClickMenu {
         const transform = new TransformNode("transform", scene);
 
         transform.position = entity.absolutePosition.clone();
-        transform.position.y += entity.scaling.y;
+        transform.position.y = entity.getBoundingInfo().boundingBox.maximumWorld.y + .1;
 
         const panel = new PlanePanel();
 

src/react/webApp.tsx

@@ -4,9 +4,9 @@ function MainMenu({onClick}) {
     return (
         <div className="overlay mini" id="main">
             <img height="120" src="/assets/ddd.svg" width="320"/>
-            <div id="diagrams"><a href="#" id="diagramsLink" onClick={onClick}>Diagrams</a></div>
+            <div id="enterXR" className="inactive"><a href="#" id="enterVRLink">Enter VR</a></div>
-            <div id="enterXR"><a href="#" id="enterVRLink">Enter VR</a></div>
             <QuestLink/>
+            <div id="diagrams"><a href="#" id="diagramsLink" onClick={onClick}>Diagrams</a></div>
             <div id="download"><a href="#" id="downloadLink">Download Model</a></div>
         </div>
     )

src/util/functions/getFrontPosition.ts

@@ -1,6 +1,6 @@
 import {MeshBuilder, Scene, Vector3} from "@babylonjs/core";
 
-const debug = true;
+const debug = false;
 export function getFrontPosition(distance: number, scene: Scene): Vector3 {
     const offset = new Vector3(0, 0, distance);
     //offset.applyRotationQuaternionInPlace(scene.activeCamera.absoluteRotation);

src/util/functions/groundMeshObserver.ts

@@ -31,7 +31,8 @@ export async function groundMeshObserver(ground, scene, diagramManager, controll
     if (enterButton) {
         const vrSupported = await xr.baseExperience.sessionManager.isSessionSupportedAsync('immersive-vr');
         if (vrSupported) {
-            enterButton.style.display = "block";
+            //enterButton.style.display = "block";
+            enterButton.classList.remove('inactive');
             enterButton.addEventListener('click', (evt) => {
                 evt.preventDefault();
                 //const voice = new VoiceRecognizer();

src/util/functions/updateTextNode.ts

@@ -58,17 +58,22 @@ export function updateTextNode(mesh: AbstractMesh, text: string) {
 
 function createPlane(mat: Material, mesh: AbstractMesh, text: string, planeWidth: number, height: number): AbstractMesh {
     const plane = MeshBuilder.CreatePlane("text" + text, {width: planeWidth, height: height}, mesh.getScene());
-
-    plane.material = mat;
-    //plane.billboardMode = Mesh.BILLBOARDMODE_ALL;
-    plane.metadata = {exportable: true, label: true};
-
     const yOffset = mesh.getBoundingInfo().boundingSphere.maximum.y;
     plane.parent = mesh;
 
     plane.scaling.y = (1 / mesh.scaling.y);
     plane.scaling.x = (1 / mesh.scaling.x);
     plane.scaling.z = (1 / mesh.scaling.z);
+    plane.material = mat;
+    //plane.billboardMode = Mesh.BILLBOARDMODE_ALL;
+    plane.metadata = {exportable: true, label: true};
+    if (mesh.metadata?.template == "#connection-template") {
+        plane.billboardMode = AbstractMesh.BILLBOARDMODE_Y;
+        plane.position.y = mesh.absolutePosition.y + .1;
+
+    } else {
         plane.position.y = yOffset + (height * plane.scaling.y);
+    }
+
     return plane;
 }