wip

packages/frontend/src/pages/room.vue

@@ -7,6 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div :class="$style.root" class="_pageScrollable">
 	<div :class="$style.screen">
 		<canvas ref="canvas" :class="$style.canvas" @keydown="onKeydown" @wheel="onWheel"></canvas>
+
 		<div v-if="engine != null" class="_buttonsCenter" :class="$style.overlayControls">
 			<template v-if="engine.isEditMode.value">
 				<MkButton v-if="engine.ui.isGrabbing" @click="endGrabbing">Put (E)</MkButton>
@@ -22,7 +23,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkButton inline @click="interaction.fn()">{{ interaction.label }}{{ interaction.isPrimary ? ' (E)' : '' }}</MkButton>
 			</template>
 		</div>
+
+		<div v-if="engine != null && engine.isEditMode.value && engine.selected.value != null" class="_panel" :class="$style.overlayObjectInfoPanel">
+			{{ engine.selected.value.objectId }}
+		</div>
 	</div>
+
 	<div v-if="engine != null" class="_buttons" :class="$style.controls">
 		<!--<MkButton v-for="action in actions" :key="action.key" @click="action.fn">{{ action.label }}{{ hotkeyToLabel(action.hotkey) }}</MkButton>-->
 		<MkButton @click="toggleLight">Toggle Light</MkButton>
@@ -116,8 +122,8 @@ function onKeydown(ev: KeyboardEvent) {
 			} else {
 				beginSelectedInstalledObjectGrabbing();
 			}
-		} else if (engine.value.selectedObjectId.value != null) {
+		} else if (engine.value.selected.value != null) {
-			engine.value.interact(engine.value.selectedObjectId.value);
+			engine.value.interact(engine.value.selected.value.objectId);
 		}
 	} else if (ev.code === 'KeyR') {
 		ev.preventDefault();
@@ -425,15 +431,14 @@ onMounted(() => {
 
 	window.addEventListener('resize', resize);
 
-	watch(engine.value.selectedObjectId, (v) => {
+	watch(engine.value.selected, (v) => {
 		if (v == null) {
 			interacions.value = [];
 		} else {
-			const obji = engine.value.objectInstances.get(v)!;
+			interacions.value = Object.entries(v.objectInstance.interactions).map(([interactionId, interactionInfo]) => ({
-			interacions.value = Object.entries(obji.interactions).map(([interactionId, interactionInfo]) => ({
 				id: interactionId,
 				label: interactionInfo.label,
-				isPrimary: obji.primaryInteraction === interactionId,
+				isPrimary: v.objectInstance.primaryInteraction === interactionId,
 				fn: interactionInfo.fn,
 			}));
 		}
@@ -546,4 +551,12 @@ definePage(() => ({
 	z-index: 1;
 	width: 100%;
 }
+
+.overlayObjectInfoPanel {
+	position: absolute;
+	top: 8px;
+	right: 8px;
+	z-index: 1;
+	padding: 16px;
+}
 </style>

packages/frontend/src/utility/room/engine.ts

@@ -25,7 +25,7 @@ import { registerBuiltInLoaders } from '@babylonjs/loaders/dynamic';
 import { BoundingBoxRenderer } from '@babylonjs/core/Rendering/boundingBoxRenderer';
 import { GridMaterial } from '@babylonjs/materials';
 import { ShowInspector } from '@babylonjs/inspector';
-import { reactive, ref, watch } from 'vue';
+import { reactive, ref, shallowRef, watch } from 'vue';
 import { genId } from '../id.js';
 import { getObjectDef } from './object-defs.js';
 import { HorizontalCameraKeyboardMoveInput } from './utility.js';
@@ -170,7 +170,11 @@ export class RoomEngine {
 		onCancel?: () => void;
 		onDone?: () => void;
 	} | null = null;
-	public selectedObjectId = ref<string | null>(null);
+	public selected = shallowRef<{
+		objectId: string;
+		objectMesh: BABYLON.Mesh;
+		objectInstance: RoomObjectInstance<any>;
+	} | null>(null);
 	private time: 0 | 1 | 2 = 0; // 0: 昼, 1: 夕, 2: 夜
 	private roomCollisionMeshes: BABYLON.AbstractMesh[] = [];
 	public roomState: RoomState;
@@ -526,14 +530,12 @@ export class RoomEngine {
 	}
 
 	public selectObject(objectId: string | null) {
-		if (this.selectedObjectId.value != null) {
+		if (this.selected.value != null) {
-			const prevMesh = this.objectMeshs.get(this.selectedObjectId.value);
+			const prevMesh = this.selected.value.objectMesh;
-			if (prevMesh != null) {
+			for (const om of prevMesh.getChildMeshes()) {
-				for (const om of prevMesh.getChildMeshes()) {
+				om.renderOutline = false;
-					om.renderOutline = false;
-				}
 			}
-			this.selectedObjectId.value = null;
+			this.selected.value = null;
 		}
 
 		if (objectId != null) {
@@ -542,7 +544,11 @@ export class RoomEngine {
 				for (const om of mesh.getChildMeshes()) {
 					om.renderOutline = true;
 				}
-				this.selectedObjectId.value = objectId;
+				this.selected.value = {
+					objectId,
+					objectMesh: mesh,
+					objectInstance: this.objectInstances.get(objectId)!,
+				};
 			}
 		}
 	}
@@ -856,7 +862,7 @@ export class RoomEngine {
 						this.shadowGenerator2.addShadowCaster(mesh);
 					}
 
-					mesh.renderOutline = this.selectedObjectId.value === args.id;
+					mesh.renderOutline = this.selected.value?.objectId === args.id;
 					mesh.outlineWidth = 0.003;
 					mesh.outlineColor = new BABYLON.Color3(1, 0, 0);
 					//if (mesh.material) (mesh.material as BABYLON.PBRMaterial).ambientColor = new BABYLON.Color3(0.2, 0.2, 0.2);
@@ -895,9 +901,9 @@ export class RoomEngine {
 	}
 
 	public beginSelectedInstalledObjectGrabbing() {
-		if (this.selectedObjectId.value == null) return;
+		if (this.selected.value == null) return;
 
-		const selectedObject = this.objectMeshs.get(this.selectedObjectId.value)!;
+		const selectedObject = this.selected.value.objectMesh;
 		for (const om of selectedObject.getChildMeshes()) {
 			om.renderOutline = false;
 		}