mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-23 11:04:10 +02:00
Code Releases Activity

wip

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/frontend/src/components/MkInput.vue
View File

@@ -53,7 +53,7 @@ type ModelValueType<T extends SupportedTypes> =
<script lang="ts" setup generic="T extends SupportedTypes = 'text'"> <script lang="ts" setup generic="T extends SupportedTypes = 'text'">
import { onMounted, onUnmounted, nextTick, ref, useTemplateRef, watch, computed, toRefs } from 'vue'; 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 { useInterval } from '@@/js/use-interval.js';
import type { InputHTMLAttributes } from 'vue'; import type { InputHTMLAttributes } from 'vue';
import type { SuggestionType } from '@/utility/autocomplete.js'; import type { SuggestionType } from '@/utility/autocomplete.js';
@@ -81,7 +81,8 @@ const props = defineProps<{
min?: number; min?: number;
max?: number; max?: number;
inline?: boolean; inline?: boolean;
debounce?: boolean; debounce?: boolean | number;
throttle?: boolean | number;
manualSave?: boolean; manualSave?: boolean;
small?: boolean; small?: boolean;
large?: 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 => { watch(modelValue, newValue => {
v.value = newValue; v.value = newValue;
@@ -143,7 +145,9 @@ watch(modelValue, newValue => {
watch(v, () => { watch(v, () => {
if (!props.manualSave) { 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(); debouncedUpdated();
} else { } else {
updated(); updated();

4
packages/frontend/src/pages/room.env-options.vue
View File

@@ -16,8 +16,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #label>Env type</template> <template #label>Env type</template>
</MkSelect> </MkSelect>
<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる --> <!-- debounce or throttleしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
<MkInput :modelValue="getHex(controller.roomState.value.roomLightColor)" type="color" debounce @update:modelValue="v => { const c = getRgb(v); if (c != null) controller.updateRoomLightColor(c); }"> <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> <template #label>light color</template>
</MkInput> </MkInput>

4
packages/frontend/src/pages/room.object-customize-form.vue
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 v-for="[k, s] in Object.entries(schema)" :key="k">
<div>{{ s.label }}</div> <div>{{ s.label }}</div>
<div v-if="s.type === 'color'"> <div v-if="s.type === 'color'">
<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる --> <!-- debounce or throttleしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
<MkInput :modelValue="getHex(options[k])" type="color" debounce @update:modelValue="v => { const c = getRgb(v); if (c != null) emit('update', k, c); }"></MkInput> <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>
<div v-else-if="s.type === 'boolean'"> <div v-else-if="s.type === 'boolean'">
<MkSwitch :modelValue="options[k]" @update:modelValue="v => emit('update', k, v)"></MkSwitch> <MkSwitch :modelValue="options[k]" @update:modelValue="v => emit('update', k, v)"></MkSwitch>

8
packages/frontend/src/pages/room.simple-env-options.vue
View File

@@ -69,8 +69,8 @@ SPDX-License-Identifier: AGPL-3.0-only
> >
<template #label>wallpaper</template> <template #label>wallpaper</template>
</MkSelect> </MkSelect>
<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる --> <!-- debounce or throttleしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまた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 } }); }"> <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> <template #label>color</template>
</MkInput> </MkInput>
</MkFolder> </MkFolder>
@@ -86,8 +86,8 @@ SPDX-License-Identifier: AGPL-3.0-only
> >
<template #label>material</template> <template #label>material</template>
</MkSelect> </MkSelect>
<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる --> <!-- debounce or throttleしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまた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 } }); }"> <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> <template #label>color</template>
</MkInput> </MkInput>
</MkFolder> </MkFolder>

4
packages/frontend/src/pages/room.simple-env-pillar-options.vue
View File

@@ -15,8 +15,8 @@ SPDX-License-Identifier: AGPL-3.0-only
> >
<template #label>wallpaper</template> <template #label>wallpaper</template>
</MkSelect> </MkSelect>
<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる --> <!-- debounce or throttleしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
<MkInput :modelValue="getHex(options.color)" type="color" debounce @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ color: c }); }"> <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> <template #label>color</template>
</MkInput> </MkInput>
<MkSwitch :modelValue="options.show" @update:modelValue="v => { update({ show: v }); }"> <MkSwitch :modelValue="options.show" @update:modelValue="v => { update({ show: v }); }">

8
packages/frontend/src/pages/room.simple-env-wall-options.vue
View File

@@ -15,8 +15,8 @@ SPDX-License-Identifier: AGPL-3.0-only
> >
<template #label>wallpaper</template> <template #label>wallpaper</template>
</MkSelect> </MkSelect>
<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる --> <!-- debounce or throttleしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
<MkInput :modelValue="getHex(options.color)" type="color" debounce @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ color: c }); }"> <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> <template #label>color</template>
</MkInput> </MkInput>
<hr> <hr>
@@ -32,8 +32,8 @@ SPDX-License-Identifier: AGPL-3.0-only
> >
<template #label>beam material</template> <template #label>beam material</template>
</MkSelect> </MkSelect>
<!-- debounceしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる --> <!-- debounce or throttleしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
<MkInput :modelValue="getHex(options.beamColor)" type="color" debounce @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ beamColor: c }); }"> <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> <template #label>beam color</template>
</MkInput> </MkInput>
<hr> <hr>