@pixerate/editor 0.99.0 → 0.100.0

package/dist/image-editor/index.js

@@ -3198,22 +3198,44 @@ var ImageEditorRenderer = class {
       ctx.save();
       try {
         const scr = (p) => projectImagePoint(p, projection);
-        const outline = t.outline.map(scr);
         ctx.beginPath();
-        outline.forEach((p, i) => i ? ctx.lineTo(p.x, p.y) : ctx.moveTo(p.x, p.y));
-        ctx.closePath();
+        if (t.warp) {
+          for (const c of t.warp.curves) {
+            const [a, b, d, e] = c.map(scr);
+            ctx.moveTo(a.x, a.y);
+            ctx.bezierCurveTo(b.x, b.y, d.x, d.y, e.x, e.y);
+          }
+          for (const h of t.warp.handles) {
+            const a = scr(h.anchor);
+            const q2 = scr(h.point);
+            ctx.moveTo(a.x, a.y);
+            ctx.lineTo(q2.x, q2.y);
+          }
+        } else {
+          const outline = t.outline.map(scr);
+          outline.forEach((p, i) => i ? ctx.lineTo(p.x, p.y) : ctx.moveTo(p.x, p.y));
+          ctx.closePath();
+        }
         ctx.lineWidth = 3;
         ctx.strokeStyle = "rgba(0,0,0,0.5)";
         ctx.stroke();
         ctx.lineWidth = 1;
         ctx.strokeStyle = "#ffffff";
         ctx.stroke();
-        for (const h of t.handles.map(scr)) {
+        for (const h of [...t.handles, ...t.warp?.anchors ?? []].map(scr)) {
           ctx.fillStyle = "#ffffff";
           ctx.strokeStyle = "#1e293b";
           ctx.fillRect(h.x - 4, h.y - 4, 8, 8);
           ctx.strokeRect(h.x - 4, h.y - 4, 8, 8);
         }
+        for (const h of (t.warp?.handles ?? []).map((w) => scr(w.point))) {
+          ctx.beginPath();
+          ctx.arc(h.x, h.y, 3, 0, Math.PI * 2);
+          ctx.fillStyle = "#ffffff";
+          ctx.fill();
+          ctx.strokeStyle = "#1e293b";
+          ctx.stroke();
+        }
         const r = scr(t.reference);
         ctx.beginPath();
         ctx.arc(r.x, r.y, 5, 0, Math.PI * 2);
@@ -15117,7 +15139,17 @@ var FREE_TRANSFORM_MODE_OPTIONS = [
   { id: "rotate", label: "Rotate", title: "Every handle rotates about the reference point" },
   { id: "skew", label: "Skew", title: "Sides slide along themselves" },
   { id: "distort", label: "Distort", title: "Each corner moves freely" },
-  { id: "perspective", label: "Perspective", title: "A corner and its partner move symmetrically" }
+  { id: "perspective", label: "Perspective", title: "A corner and its partner move symmetrically" },
+  { id: "warp", label: "Warp", title: "Bend through a mesh: drag its points or pull inside; presets in the bar" }
+];
+var WARP_STYLE_OPTIONS = [
+  { id: "custom", label: "Custom" },
+  ...WARP_STYLES.map((id) => ({ id, label: WARP_STYLE_LABELS[id] }))
+];
+var WARP_GRID_OPTIONS = [
+  { id: "1x1", label: "Default", columns: 1, rows: 1 },
+  { id: "3x3", label: "3 \xD7 3", columns: 3, rows: 3 },
+  { id: "5x5", label: "5 \xD7 5", columns: 5, rows: 5 }
 ];
 var FREE_TRANSFORM_FIELDS = [
   { id: "x", label: "X", unit: "px", title: "Reference point X (document pixels)" },
@@ -15141,6 +15173,7 @@ var CURSOR = {
   inside: "move",
   outside: "alias"
 };
+var meshIndex = (h) => h && h.startsWith("mesh:") ? Number(h.slice(5)) : -1;
 var mod = (m) => Boolean(m.ctrlKey || m.metaKey);
 var add = (a, b) => ({ x: a.x + b.x, y: a.y + b.y });
 var sub = (a, b) => ({ x: a.x - b.x, y: a.y - b.y });
@@ -15163,6 +15196,15 @@ function insideQuad(q2, p) {
   }
   return true;
 }
+function insidePolygon(poly, p) {
+  let inside = false;
+  for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
+    const a = poly[i];
+    const b = poly[j];
+    if (a.y > p.y !== b.y > p.y && p.x < (b.x - a.x) * (p.y - a.y) / (b.y - a.y) + a.x) inside = !inside;
+  }
+  return inside;
+}
 var FreeTransformTool = class {
   constructor(controller, options = {}) {
     this.controller = controller;
@@ -15176,6 +15218,9 @@ var FreeTransformTool = class {
   refBox = { x: 0, y: 0 };
   corners = null;
   drag = null;
+  /** The warp mesh in the frame's own space (null: no warp). */
+  mesh = null;
+  warpSettings = { style: "custom", bend: 50, horizontal: 0, vertical: 0, orientation: "horizontal", columns: 1, rows: 1 };
   pending = false;
   viewScale = 1;
   viewClip;
@@ -15222,6 +15267,8 @@ var FreeTransformTool = class {
       this.corners = s.geometry.corners;
       this.refBox = { x: s.box.x + s.box.width / 2, y: s.box.y + s.box.height / 2 };
       this.modeValue = "scale";
+      this.mesh = null;
+      this.warpSettings = { style: "custom", bend: 50, horizontal: 0, vertical: 0, orientation: "horizontal", columns: 1, rows: 1 };
       this.typed = {};
       this.error = null;
     } catch (e) {
@@ -15232,7 +15279,39 @@ var FreeTransformTool = class {
   }
   setMode(mode) {
     this.modeValue = mode;
+    const s = this.session;
+    if (mode === "warp" && s && !this.mesh) this.mesh = identityWarpMesh(s.box, this.warpSettings.columns, this.warpSettings.rows);
+    this.changed();
+  }
+  /** The Warp options bar's settings. */
+  warpBar() {
+    return { ...this.warpSettings };
+  }
+  /** The warp mesh (frame space), or null. */
+  get warp() {
+    return this.mesh;
+  }
+  /**
+   * Applies Warp options: a preset `style` with `bend` / `horizontal` / `vertical` (percent) and
+   * `orientation` replaces the mesh; `custom` keeps it; the grid size re-splits it (exactly when it
+   * can). Switches to Warp mode.
+   */
+  setWarp(changes) {
+    const s = this.session;
+    if (!s) return;
+    this.modeValue = "warp";
+    const next = { ...this.warpSettings, ...changes };
+    this.warpSettings = next;
+    let mesh = this.mesh ?? identityWarpMesh(s.box, next.columns, next.rows);
+    if (next.style !== "custom" && ("style" in changes || "bend" in changes || "horizontal" in changes || "vertical" in changes || "orientation" in changes)) {
+      const preset = { style: next.style, bend: next.bend, horizontal: next.horizontal, vertical: next.vertical, orientation: next.orientation };
+      mesh = warpPresetMesh(preset, s.box) ?? identityWarpMesh(s.box);
+      mesh = resizeWarpMesh(mesh, next.columns, next.rows);
+    }
+    if ("columns" in changes || "rows" in changes) mesh = resizeWarpMesh(mesh, next.columns, next.rows);
+    this.mesh = mesh;
     this.changed();
+    this.preview();
   }
   /** Sets the reference point to an anchor of the frame (the options bar's locator). */
   setReference(anchor) {
@@ -15271,12 +15350,54 @@ var FreeTransformTool = class {
       const p = applyHomography(h, { x: s.box.x + fx * s.box.width, y: s.box.y + fy * s.box.height }) ?? { x: 0, y: 0 };
       return { id, x: p.x, y: p.y };
     });
-    return { outline: this.corners.map((p) => ({ x: p.x, y: p.y })), handles, reference: this.referencePoint() ?? { x: 0, y: 0 } };
+    const out = { outline: this.corners.map((p) => ({ x: p.x, y: p.y })), handles, reference: this.referencePoint() ?? { x: 0, y: 0 } };
+    if (this.modeValue === "warp" && this.mesh) {
+      const m = this.mesh;
+      const at = (p) => applyHomography(h, p) ?? p;
+      const pts = m.points.map(at);
+      const edit = warpMeshEditPoints(m);
+      out.handles = [];
+      out.outline = warpMeshGridCurves({ ...m, points: pts }).length ? this.meshOutline(pts, m) : out.outline;
+      out.warp = {
+        curves: warpMeshGridCurves({ ...m, points: pts }),
+        anchors: edit.anchors.map((i) => pts[i]),
+        handles: edit.handles.map((e) => ({ point: pts[e.index], anchor: pts[e.anchor] }))
+      };
+    }
+    return out;
+  }
+  /** The mesh's border anchors, clockwise (for the inside test). */
+  meshOutline(pts, m) {
+    const nx = 3 * (m.us.length - 1) + 1;
+    const ny = 3 * (m.vs.length - 1) + 1;
+    const ring = [];
+    for (let i = 0; i < nx; i++) ring.push(pts[i]);
+    for (let j = 1; j < ny; j++) ring.push(pts[j * nx + nx - 1]);
+    for (let i = nx - 2; i >= 0; i--) ring.push(pts[(ny - 1) * nx + i]);
+    for (let j = ny - 2; j > 0; j--) ring.push(pts[j * nx]);
+    return ring;
   }
   /** What a document point is over (`tolerance` in document pixels: a few screen pixels / scale). */
   hit(p, tolerance) {
     const o = this.overlay();
     if (!o) return null;
+    if (this.modeValue === "warp" && this.mesh) {
+      const h = this.homography();
+      const edit = warpMeshEditPoints(this.mesh);
+      let best2 = -1;
+      let bestD2 = tolerance;
+      for (const i of [...edit.anchors, ...edit.handles.map((e) => e.index)]) {
+        const q2 = applyHomography(h, this.mesh.points[i]);
+        if (!q2) continue;
+        const d = Math.hypot(q2.x - p.x, q2.y - p.y);
+        if (d <= bestD2) {
+          best2 = i;
+          bestD2 = d;
+        }
+      }
+      if (best2 >= 0) return `mesh:${best2}`;
+      return insidePolygon(o.outline, p) ? "inside" : "outside";
+    }
     let best = null;
     let bestD = tolerance;
     for (const h of o.handles) {
@@ -15293,6 +15414,8 @@ var FreeTransformTool = class {
   /** The CSS cursor for a handle. */
   cursor(handle) {
     if (!handle) return "default";
+    if (meshIndex(handle) >= 0) return "pointer";
+    if (this.modeValue === "warp") return handle === "inside" ? "grab" : "default";
     if (this.modeValue === "rotate" && handle !== "inside" && handle !== "reference") return CURSOR.outside;
     return CURSOR[handle];
   }
@@ -15301,9 +15424,24 @@ var FreeTransformTool = class {
     if (!this.session || !this.corners) return null;
     const handle = this.hit(p, tolerance);
     if (!handle) return null;
-    this.drag = { handle, start: { x: p.x, y: p.y }, corners: this.corners, refBox: { ...this.refBox }, ref: this.referencePoint() ?? p };
+    let st = null;
+    if (this.modeValue === "warp" && this.mesh && handle === "inside") {
+      const q2 = this.toFrame(p, this.corners);
+      if (q2) {
+        const r = warpMeshParamAt(this.mesh, q2);
+        st = { s: r.s, t: r.t };
+      }
+    }
+    this.drag = { handle, start: { x: p.x, y: p.y }, corners: this.corners, refBox: { ...this.refBox }, ref: this.referencePoint() ?? p, mesh: this.mesh, st };
     return handle;
   }
+  /** A document point in the frame's own space under `corners`. */
+  toFrame(p, corners) {
+    const s = this.session;
+    const h = s ? rectToQuad(s.box, corners) : null;
+    const inv = h && invertHomography(h);
+    return inv ? applyHomography(inv, p) : null;
+  }
   /** Continues the drag to `p` with the modifiers held now. */
   move(p, m = {}) {
     const d = this.drag;
@@ -15317,6 +15455,20 @@ var FreeTransformTool = class {
       this.changed();
       return;
     }
+    if (this.modeValue === "warp" && d.mesh) {
+      const a = this.toFrame(d.start, d.corners);
+      const b = this.toFrame(p, d.corners);
+      if (!a || !b) return;
+      const delta = { x: b.x - a.x, y: b.y - a.y };
+      const i = meshIndex(d.handle);
+      if (i >= 0) this.mesh = dragWarpMeshPoint(d.mesh, i, delta);
+      else if (d.handle === "inside" && d.st) this.mesh = pullWarpMesh(d.mesh, d.st.s, d.st.t, delta);
+      else return;
+      this.warpSettings = { ...this.warpSettings, style: "custom" };
+      this.changed();
+      this.preview();
+      return;
+    }
     const corners = this.dragCorners(d, p, m);
     if (corners) this.setCorners(corners);
   }
@@ -15415,7 +15567,7 @@ var FreeTransformTool = class {
       this.pending = false;
       const s = this.session;
       if (!s || !this.corners) return;
-      this.run(() => s.update({ corners: this.corners }, { scale: this.viewScale, clip: this.viewClip }));
+      this.run(() => s.update({ corners: this.corners, warp: this.mesh }, { scale: this.viewScale, clip: this.viewClip }));
     };
     if (this.options.schedule) this.options.schedule(run);
     else run();
@@ -15480,12 +15632,13 @@ var FreeTransformTool = class {
     let res = null;
     this.pending = false;
     this.run(() => {
-      if (this.corners) s.update({ corners: this.corners }, false);
+      if (this.corners) s.update({ corners: this.corners, warp: this.mesh }, false);
       res = s.commit();
     });
     this.lastResult = res;
     this.sessionRef = null;
     this.corners = null;
+    this.mesh = null;
     this.drag = null;
     this.changed();
     return res;
@@ -15495,6 +15648,7 @@ var FreeTransformTool = class {
     this.sessionRef?.cancel();
     this.sessionRef = null;
     this.corners = null;
+    this.mesh = null;
     this.drag = null;
     this.pending = false;
     this.error = null;
@@ -15629,8 +15783,10 @@ export {
   TiledSurface,
   TransformTooLargeError,
   VIBRANCE_GREY,
+  WARP_GRID_OPTIONS,
   WARP_STYLES,
   WARP_STYLE_LABELS,
+  WARP_STYLE_OPTIONS,
   XYZ_D50_TO_SRGB,
   ZlibError,
   activeAdjustmentLayers,