enhance(frontend): 画像エフェクトの操作でRangeをダブルクリックしたらデフォルトの値に戻るように (#16171)
* enhance(frontend): エフェクトの操作でRangeをダブルクリックしたらデフォルトの値に戻るように * fix: trackの計算方法を修正 * remove unnecessary async
This commit is contained in:
かっこかり
GitHub
parent
fde67dca74
commit
95ea62f222
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue