1
0
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-13 15:15:45 +02:00
This commit is contained in:
syuilo
2026-05-08 18:23:16 +09:00
parent 18b4210eef
commit 14f4d2c228
6 changed files with 22 additions and 18 deletions

View File

@@ -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();

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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 }); }">

View File

@@ -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>