@pixerate/editor 0.130.0 → 0.132.0

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

@@ -74,6 +74,7 @@ var VECTOR_BLEND_MODES = [
 ];
 var VECTOR_HORIZONTAL_RESIZING = ["left", "right", "leftRight", "center", "scale"];
 var VECTOR_VERTICAL_RESIZING = ["top", "bottom", "topBottom", "center", "scale"];
+var VECTOR_LENS_TYPES = ["transparency", "magnify", "fisheye", "brighten", "invert", "tintedGrayscale", "colorAdd", "colorLimit", "heatMap", "wireframe"];
 var VECTOR_CONNECTOR_SIDES = ["auto", "top", "right", "bottom", "left", "center"];
 var VECTOR_CONNECTOR_ROUTES = ["straight", "elbow", "curved"];
 var VECTOR_BLEND_SPACINGS = ["steps", "distance", "smoothColor"];
@@ -5772,6 +5773,237 @@ function vectorBevelFaces(path, params, fillRule = "nonzero") {
   return faces;
 }
 
+// src/vector/lens.ts
+function isVectorLens(node) {
+  return !!node && node.type === "path" && !!node.lens && VECTOR_LENS_TYPES.includes(node.lens.type);
+}
+var VECTOR_LENS_LABELS = {
+  transparency: "Transparency",
+  magnify: "Magnify",
+  fisheye: "Fish Eye",
+  brighten: "Brighten",
+  invert: "Invert",
+  tintedGrayscale: "Tinted Grayscale",
+  colorAdd: "Color Add",
+  colorLimit: "Color Limit",
+  heatMap: "Heat Map",
+  wireframe: "Wireframe"
+};
+var VECTOR_LENS_SPECS = {
+  transparency: { min: 0, max: 100, amount: 50, color: null, unit: "percent see-through" },
+  magnify: { min: 1, max: 20, amount: 2, color: null, unit: "times" },
+  fisheye: { min: -100, max: 100, amount: 50, color: null, unit: "percent, negative pinches" },
+  brighten: { min: -100, max: 100, amount: 40, color: null, unit: "percent, negative darkens" },
+  invert: { min: 0, max: 100, amount: 100, color: null, unit: "percent strength" },
+  tintedGrayscale: { min: 0, max: 100, amount: 100, color: "#b45309", unit: "percent strength" },
+  colorAdd: { min: 0, max: 100, amount: 50, color: "#ff0000", unit: "percent of the colour added" },
+  colorLimit: { min: 0, max: 100, amount: 100, color: "#22c55e", unit: "percent strength" },
+  heatMap: { min: 0, max: 100, amount: 0, color: null, unit: "percent the palette is turned" },
+  wireframe: { min: 0, max: 100, amount: 100, color: "#0f172a", unit: "percent outline opacity" }
+};
+function sanitizeVectorLens(value) {
+  if (!value || typeof value !== "object") return null;
+  const r = value;
+  if (typeof r.type !== "string" || !VECTOR_LENS_TYPES.includes(r.type)) return null;
+  const type = r.type;
+  const spec = VECTOR_LENS_SPECS[type];
+  const amount = typeof r.amount === "number" && Number.isFinite(r.amount) ? Math.min(spec.max, Math.max(spec.min, r.amount)) : spec.amount;
+  const out = { type, amount };
+  if (spec.color !== null) out.color = typeof r.color === "string" && parseVectorColor(r.color) ? r.color : spec.color;
+  return out;
+}
+var hex22 = (v2) => Math.round(Math.min(1, Math.max(0, v2)) * 255).toString(16).padStart(2, "0");
+var formatRgba = (c) => c[3] >= 1 ? `#${hex22(c[0])}${hex22(c[1])}${hex22(c[2])}` : `rgba(${Math.round(c[0] * 255)}, ${Math.round(c[1] * 255)}, ${Math.round(c[2] * 255)}, ${Math.round(c[3] * 1e3) / 1e3})`;
+var luma = (c) => 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+var mix = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t, a[3]];
+var HEAT = [
+  [0, "#1e1b4b"],
+  [0.25, "#2563eb"],
+  [0.5, "#22c55e"],
+  [0.7, "#facc15"],
+  [0.85, "#f97316"],
+  [1, "#dc2626"]
+];
+var heatAt = (t) => {
+  const u = (t % 1 + 1) % 1;
+  for (let i = 1; i < HEAT.length; i++) {
+    if (u <= HEAT[i][0]) {
+      const a = parseVectorColor(HEAT[i - 1][1]);
+      const b = parseVectorColor(HEAT[i][1]);
+      const k = (u - HEAT[i - 1][0]) / (HEAT[i][0] - HEAT[i - 1][0]);
+      return [0, 1, 2].map((c) => a[c] + (b[c] - a[c]) * k);
+    }
+  }
+  return parseVectorColor(HEAT[HEAT.length - 1][1]).slice(0, 3);
+};
+function vectorLensColorMap(lens) {
+  const tint = parseVectorColor(lens.color ?? "#000000") ?? [0, 0, 0, 1];
+  const s = Math.min(1, Math.max(0, lens.amount / 100));
+  switch (lens.type) {
+    case "brighten": {
+      const a = Math.min(1, Math.max(-1, lens.amount / 100));
+      return (c) => a >= 0 ? mix(c, [1, 1, 1], a) : mix(c, [0, 0, 0], -a);
+    }
+    case "invert":
+      return (c) => mix(c, [1 - c[0], 1 - c[1], 1 - c[2]], s);
+    case "tintedGrayscale":
+      return (c) => {
+        const l = luma(c);
+        const duo = l < 0.5 ? [tint[0] * 2 * l, tint[1] * 2 * l, tint[2] * 2 * l] : [0, 1, 2].map((k) => tint[k] + (1 - tint[k]) * (2 * l - 1));
+        return mix(c, duo, s);
+      };
+    case "colorAdd":
+      return (c) => [Math.min(1, c[0] + tint[0] * s), Math.min(1, c[1] + tint[1] * s), Math.min(1, c[2] + tint[2] * s), c[3]];
+    case "colorLimit":
+      return (c) => [c[0] * (1 - s + s * tint[0]), c[1] * (1 - s + s * tint[1]), c[2] * (1 - s + s * tint[2]), c[3]];
+    case "heatMap":
+      return (c) => [...heatAt(luma(c) + lens.amount / 100), c[3]];
+    default:
+      return null;
+  }
+}
+function mapVectorPaintColors(paint, f) {
+  const one = (color2) => {
+    const c = parseVectorColor(color2);
+    return c ? formatRgba(f(c)) : color2;
+  };
+  if (paint == null || paint === "none") return paint;
+  if (typeof paint === "string") return one(paint);
+  const p = paint;
+  const out = { ...p };
+  if (Array.isArray(p.stops)) out.stops = p.stops.map((s) => ({ ...s, color: one(s.color) }));
+  if (Array.isArray(p.colors)) out.colors = p.colors.map(one);
+  if (Array.isArray(p.points)) out.points = p.points.map((q) => typeof q.color === "string" ? { ...q, color: one(q.color) } : q);
+  return out;
+}
+var drawnCache2 = /* @__PURE__ */ new WeakMap();
+var STYLE_OFF = { effects: void 0, transform: void 0, opacity: void 0, blendMode: void 0, filters: void 0, lens: void 0, lensView: void 0, connector: void 0 };
+function shapePath(shape, id, path, extra = {}) {
+  const { id: _i, subpaths: _s, booleanOperation: _b, blendStep: _bs, locked: _l, visible: _v, ...style } = shape.source;
+  return { ...style, ...STYLE_OFF, id, type: "path", subpaths: bezierToSubpaths(path), ...shape.opacity < 1 ? { opacity: shape.opacity } : {}, ...extra };
+}
+function vectorLensDrawn(node) {
+  const hit = drawnCache2.get(node);
+  if (hit) return hit;
+  const { lens } = node;
+  const own = subpathsToBezier(node.subpaths);
+  const box = bezierPathBounds(own);
+  const children = [];
+  if (box && lens.type !== "transparency") {
+    const c = { x: (box.minX + box.maxX) / 2, y: (box.minY + box.maxY) / 2 };
+    const inv = node.transform && !isIdentityMatrix(node.transform) ? invertMatrix(node.transform) : null;
+    const k = lens.type === "magnify" ? Math.max(1, lens.amount) : 1;
+    const reach = { minX: c.x - (c.x - box.minX) / k, maxX: c.x + (box.maxX - c.x) / k, minY: c.y - (c.y - box.minY) / k, maxY: c.y + (box.maxY - c.y) / k };
+    let map = null;
+    if (lens.type === "magnify") {
+      const m = [k, 0, 0, k, c.x * (1 - k), c.y * (1 - k)];
+      map = (p) => transformBezierPath(p, m);
+    } else if (lens.type === "fisheye") {
+      const a = Math.min(100, Math.max(-100, lens.amount));
+      const gamma = a >= 0 ? 1 / (1 + a / 25) : 1 - a / 25;
+      const rx = Math.max(1e-9, (box.maxX - box.minX) / 2);
+      const ry = Math.max(1e-9, (box.maxY - box.minY) / 2);
+      const warp = (p) => {
+        const dx = (p.x - c.x) / rx;
+        const dy = (p.y - c.y) / ry;
+        const u = Math.hypot(dx, dy);
+        if (u >= 1 || u < 1e-12) return p;
+        const f = u ** gamma / u;
+        return { x: c.x + dx * f * rx, y: c.y + dy * f * ry };
+      };
+      map = (p) => mapBezierPath(p, warp, 0.25);
+    }
+    const recolour = vectorLensColorMap(lens);
+    const wire = lens.type === "wireframe" ? lens.color ?? "#000000" : null;
+    const contents = [];
+    (node.lensView ?? []).forEach((below, i) => {
+      for (const shape of vectorChildAppearanceShapes(below, i)) {
+        const path = inv ? transformBezierPath(shape.path, inv) : shape.path;
+        const b = bezierPathBounds(path);
+        if (!b || b.maxX < reach.minX || b.minX > reach.maxX || b.maxY < reach.minY || b.minY > reach.maxY) continue;
+        const id = `${node.id}~lens${contents.length}`;
+        const changed = map ? map(path) : path;
+        if (wire) {
+          contents.push(shapePath(shape, id, changed, { fill: null, fills: void 0, stroke: wire, strokes: void 0, strokeWidth: 1, strokeAlign: void 0, strokeDasharray: void 0, strokeWidthProfile: void 0, opacity: Math.min(1, Math.max(0, lens.amount / 100)) }));
+        } else if (recolour) {
+          const fills = shape.source.fills?.map((l) => ({ ...l, paint: mapVectorPaintColors(l.paint, recolour) ?? null }));
+          const strokes = shape.source.strokes?.map((l) => ({ ...l, paint: mapVectorPaintColors(l.paint, recolour) ?? null }));
+          contents.push(shapePath(shape, id, changed, { fill: mapVectorPaintColors(shape.source.fill, recolour) ?? null, stroke: mapVectorPaintColors(shape.source.stroke, recolour) ?? null, ...fills ? { fills } : {}, ...strokes ? { strokes } : {} }));
+        } else contents.push(shapePath(shape, id, changed));
+      }
+    });
+    if (contents.length) {
+      const outline = { id: `${node.id}~lens-clip`, type: "path", subpaths: node.subpaths, fill: "#000000", stroke: null, ...node.fillRule ? { fillRule: node.fillRule } : {} };
+      children.push({ id: `${node.id}~lens-view`, type: "group", mask: { type: "clip" }, children: [outline, ...contents] });
+    }
+  }
+  const { lens: _l, lensView: _v, transform: _t, opacity: _o, effects: _e, blendMode: _bm, filters: _f, ...style } = node;
+  const fillOpacity = lens.type === "transparency" ? 1 - Math.min(100, Math.max(0, lens.amount)) / 100 : 0;
+  children.push({ ...style, id: `${node.id}~lens-fill`, stroke: null, strokes: void 0, opacity: fillOpacity });
+  const stroked = (node.strokes?.length ?? 0) > 0 || node.stroke != null && node.stroke !== "none";
+  if (stroked) children.push({ ...style, id: `${node.id}~lens-stroke`, fill: null, fills: void 0 });
+  const out = {
+    id: node.id,
+    type: "group",
+    ...node.name !== void 0 ? { name: node.name } : {},
+    ...node.transform ? { transform: node.transform } : {},
+    ...node.opacity !== void 0 ? { opacity: node.opacity } : {},
+    ...node.blendMode ? { blendMode: node.blendMode } : {},
+    ...node.filters?.length ? { filters: node.filters } : {},
+    children
+  };
+  drawnCache2.set(node, out);
+  return out;
+}
+var sameMatrix = (a, b) => !a && !b || !!a && !!b && a.every((v2, i) => Math.abs(v2 - b[i]) < 1e-12);
+function sameView(a, b) {
+  if (!a || a.length !== b.length) return false;
+  return a.every((n, i) => {
+    const m = b[i];
+    if (n === m) return true;
+    return n.type === "group" && m.type === "group" && n.id === m.id && n.id.endsWith("~below") && sameMatrix(n.transform, m.transform) && sameView(n.children, m.children);
+  });
+}
+function hasLens(nodes) {
+  return nodes.some((n) => isVectorLens(n) || n.type === "group" && hasLens(n.children));
+}
+function resolveVectorLenses(doc) {
+  if (!hasLens(doc.nodes)) return doc;
+  let changed = false;
+  const walk = (list, outer, depth) => {
+    const below = outer.slice();
+    const out = list.map((n) => {
+      let next = n;
+      if (isVectorLens(n)) {
+        if (!sameView(n.lensView, below)) next = { ...n, lensView: below.slice() };
+      } else if (n.type === "group" && hasLens(n.children)) {
+        const m = n.transform && !isIdentityMatrix(n.transform) ? invertMatrix(n.transform) : null;
+        const inner = below.length ? m ? [{ id: `${n.id}:${depth}~below`, type: "group", transform: m, children: below.slice() }] : below.slice() : [];
+        const children = walk(n.children, inner, depth + 1);
+        if (children !== n.children) next = { ...n, children };
+      }
+      if (next !== n) changed = true;
+      below.push(next);
+      return next;
+    });
+    return out.some((n, i) => n !== list[i]) ? out : list;
+  };
+  const nodes = walk(doc.nodes, [], 0);
+  return changed ? { ...doc, nodes } : doc;
+}
+function stripVectorLensViews(doc) {
+  if (!hasLens(doc.nodes)) return doc;
+  const strip2 = (list) => list.map((n) => {
+    if (n.type === "path" && n.lensView) {
+      const { lensView: _v, ...rest } = n;
+      return rest;
+    }
+    if (n.type === "group") return { ...n, children: strip2(n.children) };
+    return n;
+  });
+  return { ...doc, nodes: strip2(doc.nodes) };
+}
+
 // src/geom/warp.ts
 var WARP_STYLES = [
   "arc",
@@ -6750,7 +6982,7 @@ function activeVectorEffects(node) {
   return node.effects?.filter(isEnabled) ?? [];
 }
 function hasOwnVectorAppearance(node) {
-  return node.type === "text" || node.type === "instance" || node.type === "group" && !!node.liveBoolean || isVectorFrame(node) || isVectorSymmetryGroup(node) || !!node.effects?.some(isEnabled);
+  return node.type === "text" || node.type === "instance" || node.type === "group" && !!node.liveBoolean || isVectorFrame(node) || isVectorSymmetryGroup(node) || isVectorLens(node) || !!node.effects?.some(isEnabled);
 }
 var liveCache = /* @__PURE__ */ new WeakMap();
 function hasVectorAppearance(node) {
@@ -7196,8 +7428,8 @@ function expandVectorAppearance(node) {
     expandCache.set(node, [vectorTextShaperGeneration(), drawn]);
     return drawn;
   }
-  if (isVectorFrame(node) || isVectorSymmetryGroup(node)) {
-    const drawn = isVectorFrame(node) ? vectorFrameDrawn(node) : vectorSymmetryDrawn(node);
+  if (isVectorFrame(node) || isVectorSymmetryGroup(node) || isVectorLens(node)) {
+    const drawn = isVectorFrame(node) ? vectorFrameDrawn(node) : isVectorLens(node) ? vectorLensDrawn(node) : vectorSymmetryDrawn(node);
     const out2 = hasVectorAppearance(drawn) ? expandVectorAppearance(drawn) : drawn;
     expandCache.set(node, [vectorTextShaperGeneration(), out2]);
     return out2;
@@ -7912,7 +8144,7 @@ function blendFromAttribute(value, m) {
   return out;
 }
 function vectorDocumentToSvg(doc, options = {}) {
-  doc = resolveVectorSymbols(doc);
+  doc = resolveVectorLenses(resolveVectorSymbols(doc));
   const precision = options.precision ?? 3;
   const prefix = options.idPrefix ?? "vg-";
   const pretty = options.pretty !== false;
@@ -7931,6 +8163,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 === "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}"`;
     if (node.filters?.length) {
@@ -8202,11 +8435,11 @@ function vectorDocumentToSvg(doc, options = {}) {
       };
       lines.push(`${indent(depth)}<g${common(node)} data-vector-live="${escapeAttr2(JSON.stringify(live2))}">`);
       lines.push(`${indent(depth + 1)}<g data-vector-part="appearance">`);
-      for (const shape of vectorAppearanceNodes(node)) emit2(shape, depth + 2);
+      for (const shape of isVectorLens(node) ? vectorLensDrawn(node).children : vectorAppearanceNodes(node)) emit2(shape, depth + 2);
       lines.push(`${indent(depth + 1)}</g>`);
       lines.push(`${indent(depth + 1)}<g data-vector-part="source" display="none">`);
       if (node.type === "path") {
-        const { effects: _e, transform: _t, opacity: _o, visible: _v, booleanOperation: _b, blendStep: _s, blendMode: _bm, filters: _f, ...source } = node;
+        const { effects: _e, transform: _t, opacity: _o, visible: _v, booleanOperation: _b, blendStep: _s, blendMode: _bm, filters: _f, lens: _l, lensView: _lv, ...source } = node;
         emit2({ ...source, id: `${node.id}~src` }, depth + 2);
       } else for (const child of node.children) emit2(child, depth + 2);
       lines.push(`${indent(depth + 1)}</g>`);
@@ -9033,6 +9266,8 @@ 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;
+    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) {
       const node2 = frameGroup(child, s, m, meta);
       if (node2) out.push(node2);
@@ -9811,14 +10046,14 @@ function renamed(node, k) {
   if (node.type === "group") return { ...node, id, children: node.children.map((c) => renamed(c, k)) };
   return { ...node, id };
 }
-var drawnCache2 = /* @__PURE__ */ new WeakMap();
+var drawnCache3 = /* @__PURE__ */ new WeakMap();
 function vectorSymmetryDrawn(node) {
-  let hit = drawnCache2.get(node);
+  let hit = drawnCache3.get(node);
   if (hit) return hit;
   const { symmetry, ...group } = node;
   const copies = vectorSymmetryMatrices(symmetry).flatMap((m, k) => node.children.map((c) => ({ ...renamed(transformVectorNode(c, m), k + 1), locked: true })));
   hit = { ...group, children: [...node.children, ...copies] };
-  drawnCache2.set(node, hit);
+  drawnCache3.set(node, hit);
   return hit;
 }
 function vectorSymmetryAxes(s, box) {
@@ -9907,6 +10142,7 @@ export {
   VECTOR_BLEND_MODES,
   VECTOR_HORIZONTAL_RESIZING,
   VECTOR_VERTICAL_RESIZING,
+  VECTOR_LENS_TYPES,
   VECTOR_CONNECTOR_SIDES,
   VECTOR_CONNECTOR_ROUTES,
   VECTOR_BLEND_SPACINGS,
@@ -10207,6 +10443,15 @@ export {
   vectorPathRings,
   vectorExtrudeFaces,
   vectorBevelFaces,
+  isVectorLens,
+  VECTOR_LENS_LABELS,
+  VECTOR_LENS_SPECS,
+  sanitizeVectorLens,
+  vectorLensColorMap,
+  mapVectorPaintColors,
+  vectorLensDrawn,
+  resolveVectorLenses,
+  stripVectorLensViews,
   WARP_STYLES,
   WARP_STYLE_LABELS,
   warpPresetGrid,
@@ -10335,4 +10580,4 @@ export {
   lineSubpath,
   roundSubpaths
 };
-//# sourceMappingURL=chunk-PRYMC442.js.map
+//# sourceMappingURL=chunk-IEYXYMRQ.js.map