@pixerate/editor-react 0.75.0 → 0.75.1

package/dist/vector/index.js

@@ -44,7 +44,7 @@ function useVectorCommands(registry, controller, options = {}) {
 }
 
 // src/vector/VectorCanvas.tsx
-import React2, { useEffect as useEffect2, useId, useRef as useRef3 } from "react";
+import React2, { useEffect as useEffect2, useId, useRef as useRef3, useState as useState2 } from "react";
 import {
   VECTOR_OVERLAY_THEME as THEME2,
   getVectorOverlayRenderData,
@@ -227,48 +227,19 @@ function VectorTextElement({ node }) {
   )) });
 }
 function VectorSceneNodes({ nodes }) {
-  return /* @__PURE__ */ jsx2(Fragment, { children: nodes.map(
-    (node) => node.kind === "text" ? /* @__PURE__ */ jsx2(VectorTextElement, { node }, node.id) : node.kind === "group" ? /* @__PURE__ */ jsx2(
-      "g",
-      {
-        "data-vector-id": node.id,
-        "data-vector-mask": node.mask?.type,
-        transform: node.transform,
-        opacity: node.opacity < 1 ? node.opacity : void 0,
-        filter: node.filter,
-        style: blendStyle(node.blendMode),
-        children: node.mask ? /* @__PURE__ */ jsx2(VectorMaskedNodes, { mask: node.mask, nodes: node.children }) : /* @__PURE__ */ jsx2(VectorSceneNodes, { nodes: node.children })
-      },
-      node.id
-    ) : node.layers ? (
-      // Fill and stroke stacks: each layer in order, bottom to top.
-      /* @__PURE__ */ jsx2(
-        "g",
-        {
-          "data-vector-id": node.id,
-          transform: node.transform,
-          opacity: node.opacity < 1 ? node.opacity : void 0,
-          filter: node.filter,
-          style: blendStyle(node.blendMode),
-          children: node.layers.map((layer) => /* @__PURE__ */ jsx2(VectorPaintPath, { paint: layer, d: node.d, fillRule: node.fillRule, layer: `${layer.kind}-${layer.index}` }, `${layer.kind}-${layer.index}`))
-        },
-        node.id
-      )
-    ) : /* @__PURE__ */ jsx2(
-      VectorPaintPath,
-      {
-        paint: node,
-        d: node.d,
-        fillRule: node.fillRule,
-        id: node.id,
-        transform: node.transform,
-        filter: node.filter,
-        blendMode: node.blendMode
-      },
-      node.id
-    )
-  ) });
+  return /* @__PURE__ */ jsx2(Fragment, { children: nodes.map((node) => /* @__PURE__ */ jsx2(VectorSceneNode, { node }, node.id)) });
 }
+var VectorSceneNode = React2.memo(function VectorSceneNode2({ node }) {
+  if (node.kind === "text") return /* @__PURE__ */ jsx2(VectorTextElement, { node });
+  if (node.kind === "group")
+    return /* @__PURE__ */ jsx2("g", { "data-vector-id": node.id, "data-vector-mask": node.mask?.type, transform: node.transform, opacity: node.opacity < 1 ? node.opacity : void 0, filter: node.filter, style: blendStyle(node.blendMode), children: node.mask ? /* @__PURE__ */ jsx2(VectorMaskedNodes, { mask: node.mask, nodes: node.children }) : /* @__PURE__ */ jsx2(VectorSceneNodes, { nodes: node.children }) });
+  if (node.layers)
+    return (
+      // Fill and stroke stacks: each layer in order, bottom to top.
+      /* @__PURE__ */ jsx2("g", { "data-vector-id": node.id, transform: node.transform, opacity: node.opacity < 1 ? node.opacity : void 0, filter: node.filter, style: blendStyle(node.blendMode), children: node.layers.map((layer) => /* @__PURE__ */ jsx2(VectorPaintPath, { paint: layer, d: node.d, fillRule: node.fillRule, layer: `${layer.kind}-${layer.index}` }, `${layer.kind}-${layer.index}`)) })
+    );
+  return /* @__PURE__ */ jsx2(VectorPaintPath, { paint: node, d: node.d, fillRule: node.fillRule, id: node.id, transform: node.transform, filter: node.filter, blendMode: node.blendMode });
+});
 function VectorMaskedNodes({ mask, nodes }) {
   const b = mask.bounds;
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
@@ -363,7 +334,8 @@ function VectorCanvas({
   const editingText = state.textEdit?.nodeId ?? null;
   const fitted = useRef3(!fitOnMount);
   const uid = useId().replace(/:/g, "");
-  const scene = getVectorSceneRenderData(state, { idPrefix: `ve${uid}-` });
+  const [size, setSize] = useState2(null);
+  const scene = getVectorSceneRenderData(state, { idPrefix: `ve${uid}-`, ...size ? { viewportSize: size } : {} });
   const overlay = getVectorOverlayRenderData(state);
   const host = getVectorSymbolEditBackground(state, { idPrefix: `ve${uid}-host-` });
   useEffect2(() => {
@@ -381,6 +353,18 @@ function VectorCanvas({
     observer.observe(el);
     return () => observer.disconnect();
   }, [controller]);
+  useEffect2(() => {
+    const el = svgRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const measure = () => {
+      const r = el.getBoundingClientRect();
+      if (r.width > 0 && r.height > 0) setSize((s) => s && s.width === r.width && s.height === r.height ? s : { width: r.width, height: r.height });
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
   useEffect2(() => {
     if (!editingText) return;
     const t = setTimeout(() => textRef.current?.focus({ preventScroll: true }), 0);
@@ -516,8 +500,8 @@ function VectorCanvas({
               /* @__PURE__ */ jsx2("circle", { cx: h.x, cy: h.y, r: THEME2.handleRadius + (h.hovered || h.active ? 1 : 0), fill: h.active ? accentColor : THEME2.handleFill, stroke: accentColor })
             ] }, h.index)),
             overlay.envelope.anchors.map((a) => {
-              const size = as + (a.hovered || a.active ? 2 : 0);
-              return /* @__PURE__ */ jsx2("rect", { "data-vector-envelope-anchor": a.index, x: a.x - size / 2, y: a.y - size / 2, width: size, height: size, fill: a.active ? accentColor : THEME2.handleFill, stroke: accentColor }, a.index);
+              const size2 = as + (a.hovered || a.active ? 2 : 0);
+              return /* @__PURE__ */ jsx2("rect", { "data-vector-envelope-anchor": a.index, x: a.x - size2 / 2, y: a.y - size2 / 2, width: size2, height: size2, fill: a.active ? accentColor : THEME2.handleFill, stroke: accentColor }, a.index);
             })
           ] }),
           overlay.handles.map((h) => /* @__PURE__ */ jsxs2("g", { "data-vector-handle": h.ref.handle, children: [
@@ -525,10 +509,10 @@ function VectorCanvas({
             /* @__PURE__ */ jsx2("circle", { cx: h.x, cy: h.y, r: THEME2.handleRadius + (h.hovered ? 1 : 0), fill: THEME2.handleFill, stroke: accentColor })
           ] }, `${h.ref.nodeId}:${h.ref.subpath}:${h.ref.index}:${h.ref.handle}`)),
           overlay.anchors.map((a) => {
-            const size = as + (a.hovered ? 2 : 0);
+            const size2 = as + (a.hovered ? 2 : 0);
             const fill = a.selected ? accentColor : THEME2.handleFill;
             const key = `${a.ref.nodeId}:${a.ref.subpath}:${a.ref.index}`;
-            return a.type === "corner" ? /* @__PURE__ */ jsx2("rect", { "data-vector-anchor": a.ref.index, x: a.x - size / 2, y: a.y - size / 2, width: size, height: size, fill, stroke: accentColor }, key) : /* @__PURE__ */ jsx2("circle", { "data-vector-anchor": a.ref.index, cx: a.x, cy: a.y, r: size / 2, fill, stroke: accentColor }, key);
+            return a.type === "corner" ? /* @__PURE__ */ jsx2("rect", { "data-vector-anchor": a.ref.index, x: a.x - size2 / 2, y: a.y - size2 / 2, width: size2, height: size2, fill, stroke: accentColor }, key) : /* @__PURE__ */ jsx2("circle", { "data-vector-anchor": a.ref.index, cx: a.x, cy: a.y, r: size2 / 2, fill, stroke: accentColor }, key);
           }),
           overlay.cornerWidgets.map((w) => /* @__PURE__ */ jsxs2("g", { "data-vector-corner-widget": w.ref.index, "data-corner-kind": w.kind, children: [
             /* @__PURE__ */ jsx2("circle", { cx: w.x, cy: w.y, r: THEME2.cornerWidgetRadius + (w.hovered ? 1 : 0), fill: THEME2.handleFill, stroke: accentColor }),
@@ -1584,7 +1568,7 @@ function VectorTextPanel({ controller, className }) {
 }
 
 // src/vector/VectorSymbolsPanel.tsx
-import { useId as useId3, useState as useState2 } from "react";
+import { useId as useId3, useState as useState3 } from "react";
 import { getVectorSymbolsPanel, vectorPaintToHex } from "@pixerate/editor/vector";
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var buttonClass6 = "inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground";
@@ -1594,7 +1578,7 @@ function VectorSymbolsPanel({ controller, className }) {
   const state = useVectorEditorState(controller);
   const uid = useId3().replace(/:/g, "");
   const panel = getVectorSymbolsPanel(state, { idPrefix: `vsym${uid}-` });
-  const [error, setError] = useState2(null);
+  const [error, setError] = useState3(null);
   const report = (r) => setError(r.ok ? null : r.message ?? null);
   const inst = panel.instance;
   return /* @__PURE__ */ jsxs8("div", { className: `space-y-2 ${className ?? ""}`, "data-vector-symbols-panel": "", "aria-label": "Symbols", children: [
@@ -1652,7 +1636,7 @@ function VectorSymbolsPanel({ controller, className }) {
 }
 
 // src/vector/VectorConstraintsPanel.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 import { getVectorConstraintPanel } from "@pixerate/editor/vector";
 import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 var buttonClass7 = "inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40";
@@ -1661,8 +1645,8 @@ var labelClass6 = "w-16 text-[11px] font-medium uppercase tracking-wide text-mut
 function VectorConstraintsPanel({ controller, className }) {
   const state = useVectorEditorState(controller);
   const panel = getVectorConstraintPanel(state);
-  const [error, setError] = useState3(null);
-  const [param, setParam] = useState3({ name: "", value: "" });
+  const [error, setError] = useState4(null);
+  const [param, setParam] = useState4({ name: "", value: "" });
   const report = (r) => setError(r.ok ? null : r.message ?? null);
   const add = (a) => report(controller.addConstraint({ kind: a.kind, refs: a.refs }));
   if (!panel.actions.length && !panel.constraints.length && !state.document.constraints?.length && state.tool !== "direct") return null;
@@ -1930,15 +1914,15 @@ function VectorConnectorPanel({ controller, className }) {
 }
 
 // src/vector/VectorShadingPanel.tsx
-import { useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 import { isVectorFreeformGradient, isVectorMeshGradient, vectorPaintToHex as vectorPaintToHex3 } from "@pixerate/editor/vector";
 import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 var buttonClass10 = "inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40";
 var numberClass6 = "h-7 w-12 rounded border border-border bg-background px-1.5 text-xs";
 function VectorShadingPanel({ controller, className }) {
   const state = useVectorEditorState(controller);
-  const [rows, setRows] = useState4(2);
-  const [columns, setColumns] = useState4(2);
+  const [rows, setRows] = useState5(2);
+  const [columns, setColumns] = useState5(2);
   const path = state.selection.map((id) => controller.getNode(id)).find((n) => n?.type === "path");
   if (!path) return null;
   const fill = path.fill;
@@ -1982,7 +1966,7 @@ function VectorShadingPanel({ controller, className }) {
 }
 
 // src/vector/VectorTracePanel.tsx
-import { useRef as useRef4, useState as useState5 } from "react";
+import { useRef as useRef4, useState as useState6 } from "react";
 import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 var buttonClass11 = "inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40";
 var selectClass8 = "h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs";
@@ -2001,9 +1985,9 @@ async function filePixels(file, max = 1e6) {
 }
 function VectorTracePanel({ controller, className }) {
   const input = useRef4(null);
-  const [mode, setMode] = useState5("threshold");
-  const [colors, setColors] = useState5(6);
-  const [message, setMessage] = useState5(null);
+  const [mode, setMode] = useState6("threshold");
+  const [colors, setColors] = useState6(6);
+  const [message, setMessage] = useState6(null);
   const trace = async (file) => {
     try {
       const pixels = await filePixels(file);