wip

packages/frontend/src/pages/room.vue

@@ -24,6 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<template v-if="!isZenMode">
 			<div v-if="controller.isReady.value" class="_buttonsCenter" :class="$style.overlayControls">
 				<template v-if="controller.isEditMode.value">
+					<MkButton v-if="controller.grabbing.value" @click="cancelGrabbing"><i class="ti ti-x"></i> cancel</MkButton>
 					<MkButton v-if="controller.grabbing.value && !controller.grabbing.value.forInstall" @click="endGrabbing"><i class="ti ti-check"></i> (E)</MkButton>
 					<MkButton v-else-if="controller.grabbing.value && controller.grabbing.value.forInstall" @click="endGrabbing"><i class="ti ti-check"></i> (E)</MkButton>
 					<MkButton v-else-if="controller.selected.value != null" @click="beginSelectedInstalledObjectGrabbing"><i class="ti ti-hand-grab"></i> (E)</MkButton>
@@ -40,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</template>
 			</div>
 
-			<div v-if="controller.isReady.value && controller.isEditMode.value && controller.selected.value != null" :key="controller.selected.value.objectId" class="_panel" :class="$style.overlayObjectInfoPanel">
+			<div v-if="controller.isReady.value && controller.isEditMode.value && controller.selected.value != null && !controller.grabbing.value" :key="controller.selected.value.objectId" class="_panel" :class="$style.overlayObjectInfoPanel">
 				{{ controller.selected.value.objectDef.name }}
 
 				<div class="_gaps">
@@ -242,6 +243,11 @@ function endGrabbing() {
 	canvas.value!.focus();
 }
 
+function cancelGrabbing() {
+	controller.cancelGrabbing();
+	canvas.value!.focus();
+}
+
 function toggleLight() {
 	controller.toggleRoomLight();
 	canvas.value!.focus();

packages/frontend/src/world/room/controller.ts

@@ -5,6 +5,7 @@
 
 import { reactive, ref, shallowRef, triggerRef, watch } from 'vue';
 import * as BABYLON from '@babylonjs/core';
+import { cm } from '../utility.js';
 import RoomWorker from './worker?worker';
 import { RoomEngine } from './engine.js';
 import type { ShallowRef } from 'vue';
@@ -20,7 +21,7 @@ export class RoomController {
 	public isSitting = ref(false);
 	public isEditMode = ref(false);
 	public grabbing = ref<{ forInstall: boolean } | null>(null);
-	public gridSnapping = ref({ enabled: true, scale: 4 });
+	public gridSnapping = ref({ enabled: true, scale: cm(4) });
 	public selected = ref<{
 		objectId: string;
 		objectState: RoomStateObject;
@@ -230,6 +231,14 @@ export class RoomController {
 		}
 	}
 
+	public cancelGrabbing() {
+		if (this.worker != null) {
+			this.worker.postMessage({ type: 'cancelGrabbing' });
+		} else if (this.engine != null) {
+			this.engine.endGrabbing(true);
+		}
+	}
+
 	public toggleRoomLight() {
 		if (this.worker != null) {
 			this.worker.postMessage({ type: 'toggleRoomLight' });

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

@@ -1211,7 +1211,20 @@ export class RoomEngine extends EventEmitter<RoomEngineEvents> {
 				sticky = info.sticky;
 			},
 			onCancel: () => {
-				// todo: initialPositionなどを復元
+				selectedObject.position = initialPosition.clone();
+				selectedObject.rotation = initialRotation.clone();
+
+				// 親から先に外していく
+				const removeStickyParentRecursively = (mesh: BABYLON.Mesh) => {
+					const stickyObjectIds = Array.from(this.roomState.installedObjects.filter(o => o.sticky === mesh.metadata.objectId)).map(o => o.id);
+					for (const soid of stickyObjectIds) {
+						const soMesh = this.objectEntities.get(soid)!.rootMesh;
+						soMesh.setParent(null);
+
+						removeStickyParentRecursively(soMesh);
+					}
+				};
+				removeStickyParentRecursively(selectedObject);
 			},
 			onDone: () => { // todo: sticky状態などを引数でもらうようにしたい
 				this.putParticleSystem.emitter = selectedObject.position.clone();
@@ -1282,12 +1295,16 @@ export class RoomEngine extends EventEmitter<RoomEngineEvents> {
 		});
 	}
 
-	public endGrabbing() {
+	public endGrabbing(cancel = false) {
 		if (this.grabbingCtx == null) return;
 
 		//this.grabbing.ghost.dispose(false, true);
 		this.grabbingCtx.ghost.dispose(false, false);
-		this.grabbingCtx.onDone?.();
+		if (cancel) {
+			this.grabbingCtx.onCancel?.();
+		} else {
+			this.grabbingCtx.onDone?.();
+		}
 		this.grabbingCtx = null;
 
 		this.gridPlane.isVisible = false;