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

locales/index.d.ts

@@ -12113,6 +12113,14 @@ export interface Locale extends ILocale {
          * ストライプ
          */
         "stripe": string;
+        /**
+         * ラインの幅
+         */
+        "stripeWidth": string;
+        /**
+         * ラインの数
+         */
+        "stripeFrequency": string;
         /**
          * ポルカドット
          */
@@ -12121,6 +12129,26 @@ export interface Locale extends ILocale {
          * チェッカー
          */
         "checker": string;
+        /**
+         * メインドットの不透明度
+         */
+        "polkadotMainDotOpacity": string;
+        /**
+         * メインドットの大きさ
+         */
+        "polkadotMainDotRadius": string;
+        /**
+         * サブドットの不透明度
+         */
+        "polkadotSubDotOpacity": string;
+        /**
+         * サブドットの大きさ
+         */
+        "polkadotSubDotRadius": string;
+        /**
+         * サブドットの数
+         */
+        "polkadotSubDotDivisions": string;
     };
     "_imageEffector": {
         /**
@@ -12298,34 +12326,6 @@ export interface Locale extends ILocale {
              * 青色成分
              */
             "blueComponent": string;
-            /**
-             * メインドットの不透明度
-             */
-            "polkadotMainDotOpacity": string;
-            /**
-             * メインドットの大きさ
-             */
-            "polkadotMainDotRadius": string;
-            /**
-             * サブドットの不透明度
-             */
-            "polkadotSubDotOpacity": string;
-            /**
-             * サブドットの大きさ
-             */
-            "polkadotSubDotRadius": string;
-            /**
-             * サブドットの数
-             */
-            "polkadotSubDotDivisions": string;
-            /**
-             * ラインの幅
-             */
-            "stripeWidth": string;
-            /**
-             * ラインの数
-             */
-            "stripeFrequency": string;
             /**
              * しきい値
              */

locales/ja-JP.yml

@@ -3243,8 +3243,15 @@ _watermarkEditor:
   advanced: "高度"
   angle: "角度"
   stripe: "ストライプ"
+  stripeWidth: "ラインの幅"
+  stripeFrequency: "ラインの数"
   polkadot: "ポルカドット"
   checker: "チェッカー"
+  polkadotMainDotOpacity: "メインドットの不透明度"
+  polkadotMainDotRadius: "メインドットの大きさ"
+  polkadotSubDotOpacity: "サブドットの不透明度"
+  polkadotSubDotRadius: "サブドットの大きさ"
+  polkadotSubDotDivisions: "サブドットの数"
 
 _imageEffector:
   title: "エフェクト"
@@ -3294,13 +3301,6 @@ _imageEffector:
     redComponent: "赤色成分"
     greenComponent: "緑色成分"
     blueComponent: "青色成分"
-    polkadotMainDotOpacity: "メインドットの不透明度"
-    polkadotMainDotRadius: "メインドットの大きさ"
-    polkadotSubDotOpacity: "サブドットの不透明度"
-    polkadotSubDotRadius: "サブドットの大きさ"
-    polkadotSubDotDivisions: "サブドットの数"
-    stripeWidth: "ラインの幅"
-    stripeFrequency: "ラインの数"
     threshold: "しきい値"
     centerX: "中心X"
     centerY: "中心Y"

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

@@ -74,10 +74,6 @@ type ImageEffectorFxParamDef = NumberParamDef | NumberEnumParamDef | BooleanPara
 
 export type ImageEffectorFxParamDefs = Record<string, ImageEffectorFxParamDef>;
 
-export type ParamDefToPremitiveRecord<PS extends ImageEffectorFxParamDefs> = {
-	[key in keyof PS]: PS[key]['type'] extends keyof ParamTypeToPrimitive ? ParamTypeToPrimitive[PS[key]['type']] : never;
-};
-
 export function defineImageEffectorFx<ID extends string, PS extends ImageEffectorFxParamDefs, US extends string[]>(fx: ImageEffectorFx<ID, PS, US>) {
 	return fx;
 }

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

@@ -30,10 +30,10 @@ export const FXS = [
 	FX_distort,
 	FX_threshold,
 	FX_zoomLines,
-	FX_stripe,
-	FX_polkadot,
 	FX_checker,
 	FX_chromaticAberration,
 	FX_tearing,
 	FX_blockNoise,
+	FX_stripe,    // Primarily used for watermark
+	FX_polkadot,  // Primarily used for watermark
 ] as const satisfies ImageEffectorFx<string, any>[];

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

@@ -78,6 +78,7 @@ void main() {
 }
 `;
 
+// Primarily used for watermark
 export const FX_polkadot = defineImageEffectorFx({
 	id: 'polkadot' as const,
 	name: i18n.ts._imageEffector._fxs.polkadot,
@@ -102,7 +103,7 @@ export const FX_polkadot = defineImageEffectorFx({
 			step: 0.1,
 		},
 		majorRadius: {
-			label: i18n.ts._imageEffector._fxProps.polkadotMainDotRadius,
+			label: i18n.ts._watermarkEditor.polkadotMainDotRadius,
 			type: 'number' as const,
 			default: 0.1,
 			min: 0.0,
@@ -110,7 +111,7 @@ export const FX_polkadot = defineImageEffectorFx({
 			step: 0.01,
 		},
 		majorOpacity: {
-			label: i18n.ts._imageEffector._fxProps.polkadotMainDotOpacity,
+			label: i18n.ts._watermarkEditor.polkadotMainDotOpacity,
 			type: 'number' as const,
 			default: 0.75,
 			min: 0.0,
@@ -119,7 +120,7 @@ export const FX_polkadot = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		minorDivisions: {
-			label: i18n.ts._imageEffector._fxProps.polkadotSubDotDivisions,
+			label: i18n.ts._watermarkEditor.polkadotSubDotDivisions,
 			type: 'number' as const,
 			default: 4,
 			min: 0,
@@ -127,7 +128,7 @@ export const FX_polkadot = defineImageEffectorFx({
 			step: 1,
 		},
 		minorRadius: {
-			label: i18n.ts._imageEffector._fxProps.polkadotSubDotRadius,
+			label: i18n.ts._watermarkEditor.polkadotSubDotRadius,
 			type: 'number' as const,
 			default: 0.25,
 			min: 0.0,
@@ -135,7 +136,7 @@ export const FX_polkadot = defineImageEffectorFx({
 			step: 0.01,
 		},
 		minorOpacity: {
-			label: i18n.ts._imageEffector._fxProps.polkadotSubDotOpacity,
+			label: i18n.ts._watermarkEditor.polkadotSubDotOpacity,
 			type: 'number' as const,
 			default: 0.5,
 			min: 0.0,

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

@@ -48,6 +48,7 @@ void main() {
 }
 `;
 
+// Primarily used for watermark
 export const FX_stripe = defineImageEffectorFx({
 	id: 'stripe' as const,
 	name: i18n.ts._imageEffector._fxs.stripe,
@@ -64,7 +65,7 @@ export const FX_stripe = defineImageEffectorFx({
 			toViewValue: v => Math.round(v * 90) + '°',
 		},
 		frequency: {
-			label: i18n.ts._imageEffector._fxProps.stripeFrequency,
+			label: i18n.ts._watermarkEditor.stripeFrequency,
 			type: 'number' as const,
 			default: 10.0,
 			min: 1.0,
@@ -72,7 +73,7 @@ export const FX_stripe = defineImageEffectorFx({
 			step: 0.1,
 		},
 		threshold: {
-			label: i18n.ts._imageEffector._fxProps.stripeWidth,
+			label: i18n.ts._watermarkEditor.stripeWidth,
 			type: 'number' as const,
 			default: 0.1,
 			min: 0.0,

packages/frontend/src/utility/watermark.ts

@@ -7,7 +7,7 @@ import { FX_watermarkPlacement } from '@/utility/image-effector/fxs/watermarkPla
 import { FX_stripe } from '@/utility/image-effector/fxs/stripe.js';
 import { FX_polkadot } from '@/utility/image-effector/fxs/polkadot.js';
 import { FX_checker } from '@/utility/image-effector/fxs/checker.js';
-import type { ImageEffectorFx, ImageEffectorLayer, ParamDefToPremitiveRecord } from '@/utility/image-effector/ImageEffector.js';
+import type { ImageEffectorFx, ImageEffectorLayer } from '@/utility/image-effector/ImageEffector.js';
 import { ImageEffector } from '@/utility/image-effector/ImageEffector.js';
 
 export const WATERMARK_FXS = [
@@ -40,16 +40,34 @@ export type WatermarkPreset = {
 		angle: number;
 		align: { x: 'left' | 'center' | 'right'; y: 'top' | 'center' | 'bottom' };
 		opacity: number;
-	} | ({
+	} | {
 		id: string;
 		type: 'stripe';
-	} & ParamDefToPremitiveRecord<typeof FX_stripe.params>) | ({
+		angle: number;
+		frequency: number;
+		threshold: number;
+		color: [r: number, g: number, b: number];
+		opacity: number;
+	} | {
 		id: string;
 		type: 'polkadot';
-	} & ParamDefToPremitiveRecord<typeof FX_polkadot.params>) | ({
+		angle: number;
+		scale: number;
+		majorRadius: number;
+		majorOpacity: number;
+		minorDivisions: number;
+		minorRadius: number;
+		minorOpacity: number;
+		color: [r: number, g: number, b: number];
+		opacity: number;
+	} | {
 		id: string;
 		type: 'checker';
-	} & ParamDefToPremitiveRecord<typeof FX_checker.params>))[];
+		angle: number;
+		scale: number;
+		color: [r: number, g: number, b: number];
+		opacity: number;
+	})[];
 };
 
 export class WatermarkRenderer {