enhance(frontend): 画像エフェクトの操作でRangeをダブルクリックしたらデフォルトの値に戻るように (#16171)

* enhance(frontend): エフェクトの操作でRangeをダブルクリックしたらデフォルトの値に戻るように

* fix: trackの計算方法を修正

* remove unnecessary async

1 files changed, 55 insertions, 13 deletions

diff --git a/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue b/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue
index 0312017d86..ff3b9aff9b 100644
--- a/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue
+++ b/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue
@@ -16,22 +16,54 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<div :class="$style.root" class="_gaps">
 		<div v-for="[k, v] in Object.entries(fx.params)" :key="k">
-			<MkSwitch v-if="v.type === 'boolean'" v-model="layer.params[k]">
+			<MkSwitch
+				v-if="v.type === 'boolean'"
+				v-model="layer.params[k]"
+			>
 				<template #label>{{ k }}</template>
 			</MkSwitch>
-			<MkRange v-else-if="v.type === 'number'" v-model="layer.params[k]" continuousUpdate :min="v.min" :max="v.max" :step="v.step">
+			<MkRange
+				v-else-if="v.type === 'number'"
+				v-model="layer.params[k]"
+				continuousUpdate
+				:min="v.min"
+				:max="v.max"
+				:step="v.step"
+				@thumbDoubleClicked="() => {
+					if (fx.params[k].default != null) {
+						layer.params[k] = fx.params[k].default;
+					} else {
+						layer.params[k] = v.min;
+					}
+				}"
+			>
 				<template #label>{{ k }}</template>
 			</MkRange>
-			<MkRadios v-else-if="v.type === 'number:enum'" v-model="layer.params[k]">
+			<MkRadios
+				v-else-if="v.type === 'number:enum'"
+				v-model="layer.params[k]"
+			>
 				<template #label>{{ k }}</template>
 				<option v-for="item in v.enum" :value="item.value">{{ item.label }}</option>
 			</MkRadios>
 			<div v-else-if="v.type === 'seed'">
-				<MkRange v-model="layer.params[k]" continuousUpdate type="number" :min="0" :max="10000" :step="1">
+				<MkRange
+					v-model="layer.params[k]"
+					continuousUpdate
+					type="number"
+					:min="0"
+					:max="10000"
+					:step="1"
+				>
 					<template #label>{{ k }}</template>
 				</MkRange>
 			</div>
-			<MkInput v-else-if="v.type === 'color'" :modelValue="`#${(layer.params[k][0] * 255).toString(16).padStart(2, '0')}${(layer.params[k][1] * 255).toString(16).padStart(2, '0')}${(layer.params[k][2] * 255).toString(16).padStart(2, '0')}`" type="color" @update:modelValue="v => { const c = v.slice(1).match(/.{2}/g)?.map(x => parseInt(x, 16) / 255); if (c) layer.params[k] = c; }">
+			<MkInput
+				v-else-if="v.type === 'color'"
+				:modelValue="getHex(layer.params[k])"
+				type="color"
+				@update:modelValue="v => { const c = getRgb(v); if (c != null) layer.params[k] = c; }"
+			>
 				<template #label>{{ k }}</template>
 			</MkInput>
 		</div>
@@ -40,22 +72,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script setup lang="ts">
-import { ref, useTemplateRef, watch, onMounted, onUnmounted } from 'vue';
 import type { ImageEffectorLayer } from '@/utility/image-effector/ImageEffector.js';
 import { i18n } from '@/i18n.js';
-import { ImageEffector } from '@/utility/image-effector/ImageEffector.js';
 import MkFolder from '@/components/MkFolder.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkRadios from '@/components/MkRadios.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkRange from '@/components/MkRange.vue';
-import FormSlot from '@/components/form/slot.vue';
-import MkPositionSelector from '@/components/MkPositionSelector.vue';
-import * as os from '@/os.js';
-import { selectFile } from '@/utility/drive.js';
-import { misskeyApi } from '@/utility/misskey-api.js';
-import { prefer } from '@/preferences.js';
 import { FXS } from '@/utility/image-effector/fxs.js';
 
 const layer = defineModel<ImageEffectorLayer>('layer', { required: true });
@@ -69,6 +93,24 @@ const emit = defineEmits<{
 	(e: 'swapUp'): void;
 	(e: 'swapDown'): void;
 }>();
+
+function getHex(c: [number, number, number]) {
+	return `#${c.map(x => (x * 255).toString(16).padStart(2, '0')).join('')}`;
+}
+
+function getRgb(hex: string | number): [number, number, number] | null {
+	if (
+		typeof hex === 'number' ||
+		typeof hex !== 'string' ||
+		!/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(hex)
+	) {
+		return null;
+	}
+
+	const m = hex.slice(1).match(/[0-9a-fA-F]{2}/g);
+	if (m == null) return [0, 0, 0];
+	return m.map(x => parseInt(x, 16) / 255) as [number, number, number];
+}
 </script>
 
 <style module>