@radialapps/memories-vips-editor 0.1.3 → 0.1.6

package/src/transforms/highlights.ts

@@ -0,0 +1,67 @@
+// highlights.ts — boost/recover the bright end, weighted by brightness.
+//
+// weight w = clamp(avg,0,1)^2 (0 in blacks, 1 in whites, quadratic falloff),
+// then rgb += (amount * 0.5) * w. The 0.5 keeps the gray curve monotonic over
+// the whole slider range (a full-strength recovery would push white below
+// near-white). Same formula in src/transforms/highlights.h and
+// math.ts applyHighlights, so the canvas preview is WYSIWYG.
+import { clampf } from '../math.js';
+import {
+  isNumInRange,
+  setFloatUniform,
+  type ParamControl,
+  type RenderContext,
+  type Target,
+  type Transform,
+} from './transform.js';
+
+export interface HighlightsEdit {
+  edit: 'highlights';
+  /** -1 (recover highlights) .. 1 (boost highlights). Default 0. */
+  amount?: number;
+}
+
+type Full = Required<HighlightsEdit>;
+
+const FRAG = `
+precision mediump float;
+uniform sampler2D texture;
+uniform float amount;
+varying vec2 texCoord;
+void main() {
+  vec4 color = texture2D(texture, texCoord);
+  float avg = (color.r + color.g + color.b) / 3.0;
+  float l = clamp(avg, 0.0, 1.0);
+  float w = l * l;
+  color.rgb += (amount * 0.5) * w;
+  gl_FragColor = color;
+}
+`;
+
+export class HighlightsTransform implements Transform<'highlights', HighlightsEdit> {
+  public readonly edit = 'highlights' as const;
+  public controls: ParamControl[] = [
+    { key: 'amount', label: 'amount', min: -1, max: 1, step: 0.01, def: 0 },
+  ];
+
+  public defaults(): Full {
+    return { edit: 'highlights', amount: 0 };
+  }
+
+  public validate(params: HighlightsEdit): string[] {
+    if (params.amount !== undefined && !isNumInRange(params.amount, -1, 1))
+      return ['amount must be a number in [-1,1]'];
+    return [];
+  }
+
+  public normalize(params: HighlightsEdit): Full {
+    return { edit: 'highlights', amount: clampf(-1, params.amount ?? 0, 1) };
+  }
+
+  public apply(ctx: RenderContext, from: Target, to: Target, params: Full): Target {
+    ctx.pass(FRAG, from, to, (gl, p) => {
+      setFloatUniform(gl, p, 'amount', params.amount);
+    });
+    return to;
+  }
+}

package/src/transforms/index.ts

@@ -9,14 +9,18 @@ import { BlurTransform } from './blur.js';
 import { BrightnessContrastTransform } from './brightnessContrast.js';
 import { CropTransform } from './crop.js';
 import { ExposureTransform } from './exposure.js';
+import { FlipTransform } from './flip.js';
 import { GrayscaleTransform } from './grayscale.js';
+import { HighlightsTransform } from './highlights.js';
 import { HueSaturationTransform } from './hueSaturation.js';
 import { InvertTransform } from './invert.js';
 import { RotateTransform } from './rotate.js';
 import { SepiaTransform } from './sepia.js';
+import { ShadowsTransform } from './shadows.js';
 import { SharpenTransform } from './sharpen.js';
 import { VibranceTransform } from './vibrance.js';
 import { VignetteTransform } from './vignette.js';
+import { WarmthTransform } from './warmth.js';
 
 export const TRANSFORMS: Record<EditName, Transform<string, object>> = {
   brightnessContrast: new BrightnessContrastTransform(),
@@ -27,10 +31,14 @@ export const TRANSFORMS: Record<EditName, Transform<string, object>> = {
   blur: new BlurTransform(),
   sharpen: new SharpenTransform(),
   vignette: new VignetteTransform(),
+  shadows: new ShadowsTransform(),
+  highlights: new HighlightsTransform(),
+  warmth: new WarmthTransform(),
   invert: new InvertTransform(),
   grayscale: new GrayscaleTransform(),
   crop: new CropTransform(),
   rotate: new RotateTransform(),
+  flip: new FlipTransform(),
 };
 
 /** Human-readable problems; empty means the edit is VIPS-appliable. */

package/src/transforms/shadows.ts

@@ -0,0 +1,67 @@
+// shadows.ts — lift/crush the dark end, weighted by darkness.
+//
+// weight w = (1 - clamp(avg,0,1))^2 (1 in blacks, 0 in whites, quadratic
+// falloff), then rgb += (amount * 0.5) * w. The 0.5 keeps the gray curve
+// monotonic over the whole slider range (a full-strength lift would reverse
+// deep shadows past mid-gray). Same formula in src/transforms/shadows.h
+// and math.ts applyShadows, so the canvas preview is WYSIWYG.
+import { clampf } from '../math.js';
+import {
+  isNumInRange,
+  setFloatUniform,
+  type ParamControl,
+  type RenderContext,
+  type Target,
+  type Transform,
+} from './transform.js';
+
+export interface ShadowsEdit {
+  edit: 'shadows';
+  /** -1 (crush shadows) .. 1 (lift shadows). Default 0. */
+  amount?: number;
+}
+
+type Full = Required<ShadowsEdit>;
+
+const FRAG = `
+precision mediump float;
+uniform sampler2D texture;
+uniform float amount;
+varying vec2 texCoord;
+void main() {
+  vec4 color = texture2D(texture, texCoord);
+  float avg = (color.r + color.g + color.b) / 3.0;
+  float l = clamp(avg, 0.0, 1.0);
+  float w = (1.0 - l) * (1.0 - l);
+  color.rgb += (amount * 0.5) * w;
+  gl_FragColor = color;
+}
+`;
+
+export class ShadowsTransform implements Transform<'shadows', ShadowsEdit> {
+  public readonly edit = 'shadows' as const;
+  public controls: ParamControl[] = [
+    { key: 'amount', label: 'amount', min: -1, max: 1, step: 0.01, def: 0 },
+  ];
+
+  public defaults(): Full {
+    return { edit: 'shadows', amount: 0 };
+  }
+
+  public validate(params: ShadowsEdit): string[] {
+    if (params.amount !== undefined && !isNumInRange(params.amount, -1, 1))
+      return ['amount must be a number in [-1,1]'];
+    return [];
+  }
+
+  public normalize(params: ShadowsEdit): Full {
+    return { edit: 'shadows', amount: clampf(-1, params.amount ?? 0, 1) };
+  }
+
+  public apply(ctx: RenderContext, from: Target, to: Target, params: Full): Target {
+    ctx.pass(FRAG, from, to, (gl, p) => {
+      setFloatUniform(gl, p, 'amount', params.amount);
+    });
+    return to;
+  }
+}

package/src/transforms/warmth.ts

@@ -0,0 +1,64 @@
+// warmth.ts — white-balance-style temperature shift (red/blue gains).
+//
+// r *= 1 + 0.3*amount, b *= 1 - 0.3*amount, g unchanged: +1 is warm
+// (amber), -1 is cool (blue). Blacks stay black (multiplicative, like a
+// white-balance gain). Same factors in src/transforms/warmth.h and
+// math.ts warmthGains, so the canvas preview is WYSIWYG.
+import { clampf } from '../math.js';
+import {
+  isNumInRange,
+  setFloatUniform,
+  type ParamControl,
+  type RenderContext,
+  type Target,
+  type Transform,
+} from './transform.js';
+
+export interface WarmthEdit {
+  edit: 'warmth';
+  /** -1 (cool) .. 1 (warm). Default 0. */
+  amount?: number;
+}
+
+type Full = Required<WarmthEdit>;
+
+const FRAG = `
+precision mediump float;
+uniform sampler2D texture;
+uniform float amount;
+varying vec2 texCoord;
+void main() {
+  vec4 color = texture2D(texture, texCoord);
+  color.r *= 1.0 + amount * 0.3;
+  color.b *= 1.0 - amount * 0.3;
+  gl_FragColor = color;
+}
+`;
+
+export class WarmthTransform implements Transform<'warmth', WarmthEdit> {
+  public readonly edit = 'warmth' as const;
+  public controls: ParamControl[] = [
+    { key: 'amount', label: 'amount', min: -1, max: 1, step: 0.01, def: 0 },
+  ];
+
+  public defaults(): Full {
+    return { edit: 'warmth', amount: 0 };
+  }
+
+  public validate(params: WarmthEdit): string[] {
+    if (params.amount !== undefined && !isNumInRange(params.amount, -1, 1))
+      return ['amount must be a number in [-1,1]'];
+    return [];
+  }
+
+  public normalize(params: WarmthEdit): Full {
+    return { edit: 'warmth', amount: clampf(-1, params.amount ?? 0, 1) };
+  }
+
+  public apply(ctx: RenderContext, from: Target, to: Target, params: Full): Target {
+    ctx.pass(FRAG, from, to, (gl, p) => {
+      setFloatUniform(gl, p, 'amount', params.amount);
+    });
+    return to;
+  }
+}

package/src/types.ts

@@ -9,14 +9,18 @@ import type { BlurEdit } from './transforms/blur.js';
 import type { BrightnessContrastEdit } from './transforms/brightnessContrast.js';
 import type { CropEdit } from './transforms/crop.js';
 import type { ExposureEdit } from './transforms/exposure.js';
+import type { FlipEdit } from './transforms/flip.js';
 import type { GrayscaleEdit } from './transforms/grayscale.js';
+import type { HighlightsEdit } from './transforms/highlights.js';
 import type { HueSaturationEdit } from './transforms/hueSaturation.js';
 import type { InvertEdit } from './transforms/invert.js';
 import type { RotateEdit } from './transforms/rotate.js';
 import type { SepiaEdit } from './transforms/sepia.js';
+import type { ShadowsEdit } from './transforms/shadows.js';
 import type { SharpenEdit } from './transforms/sharpen.js';
 import type { VibranceEdit } from './transforms/vibrance.js';
 import type { VignetteEdit } from './transforms/vignette.js';
+import type { WarmthEdit } from './transforms/warmth.js';
 
 export type EditName =
   | 'brightnessContrast'
@@ -27,10 +31,14 @@ export type EditName =
   | 'blur'
   | 'sharpen'
   | 'vignette'
+  | 'shadows'
+  | 'highlights'
+  | 'warmth'
   | 'invert'
   | 'grayscale'
   | 'crop'
-  | 'rotate';
+  | 'rotate'
+  | 'flip';
 
 export type Edit =
   | BrightnessContrastEdit
@@ -41,10 +49,14 @@ export type Edit =
   | BlurEdit
   | SharpenEdit
   | VignetteEdit
+  | ShadowsEdit
+  | HighlightsEdit
+  | WarmthEdit
   | InvertEdit
   | GrayscaleEdit
   | CropEdit
-  | RotateEdit;
+  | RotateEdit
+  | FlipEdit;
 
 export const EDIT_STATE_VERSION = 1 as const;