@pixerate/editor 0.135.0 → 0.137.0

package/dist/{chunk-HHTCDFZC.js → chunk-3D77LOBM.js}

@@ -1,3 +1,9 @@
+import {
+  BUILTIN_BRUSHES
+} from "./chunk-HUO3TI4C.js";
+import {
+  parseProvenance
+} from "./chunk-A3BVTI3G.js";
 import {
   bezierPathBounds,
   bezierPathToSvg,
@@ -36,6 +42,11 @@ import {
   formatNumber,
   isStraightCubic
 } from "./chunk-KHNZ6MOU.js";
+import {
+  BrushstrokeCache,
+  brushstrokeDataUrl,
+  isBrushstrokeBrush
+} from "./chunk-5FSRTP6E.js";
 import {
   oklabToRgb,
   rgbToOklab
@@ -123,7 +134,8 @@ var VECTOR_TOOLS = [
   "type",
   "typePath",
   "frame",
-  "connector"
+  "connector",
+  "distort"
 ];
 var VECTOR_TRANSFORM_HANDLES = ["nw", "n", "ne", "e", "se", "s", "sw", "w", "rotate"];
 var VECTOR_PATHFINDER_OPERATIONS = ["divide", "trim", "merge", "crop", "outline", "minusBack"];
@@ -2383,6 +2395,193 @@ function vectorStrokeReach(style) {
   return reach;
 }
 
+// src/vector/extrude.ts
+function vectorPaintSolid(paint) {
+  if (paint == null || paint === "none") return null;
+  if (typeof paint === "string") return paint;
+  const stops = paint.stops;
+  if (stops?.length) return stops.reduce((a, b) => Math.abs(b.offset - 0.5) < Math.abs(a.offset - 0.5) ? b : a).color;
+  const colors = paint.colors;
+  if (colors?.length) return colors[0];
+  const points = paint.points;
+  return points?.find((p) => typeof p.color === "string")?.color ?? null;
+}
+function shadeVectorColor(color2, amount) {
+  const c = parseVectorColor(color2);
+  if (!c) return color2;
+  const a = Math.min(1, Math.max(-1, amount));
+  const target = a >= 0 ? 1 : 0;
+  const h = (v2) => Math.round(Math.min(1, Math.max(0, v2)) * 255).toString(16).padStart(2, "0");
+  const m = [0, 1, 2].map((k) => c[k] + (target - c[k]) * Math.abs(a));
+  return `#${h(m[0])}${h(m[1])}${h(m[2])}`;
+}
+function vectorPathRings(path, tolerance = 0.5) {
+  const rings = [];
+  for (const contour of pathToContours(path)) {
+    const ring = flattenChain(closeContour(contour, true), Math.max(1e-3, tolerance));
+    if (ring.length >= 2) rings.push(ring);
+  }
+  return rings;
+}
+function vectorExtrudeFaces(path, params) {
+  const box = bezierPathBounds(path);
+  if (!box || !path.length) return [];
+  const perspective = params.mode === "perspective";
+  const rad2 = params.angle * Math.PI / 180;
+  const d = [Math.cos(rad2) * Math.max(0, params.depth), Math.sin(rad2) * Math.max(0, params.depth)];
+  const vp = [(box.minX + box.maxX) / 2 + params.vanishingPoint.x, (box.minY + box.maxY) / 2 + params.vanishingPoint.y];
+  const pull = Math.min(1, Math.max(0, params.toward / 100));
+  const back = (p) => perspective ? [p[0] + (vp[0] - p[0]) * pull, p[1] + (vp[1] - p[1]) * pull] : [p[0] + d[0], p[1] + d[1]];
+  if (perspective ? pull <= 0 : Math.hypot(d[0], d[1]) < 1e-9) return [];
+  const lr = params.lightAngle * Math.PI / 180;
+  const light = [Math.cos(lr), Math.sin(lr)];
+  const strength = Math.min(1, Math.max(0, params.shading / 100));
+  const u = perspective ? [0, 0] : [d[0] / Math.hypot(d[0], d[1]), d[1] / Math.hypot(d[0], d[1])];
+  const centre = [(box.minX + box.maxX) / 2, (box.minY + box.maxY) / 2];
+  const aim = Math.atan2(centre[1] - vp[1], centre[0] - vp[0]);
+  const across = (p) => {
+    if (!perspective) return -p[0] * u[1] + p[1] * u[0];
+    let a = Math.atan2(p[1] - vp[1], p[0] - vp[0]) - aim;
+    while (a > Math.PI) a -= 2 * Math.PI;
+    while (a <= -Math.PI) a += 2 * Math.PI;
+    return a;
+  };
+  const towardBack = (p, q, l) => {
+    const lp = across(p);
+    const lq = across(q);
+    const t = Math.abs(lq - lp) < 1e-12 ? 0.5 : Math.min(1, Math.max(0, (l - lp) / (lq - lp)));
+    const x = [p[0] + (q[0] - p[0]) * t, p[1] + (q[1] - p[1]) * t];
+    return perspective ? -Math.hypot(vp[0] - x[0], vp[1] - x[1]) : x[0] * u[0] + x[1] * u[1];
+  };
+  const faces = [];
+  for (const ring of vectorPathRings(path, 0.25)) {
+    for (let i = 0; i < ring.length; i++) {
+      const p = ring[i];
+      const q = ring[(i + 1) % ring.length];
+      const ex = q[0] - p[0];
+      const ey = q[1] - p[1];
+      const len2 = Math.hypot(ex, ey);
+      if (len2 < 1e-9) continue;
+      const pb = back(p);
+      const qb = back(q);
+      const mid = [(p[0] + q[0]) / 2, (p[1] + q[1]) / 2];
+      const away = perspective ? [vp[0] - mid[0], vp[1] - mid[1]] : d;
+      let n2 = [ey / len2, -ex / len2];
+      if (n2[0] * away[0] + n2[1] * away[1] < 0) n2 = [-n2[0], -n2[1]];
+      const shade = (n2[0] * light[0] + n2[1] * light[1]) * strength;
+      const lp = across(p);
+      const lq = across(q);
+      faces.push({
+        p,
+        q,
+        lo: Math.min(lp, lq),
+        hi: Math.max(lp, lq),
+        key: towardBack(p, q, (lp + lq) / 2),
+        face: {
+          shade,
+          path: [{ type: "M", x: p[0], y: p[1] }, { type: "L", x: q[0], y: q[1] }, { type: "L", x: qb[0], y: qb[1] }, { type: "L", x: pb[0], y: pb[1] }, { type: "Z" }]
+        }
+      });
+    }
+  }
+  faces.sort((a, b) => a.key - b.key);
+  const n = faces.length;
+  const after = faces.map(() => []);
+  const before = new Array(n).fill(0);
+  const eps = 1e-9;
+  for (let i = 0; i < n; i++) {
+    for (let j = i + 1; j < n; j++) {
+      const lo = Math.max(faces[i].lo, faces[j].lo);
+      const hi = Math.min(faces[i].hi, faces[j].hi);
+      if (hi - lo <= eps * Math.max(1, Math.abs(hi))) continue;
+      const l = (lo + hi) / 2;
+      const di = towardBack(faces[i].p, faces[i].q, l);
+      const dj = towardBack(faces[j].p, faces[j].q, l);
+      if (Math.abs(di - dj) < 1e-9) continue;
+      const [back0, front] = di < dj ? [i, j] : [j, i];
+      after[back0].push(front);
+      before[front]++;
+    }
+  }
+  const order = [];
+  const done = new Array(n).fill(false);
+  let next = 0;
+  while (order.length < n) {
+    let pick = -1;
+    for (let i = next; i < n; i++) {
+      if (!done[i] && before[i] === 0) {
+        pick = i;
+        break;
+      }
+    }
+    if (pick < 0) pick = done.indexOf(false);
+    done[pick] = true;
+    order.push(pick);
+    for (const k of after[pick]) before[k]--;
+    while (next < n && done[next]) next++;
+  }
+  return order.map((i) => faces[i].face);
+}
+
+// src/vector/brushstroke.ts
+var VECTOR_BRUSHSTROKE_SCALE = 2;
+function vectorBrushstrokeBrushes() {
+  return BUILTIN_BRUSHES.filter((b) => isBrushstrokeBrush(b));
+}
+function vectorBrushstrokeBrush(id) {
+  return vectorBrushstrokeBrushes().find((b) => b.id === id) ?? null;
+}
+function sanitizeVectorBrushstroke(value) {
+  if (!value || typeof value !== "object") return null;
+  const r = value;
+  if (typeof r.brushId !== "string" || !vectorBrushstrokeBrush(r.brushId)) return null;
+  const out = { brushId: r.brushId };
+  if (typeof r.size === "number" && Number.isFinite(r.size) && r.size > 0) out.size = Math.min(500, r.size);
+  if (Array.isArray(r.pressure)) {
+    const p = r.pressure.filter((v2) => typeof v2 === "number" && Number.isFinite(v2)).map((v2) => Math.min(1, Math.max(0, v2)));
+    if (p.length) out.pressure = p.slice(0, 64);
+  }
+  return out;
+}
+function isVectorBrushstrokeLayer(layer) {
+  return layer.kind === "brushstroke" && !!layer.brush && !!vectorBrushstrokeBrush(layer.brush.brushId);
+}
+function vectorBrushstrokeReach(layer) {
+  if (!isVectorBrushstrokeLayer(layer)) return 0;
+  return (layer.brush.size ?? vectorBrushstrokeBrush(layer.brush.brushId).tip.size) / 2;
+}
+var cache = new BrushstrokeCache(256);
+var urls = /* @__PURE__ */ new WeakMap();
+var layerCache = /* @__PURE__ */ new WeakMap();
+function vectorBrushstrokeImages(node, layer) {
+  if (!isVectorBrushstrokeLayer(layer)) return [];
+  let byLayer = layerCache.get(node);
+  const hit = byLayer?.get(layer);
+  if (hit) return hit;
+  const preset = vectorBrushstrokeBrush(layer.brush.brushId);
+  const brush = layer.brush.size ? { ...preset, tip: { ...preset.tip, size: layer.brush.size } } : preset;
+  const solid = vectorPaintSolid(layer.paint) ?? "#000000";
+  const c = parseVectorColor(solid) ?? [0, 0, 0, 1];
+  const color2 = [c[0] * 255, c[1] * 255, c[2] * 255, c[3] * 255].map(Math.round);
+  const out = [];
+  for (const sp of node.subpaths) {
+    if (sp.anchors.length < 2) continue;
+    for (const contour of pathToContours(subpathsToBezier([sp]))) {
+      const ring = flattenChain(closeContour(contour, contour.closed), 0.25);
+      if (contour.closed && ring.length > 2) ring.push(ring[0]);
+      if (ring.length < 2) continue;
+      const stroke = cache.render({ points: ring.map(([x, y]) => ({ x, y })), ...layer.brush.pressure ? { pressure: layer.brush.pressure } : {} }, brush, { scale: VECTOR_BRUSHSTROKE_SCALE, color: color2, maxPixels: 2048 * 2048 });
+      if (!stroke.bounds) continue;
+      let href = urls.get(stroke);
+      if (!href) urls.set(stroke, href = brushstrokeDataUrl(stroke));
+      out.push({ href, ...stroke.bounds });
+    }
+  }
+  if (!byLayer) layerCache.set(node, byLayer = /* @__PURE__ */ new Map());
+  byLayer.set(layer, out);
+  return out;
+}
+
 // src/vector/paintLayers.ts
 var VECTOR_STROKE_SETTING_KEYS = [
   "strokeWidth",
@@ -2582,6 +2781,10 @@ function sanitizeVectorStrokeSettings(raw) {
 function sanitizeVectorStrokes(value) {
   if (!Array.isArray(value)) return [];
   return value.filter((l) => !!l && typeof l === "object").map((raw) => {
+    if (raw.kind === "brushstroke") {
+      const brush = sanitizeVectorBrushstroke(raw.brush);
+      if (brush) return { ...sanitizeLayerBase(raw), kind: "brushstroke", brush };
+    }
     if (raw.kind !== void 0 && raw.kind !== "paint") return { ...raw };
     return { ...sanitizeLayerBase(raw), ...sanitizeVectorStrokeSettings(raw) };
   });
@@ -2612,7 +2815,10 @@ function needsVectorPaintLayers(node) {
 }
 function vectorStrokeStackReach(node) {
   let reach = 0;
-  for (const l of vectorPaintLayerNodes(node)) if (l.kind === "stroke" && l.drawn) reach = Math.max(reach, vectorStrokeReach(l.node));
+  for (const l of vectorPaintLayerNodes(node)) {
+    if (l.kind === "stroke" && l.drawn) reach = Math.max(reach, vectorStrokeReach(l.node));
+    else if (l.kind === "stroke" && l.layer.visible !== false) reach = Math.max(reach, vectorBrushstrokeReach(l.layer));
+  }
   return reach;
 }
 function hitTestVectorPaintLayer(node, path, p, tolerance = 0) {
@@ -5556,134 +5762,6 @@ function vectorInstanceGroup(node, bake) {
 }
 var composeVectorMatrices = (a, b) => multiplyMatrices(a, b);
 
-// src/vector/extrude.ts
-function vectorPaintSolid(paint) {
-  if (paint == null || paint === "none") return null;
-  if (typeof paint === "string") return paint;
-  const stops = paint.stops;
-  if (stops?.length) return stops.reduce((a, b) => Math.abs(b.offset - 0.5) < Math.abs(a.offset - 0.5) ? b : a).color;
-  const colors = paint.colors;
-  if (colors?.length) return colors[0];
-  const points = paint.points;
-  return points?.find((p) => typeof p.color === "string")?.color ?? null;
-}
-function shadeVectorColor(color2, amount) {
-  const c = parseVectorColor(color2);
-  if (!c) return color2;
-  const a = Math.min(1, Math.max(-1, amount));
-  const target = a >= 0 ? 1 : 0;
-  const h = (v2) => Math.round(Math.min(1, Math.max(0, v2)) * 255).toString(16).padStart(2, "0");
-  const m = [0, 1, 2].map((k) => c[k] + (target - c[k]) * Math.abs(a));
-  return `#${h(m[0])}${h(m[1])}${h(m[2])}`;
-}
-function vectorPathRings(path, tolerance = 0.5) {
-  const rings = [];
-  for (const contour of pathToContours(path)) {
-    const ring = flattenChain(closeContour(contour, true), Math.max(1e-3, tolerance));
-    if (ring.length >= 2) rings.push(ring);
-  }
-  return rings;
-}
-function vectorExtrudeFaces(path, params) {
-  const box = bezierPathBounds(path);
-  if (!box || !path.length) return [];
-  const perspective = params.mode === "perspective";
-  const rad2 = params.angle * Math.PI / 180;
-  const d = [Math.cos(rad2) * Math.max(0, params.depth), Math.sin(rad2) * Math.max(0, params.depth)];
-  const vp = [(box.minX + box.maxX) / 2 + params.vanishingPoint.x, (box.minY + box.maxY) / 2 + params.vanishingPoint.y];
-  const pull = Math.min(1, Math.max(0, params.toward / 100));
-  const back = (p) => perspective ? [p[0] + (vp[0] - p[0]) * pull, p[1] + (vp[1] - p[1]) * pull] : [p[0] + d[0], p[1] + d[1]];
-  if (perspective ? pull <= 0 : Math.hypot(d[0], d[1]) < 1e-9) return [];
-  const lr = params.lightAngle * Math.PI / 180;
-  const light = [Math.cos(lr), Math.sin(lr)];
-  const strength = Math.min(1, Math.max(0, params.shading / 100));
-  const u = perspective ? [0, 0] : [d[0] / Math.hypot(d[0], d[1]), d[1] / Math.hypot(d[0], d[1])];
-  const centre = [(box.minX + box.maxX) / 2, (box.minY + box.maxY) / 2];
-  const aim = Math.atan2(centre[1] - vp[1], centre[0] - vp[0]);
-  const across = (p) => {
-    if (!perspective) return -p[0] * u[1] + p[1] * u[0];
-    let a = Math.atan2(p[1] - vp[1], p[0] - vp[0]) - aim;
-    while (a > Math.PI) a -= 2 * Math.PI;
-    while (a <= -Math.PI) a += 2 * Math.PI;
-    return a;
-  };
-  const towardBack = (p, q, l) => {
-    const lp = across(p);
-    const lq = across(q);
-    const t = Math.abs(lq - lp) < 1e-12 ? 0.5 : Math.min(1, Math.max(0, (l - lp) / (lq - lp)));
-    const x = [p[0] + (q[0] - p[0]) * t, p[1] + (q[1] - p[1]) * t];
-    return perspective ? -Math.hypot(vp[0] - x[0], vp[1] - x[1]) : x[0] * u[0] + x[1] * u[1];
-  };
-  const faces = [];
-  for (const ring of vectorPathRings(path, 0.25)) {
-    for (let i = 0; i < ring.length; i++) {
-      const p = ring[i];
-      const q = ring[(i + 1) % ring.length];
-      const ex = q[0] - p[0];
-      const ey = q[1] - p[1];
-      const len2 = Math.hypot(ex, ey);
-      if (len2 < 1e-9) continue;
-      const pb = back(p);
-      const qb = back(q);
-      const mid = [(p[0] + q[0]) / 2, (p[1] + q[1]) / 2];
-      const away = perspective ? [vp[0] - mid[0], vp[1] - mid[1]] : d;
-      let n2 = [ey / len2, -ex / len2];
-      if (n2[0] * away[0] + n2[1] * away[1] < 0) n2 = [-n2[0], -n2[1]];
-      const shade = (n2[0] * light[0] + n2[1] * light[1]) * strength;
-      const lp = across(p);
-      const lq = across(q);
-      faces.push({
-        p,
-        q,
-        lo: Math.min(lp, lq),
-        hi: Math.max(lp, lq),
-        key: towardBack(p, q, (lp + lq) / 2),
-        face: {
-          shade,
-          path: [{ type: "M", x: p[0], y: p[1] }, { type: "L", x: q[0], y: q[1] }, { type: "L", x: qb[0], y: qb[1] }, { type: "L", x: pb[0], y: pb[1] }, { type: "Z" }]
-        }
-      });
-    }
-  }
-  faces.sort((a, b) => a.key - b.key);
-  const n = faces.length;
-  const after = faces.map(() => []);
-  const before = new Array(n).fill(0);
-  const eps = 1e-9;
-  for (let i = 0; i < n; i++) {
-    for (let j = i + 1; j < n; j++) {
-      const lo = Math.max(faces[i].lo, faces[j].lo);
-      const hi = Math.min(faces[i].hi, faces[j].hi);
-      if (hi - lo <= eps * Math.max(1, Math.abs(hi))) continue;
-      const l = (lo + hi) / 2;
-      const di = towardBack(faces[i].p, faces[i].q, l);
-      const dj = towardBack(faces[j].p, faces[j].q, l);
-      if (Math.abs(di - dj) < 1e-9) continue;
-      const [back0, front] = di < dj ? [i, j] : [j, i];
-      after[back0].push(front);
-      before[front]++;
-    }
-  }
-  const order = [];
-  const done = new Array(n).fill(false);
-  let next = 0;
-  while (order.length < n) {
-    let pick = -1;
-    for (let i = next; i < n; i++) {
-      if (!done[i] && before[i] === 0) {
-        pick = i;
-        break;
-      }
-    }
-    if (pick < 0) pick = done.indexOf(false);
-    done[pick] = true;
-    order.push(pick);
-    for (const k of after[pick]) before[k]--;
-    while (next < n && done[next]) next++;
-  }
-  return order.map((i) => faces[i].face);
-}
-
 // src/vector/bevel.ts
 var MITER_LIMIT = 4;
 function crossing2(a, b, c, d) {
@@ -8245,6 +8323,7 @@ function vectorDocumentToSvg(doc, options = {}) {
     if (node.resizing) out2 += ` data-vector-resizing="${escapeAttr2(JSON.stringify(node.resizing))}"`;
     if (node.type === "path" && isVectorShadedPaint(node.fill)) out2 += ` data-vector-shading="${escapeAttr2(JSON.stringify(node.fill))}"`;
     if (node.type === "path" && node.connector) out2 += ` data-vector-connector="${escapeAttr2(JSON.stringify(node.connector))}"`;
+    if (node.type === "group" && node.generation) out2 += ` data-vector-generation="${escapeAttr2(JSON.stringify(node.generation))}"`;
     if (node.type === "path" && node.lens) out2 += ` data-vector-lens="${escapeAttr2(JSON.stringify(node.lens))}"`;
     const blend = vectorBlendModeCss(node.blendMode);
     if (blend) out2 += ` style="mix-blend-mode:${blend}"`;
@@ -8308,13 +8387,19 @@ function vectorDocumentToSvg(doc, options = {}) {
     let data = ` data-vector-path="" data-vector-fills="${escapeAttr2(JSON.stringify(vectorFills(node)))}" data-vector-strokes="${escapeAttr2(JSON.stringify(vectorStrokes(node)))}"`;
     if (node.fillRule === "evenodd") data += ` data-vector-fill-rule="evenodd"`;
     lines.push(`${indent(depth)}<g${common(node)}${data}>`);
-    const layers = vectorPaintLayerNodes(node).filter((l) => l.drawn);
+    const layers = vectorPaintLayerNodes(node).filter((l) => l.drawn || l.kind === "stroke" && isVectorBrushstrokeLayer(l.layer) && l.layer.visible !== false);
     let geometry = liveCorners(node);
     if (!layers.some((l) => l.kind === "fill")) {
       lines.push(`${indent(depth + 1)}<path data-vector-part="fill" d="${d}" fill="none"${rule}${geometry}/>`);
       geometry = "";
     }
     for (const l of layers) {
+      if (l.kind === "stroke" && isVectorBrushstrokeLayer(l.layer)) {
+        lines.push(`${indent(depth + 1)}<g data-vector-part="brushstroke" data-vector-layer="${l.index}"${layerAttrs(l.layer)}>`);
+        for (const im of vectorBrushstrokeImages(node, l.layer)) lines.push(`${indent(depth + 2)}<image href="${im.href}" x="${num3(im.x)}" y="${num3(im.y)}" width="${num3(im.width)}" height="${num3(im.height)}" preserveAspectRatio="none"/>`);
+        lines.push(`${indent(depth + 1)}</g>`);
+        continue;
+      }
       const id = `${prefix}${l.kind}-${node.id}-${l.index}`;
       const paint = vectorPaintToSvg(l.layer.paint, id, { node: l.node, precision, ...l.kind === "stroke" ? { role: "stroke" } : {} });
       defs.push(...paintMarkup(l.layer.paint, paint.defs));
@@ -9353,6 +9438,12 @@ function parseVectorSvg(svg, options = {}) {
     if (resizing) meta.resizing = resizing;
     const connector = child.attrs["data-vector-connector"] !== void 0 ? sanitizeVectorConnector(parseJson(child.attrs["data-vector-connector"])) : null;
     if (connector) meta.connector = connector;
+    if (child.attrs["data-vector-generation"] !== void 0) {
+      try {
+        meta.generation = parseProvenance(parseJson(child.attrs["data-vector-generation"]));
+      } catch {
+      }
+    }
     const lens = child.attrs["data-vector-lens"] !== void 0 ? sanitizeVectorLens(parseJson(child.attrs["data-vector-lens"])) : null;
     if (lens) meta.lens = lens;
     if (child.name === "g" && child.attrs["data-vector-frame"] !== void 0) {
@@ -10363,6 +10454,17 @@ export {
   vectorStrokeOutlinePath,
   hitTestVectorStroke,
   vectorStrokeReach,
+  vectorPaintSolid,
+  shadeVectorColor,
+  vectorPathRings,
+  vectorExtrudeFaces,
+  VECTOR_BRUSHSTROKE_SCALE,
+  vectorBrushstrokeBrushes,
+  vectorBrushstrokeBrush,
+  sanitizeVectorBrushstroke,
+  isVectorBrushstrokeLayer,
+  vectorBrushstrokeReach,
+  vectorBrushstrokeImages,
   VECTOR_STROKE_SETTING_KEYS,
   VECTOR_BLEND_MODE_LABELS,
   isVectorBlendMode,
@@ -10526,10 +10628,6 @@ export {
   prefixVectorIds,
   vectorInstanceGroup,
   composeVectorMatrices,
-  vectorPaintSolid,
-  shadeVectorColor,
-  vectorPathRings,
-  vectorExtrudeFaces,
   vectorBevelFaces,
   isVectorLens,
   VECTOR_LENS_LABELS,
@@ -10674,4 +10772,4 @@ export {
   lineSubpath,
   roundSubpaths
 };
-//# sourceMappingURL=chunk-HHTCDFZC.js.map
+//# sourceMappingURL=chunk-3D77LOBM.js.map