@pixerate/editor-react 0.15.0 → 0.17.0

package/dist/canvas/index.js

@@ -791,6 +791,9 @@ function useCanvasArrange(options) {
       get rectOptions() {
         return optionsRef.current.rectOptions;
       },
+      get autoLayout() {
+        return optionsRef.current.autoLayout;
+      },
       onGuidesChange: setGuides
     }),
     []
@@ -1168,6 +1171,38 @@ import {
   pointInRings,
   pointInMultiPolygon
 } from "@pixerate/editor/canvas";
+import {
+  offsetShapeNodes,
+  outlineShapeNodeStrokes,
+  canOffsetShapeNodes,
+  canOutlineShapeNodeStrokes,
+  applyShapeReplacement,
+  hasVisibleStroke,
+  shapeToBezierPath,
+  shapeNodeToBezierPath,
+  pathBoolean,
+  unitePaths,
+  intersectPaths,
+  subtractPaths,
+  excludePaths,
+  dividePaths,
+  normalizeBezierPath,
+  bezierPathArea,
+  offsetPath,
+  outlineStroke,
+  strokeOutlineRings,
+  dashContours,
+  toBezierPath,
+  bezierPathToSvg,
+  transformBezierPath,
+  bezierPathBounds,
+  bezierPathSignedArea,
+  bezierPathLength,
+  bezierPathPointAtLength,
+  pointInBezierPath,
+  distanceToBezierPath,
+  countPathSegments
+} from "@pixerate/editor/canvas";
 import {
   getLayoutedNodes as getLayoutedNodes2,
   ensureLayout as ensureLayout2,
@@ -1203,8 +1238,282 @@ import {
   blendLayout,
   connectedOnly
 } from "@pixerate/editor/canvas";
+import {
+  layoutFrame,
+  layoutAll,
+  layoutUp,
+  layoutUpMany,
+  applyConstraints,
+  getAutoLayout,
+  getChildLayout,
+  getLayoutSizing,
+  getAutoLayoutGrid,
+  getAutoLayoutInsertTarget,
+  getFlowChildren,
+  getLayoutParent,
+  isAutoLayoutFrame,
+  makeSizingCoherent,
+  moveLayoutChild,
+  mergeNodeUpdates,
+  relayoutUpdates,
+  resolvePadding,
+  clampLayoutSize,
+  createCanvasAutoLayoutController as createCanvasAutoLayoutController2,
+  AUTO_LAYOUT_DATA_KEY,
+  CHILD_LAYOUT_DATA_KEY
+} from "@pixerate/editor/canvas";
+
+// src/canvas/useCanvasAutoLayout.ts
+import { useLayoutEffect, useMemo as useMemo4, useRef as useRef8, useState as useState4 } from "react";
+import {
+  createCanvasAutoLayoutController
+} from "@pixerate/editor/canvas";
+function useCanvasAutoLayout(options) {
+  const [guides, setGuides] = useState4([]);
+  const nodesRef = useRef8(options.nodes);
+  nodesRef.current = options.nodes;
+  const optionsRef = useRef8(options);
+  optionsRef.current = options;
+  const controller = useMemo4(
+    () => createCanvasAutoLayoutController({
+      getNodes: () => nodesRef.current,
+      setNodes: (next) => {
+        nodesRef.current = next;
+        optionsRef.current.setNodes(next);
+      },
+      get history() {
+        return optionsRef.current.history;
+      },
+      get enabled() {
+        return optionsRef.current.enabled;
+      },
+      get dragReorder() {
+        return optionsRef.current.dragReorder;
+      },
+      get measure() {
+        return optionsRef.current.measure;
+      },
+      get rectOptions() {
+        return optionsRef.current.rectOptions;
+      },
+      onGuidesChange: setGuides
+    }),
+    []
+  );
+  useLayoutEffect(() => {
+    if (controller.hasPending) controller.flush();
+  }, [options.nodes, controller]);
+  return useMemo4(
+    () => ({
+      ...controller,
+      /** Drop marker of the active reorder drag (flow coordinates). */
+      guides,
+      get hasPending() {
+        return controller.hasPending;
+      }
+    }),
+    [controller, guides]
+  );
+}
+
+// src/canvas/useCanvasTokens.ts
+import { useCallback as useCallback8, useEffect as useEffect5, useRef as useRef9, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import {
+  bindCanvasToken,
+  detachTokenBindings,
+  getEffectiveTokenModes,
+  resolveCanvasTokens,
+  setCanvasTokenMode
+} from "@pixerate/editor/canvas";
+function useCanvasTokens(options) {
+  const { store, nodes, setNodes, modes, properties } = options;
+  const state = useSyncExternalStore2(store.subscribe, store.getState, store.getState);
+  const latest = useRef9({ nodes, setNodes, modes, properties });
+  latest.current = { nodes, setNodes, modes, properties };
+  const opts = () => ({ modes: latest.current.modes, properties: latest.current.properties });
+  useEffect5(
+    () => store.subscribe((event) => {
+      if (event.deletedVariableIds.length === 0) return;
+      latest.current.setNodes((prev) => detachTokenBindings(prev, event.previous, event.deletedVariableIds, opts()));
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [store]
+  );
+  const modesKey = JSON.stringify(modes ?? {});
+  useEffect5(() => {
+    const next = resolveCanvasTokens(nodes, state, opts());
+    if (next !== nodes) setNodes(next);
+  }, [nodes, state, modesKey, properties]);
+  const bind = useCallback8(
+    (ids, propertyKey, variableId) => {
+      const next = bindCanvasToken(latest.current.nodes, ids, propertyKey, variableId, store.getState(), opts());
+      if (next !== latest.current.nodes) latest.current.setNodes(next);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [store]
+  );
+  const setMode = useCallback8(
+    (ids, collectionId, modeId) => {
+      const next = setCanvasTokenMode(latest.current.nodes, ids, collectionId, modeId, store.getState(), opts());
+      if (next !== latest.current.nodes) latest.current.setNodes(next);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [store]
+  );
+  const modesOf = useCallback8(
+    (nodeId) => {
+      const node = latest.current.nodes.find((n) => n.id === nodeId);
+      return node ? getEffectiveTokenModes(node, latest.current.nodes, store.getState(), opts()) : {};
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [store]
+  );
+  return { state, bind, setMode, modesOf };
+}
+
+// src/canvas/TokenBindingPicker.tsx
+import {
+  bindCanvasToken as bindCanvasToken2,
+  getBindableTokenProperties,
+  getEffectiveTokenModes as getEffectiveTokenModes2,
+  getNodeTokenBindings,
+  getNodeTokenModes,
+  setCanvasTokenMode as setCanvasTokenMode2,
+  getTokensForProperty
+} from "@pixerate/editor/canvas";
+import { getCurrentMode, resolveToken } from "@pixerate/editor/tokens";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function TokenBindingPicker({
+  state,
+  nodes,
+  selectedIds,
+  onChange,
+  options = {},
+  properties,
+  onError,
+  className = ""
+}) {
+  const selected = nodes.filter((n) => selectedIds.includes(n.id));
+  const first = selected[0];
+  if (!first) return null;
+  let rows = getBindableTokenProperties(first, options);
+  if (properties) rows = properties.map((key) => rows.find((p) => p.key === key)).filter((p) => !!p);
+  const modes = getEffectiveTokenModes2(first, nodes, state, options);
+  return /* @__PURE__ */ jsxs4("div", { "data-token-binding-picker": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: [
+    rows.map((property) => {
+      const ids = new Set(selected.map((n) => getNodeTokenBindings(n)[property.key] ?? ""));
+      const value = ids.size === 1 ? [...ids][0] : "__mixed";
+      const candidates = getTokensForProperty(state, property, first);
+      const resolved = value && value !== "__mixed" ? resolveToken(state, value, modes) : null;
+      return /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-2", "data-token-property": property.key, children: [
+        /* @__PURE__ */ jsx4("span", { className: "w-28 shrink-0 text-muted-foreground", children: property.label }),
+        /* @__PURE__ */ jsxs4(
+          "select",
+          {
+            "aria-label": `${property.label} variable`,
+            className: "min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs",
+            value,
+            onChange: (e) => {
+              const id = e.currentTarget.value || null;
+              try {
+                onChange(bindCanvasToken2(nodes, selectedIds, property.key, id, state, options));
+              } catch (error) {
+                onError?.(error);
+              }
+            },
+            children: [
+              value === "__mixed" ? /* @__PURE__ */ jsx4("option", { value: "__mixed", children: "Mixed" }) : null,
+              /* @__PURE__ */ jsx4("option", { value: "", children: "None" }),
+              candidates.map((v) => {
+                const collection = state.collections.find((c) => c.id === v.collectionId);
+                return /* @__PURE__ */ jsxs4("option", { value: v.id, children: [
+                  v.name,
+                  collection && state.collections.length > 1 ? ` (${collection.name})` : ""
+                ] }, v.id);
+              })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx4("span", { className: "w-16 shrink-0 truncate text-right text-muted-foreground", "data-token-resolved": "", children: resolved?.ok ? property.type === "color" ? /* @__PURE__ */ jsx4(
+          "span",
+          {
+            className: "inline-block h-3 w-3 rounded border border-border align-middle",
+            style: { background: String(resolved.value) },
+            title: String(resolved.value)
+          }
+        ) : String(resolved.value) : resolved ? /* @__PURE__ */ jsx4("span", { title: resolved.message, children: "\u26A0" }) : null })
+      ] }, property.key);
+    }),
+    state.collections.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "text-muted-foreground", children: "No variables yet." }) : null
+  ] });
+}
+function TokenModeSwitcher({
+  state,
+  nodes,
+  nodeIds,
+  onChange,
+  options = {},
+  showSingleMode = false,
+  className = ""
+}) {
+  const first = nodes.find((n) => nodeIds.includes(n.id));
+  if (!first) return null;
+  const own = getNodeTokenModes(first);
+  const parent = first.parentId ? nodes.find((n) => n.id === first.parentId) : void 0;
+  const inherited = parent ? getEffectiveTokenModes2(parent, nodes, state, options) : { ...options.modes };
+  const collections = state.collections.filter((c) => showSingleMode || c.modes.length > 1);
+  return /* @__PURE__ */ jsx4("div", { "data-token-mode-switcher": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: collections.map((collection) => {
+    const auto = getCurrentMode(collection, inherited);
+    const explicit = collection.modes.some((m) => m.id === own[collection.id]) ? own[collection.id] : "";
+    return /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-2", "data-token-collection": collection.id, children: [
+      /* @__PURE__ */ jsx4("span", { className: "w-28 shrink-0 truncate text-muted-foreground", children: collection.name }),
+      /* @__PURE__ */ jsxs4(
+        "select",
+        {
+          "aria-label": `${collection.name} mode`,
+          className: "min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs",
+          value: explicit,
+          onChange: (e) => onChange(setCanvasTokenMode2(nodes, nodeIds, collection.id, e.currentTarget.value || null, state, options)),
+          children: [
+            /* @__PURE__ */ jsxs4("option", { value: "", children: [
+              "Auto (",
+              auto.name,
+              ")"
+            ] }),
+            collection.modes.map((m) => /* @__PURE__ */ jsx4("option", { value: m.id, children: m.name }, m.id))
+          ]
+        }
+      )
+    ] }, collection.id);
+  }) });
+}
+
+// src/canvas/index.ts
+import {
+  bindCanvasToken as bindCanvasToken3,
+  setCanvasTokenMode as setCanvasTokenMode3,
+  resolveCanvasTokens as resolveCanvasTokens2,
+  detachTokenBindings as detachTokenBindings2,
+  pruneCanvasTokenModes,
+  inspectNodeTokens,
+  getNodeTokenBindings as getNodeTokenBindings2,
+  getNodeTokenModes as getNodeTokenModes2,
+  getEffectiveTokenModes as getEffectiveTokenModes3,
+  getBindableTokenProperties as getBindableTokenProperties2,
+  getCanvasTokenProperty,
+  getTokenPropertyScope,
+  getTokensForProperty as getTokensForProperty2,
+  readNodeStyleProperty,
+  writeNodeStyleProperty,
+  CANVAS_TOKEN_PROPERTIES,
+  TOKEN_BINDINGS_DATA_KEY,
+  TOKEN_MODES_DATA_KEY
+} from "@pixerate/editor/canvas";
 export {
+  AUTO_LAYOUT_DATA_KEY,
   AgentPresenceLayer,
+  CANVAS_TOKEN_PROPERTIES,
+  CHILD_LAYOUT_DATA_KEY,
   CONNECTION_LINE_TYPES,
   CanvasGuidesLayer,
   CanvasScenesStore2 as CanvasScenesStore,
@@ -1216,34 +1525,57 @@ export {
   SHAPE_NODE_TYPE,
   SHAPE_OPERATIONS,
   ShapeNode,
+  TOKEN_BINDINGS_DATA_KEY,
+  TOKEN_MODES_DATA_KEY,
+  TokenBindingPicker,
+  TokenModeSwitcher,
   alignNodes,
+  applyConstraints,
   applyNodeUpdates,
   applyShapeCombination,
+  applyShapeReplacement,
+  bezierPathArea,
+  bezierPathBounds,
+  bezierPathLength,
+  bezierPathPointAtLength,
+  bezierPathSignedArea,
+  bezierPathToSvg,
+  bindCanvasToken3 as bindCanvasToken,
   blendLayout,
   boundsOf,
   calculateDagreReflowDisplacement,
   calculateDirectionalDisplacement2 as calculateDirectionalDisplacement,
   canCombineShapeNodes,
+  canOffsetShapeNodes,
+  canOutlineShapeNodeStrokes,
   canvasHeight,
   centerNodes2 as centerNodes,
   centre,
+  clampLayoutSize,
   combineShapeNodes,
   computeNodesBoundingBox,
   computeSnapGuides,
   connectedOnly,
+  countPathSegments,
   createBezierTrajectory,
+  createCanvasAutoLayoutController2 as createCanvasAutoLayoutController,
   createCanvasScenesStore,
   createFanOutTrajectory2 as createFanOutTrajectory,
   createGuideIndex,
   createNodeGuideIndex,
   cubicPointAt,
   cubicsToPathData,
+  dashContours,
   defaultEasing,
+  detachTokenBindings2 as detachTokenBindings,
+  distanceToBezierPath,
   distributeNodes,
+  dividePaths,
   dividePolygons,
   ensureLayout2 as ensureLayout,
   estimateCanvasHeight,
   estimateNodeSize,
+  excludePaths,
   findConnectorSnap,
   fitCubicRun,
   fitCubics,
@@ -1254,18 +1586,36 @@ export {
   flattenSvgPath,
   flowSide,
   getAbsolutePosition,
+  getAutoLayout,
+  getAutoLayoutGrid,
+  getAutoLayoutInsertTarget,
+  getBindableTokenProperties2 as getBindableTokenProperties,
+  getCanvasTokenProperty,
   getCenteredNodePosition2 as getCenteredNodePosition,
+  getChildLayout,
+  getEffectiveTokenModes3 as getEffectiveTokenModes,
+  getFlowChildren,
+  getLayoutParent,
+  getLayoutSizing,
   getLayoutedNodes2 as getLayoutedNodes,
   getNodeRect,
   getNodeShape,
   getNodeSize,
+  getNodeTokenBindings2 as getNodeTokenBindings,
+  getNodeTokenModes2 as getNodeTokenModes,
   getResizingNodeRect,
   getShapeRenderData2 as getShapeRenderData,
   getShapeSvg,
+  getTokenPropertyScope,
+  getTokensForProperty2 as getTokensForProperty,
   handlePoint,
+  hasVisibleStroke,
   inferResizeHandle,
+  inspectNodeTokens,
+  intersectPaths,
   intersectPolygons,
   invertNodeUpdates,
+  isAutoLayoutFrame,
   isEventFromTextInput3 as isEventFromTextInput,
   isLocked,
   isMeasureModifierHeld2 as isMeasureModifierHeld,
@@ -1274,42 +1624,64 @@ export {
   isStraightCubic,
   isValidCanvasNode,
   isValidUrl2 as isValidUrl,
+  layoutAll,
   layoutBounds,
+  layoutFrame,
+  layoutUp,
+  layoutUpMany,
   linearPositionTrajectory2 as linearPositionTrajectory,
   linearTrajectory,
   lockNodes,
+  makeSizingCoherent,
   matchArrangeShortcut2 as matchArrangeShortcut,
   matchSize,
   measureBetween,
   measureLabel,
   measureSelection2 as measureSelection,
   measureToLine,
+  mergeNodeUpdates,
+  moveLayoutChild,
   multiPolygonArea,
   multiPolygonBounds,
   nearestHandlePositions,
+  normalizeBezierPath,
+  offsetPath,
+  offsetShapeNodes,
   oppositePosition,
+  outlineShapeNodeStrokes,
+  outlineStroke,
   overlaps,
   parseCanvasClipboardData2 as parseCanvasClipboardData,
   parseCanvasScenes,
   parseSvgPath,
+  pathBoolean,
   placeBeside2 as placeBeside,
+  pointInBezierPath,
   pointInMultiPolygon,
   pointInRings,
   polygonArea,
   polygonBoolean,
   polygonToSvgPath,
   positionToSide,
+  pruneCanvasTokenModes,
+  readNodeStyleProperty,
   readStyleSize,
   realClock,
+  relayoutUpdates,
   remapPastedNodes2 as remapPastedNodes,
   reorderNodes,
   repositionNodesTo,
   resizeHandleAxes,
+  resolveCanvasTokens2 as resolveCanvasTokens,
+  resolvePadding,
   revertShapeCombination,
   ringSignedArea,
   runMultiNodeTransition2 as runMultiNodeTransition,
   serializeCanvasNodes2 as serializeCanvasNodes,
+  setCanvasTokenMode3 as setCanvasTokenMode,
+  shapeNodeToBezierPath,
   shapeNodeToPolygon,
+  shapeToBezierPath,
   shapeToPolygon,
   sideToPosition,
   simplifyRing,
@@ -1317,12 +1689,18 @@ export {
   snapNodeResize,
   snapResize,
   snapToGrid,
+  strokeOutlineRings,
+  subtractPaths,
   subtractPolygons,
+  toBezierPath,
   toggleLockNodes,
+  transformBezierPath,
   unionPolygons,
+  unitePaths,
   unlockNodes,
   useCanvasArrange,
   useCanvasArrangeShortcuts,
+  useCanvasAutoLayout,
   useCanvasClipboard,
   useCanvasDocking,
   useCanvasExplosion,
@@ -1331,8 +1709,10 @@ export {
   useCanvasMeasure,
   useCanvasScenes,
   useCanvasShortcuts,
+  useCanvasTokens,
   useStreamingCanvas,
   withStyleSize,
+  writeNodeStyleProperty,
   xorPolygons
 };
 //# sourceMappingURL=index.js.map