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

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

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

* remove unnecessary async
This commit is contained in:
かっこかり 2025-06-05 22:25:49 +09:00 committed by GitHub
parent fde67dca74
commit 95ea62f222
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 107 additions and 20 deletions

View File

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

View File

@ -12,10 +12,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<slot name="prefix"></slot>
<div ref="containerEl" class="container">
<div class="track">
<div class="highlight right" :style="{ width: ((steppedRawValue - minRatio) * 100) + '%', left: (Math.abs(Math.min(0, min)) / (max + Math.abs(Math.min(0, min)))) * 100 + '%' }">
<div class="highlight right" :style="{ width: rightTrackWidth, left: rightTrackPosition }">
<div class="shine right"></div>
</div>
<div class="highlight left" :style="{ width: ((minRatio - steppedRawValue) * 100) + '%', left: (steppedRawValue) * 100 + '%' }">
<div class="highlight left" :style="{ width: leftTrackWidth, left: leftTrackPosition }">
<div class="shine left"></div>
</div>
</div>
@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { computed, defineAsyncComponent, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
import { computed, defineAsyncComponent, onMounted, onUnmounted, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue';
import { isTouchUsing } from '@/utility/touch.js';
import * as os from '@/os.js';
@ -58,13 +58,14 @@ const props = withDefaults(defineProps<{
continuousUpdate?: boolean;
}>(), {
step: 1,
textConverter: (v) => v.toString(),
textConverter: (v: number) => (Math.round(v * 1000) / 1000).toString(),
easing: false,
});
const emit = defineEmits<{
(ev: 'update:modelValue', value: number): void;
(ev: 'dragEnded', value: number): void;
(ev: 'thumbDoubleClicked'): void;
}>();
const containerEl = useTemplateRef('containerEl');
@ -73,7 +74,24 @@ const thumbEl = useTemplateRef('thumbEl');
const maxRatio = computed(() => Math.abs(props.max) / (props.max + Math.abs(Math.min(0, props.min))));
const minRatio = computed(() => Math.abs(Math.min(0, props.min)) / (props.max + Math.abs(Math.min(0, props.min))));
const rawValue = ref((props.modelValue - props.min) / (props.max - props.min));
const rightTrackWidth = computed(() => {
return Math.max(0, (steppedRawValue.value - minRatio.value) * 100) + '%';
});
const leftTrackWidth = computed(() => {
return Math.max(0, (minRatio.value - steppedRawValue.value) * 100) + '%';
});
const rightTrackPosition = computed(() => {
return (Math.abs(Math.min(0, props.min)) / (props.max + Math.abs(Math.min(0, props.min)))) * 100 + '%';
});
const leftTrackPosition = computed(() => {
return (Math.min(minRatio.value, steppedRawValue.value) * 100) + '%';
});
const calcRawValue = (value: number) => {
return (value - props.min) / (props.max - props.min);
};
const rawValue = ref(calcRawValue(props.modelValue));
const steppedRawValue = computed(() => {
if (props.step) {
const step = props.step / (props.max - props.min);
@ -103,6 +121,11 @@ const calcThumbPosition = () => {
}
};
watch([steppedRawValue, containerEl], calcThumbPosition);
watch(() => props.modelValue, (newVal) => {
const newRawValue = calcRawValue(newVal);
if (rawValue.value === newRawValue) return;
rawValue.value = newRawValue;
});
let ro: ResizeObserver | undefined;
@ -128,6 +151,12 @@ const steps = computed(() => {
const tooltipForDragShowing = ref(false);
const tooltipForHoverShowing = ref(false);
onBeforeUnmount(() => {
//
tooltipForDragShowing.value = false;
tooltipForHoverShowing.value = false;
});
function onMouseenter() {
if (isTouchUsing) return;
@ -138,7 +167,7 @@ function onMouseenter() {
text: computed(() => {
return props.textConverter(finalValue.value);
}),
targetElement: thumbEl,
targetElement: thumbEl.value ?? undefined,
}, {
closed: () => dispose(),
});
@ -148,6 +177,8 @@ function onMouseenter() {
}, { once: true, passive: true });
}
let lastClickTime: number | null = null;
function onMousedown(ev: MouseEvent | TouchEvent) {
ev.preventDefault();
@ -158,7 +189,7 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
text: computed(() => {
return props.textConverter(finalValue.value);
}),
targetElement: thumbEl,
targetElement: thumbEl.value ?? undefined,
}, {
closed: () => dispose(),
});
@ -203,6 +234,20 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
window.addEventListener('touchmove', onDrag);
window.addEventListener('mouseup', onMouseup, { once: true });
window.addEventListener('touchend', onMouseup, { once: true });
if (lastClickTime == null) {
lastClickTime = Date.now();
return;
} else {
const now = Date.now();
if (now - lastClickTime < 300) { // 300ms
lastClickTime = null;
emit('thumbDoubleClicked');
return;
} else {
lastClickTime = now;
}
}
}
</script>