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

Updated click menu rotation and connection endpoint positioning.

Browse Source
This commit is contained in:
Michael Mainguy 2024-04-14 13:42:43 -05:00
parent 12bc90d44f
commit 4f820a4f09
2 changed files with 28 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/diagram/diagramConnection.ts
View File

@ -8,7 +8,7 @@ export class DiagramConnection {
private logger: Logger = log.getLogger('DiagramConnection'); private logger: Logger = log.getLogger('DiagramConnection');
private readonly id: string; private readonly id: string;
constructor(from: string, to: string, id: string, scene?: Scene, gripTransform?: TransformNode) { constructor(from: string, to: string, id: string, scene?: Scene, gripTransform?: TransformNode, clickPoint?: Vector3) {
this.logger.debug('buildConnection constructor'); this.logger.debug('buildConnection constructor');
if (id) { if (id) {
this.id = id; this.id = id;
@ -33,7 +33,12 @@ export class DiagramConnection {
const to = new TransformNode(this.id + "_to", this.scene); const to = new TransformNode(this.id + "_to", this.scene);
to.ignoreNonUniformScaling = true; to.ignoreNonUniformScaling = true;
to.id = this.id + "_to"; to.id = this.id + "_to";
to.position = fromMesh.absolutePosition.clone(); if (clickPoint) {
to.position = clickPoint.clone();
} else {
to.position = fromMesh.absolutePosition.clone();
}
if (gripTransform) { if (gripTransform) {
to.setParent(gripTransform); to.setParent(gripTransform);
} }

37
src/menus/clickMenu.ts
View File

@ -1,5 +1,5 @@
import {Button3D, GUI3DManager, PlanePanel, TextBlock} from "@babylonjs/gui"; import {Button3D, GUI3DManager, PlanePanel, TextBlock} from "@babylonjs/gui";
import {AbstractMesh, TransformNode} from "@babylonjs/core"; import {AbstractMesh, Tools, TransformNode, Vector3} from "@babylonjs/core";
import {DiagramEvent, DiagramEventType} from "../diagram/types/diagramEntity"; import {DiagramEvent, DiagramEventType} from "../diagram/types/diagramEntity";
import {toDiagramEntity} from "../diagram/functions/toDiagramEntity"; import {toDiagramEntity} from "../diagram/functions/toDiagramEntity";
import {DiagramManager} from "../diagram/diagramManager"; import {DiagramManager} from "../diagram/diagramManager";
@ -12,7 +12,7 @@ export class ClickMenu {
private readonly manager: GUI3DManager; private readonly manager: GUI3DManager;
private readonly transform: TransformNode; private readonly transform: TransformNode;
private readonly diagramManager: DiagramManager; private readonly diagramManager: DiagramManager;
private utilityPosition: Vector3;
private connection: DiagramConnection = null; private connection: DiagramConnection = null;
@ -21,27 +21,32 @@ export class ClickMenu {
this.diagramManager = diagramManager; this.diagramManager = diagramManager;
const scene = entity.getScene(); const scene = entity.getScene();
const manager = new GUI3DManager(scene); const manager = new GUI3DManager(scene);
manager.onPickingObservable.add((mesh) => {
if (mesh) {
this.utilityPosition = mesh.getAbsolutePosition();
}
});
const transform = new TransformNode("transform", scene); const transform = new TransformNode("transform", scene);
transform.position = entity.absolutePosition.clone();
transform.position.y = entity.getBoundingInfo().boundingBox.maximumWorld.y + .1;
const panel = new PlanePanel(); const panel = new PlanePanel();
panel.orientation = PlanePanel.FACEFORWARDREVERSED_ORIENTATION; panel.orientation = PlanePanel.FACEFORWARD_ORIENTATION;
panel.columns = 4; panel.columns = 4;
panel.margin = .1;
manager.controlScaling = .1;
manager.addControl(panel); manager.addControl(panel);
panel.linkToTransformNode(transform);
panel.addControl(this.makeButton("Remove", "remove", grip)); panel.addControl(this.makeButton("Remove", "remove", grip));
panel.addControl(this.makeButton("Label", "label", grip)); panel.addControl(this.makeButton("Label", "label", grip));
panel.addControl(this.makeButton("Connect", "connect", grip)); panel.addControl(this.makeButton("Connect", "connect", grip));
panel.addControl(this.makeButton("Close", "close", grip)); panel.addControl(this.makeButton("Close", "close", grip));
manager.controlScaling = .1;
panel.linkToTransformNode(transform); panel.updateLayout();
this.transform = transform; this.transform = transform;
this.manager = manager; this.manager = manager;
Tools.SetImmediate(() => {
transform.position = entity.absolutePosition.clone();
transform.position.y = entity.getBoundingInfo().boundingBox.maximumWorld.y + .1;
transform.billboardMode = TransformNode.BILLBOARDMODE_Y;
});
} }
public get isConnecting() { public get isConnecting() {
@ -68,11 +73,11 @@ export class ClickMenu {
private makeButton(name: string, id: string, grip: TransformNode) { private makeButton(name: string, id: string, grip: TransformNode) {
const button = new Button3D(name); const button = new Button3D(name);
//button.scaling = new Vector3(.1, .1, .1); button.scaling = new Vector3(.1, .1, .1);
button.name = id; button.name = id;
const text = new TextBlock(name, name); const text = new TextBlock(name, name);
text.fontSize = "48px"; text.fontSize = "48px";
text.color = "#ffffff"; text.color = "#ffffee";
text.alpha = 1; text.alpha = 1;
button.content = text; button.content = text;
button.onPointerClickObservable.add(() => { button.onPointerClickObservable.add(() => {
@ -97,16 +102,16 @@ export class ClickMenu {
this.createMeshConnection(this.entity, grip); this.createMeshConnection(this.entity, grip);
} }
}, -1, false, this, true); }, -1, false, this, true);
return button; return button;
} }
private createMeshConnection(mesh: AbstractMesh, grip: TransformNode) { private createMeshConnection(mesh: AbstractMesh, grip: TransformNode) {
this.connection = new DiagramConnection(mesh.id, null, null, this.transform.getScene(), grip); this.connection = new DiagramConnection(mesh.id, null, null, this.transform.getScene(), grip, this.utilityPosition);
} }
private dispose() { private dispose() {
this.manager.onPickingObservable.clear();
this.manager.dispose(); this.manager.dispose();
this.transform.dispose(); this.transform.dispose();