dishui 0.0.46 → 0.0.48

package/dist/components/pro/Flow/hooks/useFlowImportExport.js

@@ -1,137 +1,194 @@
-import { ROOT_CANVAS_ID as g, createEmptyDocument as y } from "../constants.js";
-import { useFlowContext as v } from "../context/FlowContext.js";
-import { generateId as S } from "../nodes/nodeUtils.js";
-import { useCallback as d } from "react";
-var x = 1;
-function O() {
-  const { doc: n, setDoc: s } = v();
+import { ROOT_CANVAS_ID as $, createEmptyDocument as x } from "../constants.js";
+import { useFlowContext as C } from "../context/FlowContext.js";
+import { generateId as N } from "../nodes/nodeUtils.js";
+import { useCallback as k } from "react";
+var S = 1;
+function F(s, a = "flowchart") {
+  return (s ?? "").trim().replace(/[\\/:*?"<>|]+/g, "-").replace(/\s+/g, " ").trim() || a;
+}
+function J() {
+  const { doc: s, setDoc: a } = C();
   return {
-    exportJSON: d(() => {
-      const t = {
-        version: x,
-        canvases: n.canvases,
-        stack: n.stack
+    exportJSON: k(() => {
+      const e = {
+        version: S,
+        canvases: s.canvases,
+        stack: s.stack,
+        title: s.title
       };
-      return JSON.stringify(t, null, 2);
-    }, [n]),
-    importJSON: d((t) => {
+      return JSON.stringify(e, null, 2);
+    }, [s]),
+    importJSON: k((e) => {
       try {
-        const a = JSON.parse(t);
-        if (!a.canvases || !a.stack) throw new Error("Invalid document format");
-        s({
-          canvases: a.canvases,
-          stack: a.stack
+        const n = JSON.parse(e);
+        if (!n.canvases || !n.stack) throw new Error("Invalid document format");
+        a({
+          canvases: n.canvases,
+          stack: n.stack,
+          title: n.title
         });
-      } catch (a) {
-        console.error("Failed to import JSON:", a);
+      } catch (n) {
+        console.error("Failed to import JSON:", n);
       }
-    }, [s]),
-    importMermaid: d((t) => {
-      const a = I(t);
-      s(a);
-    }, [s]),
-    clearDocument: d(() => {
-      s(y());
-    }, [s])
+    }, [a]),
+    importMermaid: k((e) => {
+      const n = R(e);
+      a(n);
+    }, [a]),
+    exportMarkdown: k(() => O(s), [s]),
+    clearDocument: k(() => {
+      a(x());
+    }, [a])
   };
 }
-function I(n) {
-  const s = n.split(`
-`).map((e) => e.trim()).filter((e) => e && !e.startsWith("%%")), t = /* @__PURE__ */ new Map(), a = [];
-  let m = !1;
-  for (const e of s) {
-    if (/^(graph|flowchart)\s+(LR|RL)/i.test(e)) {
-      m = !0;
+function O(s) {
+  const a = [], e = (i) => {
+    const l = (i.data.label ?? "").trim();
+    return l ? l.replace(/\s+/g, " ") : i.type === "mediaNode" ? `(${i.data.mediaKind ?? "media"})` : `(${i.type})`;
+  }, n = (i, l, h) => {
+    const m = s.canvases[i];
+    if (!m) return;
+    const b = new Map(m.nodes.map((t) => [t.id, t])), o = /* @__PURE__ */ new Map();
+    for (const t of m.nodes) {
+      const r = t.parentId && b.has(t.parentId) ? t.parentId : void 0, d = o.get(r) ?? [];
+      d.push(t), o.set(r, d);
+    }
+    const p = (t, r) => {
+      const d = "  ".repeat(r), c = t.data.isGroup || t.type === "flowGroup" || t.type === "geometryGroup" ? `**${e(t)}**` : e(t);
+      if (a.push(`${d}- ${c}`), t.type === "mediaNode" && t.data.mediaKind) {
+        const g = t.data.mediaKind;
+        if (g === "data" && t.data.dataConfig) {
+          const y = t.data.dataConfig, M = y.columns.map((I) => I.label ?? I.key).join(", ");
+          a.push(`${d}  - 数据表：${y.rows.length} 行 · 列（${M}）`);
+        } else if (t.data.mediaContent && g !== "image" && g !== "model3d") {
+          const y = t.data.mediaContent.trim().split(`
+`)[0].slice(0, 80);
+          y && a.push(`${d}  - ${g}: ${y}`);
+        }
+      }
+      const v = o.get(t.id) ?? [];
+      for (const g of v) p(g, r + 1);
+      const w = t.data.childCanvasId;
+      w && s.canvases[w] && !h.has(w) && (h.add(w), n(w, l + 1, h));
+    }, u = o.get(void 0) ?? [];
+    for (const t of u) p(t, 0);
+    if (m.edges.length > 0) {
+      a.push(""), a.push(`${"#".repeat(Math.min(6, l + 1))} 连接关系`);
+      for (const t of m.edges) {
+        const r = b.get(t.source), d = b.get(t.target);
+        if (!r || !d) continue;
+        const c = t.data.labelText ? ` （${t.data.labelText}）` : "";
+        a.push(`- ${e(r)} → ${e(d)}${c}`);
+      }
+    }
+  }, f = /* @__PURE__ */ new Set([$]);
+  a.push("# 流程图"), a.push(""), n($, 1, f);
+  for (const i of Object.keys(s.canvases))
+    f.has(i) || (f.add(i), a.push(""), a.push(`## 画布 ${i}`), a.push(""), n(i, 2, f));
+  return a.join(`
+`).replace(/\n{3,}/g, `
+
+`).trim() + `
+`;
+}
+function R(s) {
+  const a = s.split(`
+`).map((o) => o.trim()).filter((o) => o && !o.startsWith("%%")), e = /* @__PURE__ */ new Map(), n = [];
+  let f = !1;
+  for (const o of a) {
+    if (/^(graph|flowchart)\s+(LR|RL)/i.test(o)) {
+      f = !0;
       continue;
     }
-    if (/^(graph|flowchart)\s+/i.test(e)) continue;
-    const i = e.match(/^(\w+)(?:\[([^\]]*)\])?\s*(-->|---|-\.->|==>)(?:\|([^|]*)\|)?\s*(\w+)(?:\[([^\]]*)\])?/);
-    if (i) {
-      const [, o, c, , k, r, u] = i;
-      c && !t.has(o) && t.set(o, {
-        id: o,
-        label: c
-      }), u && !t.has(r) && t.set(r, {
-        id: r,
-        label: u
-      }), t.has(o) || t.set(o, {
-        id: o,
-        label: o
-      }), t.has(r) || t.set(r, {
-        id: r,
+    if (/^(graph|flowchart)\s+/i.test(o)) continue;
+    const p = o.match(/^(\w+)(?:\[([^\]]*)\])?\s*(-->|---|-\.->|==>)(?:\|([^|]*)\|)?\s*(\w+)(?:\[([^\]]*)\])?/);
+    if (p) {
+      const [, t, r, , d, c, v] = p;
+      r && !e.has(t) && e.set(t, {
+        id: t,
         label: r
-      }), a.push({
-        from: o,
-        to: r,
-        label: k?.trim()
+      }), v && !e.has(c) && e.set(c, {
+        id: c,
+        label: v
+      }), e.has(t) || e.set(t, {
+        id: t,
+        label: t
+      }), e.has(c) || e.set(c, {
+        id: c,
+        label: c
+      }), n.push({
+        from: t,
+        to: c,
+        label: d?.trim()
       });
       continue;
     }
-    const l = e.match(/^(\w+)\[([^\]]*)\]/);
-    if (l) {
-      const [, o, c] = l;
-      t.has(o) || t.set(o, {
-        id: o,
-        label: c
+    const u = o.match(/^(\w+)\[([^\]]*)\]/);
+    if (u) {
+      const [, t, r] = u;
+      e.has(t) || e.set(t, {
+        id: t,
+        label: r
       });
     }
   }
-  const f = [...t.keys()], p = m ? f.length : Math.ceil(Math.sqrt(f.length)), h = {
+  const i = [...e.keys()], l = f ? i.length : Math.ceil(Math.sqrt(i.length)), h = {
     x: 200,
     y: 120
-  }, w = f.map((e, i) => {
-    const l = i % p, o = Math.floor(i / p), c = t.get(e);
+  }, m = i.map((o, p) => {
+    const u = p % l, t = Math.floor(p / l), r = e.get(o);
     return {
-      id: c.id,
+      id: r.id,
       type: "shapeRoundRect",
       position: {
-        x: 100 + l * h.x,
-        y: 100 + o * h.y
+        x: 100 + u * h.x,
+        y: 100 + t * h.y
       },
       width: 140,
       height: 60,
       data: {
-        label: c.label,
-        fill: "#ffffff",
-        stroke: "#374151",
+        label: r.label,
+        fill: "theme:base-100",
+        stroke: "theme:base-content",
         strokeWidth: 2,
-        color: "#111827",
+        color: "theme:base-content",
         fontSize: 14
       }
     };
-  }), b = a.map((e) => ({
-    id: S("edge"),
-    source: e.from,
-    target: e.to,
+  }), b = n.map((o) => ({
+    id: N("edge"),
+    source: o.from,
+    target: o.to,
     type: "smoothstep",
     data: {
-      strokeColor: "#374151",
+      strokeColor: "theme:base-content",
       strokeWidth: 2,
       lineStyle: "solid",
       markerEnd: "arrowclosed",
-      labelText: e.label
+      labelText: o.label
     }
   }));
   return {
-    canvases: { [g]: {
-      nodes: w,
+    canvases: { [$]: {
+      nodes: m,
       edges: b,
       lines: []
     } },
-    stack: [g]
+    stack: [$]
   };
 }
-async function C(n) {
-  return n.toDataURL("image/png");
+async function G(s) {
+  return s.toDataURL("image/png");
 }
-function L(n, s) {
-  const t = document.createElement("a");
-  t.href = n, t.download = s, document.body.appendChild(t), t.click(), document.body.removeChild(t);
+function j(s, a) {
+  const e = document.createElement("a");
+  e.href = s, e.download = a, document.body.appendChild(e), e.click(), document.body.removeChild(e);
 }
 export {
-  L as downloadDataURL,
-  C as exportCanvasToPNG,
-  O as useFlowImportExport
+  j as downloadDataURL,
+  G as exportCanvasToPNG,
+  F as safeFileBaseName,
+  J as useFlowImportExport
 };
 
 //# sourceMappingURL=useFlowImportExport.js.map

package/dist/components/pro/Flow/hooks/useFlowImportExport.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFlowImportExport.js","names":[],"sources":["../../../../../src/components/pro/Flow/hooks/useFlowImportExport.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useFlowContext } from '../context/FlowContext';\nimport type { FlowDocument, FlowCanvasData, FlowNode, FlowEdge, FlowLine } from '../types';\nimport { createEmptyDocument, ROOT_CANVAS_ID } from '../constants';\nimport { generateId } from '../nodes/nodeUtils';\n\nconst PERSIST_VERSION = 1;\n\ninterface SerializedDocument {\n  version: number;\n  canvases: Record<string, FlowCanvasData>;\n  stack: string[];\n}\n\n/**\n * Serialize/deserialize FlowDocument to/from JSON.\n * Also includes Mermaid flowchart import.\n */\nexport function useFlowImportExport() {\n  const { doc, setDoc } = useFlowContext();\n\n  const exportJSON = useCallback((): string => {\n    const serialized: SerializedDocument = {\n      version: PERSIST_VERSION,\n      canvases: doc.canvases,\n      stack: doc.stack,\n    };\n    return JSON.stringify(serialized, null, 2);\n  }, [doc]);\n\n  const importJSON = useCallback((json: string) => {\n    try {\n      const parsed = JSON.parse(json) as SerializedDocument;\n      if (!parsed.canvases || !parsed.stack) throw new Error('Invalid document format');\n      setDoc({\n        canvases: parsed.canvases,\n        stack: parsed.stack,\n      });\n    } catch (err) {\n      console.error('Failed to import JSON:', err);\n    }\n  }, [setDoc]);\n\n  const importMermaid = useCallback((mermaidCode: string) => {\n    const doc = parseMermaidFlowchart(mermaidCode);\n    setDoc(doc);\n  }, [setDoc]);\n\n  const clearDocument = useCallback(() => {\n    setDoc(createEmptyDocument());\n  }, [setDoc]);\n\n  return { exportJSON, importJSON, importMermaid, clearDocument };\n}\n\n/**\n * Simple Mermaid flowchart parser.\n * Handles basic `graph TD` / `flowchart LR` syntax with node definitions and edges.\n */\nfunction parseMermaidFlowchart(code: string): FlowDocument {\n  const lines = code.split('\\n').map(l => l.trim()).filter(l => l && !l.startsWith('%%'));\n\n  const nodeMap = new Map<string, { id: string; label: string }>();\n  const edges: Array<{ from: string; to: string; label?: string }> = [];\n\n  let isHorizontal = false;\n\n  for (const line of lines) {\n    // Detect direction\n    if (/^(graph|flowchart)\\s+(LR|RL)/i.test(line)) {\n      isHorizontal = true;\n      continue;\n    }\n    if (/^(graph|flowchart)\\s+/i.test(line)) continue;\n\n    // Edge patterns: A --> B, A -->|label| B, A --- B\n    const edgeMatch = line.match(/^(\\w+)(?:\\[([^\\]]*)\\])?\\s*(-->|---|-\\.->|==>)(?:\\|([^|]*)\\|)?\\s*(\\w+)(?:\\[([^\\]]*)\\])?/);\n    if (edgeMatch) {\n      const [, fromId, fromLabel, , edgeLabel, toId, toLabel] = edgeMatch;\n      if (fromLabel && !nodeMap.has(fromId)) nodeMap.set(fromId, { id: fromId, label: fromLabel });\n      if (toLabel && !nodeMap.has(toId)) nodeMap.set(toId, { id: toId, label: toLabel });\n      if (!nodeMap.has(fromId)) nodeMap.set(fromId, { id: fromId, label: fromId });\n      if (!nodeMap.has(toId)) nodeMap.set(toId, { id: toId, label: toId });\n      edges.push({ from: fromId, to: toId, label: edgeLabel?.trim() });\n      continue;\n    }\n\n    // Standalone node: A[Label]\n    const nodeMatch = line.match(/^(\\w+)\\[([^\\]]*)\\]/);\n    if (nodeMatch) {\n      const [, id, label] = nodeMatch;\n      if (!nodeMap.has(id)) nodeMap.set(id, { id, label });\n    }\n  }\n\n  // Layout: simple grid placement\n  const nodeIds = [...nodeMap.keys()];\n  const cols = isHorizontal ? nodeIds.length : Math.ceil(Math.sqrt(nodeIds.length));\n  const spacing = { x: 200, y: 120 };\n\n  const nodes: FlowNode[] = nodeIds.map((id, i) => {\n    const col = i % cols;\n    const row = Math.floor(i / cols);\n    const data = nodeMap.get(id)!;\n    return {\n      id: data.id,\n      type: 'shapeRoundRect' as const,\n      position: { x: 100 + col * spacing.x, y: 100 + row * spacing.y },\n      width: 140,\n      height: 60,\n      data: {\n        label: data.label,\n        fill: '#ffffff',\n        stroke: '#374151',\n        strokeWidth: 2,\n        color: '#111827',\n        fontSize: 14,\n      },\n    };\n  });\n\n  const flowEdges: FlowEdge[] = edges.map((e) => ({\n    id: generateId('edge'),\n    source: e.from,\n    target: e.to,\n    type: 'smoothstep' as const,\n    data: {\n      strokeColor: '#374151',\n      strokeWidth: 2,\n      lineStyle: 'solid' as const,\n      markerEnd: 'arrowclosed' as const,\n      labelText: e.label,\n    },\n  }));\n\n  return {\n    canvases: {\n      [ROOT_CANVAS_ID]: { nodes, edges: flowEdges, lines: [] },\n    },\n    stack: [ROOT_CANVAS_ID],\n  };\n}\n\n/**\n * Export the PixiJS canvas as PNG data URL.\n */\nexport async function exportCanvasToPNG(canvas: HTMLCanvasElement): Promise<string> {\n  return canvas.toDataURL('image/png');\n}\n\n/**\n * Download a data URL as a file.\n */\nexport function downloadDataURL(dataUrl: string, filename: string): void {\n  const a = document.createElement('a');\n  a.href = dataUrl;\n  a.download = filename;\n  document.body.appendChild(a);\n  a.click();\n  document.body.removeChild(a);\n}\n"],"mappings":"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"}
+{"version":3,"file":"useFlowImportExport.js","names":[],"sources":["../../../../../src/components/pro/Flow/hooks/useFlowImportExport.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useFlowContext } from '../context/FlowContext';\nimport type { FlowDocument, FlowCanvasData, FlowNode, FlowEdge, FlowLine } from '../types';\nimport { createEmptyDocument, ROOT_CANVAS_ID } from '../constants';\nimport { generateId } from '../nodes/nodeUtils';\n\nconst PERSIST_VERSION = 1;\n\ninterface SerializedDocument {\n  version: number;\n  canvases: Record<string, FlowCanvasData>;\n  stack: string[];\n  title?: string;\n}\n\n/**\n * Sanitize a project title into a safe file base name, falling back to a\n * default when empty. Shared by all export paths so filenames stay consistent.\n */\nexport function safeFileBaseName(title: string | undefined, fallback = 'flowchart'): string {\n  const name = (title ?? '').trim().replace(/[\\\\/:*?\"<>|]+/g, '-').replace(/\\s+/g, ' ').trim();\n  return name || fallback;\n}\n\n/**\n * Serialize/deserialize FlowDocument to/from JSON.\n * Also includes Mermaid flowchart import.\n */\nexport function useFlowImportExport() {\n  const { doc, setDoc } = useFlowContext();\n\n  const exportJSON = useCallback((): string => {\n    const serialized: SerializedDocument = {\n      version: PERSIST_VERSION,\n      canvases: doc.canvases,\n      stack: doc.stack,\n      title: doc.title,\n    };\n    return JSON.stringify(serialized, null, 2);\n  }, [doc]);\n\n  const importJSON = useCallback((json: string) => {\n    try {\n      const parsed = JSON.parse(json) as SerializedDocument;\n      if (!parsed.canvases || !parsed.stack) throw new Error('Invalid document format');\n      setDoc({\n        canvases: parsed.canvases,\n        stack: parsed.stack,\n        title: parsed.title,\n      });\n    } catch (err) {\n      console.error('Failed to import JSON:', err);\n    }\n  }, [setDoc]);\n\n  const importMermaid = useCallback((mermaidCode: string) => {\n    const doc = parseMermaidFlowchart(mermaidCode);\n    setDoc(doc);\n  }, [setDoc]);\n\n  const exportMarkdown = useCallback((): string => {\n    return documentToMarkdown(doc);\n  }, [doc]);\n\n  const clearDocument = useCallback(() => {\n    setDoc(createEmptyDocument());\n  }, [setDoc]);\n\n  return { exportJSON, importJSON, importMermaid, exportMarkdown, clearDocument };\n}\n\n/**\n * Render a FlowDocument as a Markdown outline describing the node hierarchy\n * and connections. Groups become sections with their children nested beneath;\n * edges are listed as a connection summary per canvas. Sub-canvases (drill-down\n * nodes) are rendered as nested sections.\n */\nfunction documentToMarkdown(doc: FlowDocument): string {\n  const lines: string[] = [];\n\n  const nodeLabel = (n: FlowNode): string => {\n    const raw = (n.data.label ?? '').trim();\n    if (raw) return raw.replace(/\\s+/g, ' ');\n    if (n.type === 'mediaNode') return `(${n.data.mediaKind ?? 'media'})`;\n    return `(${n.type})`;\n  };\n\n  const renderCanvas = (canvasId: string, headingLevel: number, seenCanvases: Set<string>) => {\n    const canvas = doc.canvases[canvasId];\n    if (!canvas) return;\n\n    // Index nodes by id and by parent for hierarchy traversal.\n    const byId = new Map(canvas.nodes.map((n) => [n.id, n]));\n    const childrenOf = new Map<string | undefined, FlowNode[]>();\n    for (const n of canvas.nodes) {\n      const key = n.parentId && byId.has(n.parentId) ? n.parentId : undefined;\n      const list = childrenOf.get(key) ?? [];\n      list.push(n);\n      childrenOf.set(key, list);\n    }\n\n    const emitNode = (node: FlowNode, depth: number) => {\n      const indent = '  '.repeat(depth);\n      const isGroup = node.data.isGroup || node.type === 'flowGroup' || node.type === 'geometryGroup';\n      const bullet = isGroup ? `**${nodeLabel(node)}**` : nodeLabel(node);\n      lines.push(`${indent}- ${bullet}`);\n\n      // Media content (markdown/data/etc.) as a short description line.\n      if (node.type === 'mediaNode' && node.data.mediaKind) {\n        const kind = node.data.mediaKind;\n        if (kind === 'data' && node.data.dataConfig) {\n          const cfg = node.data.dataConfig;\n          const cols = cfg.columns.map((c) => c.label ?? c.key).join(', ');\n          lines.push(`${indent}  - 数据表：${cfg.rows.length} 行 · 列（${cols}）`);\n        } else if (node.data.mediaContent && kind !== 'image' && kind !== 'model3d') {\n          const preview = node.data.mediaContent.trim().split('\\n')[0].slice(0, 80);\n          if (preview) lines.push(`${indent}  - ${kind}: ${preview}`);\n        }\n      }\n\n      // Recurse into visual group children.\n      const kids = childrenOf.get(node.id) ?? [];\n      for (const kid of kids) emitNode(kid, depth + 1);\n\n      // Recurse into a drill-down sub-canvas, if any.\n      const childCanvasId = node.data.childCanvasId;\n      if (childCanvasId && doc.canvases[childCanvasId] && !seenCanvases.has(childCanvasId)) {\n        seenCanvases.add(childCanvasId);\n        renderCanvas(childCanvasId, headingLevel + 1, seenCanvases);\n      }\n    };\n\n    const roots = childrenOf.get(undefined) ?? [];\n    for (const root of roots) emitNode(root, 0);\n\n    // Connections summary.\n    if (canvas.edges.length > 0) {\n      lines.push('');\n      lines.push(`${'#'.repeat(Math.min(6, headingLevel + 1))} 连接关系`);\n      for (const edge of canvas.edges) {\n        const from = byId.get(edge.source);\n        const to = byId.get(edge.target);\n        if (!from || !to) continue;\n        const edgeLabel = edge.data.labelText ? ` （${edge.data.labelText}）` : '';\n        lines.push(`- ${nodeLabel(from)} → ${nodeLabel(to)}${edgeLabel}`);\n      }\n    }\n  };\n\n  const seen = new Set<string>([ROOT_CANVAS_ID]);\n  lines.push('# 流程图');\n  lines.push('');\n  renderCanvas(ROOT_CANVAS_ID, 1, seen);\n\n  // Any orphan canvases not reached via drill-down nodes.\n  for (const canvasId of Object.keys(doc.canvases)) {\n    if (seen.has(canvasId)) continue;\n    seen.add(canvasId);\n    lines.push('');\n    lines.push(`## 画布 ${canvasId}`);\n    lines.push('');\n    renderCanvas(canvasId, 2, seen);\n  }\n\n  return lines.join('\\n').replace(/\\n{3,}/g, '\\n\\n').trim() + '\\n';\n}\n\n/**\n * Simple Mermaid flowchart parser.\n * Handles basic `graph TD` / `flowchart LR` syntax with node definitions and edges.\n */\nfunction parseMermaidFlowchart(code: string): FlowDocument {\n  const lines = code.split('\\n').map(l => l.trim()).filter(l => l && !l.startsWith('%%'));\n\n  const nodeMap = new Map<string, { id: string; label: string }>();\n  const edges: Array<{ from: string; to: string; label?: string }> = [];\n\n  let isHorizontal = false;\n\n  for (const line of lines) {\n    // Detect direction\n    if (/^(graph|flowchart)\\s+(LR|RL)/i.test(line)) {\n      isHorizontal = true;\n      continue;\n    }\n    if (/^(graph|flowchart)\\s+/i.test(line)) continue;\n\n    // Edge patterns: A --> B, A -->|label| B, A --- B\n    const edgeMatch = line.match(/^(\\w+)(?:\\[([^\\]]*)\\])?\\s*(-->|---|-\\.->|==>)(?:\\|([^|]*)\\|)?\\s*(\\w+)(?:\\[([^\\]]*)\\])?/);\n    if (edgeMatch) {\n      const [, fromId, fromLabel, , edgeLabel, toId, toLabel] = edgeMatch;\n      if (fromLabel && !nodeMap.has(fromId)) nodeMap.set(fromId, { id: fromId, label: fromLabel });\n      if (toLabel && !nodeMap.has(toId)) nodeMap.set(toId, { id: toId, label: toLabel });\n      if (!nodeMap.has(fromId)) nodeMap.set(fromId, { id: fromId, label: fromId });\n      if (!nodeMap.has(toId)) nodeMap.set(toId, { id: toId, label: toId });\n      edges.push({ from: fromId, to: toId, label: edgeLabel?.trim() });\n      continue;\n    }\n\n    // Standalone node: A[Label]\n    const nodeMatch = line.match(/^(\\w+)\\[([^\\]]*)\\]/);\n    if (nodeMatch) {\n      const [, id, label] = nodeMatch;\n      if (!nodeMap.has(id)) nodeMap.set(id, { id, label });\n    }\n  }\n\n  // Layout: simple grid placement\n  const nodeIds = [...nodeMap.keys()];\n  const cols = isHorizontal ? nodeIds.length : Math.ceil(Math.sqrt(nodeIds.length));\n  const spacing = { x: 200, y: 120 };\n\n  const nodes: FlowNode[] = nodeIds.map((id, i) => {\n    const col = i % cols;\n    const row = Math.floor(i / cols);\n    const data = nodeMap.get(id)!;\n    return {\n      id: data.id,\n      type: 'shapeRoundRect' as const,\n      position: { x: 100 + col * spacing.x, y: 100 + row * spacing.y },\n      width: 140,\n      height: 60,\n      data: {\n        label: data.label,\n        fill: 'theme:base-100',\n        stroke: 'theme:base-content',\n        strokeWidth: 2,\n        color: 'theme:base-content',\n        fontSize: 14,\n      },\n    };\n  });\n\n  const flowEdges: FlowEdge[] = edges.map((e) => ({\n    id: generateId('edge'),\n    source: e.from,\n    target: e.to,\n    type: 'smoothstep' as const,\n    data: {\n      strokeColor: 'theme:base-content',\n      strokeWidth: 2,\n      lineStyle: 'solid' as const,\n      markerEnd: 'arrowclosed' as const,\n      labelText: e.label,\n    },\n  }));\n\n  return {\n    canvases: {\n      [ROOT_CANVAS_ID]: { nodes, edges: flowEdges, lines: [] },\n    },\n    stack: [ROOT_CANVAS_ID],\n  };\n}\n\n/**\n * Export the PixiJS canvas as PNG data URL.\n */\nexport async function exportCanvasToPNG(canvas: HTMLCanvasElement): Promise<string> {\n  return canvas.toDataURL('image/png');\n}\n\n/**\n * Download a data URL as a file.\n */\nexport function downloadDataURL(dataUrl: string, filename: string): void {\n  const a = document.createElement('a');\n  a.href = dataUrl;\n  a.download = filename;\n  document.body.appendChild(a);\n  a.click();\n  document.body.removeChild(a);\n}\n"],"mappings":";;;;AAMA,IAAM,IAAkB;AAaxB,SAAgB,EAAiB,GAA2B,IAAW,aAAqB;AAE1F,UADc,KAAS,IAAI,KAAK,EAAE,QAAQ,kBAAkB,GAAG,EAAE,QAAQ,QAAQ,GAAG,EAAE,KAC/E,KAAQ;AACjB;AAMA,SAAgB,IAAsB;AACpC,QAAM,EAAE,KAAA,GAAK,QAAA,EAAA,IAAW,EAAe;AAuCvC,SAAO;AAAA,IAAE,YArCU,EAAA,MAA0B;AAC3C,YAAM,IAAiC;AAAA,QACrC,SAAS;AAAA,QACT,UAAU,EAAI;AAAA,QACd,OAAO,EAAI;AAAA,QACX,OAAO,EAAI;AAAA,MACb;AACA,aAAO,KAAK,UAAU,GAAY,MAAM,CAAC;AAAA,IAC3C,GAAG,CAAC,CAAG,CA6BE;AAAA,IAAY,YA3BF,EAAA,CAAa,MAAiB;AAC/C,UAAI;AACF,cAAM,IAAS,KAAK,MAAM,CAAI;AAC9B,YAAI,CAAC,EAAO,YAAY,CAAC,EAAO,MAAO,OAAM,IAAI,MAAM,yBAAyB;AAChF,QAAA,EAAO;AAAA,UACL,UAAU,EAAO;AAAA,UACjB,OAAO,EAAO;AAAA,UACd,OAAO,EAAO;AAAA,QAChB,CAAC;AAAA,MACH,SAAS,GAAK;AACZ,gBAAQ,MAAM,0BAA0B,CAAG;AAAA,MAC7C;AAAA,IACF,GAAG,CAAC,CAAM,CAeW;AAAA,IAAY,eAbX,EAAA,CAAa,MAAwB;AACzD,YAAM,IAAM,EAAsB,CAAW;AAC7C,MAAA,EAAO,CAAG;AAAA,IACZ,GAAG,CAAC,CAAM,CAUuB;AAAA,IAAe,gBARzB,EAAA,MACd,EAAmB,CAAG,GAC5B,CAAC,CAAG,CAMyC;AAAA,IAAgB,eAJ1C,EAAA,MAAkB;AACtC,MAAA,EAAO,EAAoB,CAAC;AAAA,IAC9B,GAAG,CAAC,CAAM,CAEsD;AAAA,EAAc;AAChF;AAQA,SAAS,EAAmB,GAA2B;AACrD,QAAM,IAAkB,CAAC,GAEnB,IAAA,CAAa,MAAwB;AACzC,UAAM,KAAO,EAAE,KAAK,SAAS,IAAI,KAAK;AACtC,WAAI,IAAY,EAAI,QAAQ,QAAQ,GAAG,IACnC,EAAE,SAAS,cAAoB,IAAI,EAAE,KAAK,aAAa,OAAA,MACpD,IAAI,EAAE,IAAA;AAAA,EACf,GAEM,IAAA,CAAgB,GAAkB,GAAsB,MAA8B;AAC1F,UAAM,IAAS,EAAI,SAAS,CAAA;AAC5B,QAAI,CAAC,EAAQ;AAGb,UAAM,IAAO,IAAI,IAAI,EAAO,MAAM,IAAA,CAAK,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,GACjD,IAAa,oBAAI,IAAoC;AAC3D,eAAW,KAAK,EAAO,OAAO;AAC5B,YAAM,IAAM,EAAE,YAAY,EAAK,IAAI,EAAE,QAAQ,IAAI,EAAE,WAAW,QACxD,IAAO,EAAW,IAAI,CAAG,KAAK,CAAC;AACrC,MAAA,EAAK,KAAK,CAAC,GACX,EAAW,IAAI,GAAK,CAAI;AAAA,IAC1B;AAEA,UAAM,IAAA,CAAY,GAAgB,MAAkB;AAClD,YAAM,IAAS,KAAK,OAAO,CAAK,GAE1B,IADU,EAAK,KAAK,WAAW,EAAK,SAAS,eAAe,EAAK,SAAS,kBACvD,KAAK,EAAU,CAAI,CAAA,OAAQ,EAAU,CAAI;AAIlE,UAHA,EAAM,KAAK,GAAG,CAAA,KAAW,CAAA,EAAQ,GAG7B,EAAK,SAAS,eAAe,EAAK,KAAK,WAAW;AACpD,cAAM,IAAO,EAAK,KAAK;AACvB,YAAI,MAAS,UAAU,EAAK,KAAK,YAAY;AAC3C,gBAAM,IAAM,EAAK,KAAK,YAChB,IAAO,EAAI,QAAQ,IAAA,CAAK,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,IAAI;AAC/D,UAAA,EAAM,KAAK,GAAG,CAAA,WAAiB,EAAI,KAAK,MAAA,UAAgB,CAAA,GAAO;AAAA,QACjE,WAAW,EAAK,KAAK,gBAAgB,MAAS,WAAW,MAAS,WAAW;AAC3E,gBAAM,IAAU,EAAK,KAAK,aAAa,KAAK,EAAE,MAAM;AAAA,CAAI,EAAE,CAAA,EAAG,MAAM,GAAG,EAAE;AACxE,UAAI,KAAS,EAAM,KAAK,GAAG,CAAA,OAAa,CAAA,KAAS,CAAA,EAAS;AAAA,QAC5D;AAAA,MACF;AAGA,YAAM,IAAO,EAAW,IAAI,EAAK,EAAE,KAAK,CAAC;AACzC,iBAAW,KAAO,EAAM,CAAA,EAAS,GAAK,IAAQ,CAAC;AAG/C,YAAM,IAAgB,EAAK,KAAK;AAChC,MAAI,KAAiB,EAAI,SAAS,CAAA,KAAkB,CAAC,EAAa,IAAI,CAAa,MACjF,EAAa,IAAI,CAAa,GAC9B,EAAa,GAAe,IAAe,GAAG,CAAY;AAAA,IAE9D,GAEM,IAAQ,EAAW,IAAI,MAAS,KAAK,CAAC;AAC5C,eAAW,KAAQ,EAAO,CAAA,EAAS,GAAM,CAAC;AAG1C,QAAI,EAAO,MAAM,SAAS,GAAG;AAC3B,MAAA,EAAM,KAAK,EAAE,GACb,EAAM,KAAK,GAAG,IAAI,OAAO,KAAK,IAAI,GAAG,IAAe,CAAC,CAAC,CAAA,OAAQ;AAC9D,iBAAW,KAAQ,EAAO,OAAO;AAC/B,cAAM,IAAO,EAAK,IAAI,EAAK,MAAM,GAC3B,IAAK,EAAK,IAAI,EAAK,MAAM;AAC/B,YAAI,CAAC,KAAQ,CAAC,EAAI;AAClB,cAAM,IAAY,EAAK,KAAK,YAAY,KAAK,EAAK,KAAK,SAAA,MAAe;AACtE,QAAA,EAAM,KAAK,KAAK,EAAU,CAAI,CAAA,MAAO,EAAU,CAAE,CAAA,GAAI,CAAA,EAAW;AAAA,MAClE;AAAA,IACF;AAAA,EACF,GAEM,IAAO,oBAAI,IAAY,CAAC,CAAc,CAAC;AAC7C,EAAA,EAAM,KAAK,OAAO,GAClB,EAAM,KAAK,EAAE,GACb,EAAa,GAAgB,GAAG,CAAI;AAGpC,aAAW,KAAY,OAAO,KAAK,EAAI,QAAQ;AAC7C,IAAI,EAAK,IAAI,CAAQ,MACrB,EAAK,IAAI,CAAQ,GACjB,EAAM,KAAK,EAAE,GACb,EAAM,KAAK,SAAS,CAAA,EAAU,GAC9B,EAAM,KAAK,EAAE,GACb,EAAa,GAAU,GAAG,CAAI;AAGhC,SAAO,EAAM,KAAK;AAAA,CAAI,EAAE,QAAQ,WAAW;AAAA;AAAA,CAAM,EAAE,KAAK,IAAI;AAAA;AAC9D;AAMA,SAAS,EAAsB,GAA4B;AACzD,QAAM,IAAQ,EAAK,MAAM;AAAA,CAAI,EAAE,IAAA,CAAI,MAAK,EAAE,KAAK,CAAC,EAAE,OAAA,CAAO,MAAK,KAAK,CAAC,EAAE,WAAW,IAAI,CAAC,GAEhF,IAAU,oBAAI,IAA2C,GACzD,IAA6D,CAAC;AAEpE,MAAI,IAAe;AAEnB,aAAW,KAAQ,GAAO;AAExB,QAAI,gCAAgC,KAAK,CAAI,GAAG;AAC9C,MAAA,IAAe;AACf;AAAA,IACF;AACA,QAAI,yBAAyB,KAAK,CAAI,EAAG;AAGzC,UAAM,IAAY,EAAK,MAAM,wFAAwF;AACrH,QAAI,GAAW;AACb,YAAM,CAAA,EAAG,GAAQ,GAAA,EAAa,GAAW,GAAM,CAAA,IAAW;AAC1D,MAAI,KAAa,CAAC,EAAQ,IAAI,CAAM,KAAG,EAAQ,IAAI,GAAQ;AAAA,QAAE,IAAI;AAAA,QAAQ,OAAO;AAAA,MAAU,CAAC,GACvF,KAAW,CAAC,EAAQ,IAAI,CAAI,KAAG,EAAQ,IAAI,GAAM;AAAA,QAAE,IAAI;AAAA,QAAM,OAAO;AAAA,MAAQ,CAAC,GAC5E,EAAQ,IAAI,CAAM,KAAG,EAAQ,IAAI,GAAQ;AAAA,QAAE,IAAI;AAAA,QAAQ,OAAO;AAAA,MAAO,CAAC,GACtE,EAAQ,IAAI,CAAI,KAAG,EAAQ,IAAI,GAAM;AAAA,QAAE,IAAI;AAAA,QAAM,OAAO;AAAA,MAAK,CAAC,GACnE,EAAM,KAAK;AAAA,QAAE,MAAM;AAAA,QAAQ,IAAI;AAAA,QAAM,OAAO,GAAW,KAAK;AAAA,MAAE,CAAC;AAC/D;AAAA,IACF;AAGA,UAAM,IAAY,EAAK,MAAM,oBAAoB;AACjD,QAAI,GAAW;AACb,YAAM,CAAA,EAAG,GAAI,CAAA,IAAS;AACtB,MAAK,EAAQ,IAAI,CAAE,KAAG,EAAQ,IAAI,GAAI;AAAA,QAAE,IAAA;AAAA,QAAI,OAAA;AAAA,MAAM,CAAC;AAAA,IACrD;AAAA,EACF;AAGA,QAAM,IAAU,CAAC,GAAG,EAAQ,KAAK,CAAC,GAC5B,IAAO,IAAe,EAAQ,SAAS,KAAK,KAAK,KAAK,KAAK,EAAQ,MAAM,CAAC,GAC1E,IAAU;AAAA,IAAE,GAAG;AAAA,IAAK,GAAG;AAAA,EAAI,GAE3B,IAAoB,EAAQ,IAAA,CAAK,GAAI,MAAM;AAC/C,UAAM,IAAM,IAAI,GACV,IAAM,KAAK,MAAM,IAAI,CAAI,GACzB,IAAO,EAAQ,IAAI,CAAE;AAC3B,WAAO;AAAA,MACL,IAAI,EAAK;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,QAAE,GAAG,MAAM,IAAM,EAAQ;AAAA,QAAG,GAAG,MAAM,IAAM,EAAQ;AAAA,MAAE;AAAA,MAC/D,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAM;AAAA,QACJ,OAAO,EAAK;AAAA,QACZ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,OAAO;AAAA,QACP,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF,CAAC,GAEK,IAAwB,EAAM,IAAA,CAAK,OAAO;AAAA,IAC9C,IAAI,EAAW,MAAM;AAAA,IACrB,QAAQ,EAAE;AAAA,IACV,QAAQ,EAAE;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,MACJ,aAAa;AAAA,MACb,aAAa;AAAA,MACb,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW,EAAE;AAAA,IACf;AAAA,EACF,EAAE;AAEF,SAAO;AAAA,IACL,UAAU,EAAA,CACP,CAAA,GAAiB;AAAA,MAAE,OAAA;AAAA,MAAO,OAAO;AAAA,MAAW,OAAO,CAAC;AAAA,IAAE,EACzD;AAAA,IACA,OAAO,CAAC,CAAc;AAAA,EACxB;AACF;AAKA,eAAsB,EAAkB,GAA4C;AAClF,SAAO,EAAO,UAAU,WAAW;AACrC;AAKA,SAAgB,EAAgB,GAAiB,GAAwB;AACvE,QAAM,IAAI,SAAS,cAAc,GAAG;AACpC,EAAA,EAAE,OAAO,GACT,EAAE,WAAW,GACb,SAAS,KAAK,YAAY,CAAC,GAC3B,EAAE,MAAM,GACR,SAAS,KAAK,YAAY,CAAC;AAC7B"}

package/dist/components/pro/Flow/hooks/useLayoutActions.d.ts

@@ -1,7 +1,9 @@
 type Align = 'left' | 'center-h' | 'right' | 'top' | 'center-v' | 'bottom';
 type Distribute = 'horizontal' | 'vertical';
+type LayerMode = 'front' | 'back' | 'up' | 'down';
 export declare function useLayoutActions(): {
     align: (direction: Align) => void;
     distribute: (direction: Distribute) => void;
+    changeZIndex: (mode: LayerMode) => void;
 };
 export {};

package/dist/components/pro/Flow/hooks/useLayoutActions.js

@@ -1,54 +1,54 @@
-import { useFlowContext as b } from "../context/FlowContext.js";
-import { useCallback as x } from "react";
-function v() {
-  const { setDoc: l, currentCanvasId: d, selection: m, currentCanvas: w } = b();
+import { useFlowContext as M } from "../context/FlowContext.js";
+import { useCallback as b } from "react";
+function I() {
+  const { setDoc: u, currentCanvasId: h, selection: g, currentCanvas: m } = M();
   return {
-    align: x((u) => {
-      const p = m.nodeIds;
+    align: b((l) => {
+      const p = g.nodeIds;
       if (p.size < 2) return;
-      const n = w.nodes.filter((t) => p.has(t.id));
-      if (n.length < 2) return;
+      const a = m.nodes.filter((t) => p.has(t.id));
+      if (a.length < 2) return;
       let e;
-      switch (u) {
+      switch (l) {
         case "left":
-          e = Math.min(...n.map((t) => t.position.x));
+          e = Math.min(...a.map((t) => t.position.x));
           break;
         case "right":
-          e = Math.max(...n.map((t) => t.position.x + t.width));
+          e = Math.max(...a.map((t) => t.position.x + t.width));
           break;
         case "center-h":
-          e = n.reduce((t, i) => t + i.position.x + i.width / 2, 0) / n.length;
+          e = a.reduce((t, i) => t + i.position.x + i.width / 2, 0) / a.length;
           break;
         case "top":
-          e = Math.min(...n.map((t) => t.position.y));
+          e = Math.min(...a.map((t) => t.position.y));
           break;
         case "bottom":
-          e = Math.max(...n.map((t) => t.position.y + t.height));
+          e = Math.max(...a.map((t) => t.position.y + t.height));
           break;
         case "center-v":
-          e = n.reduce((t, i) => t + i.position.y + i.height / 2, 0) / n.length;
+          e = a.reduce((t, i) => t + i.position.y + i.height / 2, 0) / a.length;
           break;
       }
-      l((t) => {
-        const i = t.canvases[d];
+      u((t) => {
+        const i = t.canvases[h];
         return i ? {
           ...t,
           canvases: {
             ...t.canvases,
-            [d]: {
+            [h]: {
               ...i,
               nodes: i.nodes.map((o) => {
                 if (!p.has(o.id)) return o;
-                let a = o.position.x, c = o.position.y;
-                switch (u) {
+                let d = o.position.x, c = o.position.y;
+                switch (l) {
                   case "left":
-                    a = e;
+                    d = e;
                     break;
                   case "right":
-                    a = e - o.width;
+                    d = e - o.width;
                     break;
                   case "center-h":
-                    a = e - o.width / 2;
+                    d = e - o.width / 2;
                     break;
                   case "top":
                     c = e;
@@ -63,7 +63,7 @@ function v() {
                 return {
                   ...o,
                   position: {
-                    x: a,
+                    x: d,
                     y: c
                   }
                 };
@@ -73,68 +73,68 @@ function v() {
         } : t;
       });
     }, [
-      l,
-      d,
-      m,
-      w
+      u,
+      h,
+      g,
+      m
     ]),
-    distribute: x((u) => {
-      const p = m.nodeIds;
+    distribute: b((l) => {
+      const p = g.nodeIds;
       if (p.size < 3) return;
-      const n = w.nodes.filter((o) => p.has(o.id));
-      if (n.length < 3) return;
-      const e = [...n].sort((o, a) => u === "horizontal" ? o.position.x - a.position.x : o.position.y - a.position.y), t = e[0], i = e[e.length - 1];
-      if (u === "horizontal") {
-        const o = e.reduce((s, r) => s + r.width, 0), a = (i.position.x + i.width - t.position.x - o) / (e.length - 1);
+      const a = m.nodes.filter((o) => p.has(o.id));
+      if (a.length < 3) return;
+      const e = [...a].sort((o, d) => l === "horizontal" ? o.position.x - d.position.x : o.position.y - d.position.y), t = e[0], i = e[e.length - 1];
+      if (l === "horizontal") {
+        const o = e.reduce((s, r) => s + r.width, 0), d = (i.position.x + i.width - t.position.x - o) / (e.length - 1);
         let c = t.position.x;
-        const g = /* @__PURE__ */ new Map();
+        const f = /* @__PURE__ */ new Map();
         for (const s of e)
-          g.set(s.id, c), c += s.width + a;
-        l((s) => {
-          const r = s.canvases[d];
+          f.set(s.id, c), c += s.width + d;
+        u((s) => {
+          const r = s.canvases[h];
           return r ? {
             ...s,
             canvases: {
               ...s.canvases,
-              [d]: {
+              [h]: {
                 ...r,
-                nodes: r.nodes.map((h) => {
-                  const f = g.get(h.id);
-                  return f !== void 0 ? {
-                    ...h,
+                nodes: r.nodes.map((n) => {
+                  const x = f.get(n.id);
+                  return x !== void 0 ? {
+                    ...n,
                     position: {
-                      ...h.position,
-                      x: f
+                      ...n.position,
+                      x
                     }
-                  } : h;
+                  } : n;
                 })
               }
             }
           } : s;
         });
       } else {
-        const o = e.reduce((s, r) => s + r.height, 0), a = (i.position.y + i.height - t.position.y - o) / (e.length - 1);
+        const o = e.reduce((s, r) => s + r.height, 0), d = (i.position.y + i.height - t.position.y - o) / (e.length - 1);
         let c = t.position.y;
-        const g = /* @__PURE__ */ new Map();
+        const f = /* @__PURE__ */ new Map();
         for (const s of e)
-          g.set(s.id, c), c += s.height + a;
-        l((s) => {
-          const r = s.canvases[d];
+          f.set(s.id, c), c += s.height + d;
+        u((s) => {
+          const r = s.canvases[h];
           return r ? {
             ...s,
             canvases: {
               ...s.canvases,
-              [d]: {
+              [h]: {
                 ...r,
-                nodes: r.nodes.map((h) => {
-                  const f = g.get(h.id);
-                  return f !== void 0 ? {
-                    ...h,
+                nodes: r.nodes.map((n) => {
+                  const x = f.get(n.id);
+                  return x !== void 0 ? {
+                    ...n,
                     position: {
-                      ...h.position,
-                      y: f
+                      ...n.position,
+                      y: x
                     }
-                  } : h;
+                  } : n;
                 })
               }
             }
@@ -142,15 +142,44 @@ function v() {
         });
       }
     }, [
-      l,
-      d,
-      m,
-      w
+      u,
+      h,
+      g,
+      m
+    ]),
+    changeZIndex: b((l) => {
+      const p = g.nodeIds, a = g.lineIds;
+      p.size === 0 && a.size === 0 || u((e) => {
+        const t = e.canvases[h];
+        if (!t) return e;
+        const i = t.nodes.map((n) => n.zIndex ?? 0), o = i.length > 0 ? Math.max(...i) : 0, d = i.length > 0 ? Math.min(...i) : 0, c = t.lines.map((n) => n.zIndex ?? 0), f = c.length > 0 ? Math.max(...c) : 0, s = c.length > 0 ? Math.min(...c) : 0, r = (n, x, w) => l === "front" ? x + 1 : l === "back" ? w - 1 : l === "up" ? n + 1 : n - 1;
+        return {
+          ...e,
+          canvases: {
+            ...e.canvases,
+            [h]: {
+              ...t,
+              nodes: t.nodes.map((n) => p.has(n.id) ? {
+                ...n,
+                zIndex: r(n.zIndex ?? 0, o, d)
+              } : n),
+              lines: t.lines.map((n) => a.has(n.id) ? {
+                ...n,
+                zIndex: r(n.zIndex ?? 0, f, s)
+              } : n)
+            }
+          }
+        };
+      });
+    }, [
+      u,
+      h,
+      g
     ])
   };
 }
 export {
-  v as useLayoutActions
+  I as useLayoutActions
 };
 
 //# sourceMappingURL=useLayoutActions.js.map

package/dist/components/pro/Flow/hooks/useLayoutActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLayoutActions.js","names":[],"sources":["../../../../../src/components/pro/Flow/hooks/useLayoutActions.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useFlowContext } from '../context/FlowContext';\nimport type { FlowNode } from '../types';\n\ntype Align = 'left' | 'center-h' | 'right' | 'top' | 'center-v' | 'bottom';\ntype Distribute = 'horizontal' | 'vertical';\n\nexport function useLayoutActions() {\n  const { setDoc, currentCanvasId, selection, currentCanvas } = useFlowContext();\n\n  const align = useCallback(\n    (direction: Align) => {\n      const ids = selection.nodeIds;\n      if (ids.size < 2) return;\n      const nodes = currentCanvas.nodes.filter(n => ids.has(n.id));\n      if (nodes.length < 2) return;\n\n      let target: number;\n      switch (direction) {\n        case 'left':\n          target = Math.min(...nodes.map(n => n.position.x));\n          break;\n        case 'right':\n          target = Math.max(...nodes.map(n => n.position.x + n.width));\n          break;\n        case 'center-h':\n          target = nodes.reduce((s, n) => s + n.position.x + n.width / 2, 0) / nodes.length;\n          break;\n        case 'top':\n          target = Math.min(...nodes.map(n => n.position.y));\n          break;\n        case 'bottom':\n          target = Math.max(...nodes.map(n => n.position.y + n.height));\n          break;\n        case 'center-v':\n          target = nodes.reduce((s, n) => s + n.position.y + n.height / 2, 0) / nodes.length;\n          break;\n      }\n\n      setDoc(prev => {\n        const canvas = prev.canvases[currentCanvasId];\n        if (!canvas) return prev;\n        return {\n          ...prev,\n          canvases: {\n            ...prev.canvases,\n            [currentCanvasId]: {\n              ...canvas,\n              nodes: canvas.nodes.map(n => {\n                if (!ids.has(n.id)) return n;\n                let newX = n.position.x;\n                let newY = n.position.y;\n                switch (direction) {\n                  case 'left': newX = target; break;\n                  case 'right': newX = target - n.width; break;\n                  case 'center-h': newX = target - n.width / 2; break;\n                  case 'top': newY = target; break;\n                  case 'bottom': newY = target - n.height; break;\n                  case 'center-v': newY = target - n.height / 2; break;\n                }\n                return { ...n, position: { x: newX, y: newY } };\n              }),\n            },\n          },\n        };\n      });\n    },\n    [setDoc, currentCanvasId, selection, currentCanvas],\n  );\n\n  const distribute = useCallback(\n    (direction: Distribute) => {\n      const ids = selection.nodeIds;\n      if (ids.size < 3) return;\n      const nodes = currentCanvas.nodes.filter(n => ids.has(n.id));\n      if (nodes.length < 3) return;\n\n      const sorted = [...nodes].sort((a, b) =>\n        direction === 'horizontal'\n          ? a.position.x - b.position.x\n          : a.position.y - b.position.y,\n      );\n\n      const first = sorted[0];\n      const last = sorted[sorted.length - 1];\n\n      if (direction === 'horizontal') {\n        const totalWidth = sorted.reduce((s, n) => s + n.width, 0);\n        const totalSpace = (last.position.x + last.width) - first.position.x - totalWidth;\n        const gap = totalSpace / (sorted.length - 1);\n        let x = first.position.x;\n\n        const posMap = new Map<string, number>();\n        for (const n of sorted) {\n          posMap.set(n.id, x);\n          x += n.width + gap;\n        }\n\n        setDoc(prev => {\n          const canvas = prev.canvases[currentCanvasId];\n          if (!canvas) return prev;\n          return {\n            ...prev,\n            canvases: {\n              ...prev.canvases,\n              [currentCanvasId]: {\n                ...canvas,\n                nodes: canvas.nodes.map(n => {\n                  const newX = posMap.get(n.id);\n                  return newX !== undefined ? { ...n, position: { ...n.position, x: newX } } : n;\n                }),\n              },\n            },\n          };\n        });\n      } else {\n        const totalHeight = sorted.reduce((s, n) => s + n.height, 0);\n        const totalSpace = (last.position.y + last.height) - first.position.y - totalHeight;\n        const gap = totalSpace / (sorted.length - 1);\n        let y = first.position.y;\n\n        const posMap = new Map<string, number>();\n        for (const n of sorted) {\n          posMap.set(n.id, y);\n          y += n.height + gap;\n        }\n\n        setDoc(prev => {\n          const canvas = prev.canvases[currentCanvasId];\n          if (!canvas) return prev;\n          return {\n            ...prev,\n            canvases: {\n              ...prev.canvases,\n              [currentCanvasId]: {\n                ...canvas,\n                nodes: canvas.nodes.map(n => {\n                  const newY = posMap.get(n.id);\n                  return newY !== undefined ? { ...n, position: { ...n.position, y: newY } } : n;\n                }),\n              },\n            },\n          };\n        });\n      }\n    },\n    [setDoc, currentCanvasId, selection, currentCanvas],\n  );\n\n  return { align, distribute };\n}\n"],"mappings":"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"}
+{"version":3,"file":"useLayoutActions.js","names":[],"sources":["../../../../../src/components/pro/Flow/hooks/useLayoutActions.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useFlowContext } from '../context/FlowContext';\nimport type { FlowNode } from '../types';\n\ntype Align = 'left' | 'center-h' | 'right' | 'top' | 'center-v' | 'bottom';\ntype Distribute = 'horizontal' | 'vertical';\ntype LayerMode = 'front' | 'back' | 'up' | 'down';\n\nexport function useLayoutActions() {\n  const { setDoc, currentCanvasId, selection, currentCanvas } = useFlowContext();\n\n  const align = useCallback(\n    (direction: Align) => {\n      const ids = selection.nodeIds;\n      if (ids.size < 2) return;\n      const nodes = currentCanvas.nodes.filter(n => ids.has(n.id));\n      if (nodes.length < 2) return;\n\n      let target: number;\n      switch (direction) {\n        case 'left':\n          target = Math.min(...nodes.map(n => n.position.x));\n          break;\n        case 'right':\n          target = Math.max(...nodes.map(n => n.position.x + n.width));\n          break;\n        case 'center-h':\n          target = nodes.reduce((s, n) => s + n.position.x + n.width / 2, 0) / nodes.length;\n          break;\n        case 'top':\n          target = Math.min(...nodes.map(n => n.position.y));\n          break;\n        case 'bottom':\n          target = Math.max(...nodes.map(n => n.position.y + n.height));\n          break;\n        case 'center-v':\n          target = nodes.reduce((s, n) => s + n.position.y + n.height / 2, 0) / nodes.length;\n          break;\n      }\n\n      setDoc(prev => {\n        const canvas = prev.canvases[currentCanvasId];\n        if (!canvas) return prev;\n        return {\n          ...prev,\n          canvases: {\n            ...prev.canvases,\n            [currentCanvasId]: {\n              ...canvas,\n              nodes: canvas.nodes.map(n => {\n                if (!ids.has(n.id)) return n;\n                let newX = n.position.x;\n                let newY = n.position.y;\n                switch (direction) {\n                  case 'left': newX = target; break;\n                  case 'right': newX = target - n.width; break;\n                  case 'center-h': newX = target - n.width / 2; break;\n                  case 'top': newY = target; break;\n                  case 'bottom': newY = target - n.height; break;\n                  case 'center-v': newY = target - n.height / 2; break;\n                }\n                return { ...n, position: { x: newX, y: newY } };\n              }),\n            },\n          },\n        };\n      });\n    },\n    [setDoc, currentCanvasId, selection, currentCanvas],\n  );\n\n  const distribute = useCallback(\n    (direction: Distribute) => {\n      const ids = selection.nodeIds;\n      if (ids.size < 3) return;\n      const nodes = currentCanvas.nodes.filter(n => ids.has(n.id));\n      if (nodes.length < 3) return;\n\n      const sorted = [...nodes].sort((a, b) =>\n        direction === 'horizontal'\n          ? a.position.x - b.position.x\n          : a.position.y - b.position.y,\n      );\n\n      const first = sorted[0];\n      const last = sorted[sorted.length - 1];\n\n      if (direction === 'horizontal') {\n        const totalWidth = sorted.reduce((s, n) => s + n.width, 0);\n        const totalSpace = (last.position.x + last.width) - first.position.x - totalWidth;\n        const gap = totalSpace / (sorted.length - 1);\n        let x = first.position.x;\n\n        const posMap = new Map<string, number>();\n        for (const n of sorted) {\n          posMap.set(n.id, x);\n          x += n.width + gap;\n        }\n\n        setDoc(prev => {\n          const canvas = prev.canvases[currentCanvasId];\n          if (!canvas) return prev;\n          return {\n            ...prev,\n            canvases: {\n              ...prev.canvases,\n              [currentCanvasId]: {\n                ...canvas,\n                nodes: canvas.nodes.map(n => {\n                  const newX = posMap.get(n.id);\n                  return newX !== undefined ? { ...n, position: { ...n.position, x: newX } } : n;\n                }),\n              },\n            },\n          };\n        });\n      } else {\n        const totalHeight = sorted.reduce((s, n) => s + n.height, 0);\n        const totalSpace = (last.position.y + last.height) - first.position.y - totalHeight;\n        const gap = totalSpace / (sorted.length - 1);\n        let y = first.position.y;\n\n        const posMap = new Map<string, number>();\n        for (const n of sorted) {\n          posMap.set(n.id, y);\n          y += n.height + gap;\n        }\n\n        setDoc(prev => {\n          const canvas = prev.canvases[currentCanvasId];\n          if (!canvas) return prev;\n          return {\n            ...prev,\n            canvases: {\n              ...prev.canvases,\n              [currentCanvasId]: {\n                ...canvas,\n                nodes: canvas.nodes.map(n => {\n                  const newY = posMap.get(n.id);\n                  return newY !== undefined ? { ...n, position: { ...n.position, y: newY } } : n;\n                }),\n              },\n            },\n          };\n        });\n      }\n    },\n    [setDoc, currentCanvasId, selection, currentCanvas],\n  );\n\n  const changeZIndex = useCallback(\n    (mode: LayerMode) => {\n      const nodeIds = selection.nodeIds;\n      const lineIds = selection.lineIds;\n      if (nodeIds.size === 0 && lineIds.size === 0) return;\n      setDoc(prev => {\n        const canvas = prev.canvases[currentCanvasId];\n        if (!canvas) return prev;\n        const nodeAllZ = canvas.nodes.map(n => n.zIndex ?? 0);\n        const nodeMaxZ = nodeAllZ.length > 0 ? Math.max(...nodeAllZ) : 0;\n        const nodeMinZ = nodeAllZ.length > 0 ? Math.min(...nodeAllZ) : 0;\n        const lineAllZ = canvas.lines.map(l => l.zIndex ?? 0);\n        const lineMaxZ = lineAllZ.length > 0 ? Math.max(...lineAllZ) : 0;\n        const lineMinZ = lineAllZ.length > 0 ? Math.min(...lineAllZ) : 0;\n        const applyZ = (z: number, maxZ: number, minZ: number) => {\n          if (mode === 'front') return maxZ + 1;\n          if (mode === 'back') return minZ - 1;\n          if (mode === 'up') return z + 1;\n          return z - 1;\n        };\n        return {\n          ...prev,\n          canvases: {\n            ...prev.canvases,\n            [currentCanvasId]: {\n              ...canvas,\n              nodes: canvas.nodes.map(n => nodeIds.has(n.id) ? { ...n, zIndex: applyZ(n.zIndex ?? 0, nodeMaxZ, nodeMinZ) } : n),\n              lines: canvas.lines.map(l => lineIds.has(l.id) ? { ...l, zIndex: applyZ(l.zIndex ?? 0, lineMaxZ, lineMinZ) } : l),\n            },\n          },\n        };\n      });\n    },\n    [setDoc, currentCanvasId, selection],\n  );\n\n  return { align, distribute, changeZIndex };\n}\n"],"mappings":"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"}