wip

locales/ja-JP.yml

@@ -3554,3 +3554,7 @@ _qr:
   scanFile: "端末の画像をスキャン"
   raw: "テキスト"
   mfm: "MFM"
+
+_room:
+  snapToGrid: "グリッドにスナップ"
+  gridScale: "グリッドサイズ"

packages/frontend/src/pages/room.vue

@@ -14,11 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkButton v-else-if="engine.ui.isGrabbingForInstall" @click="endGrabbing">Install (E)</MkButton>
 			<MkButton v-else @click="beginSelectedInstalledObjectGrabbing">Grab (E)</MkButton>
 
-			<MkButton :primary="engine.enableGridSnapping.value" @click="toggleGridSnapping">Grid Snap: {{ engine.enableGridSnapping.value ? 'on' : 'off' }}</MkButton>
-			<MkButton v-if="engine.enableGridSnapping.value" :primary="engine.gridSnappingScale.value === 1" @click="engine.gridSnappingScale.value = 1">Snap: 1cm</MkButton>
-			<MkButton v-if="engine.enableGridSnapping.value" :primary="engine.gridSnappingScale.value === 2" @click="engine.gridSnappingScale.value = 2">Snap: 2cm</MkButton>
-			<MkButton v-if="engine.enableGridSnapping.value" :primary="engine.gridSnappingScale.value === 4" @click="engine.gridSnappingScale.value = 4">Snap: 4cm</MkButton>
-			<MkButton v-if="engine.enableGridSnapping.value" :primary="engine.gridSnappingScale.value === 8" @click="engine.gridSnappingScale.value = 8">Snap: 8cm</MkButton>
+			<MkButton :primary="engine.enableGridSnapping.value" @click="showSnappingMenu">Grid Snap: {{ engine.enableGridSnapping.value ? 'on' : 'off' }}</MkButton>
 		</template>
 		<MkButton v-if="engine.isSitting.value" @click="engine.standUp()">降りる (Q)</MkButton>
 		<template v-for="interaction in interacions" :key="interaction.id">
@@ -38,6 +34,7 @@ import MkButton from '@/components/MkButton.vue';
 import { RoomEngine } from '@/utility/room/engine.js';
 import { getObjectDef } from '@/utility/room/object-defs.js';
 import MkSelect from '@/components/MkSelect.vue';
+import * as os from '@/os.js';
 
 const canvas = useTemplateRef('canvas');
 
@@ -423,6 +420,35 @@ function toggleLight() {
 	canvas.value!.focus();
 }
 
+function showSnappingMenu(ev: PointerEvent) {
+	if (engine.value == null) return;
+	os.popupMenu([{
+		type: 'switch',
+		text: i18n.ts._room.snapToGrid,
+		ref: engine.value.enableGridSnapping,
+	}, {
+		type: 'radioOption',
+		text: '1cm',
+		active: computed(() => engine.value!.gridSnappingScale.value === 1),
+		action: () => engine.value!.gridSnappingScale.value = 1,
+	}, {
+		type: 'radioOption',
+		text: '2cm',
+		active: computed(() => engine.value!.gridSnappingScale.value === 2),
+		action: () => engine.value!.gridSnappingScale.value = 2,
+	}, {
+		type: 'radioOption',
+		text: '4cm',
+		active: computed(() => engine.value!.gridSnappingScale.value === 4),
+		action: () => engine.value!.gridSnappingScale.value = 4,
+	}, {
+		type: 'radioOption',
+		text: '8cm',
+		active: computed(() => engine.value!.gridSnappingScale.value === 8),
+		action: () => engine.value!.gridSnappingScale.value = 8,
+	}], ev.currentTarget ?? ev.target);
+}
+
 function toggleGridSnapping() {
 	engine.value.enableGridSnapping.value = !engine.value.enableGridSnapping.value;
 	canvas.value!.focus();

packages/i18n/src/autogen/locale.ts

@@ -13266,4 +13266,14 @@ export interface Locale extends ILocale {
          */
         "mfm": string;
     };
+    "_room": {
+        /**
+         * グリッドにスナップ
+         */
+        "snapToGrid": string;
+        /**
+         * グリッドサイズ
+         */
+        "gridScale": string;
+    };
 }