@pixerate/editor 0.38.0 → 0.39.0

package/dist/vector/index.js

@@ -8,12 +8,14 @@ import {
   closeContour,
   contourSignedArea,
   contoursToPath,
+  cutOutPiece,
   distanceToBezierPath,
   fitCubicWithTangents,
   fitCubics,
   flattenChain,
   formatNumber,
   gradientToSvgDef,
+  hatchPath,
   isStraightCubic,
   normalizeBezierPath,
   outlineStroke,
@@ -36,7 +38,7 @@ import {
   transformBezierPath,
   trimSegments,
   windingNumber
-} from "../chunk-ZCCU3VNI.js";
+} from "../chunk-3LHWTGHW.js";
 
 // src/vector/types.ts
 var VECTOR_CORNER_KINDS = ["round", "inverted", "chamfer"];
@@ -3815,29 +3817,48 @@ function vectorShapeBuilderMap(entries) {
   });
   const map = PlanarMap.build(inputs);
   if (!map) return null;
-  const pieces = map.chains().filter((c) => lines[c.source] && !c.closed).map((c) => {
-    const path = contoursToPath([{ segments: c.segments, closed: false }]);
-    return { path, segments: c.segments, source: c.source, bounds: bezierPathBounds(path) };
+  let chains = null;
+  const runs = (line2) => (chains ??= map.chains()).filter((c) => lines[c.source] === line2 && !(line2 && c.closed)).map((c) => {
+    const path = contoursToPath([{ segments: c.segments, closed: c.closed }]);
+    return { path, segments: c.segments, closed: c.closed, source: c.source, bounds: bezierPathBounds(path) };
   });
-  return { entries: [...entries], map, lines, pieces };
+  const pieces = lines.some(Boolean) ? runs(true) : [];
+  let edges = null;
+  let size = 0;
+  for (const input of inputs) {
+    const b = bezierPathBounds(input.path);
+    if (b) size = Math.max(size, b.maxX - b.minX, b.maxY - b.minY);
+  }
+  return {
+    entries: [...entries],
+    map,
+    lines,
+    pieces,
+    get edges() {
+      return edges ??= runs(false);
+    },
+    tolerance: 0.2 * Math.max(size / 2e3, 0.25)
+  };
 }
-function vectorShapeBuilderHit(m, p, lineTolerance = null) {
+function pieceNear(pieces, p, tol) {
   const point = [p.x, p.y];
+  let best = null;
+  pieces.forEach((piece, index) => {
+    const b = piece.bounds;
+    if (p.x < b.minX - tol || p.x > b.maxX + tol || p.y < b.minY - tol || p.y > b.maxY + tol) return;
+    const d = distanceToBezierPath(piece.path, point);
+    if (d <= tol && (!best || d < best.d)) best = { index, d };
+  });
+  return best;
+}
+function vectorShapeBuilderHit(m, p, lineTolerance = null) {
   if (lineTolerance !== null && lineTolerance > 0) {
-    let best = -1;
-    let bestD = lineTolerance;
-    m.pieces.forEach((piece, i) => {
-      const b = piece.bounds;
-      if (p.x < b.minX - bestD || p.x > b.maxX + bestD || p.y < b.minY - bestD || p.y > b.maxY + bestD) return;
-      const d = distanceToBezierPath(piece.path, point);
-      if (d <= bestD) {
-        best = i;
-        bestD = d;
-      }
-    });
-    if (best >= 0) return { line: best };
+    const line2 = pieceNear(m.pieces, p, lineTolerance);
+    const edge = pieceNear(m.edges, p, lineTolerance);
+    if (edge && (!line2 || edge.d < line2.d)) return { edge: edge.index };
+    if (line2) return { line: line2.index };
   }
-  const face = m.map.faceAt(point);
+  const face = m.map.faceAt([p.x, p.y]);
   return face >= 0 ? { face } : null;
 }
 function samplePolyline(points, step) {
@@ -3855,7 +3876,7 @@ function samplePolyline(points, step) {
 }
 function addBuilderHit(touched, hit) {
   if (!hit) return false;
-  const [list, i] = "face" in hit ? [touched.faces, hit.face] : [touched.lines, hit.line];
+  const [list, i] = "face" in hit ? [touched.faces, hit.face] : "line" in hit ? [touched.lines, hit.line] : [touched.edges, hit.edge];
   if (list.includes(i)) return false;
   list.push(i);
   return true;
@@ -3868,12 +3889,18 @@ function sides(m, piece) {
   const off = Math.max(1e-6, Math.min(0.05, 0.05 * chord));
   return [m.map.faceAt([mid[0] - t[1] * off, mid[1] + t[0] * off]), m.map.faceAt([mid[0] + t[1] * off, mid[1] - t[0] * off])];
 }
+function vectorBuilderErasedEdges(m, touched) {
+  if (!touched.edges.length) return [];
+  const faces = new Set(touched.faces);
+  return touched.edges.filter((k) => m.edges[k] && !sides(m, m.edges[k]).some((f) => f >= 0 && faces.has(f)));
+}
 function planShapeBuilder(m, touched, erase) {
   const replace = /* @__PURE__ */ new Map();
   const picked = new Set(touched.faces);
   const faces = m.map.faces;
   const sourcesOf = faces.map((_, i) => m.map.faceSources(i));
-  m.entries.forEach((_, i) => {
+  const cuts = erase ? vectorBuilderErasedEdges(m, touched).map((k) => m.edges[k]) : [];
+  m.entries.forEach((entry, i) => {
     if (m.lines[i]) {
       const own = m.pieces.flatMap((piece, k) => piece.source === i ? [k] : []);
       const keep = own.filter((k) => !touched.lines.includes(k) && !sides(m, m.pieces[k]).every((f) => f >= 0 && picked.has(f)));
@@ -3881,10 +3908,24 @@ function planShapeBuilder(m, touched, erase) {
       replace.set(i, keep.length ? { kind: "pieces", paths: keep.map((k) => m.pieces[k].path) } : null);
       return;
     }
-    if (!touched.faces.some((f) => sourcesOf[f].includes(i))) return;
-    const kept = faces.flatMap((_2, f) => sourcesOf[f].includes(i) && !picked.has(f) ? [f] : []);
-    const rest = kept.length ? m.map.merge(kept) : [];
-    replace.set(i, rest.length ? { kind: "fill", path: rest } : null);
+    const inUnion = touched.faces.some((f) => sourcesOf[f].includes(i));
+    if (!inUnion && !cuts.length) return;
+    let rest;
+    if (inUnion) {
+      const kept = faces.flatMap((_, f) => sourcesOf[f].includes(i) && !picked.has(f) ? [f] : []);
+      rest = kept.length ? m.map.merge(kept) : [];
+    } else rest = worldOf(entry, entry.node.subpaths.filter(usable));
+    const fillCloses = hasPaint(entry.node.fill);
+    let cut = false;
+    for (const piece of cuts) {
+      const r = rest.length ? cutOutPiece(rest, piece, fillCloses, m.tolerance) : null;
+      if (r) {
+        rest = r;
+        cut = true;
+      }
+    }
+    if (!inUnion && !cut) return;
+    replace.set(i, rest.length ? { kind: inUnion ? "fill" : "outline", path: rest } : null);
   });
   let merged = null;
   if (!erase && touched.faces.length) {
@@ -5426,20 +5467,23 @@ var VectorEditorController = class {
    * Shape Builder gesture along `points` (document units; one point is a click) over the faces
    * the selected (or given) paths make. Merges the faces touched into one shape styled like the
    * top-most shape over the first face (the current fill for a face only outlines enclose);
-   * with `erase` deletes them, and the pieces of unfilled open paths within `tolerance`. Every
-   * shape covering a touched face loses that area. One undo step.
+   * with `erase` deletes them, the pieces of unfilled open paths and the edges of other outlines
+   * (cut where paths meet) within `tolerance`: a deleted edge opens a closed subpath there,
+   * splits an open one or takes a subpath it runs all the way round, and edges bounding a face
+   * deleted in the same gesture go with the face. Every shape covering a touched face loses
+   * that area; paths keep their own transforms. One undo step.
    */
   shapeBuilder(points, options = {}) {
-    const none = (message) => ({ ok: false, message, merged: null, faces: 0, lines: 0 });
+    const none = (message) => ({ ok: false, message, merged: null, faces: 0, lines: 0, edges: 0 });
     if (!points.length || !points.every((p) => Number.isFinite(p.x) && Number.isFinite(p.y))) return none("Give the points of the gesture.");
     const m = this.shapeBuilderMap(options.ids);
     if (!m) return none("Select paths that make faces.");
     const erase = !!options.erase;
     const tol = erase ? options.tolerance ?? this.builderLineTolerance() : null;
-    const touched = { faces: [], lines: [] };
+    const touched = { faces: [], lines: [], edges: [] };
     const size = m.map.faces.reduce((s, f) => Math.max(s, f.bounds.maxX - f.bounds.minX, f.bounds.maxY - f.bounds.minY), 1);
     for (const p of samplePolyline(points, Math.max(size / 2e3, 0.25 / this.viewport.zoom))) addBuilderHit(touched, vectorShapeBuilderHit(m, p, tol));
-    if (!touched.faces.length && !touched.lines.length) return none("There is no face under the pointer.");
+    if (!touched.faces.length && !touched.lines.length && !touched.edges.length) return none("There is no face under the pointer.");
     return this.applyShapeBuilder(m, touched, erase);
   }
   applyShapeBuilder(m, touched, erase) {
@@ -5455,6 +5499,7 @@ var VectorEditorController = class {
         const r = plan.replace.get(i);
         if (r === void 0) list.push(node);
         else if (r?.kind === "fill") list.push({ ...node, fillRule: "nonzero", subpaths: bezierToSubpaths(toLocal(r.path)) });
+        else if (r?.kind === "outline") list.push({ ...node, subpaths: bezierToSubpaths(toLocal(r.path)) });
         else if (r?.kind === "pieces") {
           r.paths.forEach(
             (path, k) => list.push({ ...node, id: k === 0 ? node.id : this.newId(), subpaths: bezierToSubpaths(toLocal(path)).map((sp) => ({ ...sp, closed: false })) })
@@ -5485,7 +5530,7 @@ var VectorEditorController = class {
       this.editingId = null;
     });
     this.builderCache = null;
-    return { ok: true, merged: mergedId, faces: touched.faces.length, lines: touched.lines.length };
+    return { ok: true, merged: mergedId, faces: touched.faces.length, lines: touched.lines.length, edges: erase ? vectorBuilderErasedEdges(m, touched).length : 0 };
   }
   /** The paint bucket's map of the visible outlines, cached per document and gap. */
   fillMap(gap) {
@@ -5542,7 +5587,9 @@ var VectorEditorController = class {
     const key = hit ? `${alt ? "erase" : "merge"}:${JSON.stringify(hit)}` : null;
     if (key === this.builderHoverKey) return false;
     this.builderHoverKey = key;
-    this.builderPreview = hit && m ? this.builderPreviewOf(m, "face" in hit ? { faces: [hit.face], lines: [] } : { faces: [], lines: [hit.line] }, alt, null) : null;
+    const touched = { faces: [], lines: [], edges: [] };
+    addBuilderHit(touched, hit);
+    this.builderPreview = hit && m ? this.builderPreviewOf(m, touched, alt, null) : null;
     return true;
   }
   builderPreviewOf(m, touched, erase, trail) {
@@ -5550,7 +5597,8 @@ var VectorEditorController = class {
     return {
       mode: erase ? "erase" : "merge",
       faces: touched.faces.map((f) => faces[f].path),
-      lines: touched.lines.map((k) => m.pieces[k].path),
+      // Edges bounding a face touched too go with the face, so they are not shown apart.
+      lines: [...touched.lines.map((k) => m.pieces[k].path), ...erase ? vectorBuilderErasedEdges(m, touched).map((k) => m.edges[k].path) : []],
       trail
     };
   }
@@ -5566,7 +5614,7 @@ var VectorEditorController = class {
     const m = this.selectedRoots().length ? this.shapeBuilderMap() : null;
     if (!m) return;
     const erase = !!input.alt;
-    const touched = { faces: [], lines: [] };
+    const touched = { faces: [], lines: [], edges: [] };
     addBuilderHit(touched, vectorShapeBuilderHit(m, p, erase ? this.builderLineTolerance() : null));
     this.drag = { kind: "builder", erase, points: [p], touched, map: m };
     this.interaction = { type: "builder", mode: erase ? "erase" : "merge", points: [p] };
@@ -5586,7 +5634,7 @@ var VectorEditorController = class {
   upBuilder(drag) {
     this.builderPreview = null;
     this.builderHoverKey = null;
-    if (!drag.touched.faces.length && !drag.touched.lines.length) {
+    if (!drag.touched.faces.length && !drag.touched.lines.length && !drag.touched.edges.length) {
       this.notify();
       return;
     }
@@ -7323,6 +7371,7 @@ function pencilPressureProfile(points, pressures) {
 // src/vector/render.ts
 var fmt = (n) => Math.round(n * 100) / 100;
 var fmtMatrix = (m) => `matrix(${m.map((n) => Math.round(n * 1e6) / 1e6).join(" ")})`;
+var VECTOR_BUILDER_HATCH_GAP = 6;
 function renderNode(node, defs, idPrefix) {
   if (node.visible === false) return null;
   if (node.type === "group") {
@@ -7501,9 +7550,17 @@ function getVectorOverlayRenderData(state) {
   if (state.builder) {
     const v2 = state.viewport;
     const view = [v2.zoom, 0, 0, v2.zoom, v2.x, v2.y];
-    const d = (path) => bezierPathToSvg(transformBezierPath(path, view), { precision: 2 });
+    const svg = (path) => bezierPathToSvg(path, { precision: 2 });
+    const screen = state.builder.faces.map((f) => transformBezierPath(f, view));
+    const hatch = state.builder.mode !== "fill";
     const trail = state.builder.trail && state.builder.trail.length > 1 ? state.builder.trail.map((q, i) => `${i ? "L" : "M"}${sc(q).x} ${sc(q).y}`).join("") : null;
-    builder = { mode: state.builder.mode, faces: state.builder.faces.map(d), lines: state.builder.lines.map(d), trail };
+    builder = {
+      mode: state.builder.mode,
+      faces: screen.map(svg),
+      hatches: screen.map((f) => hatch ? svg(hatchPath(f, { gap: VECTOR_BUILDER_HATCH_GAP })) : ""),
+      lines: state.builder.lines.map((l) => svg(transformBezierPath(l, view))),
+      trail
+    };
     if (state.builder.mode !== "fill" && it?.type === "builder") {
       const n = state.builder.faces.length;
       status = state.builder.mode === "erase" ? `Delete ${n} ${n === 1 ? "face" : "faces"}` : `Merge ${n} ${n === 1 ? "face" : "faces"}`;
@@ -7530,7 +7587,9 @@ var VECTOR_OVERLAY_THEME = {
   builderFill: "rgba(14, 165, 233, 0.22)",
   /** Shape Builder faces and line pieces an Alt gesture deletes. */
   builderErase: "#ef4444",
-  builderEraseFill: "rgba(239, 68, 68, 0.22)"
+  builderEraseFill: "rgba(239, 68, 68, 0.22)",
+  /** Opacity of the hatch lines over Shape Builder faces (drawn in the face's outline colour). */
+  builderHatchOpacity: 0.6
 };
 function vectorDiamondPath(x, y, r = VECTOR_OVERLAY_THEME.widthPointSize) {
   return `M${fmt(x)} ${fmt(y - r)}L${fmt(x + r)} ${fmt(y)}L${fmt(x)} ${fmt(y + r)}L${fmt(x - r)} ${fmt(y)}Z`;
@@ -8006,7 +8065,7 @@ function createVectorCommands(controller, options = {}) {
       id: `${prefix}shapeBuilder`,
       label: "Shape Builder",
       keywords: ["merge faces", "build shape", "combine regions", "delete region"],
-      description: "Shape Builder gesture over the faces of the given paths: `points` is the pointer path in document units (one point is a click; [[x, y], \u2026]; use the points from shapeBuilderFaces). Merges the faces it touches into one shape, or with `erase: true` deletes them and the pieces of unfilled open paths within `tolerance`. Shapes covering those faces lose that area.",
+      description: "Shape Builder gesture over the faces of the given paths: `points` is the pointer path in document units (one point is a click; [[x, y], \u2026]; use the points from shapeBuilderFaces). Merges the faces it touches into one shape, or with `erase: true` deletes them, the pieces of unfilled open paths and the edges of other outlines (cut where paths meet) within `tolerance`; a deleted edge opens its path there, and edges bounding a deleted face go with it. Shapes covering those faces lose that area. Returns the counts of faces, line pieces and edges.",
       params: {
         type: "object",
         properties: { points: POINTS, erase: { type: "boolean" }, tolerance: { type: "number", minimum: 0 }, ids: IDS },
@@ -8016,7 +8075,7 @@ function createVectorCommands(controller, options = {}) {
       run: (_ctx, params) => {
         const result = controller.shapeBuilder(params.points.map(([x, y]) => ({ x, y })), { ids: ids(params), erase: params.erase, tolerance: params.tolerance });
         check(result);
-        return { merged: result.merged, faces: result.faces, lines: result.lines };
+        return { merged: result.merged, faces: result.faces, lines: result.lines, edges: result.edges };
       }
     },
     {
@@ -8331,6 +8390,7 @@ export {
   LazyMouse,
   VECTOR_ARROWHEADS,
   VECTOR_ARROWHEAD_LABELS,
+  VECTOR_BUILDER_HATCH_GAP,
   VECTOR_CLIPBOARD_TYPE,
   VECTOR_CONSTRUCTION_ANGLES,
   VECTOR_CORNER_KINDS,
@@ -8481,6 +8541,7 @@ export {
   unionBounds,
   variableStrokeOutline,
   variableStrokeRings,
+  vectorBuilderErasedEdges,
   vectorCornerAt,
   vectorCorners,
   vectorCornersAttribute,