From 785b85ee462ac6f3af416be1d3ed68f3e478118b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?= <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Sat, 9 Aug 2025 14:11:19 +0900 Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E7=94=BB=E5=83=8F?= =?UTF-8?q?=E3=82=A8=E3=83=95=E3=82=A7=E3=82=AF=E3=83=88=E3=81=AEUI?= =?UTF-8?q?=E6=94=B9=E5=96=84=20(#16191)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 | 1 + locales/index.d.ts | 138 +++++++++++++++++- locales/ja-JP.yml | 36 ++++- .../MkImageEffectorDialog.Layer.vue | 86 +---------- .../src/components/MkImageEffectorFxForm.vue | 95 ++++++++++++ .../src/components/MkPositionSelector.vue | 5 + .../utility/image-effector/ImageEffector.ts | 84 +++++++++-- .../utility/image-effector/fxs/blockNoise.ts | 20 ++- .../src/utility/image-effector/fxs/checker.ts | 14 +- .../image-effector/fxs/chromaticAberration.ts | 8 +- .../utility/image-effector/fxs/colorAdjust.ts | 17 ++- .../utility/image-effector/fxs/colorClamp.ts | 8 +- .../image-effector/fxs/colorClampAdvanced.ts | 20 ++- .../src/utility/image-effector/fxs/distort.ts | 19 ++- .../utility/image-effector/fxs/grayscale.ts | 2 +- .../src/utility/image-effector/fxs/invert.ts | 11 +- .../src/utility/image-effector/fxs/mirror.ts | 20 ++- .../utility/image-effector/fxs/polkadot.ts | 27 ++-- .../src/utility/image-effector/fxs/stripe.ts | 18 ++- .../src/utility/image-effector/fxs/tearing.ts | 17 ++- .../utility/image-effector/fxs/threshold.ts | 11 +- .../image-effector/fxs/watermarkPlacement.ts | 16 +- .../utility/image-effector/fxs/zoomLines.ts | 31 ++-- packages/frontend/src/utility/watermark.ts | 1 - 24 files changed, 509 insertions(+), 196 deletions(-) create mode 100644 packages/frontend/src/components/MkImageEffectorFxForm.vue diff --git a/CHANGELOG.md b/CHANGELOG.md index 98ec6f2a85..94043c4c24 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/locales/index.d.ts b/locales/index.d.ts index b0a15e0ad1..b2906cf48e 100644 --- a/locales/index.d.ts +++ b/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; + }; }; /** * 下書き diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 4562cfe370..d45aa7bb86 100644 --- a/locales/ja-JP.yml +++ b/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: "下書きを選択" diff --git a/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue b/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue index d8466fa7ca..f734325039 100644 --- a/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue +++ b/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue @@ -14,73 +14,15 @@ SPDX-License-Identifier: AGPL-3.0-only -
-
- - - - - - - - - - -
- - - -
- - - -
-
+ - - diff --git a/packages/frontend/src/components/MkImageEffectorFxForm.vue b/packages/frontend/src/components/MkImageEffectorFxForm.vue new file mode 100644 index 0000000000..d7ab620132 --- /dev/null +++ b/packages/frontend/src/components/MkImageEffectorFxForm.vue @@ -0,0 +1,95 @@ + + + + + + + diff --git a/packages/frontend/src/components/MkPositionSelector.vue b/packages/frontend/src/components/MkPositionSelector.vue index 002950cdf1..739f55125b 100644 --- a/packages/frontend/src/components/MkPositionSelector.vue +++ b/packages/frontend/src/components/MkPositionSelector.vue @@ -44,6 +44,11 @@ const y = defineModel('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); diff --git a/packages/frontend/src/utility/image-effector/ImageEffector.ts b/packages/frontend/src/utility/image-effector/ImageEffector.ts index 1028c57f35..66b4d1026c 100644 --- a/packages/frontend/src/utility/image-effector/ImageEffector.ts +++ b/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; - '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]; + [K in ImageEffectorFxParamDef['type']]: (ImageEffectorFxParamDef & { type: K })['default']; }; -type ImageEffectorFxParamDefs = Record 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; + +export type GetParamType = + T extends NumberEnumParamDef + ? T['enum'][number]['value'] + : ParamTypeToPrimitive[T['type']]; + +export type ParamsRecordTypeToDefRecord = { + [K in keyof PS]: GetParamType; +}; export function defineImageEffectorFx(fx: ImageEffectorFx) { return fx; @@ -36,9 +92,7 @@ export type ImageEffectorFx; u: Record; width: number; height: number; diff --git a/packages/frontend/src/utility/image-effector/fxs/blockNoise.ts b/packages/frontend/src/utility/image-effector/fxs/blockNoise.ts index bf7eaa8bda..7e09524c10 100644 --- a/packages/frontend/src/utility/image-effector/fxs/blockNoise.ts +++ b/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, }, }, diff --git a/packages/frontend/src/utility/image-effector/fxs/checker.ts b/packages/frontend/src/utility/image-effector/fxs/checker.ts index c426308951..c48f73acbd 100644 --- a/packages/frontend/src/utility/image-effector/fxs/checker.ts +++ b/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, diff --git a/packages/frontend/src/utility/image-effector/fxs/chromaticAberration.ts b/packages/frontend/src/utility/image-effector/fxs/chromaticAberration.ts index 82d7d883aa..4adb7ce91e 100644 --- a/packages/frontend/src/utility/image-effector/fxs/chromaticAberration.ts +++ b/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, diff --git a/packages/frontend/src/utility/image-effector/fxs/colorAdjust.ts b/packages/frontend/src/utility/image-effector/fxs/colorAdjust.ts index c38490e198..8cfbbcb516 100644 --- a/packages/frontend/src/utility/image-effector/fxs/colorAdjust.ts +++ b/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, diff --git a/packages/frontend/src/utility/image-effector/fxs/colorClamp.ts b/packages/frontend/src/utility/image-effector/fxs/colorClamp.ts index ae0d92b8ae..4f18eb63c4 100644 --- a/packages/frontend/src/utility/image-effector/fxs/colorClamp.ts +++ b/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, diff --git a/packages/frontend/src/utility/image-effector/fxs/colorClampAdvanced.ts b/packages/frontend/src/utility/image-effector/fxs/colorClampAdvanced.ts index b9387900fb..7e793061cf 100644 --- a/packages/frontend/src/utility/image-effector/fxs/colorClampAdvanced.ts +++ b/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, diff --git a/packages/frontend/src/utility/image-effector/fxs/distort.ts b/packages/frontend/src/utility/image-effector/fxs/distort.ts index 4b1aefc159..7b5ec45f4b 100644 --- a/packages/frontend/src/utility/image-effector/fxs/distort.ts +++ b/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, - enum: [{ value: 0, label: 'v' }, { value: 1, label: 'h' }], + label: i18n.ts._imageEffector._fxProps.direction, + 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, diff --git a/packages/frontend/src/utility/image-effector/fxs/grayscale.ts b/packages/frontend/src/utility/image-effector/fxs/grayscale.ts index 8f33706ae7..e1a288fc85 100644 --- a/packages/frontend/src/utility/image-effector/fxs/grayscale.ts +++ b/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, diff --git a/packages/frontend/src/utility/image-effector/fxs/invert.ts b/packages/frontend/src/utility/image-effector/fxs/invert.ts index 220a2dea30..1c662ae849 100644 --- a/packages/frontend/src/utility/image-effector/fxs/invert.ts +++ b/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, }, }, diff --git a/packages/frontend/src/utility/image-effector/fxs/mirror.ts b/packages/frontend/src/utility/image-effector/fxs/mirror.ts index 5946a2e0dc..3d7893f8b0 100644 --- a/packages/frontend/src/utility/image-effector/fxs/mirror.ts +++ b/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, - enum: [{ value: -1, label: '<-' }, { value: 0, label: '|' }, { value: 1, label: '->' }], + label: i18n.ts.horizontal, + 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, - enum: [{ value: -1, label: '^' }, { value: 0, label: '-' }, { value: 1, label: 'v' }], + label: i18n.ts.vertical, + 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, }, }, diff --git a/packages/frontend/src/utility/image-effector/fxs/polkadot.ts b/packages/frontend/src/utility/image-effector/fxs/polkadot.ts index 14f6f91148..1685601bd2 100644 --- a/packages/frontend/src/utility/image-effector/fxs/polkadot.ts +++ b/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], }, }, diff --git a/packages/frontend/src/utility/image-effector/fxs/stripe.ts b/packages/frontend/src/utility/image-effector/fxs/stripe.ts index f6c1d2278d..1c054c1aaa 100644 --- a/packages/frontend/src/utility/image-effector/fxs/stripe.ts +++ b/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, diff --git a/packages/frontend/src/utility/image-effector/fxs/tearing.ts b/packages/frontend/src/utility/image-effector/fxs/tearing.ts index d5f1e062ec..a1d5178d24 100644 --- a/packages/frontend/src/utility/image-effector/fxs/tearing.ts +++ b/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, }, }, diff --git a/packages/frontend/src/utility/image-effector/fxs/threshold.ts b/packages/frontend/src/utility/image-effector/fxs/threshold.ts index f2b8b107fd..3e591fc939 100644 --- a/packages/frontend/src/utility/image-effector/fxs/threshold.ts +++ b/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, diff --git a/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts b/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts index 1c1c95b0c5..9b79e2bf94 100644 --- a/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts +++ b/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, }, }, diff --git a/packages/frontend/src/utility/image-effector/fxs/zoomLines.ts b/packages/frontend/src/utility/image-effector/fxs/zoomLines.ts index 2613362a71..2e16ebea3b 100644 --- a/packages/frontend/src/utility/image-effector/fxs/zoomLines.ts +++ b/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: { - type: 'boolean' as const, - default: true, + smoothing: { + label: i18n.ts._imageEffector._fxProps.zoomLinesSmoothing, + 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); diff --git a/packages/frontend/src/utility/watermark.ts b/packages/frontend/src/utility/watermark.ts index f0b38684f0..75807b30c4 100644 --- a/packages/frontend/src/utility/watermark.ts +++ b/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') {