@pixerate/editor 0.140.4 → 0.142.1

package/dist/canvas/index.d.cts

@@ -31,6 +31,7 @@ export * from './brushstroke.cjs';
 export * from './gradient.cjs';
 export * from './mermaid/index.cjs';
 export * from './agent-presence.cjs';
+export * from './playback.cjs';
 export * from './capture.cjs';
 export * from './effects.cjs';
 export * from './effect-player.cjs';

package/dist/canvas/index.d.ts

@@ -31,6 +31,7 @@ export * from './brushstroke.js';
 export * from './gradient.js';
 export * from './mermaid/index.js';
 export * from './agent-presence.js';
+export * from './playback.js';
 export * from './capture.js';
 export * from './effects.js';
 export * from './effect-player.js';

package/dist/canvas/index.js

@@ -65,17 +65,35 @@ import {
   DEFAULT_NODE_HEIGHT,
   DEFAULT_NODE_WIDTH,
   DEFAULT_PLACEMENT_GAP,
+  LOCKED_DATA_KEY,
+  LOCKED_PREVIOUS_FLAGS_KEY,
+  alignNodes,
+  applyNodeUpdates,
   boundsOf,
   centerNodes,
   centre,
+  createNodeLookup,
+  distributeNodes,
   ensureLayout,
   estimateNodeSize,
   flowSide,
+  getAbsolutePosition,
   getCenteredNodePosition,
   getLayoutedNodes,
+  getNodeRect,
+  getNodeSize,
+  invertNodeUpdates,
+  isLocked,
+  lockNodes,
+  matchSize,
   overlaps,
-  placeBeside
-} from "../chunk-BTZS3KZY.js";
+  placeBeside,
+  readStyleSize,
+  reorderNodes,
+  toggleLockNodes,
+  unlockNodes,
+  withStyleSize
+} from "../chunk-DW4CV5H4.js";
 import {
   DEFAULT_ARRANGE_SHORTCUTS,
   matchArrangeShortcut
@@ -869,358 +887,6 @@ var StreamingLayoutManager = class {
   }
 };
 
-// src/canvas/arrange.ts
-var LOCKED_DATA_KEY = "locked";
-var LOCKED_PREVIOUS_FLAGS_KEY = "lockedPrevious";
-function parsePx(value) {
-  if (typeof value === "number" && Number.isFinite(value)) return value;
-  if (typeof value === "string") {
-    const match = /^\s*(-?\d+(?:\.\d+)?)(px)?\s*$/i.exec(value);
-    if (match) return Number(match[1]);
-  }
-  return void 0;
-}
-function readStyleSize(style) {
-  if (!style) return {};
-  if (typeof style === "object") {
-    return { width: parsePx(style.width), height: parsePx(style.height) };
-  }
-  const read = (prop) => {
-    const match = new RegExp(`(?:^|;)\\s*${prop}\\s*:\\s*([^;]+)`, "i").exec(style);
-    return match ? parsePx(match[1]) : void 0;
-  };
-  return { width: read("width"), height: read("height") };
-}
-function withStyleSize(style, size2) {
-  if (!style) return style ?? void 0;
-  if (typeof style === "object") {
-    const next2 = { ...style };
-    if (size2.width !== void 0 && "width" in next2) next2.width = size2.width;
-    if (size2.height !== void 0 && "height" in next2) next2.height = size2.height;
-    return next2;
-  }
-  let next = style;
-  for (const prop of ["width", "height"]) {
-    const value = size2[prop];
-    if (value === void 0) continue;
-    next = next.replace(
-      new RegExp(`((?:^|;)\\s*${prop}\\s*:\\s*)[^;]+`, "i"),
-      `$1${value}px`
-    );
-  }
-  return next;
-}
-function getNodeSize(node, options = {}) {
-  const styleSize = readStyleSize(node.style);
-  let width = node.measured?.width ?? node.width ?? styleSize.width;
-  let height = node.measured?.height ?? node.height ?? styleSize.height;
-  if (width === void 0 || height === void 0) {
-    const fallback = options.estimate === false ? { width: options.defaultWidth ?? 200, height: options.defaultHeight ?? 60 } : estimateNodeSize(node, options.defaultWidth, options.defaultHeight);
-    width ??= fallback.width;
-    height ??= fallback.height;
-  }
-  return { width, height };
-}
-function getAbsolutePosition(node, lookup) {
-  let x = node.position.x;
-  let y = node.position.y;
-  const seen = /* @__PURE__ */ new Set([node.id]);
-  let parentId = node.parentId;
-  while (parentId && !seen.has(parentId)) {
-    const parent = lookup.get(parentId);
-    if (!parent) break;
-    seen.add(parentId);
-    x += parent.position.x;
-    y += parent.position.y;
-    parentId = parent.parentId;
-  }
-  return { x, y };
-}
-function createNodeLookup(nodes) {
-  return new Map(nodes.map((n3) => [n3.id, n3]));
-}
-function getNodeRect(node, lookup, options) {
-  const { x, y } = node.parentId && lookup ? getAbsolutePosition(node, lookup) : node.position;
-  return { x, y, ...getNodeSize(node, options) };
-}
-function isLocked(node) {
-  return node?.data?.[LOCKED_DATA_KEY] === true;
-}
-function lockNodes(nodes, ids) {
-  const idSet = new Set(ids);
-  return nodes.map((node) => {
-    if (!idSet.has(node.id) || isLocked(node)) return node;
-    const previous = {};
-    if (node.draggable !== void 0) previous.draggable = node.draggable;
-    if (node.deletable !== void 0) previous.deletable = node.deletable;
-    return {
-      ...node,
-      draggable: false,
-      deletable: false,
-      data: { ...node.data, [LOCKED_DATA_KEY]: true, [LOCKED_PREVIOUS_FLAGS_KEY]: previous }
-    };
-  });
-}
-function unlockNodes(nodes, ids) {
-  const idSet = new Set(ids);
-  return nodes.map((node) => {
-    if (!idSet.has(node.id) || !isLocked(node)) return node;
-    const {
-      [LOCKED_DATA_KEY]: _locked,
-      [LOCKED_PREVIOUS_FLAGS_KEY]: previous = {},
-      ...data
-    } = node.data;
-    const next = { ...node, data };
-    delete next.draggable;
-    delete next.deletable;
-    if (previous.draggable !== void 0) next.draggable = previous.draggable;
-    if (previous.deletable !== void 0) next.deletable = previous.deletable;
-    return next;
-  });
-}
-function toggleLockNodes(nodes, ids) {
-  const idSet = new Set(ids);
-  const anyUnlocked = nodes.some((n3) => idSet.has(n3.id) && !isLocked(n3));
-  return anyUnlocked ? lockNodes(nodes, idSet) : unlockNodes(nodes, idSet);
-}
-function collect(nodes, ids, options) {
-  const lookup = createNodeLookup(nodes);
-  const items = [];
-  const seen = /* @__PURE__ */ new Set();
-  for (const id of ids) {
-    const node = lookup.get(id);
-    if (!node || seen.has(id)) continue;
-    seen.add(id);
-    items.push({ node, rect: getNodeRect(node, lookup, options), locked: isLocked(node) });
-  }
-  return { lookup, items };
-}
-function toPositionUpdates(lookup, targets) {
-  const updates = [];
-  for (const [id, abs] of targets) {
-    const node = lookup.get(id);
-    let position = abs;
-    if (node.parentId && lookup.has(node.parentId)) {
-      const parent = lookup.get(node.parentId);
-      const parentAbs = targets.get(parent.id) ?? getAbsolutePosition(parent, lookup);
-      position = { x: abs.x - parentAbs.x, y: abs.y - parentAbs.y };
-    }
-    if (position.x !== node.position.x || position.y !== node.position.y) {
-      updates.push({ id, position });
-    }
-  }
-  return updates;
-}
-function alignNodes(nodes, ids, edge, options = {}) {
-  const { lookup, items } = collect(nodes, ids, options);
-  const fixed = typeof options.to === "object" ? options.to : null;
-  if (items.length === 0 || !fixed && items.length < 2) return [];
-  const bounds = fixed ?? boundsOf(items.map((i) => i.rect));
-  const targets = /* @__PURE__ */ new Map();
-  for (const { node, rect: rect2, locked } of items) {
-    if (locked) continue;
-    let { x, y } = rect2;
-    switch (edge) {
-      case "left":
-        x = bounds.x;
-        break;
-      case "center":
-        x = bounds.x + bounds.width / 2 - rect2.width / 2;
-        break;
-      case "right":
-        x = bounds.x + bounds.width - rect2.width;
-        break;
-      case "top":
-        y = bounds.y;
-        break;
-      case "middle":
-        y = bounds.y + bounds.height / 2 - rect2.height / 2;
-        break;
-      case "bottom":
-        y = bounds.y + bounds.height - rect2.height;
-        break;
-    }
-    targets.set(node.id, { x, y });
-  }
-  return toPositionUpdates(lookup, targets);
-}
-function distributeAxis(items, horizontal, mode, gapOverride, targets) {
-  const start = (r) => horizontal ? r.x : r.y;
-  const size2 = (r) => horizontal ? r.width : r.height;
-  const sorted = [...items].sort(
-    (a, b) => start(a.rect) + size2(a.rect) / 2 - (start(b.rect) + size2(b.rect) / 2)
-  );
-  const first = sorted[0].rect;
-  const last = sorted[sorted.length - 1].rect;
-  const n3 = sorted.length;
-  const set = (item, value) => {
-    if (item.locked) return;
-    const current = targets.get(item.node.id) ?? { x: item.rect.x, y: item.rect.y };
-    targets.set(item.node.id, horizontal ? { ...current, x: value } : { ...current, y: value });
-  };
-  if (mode === "centres") {
-    const c0 = start(first) + size2(first) / 2;
-    const c1 = start(last) + size2(last) / 2;
-    const step = (c1 - c0) / (n3 - 1);
-    sorted.forEach((item, i) => set(item, c0 + step * i - size2(item.rect) / 2));
-    return;
-  }
-  const span = start(last) + size2(last) - start(first);
-  const total = sorted.reduce((sum, item) => sum + size2(item.rect), 0);
-  const gap = gapOverride ?? (span - total) / (n3 - 1);
-  let cursor = start(first);
-  for (const item of sorted) {
-    set(item, cursor);
-    cursor += size2(item.rect) + gap;
-  }
-}
-function distributeNodes(nodes, ids, axis, mode = "gaps", options = {}) {
-  const { lookup, items } = collect(nodes, ids, options);
-  const minimum = options.gap !== void 0 && mode === "gaps" ? 2 : 3;
-  if (items.length < minimum) return [];
-  const targets = /* @__PURE__ */ new Map();
-  if (axis !== "vertical") distributeAxis(items, true, mode, options.gap, targets);
-  if (axis !== "horizontal") distributeAxis(items, false, mode, options.gap, targets);
-  return toPositionUpdates(lookup, targets);
-}
-function matchSize(nodes, ids, dimension, options = {}) {
-  const { items } = collect(nodes, ids, options);
-  if (items.length < 2) return [];
-  const reference = options.reference ?? "largest";
-  const pick = (dim) => {
-    if (typeof reference === "object") {
-      const item = items.find((i) => i.node.id === reference.id);
-      if (item) return item.rect[dim];
-    }
-    if (reference === "first") return items[0].rect[dim];
-    const values = items.map((i) => i.rect[dim]);
-    return reference === "smallest" ? Math.min(...values) : Math.max(...values);
-  };
-  const width = dimension !== "height" ? pick("width") : void 0;
-  const height = dimension !== "width" ? pick("height") : void 0;
-  const updates = [];
-  for (const { node, rect: rect2, locked } of items) {
-    if (locked) continue;
-    const update = { id: node.id };
-    if (width !== void 0 && width !== rect2.width) update.width = width;
-    if (height !== void 0 && height !== rect2.height) update.height = height;
-    if (update.width === void 0 && update.height === void 0) continue;
-    if (options.keepCentre) {
-      update.position = {
-        x: node.position.x - ((update.width ?? rect2.width) - rect2.width) / 2,
-        y: node.position.y - ((update.height ?? rect2.height) - rect2.height) / 2
-      };
-    }
-    updates.push(update);
-  }
-  return updates;
-}
-function reorderNodes(nodes, ids, operation, options = {}) {
-  const lookup = createNodeLookup(nodes);
-  const targetIds = new Set(
-    [...ids].filter((id) => lookup.has(id) && !isLocked(lookup.get(id)))
-  );
-  if (targetIds.size === 0) return [];
-  const groups = /* @__PURE__ */ new Map();
-  for (const node of nodes) {
-    const key = node.parentId ?? "";
-    if (!groups.has(key)) groups.set(key, []);
-    groups.get(key).push(node);
-  }
-  const updates = [];
-  for (const siblings of groups.values()) {
-    if (!siblings.some((n3) => targetIds.has(n3.id))) continue;
-    const order = siblings.map((node, index) => ({ node, index, z: typeof node.zIndex === "number" ? node.zIndex : 0 })).sort((a, b) => a.z - b.z || a.index - b.index).map((entry) => entry.node);
-    const isTarget = (n3) => targetIds.has(n3.id);
-    let next;
-    if (operation === "bringToFront") {
-      next = [...order.filter((n3) => !isTarget(n3)), ...order.filter(isTarget)];
-    } else if (operation === "sendToBack") {
-      next = [...order.filter(isTarget), ...order.filter((n3) => !isTarget(n3))];
-    } else {
-      next = [...order];
-      const forward = operation === "bringForward";
-      const rects = new Map(next.map((n3) => [n3.id, getNodeRect(n3, lookup, options)]));
-      const intersects = (a, b) => a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
-      const indices = next.map((_, i) => i);
-      if (forward) indices.reverse();
-      for (const i of indices) {
-        const node = next[i];
-        if (!isTarget(node)) continue;
-        const step = forward ? 1 : -1;
-        let j = i + step;
-        let swapWith = -1;
-        let firstNonTarget = -1;
-        while (j >= 0 && j < next.length) {
-          if (!isTarget(next[j])) {
-            if (firstNonTarget === -1) firstNonTarget = j;
-            if (intersects(rects.get(node.id), rects.get(next[j].id))) {
-              swapWith = j;
-              break;
-            }
-          }
-          j += step;
-        }
-        if (swapWith === -1) swapWith = firstNonTarget;
-        if (swapWith === -1) continue;
-        next.splice(i, 1);
-        next.splice(swapWith, 0, node);
-      }
-    }
-    if (next.every((node, i) => node === order[i])) continue;
-    next.forEach((node, rank) => {
-      const current = typeof node.zIndex === "number" ? node.zIndex : 0;
-      if (current !== rank) updates.push({ id: node.id, zIndex: rank });
-    });
-  }
-  return updates;
-}
-function applyNodeUpdates(nodes, updates) {
-  if (updates.length === 0) return nodes;
-  const byId = /* @__PURE__ */ new Map();
-  for (const update of updates) {
-    byId.set(update.id, { ...byId.get(update.id), ...update });
-  }
-  return nodes.map((node) => {
-    const update = byId.get(node.id);
-    if (!update) return node;
-    const next = { ...node };
-    if (update.position) next.position = { ...update.position };
-    if (update.zIndex !== void 0) next.zIndex = update.zIndex;
-    if (update.width !== void 0 || update.height !== void 0) {
-      if (update.width !== void 0) next.width = update.width;
-      if (update.height !== void 0) next.height = update.height;
-      if (node.style) next.style = withStyleSize(node.style, update);
-      if (node.measured) {
-        next.measured = {
-          ...node.measured,
-          ...update.width !== void 0 ? { width: update.width } : {},
-          ...update.height !== void 0 ? { height: update.height } : {}
-        };
-      }
-    }
-    return next;
-  });
-}
-function invertNodeUpdates(nodes, updates) {
-  const lookup = createNodeLookup(nodes);
-  const inverse = [];
-  for (const update of updates) {
-    const node = lookup.get(update.id);
-    if (!node) continue;
-    const back = { id: node.id };
-    if (update.position) back.position = { ...node.position };
-    if (update.zIndex !== void 0) back.zIndex = typeof node.zIndex === "number" ? node.zIndex : 0;
-    if (update.width !== void 0 || update.height !== void 0) {
-      const size2 = getNodeSize(node);
-      if (update.width !== void 0) back.width = size2.width;
-      if (update.height !== void 0) back.height = size2.height;
-    }
-    inverse.push(back);
-  }
-  return inverse;
-}
-
 // src/canvas/guides.ts
 function snapToGrid(value, spacing, origin = 0) {
   if (!(spacing > 0) || !Number.isFinite(spacing)) return value;
@@ -11513,6 +11179,29 @@ function isAgentCursor(cursor) {
   return false;
 }
 
+// src/canvas/playback.ts
+function createCanvasPlaybackLocator(options) {
+  return (ref) => {
+    const nodes = options.getNodes();
+    const lookup = createNodeLookup(nodes);
+    const rectOf = (id) => {
+      const node = lookup.get(id);
+      return node ? getNodeRect(node, lookup, options.rectOptions) : null;
+    };
+    if (ref.kind === "node" || ref.kind === "item") return rectOf(ref.id);
+    if (ref.kind === "edge") {
+      const edge = options.getEdges?.().find((e) => e.id === ref.id);
+      const a = edge && rectOf(edge.source);
+      const b = edge && rectOf(edge.target);
+      if (!a || !b) return null;
+      const x = (a.x + a.width / 2 + b.x + b.width / 2) / 2;
+      const y = (a.y + a.height / 2 + b.y + b.height / 2) / 2;
+      return { x: x - 12, y: y - 12, width: 24, height: 24 };
+    }
+    return null;
+  };
+}
+
 // src/canvas/capture.ts
 var CANVAS_CAPTURE_VIEWPORT_SELECTOR = ".xyflow__viewport, .react-flow__viewport, .svelte-flow__viewport";
 var CANVAS_CAPTURE_CHROME_SELECTORS = [
@@ -12133,6 +11822,7 @@ export {
   createCanvasEffectsController,
   createCanvasEffectsToolProvider,
   createCanvasInstance,
+  createCanvasPlaybackLocator,
   createCanvasScenesStore,
   createDefaultStrokeStyle,
   createFanOutTrajectory,

package/dist/canvas/playback.d.cts

@@ -0,0 +1,14 @@
+import type { PlaybackRect, PlaybackRef } from '../tools/playback.cjs';
+import { type NodeRectOptions } from './arrange.cjs';
+import type { CanvasEdge, CanvasNode } from './types.cjs';
+export interface CanvasPlaybackLocatorOptions<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge> {
+    getNodes: () => readonly TNode[];
+    getEdges?: () => readonly TEdge[];
+    /** Size resolution for unmeasured nodes. */
+    rectOptions?: NodeRectOptions;
+}
+/**
+ * Finds `{ kind: 'node', id }` (the node's absolute rectangle) and `{ kind: 'edge', id }` (a small
+ * box at the middle of the line between its nodes' centres) in flow coordinates.
+ */
+export declare function createCanvasPlaybackLocator<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge>(options: CanvasPlaybackLocatorOptions<TNode, TEdge>): (ref: PlaybackRef) => PlaybackRect | null;

package/dist/canvas/playback.d.ts

@@ -0,0 +1,14 @@
+import type { PlaybackRect, PlaybackRef } from '../tools/playback.js';
+import { type NodeRectOptions } from './arrange.js';
+import type { CanvasEdge, CanvasNode } from './types.js';
+export interface CanvasPlaybackLocatorOptions<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge> {
+    getNodes: () => readonly TNode[];
+    getEdges?: () => readonly TEdge[];
+    /** Size resolution for unmeasured nodes. */
+    rectOptions?: NodeRectOptions;
+}
+/**
+ * Finds `{ kind: 'node', id }` (the node's absolute rectangle) and `{ kind: 'edge', id }` (a small
+ * box at the middle of the line between its nodes' centres) in flow coordinates.
+ */
+export declare function createCanvasPlaybackLocator<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge>(options: CanvasPlaybackLocatorOptions<TNode, TEdge>): (ref: PlaybackRef) => PlaybackRect | null;