From 14f4d2c228e9640da09df5cfb8f7ef5e56a95770 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Fri, 8 May 2026 18:23:16 +0900
Subject: [PATCH] wip

---
 packages/frontend/src/components/MkInput.vue         | 12 ++++++++----
 packages/frontend/src/pages/room.env-options.vue     |  4 ++--
 .../src/pages/room.object-customize-form.vue         |  4 ++--
 .../frontend/src/pages/room.simple-env-options.vue   |  8 ++++----
 .../src/pages/room.simple-env-pillar-options.vue     |  4 ++--
 .../src/pages/room.simple-env-wall-options.vue       |  8 ++++----
 6 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/packages/frontend/src/components/MkInput.vue b/packages/frontend/src/components/MkInput.vue
index aebeefe165..1622e57d64 100644
--- a/packages/frontend/src/components/MkInput.vue
+++ b/packages/frontend/src/components/MkInput.vue
@@ -53,7 +53,7 @@ type ModelValueType<T extends SupportedTypes> =
 
 <script lang="ts" setup generic="T extends SupportedTypes = 'text'">
 import { onMounted, onUnmounted, nextTick, ref, useTemplateRef, watch, computed, toRefs } from 'vue';
-import { debounce } from 'throttle-debounce';
+import { throttle, debounce } from 'throttle-debounce';
 import { useInterval } from '@@/js/use-interval.js';
 import type { InputHTMLAttributes } from 'vue';
 import type { SuggestionType } from '@/utility/autocomplete.js';
@@ -81,7 +81,8 @@ const props = defineProps<{
 	min?: number;
 	max?: number;
 	inline?: boolean;
-	debounce?: boolean;
+	debounce?: boolean | number;
+	throttle?: boolean | number;
 	manualSave?: boolean;
 	small?: boolean;
 	large?: boolean;
@@ -135,7 +136,8 @@ const updated = () => {
 	}
 };
 
-const debouncedUpdated = debounce(1000, updated);
+const throttledUpdated = throttle(typeof props.throttle === 'number' ? props.throttle : 1000, updated);
+const debouncedUpdated = debounce(typeof props.debounce === 'number' ? props.debounce : 1000, updated);
 
 watch(modelValue, newValue => {
 	v.value = newValue;
@@ -143,7 +145,9 @@ watch(modelValue, newValue => {
 
 watch(v, () => {
 	if (!props.manualSave) {
-		if (props.debounce) {
+		if (props.throttle === true || typeof props.throttle === 'number') {
+			throttledUpdated();
+		} else if (props.debounce === true || typeof props.debounce === 'number') {
 			debouncedUpdated();
 		} else {
 			updated();
diff --git a/packages/frontend/src/pages/room.env-options.vue b/packages/frontend/src/pages/room.env-options.vue
index 10c6aff1d4..60427f6126 100644
--- a/packages/frontend/src/pages/room.env-options.vue
+++ b/packages/frontend/src/pages/room.env-options.vue
@@ -16,8 +16,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<template #label>Env type</template>
 		</MkSelect>
 
-		<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
-		<MkInput :modelValue="getHex(controller.roomState.value.roomLightColor)" type="color" debounce @update:modelValue="v => { const c = getRgb(v); if (c != null) controller.updateRoomLightColor(c); }">
+		<!-- debounce or throttleしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
+		<MkInput :modelValue="getHex(controller.roomState.value.roomLightColor)" type="color" :throttle="300" @update:modelValue="v => { const c = getRgb(v); if (c != null) controller.updateRoomLightColor(c); }">
 			<template #label>light color</template>
 		</MkInput>
 
diff --git a/packages/frontend/src/pages/room.object-customize-form.vue b/packages/frontend/src/pages/room.object-customize-form.vue
index 91ec7e31bd..c6d8765d8b 100644
--- a/packages/frontend/src/pages/room.object-customize-form.vue
+++ b/packages/frontend/src/pages/room.object-customize-form.vue
@@ -9,8 +9,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div v-for="[k, s] in Object.entries(schema)" :key="k">
 			<div>{{ s.label }}</div>
 			<div v-if="s.type === 'color'">
-				<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
-				<MkInput :modelValue="getHex(options[k])" type="color" debounce @update:modelValue="v => { const c = getRgb(v); if (c != null) emit('update', k, c); }"></MkInput>
+				<!-- debounce or throttleしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
+				<MkInput :modelValue="getHex(options[k])" type="color" :throttle="300" @update:modelValue="v => { const c = getRgb(v); if (c != null) emit('update', k, c); }"></MkInput>
 			</div>
 			<div v-else-if="s.type === 'boolean'">
 				<MkSwitch :modelValue="options[k]" @update:modelValue="v => emit('update', k, v)"></MkSwitch>
diff --git a/packages/frontend/src/pages/room.simple-env-options.vue b/packages/frontend/src/pages/room.simple-env-options.vue
index 0a9e0650fc..fc25ef4809 100644
--- a/packages/frontend/src/pages/room.simple-env-options.vue
+++ b/packages/frontend/src/pages/room.simple-env-options.vue
@@ -69,8 +69,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			>
 				<template #label>wallpaper</template>
 			</MkSelect>
-			<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
-			<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 } }); }">
+			<!-- debounce or throttleしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
+			<MkInput :modelValue="getHex(options.ceiling.color)" type="color" :throttle="300" @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ ceiling: { ...options.ceiling, color: c } }); }">
 				<template #label>color</template>
 			</MkInput>
 		</MkFolder>
@@ -86,8 +86,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			>
 				<template #label>material</template>
 			</MkSelect>
-			<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
-			<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 } }); }">
+			<!-- debounce or throttleしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
+			<MkInput :modelValue="getHex(options.flooring.color)" type="color" :throttle="300" @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.simple-env-pillar-options.vue b/packages/frontend/src/pages/room.simple-env-pillar-options.vue
index 8a82e4d3c5..d3b45db6d6 100644
--- a/packages/frontend/src/pages/room.simple-env-pillar-options.vue
+++ b/packages/frontend/src/pages/room.simple-env-pillar-options.vue
@@ -15,8 +15,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 		>
 			<template #label>wallpaper</template>
 		</MkSelect>
-		<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
-		<MkInput :modelValue="getHex(options.color)" type="color" debounce @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ color: c }); }">
+		<!-- debounce or throttleしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
+		<MkInput :modelValue="getHex(options.color)" type="color" :throttle="300" @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.simple-env-wall-options.vue b/packages/frontend/src/pages/room.simple-env-wall-options.vue
index d3bc85e775..4180fa2236 100644
--- a/packages/frontend/src/pages/room.simple-env-wall-options.vue
+++ b/packages/frontend/src/pages/room.simple-env-wall-options.vue
@@ -15,8 +15,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 		>
 			<template #label>wallpaper</template>
 		</MkSelect>
-		<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
-		<MkInput :modelValue="getHex(options.color)" type="color" debounce @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ color: c }); }">
+		<!-- debounce or throttleしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
+		<MkInput :modelValue="getHex(options.color)" type="color" :throttle="300" @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ color: c }); }">
 			<template #label>color</template>
 		</MkInput>
 		<hr>
@@ -32,8 +32,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 		>
 			<template #label>beam material</template>
 		</MkSelect>
-		<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
-		<MkInput :modelValue="getHex(options.beamColor)" type="color" debounce @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ beamColor: c }); }">
+		<!-- debounce or throttleしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
+		<MkInput :modelValue="getHex(options.beamColor)" type="color" :throttle="300" @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ beamColor: c }); }">
 			<template #label>beam color</template>
 		</MkInput>
 		<hr>