mmainguy/immersive2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Menu Handle Component

Browse Source
This commit is contained in:
Michael Mainguy 2023-09-05 06:45:31 -05:00
parent 4f23023428
commit 6ae9cfe12a
8 changed files with 111 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/controllers/right.ts
View File

@ -3,12 +3,16 @@ import {Scene, Vector3, WebXRControllerComponent, WebXRDefaultExperience, WebXRI
import {ControllerEventType, Controllers} from "./controllers";
import log from "loglevel";
import {DiagramManager} from "../diagram/diagramManager";
import {DiagramListingMenu} from "../menus/diagramListingMenu";
export class Right extends Base {
private listingMenu: DiagramListingMenu;
constructor(controller:
WebXRInputSource, scene: Scene, xr: WebXRDefaultExperience, diagramManager: DiagramManager, controllers: Controllers,
) {
super(controller, scene, xr, controllers, diagramManager);
this.listingMenu = new DiagramListingMenu(this.scene, xr, this.controllers);
this.controller.onMotionControllerInitObservable.add((init) => {
this.initTrigger(init.components['xr-standard-trigger']);
this.initBButton(init.components['b-button']);

8
src/diagram/diagramConnection.ts
View File

@ -85,13 +85,16 @@ export class DiagramConnection {
public get id(): string {
return "connection_" + this?.fromAnchor?.id + "_" + this?.toAnchor?.id;
}
private tick: number = 0;
private recalculate() {
if (this.fromAnchor && this.toAnchor) {
this.points = [this.fromAnchor.absolutePosition, this.toAnchor.absolutePosition];
} else {
this.points = [Vector3.Zero(), Vector3.Zero()];
}
}
private setPoints() {
@ -132,9 +135,12 @@ export class DiagramConnection {
}
private beforeRender = () => {
this.tick++;
if (this.tick % 10 == 0) {
this.recalculate();
this.setPoints();
}
}
private removeConnection = () => {
this.logger.debug("removeConnection");
this.scene.onBeforeRenderObservable.removeCallback(this.beforeRender);

9
src/diagram/diagramEntity.ts
View File

@ -9,7 +9,12 @@ export enum DiagramEventType {
DROPPED,
CLEAR,
CHANGECOLOR,
COPY
SYNC
}
export enum DiagramEventMask {
LOCAL = 1,
REMOTE = 2,
}
@ -36,5 +41,3 @@ export type DiagramEntity = {
parent?: string;
diagramlistingid?: string;
}

5
src/diagram/textLabel.ts
View File

@ -1,4 +1,4 @@
import {AbstractMesh, DynamicTexture, Mesh, MeshBuilder, StandardMaterial} from "@babylonjs/core";
import {AbstractMesh, Color3, DynamicTexture, Mesh, MeshBuilder, StandardMaterial} from "@babylonjs/core";
import log from "loglevel";
export class TextLabel {
@ -44,10 +44,11 @@ export class TextLabel {
}, mesh.getScene(), false);
const mat = new StandardMaterial("mat", mesh.getScene());
mat.diffuseTexture = dynamicTexture;
mat.emissiveColor = Color3.White();
dynamicTexture.drawText(text, null, null, font, "#000000", "#ffffff", true);
//Create plane and set dynamic texture as material
const plane = MeshBuilder.CreatePlane("text", {width: planeWidth, height: height}, mesh.getScene());
const plane = MeshBuilder.CreatePlane("text" + text, {width: planeWidth, height: height}, mesh.getScene());
plane.material = mat;
plane.billboardMode = Mesh.BILLBOARDMODE_ALL;

8
src/menus/abstractMenu.ts
View File

@ -1,7 +1,9 @@
import {Scene, WebXRDefaultExperience} from "@babylonjs/core";
import {Scene, TransformNode, WebXRDefaultExperience} from "@babylonjs/core";
import {Controllers} from "../controllers/controllers";
import {MenuHandle} from "./menuHandle";
export class AbstractMenu {
protected handle: MenuHandle;
protected scene: Scene;
protected xr: WebXRDefaultExperience;
protected controllers: Controllers;
@ -12,6 +14,10 @@ export class AbstractMenu {
this.controllers = controllers;
}
protected createHandle(mesh: TransformNode) {
this.handle = new MenuHandle(mesh);
}
public toggle() {
throw new Error("AbstractMenu.toggle() not implemented");
}

5
src/menus/configMenu.ts
View File

@ -5,7 +5,6 @@ import {ControllerEventType, Controllers} from "../controllers/controllers";
import {DiaSounds} from "../util/diaSounds";
import {AbstractMenu} from "./abstractMenu";
import {setMenuPosition} from "../util/functions/setMenuPosition";
import {MenuHandle} from "./menuHandle";
export class ConfigMenu extends AbstractMenu {
private sounds: DiaSounds;
@ -42,7 +41,7 @@ export class ConfigMenu extends AbstractMenu {
}
private handle: MenuHandle;
public toggle() {
if (this.handle) {
@ -58,7 +57,7 @@ export class ConfigMenu extends AbstractMenu {
width: .6,
height: .3
}, this.scene);
this.handle = new MenuHandle(configPlane);
this.createHandle(configPlane);
const configTexture = AdvancedDynamicTexture.CreateForMesh(configPlane, 2048, 1024);
configTexture.background = "white";

66
src/menus/diagramListingMenu.ts Normal file
View File

@ -0,0 +1,66 @@
import {MeshBuilder, Scene, Vector3, WebXRDefaultExperience} from "@babylonjs/core";
import {AbstractMenu} from "./abstractMenu";
import {ControllerEventType, Controllers} from "../controllers/controllers";
import {AdvancedDynamicTexture, Button, Control, ScrollViewer, StackPanel, TextBlock} from "@babylonjs/gui";
import {setMenuPosition} from "../util/functions/setMenuPosition";
export class DiagramListingMenu extends AbstractMenu {
constructor(scene: Scene, xr: WebXRDefaultExperience, controllers: Controllers) {
super(scene, xr, controllers);
this.buildMenu();
this.controllers.controllerObserver.add((event) => {
if (event.type == ControllerEventType.B_BUTTON) {
this.toggle();
}
});
}
public toggle() {
setMenuPosition(this.handle.mesh, this.scene, new Vector3(0, .4, 0));
}
private buildMenu() {
const configPlane = MeshBuilder
.CreatePlane("gridSizePlane",
{
width: 1,
height: .5
}, this.scene);
const configTexture = AdvancedDynamicTexture.CreateForMesh(configPlane, 2048, 1024);
configTexture.background = "white";
const scrollViewer = new ScrollViewer('diagramListingScroll');
configTexture.addControl(scrollViewer);
const stackpanel = new StackPanel('diagramListingStack');
scrollViewer.addControl(stackpanel);
for (let i = 0; i < 100; i++) {
const row = new StackPanel('diagramListingRow ' + i);
row.isVertical = false;
row.height = "68px";
row.width = 1;
stackpanel.addControl(row);
const selectButton = Button.CreateSimpleButton('diagramListingText ' + i, 'Select');
selectButton.height = "64px";
selectButton.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
selectButton.width = "220px";
selectButton.color = "white";
selectButton.fontSize = "48px";
selectButton.background = "#333333";
selectButton.onPointerClickObservable.add(() => {
});
const textBlock = new TextBlock('diagramListingText ' + i, 'Diagram ' + i);
textBlock.width = "1000px";
textBlock.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
textBlock.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
textBlock.fontSize = "48px";
row.addControl(selectButton);
row.addControl(textBlock);
}
this.createHandle(configPlane);
configPlane.position.y = .5;
setMenuPosition(this.handle.mesh, this.scene, new Vector3(0, .4, 0));
}
}

21
src/menus/editMenu.ts
View File

@ -42,13 +42,6 @@ export class EditMenu extends AbstractMenu {
return this.panel.isVisible;
}
private set isVisible(visible: boolean) {
this.panel.isVisible = visible;
this.panel.children.forEach((child) => {
child.isVisible = visible;
});
}
constructor(scene: Scene, xr: WebXRDefaultExperience, diagramManager: DiagramManager, controllers: Controllers) {
super(scene, xr, controllers);
this.scene = scene;
@ -63,6 +56,7 @@ export class EditMenu extends AbstractMenu {
this.gizmoManager.usePointerToAttachGizmos = false;
this.manager = new GUI3DManager(this.scene);
const panel = new PlanePanel();
panel.columns = 4;
this.manager.addControl(panel);
this.buttonMaterial = new StandardMaterial("buttonMaterial", this.scene);
@ -103,7 +97,18 @@ export class EditMenu extends AbstractMenu {
}
});
this.panel = panel;
this.createHandle(this.manager.rootContainer.children[0].node);
this.manager.rootContainer.children[0].node.position.y = .2;
this.isVisible = false;
}
private set isVisible(visible: boolean) {
this.panel.isVisible = visible;
this.panel.children.forEach((child) => {
child.isVisible = visible;
});
this.handle.mesh.isVisible = visible;
}
private getTool(template: string, color: Color3): Mesh {
const baseMeshId = 'tool-' + template + '-' + color.toHexString();
@ -129,7 +134,7 @@ export class EditMenu extends AbstractMenu {
} else {
this.sounds.enter.play();
setMenuPosition(this.manager.rootContainer.children[0].node, this.scene, new Vector3(0, .4, 0));
setMenuPosition(this.handle.mesh, this.scene, new Vector3(0, .4, 0));
this.isVisible = true;
}
}