@pixerate/editor 0.194.0 → 0.196.0

package/dist/image-editor/index.js

@@ -2497,6 +2497,312 @@ function pathToSelection(components, width, height, options = {}) {
   return feather > 0 && mask.bounds ? modifySelection(mask, "feather", feather) : mask;
 }
 
+// src/image-editor/selection/magnetic.ts
+var BLOCK = 64;
+var W_ZERO = 0.3;
+var W_GRADIENT = 0.4;
+var W_DIRECTION = 0.3;
+var EdgeMap = class {
+  width;
+  height;
+  contrast;
+  luma;
+  blocks = /* @__PURE__ */ new Map();
+  constructor(pixels, options = {}) {
+    const { width, height, data } = pixels;
+    if (!(width >= 1 && height >= 1) || data.length < width * height * 4) throw new Error("Invalid pixel buffer for edge detection.");
+    this.width = width;
+    this.height = height;
+    this.contrast = Math.min(1, Math.max(0, options.contrast ?? 0.1));
+    const luma2 = new Uint8Array(width * height);
+    for (let i = 0, p = 0; i < luma2.length; i++, p += 4) {
+      const a = data[p + 3] / 255;
+      const y = 0.299 * data[p] + 0.587 * data[p + 1] + 0.114 * data[p + 2];
+      luma2[i] = Math.round(y * a + 255 * (1 - a));
+    }
+    this.luma = luma2;
+  }
+  /** Edge strength at (x, y) in whole pixels, 0..1 (0 outside the image or below the contrast). */
+  strength(x, y) {
+    if (x < 0 || y < 0 || x >= this.width || y >= this.height) return 0;
+    const b = this.block(x, y);
+    return b.strength[y % BLOCK * BLOCK + x % BLOCK];
+  }
+  block(x, y) {
+    const bx = Math.floor(x / BLOCK);
+    const by = Math.floor(y / BLOCK);
+    const key = by * 65536 + bx;
+    let b = this.blocks.get(key);
+    if (!b) {
+      b = this.computeBlock(bx * BLOCK, by * BLOCK);
+      this.blocks.set(key, b);
+    }
+    return b;
+  }
+  computeBlock(x0, y0) {
+    const { width: W, height: H, luma: luma2 } = this;
+    const M = 2;
+    const S = BLOCK + 2 * M;
+    const smooth = new Float32Array(S * S);
+    const at = (x, y) => luma2[Math.min(H - 1, Math.max(0, y)) * W + Math.min(W - 1, Math.max(0, x))];
+    for (let j = 0; j < S; j++) {
+      const y = y0 - M + j;
+      for (let i = 0; i < S; i++) {
+        const x = x0 - M + i;
+        const v = at(x - 1, y - 1) + 2 * at(x, y - 1) + at(x + 1, y - 1) + 2 * at(x - 1, y) + 4 * at(x, y) + 2 * at(x + 1, y) + at(x - 1, y + 1) + 2 * at(x, y + 1) + at(x + 1, y + 1);
+        smooth[j * S + i] = v / (16 * 255);
+      }
+    }
+    const lap = new Float32Array(S * S);
+    for (let j = 1; j < S - 1; j++) {
+      for (let i = 1; i < S - 1; i++) {
+        const k = j * S + i;
+        lap[k] = smooth[k - 1] + smooth[k + 1] + smooth[k - S] + smooth[k + S] - 4 * smooth[k];
+      }
+    }
+    const n = BLOCK * BLOCK;
+    const strength = new Float32Array(n);
+    const dirX = new Float32Array(n);
+    const dirY = new Float32Array(n);
+    const zero = new Uint8Array(n);
+    const c = this.contrast;
+    for (let j = 0; j < BLOCK; j++) {
+      if (y0 + j >= H) break;
+      for (let i = 0; i < BLOCK; i++) {
+        if (x0 + i >= W) break;
+        const k = (j + M) * S + (i + M);
+        const gx = (smooth[k + 1] - smooth[k - 1]) / 2;
+        const gy = (smooth[k + S] - smooth[k - S]) / 2;
+        const g = Math.hypot(gx, gy);
+        const e = Math.min(1, 2 * g);
+        if (e < c || g === 0) continue;
+        const o = j * BLOCK + i;
+        strength[o] = e;
+        dirX[o] = gy / g;
+        dirY[o] = -gx / g;
+        const l = lap[k];
+        for (const d of [1, -1, S, -S]) {
+          const m = lap[k + d];
+          if (l > 0 && m < 0 || l < 0 && m > 0 || l === 0) {
+            if (Math.abs(l) <= Math.abs(m)) {
+              zero[o] = 1;
+              break;
+            }
+          }
+        }
+      }
+    }
+    return { strength, dirX, dirY, zero };
+  }
+  /** Features of the pixel at (x, y), which must be inside the image. */
+  features(x, y) {
+    const b = this.block(x, y);
+    const o = y % BLOCK * BLOCK + x % BLOCK;
+    return { strength: b.strength[o], dirX: b.dirX[o], dirY: b.dirY[o], zero: b.zero[o] };
+  }
+};
+var clampPixel = (v, max) => Math.min(max - 1, Math.max(0, Math.floor(v)));
+function snapToEdge(map, point, width = 10) {
+  const cx = clampPixel(point.x, map.width);
+  const cy = clampPixel(point.y, map.height);
+  const r = Math.max(0, Math.round(width));
+  let best = 0;
+  let bestD = Infinity;
+  let bx = cx;
+  let by = cy;
+  for (let y = Math.max(0, cy - r); y <= Math.min(map.height - 1, cy + r); y++) {
+    for (let x = Math.max(0, cx - r); x <= Math.min(map.width - 1, cx + r); x++) {
+      const d = (x - cx) ** 2 + (y - cy) ** 2;
+      if (d > r * r) continue;
+      const s = map.strength(x, y);
+      if (s > best + 0.02 || s > 0 && Math.abs(s - best) <= 0.02 && d < bestD) {
+        if (s > best) best = s;
+        bestD = d;
+        bx = x;
+        by = y;
+      }
+    }
+  }
+  return best > 0 ? { x: bx + 0.5, y: by + 0.5 } : point;
+}
+var Heap = class {
+  ids = new Int32Array(256);
+  keys = new Float64Array(256);
+  size = 0;
+  push(id, key) {
+    if (this.size === this.ids.length) {
+      const ids = new Int32Array(this.size * 2);
+      ids.set(this.ids);
+      const keys = new Float64Array(this.size * 2);
+      keys.set(this.keys);
+      this.ids = ids;
+      this.keys = keys;
+    }
+    let i = this.size++;
+    while (i > 0) {
+      const p = i - 1 >> 1;
+      if (this.keys[p] <= key) break;
+      this.ids[i] = this.ids[p];
+      this.keys[i] = this.keys[p];
+      i = p;
+    }
+    this.ids[i] = id;
+    this.keys[i] = key;
+  }
+  /** Removes the cheapest entry; read it from `topId` / `topKey` first. */
+  pop() {
+    const n = --this.size;
+    const id = this.ids[n];
+    const key = this.keys[n];
+    let i = 0;
+    for (; ; ) {
+      let c = 2 * i + 1;
+      if (c >= n) break;
+      if (c + 1 < n && this.keys[c + 1] < this.keys[c]) c++;
+      if (this.keys[c] >= key) break;
+      this.ids[i] = this.ids[c];
+      this.keys[i] = this.keys[c];
+      i = c;
+    }
+    this.ids[i] = id;
+    this.keys[i] = key;
+  }
+  get topId() {
+    return this.ids[0];
+  }
+  get topKey() {
+    return this.keys[0];
+  }
+};
+var NEIGHBOURS = [
+  [1, 0],
+  [-1, 0],
+  [0, 1],
+  [0, -1],
+  [1, 1],
+  [1, -1],
+  [-1, 1],
+  [-1, -1]
+];
+function liveWire(map, from, to, band) {
+  const ax = clampPixel(from.x, map.width);
+  const ay = clampPixel(from.y, map.height);
+  const bx = clampPixel(to.x, map.width);
+  const by = clampPixel(to.y, map.height);
+  if (ax === bx && ay === by) return [{ x: ax + 0.5, y: ay + 0.5 }];
+  const len = Math.hypot(bx - ax, by - ay);
+  const half = Math.max(2, band ?? Math.max(16, len / 4));
+  const rx0 = Math.max(0, Math.floor(Math.min(ax, bx) - half));
+  const ry0 = Math.max(0, Math.floor(Math.min(ay, by) - half));
+  const rx1 = Math.min(map.width - 1, Math.ceil(Math.max(ax, bx) + half));
+  const ry1 = Math.min(map.height - 1, Math.ceil(Math.max(ay, by) + half));
+  const w = rx1 - rx0 + 1;
+  const h = ry1 - ry0 + 1;
+  const n = w * h;
+  const strength = new Float32Array(n);
+  const dirX = new Float32Array(n);
+  const dirY = new Float32Array(n);
+  const zero = new Uint8Array(n);
+  const inside = new Uint8Array(n);
+  let maxStrength = 0;
+  const ux = (bx - ax) / len;
+  const uy = (by - ay) / len;
+  for (let y = 0; y < h; y++) {
+    for (let x = 0; x < w; x++) {
+      const px2 = rx0 + x - ax;
+      const py = ry0 + y - ay;
+      const t = Math.min(len, Math.max(0, px2 * ux + py * uy));
+      if (Math.hypot(px2 - t * ux, py - t * uy) > half) continue;
+      const i = y * w + x;
+      inside[i] = 1;
+      const f = map.features(rx0 + x, ry0 + y);
+      strength[i] = f.strength;
+      dirX[i] = f.dirX;
+      dirY[i] = f.dirY;
+      zero[i] = f.zero;
+      if (f.strength > maxStrength) maxStrength = f.strength;
+    }
+  }
+  const scale = maxStrength > 0 ? 1 / maxStrength : 0;
+  const dist = new Float64Array(n).fill(Infinity);
+  const prev = new Int32Array(n).fill(-1);
+  const done = new Uint8Array(n);
+  const start = (ay - ry0) * w + (ax - rx0);
+  const goal = (by - ry0) * w + (bx - rx0);
+  dist[start] = 0;
+  const heap = new Heap();
+  heap.push(start, 0);
+  while (heap.size) {
+    const p = heap.topId;
+    const d = heap.topKey;
+    heap.pop();
+    if (done[p] || d > dist[p]) continue;
+    done[p] = 1;
+    if (p === goal) break;
+    const x = p % w;
+    const y = (p - x) / w;
+    for (const [dx, dy] of NEIGHBOURS) {
+      const qx = x + dx;
+      const qy = y + dy;
+      if (qx < 0 || qy < 0 || qx >= w || qy >= h) continue;
+      const q = qy * w + qx;
+      if (!inside[q] || done[q]) continue;
+      const step = dx && dy ? Math.SQRT2 : 1;
+      const lx = dx / step;
+      const ly = dy / step;
+      const dp = Math.min(1, Math.abs(dirX[p] * lx + dirY[p] * ly));
+      const dq = Math.min(1, Math.abs(dirX[q] * lx + dirY[q] * ly));
+      const fD = (Math.acos(dp) + Math.acos(dq)) / Math.PI;
+      const fG = 1 - strength[q] * scale;
+      const fZ = 1 - zero[q];
+      const cost = (W_ZERO * fZ + W_GRADIENT * fG + W_DIRECTION * fD + 0.01) * step;
+      const nd = d + cost;
+      if (nd < dist[q]) {
+        dist[q] = nd;
+        prev[q] = p;
+        heap.push(q, nd);
+      }
+    }
+  }
+  if (prev[goal] < 0) return [{ x: ax + 0.5, y: ay + 0.5 }, { x: bx + 0.5, y: by + 0.5 }];
+  const path = [];
+  for (let p = goal; p >= 0; p = prev[p]) {
+    const x = p % w;
+    path.push({ x: rx0 + x + 0.5, y: ry0 + (p - x) / w + 0.5 });
+  }
+  return path.reverse();
+}
+function simplifyPixelPath(points) {
+  if (points.length < 3) return points.slice();
+  const out = [points[0]];
+  for (let i = 1; i < points.length - 1; i++) {
+    const a = out[out.length - 1];
+    const b = points[i];
+    const c = points[i + 1];
+    const cross = (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x);
+    if (Math.abs(cross) > 1e-9) out.push(b);
+  }
+  out.push(points[points.length - 1]);
+  return out;
+}
+function snapPolygonToEdges(pixels, points, options = {}) {
+  const map = pixels instanceof EdgeMap ? pixels : new EdgeMap(pixels, options);
+  const width = options.width ?? 10;
+  const snapped = points.map((p) => snapToEdge(map, p, width));
+  const out = [];
+  for (let i = 0; i < snapped.length; i++) {
+    const a = snapped[i];
+    const b = snapped[(i + 1) % snapped.length];
+    const seg = liveWire(map, a, b, Math.max(2 * width, 16, Math.hypot(b.x - a.x, b.y - a.y) / 4));
+    out.push(...seg.slice(0, -1));
+  }
+  return simplifyPixelPath(out);
+}
+function magneticAnchorSpacing(frequency = 57) {
+  const f = Math.min(100, Math.max(0, frequency));
+  return 8 + (100 - f);
+}
+
 // src/image-editor/layers/shape-type-ui.ts
 var DEFAULT_SHAPE_TOOL_OPTIONS = {
   kind: "rect",
@@ -8432,6 +8738,15 @@ var ImageEditorController = class {
     const { width, height } = this.naturalSize;
     return this.shapeCommand(polygonSelection(width, height, points, options), options);
   }
+  /**
+   * Magnetic Lasso for a given outline: each point snaps to the strongest edge within `width` px
+   * and consecutive points (the last back to the first) are joined along the edges. Returns the
+   * snapped outline in natural pixels, for {@link selectPolygon}.
+   */
+  async snapToEdges(points, options = {}) {
+    const pixels = await this.requirePixels(options);
+    return snapPolygonToEdges(pixels, points, options);
+  }
   /**
    * Supplies the pixels the selection tools sample (natural size RGBA), e.g. decoded in a worker
    * or in a test; `null` goes back to reading the source image. Without a canvas (Node, workers)
@@ -11440,6 +11755,7 @@ var SELECTION_TOOLS = [
   { id: "column", label: "Single Column" },
   { id: "lasso", label: "Lasso" },
   { id: "polygon", label: "Polygonal Lasso" },
+  { id: "magnetic", label: "Magnetic Lasso" },
   { id: "range", label: "Color Range" },
   { id: "type", label: "Type Mask" },
   { id: "type-vertical", label: "Vertical Type Mask" }
@@ -11474,6 +11790,9 @@ var DEFAULT_SELECTION_TOOL_OPTIONS = {
   fuzziness: 40,
   localized: 0,
   rangeInvert: false,
+  magneticWidth: 10,
+  magneticContrast: 10,
+  magneticFrequency: 57,
   typeText: "Type",
   typeSize: 72,
   typeFamily: "sans-serif"
@@ -11836,11 +12155,20 @@ function createImageSelectionTools(controller) {
   const selectPolygonTool = {
     name: "select_polygon",
     title: "Select a polygon (lasso)",
-    description: "Lasso: selects the polygon through points (natural image pixels, in order along the outline, closed automatically), combined by mode. To cut out a subject, follow its contour closely (more points give a tighter edge), then refine_selection for hair or foliage. One undoable step. Returns the selection.",
+    description: "Lasso: selects the polygon through points (natural image pixels, in order along the outline, closed automatically), combined by mode. To cut out a subject, follow its contour closely (more points give a tighter edge), then refine_selection for hair or foliage. With snapToEdges (the Magnetic Lasso), each point snaps to the strongest edge within width px and the outline between points follows the edges of the image, so a rough outline a few dozen px per point is enough on a subject with a clear edge. One undoable step. Returns the selection (with snapToEdges, also outlinePoints: how many vertices the snapped outline has).",
     inputSchema: {
       type: "object",
       properties: {
         points: { type: "array", minItems: 3, items: pointSchema, description: "At least 3 vertices along the outline, in order, in natural image pixels." },
+        snapToEdges: {
+          type: "object",
+          description: "Magnetic Lasso: snap the outline to the edges of the image (the composite as painted) instead of joining the points with straight lines. Omit for a plain polygon.",
+          properties: {
+            width: { type: "number", minimum: 1, maximum: 256, description: "Detection width in px: each point snaps to the strongest edge this close (default 10). Keep points within it of the edge." },
+            contrast: { type: "number", minimum: 0.01, maximum: 1, description: "Ignore edges with less contrast than this, 0.01..1 (default 0.1). Raise it on a noisy or textured background; lower it for a faint edge." }
+          },
+          additionalProperties: false
+        },
         mode: modeSchema,
         feather: featherSchema,
         antiAlias: antiAliasSchema
@@ -11849,13 +12177,19 @@ function createImageSelectionTools(controller) {
       additionalProperties: false
     },
     annotations: writeAnnotations("Select a polygon (lasso)", true),
-    handler: (args) => {
+    handler: async (args) => {
       const list = Array.isArray(args.points) ? args.points.map((p) => ({ x: num2(p?.x, NaN), y: num2(p?.y, NaN) })) : [];
       if (list.length < 3 || !list.every((p) => Number.isFinite(p.x) && Number.isFinite(p.y))) {
         throw new Error("points needs at least 3 { x, y } vertices in natural image pixels.");
       }
-      controller.selectPolygon(list, shapeOptions(args));
-      return summary(controller);
+      const snap = args.snapToEdges;
+      if (!snap) {
+        controller.selectPolygon(list, shapeOptions(args));
+        return summary(controller);
+      }
+      const outline = await controller.snapToEdges(list, { width: snap.width, contrast: snap.contrast });
+      controller.selectPolygon(outline, shapeOptions(args));
+      return { ...summary(controller), outlinePoints: outline.length };
     }
   };
   const magicWandTool = {
@@ -13792,15 +14126,22 @@ var SelectionGesture = class {
   polygon = null;
   pressedAt = null;
   freehand = false;
+  magnetic = null;
   /** A click this close to the first corner (natural pixels) closes a polygonal lasso. */
   closeRadius = 8;
   /** The last error (e.g. pixels unavailable for the wand), for the UI to show. */
   error = null;
   get active() {
-    return this.start !== null || this.polygon !== null;
+    return this.start !== null || this.polygon !== null || this.magnetic !== null;
+  }
+  /** The anchors of a Magnetic Lasso being drawn (empty otherwise). */
+  get magneticAnchors() {
+    const m = this.magnetic;
+    return m ? m.anchors.map((i) => m.fixed[i]) : [];
   }
   /** The outline of the shape being drawn, or `null`. */
   get draftPath() {
+    if (this.magnetic) return [...this.magnetic.fixed, ...this.magnetic.live.slice(1)];
     if (this.polygon) return this.current ? [...this.polygon, this.current] : this.polygon.slice();
     if (!this.start || !this.current) return null;
     const { tool } = this.getOptions();
@@ -13824,7 +14165,8 @@ var SelectionGesture = class {
   async begin(point, modifiers = {}) {
     const options = this.getOptions();
     this.error = null;
-    if (this.polygon && options.tool !== "polygon") this.cancel();
+    if (this.polygon && options.tool !== "polygon" || this.magnetic && options.tool !== "magnetic") this.cancel();
+    if (options.tool === "magnetic") return this.magneticClick(point, modifiers, options);
     if (options.tool === "polygon") {
       this.pressedAt = point;
       this.freehand = false;
@@ -13919,6 +14261,11 @@ var SelectionGesture = class {
   }
   /** Pointer move; returns true when the draft changed (re-render). */
   move(point, modifiers = {}) {
+    if (this.magnetic) {
+      this.current = point;
+      this.followEdges(point);
+      return true;
+    }
     if (this.polygon) {
       const last = this.polygon[this.polygon.length - 1];
       if (this.pressedAt && (this.freehand || Math.hypot(point.x - this.pressedAt.x, point.y - this.pressedAt.y) >= 3)) {
@@ -13941,6 +14288,7 @@ var SelectionGesture = class {
   }
   /** Pointer up: commits the shape. Returns true when the selection changed. */
   end(point, modifiers) {
+    if (this.magnetic) return false;
     if (this.polygon) {
       if (point && this.freehand) this.move(point);
       this.pressedAt = null;
@@ -13968,7 +14316,12 @@ var SelectionGesture = class {
   }
   /** Closes a polygonal lasso and selects it. Returns true when the selection changed. */
   close() {
-    const polygon = this.polygon;
+    let polygon = this.polygon;
+    const m = this.magnetic;
+    if (m) {
+      const tail = m.edges && m.fixed.length > 1 ? liveWire(m.edges, m.fixed[m.fixed.length - 1], m.fixed[0], this.corridor(m.fixed[m.fixed.length - 1], m.fixed[0])) : [];
+      polygon = simplifyPixelPath([...m.fixed, ...tail.slice(1, -1)]);
+    }
     if (!polygon) return false;
     const options = this.getOptions();
     this.cancel();
@@ -13984,21 +14337,99 @@ var SelectionGesture = class {
    * removes the last corner. Returns true when the key was used (the host prevents its default).
    */
   key(key) {
-    if (!this.polygon) return false;
+    if (!this.polygon && !this.magnetic) return false;
     if (key === "Enter") this.close();
     else if (key === "Escape") this.cancel();
     else if (key === "Backspace" || key === "Delete") {
-      this.polygon.pop();
-      if (!this.polygon.length) this.cancel();
+      const m = this.magnetic;
+      if (m) {
+        m.anchors.pop();
+        if (!m.anchors.length) this.cancel();
+        else {
+          m.fixed.length = m.anchors[m.anchors.length - 1] + 1;
+          m.live = [];
+          if (this.current) this.followEdges(this.current, false);
+        }
+      } else {
+        this.polygon.pop();
+        if (!this.polygon.length) this.cancel();
+      }
     } else return false;
     return true;
   }
+  /** Corridor half-width for a live-wire between two points. */
+  corridor(a, b) {
+    return Math.max(2 * (this.getOptions().magneticWidth ?? 10), 16, Math.hypot(b.x - a.x, b.y - a.y) / 4);
+  }
+  async magneticClick(point, modifiers, options) {
+    const m = this.magnetic;
+    if (!m) {
+      this.modifiers = modifiers;
+      const draft = { fixed: [point], anchors: [0], live: [], edges: null };
+      this.magnetic = draft;
+      this.current = point;
+      try {
+        const pixels = await this.controller.getSamplePixels({ sampleMerged: options.sampleMerged, sample: options.sample });
+        if (!pixels) throw new Error("The image pixels are not available to find edges in.");
+        if (this.magnetic !== draft) return;
+        draft.edges = new EdgeMap(pixels, { contrast: (options.magneticContrast ?? 10) / 100 });
+        draft.fixed = [snapToEdge(draft.edges, point, options.magneticWidth ?? 10)];
+        if (this.current) this.followEdges(this.current);
+      } catch (err) {
+        this.error = err instanceof Error ? err.message : String(err);
+        if (this.magnetic === draft) this.cancel();
+      }
+      return;
+    }
+    const first = m.fixed[0];
+    if (m.anchors.length >= 2 && Math.hypot(point.x - first.x, point.y - first.y) <= this.closeRadius) {
+      this.close();
+      return;
+    }
+    this.current = point;
+    this.followEdges(point);
+    if (m.live.length > 1) {
+      m.fixed.push(...m.live.slice(1));
+      m.anchors.push(m.fixed.length - 1);
+      m.live = [];
+    }
+    if ((modifiers.detail ?? 1) >= 2) this.close();
+  }
+  /** Updates the live path to `point`, fixing anchors along it every `frequency` px (with `place`). */
+  followEdges(point, place = true) {
+    const m = this.magnetic;
+    const last = () => m.fixed[m.fixed.length - 1];
+    if (!m.edges) {
+      m.live = [last(), point];
+      return;
+    }
+    const options = this.getOptions();
+    const target = snapToEdge(m.edges, point, options.magneticWidth ?? 10);
+    const spacing = magneticAnchorSpacing(options.magneticFrequency ?? 57);
+    for (let guard = 0; guard < 64; guard++) {
+      const path = liveWire(m.edges, last(), target, this.corridor(last(), target));
+      let length = 0;
+      let k = 0;
+      for (k = 1; k < path.length; k++) {
+        length += Math.hypot(path[k].x - path[k - 1].x, path[k].y - path[k - 1].y);
+        if (length >= spacing) break;
+      }
+      if (!place || k >= path.length - 1) {
+        m.live = path;
+        return;
+      }
+      m.fixed.push(...path.slice(1, k + 1));
+      m.anchors.push(m.fixed.length - 1);
+    }
+    m.live = [last(), target];
+  }
   /** Abandons a drag (or a polygonal lasso) without changing the selection. */
   cancel() {
     this.start = null;
     this.current = null;
     this.points = [];
     this.polygon = null;
+    this.magnetic = null;
     this.pressedAt = null;
     this.freehand = false;
   }
@@ -18532,6 +18963,7 @@ export {
   EMPTY_MIXER_LOAD,
   EX,
   EY,
+  EdgeMap,
   FLAG_ALIVE,
   FLAG_BOTTOM,
   FLAG_LEFT,
@@ -19129,12 +19561,14 @@ export {
   liveComponent,
   liveShapeForDrag,
   liveShapeSubpaths,
+  liveWire,
   loadImageEditorDocument,
   loadMixer,
   loadOpenTypeFont,
   loadWetKernel,
   luma,
   magicWand,
+  magneticAnchorSpacing,
   mapCropHandle,
   mapLayer,
   mapSubpaths,
@@ -19386,13 +19820,16 @@ export {
   shapeOutline,
   shapeRenderClip,
   shiftCoverage,
+  simplifyPixelPath,
   skinToneRange,
   smartFilterRows,
   smartObjectLayers,
   smoothCoverage,
   smoothPoints,
   smudgeEffect,
+  snapPolygonToEdges,
   snapTo45,
+  snapToEdge,
   solidPaint,
   solidSurface,
   solveMembrane,

package/dist/image-editor/selection/gesture.d.cts

@@ -23,6 +23,10 @@ export declare function snapTo45(from: ImagePoint, point: ImagePoint): ImagePoin
  *   adds a free-hand stretch; a double-click, a click on the first corner or Enter (`key`)
  *   closes it, Backspace removes the last corner and Escape cancels. It stays `active` between
  *   clicks, so feed it pointer moves without a button too.
+ * - Magnetic lasso: a click sets the first anchor, then the outline follows the edges from the
+ *   last anchor to the pointer (snapped to the strongest edge within the width) and places
+ *   anchors as it goes (frequency); a click adds one, and closing and the keys are as the
+ *   polygonal lasso's. The first click reads the pixels (async).
  * - Single row / column: a click selects a 1 px line across the image.
  *
  * Shift adds, Alt subtracts, both intersect (overriding the options bar mode). While dragging,
@@ -39,12 +43,15 @@ export declare class SelectionGesture {
     private polygon;
     private pressedAt;
     private freehand;
+    private magnetic;
     /** A click this close to the first corner (natural pixels) closes a polygonal lasso. */
     closeRadius: number;
     /** The last error (e.g. pixels unavailable for the wand), for the UI to show. */
     error: string | null;
     constructor(controller: ImageEditorController, getOptions: () => SelectionToolOptions);
     get active(): boolean;
+    /** The anchors of a Magnetic Lasso being drawn (empty otherwise). */
+    get magneticAnchors(): ImagePoint[];
     /** The outline of the shape being drawn, or `null`. */
     get draftPath(): ImagePoint[] | null;
     /** Pointer down. Resolves once a wand click has been applied. */
@@ -60,6 +67,11 @@ export declare class SelectionGesture {
      * removes the last corner. Returns true when the key was used (the host prevents its default).
      */
     key(key: string): boolean;
+    /** Corridor half-width for a live-wire between two points. */
+    private corridor;
+    private magneticClick;
+    /** Updates the live path to `point`, fixing anchors along it every `frequency` px (with `place`). */
+    private followEdges;
     /** Abandons a drag (or a polygonal lasso) without changing the selection. */
     cancel(): void;
 }

package/dist/image-editor/selection/gesture.d.ts

@@ -23,6 +23,10 @@ export declare function snapTo45(from: ImagePoint, point: ImagePoint): ImagePoin
  *   adds a free-hand stretch; a double-click, a click on the first corner or Enter (`key`)
  *   closes it, Backspace removes the last corner and Escape cancels. It stays `active` between
  *   clicks, so feed it pointer moves without a button too.
+ * - Magnetic lasso: a click sets the first anchor, then the outline follows the edges from the
+ *   last anchor to the pointer (snapped to the strongest edge within the width) and places
+ *   anchors as it goes (frequency); a click adds one, and closing and the keys are as the
+ *   polygonal lasso's. The first click reads the pixels (async).
  * - Single row / column: a click selects a 1 px line across the image.
  *
  * Shift adds, Alt subtracts, both intersect (overriding the options bar mode). While dragging,
@@ -39,12 +43,15 @@ export declare class SelectionGesture {
     private polygon;
     private pressedAt;
     private freehand;
+    private magnetic;
     /** A click this close to the first corner (natural pixels) closes a polygonal lasso. */
     closeRadius: number;
     /** The last error (e.g. pixels unavailable for the wand), for the UI to show. */
     error: string | null;
     constructor(controller: ImageEditorController, getOptions: () => SelectionToolOptions);
     get active(): boolean;
+    /** The anchors of a Magnetic Lasso being drawn (empty otherwise). */
+    get magneticAnchors(): ImagePoint[];
     /** The outline of the shape being drawn, or `null`. */
     get draftPath(): ImagePoint[] | null;
     /** Pointer down. Resolves once a wand click has been applied. */
@@ -60,6 +67,11 @@ export declare class SelectionGesture {
      * removes the last corner. Returns true when the key was used (the host prevents its default).
      */
     key(key: string): boolean;
+    /** Corridor half-width for a live-wire between two points. */
+    private corridor;
+    private magneticClick;
+    /** Updates the live path to `point`, fixing anchors along it every `frequency` px (with `place`). */
+    private followEdges;
     /** Abandons a drag (or a polygonal lasso) without changing the selection. */
     cancel(): void;
 }

package/dist/image-editor/selection/index.d.cts

@@ -12,3 +12,4 @@ export * from './stroke.cjs';
 export * from './channels.cjs';
 export * from './mask-files.cjs';
 export * from './path.cjs';
+export * from './magnetic.cjs';

package/dist/image-editor/selection/index.d.ts

@@ -12,3 +12,4 @@ export * from './stroke.js';
 export * from './channels.js';
 export * from './mask-files.js';
 export * from './path.js';
+export * from './magnetic.js';