@pixerate/editor 0.129.0 → 0.130.0

package/dist/{chunk-ROZFX4QI.js → chunk-PRYMC442.js}

@@ -12,6 +12,7 @@ import {
   pathBoolean,
   pathToContours,
   pointInBezierPath,
+  pointInRings,
   polygonBoolean,
   segmentBounds,
   segmentDerivative,
@@ -124,7 +125,7 @@ var VECTOR_TOOLS = [
 ];
 var VECTOR_TRANSFORM_HANDLES = ["nw", "n", "ne", "e", "se", "s", "sw", "w", "rotate"];
 var VECTOR_PATHFINDER_OPERATIONS = ["divide", "trim", "merge", "crop", "outline", "minusBack"];
-var VECTOR_EFFECT_TYPES = ["trim", "roundCorners", "puckerBloat", "twist", "zigzag", "wiggle", "offset", "merge", "repeater", "envelope", "contour", "blockShadow"];
+var VECTOR_EFFECT_TYPES = ["trim", "roundCorners", "puckerBloat", "twist", "zigzag", "wiggle", "offset", "merge", "repeater", "envelope", "contour", "blockShadow", "extrude", "bevel"];
 var VECTOR_MERGE_MODES = ["merge", "add", "subtract", "intersect", "exclude"];
 var VECTOR_FILTER_TYPES = ["dropShadow", "innerShadow", "outerGlow", "innerGlow", "layerBlur", "feather"];
 
@@ -5550,6 +5551,227 @@ 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) {
+  const rx = b[0] - a[0];
+  const ry = b[1] - a[1];
+  const sx = d[0] - c[0];
+  const sy = d[1] - c[1];
+  const den = rx * sy - ry * sx;
+  if (Math.abs(den) < 1e-12) return null;
+  const t = ((c[0] - a[0]) * sy - (c[1] - a[1]) * sx) / den;
+  const u = ((c[0] - a[0]) * ry - (c[1] - a[1]) * rx) / den;
+  return t > 1e-9 && t <= 1 && u >= 0 && u <= 1 ? t : null;
+}
+function vectorBevelFaces(path, params, fillRule = "nonzero") {
+  const width = Math.max(0, params.width);
+  if (!path.length || width <= 0) return [];
+  const rings = vectorPathRings(path, 0.25).filter((r) => r.length >= 3);
+  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 faces = [];
+  for (const ring of rings) {
+    const n = ring.length;
+    let best = 0;
+    let bestLen = -1;
+    for (let i = 0; i < n; i++) {
+      const q = ring[(i + 1) % n];
+      const l = Math.hypot(q[0] - ring[i][0], q[1] - ring[i][1]);
+      if (l > bestLen) [best, bestLen] = [i, l];
+    }
+    if (bestLen < 1e-9) continue;
+    const bp = ring[best];
+    const bq = ring[(best + 1) % n];
+    const left2 = [-(bq[1] - bp[1]) / bestLen, (bq[0] - bp[0]) / bestLen];
+    const probe = Math.min(bestLen / 4, 1e-3 * Math.max(1, bestLen));
+    const sign = pointInRings([(bp[0] + bq[0]) / 2 + left2[0] * probe, (bp[1] + bq[1]) / 2 + left2[1] * probe], rings, fillRule) ? 1 : -1;
+    const normals = ring.map((p, i) => {
+      const q = ring[(i + 1) % n];
+      const l = Math.hypot(q[0] - p[0], q[1] - p[1]);
+      return l < 1e-9 ? null : [-(q[1] - p[1]) / l * sign, (q[0] - p[0]) / l * sign];
+    });
+    const normalAt = (i, step) => {
+      for (let k = 0; k < n; k++) {
+        const v2 = normals[((i + step * k) % n + n) % n];
+        if (v2) return v2;
+      }
+      return [0, 0];
+    };
+    const inset = ring.map((p, i) => {
+      const a = normalAt(i - 1, -1);
+      const b = normalAt(i, 1);
+      let bx = a[0] + b[0];
+      let by = a[1] + b[1];
+      const bl = Math.hypot(bx, by);
+      if (bl < 1e-9) [bx, by] = [b[0], b[1]];
+      else [bx, by] = [bx / bl, by / bl];
+      const cos = bx * b[0] + by * b[1];
+      let len2 = width / Math.max(cos, 1 / MITER_LIMIT);
+      const end = [p[0] + bx * len2, p[1] + by * len2];
+      let t = 1;
+      for (const other of rings) {
+        const m = other.length;
+        for (let j = 0; j < m; j++) {
+          const c = other[j];
+          const d = other[(j + 1) % m];
+          if (c === p || d === p) continue;
+          const hit = crossing2(p, end, c, d);
+          if (hit !== null && hit < t) t = hit;
+        }
+      }
+      if (t < 1) len2 *= t / 2;
+      return [p[0] + bx * len2, p[1] + by * len2];
+    });
+    for (let i = 0; i < n; i++) {
+      const nrm = normals[i];
+      if (!nrm) continue;
+      const j = (i + 1) % n;
+      const shade = (-nrm[0] * light[0] - nrm[1] * light[1]) * strength;
+      faces.push({
+        shade,
+        path: [
+          { type: "M", x: ring[i][0], y: ring[i][1] },
+          { type: "L", x: ring[j][0], y: ring[j][1] },
+          { type: "L", x: inset[j][0], y: inset[j][1] },
+          { type: "L", x: inset[i][0], y: inset[i][1] },
+          { type: "Z" }
+        ]
+      });
+    }
+  }
+  return faces;
+}
+
 // src/geom/warp.ts
 var WARP_STYLES = [
   "arc",
@@ -6269,7 +6491,9 @@ var VECTOR_EFFECT_DEFAULTS = {
   },
   envelope: { style: "arc", bend: 50, horizontal: 0, vertical: 0, orientation: "horizontal", rows: 2, columns: 2, mesh: null },
   contour: { direction: "inside", steps: 4, offset: 6, join: "round", miterLimit: 4, fillColor: "#ffffff", strokeColor: null, acceleration: 0 },
-  blockShadow: { angle: 45, distance: 20, color: "#1e293b", opacity: 100, endOpacity: 100 }
+  blockShadow: { angle: 45, distance: 20, color: "#1e293b", opacity: 100, endOpacity: 100 },
+  extrude: { mode: "parallel", angle: 45, depth: 30, vanishingPoint: { x: 0, y: -300 }, toward: 30, color: null, lightAngle: -135, shading: 60 },
+  bevel: { width: 8, lightAngle: -135, shading: 60, color: null }
 };
 var VECTOR_EFFECT_LABELS = {
   trim: "Trim Paths",
@@ -6283,7 +6507,9 @@ var VECTOR_EFFECT_LABELS = {
   repeater: "Repeater",
   envelope: "Envelope",
   contour: "Contour",
-  blockShadow: "Block Shadow"
+  blockShadow: "Block Shadow",
+  extrude: "Extrude",
+  bevel: "Bevel"
 };
 var VECTOR_EFFECT_PARAM_SPECS = {
   trim: [
@@ -6385,6 +6611,30 @@ var VECTOR_EFFECT_PARAM_SPECS = {
     { key: "opacity", label: "Opacity %", kind: "number", min: 0, max: 100, step: 1, slider: true },
     { key: "endOpacity", label: "End opacity %", kind: "number", min: 0, max: 100, step: 1, slider: true }
   ],
+  extrude: [
+    {
+      key: "mode",
+      label: "Mode",
+      kind: "select",
+      options: [
+        { value: "parallel", label: "Parallel" },
+        { value: "perspective", label: "Perspective" }
+      ]
+    },
+    { key: "angle", label: "Angle \xB0", kind: "number", min: -360, max: 360, step: 1, slider: true },
+    { key: "depth", label: "Depth", kind: "number", min: 0, max: 2e3, step: 1, slider: true },
+    { key: "vanishingPoint", label: "Vanishing point", kind: "vec2", step: 1 },
+    { key: "toward", label: "Toward VP %", kind: "number", min: 0, max: 100, step: 1, slider: true },
+    { key: "color", label: "Colour", kind: "color" },
+    { key: "lightAngle", label: "Light \xB0", kind: "number", min: -360, max: 360, step: 1, slider: true },
+    { key: "shading", label: "Shading %", kind: "number", min: 0, max: 100, step: 1, slider: true }
+  ],
+  bevel: [
+    { key: "width", label: "Width", kind: "number", min: 0, max: 500, step: 0.5, slider: true },
+    { key: "lightAngle", label: "Light \xB0", kind: "number", min: -360, max: 360, step: 1, slider: true },
+    { key: "shading", label: "Shading %", kind: "number", min: 0, max: 100, step: 1, slider: true },
+    { key: "color", label: "Colour", kind: "color" }
+  ],
   repeater: [
     { key: "copies", label: "Copies", kind: "number", min: 0, max: 50, step: 0.1, slider: true },
     { key: "offset", label: "Offset", kind: "number", min: -10, max: 10, step: 0.1, slider: true },
@@ -6701,6 +6951,43 @@ function blockShadowShapes(shapes, b) {
   }
   return [...shadows, ...shapes.map((s) => ({ ...s, order: [1, ...s.order] }))];
 }
+function extrudeShapes(shapes, x) {
+  const out = [];
+  for (const s of shapes) {
+    const base = x.color ?? vectorPaintSolid(s.source.fill) ?? "#808080";
+    vectorExtrudeFaces(s.path, x).forEach((f, k) => {
+      const color2 = shadeVectorColor(base, f.shade);
+      const source = { ...s.source, fill: color2, stroke: color2, strokeWidth: 0.5, strokeLinejoin: "round", strokeAlign: void 0, fills: void 0, strokes: void 0, fillRule: "nonzero", startArrow: void 0, endArrow: void 0, strokeDasharray: void 0, strokeWidthProfile: void 0, filters: void 0 };
+      out.push({ source, path: f.path, opacity: s.opacity, order: [...s.order, 0, k] });
+    });
+    out.push({ ...s, order: [...s.order, 1] });
+  }
+  return out;
+}
+function bevelShapes(shapes, b) {
+  const out = [];
+  for (const s of shapes) {
+    const fillRule = s.source.fillRule === "evenodd" ? "evenodd" : "nonzero";
+    const faces = vectorBevelFaces(s.path, b, fillRule);
+    if (!faces.length) {
+      out.push(s);
+      continue;
+    }
+    const base = b.color ?? vectorPaintSolid(s.source.fill) ?? "#808080";
+    const fillOnly = { ...s.source, stroke: null, strokes: void 0 };
+    out.push({ ...s, source: fillOnly, order: [...s.order, 0] });
+    faces.forEach((f, k) => {
+      const color2 = shadeVectorColor(base, f.shade);
+      const source = { ...s.source, fill: color2, stroke: color2, strokeWidth: 0.5, strokeLinejoin: "round", strokeAlign: void 0, fills: void 0, strokes: void 0, fillRule: "nonzero", startArrow: void 0, endArrow: void 0, strokeDasharray: void 0, strokeWidthProfile: void 0, filters: void 0 };
+      out.push({ source, path: f.path, opacity: s.opacity, order: [...s.order, 1, k] });
+    });
+    const [middle] = offsetPaths([s.path], -b.width, "miter", 4, 1, 0);
+    if (middle?.length) out.push({ ...s, source: fillOnly, path: middle, order: [...s.order, 2] });
+    const hasStroke = s.source.strokes?.length || s.source.stroke != null && s.source.stroke !== "none";
+    if (hasStroke) out.push({ ...s, source: { ...s.source, fill: null, fills: void 0 }, order: [...s.order, 3] });
+  }
+  return out;
+}
 function applyVectorEffects(shapes, effects) {
   let list = shapes.slice();
   for (const e of effects ?? []) {
@@ -6747,6 +7034,12 @@ function applyVectorEffects(shapes, effects) {
       case "blockShadow":
         list = blockShadowShapes(list, e.params);
         break;
+      case "extrude":
+        list = extrudeShapes(list, e.params);
+        break;
+      case "bevel":
+        list = bevelShapes(list, e.params);
+        break;
       case "repeater": {
         const r = e.params;
         const copies = repeatPaths(
@@ -9909,6 +10202,11 @@ export {
   prefixVectorIds,
   vectorInstanceGroup,
   composeVectorMatrices,
+  vectorPaintSolid,
+  shadeVectorColor,
+  vectorPathRings,
+  vectorExtrudeFaces,
+  vectorBevelFaces,
   WARP_STYLES,
   WARP_STYLE_LABELS,
   warpPresetGrid,
@@ -10037,4 +10335,4 @@ export {
   lineSubpath,
   roundSubpaths
 };
-//# sourceMappingURL=chunk-ROZFX4QI.js.map
+//# sourceMappingURL=chunk-PRYMC442.js.map