enhance(frontend): 画像エフェクトのUI改善 (#16191)

* enhance(frontend): 画像エフェクトの改善

* enhance: i18n colorClampAdvanced

* fix: missing translation

* enhance: i18n blockNoise

* fix lint

* fix: narrow down fx defs types

* fix

* fix: watermark用エフェクトは別で定義し直す

* fix lint

* ImageEffectorをwatermarkに隠蔽

* watermark関連の定義を完全に分離

* refactor

* fix

* ぼかし効果 -> スムージング

* refactor: remove unnecessary `as const`

* Update Changelog

CHANGELOG.md

@@ -33,6 +33,7 @@
 - Enhance: コントロールパネルを検索できるように
 - Enhance: トルコ語 (tr-TR) に対応
 - Enhance: 言語別のスクリプトバンドルを生成するように
+- Enhance: 画像エフェクトのパラメータ名の多言語対応
 - Fix: 投稿フォームでファイルのアップロードが中止または失敗した際のハンドリングを修正
 - Fix: 一部の設定検索結果が存在しないパスになる問題を修正  
   (Cherry-picked from https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/1171)

locales/index.d.ts

@@ -12203,6 +12203,10 @@ export interface Locale extends ILocale {
          * 高度
          */
         "advanced": string;
+        /**
+         * 角度
+         */
+        "angle": string;
         /**
          * ストライプ
          */
@@ -12215,10 +12219,6 @@ export interface Locale extends ILocale {
          * ラインの数
          */
         "stripeFrequency": string;
-        /**
-         * 角度
-         */
-        "angle": string;
         /**
          * ポルカドット
          */
@@ -12261,6 +12261,10 @@ export interface Locale extends ILocale {
          * 変更を破棄して終了しますか？
          */
         "discardChangesConfirm": string;
+        /**
+         * 設定項目はありません
+         */
+        "nothingToConfigure": string;
         "_fxs": {
             /**
              * 色収差
@@ -12327,6 +12331,132 @@ export interface Locale extends ILocale {
              */
             "tearing": string;
         };
+        "_fxProps": {
+            /**
+             * 角度
+             */
+            "angle": string;
+            /**
+             * サイズ
+             */
+            "scale": string;
+            /**
+             * サイズ
+             */
+            "size": string;
+            /**
+             * 色
+             */
+            "color": string;
+            /**
+             * 不透明度
+             */
+            "opacity": string;
+            /**
+             * 正規化
+             */
+            "normalize": string;
+            /**
+             * 量
+             */
+            "amount": string;
+            /**
+             * 明るさ
+             */
+            "lightness": string;
+            /**
+             * コントラスト
+             */
+            "contrast": string;
+            /**
+             * 色相
+             */
+            "hue": string;
+            /**
+             * 輝度
+             */
+            "brightness": string;
+            /**
+             * 彩度
+             */
+            "saturation": string;
+            /**
+             * 最大値
+             */
+            "max": string;
+            /**
+             * 最小値
+             */
+            "min": string;
+            /**
+             * 方向
+             */
+            "direction": string;
+            /**
+             * 位相
+             */
+            "phase": string;
+            /**
+             * 頻度
+             */
+            "frequency": string;
+            /**
+             * 強さ
+             */
+            "strength": string;
+            /**
+             * ズレ
+             */
+            "glitchChannelShift": string;
+            /**
+             * シード値
+             */
+            "seed": string;
+            /**
+             * 赤色成分
+             */
+            "redComponent": string;
+            /**
+             * 緑色成分
+             */
+            "greenComponent": string;
+            /**
+             * 青色成分
+             */
+            "blueComponent": string;
+            /**
+             * しきい値
+             */
+            "threshold": string;
+            /**
+             * 中心X
+             */
+            "centerX": string;
+            /**
+             * 中心Y
+             */
+            "centerY": string;
+            /**
+             * スムージング
+             */
+            "zoomLinesSmoothing": string;
+            /**
+             * スムージングと集中線の幅の設定は併用できません。
+             */
+            "zoomLinesSmoothingDescription": string;
+            /**
+             * 集中線の幅
+             */
+            "zoomLinesThreshold": string;
+            /**
+             * 中心径
+             */
+            "zoomLinesMaskSize": string;
+            /**
+             * 黒色にする
+             */
+            "zoomLinesBlack": string;
+        };
     };
     /**
      * 下書き

locales/ja-JP.yml

@@ -3267,10 +3267,10 @@ _watermarkEditor:
   type: "タイプ"
   image: "画像"
   advanced: "高度"
+  angle: "角度"
   stripe: "ストライプ"
   stripeWidth: "ラインの幅"
   stripeFrequency: "ラインの数"
-  angle: "角度"
   polkadot: "ポルカドット"
   checker: "チェッカー"
   polkadotMainDotOpacity: "メインドットの不透明度"
@@ -3283,6 +3283,7 @@ _imageEffector:
   title: "エフェクト"
   addEffect: "エフェクトを追加"
   discardChangesConfirm: "変更を破棄して終了しますか？"
+  nothingToConfigure: "設定項目はありません"
 
   _fxs:
     chromaticAberration: "色収差"
@@ -3302,6 +3303,39 @@ _imageEffector:
     blockNoise: "ブロックノイズ"
     tearing: "ティアリング"
 
+  _fxProps:
+    angle: "角度"
+    scale: "サイズ"
+    size: "サイズ"
+    color: "色"
+    opacity: "不透明度"
+    normalize: "正規化"
+    amount: "量"
+    lightness: "明るさ"
+    contrast: "コントラスト"
+    hue: "色相"
+    brightness: "輝度"
+    saturation: "彩度"
+    max: "最大値"
+    min: "最小値"
+    direction: "方向"
+    phase: "位相"
+    frequency: "頻度"
+    strength: "強さ"
+    glitchChannelShift: "ズレ"
+    seed: "シード値"
+    redComponent: "赤色成分"
+    greenComponent: "緑色成分"
+    blueComponent: "青色成分"
+    threshold: "しきい値"
+    centerX: "中心X"
+    centerY: "中心Y"
+    zoomLinesSmoothing: "スムージング"
+    zoomLinesSmoothingDescription: "スムージングと集中線の幅の設定は併用できません。"
+    zoomLinesThreshold: "集中線の幅"
+    zoomLinesMaskSize: "中心径"
+    zoomLinesBlack: "黒色にする"
+
 drafts: "下書き"
 _drafts:
   select: "下書きを選択"

packages/frontend/src/components/MkImageEffectorDialog.Layer.vue

@@ -14,73 +14,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 	</template>
 
-	<div :class="$style.root" class="_gaps">
+	<MkImageEffectorFxForm v-model="layer.params" :paramDefs="fx.params" />
-		<div v-for="[k, v] in Object.entries(fx.params)" :key="k">
-			<MkSwitch
-				v-if="v.type === 'boolean'"
-				v-model="layer.params[k]"
-			>
-				<template #label>{{ fx.params[k].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"
-				:textConverter="fx.params[k].toViewValue"
-				@thumbDoubleClicked="() => {
-					if (fx.params[k].default != null) {
-						layer.params[k] = fx.params[k].default;
-					} else {
-						layer.params[k] = v.min;
-					}
-				}"
-			>
-				<template #label>{{ fx.params[k].label ?? k }}</template>
-			</MkRange>
-			<MkRadios
-				v-else-if="v.type === 'number:enum'"
-				v-model="layer.params[k]"
-			>
-				<template #label>{{ fx.params[k].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"
-				>
-					<template #label>{{ fx.params[k].label ?? k }}</template>
-				</MkRange>
-			</div>
-			<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>{{ fx.params[k].label ?? k }}</template>
-			</MkInput>
-		</div>
-	</div>
 </MkFolder>
 </template>
 
 <script setup lang="ts">
 import type { ImageEffectorLayer } from '@/utility/image-effector/ImageEffector.js';
-import { i18n } from '@/i18n.js';
 import MkFolder from '@/components/MkFolder.vue';
 import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/MkInput.vue';
+import MkImageEffectorFxForm from '@/components/MkImageEffectorFxForm.vue';
-import MkRadios from '@/components/MkRadios.vue';
-import MkSwitch from '@/components/MkSwitch.vue';
-import MkRange from '@/components/MkRange.vue';
 import { FXS } from '@/utility/image-effector/fxs.js';
 
 const layer = defineModel<ImageEffectorLayer>('layer', { required: true });
@@ -94,28 +36,4 @@ 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>
-.root {
-
-}
-</style>

packages/frontend/src/components/MkImageEffectorFxForm.vue

@@ -0,0 +1,95 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_gaps">
+	<div v-for="v, k in paramDefs" :key="k">
+		<MkSwitch
+			v-if="v.type === 'boolean'"
+			v-model="params[k]">
+			<template #label>{{ v.label ?? k }}</template>
+			<template v-if="v.caption != null" #caption>{{ v.caption }}</template>
+		</MkSwitch>
+		<MkRange
+			v-else-if="v.type === 'number'"
+			v-model="params[k]"
+			continuousUpdate
+			:min="v.min"
+			:max="v.max"
+			:step="v.step"
+			:textConverter="v.toViewValue"
+			@thumbDoubleClicked="() => {
+				params[k] = v.default;
+			}"
+		>
+			<template #label>{{ v.label ?? k }}</template>
+			<template v-if="v.caption != null" #caption>{{ v.caption }}</template>
+		</MkRange>
+		<MkRadios v-else-if="v.type === 'number:enum'" v-model="params[k]">
+			<template #label>{{ v.label ?? k }}</template>
+			<template v-if="v.caption != null" #caption>{{ v.caption }}</template>
+			<option v-for="item in v.enum" :value="item.value">
+				<i v-if="item.icon" :class="item.icon"></i>
+				<template v-else>{{ item.label }}</template>
+			</option>
+		</MkRadios>
+		<div v-else-if="v.type === 'seed'">
+			<MkRange v-model="params[k]" continuousUpdate type="number" :min="0" :max="10000" :step="1">
+				<template #label>{{ v.label ?? k }}</template>
+				<template v-if="v.caption != null" #caption>{{ v.caption }}</template>
+			</MkRange>
+		</div>
+		<MkInput v-else-if="v.type === 'color'" :modelValue="getHex(params[k])" type="color" @update:modelValue="v => { const c = getRgb(v); if (c != null) params[k] = c; }">
+			<template #label>{{ v.label ?? k }}</template>
+			<template v-if="v.caption != null" #caption>{{ v.caption }}</template>
+		</MkInput>
+	</div>
+	<div v-if="Object.keys(paramDefs).length === 0" :class="$style.nothingToConfigure">
+		{{ i18n.ts._imageEffector.nothingToConfigure }}
+	</div>
+</div>
+</template>
+
+<script setup lang="ts">
+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 { i18n } from '@/i18n.js';
+import type { ImageEffectorRGB, ImageEffectorFxParamDefs } from '@/utility/image-effector/ImageEffector.js';
+
+defineProps<{
+	paramDefs: ImageEffectorFxParamDefs;
+}>();
+
+const params = defineModel<Record<string, any>>({ required: true });
+
+function getHex(c: ImageEffectorRGB) {
+	return `#${c.map(x => (x * 255).toString(16).padStart(2, '0')).join('')}`;
+}
+
+function getRgb(hex: string | number): ImageEffectorRGB | 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 ImageEffectorRGB;
+}
+</script>
+
+<style module>
+.nothingToConfigure {
+	opacity: 0.7;
+	text-align: center;
+	font-size: 14px;
+	padding: 0 10px;
+}
+</style>

packages/frontend/src/components/MkPositionSelector.vue

@@ -44,6 +44,11 @@ const y = defineModel<string>('y', { default: 'center' });
 	height: 32px;
 	background: var(--MI_THEME-panel);
 	border-radius: 4px;
+	transition: background 0.1s ease;
+
+	&:not(.active):hover {
+		background: var(--MI_THEME-buttonHoverBg);
+	}
 
 	&.active {
 		background: var(--MI_THEME-accentedBg);

packages/frontend/src/utility/image-effector/ImageEffector.ts

@@ -6,22 +6,78 @@
 import { getProxiedImageUrl } from '../media-proxy.js';
 import { initShaderProgram } from '../webgl.js';
 
+export type ImageEffectorRGB = [r: number, g: number, b: number];
+
 type ParamTypeToPrimitive = {
-	'number': number;
+	[K in ImageEffectorFxParamDef['type']]: (ImageEffectorFxParamDef & { type: K })['default'];
-	'number:enum': number;
-	'boolean': boolean;
-	'align': { x: 'left' | 'center' | 'right'; y: 'top' | 'center' | 'bottom'; };
-	'seed': number;
-	'texture': { type: 'text'; text: string | null; } | { type: 'url'; url: string | null; } | null;
-	'color': [r: number, g: number, b: number];
 };
 
-type ImageEffectorFxParamDefs = Record<string, {
+interface CommonParamDef {
-	type: keyof ParamTypeToPrimitive;
+	type: string;
-	default: any;
 	label?: string;
-	toViewValue?: (v: any) => string;
+	caption?: string;
-}>;
+	default: any;
+}
+
+interface NumberParamDef extends CommonParamDef {
+	type: 'number';
+	default: number;
+	min: number;
+	max: number;
+	step?: number;
+	toViewValue?: (v: number) => string;
+};
+
+interface NumberEnumParamDef extends CommonParamDef {
+	type: 'number:enum';
+	enum: {
+		value: number;
+		label?: string;
+		icon?: string;
+	}[];
+	default: number;
+};
+
+interface BooleanParamDef extends CommonParamDef {
+	type: 'boolean';
+	default: boolean;
+};
+
+interface AlignParamDef extends CommonParamDef {
+	type: 'align';
+	default: {
+		x: 'left' | 'center' | 'right';
+		y: 'top' | 'center' | 'bottom';
+	};
+};
+
+interface SeedParamDef extends CommonParamDef {
+	type: 'seed';
+	default: number;
+};
+
+interface TextureParamDef extends CommonParamDef {
+	type: 'texture';
+	default: { type: 'text'; text: string | null; } | { type: 'url'; url: string | null; } | null;
+};
+
+interface ColorParamDef extends CommonParamDef {
+	type: 'color';
+	default: ImageEffectorRGB;
+};
+
+type ImageEffectorFxParamDef = NumberParamDef | NumberEnumParamDef | BooleanParamDef | AlignParamDef | SeedParamDef | TextureParamDef | ColorParamDef;
+
+export type ImageEffectorFxParamDefs = Record<string, ImageEffectorFxParamDef>;
+
+export type GetParamType<T extends ImageEffectorFxParamDef> =
+	T extends NumberEnumParamDef
+		? T['enum'][number]['value']
+		: ParamTypeToPrimitive[T['type']];
+
+export type ParamsRecordTypeToDefRecord<PS extends ImageEffectorFxParamDefs> = {
+	[K in keyof PS]: GetParamType<PS[K]>;
+};
 
 export function defineImageEffectorFx<ID extends string, PS extends ImageEffectorFxParamDefs, US extends string[]>(fx: ImageEffectorFx<ID, PS, US>) {
 	return fx;
@@ -36,9 +92,7 @@ export type ImageEffectorFx<ID extends string = string, PS extends ImageEffector
 	main: (ctx: {
 		gl: WebGL2RenderingContext;
 		program: WebGLProgram;
-		params: {
+		params: ParamsRecordTypeToDefRecord<PS>;
-			[key in keyof PS]: ParamTypeToPrimitive[PS[key]['type']];
-		};
 		u: Record<US[number], WebGLUniformLocation>;
 		width: number;
 		height: number;

packages/frontend/src/utility/image-effector/fxs/blockNoise.ts

@@ -48,20 +48,22 @@ void main() {
 `;
 
 export const FX_blockNoise = defineImageEffectorFx({
-	id: 'blockNoise' as const,
+	id: 'blockNoise',
 	name: i18n.ts._imageEffector._fxs.glitch + ': ' + i18n.ts._imageEffector._fxs.blockNoise,
 	shader,
 	uniforms: ['amount', 'channelShift'] as const,
 	params: {
 		amount: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.amount,
+			type: 'number',
 			default: 50,
 			min: 1,
 			max: 100,
 			step: 1,
 		},
 		strength: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.strength,
+			type: 'number',
 			default: 0.05,
 			min: -1,
 			max: 1,
@@ -69,7 +71,8 @@ export const FX_blockNoise = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		width: {
-			type: 'number' as const,
+			label: i18n.ts.width,
+			type: 'number',
 			default: 0.05,
 			min: 0.01,
 			max: 1,
@@ -77,7 +80,8 @@ export const FX_blockNoise = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		height: {
-			type: 'number' as const,
+			label: i18n.ts.height,
+			type: 'number',
 			default: 0.01,
 			min: 0.01,
 			max: 1,
@@ -85,7 +89,8 @@ export const FX_blockNoise = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		channelShift: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.glitchChannelShift,
+			type: 'number',
 			default: 0,
 			min: 0,
 			max: 10,
@@ -93,7 +98,8 @@ export const FX_blockNoise = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		seed: {
-			type: 'seed' as const,
+			label: i18n.ts._imageEffector._fxProps.seed,
+			type: 'seed',
 			default: 100,
 		},
 	},

packages/frontend/src/utility/image-effector/fxs/checker.ts

@@ -47,13 +47,14 @@ void main() {
 `;
 
 export const FX_checker = defineImageEffectorFx({
-	id: 'checker' as const,
+	id: 'checker',
 	name: i18n.ts._imageEffector._fxs.checker,
 	shader,
 	uniforms: ['angle', 'scale', 'color', 'opacity'] as const,
 	params: {
 		angle: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.angle,
+			type: 'number',
 			default: 0,
 			min: -1.0,
 			max: 1.0,
@@ -61,18 +62,21 @@ export const FX_checker = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 90) + '°',
 		},
 		scale: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.scale,
+			type: 'number',
 			default: 3.0,
 			min: 1.0,
 			max: 10.0,
 			step: 0.1,
 		},
 		color: {
-			type: 'color' as const,
+			label: i18n.ts._imageEffector._fxProps.color,
+			type: 'color',
 			default: [1, 1, 1],
 		},
 		opacity: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.opacity,
+			type: 'number',
 			default: 0.5,
 			min: 0.0,
 			max: 1.0,

packages/frontend/src/utility/image-effector/fxs/chromaticAberration.ts

@@ -52,17 +52,19 @@ void main() {
 `;
 
 export const FX_chromaticAberration = defineImageEffectorFx({
-	id: 'chromaticAberration' as const,
+	id: 'chromaticAberration',
 	name: i18n.ts._imageEffector._fxs.chromaticAberration,
 	shader,
 	uniforms: ['amount', 'start', 'normalize'] as const,
 	params: {
 		normalize: {
-			type: 'boolean' as const,
+			label: i18n.ts._imageEffector._fxProps.normalize,
+			type: 'boolean',
 			default: false,
 		},
 		amount: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.amount,
+			type: 'number',
 			default: 0.1,
 			min: 0.0,
 			max: 1.0,

packages/frontend/src/utility/image-effector/fxs/colorAdjust.ts

@@ -85,13 +85,14 @@ void main() {
 `;
 
 export const FX_colorAdjust = defineImageEffectorFx({
-	id: 'colorAdjust' as const,
+	id: 'colorAdjust',
 	name: i18n.ts._imageEffector._fxs.colorAdjust,
 	shader,
 	uniforms: ['lightness', 'contrast', 'hue', 'brightness', 'saturation'] as const,
 	params: {
 		lightness: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.lightness,
+			type: 'number',
 			default: 0,
 			min: -1,
 			max: 1,
@@ -99,7 +100,8 @@ export const FX_colorAdjust = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		contrast: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.contrast,
+			type: 'number',
 			default: 1,
 			min: 0,
 			max: 4,
@@ -107,7 +109,8 @@ export const FX_colorAdjust = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		hue: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.hue,
+			type: 'number',
 			default: 0,
 			min: -1,
 			max: 1,
@@ -115,7 +118,8 @@ export const FX_colorAdjust = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 180) + '°',
 		},
 		brightness: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.brightness,
+			type: 'number',
 			default: 1,
 			min: 0,
 			max: 4,
@@ -123,7 +127,8 @@ export const FX_colorAdjust = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		saturation: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.saturation,
+			type: 'number',
 			default: 1,
 			min: 0,
 			max: 4,

packages/frontend/src/utility/image-effector/fxs/colorClamp.ts

@@ -26,13 +26,14 @@ void main() {
 `;
 
 export const FX_colorClamp = defineImageEffectorFx({
-	id: 'colorClamp' as const,
+	id: 'colorClamp',
 	name: i18n.ts._imageEffector._fxs.colorClamp,
 	shader,
 	uniforms: ['max', 'min'] as const,
 	params: {
 		max: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.max,
+			type: 'number',
 			default: 1.0,
 			min: 0.0,
 			max: 1.0,
@@ -40,7 +41,8 @@ export const FX_colorClamp = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		min: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.min,
+			type: 'number',
 			default: -1.0,
 			min: -1.0,
 			max: 0.0,

packages/frontend/src/utility/image-effector/fxs/colorClampAdvanced.ts

@@ -30,13 +30,14 @@ void main() {
 `;
 
 export const FX_colorClampAdvanced = defineImageEffectorFx({
-	id: 'colorClampAdvanced' as const,
+	id: 'colorClampAdvanced',
 	name: i18n.ts._imageEffector._fxs.colorClampAdvanced,
 	shader,
 	uniforms: ['rMax', 'rMin', 'gMax', 'gMin', 'bMax', 'bMin'] as const,
 	params: {
 		rMax: {
-			type: 'number' as const,
+			label: `${i18n.ts._imageEffector._fxProps.max} (${i18n.ts._imageEffector._fxProps.redComponent})`,
+			type: 'number',
 			default: 1.0,
 			min: 0.0,
 			max: 1.0,
@@ -44,7 +45,8 @@ export const FX_colorClampAdvanced = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		rMin: {
-			type: 'number' as const,
+			label: `${i18n.ts._imageEffector._fxProps.min} (${i18n.ts._imageEffector._fxProps.redComponent})`,
+			type: 'number',
 			default: -1.0,
 			min: -1.0,
 			max: 0.0,
@@ -52,7 +54,8 @@ export const FX_colorClampAdvanced = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		gMax: {
-			type: 'number' as const,
+			label: `${i18n.ts._imageEffector._fxProps.max} (${i18n.ts._imageEffector._fxProps.greenComponent})`,
+			type: 'number',
 			default: 1.0,
 			min: 0.0,
 			max: 1.0,
@@ -60,7 +63,8 @@ export const FX_colorClampAdvanced = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		gMin: {
-			type: 'number' as const,
+			label: `${i18n.ts._imageEffector._fxProps.min} (${i18n.ts._imageEffector._fxProps.greenComponent})`,
+			type: 'number',
 			default: -1.0,
 			min: -1.0,
 			max: 0.0,
@@ -68,7 +72,8 @@ export const FX_colorClampAdvanced = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		bMax: {
-			type: 'number' as const,
+			label: `${i18n.ts._imageEffector._fxProps.max} (${i18n.ts._imageEffector._fxProps.blueComponent})`,
+			type: 'number',
 			default: 1.0,
 			min: 0.0,
 			max: 1.0,
@@ -76,7 +81,8 @@ export const FX_colorClampAdvanced = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		bMin: {
-			type: 'number' as const,
+			label: `${i18n.ts._imageEffector._fxProps.min} (${i18n.ts._imageEffector._fxProps.blueComponent})`,
+			type: 'number',
 			default: -1.0,
 			min: -1.0,
 			max: 0.0,

packages/frontend/src/utility/image-effector/fxs/distort.ts

@@ -34,18 +34,23 @@ void main() {
 `;
 
 export const FX_distort = defineImageEffectorFx({
-	id: 'distort' as const,
+	id: 'distort',
 	name: i18n.ts._imageEffector._fxs.distort,
 	shader,
 	uniforms: ['phase', 'frequency', 'strength', 'direction'] as const,
 	params: {
 		direction: {
-			type: 'number:enum' as const,
+			label: i18n.ts._imageEffector._fxProps.direction,
-			enum: [{ value: 0, label: 'v' }, { value: 1, label: 'h' }],
+			type: 'number:enum',
+			enum: [
+				{ value: 0 as const, label: i18n.ts.horizontal },
+				{ value: 1 as const, label: i18n.ts.vertical },
+			],
 			default: 1,
 		},
 		phase: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.phase,
+			type: 'number',
 			default: 0.0,
 			min: -1.0,
 			max: 1.0,
@@ -53,14 +58,16 @@ export const FX_distort = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		frequency: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.frequency,
+			type: 'number',
 			default: 30,
 			min: 0,
 			max: 100,
 			step: 0.1,
 		},
 		strength: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.strength,
+			type: 'number',
 			default: 0.05,
 			min: 0,
 			max: 1,

packages/frontend/src/utility/image-effector/fxs/grayscale.ts

@@ -26,7 +26,7 @@ void main() {
 `;
 
 export const FX_grayscale = defineImageEffectorFx({
-	id: 'grayscale' as const,
+	id: 'grayscale',
 	name: i18n.ts._imageEffector._fxs.grayscale,
 	shader,
 	uniforms: [] as const,

packages/frontend/src/utility/image-effector/fxs/invert.ts

@@ -27,21 +27,24 @@ void main() {
 `;
 
 export const FX_invert = defineImageEffectorFx({
-	id: 'invert' as const,
+	id: 'invert',
 	name: i18n.ts._imageEffector._fxs.invert,
 	shader,
 	uniforms: ['r', 'g', 'b'] as const,
 	params: {
 		r: {
-			type: 'boolean' as const,
+			label: i18n.ts._imageEffector._fxProps.redComponent,
+			type: 'boolean',
 			default: true,
 		},
 		g: {
-			type: 'boolean' as const,
+			label: i18n.ts._imageEffector._fxProps.greenComponent,
+			type: 'boolean',
 			default: true,
 		},
 		b: {
-			type: 'boolean' as const,
+			label: i18n.ts._imageEffector._fxProps.blueComponent,
+			type: 'boolean',
 			default: true,
 		},
 	},

packages/frontend/src/utility/image-effector/fxs/mirror.ts

@@ -35,19 +35,29 @@ void main() {
 `;
 
 export const FX_mirror = defineImageEffectorFx({
-	id: 'mirror' as const,
+	id: 'mirror',
 	name: i18n.ts._imageEffector._fxs.mirror,
 	shader,
 	uniforms: ['h', 'v'] as const,
 	params: {
 		h: {
-			type: 'number:enum' as const,
+			label: i18n.ts.horizontal,
-			enum: [{ value: -1, label: '<-' }, { value: 0, label: '|' }, { value: 1, label: '->' }],
+			type: 'number:enum',
+			enum: [
+				{ value: -1 as const, icon: 'ti ti-arrow-bar-right' },
+				{ value: 0 as const, icon: 'ti ti-minus-vertical' },
+				{ value: 1 as const, icon: 'ti ti-arrow-bar-left' }
+			],
 			default: -1,
 		},
 		v: {
-			type: 'number:enum' as const,
+			label: i18n.ts.vertical,
-			enum: [{ value: -1, label: '^' }, { value: 0, label: '-' }, { value: 1, label: 'v' }],
+			type: 'number:enum',
+			enum: [
+				{ value: -1 as const, icon: 'ti ti-arrow-bar-down' },
+				{ value: 0 as const, icon: 'ti ti-minus' },
+				{ value: 1 as const, icon: 'ti ti-arrow-bar-up' }
+			],
 			default: 0,
 		},
 	},

packages/frontend/src/utility/image-effector/fxs/polkadot.ts

@@ -78,14 +78,16 @@ void main() {
 }
 `;
 
+// Primarily used for watermark
 export const FX_polkadot = defineImageEffectorFx({
-	id: 'polkadot' as const,
+	id: 'polkadot',
 	name: i18n.ts._imageEffector._fxs.polkadot,
 	shader,
 	uniforms: ['angle', 'scale', 'major_radius', 'major_opacity', 'minor_divisions', 'minor_radius', 'minor_opacity', 'color'] as const,
 	params: {
 		angle: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.angle,
+			type: 'number',
 			default: 0,
 			min: -1.0,
 			max: 1.0,
@@ -93,21 +95,24 @@ export const FX_polkadot = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 90) + '°',
 		},
 		scale: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.scale,
+			type: 'number',
 			default: 3.0,
 			min: 1.0,
 			max: 10.0,
 			step: 0.1,
 		},
 		majorRadius: {
-			type: 'number' as const,
+			label: i18n.ts._watermarkEditor.polkadotMainDotRadius,
+			type: 'number',
 			default: 0.1,
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
 		},
 		majorOpacity: {
-			type: 'number' as const,
+			label: i18n.ts._watermarkEditor.polkadotMainDotOpacity,
+			type: 'number',
 			default: 0.75,
 			min: 0.0,
 			max: 1.0,
@@ -115,21 +120,24 @@ export const FX_polkadot = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		minorDivisions: {
-			type: 'number' as const,
+			label: i18n.ts._watermarkEditor.polkadotSubDotDivisions,
+			type: 'number',
 			default: 4,
 			min: 0,
 			max: 16,
 			step: 1,
 		},
 		minorRadius: {
-			type: 'number' as const,
+			label: i18n.ts._watermarkEditor.polkadotSubDotRadius,
+			type: 'number',
 			default: 0.25,
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
 		},
 		minorOpacity: {
-			type: 'number' as const,
+			label: i18n.ts._watermarkEditor.polkadotSubDotOpacity,
+			type: 'number',
 			default: 0.5,
 			min: 0.0,
 			max: 1.0,
@@ -137,7 +145,8 @@ export const FX_polkadot = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		color: {
-			type: 'color' as const,
+			label: i18n.ts._imageEffector._fxProps.color,
+			type: 'color',
 			default: [1, 1, 1],
 		},
 	},

packages/frontend/src/utility/image-effector/fxs/stripe.ts

@@ -48,14 +48,16 @@ void main() {
 }
 `;
 
+// Primarily used for watermark
 export const FX_stripe = defineImageEffectorFx({
-	id: 'stripe' as const,
+	id: 'stripe',
 	name: i18n.ts._imageEffector._fxs.stripe,
 	shader,
 	uniforms: ['angle', 'frequency', 'phase', 'threshold', 'color', 'opacity'] as const,
 	params: {
 		angle: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.angle,
+			type: 'number',
 			default: 0.5,
 			min: -1.0,
 			max: 1.0,
@@ -63,14 +65,16 @@ export const FX_stripe = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 90) + '°',
 		},
 		frequency: {
-			type: 'number' as const,
+			label: i18n.ts._watermarkEditor.stripeFrequency,
+			type: 'number',
 			default: 10.0,
 			min: 1.0,
 			max: 30.0,
 			step: 0.1,
 		},
 		threshold: {
-			type: 'number' as const,
+			label: i18n.ts._watermarkEditor.stripeWidth,
+			type: 'number',
 			default: 0.1,
 			min: 0.0,
 			max: 1.0,
@@ -78,11 +82,13 @@ export const FX_stripe = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		color: {
-			type: 'color' as const,
+			label: i18n.ts._imageEffector._fxProps.color,
+			type: 'color',
 			default: [1, 1, 1],
 		},
 		opacity: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.opacity,
+			type: 'number',
 			default: 0.5,
 			min: 0.0,
 			max: 1.0,

packages/frontend/src/utility/image-effector/fxs/tearing.ts

@@ -38,20 +38,22 @@ void main() {
 `;
 
 export const FX_tearing = defineImageEffectorFx({
-	id: 'tearing' as const,
+	id: 'tearing',
 	name: i18n.ts._imageEffector._fxs.glitch + ': ' + i18n.ts._imageEffector._fxs.tearing,
 	shader,
 	uniforms: ['amount', 'channelShift'] as const,
 	params: {
 		amount: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.amount,
+			type: 'number',
 			default: 3,
 			min: 1,
 			max: 100,
 			step: 1,
 		},
 		strength: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.strength,
+			type: 'number',
 			default: 0.05,
 			min: -1,
 			max: 1,
@@ -59,7 +61,8 @@ export const FX_tearing = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		size: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.size,
+			type: 'number',
 			default: 0.2,
 			min: 0,
 			max: 1,
@@ -67,7 +70,8 @@ export const FX_tearing = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		channelShift: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.glitchChannelShift,
+			type: 'number',
 			default: 0.5,
 			min: 0,
 			max: 10,
@@ -75,7 +79,8 @@ export const FX_tearing = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		seed: {
-			type: 'seed' as const,
+			label: i18n.ts._imageEffector._fxProps.seed,
+			type: 'seed',
 			default: 100,
 		},
 	},

packages/frontend/src/utility/image-effector/fxs/threshold.ts

@@ -27,27 +27,30 @@ void main() {
 `;
 
 export const FX_threshold = defineImageEffectorFx({
-	id: 'threshold' as const,
+	id: 'threshold',
 	name: i18n.ts._imageEffector._fxs.threshold,
 	shader,
 	uniforms: ['r', 'g', 'b'] as const,
 	params: {
 		r: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.redComponent,
+			type: 'number',
 			default: 0.5,
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
 		},
 		g: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.greenComponent,
+			type: 'number',
 			default: 0.5,
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
 		},
 		b: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.blueComponent,
+			type: 'number',
 			default: 0.5,
 			min: 0.0,
 			max: 1.0,

packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts

@@ -83,46 +83,46 @@ void main() {
 `;
 
 export const FX_watermarkPlacement = defineImageEffectorFx({
-	id: 'watermarkPlacement' as const,
+	id: 'watermarkPlacement',
 	name: '(internal)',
 	shader,
 	uniforms: ['texture_watermark', 'resolution_watermark', 'scale', 'angle', 'opacity', 'repeat', 'alignX', 'alignY', 'fitMode'] as const,
 	params: {
 		cover: {
-			type: 'boolean' as const,
+			type: 'boolean',
 			default: false,
 		},
 		repeat: {
-			type: 'boolean' as const,
+			type: 'boolean',
 			default: false,
 		},
 		scale: {
-			type: 'number' as const,
+			type: 'number',
 			default: 0.3,
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
 		},
 		angle: {
-			type: 'number' as const,
+			type: 'number',
 			default: 0,
 			min: -1.0,
 			max: 1.0,
 			step: 0.01,
 		},
 		align: {
-			type: 'align' as const,
+			type: 'align',
 			default: { x: 'right', y: 'bottom' },
 		},
 		opacity: {
-			type: 'number' as const,
+			type: 'number',
 			default: 0.75,
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
 		},
 		watermark: {
-			type: 'texture' as const,
+			type: 'texture',
 			default: null,
 		},
 	},

packages/frontend/src/utility/image-effector/fxs/zoomLines.ts

@@ -37,59 +37,68 @@ void main() {
 `;
 
 export const FX_zoomLines = defineImageEffectorFx({
-	id: 'zoomLines' as const,
+	id: 'zoomLines',
 	name: i18n.ts._imageEffector._fxs.zoomLines,
 	shader,
 	uniforms: ['pos', 'frequency', 'thresholdEnabled', 'threshold', 'maskSize', 'black'] as const,
 	params: {
 		x: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.centerX,
+			type: 'number',
 			default: 0.0,
 			min: -1.0,
 			max: 1.0,
 			step: 0.01,
 		},
 		y: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.centerY,
+			type: 'number',
 			default: 0.0,
 			min: -1.0,
 			max: 1.0,
 			step: 0.01,
 		},
 		frequency: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.frequency,
+			type: 'number',
 			default: 30.0,
 			min: 1.0,
 			max: 200.0,
 			step: 0.1,
 		},
-		thresholdEnabled: {
+		smoothing: {
-			type: 'boolean' as const,
+			label: i18n.ts._imageEffector._fxProps.zoomLinesSmoothing,
-			default: true,
+			caption: i18n.ts._imageEffector._fxProps.zoomLinesSmoothingDescription,
+			type: 'boolean',
+			default: false,
 		},
 		threshold: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.zoomLinesThreshold,
+			type: 'number',
 			default: 0.2,
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
 		},
 		maskSize: {
-			type: 'number' as const,
+			label: i18n.ts._imageEffector._fxProps.zoomLinesMaskSize,
+			type: 'number',
 			default: 0.5,
 			min: 0.0,
 			max: 1.0,
 			step: 0.01,
 		},
 		black: {
-			type: 'boolean' as const,
+			label: i18n.ts._imageEffector._fxProps.zoomLinesBlack,
+			type: 'boolean',
 			default: false,
 		},
 	},
 	main: ({ gl, u, params }) => {
 		gl.uniform2f(u.pos, (1.0 + params.x) / 2.0, (1.0 + params.y) / 2.0);
 		gl.uniform1f(u.frequency, params.frequency);
-		gl.uniform1i(u.thresholdEnabled, params.thresholdEnabled ? 1 : 0);
+		// thresholdの調整が有効な間はsmoothingが利用できない
+		gl.uniform1i(u.thresholdEnabled, params.smoothing ? 0 : 1);
 		gl.uniform1f(u.threshold, params.threshold);
 		gl.uniform1f(u.maskSize, params.maskSize);
 		gl.uniform1i(u.black, params.black ? 1 : 0);

packages/frontend/src/utility/watermark.ts

@@ -150,7 +150,6 @@ export class WatermarkRenderer {
 						minorRadius: layer.minorRadius,
 						minorOpacity: layer.minorOpacity,
 						color: layer.color,
-						opacity: layer.opacity,
 					},
 				};
 			} else if (layer.type === 'checker') {