From 722d09b1aece659b21967888ce2e8b0d665fb92f Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Thu, 30 Apr 2026 20:52:53 +0900
Subject: [PATCH] wip

---
 .../src/pages/room.default-heya-options.vue   |  6 +-
 .../room.default-heya-pillar-options.vue      |  3 +-
 .../pages/room.default-heya-wall-options.vue  |  6 +-
 .../frontend/src/pages/room.heya-options.vue  | 57 +++++++++++++++++++
 packages/frontend/src/pages/room.vue          | 26 ++-------
 .../frontend/src/world/room/controller.ts     |  2 +
 packages/frontend/src/world/room/engine.ts    |  3 +-
 7 files changed, 75 insertions(+), 28 deletions(-)
 create mode 100644 packages/frontend/src/pages/room.heya-options.vue

diff --git a/packages/frontend/src/pages/room.default-heya-options.vue b/packages/frontend/src/pages/room.default-heya-options.vue
index 93c75aa1e8..b391aeee60 100644
--- a/packages/frontend/src/pages/room.default-heya-options.vue
+++ b/packages/frontend/src/pages/room.default-heya-options.vue
@@ -69,7 +69,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			>
 				<template #label>wallpaper</template>
 			</MkSelect>
-			<MkInput :modelValue="getHex(options.ceiling.color)" type="color" @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ ceiling: { ...options.ceiling, color: c } }); }">
+			<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる -->
+			<MkInput :modelValue="getHex(options.ceiling.color)" type="color" debounce @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ ceiling: { ...options.ceiling, color: c } }); }">
 				<template #label>color</template>
 			</MkInput>
 		</MkFolder>
@@ -85,7 +86,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			>
 				<template #label>material</template>
 			</MkSelect>
-			<MkInput :modelValue="getHex(options.flooring.color)" type="color" @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ flooring: { ...options.flooring, color: c } }); }">
+			<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる -->
+			<MkInput :modelValue="getHex(options.flooring.color)" type="color" debounce @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ flooring: { ...options.flooring, color: c } }); }">
 				<template #label>color</template>
 			</MkInput>
 		</MkFolder>
diff --git a/packages/frontend/src/pages/room.default-heya-pillar-options.vue b/packages/frontend/src/pages/room.default-heya-pillar-options.vue
index 1e2f13f730..f319f64ecb 100644
--- a/packages/frontend/src/pages/room.default-heya-pillar-options.vue
+++ b/packages/frontend/src/pages/room.default-heya-pillar-options.vue
@@ -15,7 +15,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 		>
 			<template #label>wallpaper</template>
 		</MkSelect>
-		<MkInput :modelValue="getHex(options.color)" type="color" @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ color: c }); }">
+		<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる -->
+		<MkInput :modelValue="getHex(options.color)" type="color" debounce @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ color: c }); }">
 			<template #label>color</template>
 		</MkInput>
 		<MkSwitch :modelValue="options.show" @update:modelValue="v => { update({ show: v }); }">
diff --git a/packages/frontend/src/pages/room.default-heya-wall-options.vue b/packages/frontend/src/pages/room.default-heya-wall-options.vue
index 293366615e..1e88ce2876 100644
--- a/packages/frontend/src/pages/room.default-heya-wall-options.vue
+++ b/packages/frontend/src/pages/room.default-heya-wall-options.vue
@@ -15,7 +15,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 		>
 			<template #label>wallpaper</template>
 		</MkSelect>
-		<MkInput :modelValue="getHex(options.color)" type="color" @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ color: c }); }">
+		<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる -->
+		<MkInput :modelValue="getHex(options.color)" type="color" debounce @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ color: c }); }">
 			<template #label>color</template>
 		</MkInput>
 		<hr>
@@ -31,7 +32,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 		>
 			<template #label>beam material</template>
 		</MkSelect>
-		<MkInput :modelValue="getHex(options.beamColor)" type="color" @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ beamColor: c }); }">
+		<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる -->
+		<MkInput :modelValue="getHex(options.beamColor)" type="color" debounce @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ beamColor: c }); }">
 			<template #label>beam color</template>
 		</MkInput>
 		<hr>
diff --git a/packages/frontend/src/pages/room.heya-options.vue b/packages/frontend/src/pages/room.heya-options.vue
new file mode 100644
index 0000000000..908ba52c76
--- /dev/null
+++ b/packages/frontend/src/pages/room.heya-options.vue
@@ -0,0 +1,57 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div :class="$style.root">
+	<div class="_gaps">
+		<MkSelect
+			:items="[
+				{ label: 'Simple', value: 'simple' },
+			]" :modelValue="controller.roomState.value.heya.type" @update:modelValue="v => controller.changeHeyaType(v)"
+		>
+			<template #label>Heya type</template>
+		</MkSelect>
+
+		<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる -->
+		<MkInput :modelValue="getHex(controller.roomState.value.roomLightColor)" type="color" debounce @update:modelValue="v => { const c = getRgb(v); if (c != null) controller.updateRoomLightColor(c); }">
+			<template #label>light color</template>
+		</MkInput>
+
+		<template v-if="controller.roomState.value.heya.type === 'simple'">
+			<XDefaultHeyaOptions :options="controller.roomState.value.heya.options" @update="v => controller.updateHeyaOptions(v)"></XDefaultHeyaOptions>
+		</template>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, shallowRef, useTemplateRef, watch } from 'vue';
+import XWallOption from './room.default-heya-wall-options.vue';
+import XPillarOption from './room.default-heya-pillar-options.vue';
+import XDefaultHeyaOptions from './room.default-heya-options.vue';
+import type { ObjectDef } from '@/world/room/object.js';
+import type { SimpleHeyaOptions } from '@/world/room/heya.js';
+import type { RoomState } from '@/world/room/engine.js';
+import type { RoomController } from '@/world/room/controller.js';
+import { i18n } from '@/i18n.js';
+import MkButton from '@/components/MkButton.vue';
+import MkSelect from '@/components/MkSelect.vue';
+import * as os from '@/os.js';
+import MkInput from '@/components/MkInput.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+import MkRange from '@/components/MkRange.vue';
+import { getHex, getRgb } from '@/world/utility.js';
+import MkFolder from '@/components/MkFolder.vue';
+
+const props = defineProps<{
+	controller: RoomController;
+}>();
+
+</script>
+
+<style lang="scss" module>
+.root {
+}
+</style>
diff --git a/packages/frontend/src/pages/room.vue b/packages/frontend/src/pages/room.vue
index 5227238275..b422c1bae4 100644
--- a/packages/frontend/src/pages/room.vue
+++ b/packages/frontend/src/pages/room.vue
@@ -72,21 +72,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 
 		<div v-if="isRoomSettingsOpen && controller.isEditMode.value" class="_panel" :class="$style.overlayObjectInfoPanel">
-			<div class="_gaps">
-				Room options
-
-				<MkSelect
-					:items="[
-						{ label: 'Simple', value: 'simple' },
-					]" :modelValue="controller.roomState.value.heya.type" @update:modelValue="v => controller.changeHeyaType(v)"
-				>
-					<template #label>Heya type</template>
-				</MkSelect>
-
-				<template v-if="controller.roomState.value.heya.type === 'simple'">
-					<XDefaultHeyaOptions :options="controller.roomState.value.heya.options" @update="v => controller.updateHeyaOptions(v)"></XDefaultHeyaOptions>
-				</template>
-			</div>
+			<XHeyaOptions :controller="controller"/>
 		</div>
 	</div>
 
@@ -97,20 +83,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, shallowRef, useTemplateRef, watch } from 'vue';
+import { computed, defineAsyncComponent, markRaw, nextTick, onMounted, onUnmounted, ref, shallowRef, useTemplateRef, watch } from 'vue';
 import * as BABYLON from '@babylonjs/core';
 import XObjectCustomizeForm from './room.object-customize-form.vue';
-import XDefaultHeyaOptions from './room.default-heya-options.vue';
+import XHeyaOptions from './room.heya-options.vue';
 import type { RoomControllerOptions } from '@/world/room/controller.js';
 import { definePage } from '@/page.js';
 import { i18n } from '@/i18n.js';
 import { ensureSignin } from '@/i';
 import MkButton from '@/components/MkButton.vue';
-import MkSelect from '@/components/MkSelect.vue';
 import * as os from '@/os.js';
-import MkInput from '@/components/MkInput.vue';
-import MkSwitch from '@/components/MkSwitch.vue';
-import MkRange from '@/components/MkRange.vue';
 import { RoomController } from '@/world/room/controller.js';
 import { cm, getHex, getRgb } from '@/world/utility.js';
 import { deepClone } from '@/utility/clone.js';
@@ -256,7 +238,7 @@ const roomControllerOptions = computed<RoomControllerOptions>(() => ({
 	workerMode: true,
 }));
 
-const controller = new RoomController(data, roomControllerOptions.value);
+const controller = markRaw(new RoomController(data, roomControllerOptions.value));
 
 const selectedObjectDef = computed(() => controller.selected.value == null ? null : getObjectDef(controller.selected.value.objectState.type));
 
diff --git a/packages/frontend/src/world/room/controller.ts b/packages/frontend/src/world/room/controller.ts
index f14c56f662..bb84d1d962 100644
--- a/packages/frontend/src/world/room/controller.ts
+++ b/packages/frontend/src/world/room/controller.ts
@@ -15,6 +15,7 @@ import type { ObjectDef, RoomStateObject } from './object.js';
 import * as sound from '@/utility/sound.js';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
+import { deepEqual } from '@/utility/deep-equal.js';
 
 export type RoomControllerOptions = {
 	workerMode?: boolean;
@@ -142,6 +143,7 @@ export class RoomController {
 		});
 
 		engineEvents.on('changeRoomState', ({ roomState }) => {
+			if (deepEqual(this.roomState.value, roomState)) return; // vueのリアクティビティが反応して無限ループになることがあるため
 			this.roomState.value = roomState;
 			triggerRef(this.selected);
 		});
diff --git a/packages/frontend/src/world/room/engine.ts b/packages/frontend/src/world/room/engine.ts
index cb54528f1e..10183358ff 100644
--- a/packages/frontend/src/world/room/engine.ts
+++ b/packages/frontend/src/world/room/engine.ts
@@ -313,7 +313,7 @@ export class RoomEngine extends EventEmitter {
 		//this.scene.activeCamera = this.camera;
 
 		this.roomLight = new BABYLON.SpotLight('roomLight', new BABYLON.Vector3(0, cm(249), 0), new BABYLON.Vector3(0, -1, 0), 16, 8, this.scene);
-		this.roomLight.diffuse = roomState.roomLightColor != null ? new BABYLON.Color3(...roomState.roomLightColor) : new BABYLON.Color3(1.0, 0.9, 0.8);
+		this.roomLight.diffuse = new BABYLON.Color3(...roomState.roomLightColor);
 		this.roomLight.shadowMinZ = cm(10);
 		this.roomLight.shadowMaxZ = cm(300);
 		this.roomLight.radius = cm(30);
@@ -1414,6 +1414,7 @@ export class RoomEngine extends EventEmitter {
 	}
 
 	public updateRoomLightColor(color: [number, number, number]) {
+		if (this.roomLight.diffuse.equalsFloats(...color)) return;
 		this.roomLight.diffuse = new BABYLON.Color3(...color);
 		this.roomState.roomLightColor = color;
 		this.ev('changeRoomState', { roomState: this.roomState });