@radialapps/memories-vips-editor 0.1.1 → 0.1.3

package/src/transforms/sepia.ts

@@ -0,0 +1,64 @@
+// sepia.ts — glfx.js sepia port, minus its per-channel min(1.0): like the VIPS
+// side, values stay unclipped until the end so later edits see the same input.
+import { clampf } from '../math.js';
+import {
+  isNumInRange,
+  setFloatUniform,
+  type ParamControl,
+  type RenderContext,
+  type Target,
+  type Transform,
+} from './transform.js';
+
+export interface SepiaEdit {
+  edit: 'sepia';
+  /** 0 (original) .. 1 (full sepia). Default 1. */
+  amount?: number;
+}
+
+type Full = Required<SepiaEdit>;
+
+const FRAG = `
+precision mediump float;
+uniform sampler2D texture;
+uniform float amount;
+varying vec2 texCoord;
+void main() {
+  vec4 color = texture2D(texture, texCoord);
+  float r = color.r;
+  float g = color.g;
+  float b = color.b;
+  color.r = (r * (1.0 - (0.607 * amount))) + (g * (0.769 * amount)) + (b * (0.189 * amount));
+  color.g = (r * 0.349 * amount) + (g * (1.0 - (0.314 * amount))) + (b * 0.168 * amount);
+  color.b = (r * 0.272 * amount) + (g * 0.534 * amount) + (b * (1.0 - (0.869 * amount)));
+  gl_FragColor = color;
+}
+`;
+
+export class SepiaTransform implements Transform<'sepia', SepiaEdit> {
+  public readonly edit = 'sepia' as const;
+  public controls: ParamControl[] = [
+    { key: 'amount', label: 'amount', min: 0, max: 1, step: 0.01, def: 1 },
+  ];
+
+  public defaults(): Full {
+    return { edit: 'sepia', amount: 1 };
+  }
+
+  public validate(params: SepiaEdit): string[] {
+    if (params.amount !== undefined && !isNumInRange(params.amount, 0, 1))
+      return ['amount must be a number in [0,1]'];
+    return [];
+  }
+
+  public normalize(params: SepiaEdit): Full {
+    return { edit: 'sepia', amount: clampf(0, params.amount ?? 1, 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/sharpen.ts

@@ -0,0 +1,86 @@
+// sharpen.ts — glfx-style unsharp mask (gaussian + mix).
+import { clampf, gaussianKernel } from '../math.js';
+import {
+  isNumInRange,
+  setFloatUniform,
+  type ParamControl,
+  type RenderContext,
+  type Target,
+  type Transform,
+} from './transform.js';
+
+export interface SharpenEdit {
+  edit: 'sharpen';
+  /** Blur radius for the unsharp mask, in pixels, 0..50. Default 2. */
+  radius?: number;
+  /** 0 (no change) .. 5. Default 0.5. */
+  amount?: number;
+}
+
+type Full = Required<SharpenEdit>;
+
+const MIX_FRAG = `
+precision mediump float;
+uniform sampler2D blurredTexture;
+uniform sampler2D originalTexture;
+uniform float strength;
+varying vec2 texCoord;
+void main() {
+  vec4 blurred = texture2D(blurredTexture, texCoord);
+  vec4 original = texture2D(originalTexture, texCoord);
+  gl_FragColor = vec4(mix(blurred.rgb, original.rgb, 1.0 + strength), original.a);
+}
+`;
+
+export class SharpenTransform implements Transform<'sharpen', SharpenEdit> {
+  public readonly edit = 'sharpen' as const;
+  public controls: ParamControl[] = [
+    { key: 'radius', label: 'radius px', min: 0, max: 20, step: 0.5, def: 2 },
+    { key: 'amount', label: 'amount', min: 0, max: 5, step: 0.05, def: 0.5 },
+  ];
+
+  public defaults(): Full {
+    return { edit: 'sharpen', radius: 2, amount: 0.5 };
+  }
+
+  public validate(params: SharpenEdit): string[] {
+    const errs: string[] = [];
+    if (params.radius !== undefined && !isNumInRange(params.radius, 0, 50))
+      errs.push('radius must be a number in [0,50]');
+    if (params.amount !== undefined && !isNumInRange(params.amount, 0, 5))
+      errs.push('amount must be a number in [0,5]');
+    return errs;
+  }
+
+  public normalize(params: SharpenEdit): Full {
+    return {
+      edit: 'sharpen',
+      radius: clampf(0, params.radius ?? 2, 50),
+      amount: clampf(0, params.amount ?? 0.5, 5),
+    };
+  }
+
+  public apply(ctx: RenderContext, from: Target, to: Target, params: Full): Target {
+    const radius = params.radius * ctx.resolutionScale;
+    if (radius <= 0 || params.amount <= 0) {
+      ctx.blit(from, to);
+      return to;
+    }
+    ctx.blit(from, ctx.extra);
+    const kernel = gaussianKernel(radius);
+    ctx.gauss(from, to, true, kernel);
+    ctx.gauss(to, from, false, kernel);
+    ctx.pass(
+      MIX_FRAG,
+      from,
+      to,
+      (gl, p) => {
+        const uB = gl.getUniformLocation(p, 'blurredTexture');
+        if (uB) gl.uniform1i(uB, 0);
+        setFloatUniform(gl, p, 'strength', params.amount);
+      },
+      { tex: ctx.extra.tex, unit: 1, name: 'originalTexture' },
+    );
+    return to;
+  }
+}

package/src/transforms/state.ts

@@ -0,0 +1,26 @@
+// transforms/state.ts — {version, edits} state validation/serialization.
+import { EDIT_STATE_VERSION, type EditState } from '../types.js';
+import { normalizeEdit, validateEdit } from './index.js';
+
+export function validateState(state: EditState): string[] {
+  if (typeof state !== 'object' || state === null) return ['state must be an object'];
+  const errs: string[] = [];
+  if (state.version !== EDIT_STATE_VERSION) errs.push(`version must be ${EDIT_STATE_VERSION}`);
+  if (!Array.isArray(state.edits)) return [...errs, 'edits must be an array'];
+  state.edits.forEach((edit, i) => {
+    for (const e of validateEdit(edit)) errs.push(`edits[${i}]: ${e}`);
+  });
+  return errs;
+}
+
+export function stateToJSON(state: EditState): string {
+  return JSON.stringify({ version: EDIT_STATE_VERSION, edits: state.edits.map(normalizeEdit) });
+}
+
+/** Parse + normalize; throws on invalid shape. */
+export function stateFromJSON(json: string): EditState {
+  const raw = JSON.parse(json) as EditState;
+  const errs = validateState(raw);
+  if (errs.length > 0) throw new Error(`invalid edit state: ${errs.join('; ')}`);
+  return { version: EDIT_STATE_VERSION, edits: raw.edits.map(normalizeEdit) };
+}

package/src/transforms/transform.ts

@@ -0,0 +1,104 @@
+// transform.ts — generic signature every transform implements.
+//
+// A transform is one named pixel edit (brightnessContrast, sepia, ...).
+// The pipeline (pipeline.ts) stays generic: it looks the transform up by
+// `edit.edit` in the registry (transforms/index.ts), normalizes params
+// through it, and calls apply(). The VIPS side mirrors this shape with a
+// `Transform` base class plus one header per transform (src/transforms/).
+import type { EditName } from '../types.js';
+
+export interface Target {
+  tex: WebGLTexture;
+  fb: WebGLFramebuffer;
+  /** Pixel size of the target (targets are reallocated on geometry change). */
+  w: number;
+  h: number;
+}
+
+export interface ExtraTex {
+  tex: WebGLTexture;
+  unit: number;
+  name: string;
+}
+
+export type UniformSetter = (gl: WebGLRenderingContext, prog: WebGLProgram) => void;
+
+/** What a transform may do: single passes, blits, separable gaussian. */
+export interface RenderContext {
+  /** Input (source) size for the current edit. */
+  width: number;
+  height: number;
+  /** Output size for the current edit (differs for crop/rotate). */
+  outWidth: number;
+  outHeight: number;
+  /** Fragment-shader highp support (rotate picks precision accordingly). */
+  highp: boolean;
+  /** Working/native resolution ratio; pixel-unit radii scale by this (1 when no downscale). */
+  resolutionScale: number;
+  extra: Target;
+  pass(
+    frag: string,
+    from: Target,
+    to: Target,
+    setUniforms?: UniformSetter,
+    extraTex?: ExtraTex,
+  ): void;
+  blit(from: Target, to: Target): void;
+  gauss(from: Target, to: Target, horizontal: boolean, kernel: number[]): void;
+}
+
+export interface ParamControl {
+  key: string;
+  label: string;
+  min: number;
+  max: number;
+  step: number;
+  def: number;
+}
+
+export interface Transform<Name extends string, P extends object> {
+  /** Discriminator, e.g. 'sepia'. Matches the "edit" JSON key. */
+  readonly edit: Name;
+  /** No-change params (used by Add flows and normalize()). */
+  defaults(): Required<P>;
+  /** Slider schema for generic UIs (demo). */
+  controls: ParamControl[];
+  /** Human-readable problems; empty means VIPS-appliable. */
+  validate(params: P): string[];
+  /** Fill defaults + clamp, so output always passes validate(). */
+  normalize(params: P): Required<P>;
+  /** Render one edit reading `from`, writing `to`; returns result target. */
+  apply(ctx: RenderContext, from: Target, to: Target, params: Required<P>): Target;
+  /**
+   * Output size for the given input size (pixel ops omit this: identity).
+   * Geometric edits (crop/rotate) implement it with the exact VIPS formula
+   * so the pipeline can pre-size `to`; `apply` must fill exactly that.
+   */
+  outputDims?(inW: number, inH: number, params: Required<P>): { w: number; h: number };
+}
+
+/** Number in [lo,hi], finite. Shared range check for validate(). */
+export function isNumInRange(v: unknown, lo: number, hi: number): boolean {
+  return typeof v === 'number' && Number.isFinite(v) && v >= lo && v <= hi;
+}
+
+export function setFloatUniform(
+  gl: WebGLRenderingContext,
+  prog: WebGLProgram,
+  name: string,
+  value: number,
+): void {
+  const u = gl.getUniformLocation(prog, name);
+  if (u) gl.uniform1f(u, value);
+}
+
+/** Unknown runtime names (including Object.prototype keys) yield undefined. */
+export function lookup(
+  registry: Record<EditName, Transform<string, object>>,
+  name: unknown,
+): Transform<string, object> | undefined {
+  if (typeof name !== 'string' || !Object.prototype.hasOwnProperty.call(registry, name)) {
+    return undefined;
+  }
+  return registry[name as EditName];
+}

package/src/transforms/vibrance.ts

@@ -0,0 +1,61 @@
+// vibrance.ts — glfx.js vibrance port.
+import { clampf } from '../math.js';
+import {
+  isNumInRange,
+  setFloatUniform,
+  type ParamControl,
+  type RenderContext,
+  type Target,
+  type Transform,
+} from './transform.js';
+
+export interface VibranceEdit {
+  edit: 'vibrance';
+  /** -1 (muted) .. 1 (max). Default 0. */
+  amount?: number;
+}
+
+type Full = Required<VibranceEdit>;
+
+const FRAG = `
+precision mediump float;
+uniform sampler2D texture;
+uniform float amount;
+varying vec2 texCoord;
+void main() {
+  vec4 color = texture2D(texture, texCoord);
+  float average = (color.r + color.g + color.b) / 3.0;
+  float mx = max(color.r, max(color.g, color.b));
+  float amt = (mx - average) * (-amount * 3.0);
+  color.rgb = mix(color.rgb, vec3(mx), amt);
+  gl_FragColor = color;
+}
+`;
+
+export class VibranceTransform implements Transform<'vibrance', VibranceEdit> {
+  public readonly edit = 'vibrance' as const;
+  public controls: ParamControl[] = [
+    { key: 'amount', label: 'amount', min: -1, max: 1, step: 0.01, def: 0 },
+  ];
+
+  public defaults(): Full {
+    return { edit: 'vibrance', amount: 0 };
+  }
+
+  public validate(params: VibranceEdit): string[] {
+    if (params.amount !== undefined && !isNumInRange(params.amount, -1, 1))
+      return ['amount must be a number in [-1,1]'];
+    return [];
+  }
+
+  public normalize(params: VibranceEdit): Full {
+    return { edit: 'vibrance', 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/vignette.ts

@@ -0,0 +1,78 @@
+// vignette.ts — glfx.js vignette port (closed-form smoothstep).
+import { clampf } from '../math.js';
+import {
+  isNumInRange,
+  setFloatUniform,
+  type ParamControl,
+  type RenderContext,
+  type Target,
+  type Transform,
+} from './transform.js';
+
+export interface VignetteEdit {
+  edit: 'vignette';
+  /** 0 (center) .. 1 (edge). Default 0.5. */
+  size?: number;
+  /** 0 (none) .. 1 (max darkening). Default 0.5. */
+  amount?: number;
+}
+
+type Full = Required<VignetteEdit>;
+
+const FRAG = `
+precision mediump float;
+uniform sampler2D texture;
+uniform float size;
+uniform float amount;
+varying vec2 texCoord;
+void main() {
+  vec4 color = texture2D(texture, texCoord);
+  float dx = texCoord.x - 0.5;
+  float dy = texCoord.y - 0.5;
+  float dist = sqrt(dx * dx + dy * dy);
+  float d = dist * (amount + size);
+  float e0 = 0.8;
+  float e1 = size * 0.799;
+  float t = clamp((d - e0) / (e1 - e0), 0.0, 1.0);
+  float s = t * t * (3.0 - 2.0 * t);
+  color.rgb *= s;
+  gl_FragColor = color;
+}
+`;
+
+export class VignetteTransform implements Transform<'vignette', VignetteEdit> {
+  public readonly edit = 'vignette' as const;
+  public controls: ParamControl[] = [
+    { key: 'size', label: 'size', min: 0, max: 1, step: 0.01, def: 0.5 },
+    { key: 'amount', label: 'amount', min: 0, max: 1, step: 0.01, def: 0.5 },
+  ];
+
+  public defaults(): Full {
+    return { edit: 'vignette', size: 0.5, amount: 0.5 };
+  }
+
+  public validate(params: VignetteEdit): string[] {
+    const errs: string[] = [];
+    if (params.size !== undefined && !isNumInRange(params.size, 0, 1))
+      errs.push('size must be a number in [0,1]');
+    if (params.amount !== undefined && !isNumInRange(params.amount, 0, 1))
+      errs.push('amount must be a number in [0,1]');
+    return errs;
+  }
+
+  public normalize(params: VignetteEdit): Full {
+    return {
+      edit: 'vignette',
+      size: clampf(0, params.size ?? 0.5, 1),
+      amount: clampf(0, params.amount ?? 0.5, 1),
+    };
+  }
+
+  public apply(ctx: RenderContext, from: Target, to: Target, params: Full): Target {
+    ctx.pass(FRAG, from, to, (gl, p) => {
+      setFloatUniform(gl, p, 'size', params.size);
+      setFloatUniform(gl, p, 'amount', params.amount);
+    });
+    return to;
+  }
+}

package/src/types.ts

@@ -0,0 +1,58 @@
+// types.ts — edit list model shared by the WebGL preview and the VIPS applier.
+//
+// JSON wire format (what the client serializes / what vips-preview accepts as
+// the "edits" field of convert/thumbnail):
+//   { "version": 1, "edits": [ { "edit": "brightnessContrast", ... }, ... ] }
+// Per-edit shapes live next to their Transform implementations
+// (src/transforms/); this file only forms the union.
+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 { GrayscaleEdit } from './transforms/grayscale.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 { SharpenEdit } from './transforms/sharpen.js';
+import type { VibranceEdit } from './transforms/vibrance.js';
+import type { VignetteEdit } from './transforms/vignette.js';
+
+export type EditName =
+  | 'brightnessContrast'
+  | 'exposure'
+  | 'hueSaturation'
+  | 'sepia'
+  | 'vibrance'
+  | 'blur'
+  | 'sharpen'
+  | 'vignette'
+  | 'invert'
+  | 'grayscale'
+  | 'crop'
+  | 'rotate';
+
+export type Edit =
+  | BrightnessContrastEdit
+  | ExposureEdit
+  | HueSaturationEdit
+  | SepiaEdit
+  | VibranceEdit
+  | BlurEdit
+  | SharpenEdit
+  | VignetteEdit
+  | InvertEdit
+  | GrayscaleEdit
+  | CropEdit
+  | RotateEdit;
+
+export const EDIT_STATE_VERSION = 1 as const;
+
+export interface EditState {
+  version: typeof EDIT_STATE_VERSION;
+  edits: Edit[];
+}
+
+export function emptyState(): EditState {
+  return { version: EDIT_STATE_VERSION, edits: [] };
+}