diff options
Diffstat (limited to 'packages/frontend/src')
3 files changed, 35 insertions, 27 deletions
diff --git a/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue b/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue index ff3b9aff9b..d8466fa7ca 100644 --- a/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue +++ b/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue @@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only v-if="v.type === 'boolean'" v-model="layer.params[k]" > - <template #label>{{ k }}</template> + <template #label>{{ fx.params[k].label ?? k }}</template> </MkSwitch> <MkRange v-else-if="v.type === 'number'" @@ -29,6 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only :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; @@ -37,13 +38,13 @@ SPDX-License-Identifier: AGPL-3.0-only } }" > - <template #label>{{ k }}</template> + <template #label>{{ fx.params[k].label ?? k }}</template> </MkRange> <MkRadios v-else-if="v.type === 'number:enum'" v-model="layer.params[k]" > - <template #label>{{ k }}</template> + <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'"> @@ -55,7 +56,7 @@ SPDX-License-Identifier: AGPL-3.0-only :max="10000" :step="1" > - <template #label>{{ k }}</template> + <template #label>{{ fx.params[k].label ?? k }}</template> </MkRange> </div> <MkInput @@ -64,7 +65,7 @@ SPDX-License-Identifier: AGPL-3.0-only type="color" @update:modelValue="v => { const c = getRgb(v); if (c != null) layer.params[k] = c; }" > - <template #label>{{ k }}</template> + <template #label>{{ fx.params[k].label ?? k }}</template> </MkInput> </div> </div> diff --git a/packages/frontend/src/utility/image-effector/ImageEffector.ts b/packages/frontend/src/utility/image-effector/ImageEffector.ts index 85dc5d5266..1028c57f35 100644 --- a/packages/frontend/src/utility/image-effector/ImageEffector.ts +++ b/packages/frontend/src/utility/image-effector/ImageEffector.ts @@ -19,6 +19,8 @@ type ParamTypeToPrimitive = { type ImageEffectorFxParamDefs = Record<string, { type: keyof ParamTypeToPrimitive; default: any; + label?: string; + toViewValue?: (v: any) => string; }>; export function defineImageEffectorFx<ID extends string, PS extends ImageEffectorFxParamDefs, US extends string[]>(fx: ImageEffectorFx<ID, PS, US>) { diff --git a/packages/frontend/src/utility/image-effector/fxs/colorAdjust.ts b/packages/frontend/src/utility/image-effector/fxs/colorAdjust.ts index cbb874852d..c38490e198 100644 --- a/packages/frontend/src/utility/image-effector/fxs/colorAdjust.ts +++ b/packages/frontend/src/utility/image-effector/fxs/colorAdjust.ts @@ -72,7 +72,7 @@ void main() { vec3 color = in_color.rgb; color = color * u_brightness; - color += vec3(clamp(u_lightness, 0.0, 2.0) - 1.0); + color += vec3(u_lightness); color = (color - 0.5) * u_contrast + 0.5; vec3 hsl = rgb2hsl(color); @@ -92,45 +92,50 @@ export const FX_colorAdjust = defineImageEffectorFx({ params: { lightness: { type: 'number' as const, - default: 100, - min: 0, - max: 200, - step: 1, + default: 0, + min: -1, + max: 1, + step: 0.01, + toViewValue: v => Math.round(v * 100) + '%', }, contrast: { type: 'number' as const, - default: 100, + default: 1, min: 0, - max: 200, - step: 1, + max: 4, + step: 0.01, + toViewValue: v => Math.round(v * 100) + '%', }, hue: { type: 'number' as const, default: 0, - min: -360, - max: 360, - step: 1, + min: -1, + max: 1, + step: 0.01, + toViewValue: v => Math.round(v * 180) + '°', }, brightness: { type: 'number' as const, - default: 100, + default: 1, min: 0, - max: 200, - step: 1, + max: 4, + step: 0.01, + toViewValue: v => Math.round(v * 100) + '%', }, saturation: { type: 'number' as const, - default: 100, + default: 1, min: 0, - max: 200, - step: 1, + max: 4, + step: 0.01, + toViewValue: v => Math.round(v * 100) + '%', }, }, main: ({ gl, u, params }) => { - gl.uniform1f(u.brightness, params.brightness / 100); - gl.uniform1f(u.contrast, params.contrast / 100); - gl.uniform1f(u.hue, params.hue / 360); - gl.uniform1f(u.lightness, params.lightness / 100); - gl.uniform1f(u.saturation, params.saturation / 100); + gl.uniform1f(u.brightness, params.brightness); + gl.uniform1f(u.contrast, params.contrast); + gl.uniform1f(u.hue, params.hue / 2); + gl.uniform1f(u.lightness, params.lightness); + gl.uniform1f(u.saturation, params.saturation); }, }); |