@pixerate/editor-react 0.40.0 → 0.42.0

package/dist/canvas/index.js

@@ -2532,6 +2532,217 @@ import {
   angleToSvgLinearCoords,
   gradientToSvgDef as gradientToSvgDef2
 } from "@pixerate/editor/canvas";
+
+// src/canvas/useMermaidDiagram.ts
+import { useEffect as useEffect10, useMemo as useMemo8, useRef as useRef15, useState as useState8, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import {
+  DiagramController
+} from "@pixerate/editor/diagram";
+import {
+  DiagramStream,
+  blendDiagramLayout,
+  easeDiagramTween,
+  mermaidMovesFromCanvas,
+  mermaidToCanvas
+} from "@pixerate/editor/canvas";
+function useDiagramState(controller) {
+  return useSyncExternalStore4(controller.subscribe, controller.getState, controller.getState);
+}
+function useMermaidDiagram(controllerOrOptions = {}) {
+  const own = useRef15(null);
+  let controller;
+  if (controllerOrOptions instanceof DiagramController) controller = controllerOrOptions;
+  else {
+    if (!own.current) own.current = new DiagramController(controllerOrOptions);
+    controller = own.current;
+  }
+  const layoutOptions = controllerOrOptions instanceof DiagramController ? void 0 : controllerOrOptions.layoutOptions;
+  const state = useDiagramState(controller);
+  const canvas = useMemo8(
+    () => mermaidToCanvas(state.document, { ...layoutOptions, editable: state.editable }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.document, state.editable]
+  );
+  const layoutRef = useRef15(canvas.layout);
+  layoutRef.current = canvas.layout;
+  const actions = useMemo8(
+    () => ({
+      apply: (ops, label) => controller.apply(ops, label),
+      load: (source, options) => controller.load(source, options),
+      moveNodes: (moved, all = moved) => {
+        const op = mermaidMovesFromCanvas(layoutRef.current, moved, all, { stored: controller.getDocument().meta.layout ?? {} });
+        return op ? controller.apply(op, "Move") : null;
+      },
+      connect: (source, target, label) => controller.apply({ type: "addEdge", edge: { source, target, ...label ? { label } : {} } }, "Connect"),
+      remove: (ids) => {
+        const graph = controller.getDocument().graph;
+        const edgeIds = new Set(graph.edges.map((e) => e.id));
+        const edges = ids.filter((id) => edgeIds.has(id));
+        const nodes = ids.filter((id) => !edgeIds.has(id));
+        const ops = [];
+        if (edges.length) ops.push({ type: "removeEdges", ids: edges });
+        if (nodes.length) ops.push({ type: "removeNodes", ids: nodes });
+        return controller.apply(ops, "Delete");
+      },
+      rename: (id, label) => controller.apply(
+        controller.getDocument().graph.groups.some((g) => g.id === id) ? { type: "renameGroup", id, label } : { type: "renameNode", id, label },
+        "Rename"
+      ),
+      select: (ids) => controller.select(ids),
+      undo: () => void controller.undo(),
+      redo: () => void controller.redo()
+    }),
+    [controller]
+  );
+  return { controller, state, document: state.document, source: state.source, ...canvas, ...actions };
+}
+function useMermaidStream(source, options = {}) {
+  const { complete = false, duration = 300, ...layoutOptions } = options;
+  const stream = useRef15(null);
+  if (!stream.current) stream.current = new DiagramStream(layoutOptions);
+  const result = useMemo8(() => stream.current.update(source, complete), [source, complete]);
+  const [shown, setShown] = useState8({ layout: result.layout, settled: true });
+  const shownRef = useRef15(shown.layout);
+  shownRef.current = shown.layout;
+  useEffect10(() => {
+    const target = result.layout;
+    if (!target) return setShown({ layout: null, settled: true });
+    const from = shownRef.current;
+    if (!from || duration <= 0 || typeof requestAnimationFrame !== "function") return setShown({ layout: target, settled: true });
+    if (from === target) return;
+    let frame = 0;
+    const start = performance.now();
+    const step = () => {
+      const t = Math.min(1, (performance.now() - start) / duration);
+      setShown({ layout: blendDiagramLayout(from, target, easeDiagramTween(t)), settled: t >= 1 });
+      if (t < 1) frame = requestAnimationFrame(step);
+    };
+    frame = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(frame);
+  }, [result.layout, duration]);
+  const doc = result.document.tier === "editable" ? result.document : null;
+  const canvas = useMemo8(() => {
+    if (!doc || !shown.layout) return { nodes: [], edges: [] };
+    const placed = new Set(Object.keys(shown.layout.positions));
+    const graph = {
+      ...doc.graph,
+      nodes: doc.graph.nodes.filter((n) => placed.has(n.id)),
+      groups: doc.graph.groups.filter((g) => placed.has(g.id)),
+      edges: doc.graph.edges.filter((e) => placed.has(e.source) && placed.has(e.target))
+    };
+    return mermaidToCanvas({ ...doc, graph }, { layout: shown.layout });
+  }, [doc, shown.layout]);
+  return { document: doc, ...canvas, layout: shown.layout, settled: shown.settled };
+}
+
+// src/canvas/MermaidDiagramNode.tsx
+import { MERMAID_SHAPE_PAINT, mermaidLabelLines, mermaidNodeMembers, mermaidNodePaint, mermaidShapePaths } from "@pixerate/editor/canvas";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function mermaidNodeStyle(styles = {}, selected = false) {
+  const paint = mermaidNodePaint(styles, selected);
+  const { color, "stroke-width": strokeWidth, "stroke-dasharray": strokeDasharray, ...vars } = paint;
+  return { ...vars, color, strokeWidth, strokeDasharray };
+}
+function MermaidDiagramNode({ data, width = 160, height = 56, selected, className = "", children }) {
+  const node = data.node;
+  if (!node) return null;
+  const members = mermaidNodeMembers(node.data);
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: `pixerate-diagram-node ${className}`.trim(),
+      "data-shape": node.shape,
+      "data-selected": selected ? "true" : void 0,
+      style: { position: "relative", width: "100%", height: "100%", ...mermaidNodeStyle(data.resolvedStyles, selected) },
+      children: [
+        /* @__PURE__ */ jsx8("svg", { viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "none", width: "100%", height: "100%", style: { position: "absolute", inset: 0, overflow: "visible" }, "aria-hidden": "true", children: mermaidShapePaths(node.shape, width, height).map((path, i) => /* @__PURE__ */ jsx8("path", { d: path.d, style: { ...MERMAID_SHAPE_PAINT[path.paint], vectorEffect: "non-scaling-stroke" } }, i)) }),
+        /* @__PURE__ */ jsxs8(
+          "div",
+          {
+            style: { position: "relative", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: members.length ? "flex-start" : "center", height: "100%", padding: "6px 10px", boxSizing: "border-box", fontSize: 13, lineHeight: 1.3, textAlign: "center", pointerEvents: "none" },
+            children: [
+              mermaidLabelLines(node.label).map((line, i) => /* @__PURE__ */ jsx8("span", { style: { fontWeight: members.length ? 600 : void 0 }, children: line }, i)),
+              members.length > 0 && /* @__PURE__ */ jsx8("div", { style: { alignSelf: "stretch", marginTop: 4, paddingTop: 4, borderTop: "1px solid var(--pixerate-diagram-node-border)", textAlign: "left", fontSize: 12 }, children: members.map((m, i) => /* @__PURE__ */ jsx8("div", { children: m }, i)) })
+            ]
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function MermaidDiagramGroup({ data, selected, className = "", children }) {
+  const group = data.group;
+  if (!group) return null;
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: `pixerate-diagram-group ${className}`.trim(),
+      "data-selected": selected ? "true" : void 0,
+      style: {
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        borderRadius: 8,
+        border: `1px ${selected ? "solid" : "dashed"} ${selected ? "var(--primary, #2563eb)" : data.resolvedStyles?.stroke ?? "var(--border, #cbd5e1)"}`,
+        background: data.resolvedStyles?.fill ?? "var(--muted, rgba(148, 163, 184, 0.08))",
+        color: data.resolvedStyles?.color ?? "var(--muted-foreground, #475569)"
+      },
+      children: [
+        /* @__PURE__ */ jsx8("div", { style: { padding: "6px 10px", fontSize: 12, fontWeight: 600 }, children: mermaidLabelLines(group.label).join(" ") }),
+        children
+      ]
+    }
+  );
+}
+
+// src/canvas/MermaidThumbnail.tsx
+import { useMemo as useMemo9 } from "react";
+import { parseMermaid } from "@pixerate/editor/diagram";
+import { mermaidThumbnailSvg } from "@pixerate/editor/canvas";
+import { Fragment as Fragment2, jsx as jsx9 } from "react/jsx-runtime";
+function MermaidThumbnail({ source, className = "", fallback = null, ...options }) {
+  const doc = useMemo9(() => typeof source === "string" ? parseMermaid(source) : source, [source]);
+  const key = JSON.stringify(options);
+  const drawn = useMemo9(
+    () => doc.tier === "editable" && doc.graph.nodes.length ? mermaidThumbnailSvg(doc, options) : null,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [doc, key]
+  );
+  if (!drawn) return /* @__PURE__ */ jsx9(Fragment2, { children: fallback });
+  return /* @__PURE__ */ jsx9("span", { className: `pixerate-diagram-thumbnail ${className}`.trim(), style: { display: "inline-block", lineHeight: 0 }, dangerouslySetInnerHTML: { __html: drawn.svg } });
+}
+
+// src/canvas/useDiagramDirector.ts
+import { useRef as useRef16, useSyncExternalStore as useSyncExternalStore5 } from "react";
+import { DiagramDirector, PresenceStore } from "@pixerate/editor/diagram";
+function useDiagramDirector(controller, options) {
+  const placement = useRef16(options.placement);
+  placement.current = options.placement;
+  const ref = useRef16(null);
+  if (!ref.current) {
+    const presence = new PresenceStore();
+    ref.current = {
+      presence,
+      director: new DiagramDirector(controller, presence, { placement: () => placement.current(), speed: options.speed, clock: options.clock, linger: options.linger })
+    };
+  }
+  return ref.current;
+}
+function usePresenceState(presence) {
+  return useSyncExternalStore5(presence.subscribe, presence.getState, presence.getState);
+}
+
+// src/canvas/DiagramPresenceLayer.tsx
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function DiagramPresenceLayer({ presence, viewport, className = "" }) {
+  const { actors } = usePresenceState(presence);
+  if (!actors.length) return null;
+  return /* @__PURE__ */ jsx10("div", { className: `pixerate-diagram-presence ${className}`.trim(), "aria-hidden": "true", style: { position: "absolute", inset: 0, pointerEvents: "none", overflow: "hidden", zIndex: 50 }, children: actors.map((a) => /* @__PURE__ */ jsxs9("div", { "data-actor": a.id, style: { position: "absolute", left: 0, top: 0, transform: `translate(${a.x * viewport.zoom + viewport.x}px, ${a.y * viewport.zoom + viewport.y}px)` }, children: [
+    /* @__PURE__ */ jsx10("svg", { width: "18", height: "20", viewBox: "0 0 12 18", style: { display: "block", transform: a.pressed ? "scale(0.85)" : void 0, transformOrigin: "0 0" }, children: /* @__PURE__ */ jsx10("path", { d: "M0,0 L0,14 L4,10.5 L7,17 L9.5,16 L6.5,9.5 L11.5,9.5 Z", style: { fill: a.color, stroke: "#ffffff", strokeWidth: 1 } }) }),
+    /* @__PURE__ */ jsx10("span", { style: { position: "absolute", left: 14, top: 16, whiteSpace: "nowrap", borderRadius: 4, padding: "1px 6px", fontSize: 11, fontWeight: 600, color: "#ffffff", background: a.color }, children: a.message ?? a.name })
+  ] }, a.id)) });
+}
 export {
   ANIMATABLE_PROPERTIES,
   ANIMATION_DATA_KEY,
@@ -2556,8 +2767,12 @@ export {
   CanvasInstanceInspector,
   CanvasScenesStore2 as CanvasScenesStore,
   DEFAULT_ARRANGE_SHORTCUTS,
+  DiagramPresenceLayer,
   MAX_KEYFRAME_REFS,
   ManualClock,
+  MermaidDiagramGroup,
+  MermaidDiagramNode,
+  MermaidThumbnail,
   RESIZE_HANDLES,
   SHAPE_DATA_KEY,
   SHAPE_KINDS,
@@ -2738,6 +2953,7 @@ export {
   measureSelection2 as measureSelection,
   measureToLine,
   mergeNodeUpdates,
+  mermaidNodeStyle,
   mixColorsOklab,
   moveKeyframes,
   moveLayoutChild,
@@ -2855,6 +3071,11 @@ export {
   useCanvasScenes,
   useCanvasShortcuts,
   useCanvasTokens,
+  useDiagramDirector,
+  useDiagramState,
+  useMermaidDiagram,
+  useMermaidStream,
+  usePresenceState,
   useStreamingCanvas,
   withNodeAnimation,
   withStyleSize,