dishui 0.0.49 → 0.0.50

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

@@ -1,279 +1,279 @@
-import le from "../CodeEditor/editors/CodeEditor.js";
-import { DEFAULT_NODE_DATA as se, ROOT_CANVAS_ID as ue, createEmptyDocument as fe } from "./constants.js";
-import { FlowProvider as he, useFlowContext as Q } from "./context/FlowContext.js";
-import { FlowUIProvider as pe, useFlowUI as X } from "./context/FlowUIContext.js";
-import { FlowAIProvider as me } from "./context/FlowAIContext.js";
+import ue from "../CodeEditor/editors/CodeEditor.js";
+import { DEFAULT_NODE_DATA as oe, ROOT_CANVAS_ID as fe, createEmptyDocument as he } from "./constants.js";
+import { FlowProvider as pe, useFlowContext as Q } from "./context/FlowContext.js";
+import { FlowUIProvider as me, useFlowUI as X } from "./context/FlowUIContext.js";
+import { FlowAIProvider as ge } from "./context/FlowAIContext.js";
 import { generateId as q } from "./nodes/nodeUtils.js";
-import { normalizeEdgeHandles as ge } from "./edges/edgePaths.js";
-import we from "./FlowCanvas.js";
-import { downloadDataURL as Ie, safeFileBaseName as ve } from "./hooks/useFlowImportExport.js";
-import ye, { FlowZoomControls as xe } from "./panels/FlowToolbar.js";
-import { MediaStampContent as be, ShapePaletteContent as Se, SvgStampContent as Ce } from "./panels/ShapePalette.js";
-import { InspectorPanelContent as Me } from "./panels/InspectorPanel.js";
-import { OutlinePanelContent as Pe } from "./panels/OutlinePanel.js";
-import { AIPanelContent as ze } from "./panels/AIPanel.js";
-import { PresentationMode as Ee } from "./panels/PresentationMode.js";
-import { MediaOverlay as De } from "./nodes/MediaOverlay.js";
+import { normalizeEdgeHandles as we } from "./edges/edgePaths.js";
+import Ie from "./FlowCanvas.js";
+import { downloadDataURL as ve, safeFileBaseName as ye } from "./hooks/useFlowImportExport.js";
+import xe, { FlowZoomControls as be } from "./panels/FlowToolbar.js";
+import { MediaStampContent as Se, ShapePaletteContent as Ce, SvgStampContent as Me } from "./panels/ShapePalette.js";
+import { InspectorPanelContent as Pe } from "./panels/InspectorPanel.js";
+import { OutlinePanelContent as ze } from "./panels/OutlinePanel.js";
+import { AIPanelContent as Ee } from "./panels/AIPanel.js";
+import { PresentationMode as De } from "./panels/PresentationMode.js";
+import { MediaOverlay as Ae } from "./nodes/MediaOverlay.js";
 import j from "./panels/FlowPanelGroup.js";
-import Ae from "./panels/Breadcrumb.js";
-import Ne from "./panels/ContextMenu.js";
-import { MiniMapRenderer as Te } from "./canvas/MiniMapRenderer.js";
-import { useUndoRedo as Re } from "./hooks/useUndoRedo.js";
-import { useClipboard as Le } from "./hooks/useClipboard.js";
+import Ne from "./panels/Breadcrumb.js";
+import Te from "./panels/ContextMenu.js";
+import { MiniMapRenderer as Re } from "./canvas/MiniMapRenderer.js";
+import { useUndoRedo as Le } from "./hooks/useUndoRedo.js";
+import { useClipboard as re } from "./hooks/useClipboard.js";
 import { usePdfExport as ke } from "./hooks/usePdfExport.js";
 import { useKeyboardShortcuts as Fe } from "./hooks/useKeyboardShortcuts.js";
 import { useMindMap as Ge } from "./hooks/useMindMap.js";
 /* empty css       */
-import { forwardRef as Oe, useCallback as E, useEffect as Y, useImperativeHandle as We, useMemo as re, useRef as F, useState as $ } from "react";
+import { forwardRef as Oe, useCallback as A, useEffect as Y, useImperativeHandle as We, useMemo as ie, useRef as G, useState as $ } from "react";
 import { jsx as h, jsxs as V } from "react/jsx-runtime";
 import { EditorView as Ke } from "@codemirror/view";
 function Ue(n) {
   let p = !1;
   const u = { ...n.canvases };
-  for (const [w, i] of Object.entries(u)) {
-    const a = i.nodes.map((s) => {
-      if (s.type !== "shapeSvg") return s;
-      const c = s.data.labelPlacement, I = c === "above" ? "top" : c === "center" ? "middle" : c === "below" ? "bottom" : s.data.labelPlacement;
-      return I === s.data.labelPlacement ? s : (p = !0, {
-        ...s,
+  for (const [I, s] of Object.entries(u)) {
+    const r = s.nodes.map((d) => {
+      if (d.type !== "shapeSvg") return d;
+      const o = d.data.labelPlacement, g = o === "above" ? "top" : o === "center" ? "middle" : o === "below" ? "bottom" : d.data.labelPlacement;
+      return g === d.data.labelPlacement ? d : (p = !0, {
+        ...d,
         data: {
-          ...s.data,
-          labelPlacement: I
+          ...d.data,
+          labelPlacement: g
         }
       });
     }), f = /* @__PURE__ */ new Map();
-    for (const s of a) f.set(s.id, s);
-    const e = ge(i.edges, f);
-    (a !== i.nodes || e !== i.edges) && (u[w] = {
-      ...i,
-      nodes: a,
+    for (const d of r) f.set(d.id, d);
+    const e = we(s.edges, f);
+    (r !== s.nodes || e !== s.edges) && (u[I] = {
+      ...s,
+      nodes: r,
       edges: e
-    }, e !== i.edges && (p = !0));
+    }, e !== s.edges && (p = !0));
   }
   return p ? {
     ...n,
     canvases: u
   } : n;
 }
-var ie = {
+var ae = {
   nodeIds: /* @__PURE__ */ new Set(),
   edgeIds: /* @__PURE__ */ new Set(),
   lineIds: /* @__PURE__ */ new Set()
 };
-function He({ onUndo: n, onRedo: p, groupRef: u, geoGroupRef: w, ungroupRef: i }) {
-  const { selection: a, setSelection: f, currentCanvas: e, setDoc: s, currentCanvasId: c } = Q(), { viewport: I } = X(), { copy: l, cut: P, paste: t } = Le(), S = E(() => {
-    const { nodeIds: o, edgeIds: m, lineIds: g } = a;
-    o.size === 0 && m.size === 0 && g.size === 0 || o.size > 1 && !window.confirm(`确定要删除选中的 ${o.size} 个节点吗？`) || (s((C) => {
-      const d = C.canvases[c];
-      return d ? {
-        ...C,
+function He({ onUndo: n, onRedo: p, groupRef: u, geoGroupRef: I, ungroupRef: s }) {
+  const { selection: r, setSelection: f, currentCanvas: e, setDoc: d, currentCanvasId: o } = Q(), { viewport: g } = X(), { copy: l, cut: P, paste: t, duplicate: w } = re(), S = A(() => {
+    const { nodeIds: c, edgeIds: m, lineIds: C } = r;
+    c.size === 0 && m.size === 0 && C.size === 0 || c.size > 1 && !window.confirm(`确定要删除选中的 ${c.size} 个节点吗？`) || (d((M) => {
+      const i = M.canvases[o];
+      return i ? {
+        ...M,
         canvases: {
-          ...C.canvases,
-          [c]: {
-            ...d,
-            nodes: d.nodes.filter((r) => !o.has(r.id)).map((r) => r.parentId && o.has(r.parentId) ? {
-              ...r,
+          ...M.canvases,
+          [o]: {
+            ...i,
+            nodes: i.nodes.filter((a) => !c.has(a.id)).map((a) => a.parentId && c.has(a.parentId) ? {
+              ...a,
               parentId: void 0
-            } : r),
-            edges: d.edges.filter((r) => !m.has(r.id) && !o.has(r.source) && !o.has(r.target)),
-            lines: d.lines.filter((r) => !g.has(r.id)).map((r) => r.parentId && o.has(r.parentId) ? {
-              ...r,
+            } : a),
+            edges: i.edges.filter((a) => !m.has(a.id) && !c.has(a.source) && !c.has(a.target)),
+            lines: i.lines.filter((a) => !C.has(a.id)).map((a) => a.parentId && c.has(a.parentId) ? {
+              ...a,
               parentId: void 0
-            } : r)
+            } : a)
           }
         }
-      } : C;
-    }), f(ie));
+      } : M;
+    }), f(ae));
   }, [
-    a,
-    s,
-    c,
+    r,
+    d,
+    o,
     f
-  ]), v = E(() => {
+  ]), v = A(() => {
     f({
-      nodeIds: new Set(e.nodes.map((o) => o.id)),
-      edgeIds: new Set(e.edges.map((o) => o.id)),
-      lineIds: new Set(e.lines.map((o) => o.id))
+      nodeIds: new Set(e.nodes.map((c) => c.id)),
+      edgeIds: new Set(e.edges.map((c) => c.id)),
+      lineIds: new Set(e.lines.map((c) => c.id))
     });
-  }, [e, f]), M = E((o) => {
-    const m = a.nodeIds, g = a.lineIds;
-    if (m.size + g.size < 2) return;
-    const C = e.nodes.filter((x) => m.has(x.id)), d = e.lines.filter((x) => g.has(x.id)), r = 20;
-    let y = 1 / 0, R = 1 / 0, N = -1 / 0, L = -1 / 0;
-    for (const x of C)
-      y = Math.min(y, x.position.x), R = Math.min(R, x.position.y), N = Math.max(N, x.position.x + x.width), L = Math.max(L, x.position.y + x.height);
-    for (const x of d) for (const D of x.points)
-      y = Math.min(y, D.x), R = Math.min(R, D.y), N = Math.max(N, D.x), L = Math.max(L, D.y);
-    const O = o === "geometryGroup", W = q("group"), b = {
-      id: W,
-      type: o,
+  }, [e, f]), z = A((c) => {
+    const m = r.nodeIds, C = r.lineIds;
+    if (m.size + C.size < 2) return;
+    const M = e.nodes.filter((b) => m.has(b.id)), i = e.lines.filter((b) => C.has(b.id)), a = 20;
+    let y = 1 / 0, L = 1 / 0, R = -1 / 0, k = -1 / 0;
+    for (const b of M)
+      y = Math.min(y, b.position.x), L = Math.min(L, b.position.y), R = Math.max(R, b.position.x + b.width), k = Math.max(k, b.position.y + b.height);
+    for (const b of i) for (const N of b.points)
+      y = Math.min(y, N.x), L = Math.min(L, N.y), R = Math.max(R, N.x), k = Math.max(k, N.y);
+    const W = c === "geometryGroup", K = q("group"), x = {
+      id: K,
+      type: c,
       position: {
-        x: y - r,
-        y: R - r
+        x: y - a,
+        y: L - a
       },
-      width: N - y + r * 2,
-      height: L - R + r * 2,
+      width: R - y + a * 2,
+      height: k - L + a * 2,
       data: {
-        ...se,
-        label: O ? "Geo Group" : "Group",
-        fill: O ? "#fefce8" : "#f0f9ff",
+        ...oe,
+        label: W ? "Geo Group" : "Group",
+        fill: W ? "#fefce8" : "#f0f9ff",
         stroke: "#9ca3af",
         strokeWidth: 1.5,
-        borderStyle: O ? "dashed" : "dotted",
+        borderStyle: W ? "dashed" : "dotted",
         isGroup: !0
       }
     };
-    s((x) => {
-      const D = x.canvases[c];
-      return D ? {
-        ...x,
+    d((b) => {
+      const N = b.canvases[o];
+      return N ? {
+        ...b,
         canvases: {
-          ...x.canvases,
-          [c]: {
-            ...D,
-            nodes: O ? [b, ...D.nodes] : [b, ...D.nodes.map((H) => m.has(H.id) ? {
+          ...b.canvases,
+          [o]: {
+            ...N,
+            nodes: W ? [x, ...N.nodes] : [x, ...N.nodes.map((H) => m.has(H.id) ? {
               ...H,
-              parentId: W
+              parentId: K
             } : H)],
-            lines: O ? D.lines : D.lines.map((H) => g.has(H.id) ? {
+            lines: W ? N.lines : N.lines.map((H) => C.has(H.id) ? {
               ...H,
-              parentId: W
+              parentId: K
             } : H)
           }
         }
-      } : x;
+      } : b;
     }), f({
-      nodeIds: /* @__PURE__ */ new Set([W]),
+      nodeIds: /* @__PURE__ */ new Set([K]),
       edgeIds: /* @__PURE__ */ new Set(),
       lineIds: /* @__PURE__ */ new Set()
     });
   }, [
-    a,
+    r,
     e,
-    s,
-    c,
+    d,
+    o,
     f
-  ]), z = E(() => M("flowGroup"), [M]), Z = E(() => M("geometryGroup"), [M]), G = E(() => {
-    const o = a.nodeIds;
-    if (o.size === 0) return;
-    const m = /* @__PURE__ */ new Set(), g = /* @__PURE__ */ new Set(), C = /* @__PURE__ */ new Set();
-    for (const d of e.nodes) o.has(d.id) && (d.type === "flowGroup" || d.type === "geometryGroup" || d.data.isGroup) && m.add(d.id);
+  ]), Z = A(() => z("flowGroup"), [z]), O = A(() => z("geometryGroup"), [z]), B = A(() => {
+    const c = r.nodeIds;
+    if (c.size === 0) return;
+    const m = /* @__PURE__ */ new Set(), C = /* @__PURE__ */ new Set(), M = /* @__PURE__ */ new Set();
+    for (const i of e.nodes) c.has(i.id) && (i.type === "flowGroup" || i.type === "geometryGroup" || i.data.isGroup) && m.add(i.id);
     if (m.size !== 0) {
-      for (const d of e.nodes) d.parentId && m.has(d.parentId) && g.add(d.id);
-      for (const d of e.lines) d.parentId && m.has(d.parentId) && C.add(d.id);
-      s((d) => {
-        const r = d.canvases[c];
-        return r ? {
-          ...d,
+      for (const i of e.nodes) i.parentId && m.has(i.parentId) && C.add(i.id);
+      for (const i of e.lines) i.parentId && m.has(i.parentId) && M.add(i.id);
+      d((i) => {
+        const a = i.canvases[o];
+        return a ? {
+          ...i,
           canvases: {
-            ...d.canvases,
-            [c]: {
-              ...r,
-              nodes: r.nodes.filter((y) => !m.has(y.id)).map((y) => g.has(y.id) ? {
+            ...i.canvases,
+            [o]: {
+              ...a,
+              nodes: a.nodes.filter((y) => !m.has(y.id)).map((y) => C.has(y.id) ? {
                 ...y,
                 parentId: void 0
               } : y),
-              lines: r.lines.map((y) => C.has(y.id) ? {
+              lines: a.lines.map((y) => M.has(y.id) ? {
                 ...y,
                 parentId: void 0
               } : y)
             }
           }
-        } : d;
+        } : i;
       }), f({
-        nodeIds: g,
+        nodeIds: C,
         edgeIds: /* @__PURE__ */ new Set(),
-        lineIds: C
+        lineIds: M
       });
     }
   }, [
-    a,
+    r,
     e,
-    s,
-    c,
+    d,
+    o,
     f
   ]);
-  u.current = z, w.current = Z, i.current = G;
-  const U = E((o) => {
-    const m = a.nodeIds, g = a.lineIds;
-    m.size === 0 && g.size === 0 || s((C) => {
-      const d = C.canvases[c];
-      if (!d) return C;
-      const r = d.nodes.map((b) => b.zIndex ?? 0), y = r.length > 0 ? Math.max(...r) : 0, R = r.length > 0 ? Math.min(...r) : 0, N = d.lines.map((b) => b.zIndex ?? 0), L = N.length > 0 ? Math.max(...N) : 0, O = N.length > 0 ? Math.min(...N) : 0, W = (b, x, D) => o === "front" ? x + 1 : o === "back" ? D - 1 : o === "up" ? b + 1 : b - 1;
+  u.current = Z, I.current = O, s.current = B;
+  const E = A((c) => {
+    const m = r.nodeIds, C = r.lineIds;
+    m.size === 0 && C.size === 0 || d((M) => {
+      const i = M.canvases[o];
+      if (!i) return M;
+      const a = i.nodes.map((x) => x.zIndex ?? 0), y = a.length > 0 ? Math.max(...a) : 0, L = a.length > 0 ? Math.min(...a) : 0, R = i.lines.map((x) => x.zIndex ?? 0), k = R.length > 0 ? Math.max(...R) : 0, W = R.length > 0 ? Math.min(...R) : 0, K = (x, b, N) => c === "front" ? b + 1 : c === "back" ? N - 1 : c === "up" ? x + 1 : x - 1;
       return {
-        ...C,
+        ...M,
         canvases: {
-          ...C.canvases,
-          [c]: {
-            ...d,
-            nodes: d.nodes.map((b) => m.has(b.id) ? {
-              ...b,
-              zIndex: W(b.zIndex ?? 0, y, R)
-            } : b),
-            lines: d.lines.map((b) => g.has(b.id) ? {
-              ...b,
-              zIndex: W(b.zIndex ?? 0, L, O)
-            } : b)
+          ...M.canvases,
+          [o]: {
+            ...i,
+            nodes: i.nodes.map((x) => m.has(x.id) ? {
+              ...x,
+              zIndex: K(x.zIndex ?? 0, y, L)
+            } : x),
+            lines: i.lines.map((x) => C.has(x.id) ? {
+              ...x,
+              zIndex: K(x.zIndex ?? 0, k, W)
+            } : x)
           }
         }
       };
     });
   }, [
-    a,
-    s,
-    c
+    r,
+    d,
+    o
   ]);
   return Y(() => {
-    const o = (m) => {
-      const g = m.target;
-      if (g?.tagName === "INPUT" || g?.tagName === "TEXTAREA" || g?.isContentEditable) return;
-      const C = Array.from(m.clipboardData?.items ?? []).find((y) => y.type.startsWith("image/"));
-      if (!C) {
+    const c = (m) => {
+      const C = m.target;
+      if (C?.tagName === "INPUT" || C?.tagName === "TEXTAREA" || C?.isContentEditable) return;
+      const M = Array.from(m.clipboardData?.items ?? []).find((y) => y.type.startsWith("image/"));
+      if (!M) {
         m.preventDefault(), t();
         return;
       }
-      const d = C.getAsFile();
-      if (!d) return;
+      const i = M.getAsFile();
+      if (!i) return;
       m.preventDefault();
-      const r = new FileReader();
-      r.onload = () => {
-        if (typeof r.result != "string") return;
-        const y = a.nodeIds.size === 1 ? e.nodes.find((A) => a.nodeIds.has(A.id) && A.type === "mediaNode" && A.data.mediaKind === "image") : void 0;
+      const a = new FileReader();
+      a.onload = () => {
+        if (typeof a.result != "string") return;
+        const y = r.nodeIds.size === 1 ? e.nodes.find((T) => r.nodeIds.has(T.id) && T.type === "mediaNode" && T.data.mediaKind === "image") : void 0;
         if (y) {
-          s((A) => {
-            const B = A.canvases[c];
-            return B ? {
-              ...A,
+          d((T) => {
+            const J = T.canvases[o];
+            return J ? {
+              ...T,
               canvases: {
-                ...A.canvases,
-                [c]: {
-                  ...B,
-                  nodes: B.nodes.map((J) => J.id === y.id ? {
-                    ...J,
+                ...T.canvases,
+                [o]: {
+                  ...J,
+                  nodes: J.nodes.map((D) => D.id === y.id ? {
+                    ...D,
                     data: {
-                      ...J.data,
-                      mediaContent: r.result
+                      ...D.data,
+                      mediaContent: a.result
                     }
-                  } : J)
+                  } : D)
                 }
               }
-            } : A;
+            } : T;
           });
           return;
         }
-        const R = q("node"), N = 320, L = 220, O = window.innerWidth, W = window.innerHeight, b = (O / 2 - I.x) / I.zoom, x = (W / 2 - I.y) / I.zoom, D = Math.max(0, ...e.nodes.map((A) => A.zIndex ?? 0)), H = {
-          id: R,
+        const L = q("node"), R = 320, k = 220, W = window.innerWidth, K = window.innerHeight, x = (W / 2 - g.x) / g.zoom, b = (K / 2 - g.y) / g.zoom, N = Math.max(0, ...e.nodes.map((T) => T.zIndex ?? 0)), H = {
+          id: L,
           type: "mediaNode",
           position: {
-            x: b - N / 2,
-            y: x - L / 2
+            x: x - R / 2,
+            y: b - k / 2
           },
-          width: N,
-          height: L,
-          zIndex: D + 1,
+          width: R,
+          height: k,
+          zIndex: N + 1,
           data: {
-            ...se,
-            label: d.name || "Image",
+            ...oe,
+            label: i.name || "Image",
             fill: "theme:base-100",
             stroke: "theme:base-content",
             strokeWidth: 1.5,
@@ -281,173 +281,175 @@ function He({ onUndo: n, onRedo: p, groupRef: u, geoGroupRef: w, ungroupRef: i }
             fontSize: 13,
             borderStyle: "solid",
             mediaKind: "image",
-            mediaContent: r.result
+            mediaContent: a.result
           }
         };
-        s((A) => {
-          const B = A.canvases[c];
-          return B ? {
-            ...A,
+        d((T) => {
+          const J = T.canvases[o];
+          return J ? {
+            ...T,
             canvases: {
-              ...A.canvases,
-              [c]: {
-                ...B,
-                nodes: [...B.nodes, H]
+              ...T.canvases,
+              [o]: {
+                ...J,
+                nodes: [...J.nodes, H]
               }
             }
-          } : A;
+          } : T;
         }), f({
-          nodeIds: /* @__PURE__ */ new Set([R]),
+          nodeIds: /* @__PURE__ */ new Set([L]),
           edgeIds: /* @__PURE__ */ new Set(),
           lineIds: /* @__PURE__ */ new Set()
         });
-      }, r.readAsDataURL(d);
+      }, a.readAsDataURL(i);
     };
-    return window.addEventListener("paste", o), () => window.removeEventListener("paste", o);
+    return window.addEventListener("paste", c), () => window.removeEventListener("paste", c);
   }, [
     e,
-    c,
+    o,
     t,
-    a,
-    s,
+    r,
+    d,
     f,
-    I
-  ]), Fe(re(() => ({
+    g
+  ]), Fe(ie(() => ({
     undo: n,
     redo: p,
     copy: l,
     cut: P,
     paste: t,
+    duplicate: w,
     deleteSelected: S,
     selectAll: v,
-    group: z,
-    geoGroup: Z,
-    ungroup: G,
-    bringToFront: () => U("front"),
-    bringForward: () => U("up"),
-    sendBackward: () => U("down"),
-    sendToBack: () => U("back")
+    group: Z,
+    geoGroup: O,
+    ungroup: B,
+    bringToFront: () => E("front"),
+    bringForward: () => E("up"),
+    sendBackward: () => E("down"),
+    sendToBack: () => E("back")
   }), [
     n,
     p,
     l,
     P,
     t,
+    w,
     S,
     v,
-    z,
     Z,
-    G,
-    U
+    O,
+    B,
+    E
   ])), Ge(), null;
 }
 function Ze({ pixiRef: n, exportPdfRef: p }) {
   return p.current = ke(n), null;
 }
-var An = Oe(function({ initialDocument: p, onChange: u, width: w, height: i, readOnly: a = !1, onBack: f, onExportPNG: e, onPublish: s, showMiniMap: c = !0, showGrid: I = !0, gridSize: l = 20, className: P, showAI: t = !0, showAIConfig: S = !0, aiConfig: v }, M) {
-  const [z, Z] = $(() => Ue(p ?? fe())), [G, U] = $(ie), o = F(null), m = F(null), g = F(null), { wrappedSetDoc: C, undo: d, redo: r, canUndo: y, canRedo: R } = Re(z, Z), N = F(null), L = F(null), O = F(null), W = F(null), b = F(u);
-  b.current = u;
-  const x = F(z);
-  x.current = z, We(M, () => ({
-    exportPNG: async (T) => {
-      const k = o.current;
-      return !k || k.destroyed ? null : k.exportPNG(T);
+var An = Oe(function({ initialDocument: p, onChange: u, width: I, height: s, readOnly: r = !1, onBack: f, onExportPNG: e, onPublish: d, showMiniMap: o = !0, showGrid: g = !0, gridSize: l = 20, className: P, showAI: t = !0, showAIConfig: w = !0, aiConfig: S }, v) {
+  const [z, Z] = $(() => Ue(p ?? he())), [O, B] = $(ae), E = G(null), c = G(null), m = G(null), { wrappedSetDoc: C, undo: M, redo: i, canUndo: a, canRedo: y } = Le(z, Z), L = G(null), R = G(null), k = G(null), W = G(null), K = G(u);
+  K.current = u;
+  const x = G(z);
+  x.current = z, We(v, () => ({
+    exportPNG: async (D) => {
+      const F = E.current;
+      return !F || F.destroyed ? null : F.exportPNG(D);
     },
     getDocument: () => x.current
   }), []);
-  const D = E((T) => {
-    C((k) => {
-      const _ = typeof T == "function" ? T(k) : T;
-      return queueMicrotask(() => b.current?.(_)), _;
+  const b = A((D) => {
+    C((F) => {
+      const _ = typeof D == "function" ? D(F) : D;
+      return queueMicrotask(() => K.current?.(_)), _;
     });
-  }, [C]), H = E((T) => {
-    o.current = T, m.current && !g.current && (g.current = new Te(m.current));
-  }, []), A = E(async () => {
+  }, [C]), N = A((D) => {
+    E.current = D, c.current && !m.current && (m.current = new Re(c.current));
+  }, []), H = A(async () => {
     if (e) return void e();
-    const T = o.current;
-    if (!T || T.destroyed) return;
-    const k = await T.exportPNG(16777215);
-    k && Ie(k, `${ve(x.current.title)}.png`);
-  }, [e]), B = E(async () => {
+    const D = E.current;
+    if (!D || D.destroyed) return;
+    const F = await D.exportPNG(16777215);
+    F && ve(F, `${ye(x.current.title)}.png`);
+  }, [e]), T = A(async () => {
     await W.current?.();
   }, []);
   Y(() => {
-    let T = !1, k = null;
+    let D = !1, F = null;
     const _ = () => {
-      const K = o.current, ne = g.current;
-      if (!K || K.destroyed || !ne) return;
-      const ce = {
-        x: K.world.position.x,
-        y: K.world.position.y,
-        zoom: K.world.scale.x
-      }, de = z.stack[z.stack.length - 1] ?? "root", te = z.canvases[de];
-      te && ne.update(te.nodes, ce, K.app.screen.width, K.app.screen.height);
+      const U = E.current, ne = m.current;
+      if (!U || U.destroyed || !ne) return;
+      const de = {
+        x: U.world.position.x,
+        y: U.world.position.y,
+        zoom: U.world.scale.x
+      }, le = z.stack[z.stack.length - 1] ?? "root", te = z.canvases[le];
+      te && ne.update(te.nodes, de, U.app.screen.width, U.app.screen.height);
     }, ee = () => {
-      if (T) return;
-      const K = o.current;
-      K && !K.destroyed && g.current ? (K.app.ticker.add(_), k = K) : requestAnimationFrame(ee);
+      if (D) return;
+      const U = E.current;
+      U && !U.destroyed && m.current ? (U.app.ticker.add(_), F = U) : requestAnimationFrame(ee);
     };
     return ee(), () => {
-      T = !0, k && !k.destroyed && k.app.ticker.remove(_);
+      D = !0, F && !F.destroyed && F.app.ticker.remove(_);
     };
   }, [z]);
   const J = {
-    width: w ?? "100%",
-    height: i ?? "100%"
+    width: I ?? "100%",
+    height: s ?? "100%"
   };
   return /* @__PURE__ */ h("div", {
     className: `flow-container ${P ?? ""}`,
     style: J,
-    children: /* @__PURE__ */ h(he, {
+    children: /* @__PURE__ */ h(pe, {
       doc: z,
-      setDoc: D,
-      selection: G,
-      setSelection: U,
-      children: /* @__PURE__ */ h(pe, {
-        showMiniMap: c,
-        showGrid: I,
+      setDoc: b,
+      selection: O,
+      setSelection: B,
+      children: /* @__PURE__ */ h(me, {
+        showMiniMap: o,
+        showGrid: g,
         gridSize: l,
         showAI: t,
-        children: /* @__PURE__ */ V(me, {
-          initialConfig: v,
-          showAIConfig: S,
+        children: /* @__PURE__ */ V(ge, {
+          initialConfig: S,
+          showAIConfig: w,
           children: [
             /* @__PURE__ */ h(He, {
-              onUndo: d,
-              onRedo: r,
-              groupRef: N,
-              geoGroupRef: L,
-              ungroupRef: O
+              onUndo: M,
+              onRedo: i,
+              groupRef: L,
+              geoGroupRef: R,
+              ungroupRef: k
             }),
             /* @__PURE__ */ h(Ze, {
-              pixiRef: o,
+              pixiRef: E,
               exportPdfRef: W
             }),
             /* @__PURE__ */ V(_e, {
-              toolbar: a ? null : /* @__PURE__ */ h(ye, {
+              toolbar: r ? null : /* @__PURE__ */ h(xe, {
                 onBack: f,
-                onUndo: d,
-                onRedo: r,
-                canUndo: y,
-                canRedo: R,
-                onGroup: () => N.current?.(),
-                onGeoGroup: () => L.current?.(),
-                onUngroup: () => O.current?.(),
-                onExportPNG: A,
-                onExportPDF: B,
-                onPublish: s
+                onUndo: M,
+                onRedo: i,
+                canUndo: a,
+                canRedo: y,
+                onGroup: () => L.current?.(),
+                onGeoGroup: () => R.current?.(),
+                onUngroup: () => k.current?.(),
+                onExportPNG: H,
+                onExportPDF: T,
+                onPublish: d
               }),
               children: [
-                /* @__PURE__ */ h(we, { onPixiReady: H }),
-                /* @__PURE__ */ h(De, {}),
-                /* @__PURE__ */ V(Be, { children: [!a && /* @__PURE__ */ h(xe, {}), /* @__PURE__ */ h(Ae, {})] }),
+                /* @__PURE__ */ h(Ie, { onPixiReady: N }),
+                /* @__PURE__ */ h(Ae, {}),
+                /* @__PURE__ */ V(Be, { children: [!r && /* @__PURE__ */ h(be, {}), /* @__PURE__ */ h(Ne, {})] }),
                 /* @__PURE__ */ h(qe, {}),
                 /* @__PURE__ */ h(Xe, {
-                  canvasRef: m,
-                  pixiRef: o,
-                  miniMapRef: g
+                  canvasRef: c,
+                  pixiRef: E,
+                  miniMapRef: m
                 }),
-                /* @__PURE__ */ h(Ee, {})
+                /* @__PURE__ */ h(De, {})
               ]
             })
           ]
@@ -518,38 +520,38 @@ var Je = [
 function Ve(n) {
   switch (n) {
     case "shapes":
-      return /* @__PURE__ */ h(Se, {});
-    case "icons":
       return /* @__PURE__ */ h(Ce, {});
+    case "icons":
+      return /* @__PURE__ */ h(Me, {});
     case "media":
-      return /* @__PURE__ */ h(be, {});
+      return /* @__PURE__ */ h(Se, {});
     case "inspector":
-      return /* @__PURE__ */ h(Me, {});
-    case "outline":
       return /* @__PURE__ */ h(Pe, {});
+    case "outline":
+      return /* @__PURE__ */ h(ze, {});
     case "json":
       return /* @__PURE__ */ h(je, {});
     case "ai":
-      return /* @__PURE__ */ h(ze, {});
+      return /* @__PURE__ */ h(Ee, {});
     default:
       return null;
   }
 }
 function _e({ children: n, toolbar: p }) {
-  const u = X(), { detachedTabs: w, toggleDetach: i, presentation: a } = u, f = Je.filter((t) => !t.showKey || u[t.showKey]), e = (t) => ({
+  const u = X(), { detachedTabs: I, toggleDetach: s, presentation: r } = u, f = Je.filter((t) => !t.showKey || u[t.showKey]), e = (t) => ({
     id: t.id,
     label: t.label,
     icon: t.icon,
     content: Ve(t.id)
-  }), s = f.filter((t) => t.side === "left" && !w.has(t.id)).map(e), c = f.filter((t) => t.side === "right" && !w.has(t.id)).map(e), I = f.filter((t) => w.has(t.id)), l = E((t) => i(t), [i]), P = E((t) => i(t), [i]);
+  }), d = f.filter((t) => t.side === "left" && !I.has(t.id)).map(e), o = f.filter((t) => t.side === "right" && !I.has(t.id)).map(e), g = f.filter((t) => I.has(t.id)), l = A((t) => s(t), [s]), P = A((t) => s(t), [s]);
   return /* @__PURE__ */ V("div", {
     className: "flow-workspace",
-    children: [!a && p, /* @__PURE__ */ V("div", {
+    children: [!r && p, /* @__PURE__ */ V("div", {
       className: "flow-workspace-main",
       children: [
-        !a && s.length > 0 && /* @__PURE__ */ h(j, {
-          tabs: s,
-          defaultTab: s[0]?.id,
+        !r && d.length > 0 && /* @__PURE__ */ h(j, {
+          tabs: d,
+          defaultTab: d[0]?.id,
           resizeEdge: "right",
           defaultWidth: 132,
           onDetach: l
@@ -558,20 +560,20 @@ function _e({ children: n, toolbar: p }) {
           className: "flow-stage",
           children: n
         }),
-        !a && c.length > 0 && /* @__PURE__ */ h(j, {
-          tabs: c,
-          defaultTab: c[0]?.id,
+        !r && o.length > 0 && /* @__PURE__ */ h(j, {
+          tabs: o,
+          defaultTab: o[0]?.id,
           resizeEdge: "left",
           defaultWidth: 220,
           onDetach: l
         }),
-        !a && I.map((t, S) => /* @__PURE__ */ h(j, {
+        !r && g.map((t, w) => /* @__PURE__ */ h(j, {
           tabs: [e(t)],
           resizeEdge: "right",
           defaultWidth: 220,
           style: {
-            top: 48 + S * 40,
-            left: 24 + S * 30
+            top: 48 + w * 40,
+            left: 24 + w * 30
           },
           isDetached: !0,
           onAttach: P
@@ -581,29 +583,29 @@ function _e({ children: n, toolbar: p }) {
   });
 }
 function Xe({ canvasRef: n, pixiRef: p, miniMapRef: u }) {
-  const { showMiniMap: w, setViewport: i, presentation: a } = X(), f = F(!1), e = E((l, P) => {
-    const t = n.current, S = p.current, v = u.current;
-    if (!t || !S || S.destroyed || !v) return;
-    const M = t.getBoundingClientRect();
-    if (M.width === 0 || M.height === 0) return;
-    const { width: z, height: Z } = v.size, G = (l - M.left) / M.width * z, U = (P - M.top) / M.height * Z, o = v.minimapToWorld(G, U);
-    if (!o) return;
-    const m = S.world.scale.x || 1, g = S.app.screen.width, C = S.app.screen.height;
-    i({
-      x: g / 2 - o.x * m,
-      y: C / 2 - o.y * m,
-      zoom: m
+  const { showMiniMap: I, setViewport: s, presentation: r } = X(), f = G(!1), e = A((l, P) => {
+    const t = n.current, w = p.current, S = u.current;
+    if (!t || !w || w.destroyed || !S) return;
+    const v = t.getBoundingClientRect();
+    if (v.width === 0 || v.height === 0) return;
+    const { width: z, height: Z } = S.size, O = (l - v.left) / v.width * z, B = (P - v.top) / v.height * Z, E = S.minimapToWorld(O, B);
+    if (!E) return;
+    const c = w.world.scale.x || 1, m = w.app.screen.width, C = w.app.screen.height;
+    s({
+      x: m / 2 - E.x * c,
+      y: C / 2 - E.y * c,
+      zoom: c
     });
   }, [
     n,
     p,
     u,
-    i
-  ]), s = E((l) => {
+    s
+  ]), d = A((l) => {
     l.preventDefault(), l.currentTarget.setPointerCapture(l.pointerId), f.current = !0, e(l.clientX, l.clientY);
-  }, [e]), c = E((l) => {
+  }, [e]), o = A((l) => {
     f.current && e(l.clientX, l.clientY);
-  }, [e]), I = E((l) => {
+  }, [e]), g = A((l) => {
     f.current = !1;
     try {
       l.currentTarget.releasePointerCapture(l.pointerId);
@@ -613,12 +615,12 @@ function Xe({ canvasRef: n, pixiRef: p, miniMapRef: u }) {
   return /* @__PURE__ */ h("div", {
     className: "flow-minimap",
     style: {
-      display: w && !a ? void 0 : "none",
+      display: I && !r ? void 0 : "none",
       cursor: "pointer"
     },
-    onPointerDown: s,
-    onPointerMove: c,
-    onPointerUp: I,
+    onPointerDown: d,
+    onPointerMove: o,
+    onPointerUp: g,
     title: "点击或拖动以移动画布",
     children: /* @__PURE__ */ h("canvas", {
       ref: n,
@@ -633,93 +635,93 @@ function Xe({ canvasRef: n, pixiRef: p, miniMapRef: u }) {
   });
 }
 function Ye(n, p) {
-  const u = `"id": "${p}"`, w = n.indexOf(u);
-  if (w === -1) return null;
-  let i = 0, a = -1;
-  for (let e = w; e >= 0; e--)
-    if (n[e] === "}" && i++, n[e] === "{") {
-      if (i === 0) {
-        a = e;
+  const u = `"id": "${p}"`, I = n.indexOf(u);
+  if (I === -1) return null;
+  let s = 0, r = -1;
+  for (let e = I; e >= 0; e--)
+    if (n[e] === "}" && s++, n[e] === "{") {
+      if (s === 0) {
+        r = e;
         break;
       }
-      i--;
+      s--;
     }
-  if (a === -1) return null;
-  i = 0;
+  if (r === -1) return null;
+  s = 0;
   let f = -1;
-  for (let e = a; e < n.length; e++)
-    if (n[e] === "{" && i++, n[e] === "}" && (i--, i === 0)) {
+  for (let e = r; e < n.length; e++)
+    if (n[e] === "{" && s++, n[e] === "}" && (s--, s === 0)) {
       f = e;
       break;
     }
   return f === -1 ? null : {
-    startLine: n.slice(0, a).split(`
+    startLine: n.slice(0, r).split(`
 `).length,
     endLine: n.slice(0, f + 1).split(`
 `).length
   };
 }
-function oe(n) {
+function se(n) {
   n.querySelectorAll(".cm-line.flow-json-hl").forEach((p) => p.classList.remove("flow-json-hl"));
 }
 function $e(n, p, u) {
-  const w = n.getView();
-  if (w)
-    for (let i = p; i <= u; i++) try {
-      const a = w.state.doc.line(i), f = w.domAtPos(a.from), e = f.node instanceof HTMLElement ? f.node.closest(".cm-line") : f.node.parentElement?.closest(".cm-line");
+  const I = n.getView();
+  if (I)
+    for (let s = p; s <= u; s++) try {
+      const r = I.state.doc.line(s), f = I.domAtPos(r.from), e = f.node instanceof HTMLElement ? f.node.closest(".cm-line") : f.node.parentElement?.closest(".cm-line");
       e && e.classList.add("flow-json-hl");
     } catch {
     }
 }
 function je() {
-  const { setDoc: n, currentCanvasId: p, selection: u, currentCanvas: w } = Q(), [i, a] = $(""), [f, e] = $(null), s = F(!1), c = F(null), I = F(null), l = re(() => u.nodeIds.size + u.edgeIds.size + u.lineIds.size !== 1 ? null : u.nodeIds.size === 1 ? [...u.nodeIds][0] : u.edgeIds.size === 1 ? [...u.edgeIds][0] : u.lineIds.size === 1 ? [...u.lineIds][0] : null, [u]);
+  const { setDoc: n, currentCanvasId: p, selection: u, currentCanvas: I } = Q(), [s, r] = $(""), [f, e] = $(null), d = G(!1), o = G(null), g = G(null), l = ie(() => u.nodeIds.size + u.edgeIds.size + u.lineIds.size !== 1 ? null : u.nodeIds.size === 1 ? [...u.nodeIds][0] : u.edgeIds.size === 1 ? [...u.edgeIds][0] : u.lineIds.size === 1 ? [...u.lineIds][0] : null, [u]);
   Y(() => {
-    if (s.current) {
-      s.current = !1;
+    if (d.current) {
+      d.current = !1;
       return;
     }
-    a(JSON.stringify(w, null, 2)), e(null);
-  }, [w]), Y(() => {
-    const S = I.current;
-    if (S && oe(S), !l) return;
-    const v = setTimeout(() => {
-      const M = Ye(i, l);
-      if (!M || !I.current) return;
-      const z = c.current?.getView();
+    r(JSON.stringify(I, null, 2)), e(null);
+  }, [I]), Y(() => {
+    const w = g.current;
+    if (w && se(w), !l) return;
+    const S = setTimeout(() => {
+      const v = Ye(s, l);
+      if (!v || !g.current) return;
+      const z = o.current?.getView();
       if (!z) return;
-      const Z = I.current, G = z.scrollDOM;
-      G.style.scrollBehavior = "smooth";
-      const U = z.state.doc.line(M.startLine);
-      z.dispatch({ effects: Ke.scrollIntoView(U.from, {
+      const Z = g.current, O = z.scrollDOM;
+      O.style.scrollBehavior = "smooth";
+      const B = z.state.doc.line(v.startLine);
+      z.dispatch({ effects: Ke.scrollIntoView(B.from, {
         y: "start",
         yMargin: 0
       }) });
-      const o = () => {
-        G.style.scrollBehavior = "", oe(Z), $e(c.current, M.startLine, M.endLine);
+      const E = () => {
+        O.style.scrollBehavior = "", se(Z), $e(o.current, v.startLine, v.endLine);
       };
-      let m;
-      const g = () => {
-        clearTimeout(m), m = setTimeout(o, 100);
+      let c;
+      const m = () => {
+        clearTimeout(c), c = setTimeout(E, 100);
       };
-      G.addEventListener("scroll", g), m = setTimeout(() => {
-        G.removeEventListener("scroll", g), o();
+      O.addEventListener("scroll", m), c = setTimeout(() => {
+        O.removeEventListener("scroll", m), E();
       }, 800);
     }, 120);
-    return () => clearTimeout(v);
-  }, [l, i]);
-  const P = E((S) => {
-    a(S);
+    return () => clearTimeout(S);
+  }, [l, s]);
+  const P = A((w) => {
+    r(w);
     try {
-      const v = JSON.parse(S);
-      v && Array.isArray(v.nodes) && Array.isArray(v.edges) && Array.isArray(v.lines) ? (e(null), s.current = !0, n((M) => ({
-        ...M,
+      const S = JSON.parse(w);
+      S && Array.isArray(S.nodes) && Array.isArray(S.edges) && Array.isArray(S.lines) ? (e(null), d.current = !0, n((v) => ({
+        ...v,
         canvases: {
-          ...M.canvases,
-          [p]: v
+          ...v.canvases,
+          [p]: S
         }
       }))) : e("JSON must have nodes, edges, lines arrays");
-    } catch (v) {
-      e(v.message?.slice(0, 60) ?? "Invalid JSON");
+    } catch (S) {
+      e(S.message?.slice(0, 60) ?? "Invalid JSON");
     }
   }, [n, p]), t = l ? u.nodeIds.has(l) ? "Node" : u.edgeIds.has(l) ? "Edge" : "Line" : null;
   return /* @__PURE__ */ V("div", {
@@ -747,14 +749,14 @@ function je() {
         children: f
       }),
       /* @__PURE__ */ h("div", {
-        ref: I,
+        ref: g,
         style: {
           flex: 1,
           minHeight: 0
         },
-        children: /* @__PURE__ */ h(le, {
-          ref: c,
-          value: i,
+        children: /* @__PURE__ */ h(ue, {
+          ref: o,
+          value: s,
           onChange: P,
           language: "json",
           lineNumbers: !1,
@@ -766,40 +768,50 @@ function je() {
   });
 }
 function qe() {
-  const { contextMenu: n, setContextMenu: p } = X(), { doc: u, setDoc: w, currentCanvasId: i, pushCanvas: a, setSelection: f } = Q();
+  const { contextMenu: n, setContextMenu: p } = X(), { doc: u, setDoc: I, currentCanvasId: s, pushCanvas: r, setSelection: f } = Q(), { duplicate: e } = re();
   if (!n) return null;
-  const e = u.canvases[i];
-  if (!e)
+  const d = u.canvases[s];
+  if (!d)
     return p(null), null;
-  const s = n.nodeId ? e.nodes.find((I) => I.id === n.nodeId) : null, c = [];
-  return s && (s.data.childCanvasId ? (c.push({
+  const o = n.nodeId ? d.nodes.find((l) => l.id === n.nodeId) : null, g = [];
+  return o && (g.push({
+    label: "Duplicate",
+    icon: "⧉",
+    action: () => {
+      e(24, 24, { nodeIds: /* @__PURE__ */ new Set([o.id]) });
+    }
+  }), g.push({
+    label: "---",
+    action: () => {
+    }
+  }), o.data.childCanvasId ? (g.push({
     label: "Enter Sub-canvas",
     icon: "↓",
     action: () => {
-      a(s.data.childCanvasId), f({
+      r(o.data.childCanvasId), f({
         nodeIds: /* @__PURE__ */ new Set(),
         edgeIds: /* @__PURE__ */ new Set(),
         lineIds: /* @__PURE__ */ new Set()
       });
     }
-  }), c.push({
+  }), g.push({
     label: "---",
     action: () => {
     }
-  }), c.push({
+  }), g.push({
     label: "Delete Sub-canvas",
     icon: "🗑",
     danger: !0,
     action: () => {
-      const I = s.data.childCanvasId;
-      w((l) => {
-        const P = { ...l.canvases };
-        ae(P, I);
-        const t = P[i];
-        if (!t) return l;
-        P[i] = {
-          ...t,
-          nodes: t.nodes.map((v) => v.id === s.id ? {
+      const l = o.data.childCanvasId;
+      I((P) => {
+        const t = { ...P.canvases };
+        ce(t, l);
+        const w = t[s];
+        if (!w) return P;
+        t[s] = {
+          ...w,
+          nodes: w.nodes.map((v) => v.id === o.id ? {
             ...v,
             data: {
               ...v.data,
@@ -807,55 +819,55 @@ function qe() {
             }
           } : v)
         };
-        const S = l.stack.filter((v) => P[v]);
-        return S.length === 0 && S.push(ue), {
-          ...l,
-          canvases: P,
+        const S = P.stack.filter((v) => t[v]);
+        return S.length === 0 && S.push(fe), {
+          ...P,
+          canvases: t,
           stack: S
         };
       });
     }
-  })) : c.push({
+  })) : g.push({
     label: "Create Sub-canvas",
     icon: "⊞",
     action: () => {
-      const I = q("canvas");
-      w((l) => {
-        const P = l.canvases[i];
-        return P ? {
-          ...l,
+      const l = q("canvas");
+      I((P) => {
+        const t = P.canvases[s];
+        return t ? {
+          ...P,
           canvases: {
-            ...l.canvases,
-            [i]: {
-              ...P,
-              nodes: P.nodes.map((t) => t.id === s.id ? {
-                ...t,
+            ...P.canvases,
+            [s]: {
+              ...t,
+              nodes: t.nodes.map((w) => w.id === o.id ? {
+                ...w,
                 data: {
-                  ...t.data,
-                  childCanvasId: I
+                  ...w.data,
+                  childCanvasId: l
                 }
-              } : t)
+              } : w)
             },
-            [I]: {
+            [l]: {
               nodes: [],
               edges: [],
               lines: []
             }
           }
-        } : l;
-      }), a(I);
+        } : P;
+      }), r(l);
     }
-  })), c.length === 0 ? null : /* @__PURE__ */ h(Ne, {
+  })), g.length === 0 ? null : /* @__PURE__ */ h(Te, {
     x: n.x,
     y: n.y,
-    items: c,
+    items: g,
     onClose: () => p(null)
   });
 }
-function ae(n, p) {
+function ce(n, p) {
   const u = n[p];
   if (u) {
-    for (const w of u.nodes) w.data.childCanvasId && ae(n, w.data.childCanvasId);
+    for (const I of u.nodes) I.data.childCanvasId && ce(n, I.data.childCanvasId);
     delete n[p];
   }
 }