@pixerate/editor 0.214.0 → 0.215.0

package/dist/{chunk-L3G23N5Y.js → chunk-ZNA3IQZF.js}

@@ -724,6 +724,298 @@ function modifySelection(mask, op, radius) {
   }
 }
 
+// src/image-editor/selection/refine.ts
+var DEFAULT_REFINE_EDGE_PARAMS = {
+  radius: 0,
+  smartRadius: false,
+  smooth: 0,
+  feather: 0,
+  contrast: 0,
+  shiftEdge: 0
+};
+var GUIDED_FILTER_EPS = 1e-4;
+var fin = (v, d) => typeof v === "number" && Number.isFinite(v) ? v : d;
+function normalizeRefineEdgeParams(p = {}) {
+  return {
+    radius: Math.min(250, Math.max(0, fin(p.radius, 0))),
+    smartRadius: p.smartRadius === true,
+    smooth: Math.min(100, Math.max(0, fin(p.smooth, 0))),
+    feather: Math.min(1e3, Math.max(0, fin(p.feather, 0))),
+    contrast: Math.min(100, Math.max(0, fin(p.contrast, 0))),
+    shiftEdge: Math.min(100, Math.max(-100, fin(p.shiftEdge, 0)))
+  };
+}
+var gfRadius = (p) => Math.min(64, Math.max(1, Math.ceil(p.radius)));
+var smoothSigma = (p) => p.smooth / 100 * 4;
+var featherSigma = (p) => p.feather / 2;
+function shiftAmount(p) {
+  const px = p.shiftEdge / 100 * Math.max(p.radius, 4);
+  return Number.isFinite(px) ? Math.min(64, Math.max(-64, px)) : 0;
+}
+function refineEdgeHalo(params = {}) {
+  const p = normalizeRefineEdgeParams(params);
+  const g = gfRadius(p);
+  const edge = p.radius > 0 ? Math.max(Math.ceil(p.radius), 2 * g + (p.smartRadius ? g + 1 : 0)) : 0;
+  return edge + Math.ceil(3 * smoothSigma(p)) + Math.ceil(3 * featherSigma(p)) + Math.ceil(Math.abs(shiftAmount(p))) + 2;
+}
+function boxMean(src, w, h, r) {
+  const tmp = new Float32Array(w * h);
+  const pre = new Float64Array(Math.max(w, h) + 1);
+  for (let y = 0; y < h; y++) {
+    const row = y * w;
+    for (let x = 0; x < w; x++) pre[x + 1] = pre[x] + src[row + x];
+    for (let x = 0; x < w; x++) {
+      const lo = Math.max(0, x - r);
+      const hi = Math.min(w, x + r + 1);
+      tmp[row + x] = (pre[hi] - pre[lo]) / (hi - lo);
+    }
+  }
+  const out = new Float32Array(w * h);
+  for (let x = 0; x < w; x++) {
+    for (let y = 0; y < h; y++) pre[y + 1] = pre[y] + tmp[y * w + x];
+    for (let y = 0; y < h; y++) {
+      const lo = Math.max(0, y - r);
+      const hi = Math.min(h, y + r + 1);
+      out[y * w + x] = (pre[hi] - pre[lo]) / (hi - lo);
+    }
+  }
+  return out;
+}
+function guidedFilterColor(guide, p, w, h, r, eps = GUIDED_FILTER_EPS) {
+  const n = w * h;
+  const [c0, c1, c2] = guide;
+  const prod = (a, b2) => {
+    const o = new Float32Array(n);
+    for (let i = 0; i < n; i++) o[i] = a[i] * b2[i];
+    return o;
+  };
+  const m0 = boxMean(c0, w, h, r);
+  const m1 = boxMean(c1, w, h, r);
+  const m2 = boxMean(c2, w, h, r);
+  const mp = boxMean(p, w, h, r);
+  const mip0 = boxMean(prod(c0, p), w, h, r);
+  const mip1 = boxMean(prod(c1, p), w, h, r);
+  const mip2 = boxMean(prod(c2, p), w, h, r);
+  const s00 = boxMean(prod(c0, c0), w, h, r);
+  const s01 = boxMean(prod(c0, c1), w, h, r);
+  const s02 = boxMean(prod(c0, c2), w, h, r);
+  const s11 = boxMean(prod(c1, c1), w, h, r);
+  const s12 = boxMean(prod(c1, c2), w, h, r);
+  const s22 = boxMean(prod(c2, c2), w, h, r);
+  const a0 = new Float32Array(n);
+  const a1 = new Float32Array(n);
+  const a2 = new Float32Array(n);
+  const b = new Float32Array(n);
+  for (let i = 0; i < n; i++) {
+    const u0 = m0[i], u1 = m1[i], u2 = m2[i], up = mp[i];
+    const rr = s00[i] - u0 * u0 + eps;
+    const rg = s01[i] - u0 * u1;
+    const rb = s02[i] - u0 * u2;
+    const gg = s11[i] - u1 * u1 + eps;
+    const gb = s12[i] - u1 * u2;
+    const bb = s22[i] - u2 * u2 + eps;
+    const v0 = mip0[i] - u0 * up;
+    const v1 = mip1[i] - u1 * up;
+    const v2 = mip2[i] - u2 * up;
+    const i00 = gg * bb - gb * gb;
+    const i01 = gb * rb - rg * bb;
+    const i02 = rg * gb - gg * rb;
+    const i11 = rr * bb - rb * rb;
+    const i12 = rb * rg - rr * gb;
+    const i22 = rr * gg - rg * rg;
+    const det = rr * i00 + rg * i01 + rb * i02;
+    let x0 = 0, x1 = 0, x2 = 0;
+    if (Math.abs(det) >= 1e-30) {
+      x0 = (i00 * v0 + i01 * v1 + i02 * v2) / det;
+      x1 = (i01 * v0 + i11 * v1 + i12 * v2) / det;
+      x2 = (i02 * v0 + i12 * v1 + i22 * v2) / det;
+    }
+    a0[i] = x0;
+    a1[i] = x1;
+    a2[i] = x2;
+    b[i] = up - x0 * u0 - x1 * u1 - x2 * u2;
+  }
+  const ma0 = boxMean(a0, w, h, r);
+  const ma1 = boxMean(a1, w, h, r);
+  const ma2 = boxMean(a2, w, h, r);
+  const mb = boxMean(b, w, h, r);
+  const out = new Float32Array(n);
+  for (let i = 0; i < n; i++) out[i] = ma0[i] * c0[i] + ma1[i] * c1[i] + ma2[i] * c2[i] + mb[i];
+  return out;
+}
+function edgeWidth(guide, w, h, r) {
+  const n = w * h;
+  const y = new Float32Array(n);
+  for (let i = 0; i < n; i++) y[i] = 0.299 * guide[0][i] + 0.587 * guide[1][i] + 0.114 * guide[2][i];
+  const g = new Float32Array(n);
+  for (let yy = 0; yy < h; yy++) {
+    for (let xx = 0; xx < w; xx++) {
+      const gx = (y[yy * w + Math.min(w - 1, xx + 1)] - y[yy * w + Math.max(0, xx - 1)]) / 2;
+      const gy = (y[Math.min(h - 1, yy + 1) * w + xx] - y[Math.max(0, yy - 1) * w + xx]) / 2;
+      g[yy * w + xx] = Math.sqrt(gx * gx + gy * gy);
+    }
+  }
+  const gm = greyMorphology(g, w, h, r, true);
+  const hi = greyMorphology(y, w, h, r, true);
+  const lo = greyMorphology(y, w, h, r, false);
+  const out = new Float32Array(n);
+  for (let i = 0; i < n; i++) out[i] = (hi[i] - lo[i]) / Math.max(gm[i], 1e-4);
+  return out;
+}
+function refineCoverage(guide, m, w, h, params = {}, band = null) {
+  const p = normalizeRefineEdgeParams(params);
+  let a = Float32Array.from(m);
+  if ((p.radius > 0 || band) && guide) {
+    const n = w * h;
+    const boundary = new Uint8Array(n);
+    let any = false;
+    for (let y = 0; y < h; y++) {
+      for (let x = 0; x < w; x++) {
+        const i = y * w + x;
+        const v = m[i] >= 0.5;
+        const diff = x > 0 && m[i - 1] >= 0.5 !== v || x + 1 < w && m[i + 1] >= 0.5 !== v || y > 0 && m[i - w] >= 0.5 !== v || y + 1 < h && m[i + w] >= 0.5 !== v;
+        if (diff) {
+          boundary[i] = 1;
+          any = true;
+        }
+      }
+    }
+    if (any || band) {
+      const dist = distanceTransform(boundary, w, h);
+      const r = band ? Math.max(4, gfRadius(p)) : gfRadius(p);
+      const q = guidedFilterColor(guide, m, w, h, r);
+      const widths = p.smartRadius ? edgeWidth(guide, w, h, r) : null;
+      for (let i = 0; i < n; i++) {
+        const reff = widths ? Math.min(Math.max(p.radius, 1.5), Math.max(1.5, widths[i])) : p.radius;
+        const edge = p.radius > 0 ? Math.min(1, Math.max(0, reff + 1 - dist[i])) : 0;
+        const wgt = band ? Math.max(edge, Math.min(1, Math.max(0, band[i]))) : edge;
+        if (wgt > 0) {
+          const qi = Math.min(1, Math.max(0, q[i]));
+          a[i] = m[i] + (qi - m[i]) * wgt;
+        }
+      }
+    }
+  }
+  const ss = smoothSigma(p);
+  if (ss >= 0.3) {
+    a = gaussianBlur(a, w, h, ss, "clamp");
+    const gain = 1 + ss;
+    for (let i = 0; i < a.length; i++) a[i] = Math.min(1, Math.max(0, (a[i] - 0.5) * gain + 0.5));
+  }
+  a = gaussianBlur(a, w, h, featherSigma(p), "clamp");
+  if (p.contrast > 0) {
+    const gain = 1 / (1 - 0.99 * p.contrast / 100);
+    for (let i = 0; i < a.length; i++) a[i] = Math.min(1, Math.max(0, (a[i] - 0.5) * gain + 0.5));
+  }
+  const amount = shiftAmount(p);
+  if (Math.abs(amount) >= 1e-4) a = shiftCoverage(a, w, h, amount);
+  return a;
+}
+function guidePlanes(pixels, win) {
+  const box = win ?? { x: 0, y: 0, width: pixels.width, height: pixels.height };
+  const n = box.width * box.height;
+  const r = new Float32Array(n);
+  const g = new Float32Array(n);
+  const b = new Float32Array(n);
+  const d = pixels.data;
+  for (let y = 0; y < box.height; y++) {
+    for (let x = 0; x < box.width; x++) {
+      const i = y * box.width + x;
+      const p = ((box.y + y) * pixels.width + box.x + x) * 4;
+      r[i] = d[p] / 255;
+      g[i] = d[p + 1] / 255;
+      b[i] = d[p + 2] / 255;
+    }
+  }
+  return [r, g, b];
+}
+function refineSelection(pixels, mask, params = {}, refineBrush = null) {
+  const p = normalizeRefineEdgeParams(params);
+  if (pixels && (pixels.width !== mask.width || pixels.height !== mask.height)) {
+    throw new Error("Refine Edge needs pixels the size of the selection");
+  }
+  if (!mask.bounds) return mask;
+  const brush = refineBrush?.bounds ? refineBrush : null;
+  const halo = refineEdgeHalo(p) + (brush ? 2 * Math.max(4, gfRadius(p)) : 0);
+  const b = brush ? {
+    x: Math.min(mask.bounds.x, brush.bounds.x),
+    y: Math.min(mask.bounds.y, brush.bounds.y),
+    r: Math.max(mask.bounds.x + mask.bounds.width, brush.bounds.x + brush.bounds.width),
+    btm: Math.max(mask.bounds.y + mask.bounds.height, brush.bounds.y + brush.bounds.height)
+  } : { x: mask.bounds.x, y: mask.bounds.y, r: mask.bounds.x + mask.bounds.width, btm: mask.bounds.y + mask.bounds.height };
+  const x0 = Math.max(0, b.x - halo);
+  const y0 = Math.max(0, b.y - halo);
+  const x1 = Math.min(mask.width, b.r + halo);
+  const y1 = Math.min(mask.height, b.btm + halo);
+  const ww = x1 - x0;
+  const wh = y1 - y0;
+  const m = new Float32Array(ww * wh);
+  for (let y = 0; y < wh; y++) {
+    const src = (y0 + y) * mask.width + x0;
+    for (let x = 0; x < ww; x++) m[y * ww + x] = mask.data[src + x] / 255;
+  }
+  const guide = pixels && (p.radius > 0 || brush) ? guidePlanes(pixels, { x: x0, y: y0, width: ww, height: wh }) : null;
+  let band = null;
+  if (brush) {
+    band = new Float32Array(ww * wh);
+    const bd = brush.data;
+    for (let y = 0; y < wh; y++) {
+      const src = (y0 + y) * mask.width + x0;
+      for (let x = 0; x < ww; x++) band[y * ww + x] = bd[src + x] / 255;
+    }
+  }
+  const refined = refineCoverage(guide, m, ww, wh, p, band);
+  const out = new Uint8Array(mask.width * mask.height);
+  for (let y = 0; y < wh; y++) {
+    const dst = (y0 + y) * mask.width + x0;
+    for (let x = 0; x < ww; x++) out[dst + x] = coverageToByte(refined[y * ww + x]);
+  }
+  return createSelectionMask(mask.width, mask.height, out);
+}
+function decontaminateColors(rgba, coverage, w, h, amount, radius = 8) {
+  const out = Uint8ClampedArray.from(rgba);
+  const n = w * h;
+  const k = Math.min(1, Math.max(0, amount));
+  if (k === 0) return out;
+  const r = Math.max(2, Math.round(radius));
+  const fgW = new Float32Array(n);
+  const bgW = new Float32Array(n);
+  for (let i = 0; i < n; i++) {
+    fgW[i] = coverage[i] >= 250 ? 1 : 0;
+    bgW[i] = coverage[i] <= 5 ? 1 : 0;
+  }
+  const meanOf = (weights, radiusPx) => {
+    const wm = boxMean(weights, w, h, radiusPx);
+    const planes = [0, 1, 2].map((c) => {
+      const v = new Float32Array(n);
+      for (let i = 0; i < n; i++) v[i] = rgba[i * 4 + c] * weights[i];
+      const m = boxMean(v, w, h, radiusPx);
+      for (let i = 0; i < n; i++) m[i] = wm[i] > 1e-6 ? m[i] / wm[i] : NaN;
+      return m;
+    });
+    return { weight: wm, planes };
+  };
+  const fg = meanOf(fgW, r);
+  const fgWide = meanOf(fgW, r * 3);
+  const bg = meanOf(bgW, r);
+  for (let i = 0; i < n; i++) {
+    const c = coverage[i];
+    if (c <= 5 || c >= 250) continue;
+    const a = c / 255;
+    for (let ch = 0; ch < 3; ch++) {
+      const C = rgba[i * 4 + ch];
+      const B = bg.planes[ch][i];
+      const Fm = Number.isNaN(fg.planes[ch][i]) ? fgWide.planes[ch][i] : fg.planes[ch][i];
+      let F;
+      if (a >= 0.5 && !Number.isNaN(B)) F = (C - (1 - a) * B) / a;
+      else if (!Number.isNaN(Fm)) F = Fm;
+      else F = C;
+      out[i * 4 + ch] = Math.round(C + k * (Math.min(255, Math.max(0, F)) - C));
+    }
+  }
+  return out;
+}
+
 export {
   SELECTION_MODES,
   isSelectionMode,
@@ -759,5 +1051,16 @@ export {
   greyMorphology,
   shiftCoverage,
   SELECTION_MODIFY_OPS,
-  modifySelection
+  modifySelection,
+  DEFAULT_REFINE_EDGE_PARAMS,
+  GUIDED_FILTER_EPS,
+  normalizeRefineEdgeParams,
+  refineEdgeHalo,
+  boxMean,
+  guidedFilterColor,
+  edgeWidth,
+  refineCoverage,
+  guidePlanes,
+  refineSelection,
+  decontaminateColors
 };

package/dist/image-editor/controller.d.cts

@@ -283,6 +283,15 @@ export interface CloneSource {
 /** A vector mask's path: several `components`, or one `shape` / `subpaths` (with `op`). */
 /** What `inspectMaskEdge` reads: the selection, a layer's painted mask or its vector mask. */
 export type MaskEdgeTarget = 'selection' | 'layer-mask' | 'vector-mask';
+/** A layer's edge colour as `getEdgeColor` describes it (percentages). */
+export interface EdgeColorInfo {
+    layerId: string;
+    decontaminate: number;
+    despill: number;
+    ambient: number;
+    /** `auto` (what is behind the layer, live) or `#rrggbb`. */
+    ambientSource: string;
+}
 export interface VectorMaskPathInput extends ShapeGeometryInput {
     components?: ShapeGeometryInput[];
     fillRule?: ShapeFillRule;
@@ -1025,6 +1034,26 @@ export declare class ImageEditorController {
         parentId: string | null;
         index: number;
     };
+    /** A layer's edge colour as percentages (see `setEdgeColor`). */
+    getEdgeColor(id: string): EdgeColorInfo;
+    private requireEdgeLayer;
+    /** Whether the layer's mask (painted and vector, with feather) has a soft band. */
+    private maskHasSoftBand;
+    /**
+     * Edge colour on a layer's soft edge, applied when compositing (nothing is baked); amounts in
+     * percent, 0 turns one off. `decontaminate` unmixes the old background (the pixels the mask
+     * hides) from the edge and `despill` limits its hue there: both need a pixel layer whose mask
+     * (painted or vector) has a soft band. `ambient` pulls the edge toward what is behind the layer
+     * (`ambientColor` null: sampled live) or a fixed `#rrggbb`; it needs a soft mask or soft
+     * pixels at the edge. Validates everything before changing anything; one undo step (none with
+     * `commitToHistory` false, for the later moves of a slider drag). Returns the effective settings.
+     */
+    setEdgeColor(id: string, change: {
+        decontaminate?: number;
+        despill?: number;
+        ambient?: number;
+        ambientColor?: string | null;
+    }, commitToHistory?: boolean): EdgeColorInfo;
     /**
      * Changes name, visibility, opacity, fill, blend, clipping, locks or (groups) collapsed state, as
      * one undo step (`commitToHistory = false` for the moves of a slider drag). Returns the layer.

package/dist/image-editor/controller.d.ts

@@ -283,6 +283,15 @@ export interface CloneSource {
 /** A vector mask's path: several `components`, or one `shape` / `subpaths` (with `op`). */
 /** What `inspectMaskEdge` reads: the selection, a layer's painted mask or its vector mask. */
 export type MaskEdgeTarget = 'selection' | 'layer-mask' | 'vector-mask';
+/** A layer's edge colour as `getEdgeColor` describes it (percentages). */
+export interface EdgeColorInfo {
+    layerId: string;
+    decontaminate: number;
+    despill: number;
+    ambient: number;
+    /** `auto` (what is behind the layer, live) or `#rrggbb`. */
+    ambientSource: string;
+}
 export interface VectorMaskPathInput extends ShapeGeometryInput {
     components?: ShapeGeometryInput[];
     fillRule?: ShapeFillRule;
@@ -1025,6 +1034,26 @@ export declare class ImageEditorController {
         parentId: string | null;
         index: number;
     };
+    /** A layer's edge colour as percentages (see `setEdgeColor`). */
+    getEdgeColor(id: string): EdgeColorInfo;
+    private requireEdgeLayer;
+    /** Whether the layer's mask (painted and vector, with feather) has a soft band. */
+    private maskHasSoftBand;
+    /**
+     * Edge colour on a layer's soft edge, applied when compositing (nothing is baked); amounts in
+     * percent, 0 turns one off. `decontaminate` unmixes the old background (the pixels the mask
+     * hides) from the edge and `despill` limits its hue there: both need a pixel layer whose mask
+     * (painted or vector) has a soft band. `ambient` pulls the edge toward what is behind the layer
+     * (`ambientColor` null: sampled live) or a fixed `#rrggbb`; it needs a soft mask or soft
+     * pixels at the edge. Validates everything before changing anything; one undo step (none with
+     * `commitToHistory` false, for the later moves of a slider drag). Returns the effective settings.
+     */
+    setEdgeColor(id: string, change: {
+        decontaminate?: number;
+        despill?: number;
+        ambient?: number;
+        ambientColor?: string | null;
+    }, commitToHistory?: boolean): EdgeColorInfo;
     /**
      * Changes name, visibility, opacity, fill, blend, clipping, locks or (groups) collapsed state, as
      * one undo step (`commitToHistory = false` for the moves of a slider drag). Returns the layer.