dishui 0.0.45 → 0.0.46

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

@@ -1,6 +1,6 @@
-import se from "../CodeEditor/editors/CodeEditor.js";
-import { DEFAULT_NODE_DATA as oe, ROOT_CANVAS_ID as re, createEmptyDocument as ie } from "./constants.js";
-import { FlowProvider as ae, useFlowContext as B } from "./context/FlowContext.js";
+import oe from "../CodeEditor/editors/CodeEditor.js";
+import { DEFAULT_NODE_DATA as $, ROOT_CANVAS_ID as re, createEmptyDocument as ie } from "./constants.js";
+import { FlowProvider as ae, useFlowContext as Y } from "./context/FlowContext.js";
 import { FlowUIProvider as ce, useFlowUI as J } from "./context/FlowUIContext.js";
 import { generateId as X } from "./nodes/nodeUtils.js";
 import { normalizeEdgeHandles as de } from "./edges/edgePaths.js";
@@ -11,7 +11,7 @@ import { InspectorPanelContent as me } from "./panels/InspectorPanel.js";
 import { OutlinePanelContent as ge } from "./panels/OutlinePanel.js";
 import { PresentationMode as Ie } from "./panels/PresentationMode.js";
 import { MediaOverlay as we } from "./nodes/MediaOverlay.js";
-import V from "./panels/FlowPanelGroup.js";
+import _ from "./panels/FlowPanelGroup.js";
 import ve from "./panels/Breadcrumb.js";
 import ye from "./panels/ContextMenu.js";
 import { MiniMapRenderer as xe } from "./canvas/MiniMapRenderer.js";
@@ -20,184 +20,195 @@ import { useClipboard as Se } from "./hooks/useClipboard.js";
 import { useKeyboardShortcuts as Me } from "./hooks/useKeyboardShortcuts.js";
 import { useMindMap as Ce } from "./hooks/useMindMap.js";
 /* empty css       */
-import { forwardRef as ze, useCallback as T, useEffect as Z, useImperativeHandle as De, useMemo as q, useRef as L, useState as H } from "react";
-import { jsx as p, jsxs as U } from "react/jsx-runtime";
+import { forwardRef as ze, useCallback as A, useEffect as V, useImperativeHandle as Pe, useMemo as Q, useRef as W, useState as B } from "react";
+import { jsx as w, jsxs as Z } from "react/jsx-runtime";
 import { EditorView as Ee } from "@codemirror/view";
-function Pe(n) {
-  let u = !1;
-  const o = { ...n.canvases };
-  for (const [h, r] of Object.entries(o)) {
-    const a = /* @__PURE__ */ new Map();
-    for (const e of r.nodes) a.set(e.id, e);
-    const c = de(r.edges, a);
-    c !== r.edges && (o[h] = {
+function De(n) {
+  let p = !1;
+  const l = { ...n.canvases };
+  for (const [g, r] of Object.entries(l)) {
+    const a = r.nodes.map((t) => {
+      if (t.type !== "shapeSvg") return t;
+      const c = t.data.labelPlacement, I = c === "above" ? "top" : c === "center" ? "middle" : c === "below" ? "bottom" : t.data.labelPlacement;
+      return I === t.data.labelPlacement ? t : (p = !0, {
+        ...t,
+        data: {
+          ...t.data,
+          labelPlacement: I
+        }
+      });
+    }), f = /* @__PURE__ */ new Map();
+    for (const t of a) f.set(t.id, t);
+    const e = de(r.edges, f);
+    (a !== r.nodes || e !== r.edges) && (l[g] = {
       ...r,
-      edges: c
-    }, u = !0);
+      nodes: a,
+      edges: e
+    }, e !== r.edges && (p = !0));
   }
-  return u ? {
+  return p ? {
     ...n,
-    canvases: o
+    canvases: l
   } : n;
 }
-var Q = {
+var ee = {
   nodeIds: /* @__PURE__ */ new Set(),
   edgeIds: /* @__PURE__ */ new Set(),
   lineIds: /* @__PURE__ */ new Set()
 };
-function Te({ onUndo: n, onRedo: u, groupRef: o, geoGroupRef: h, ungroupRef: r }) {
-  const { selection: a, setSelection: c, currentCanvas: e, setDoc: m, currentCanvasId: f } = B(), { copy: b, cut: s, paste: t } = Se(), S = T(() => {
-    const { nodeIds: d, edgeIds: w, lineIds: v } = a;
-    d.size === 0 && w.size === 0 && v.size === 0 || d.size > 1 && !window.confirm(`确定要删除选中的 ${d.size} 个节点吗？`) || (m((x) => {
-      const i = x.canvases[f];
+function Te({ onUndo: n, onRedo: p, groupRef: l, geoGroupRef: g, ungroupRef: r }) {
+  const { selection: a, setSelection: f, currentCanvas: e, setDoc: t, currentCanvasId: c } = Y(), { viewport: I } = J(), { copy: d, cut: s, paste: M } = Se(), v = A(() => {
+    const { nodeIds: u, edgeIds: m, lineIds: S } = a;
+    u.size === 0 && m.size === 0 && S.size === 0 || u.size > 1 && !window.confirm(`确定要删除选中的 ${u.size} 个节点吗？`) || (t((z) => {
+      const i = z.canvases[c];
       return i ? {
-        ...x,
+        ...z,
         canvases: {
-          ...x.canvases,
-          [f]: {
+          ...z.canvases,
+          [c]: {
             ...i,
-            nodes: i.nodes.filter((l) => !d.has(l.id)).map((l) => l.parentId && d.has(l.parentId) ? {
-              ...l,
+            nodes: i.nodes.filter((o) => !u.has(o.id)).map((o) => o.parentId && u.has(o.parentId) ? {
+              ...o,
               parentId: void 0
-            } : l),
-            edges: i.edges.filter((l) => !w.has(l.id) && !d.has(l.source) && !d.has(l.target)),
-            lines: i.lines.filter((l) => !v.has(l.id)).map((l) => l.parentId && d.has(l.parentId) ? {
-              ...l,
+            } : o),
+            edges: i.edges.filter((o) => !m.has(o.id) && !u.has(o.source) && !u.has(o.target)),
+            lines: i.lines.filter((o) => !S.has(o.id)).map((o) => o.parentId && u.has(o.parentId) ? {
+              ...o,
               parentId: void 0
-            } : l)
+            } : o)
           }
         }
-      } : x;
-    }), c(Q));
+      } : z;
+    }), f(ee));
   }, [
     a,
-    m,
-    f,
-    c
-  ]), g = T(() => {
-    c({
-      nodeIds: new Set(e.nodes.map((d) => d.id)),
-      edgeIds: new Set(e.edges.map((d) => d.id)),
-      lineIds: new Set(e.lines.map((d) => d.id))
+    t,
+    c,
+    f
+  ]), b = A(() => {
+    f({
+      nodeIds: new Set(e.nodes.map((u) => u.id)),
+      edgeIds: new Set(e.edges.map((u) => u.id)),
+      lineIds: new Set(e.lines.map((u) => u.id))
     });
-  }, [e, c]), I = T((d) => {
-    const w = a.nodeIds, v = a.lineIds;
-    if (w.size + v.size < 2) return;
-    const x = e.nodes.filter((z) => w.has(z.id)), i = e.lines.filter((z) => v.has(z.id)), l = 20;
-    let M = 1 / 0, R = 1 / 0, G = -1 / 0, F = -1 / 0;
-    for (const z of x)
-      M = Math.min(M, z.position.x), R = Math.min(R, z.position.y), G = Math.max(G, z.position.x + z.width), F = Math.max(F, z.position.y + z.height);
-    for (const z of i) for (const y of z.points)
-      M = Math.min(M, y.x), R = Math.min(R, y.y), G = Math.max(G, y.x), F = Math.max(F, y.y);
-    const O = d === "geometryGroup", K = X("group"), C = {
-      id: K,
-      type: d,
+  }, [e, f]), P = A((u) => {
+    const m = a.nodeIds, S = a.lineIds;
+    if (m.size + S.size < 2) return;
+    const z = e.nodes.filter((h) => m.has(h.id)), i = e.lines.filter((h) => S.has(h.id)), o = 20;
+    let y = 1 / 0, k = 1 / 0, T = -1 / 0, F = -1 / 0;
+    for (const h of z)
+      y = Math.min(y, h.position.x), k = Math.min(k, h.position.y), T = Math.max(T, h.position.x + h.width), F = Math.max(F, h.position.y + h.height);
+    for (const h of i) for (const x of h.points)
+      y = Math.min(y, x.x), k = Math.min(k, x.y), T = Math.max(T, x.x), F = Math.max(F, x.y);
+    const K = u === "geometryGroup", U = X("group"), C = {
+      id: U,
+      type: u,
       position: {
-        x: M - l,
-        y: R - l
+        x: y - o,
+        y: k - o
       },
-      width: G - M + l * 2,
-      height: F - R + l * 2,
+      width: T - y + o * 2,
+      height: F - k + o * 2,
       data: {
-        ...oe,
-        label: O ? "Geo Group" : "Group",
-        fill: O ? "#fefce8" : "#f0f9ff",
+        ...$,
+        label: K ? "Geo Group" : "Group",
+        fill: K ? "#fefce8" : "#f0f9ff",
         stroke: "#9ca3af",
         strokeWidth: 1.5,
-        borderStyle: O ? "dashed" : "dotted",
+        borderStyle: K ? "dashed" : "dotted",
         isGroup: !0
       }
     };
-    m((z) => {
-      const y = z.canvases[f];
-      return y ? {
-        ...z,
+    t((h) => {
+      const x = h.canvases[c];
+      return x ? {
+        ...h,
         canvases: {
-          ...z.canvases,
-          [f]: {
-            ...y,
-            nodes: O ? [C, ...y.nodes] : [C, ...y.nodes.map((E) => w.has(E.id) ? {
-              ...E,
-              parentId: K
-            } : E)],
-            lines: O ? y.lines : y.lines.map((E) => v.has(E.id) ? {
-              ...E,
-              parentId: K
-            } : E)
+          ...h.canvases,
+          [c]: {
+            ...x,
+            nodes: K ? [C, ...x.nodes] : [C, ...x.nodes.map((L) => m.has(L.id) ? {
+              ...L,
+              parentId: U
+            } : L)],
+            lines: K ? x.lines : x.lines.map((L) => S.has(L.id) ? {
+              ...L,
+              parentId: U
+            } : L)
           }
         }
-      } : z;
-    }), c({
-      nodeIds: /* @__PURE__ */ new Set([K]),
+      } : h;
+    }), f({
+      nodeIds: /* @__PURE__ */ new Set([U]),
       edgeIds: /* @__PURE__ */ new Set(),
       lineIds: /* @__PURE__ */ new Set()
     });
   }, [
     a,
     e,
-    m,
-    f,
-    c
-  ]), D = T(() => I("flowGroup"), [I]), N = T(() => I("geometryGroup"), [I]), A = T(() => {
-    const d = a.nodeIds;
-    if (d.size === 0) return;
-    const w = /* @__PURE__ */ new Set(), v = /* @__PURE__ */ new Set(), x = /* @__PURE__ */ new Set();
-    for (const i of e.nodes) d.has(i.id) && (i.type === "flowGroup" || i.type === "geometryGroup" || i.data.isGroup) && w.add(i.id);
-    if (w.size !== 0) {
-      for (const i of e.nodes) i.parentId && w.has(i.parentId) && v.add(i.id);
-      for (const i of e.lines) i.parentId && w.has(i.parentId) && x.add(i.id);
-      m((i) => {
-        const l = i.canvases[f];
-        return l ? {
+    t,
+    c,
+    f
+  ]), O = A(() => P("flowGroup"), [P]), G = A(() => P("geometryGroup"), [P]), R = A(() => {
+    const u = a.nodeIds;
+    if (u.size === 0) return;
+    const m = /* @__PURE__ */ new Set(), S = /* @__PURE__ */ new Set(), z = /* @__PURE__ */ new Set();
+    for (const i of e.nodes) u.has(i.id) && (i.type === "flowGroup" || i.type === "geometryGroup" || i.data.isGroup) && m.add(i.id);
+    if (m.size !== 0) {
+      for (const i of e.nodes) i.parentId && m.has(i.parentId) && S.add(i.id);
+      for (const i of e.lines) i.parentId && m.has(i.parentId) && z.add(i.id);
+      t((i) => {
+        const o = i.canvases[c];
+        return o ? {
           ...i,
           canvases: {
             ...i.canvases,
-            [f]: {
-              ...l,
-              nodes: l.nodes.filter((M) => !w.has(M.id)).map((M) => v.has(M.id) ? {
-                ...M,
+            [c]: {
+              ...o,
+              nodes: o.nodes.filter((y) => !m.has(y.id)).map((y) => S.has(y.id) ? {
+                ...y,
                 parentId: void 0
-              } : M),
-              lines: l.lines.map((M) => x.has(M.id) ? {
-                ...M,
+              } : y),
+              lines: o.lines.map((y) => z.has(y.id) ? {
+                ...y,
                 parentId: void 0
-              } : M)
+              } : y)
             }
           }
         } : i;
-      }), c({
-        nodeIds: v,
+      }), f({
+        nodeIds: S,
         edgeIds: /* @__PURE__ */ new Set(),
-        lineIds: x
+        lineIds: z
       });
     }
   }, [
     a,
     e,
-    m,
-    f,
-    c
+    t,
+    c,
+    f
   ]);
-  o.current = D, h.current = N, r.current = A;
-  const P = T((d) => {
-    const w = a.nodeIds, v = a.lineIds;
-    w.size === 0 && v.size === 0 || m((x) => {
-      const i = x.canvases[f];
-      if (!i) return x;
-      const l = i.nodes.map((C) => C.zIndex ?? 0), M = l.length > 0 ? Math.max(...l) : 0, R = l.length > 0 ? Math.min(...l) : 0, G = i.lines.map((C) => C.zIndex ?? 0), F = G.length > 0 ? Math.max(...G) : 0, O = G.length > 0 ? Math.min(...G) : 0, K = (C, z, y) => d === "front" ? z + 1 : d === "back" ? y - 1 : d === "up" ? C + 1 : C - 1;
+  l.current = O, g.current = G, r.current = R;
+  const N = A((u) => {
+    const m = a.nodeIds, S = a.lineIds;
+    m.size === 0 && S.size === 0 || t((z) => {
+      const i = z.canvases[c];
+      if (!i) return z;
+      const o = i.nodes.map((C) => C.zIndex ?? 0), y = o.length > 0 ? Math.max(...o) : 0, k = o.length > 0 ? Math.min(...o) : 0, T = i.lines.map((C) => C.zIndex ?? 0), F = T.length > 0 ? Math.max(...T) : 0, K = T.length > 0 ? Math.min(...T) : 0, U = (C, h, x) => u === "front" ? h + 1 : u === "back" ? x - 1 : u === "up" ? C + 1 : C - 1;
       return {
-        ...x,
+        ...z,
         canvases: {
-          ...x.canvases,
-          [f]: {
+          ...z.canvases,
+          [c]: {
             ...i,
-            nodes: i.nodes.map((C) => w.has(C.id) ? {
+            nodes: i.nodes.map((C) => m.has(C.id) ? {
               ...C,
-              zIndex: K(C.zIndex ?? 0, M, R)
+              zIndex: U(C.zIndex ?? 0, y, k)
             } : C),
-            lines: i.lines.map((C) => v.has(C.id) ? {
+            lines: i.lines.map((C) => S.has(C.id) ? {
               ...C,
-              zIndex: K(C.zIndex ?? 0, F, O)
+              zIndex: U(C.zIndex ?? 0, F, K)
             } : C)
           }
         }
@@ -205,138 +216,227 @@ function Te({ onUndo: n, onRedo: u, groupRef: o, geoGroupRef: h, ungroupRef: r }
     });
   }, [
     a,
-    m,
-    f
+    t,
+    c
   ]);
-  return Me(q(() => ({
+  return V(() => {
+    const u = (m) => {
+      const S = m.target;
+      if (S?.tagName === "INPUT" || S?.tagName === "TEXTAREA" || S?.isContentEditable) return;
+      const z = Array.from(m.clipboardData?.items ?? []).find((y) => y.type.startsWith("image/"));
+      if (!z) {
+        m.preventDefault(), M();
+        return;
+      }
+      const i = z.getAsFile();
+      if (!i) return;
+      m.preventDefault();
+      const o = new FileReader();
+      o.onload = () => {
+        if (typeof o.result != "string") return;
+        const y = a.nodeIds.size === 1 ? e.nodes.find((D) => a.nodeIds.has(D.id) && D.type === "mediaNode" && D.data.mediaKind === "image") : void 0;
+        if (y) {
+          t((D) => {
+            const E = D.canvases[c];
+            return E ? {
+              ...D,
+              canvases: {
+                ...D.canvases,
+                [c]: {
+                  ...E,
+                  nodes: E.nodes.map((H) => H.id === y.id ? {
+                    ...H,
+                    data: {
+                      ...H.data,
+                      mediaContent: o.result
+                    }
+                  } : H)
+                }
+              }
+            } : D;
+          });
+          return;
+        }
+        const k = X("node"), T = 320, F = 220, K = window.innerWidth, U = window.innerHeight, C = (K / 2 - I.x) / I.zoom, h = (U / 2 - I.y) / I.zoom, x = Math.max(0, ...e.nodes.map((D) => D.zIndex ?? 0)), L = {
+          id: k,
+          type: "mediaNode",
+          position: {
+            x: C - T / 2,
+            y: h - F / 2
+          },
+          width: T,
+          height: F,
+          zIndex: x + 1,
+          data: {
+            ...$,
+            label: i.name || "Image",
+            fill: "#ffffff",
+            stroke: "#cbd5e1",
+            strokeWidth: 1.5,
+            color: "#1f2937",
+            fontSize: 13,
+            borderStyle: "solid",
+            mediaKind: "image",
+            mediaContent: o.result
+          }
+        };
+        t((D) => {
+          const E = D.canvases[c];
+          return E ? {
+            ...D,
+            canvases: {
+              ...D.canvases,
+              [c]: {
+                ...E,
+                nodes: [...E.nodes, L]
+              }
+            }
+          } : D;
+        }), f({
+          nodeIds: /* @__PURE__ */ new Set([k]),
+          edgeIds: /* @__PURE__ */ new Set(),
+          lineIds: /* @__PURE__ */ new Set()
+        });
+      }, o.readAsDataURL(i);
+    };
+    return window.addEventListener("paste", u), () => window.removeEventListener("paste", u);
+  }, [
+    e,
+    c,
+    M,
+    a,
+    t,
+    f,
+    I
+  ]), Me(Q(() => ({
     undo: n,
-    redo: u,
-    copy: b,
+    redo: p,
+    copy: d,
     cut: s,
-    paste: t,
-    deleteSelected: S,
-    selectAll: g,
-    group: D,
-    geoGroup: N,
-    ungroup: A,
-    bringToFront: () => P("front"),
-    bringForward: () => P("up"),
-    sendBackward: () => P("down"),
-    sendToBack: () => P("back")
+    paste: M,
+    deleteSelected: v,
+    selectAll: b,
+    group: O,
+    geoGroup: G,
+    ungroup: R,
+    bringToFront: () => N("front"),
+    bringForward: () => N("up"),
+    sendBackward: () => N("down"),
+    sendToBack: () => N("back")
   }), [
     n,
-    u,
-    b,
+    p,
+    d,
     s,
-    t,
-    S,
-    g,
-    D,
-    N,
-    A,
-    P
+    M,
+    v,
+    b,
+    O,
+    G,
+    R,
+    N
   ])), Ce(), null;
 }
-var hn = ze(function({ initialDocument: u, onChange: o, width: h, height: r, readOnly: a = !1, onBack: c, onExportPNG: e, onPublish: m, showMiniMap: f = !0, showGrid: b = !0, gridSize: s = 20, className: t }, S) {
-  const [g, I] = H(() => Pe(u ?? ie())), [D, N] = H(Q), A = L(null), P = L(null), d = L(null), { wrappedSetDoc: w, undo: v, redo: x, canUndo: i, canRedo: l } = be(g, I), M = L(null), R = L(null), G = L(null), F = L(o);
-  F.current = o;
-  const O = L(g);
-  O.current = g, De(S, () => ({
-    exportPNG: async (y) => {
-      const E = A.current;
-      return !E || E.destroyed ? null : E.exportPNG(y);
+var hn = ze(function({ initialDocument: p, onChange: l, width: g, height: r, readOnly: a = !1, onBack: f, onExportPNG: e, onPublish: t, showMiniMap: c = !0, showGrid: I = !0, gridSize: d = 20, className: s }, M) {
+  const [v, b] = B(() => De(p ?? ie())), [P, O] = B(ee), G = W(null), R = W(null), N = W(null), { wrappedSetDoc: u, undo: m, redo: S, canUndo: z, canRedo: i } = be(v, b), o = W(null), y = W(null), k = W(null), T = W(l);
+  T.current = l;
+  const F = W(v);
+  F.current = v, Pe(M, () => ({
+    exportPNG: async (h) => {
+      const x = G.current;
+      return !x || x.destroyed ? null : x.exportPNG(h);
     },
-    getDocument: () => O.current
+    getDocument: () => F.current
   }), []);
-  const K = T((y) => {
-    w((E) => {
-      const W = typeof y == "function" ? y(E) : y;
-      return queueMicrotask(() => F.current?.(W)), W;
+  const K = A((h) => {
+    u((x) => {
+      const L = typeof h == "function" ? h(x) : h;
+      return queueMicrotask(() => T.current?.(L)), L;
     });
-  }, [w]), C = T((y) => {
-    A.current = y, P.current && !d.current && (d.current = new xe(P.current));
+  }, [u]), U = A((h) => {
+    G.current = h, R.current && !N.current && (N.current = new xe(R.current));
   }, []);
-  Z(() => {
-    let y = !1, E = null;
-    const W = () => {
-      const k = A.current, j = d.current;
-      if (!k || k.destroyed || !j) return;
-      const ne = {
-        x: k.world.position.x,
-        y: k.world.position.y,
-        zoom: k.world.scale.x
-      }, te = g.stack[g.stack.length - 1] ?? "root", Y = g.canvases[te];
-      Y && j.update(Y.nodes, ne, k.app.screen.width, k.app.screen.height);
-    }, _ = () => {
-      if (y) return;
-      const k = A.current;
-      k && !k.destroyed && d.current ? (k.app.ticker.add(W), E = k) : requestAnimationFrame(_);
+  V(() => {
+    let h = !1, x = null;
+    const L = () => {
+      const E = G.current, H = N.current;
+      if (!E || E.destroyed || !H) return;
+      const te = {
+        x: E.world.position.x,
+        y: E.world.position.y,
+        zoom: E.world.scale.x
+      }, se = v.stack[v.stack.length - 1] ?? "root", j = v.canvases[se];
+      j && H.update(j.nodes, te, E.app.screen.width, E.app.screen.height);
+    }, D = () => {
+      if (h) return;
+      const E = G.current;
+      E && !E.destroyed && N.current ? (E.app.ticker.add(L), x = E) : requestAnimationFrame(D);
     };
-    return _(), () => {
-      y = !0, E && !E.destroyed && E.app.ticker.remove(W);
+    return D(), () => {
+      h = !0, x && !x.destroyed && x.app.ticker.remove(L);
     };
-  }, [g]);
-  const z = {
-    width: h ?? "100%",
+  }, [v]);
+  const C = {
+    width: g ?? "100%",
     height: r ?? "100%"
   };
-  return /* @__PURE__ */ p("div", {
-    className: `flow-container ${t ?? ""}`,
-    style: z,
-    children: /* @__PURE__ */ p(ae, {
-      doc: g,
+  return /* @__PURE__ */ w("div", {
+    className: `flow-container ${s ?? ""}`,
+    style: C,
+    children: /* @__PURE__ */ w(ae, {
+      doc: v,
       setDoc: K,
-      selection: D,
-      setSelection: N,
-      children: /* @__PURE__ */ U(ce, {
-        showMiniMap: f,
-        showGrid: b,
-        gridSize: s,
-        children: [/* @__PURE__ */ p(Te, {
-          onUndo: v,
-          onRedo: x,
-          groupRef: M,
-          geoGroupRef: R,
-          ungroupRef: G
-        }), /* @__PURE__ */ U(ke, { children: [
-          /* @__PURE__ */ p(le, { onPixiReady: C }),
-          /* @__PURE__ */ U(Ae, { children: [
-            /* @__PURE__ */ p(we, {}),
-            !a && /* @__PURE__ */ p(ue, {
-              onBack: c,
-              onUndo: v,
-              onRedo: x,
-              canUndo: i,
-              canRedo: l,
-              onGroup: () => M.current?.(),
-              onGeoGroup: () => R.current?.(),
-              onUngroup: () => G.current?.(),
+      selection: P,
+      setSelection: O,
+      children: /* @__PURE__ */ Z(ce, {
+        showMiniMap: c,
+        showGrid: I,
+        gridSize: d,
+        children: [/* @__PURE__ */ w(Te, {
+          onUndo: m,
+          onRedo: S,
+          groupRef: o,
+          geoGroupRef: y,
+          ungroupRef: k
+        }), /* @__PURE__ */ Z(Re, { children: [
+          /* @__PURE__ */ w(le, { onPixiReady: U }),
+          /* @__PURE__ */ Z(Ae, { children: [
+            /* @__PURE__ */ w(we, {}),
+            !a && /* @__PURE__ */ w(ue, {
+              onBack: f,
+              onUndo: m,
+              onRedo: S,
+              canUndo: z,
+              canRedo: i,
+              onGroup: () => o.current?.(),
+              onGeoGroup: () => y.current?.(),
+              onUngroup: () => k.current?.(),
               onExportPNG: e,
-              onPublish: m
+              onPublish: t
             }),
-            /* @__PURE__ */ p(ve, {})
+            /* @__PURE__ */ w(ve, {})
           ] }),
-          /* @__PURE__ */ p(Ke, {}),
-          /* @__PURE__ */ p(Le, {
-            canvasRef: P,
-            pixiRef: A,
-            miniMapRef: d
+          /* @__PURE__ */ w(We, {}),
+          /* @__PURE__ */ w(ke, {
+            canvasRef: R,
+            pixiRef: G,
+            miniMapRef: N
           }),
-          /* @__PURE__ */ p(Ie, {})
+          /* @__PURE__ */ w(Ie, {})
         ] })]
       })
     })
   });
 });
 function Ae({ children: n }) {
-  const { presentation: u } = J();
-  return /* @__PURE__ */ p("div", {
+  const { presentation: p } = J();
+  return /* @__PURE__ */ w("div", {
     className: "flow-overlay",
-    style: { display: u ? "none" : void 0 },
+    style: { display: p ? "none" : void 0 },
     children: n
   });
 }
-var Ge = [
+var Ne = [
   {
     id: "shapes",
     label: "Shapes",
@@ -380,106 +480,106 @@ var Ge = [
     showKey: "showJson"
   }
 ];
-function Ne(n) {
+function Le(n) {
   switch (n) {
     case "shapes":
-      return /* @__PURE__ */ p(he, {});
+      return /* @__PURE__ */ w(he, {});
     case "icons":
-      return /* @__PURE__ */ p(pe, {});
+      return /* @__PURE__ */ w(pe, {});
     case "media":
-      return /* @__PURE__ */ p(fe, {});
+      return /* @__PURE__ */ w(fe, {});
     case "inspector":
-      return /* @__PURE__ */ p(me, {});
+      return /* @__PURE__ */ w(me, {});
     case "outline":
-      return /* @__PURE__ */ p(ge, {});
+      return /* @__PURE__ */ w(ge, {});
     case "json":
-      return /* @__PURE__ */ p(Oe, {});
+      return /* @__PURE__ */ w(Oe, {});
     default:
       return null;
   }
 }
-function ke({ children: n }) {
-  const u = J(), { detachedTabs: o, toggleDetach: h, presentation: r } = u, a = Ge.filter((t) => !t.showKey || u[t.showKey]), c = (t) => ({
-    id: t.id,
-    label: t.label,
-    icon: t.icon,
-    content: Ne(t.id)
-  }), e = a.filter((t) => t.side === "left" && !o.has(t.id)).map(c), m = a.filter((t) => t.side === "right" && !o.has(t.id)).map(c), f = a.filter((t) => o.has(t.id)), b = T((t) => h(t), [h]), s = T((t) => h(t), [h]);
-  return /* @__PURE__ */ U("div", {
+function Re({ children: n }) {
+  const p = J(), { detachedTabs: l, toggleDetach: g, presentation: r } = p, a = Ne.filter((s) => !s.showKey || p[s.showKey]), f = (s) => ({
+    id: s.id,
+    label: s.label,
+    icon: s.icon,
+    content: Le(s.id)
+  }), e = a.filter((s) => s.side === "left" && !l.has(s.id)).map(f), t = a.filter((s) => s.side === "right" && !l.has(s.id)).map(f), c = a.filter((s) => l.has(s.id)), I = A((s) => g(s), [g]), d = A((s) => g(s), [g]);
+  return /* @__PURE__ */ Z("div", {
     className: "flow-workspace",
     children: [
-      !r && e.length > 0 && /* @__PURE__ */ p(V, {
+      !r && e.length > 0 && /* @__PURE__ */ w(_, {
         tabs: e,
         defaultTab: e[0]?.id,
         resizeEdge: "right",
         defaultWidth: 220,
-        onDetach: b
+        onDetach: I
       }),
-      /* @__PURE__ */ U("div", {
+      /* @__PURE__ */ Z("div", {
         className: "flow-stage",
-        children: [n, !r && f.map((t, S) => /* @__PURE__ */ p(V, {
-          tabs: [c(t)],
+        children: [n, !r && c.map((s, M) => /* @__PURE__ */ w(_, {
+          tabs: [f(s)],
           resizeEdge: "right",
           defaultWidth: 240,
           style: {
-            top: 64 + S * 40,
-            left: 24 + S * 30
+            top: 64 + M * 40,
+            left: 24 + M * 30
           },
           isDetached: !0,
-          onAttach: s
-        }, t.id))]
+          onAttach: d
+        }, s.id))]
       }),
-      !r && m.length > 0 && /* @__PURE__ */ p(V, {
-        tabs: m,
-        defaultTab: m[0]?.id,
+      !r && t.length > 0 && /* @__PURE__ */ w(_, {
+        tabs: t,
+        defaultTab: t[0]?.id,
         resizeEdge: "left",
         defaultWidth: 240,
-        onDetach: b
+        onDetach: I
       })
     ]
   });
 }
-function Le({ canvasRef: n, pixiRef: u, miniMapRef: o }) {
-  const { showMiniMap: h, setViewport: r, presentation: a } = J(), c = L(!1), e = T((s, t) => {
-    const S = n.current, g = u.current, I = o.current;
-    if (!S || !g || g.destroyed || !I) return;
-    const D = S.getBoundingClientRect();
-    if (D.width === 0 || D.height === 0) return;
-    const { width: N, height: A } = I.size, P = (s - D.left) / D.width * N, d = (t - D.top) / D.height * A, w = I.minimapToWorld(P, d);
-    if (!w) return;
-    const v = g.world.scale.x || 1, x = g.app.screen.width, i = g.app.screen.height;
+function ke({ canvasRef: n, pixiRef: p, miniMapRef: l }) {
+  const { showMiniMap: g, setViewport: r, presentation: a } = J(), f = W(!1), e = A((d, s) => {
+    const M = n.current, v = p.current, b = l.current;
+    if (!M || !v || v.destroyed || !b) return;
+    const P = M.getBoundingClientRect();
+    if (P.width === 0 || P.height === 0) return;
+    const { width: O, height: G } = b.size, R = (d - P.left) / P.width * O, N = (s - P.top) / P.height * G, u = b.minimapToWorld(R, N);
+    if (!u) return;
+    const m = v.world.scale.x || 1, S = v.app.screen.width, z = v.app.screen.height;
     r({
-      x: x / 2 - w.x * v,
-      y: i / 2 - w.y * v,
-      zoom: v
+      x: S / 2 - u.x * m,
+      y: z / 2 - u.y * m,
+      zoom: m
     });
   }, [
     n,
-    u,
-    o,
+    p,
+    l,
     r
-  ]), m = T((s) => {
-    s.preventDefault(), s.currentTarget.setPointerCapture(s.pointerId), c.current = !0, e(s.clientX, s.clientY);
-  }, [e]), f = T((s) => {
-    c.current && e(s.clientX, s.clientY);
-  }, [e]), b = T((s) => {
-    c.current = !1;
+  ]), t = A((d) => {
+    d.preventDefault(), d.currentTarget.setPointerCapture(d.pointerId), f.current = !0, e(d.clientX, d.clientY);
+  }, [e]), c = A((d) => {
+    f.current && e(d.clientX, d.clientY);
+  }, [e]), I = A((d) => {
+    f.current = !1;
     try {
-      s.currentTarget.releasePointerCapture(s.pointerId);
+      d.currentTarget.releasePointerCapture(d.pointerId);
     } catch {
     }
   }, []);
-  return /* @__PURE__ */ p("div", {
+  return /* @__PURE__ */ w("div", {
     className: "flow-minimap",
     style: {
-      display: h && !a ? void 0 : "none",
+      display: g && !a ? void 0 : "none",
       cursor: "pointer"
     },
-    onPointerDown: m,
-    onPointerMove: f,
-    onPointerUp: b,
+    onPointerDown: t,
+    onPointerMove: c,
+    onPointerUp: I,
     title: "点击或拖动以移动画布",
-    children: /* @__PURE__ */ p("canvas", {
+    children: /* @__PURE__ */ w("canvas", {
       ref: n,
       width: 180,
       height: 120,
@@ -491,11 +591,11 @@ function Le({ canvasRef: n, pixiRef: u, miniMapRef: o }) {
     })
   });
 }
-function Re(n, u) {
-  const o = `"id": "${u}"`, h = n.indexOf(o);
-  if (h === -1) return null;
+function Ge(n, p) {
+  const l = `"id": "${p}"`, g = n.indexOf(l);
+  if (g === -1) return null;
   let r = 0, a = -1;
-  for (let e = h; e >= 0; e--)
+  for (let e = g; e >= 0; e--)
     if (n[e] === "}" && r++, n[e] === "{") {
       if (r === 0) {
         a = e;
@@ -505,83 +605,83 @@ function Re(n, u) {
     }
   if (a === -1) return null;
   r = 0;
-  let c = -1;
+  let f = -1;
   for (let e = a; e < n.length; e++)
     if (n[e] === "{" && r++, n[e] === "}" && (r--, r === 0)) {
-      c = e;
+      f = e;
       break;
     }
-  return c === -1 ? null : {
+  return f === -1 ? null : {
     startLine: n.slice(0, a).split(`
 `).length,
-    endLine: n.slice(0, c + 1).split(`
+    endLine: n.slice(0, f + 1).split(`
 `).length
   };
 }
-function $(n) {
-  n.querySelectorAll(".cm-line.flow-json-hl").forEach((u) => u.classList.remove("flow-json-hl"));
+function q(n) {
+  n.querySelectorAll(".cm-line.flow-json-hl").forEach((p) => p.classList.remove("flow-json-hl"));
 }
-function Fe(n, u, o) {
-  const h = n.getView();
-  if (h)
-    for (let r = u; r <= o; r++) try {
-      const a = h.state.doc.line(r), c = h.domAtPos(a.from), e = c.node instanceof HTMLElement ? c.node.closest(".cm-line") : c.node.parentElement?.closest(".cm-line");
+function Fe(n, p, l) {
+  const g = n.getView();
+  if (g)
+    for (let r = p; r <= l; r++) try {
+      const a = g.state.doc.line(r), f = g.domAtPos(a.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 Oe() {
-  const { setDoc: n, currentCanvasId: u, selection: o, currentCanvas: h } = B(), [r, a] = H(""), [c, e] = H(null), m = L(!1), f = L(null), b = L(null), s = q(() => o.nodeIds.size + o.edgeIds.size + o.lineIds.size !== 1 ? null : o.nodeIds.size === 1 ? [...o.nodeIds][0] : o.edgeIds.size === 1 ? [...o.edgeIds][0] : o.lineIds.size === 1 ? [...o.lineIds][0] : null, [o]);
-  Z(() => {
-    if (m.current) {
-      m.current = !1;
+  const { setDoc: n, currentCanvasId: p, selection: l, currentCanvas: g } = Y(), [r, a] = B(""), [f, e] = B(null), t = W(!1), c = W(null), I = W(null), d = Q(() => l.nodeIds.size + l.edgeIds.size + l.lineIds.size !== 1 ? null : l.nodeIds.size === 1 ? [...l.nodeIds][0] : l.edgeIds.size === 1 ? [...l.edgeIds][0] : l.lineIds.size === 1 ? [...l.lineIds][0] : null, [l]);
+  V(() => {
+    if (t.current) {
+      t.current = !1;
       return;
     }
-    a(JSON.stringify(h, null, 2)), e(null);
-  }, [h]), Z(() => {
-    const g = b.current;
-    if (g && $(g), !s) return;
-    const I = setTimeout(() => {
-      const D = Re(r, s);
-      if (!D || !b.current) return;
-      const N = f.current?.getView();
-      if (!N) return;
-      const A = b.current, P = N.scrollDOM;
-      P.style.scrollBehavior = "smooth";
-      const d = N.state.doc.line(D.startLine);
-      N.dispatch({ effects: Ee.scrollIntoView(d.from, {
+    a(JSON.stringify(g, null, 2)), e(null);
+  }, [g]), V(() => {
+    const v = I.current;
+    if (v && q(v), !d) return;
+    const b = setTimeout(() => {
+      const P = Ge(r, d);
+      if (!P || !I.current) return;
+      const O = c.current?.getView();
+      if (!O) return;
+      const G = I.current, R = O.scrollDOM;
+      R.style.scrollBehavior = "smooth";
+      const N = O.state.doc.line(P.startLine);
+      O.dispatch({ effects: Ee.scrollIntoView(N.from, {
         y: "start",
         yMargin: 0
       }) });
-      const w = () => {
-        P.style.scrollBehavior = "", $(A), Fe(f.current, D.startLine, D.endLine);
+      const u = () => {
+        R.style.scrollBehavior = "", q(G), Fe(c.current, P.startLine, P.endLine);
       };
-      let v;
-      const x = () => {
-        clearTimeout(v), v = setTimeout(w, 100);
+      let m;
+      const S = () => {
+        clearTimeout(m), m = setTimeout(u, 100);
       };
-      P.addEventListener("scroll", x), v = setTimeout(() => {
-        P.removeEventListener("scroll", x), w();
+      R.addEventListener("scroll", S), m = setTimeout(() => {
+        R.removeEventListener("scroll", S), u();
       }, 800);
     }, 120);
-    return () => clearTimeout(I);
-  }, [s, r]);
-  const t = T((g) => {
-    a(g);
+    return () => clearTimeout(b);
+  }, [d, r]);
+  const s = A((v) => {
+    a(v);
     try {
-      const I = JSON.parse(g);
-      I && Array.isArray(I.nodes) && Array.isArray(I.edges) && Array.isArray(I.lines) ? (e(null), m.current = !0, n((D) => ({
-        ...D,
+      const b = JSON.parse(v);
+      b && Array.isArray(b.nodes) && Array.isArray(b.edges) && Array.isArray(b.lines) ? (e(null), t.current = !0, n((P) => ({
+        ...P,
         canvases: {
-          ...D.canvases,
-          [u]: I
+          ...P.canvases,
+          [p]: b
         }
       }))) : e("JSON must have nodes, edges, lines arrays");
-    } catch (I) {
-      e(I.message?.slice(0, 60) ?? "Invalid JSON");
+    } catch (b) {
+      e(b.message?.slice(0, 60) ?? "Invalid JSON");
     }
-  }, [n, u]), S = s ? o.nodeIds.has(s) ? "Node" : o.edgeIds.has(s) ? "Edge" : "Line" : null;
-  return /* @__PURE__ */ U("div", {
+  }, [n, p]), M = d ? l.nodeIds.has(d) ? "Node" : l.edgeIds.has(d) ? "Edge" : "Line" : null;
+  return /* @__PURE__ */ Z("div", {
     style: {
       display: "flex",
       flexDirection: "column",
@@ -589,32 +689,32 @@ function Oe() {
       minHeight: 0
     },
     children: [
-      /* @__PURE__ */ p("div", {
+      /* @__PURE__ */ w("div", {
         className: "flow-json-header",
-        children: /* @__PURE__ */ p("span", {
+        children: /* @__PURE__ */ w("span", {
           className: "flow-json-scope",
-          children: S ? `${S}: ${s.slice(0, 8)}` : "Canvas"
+          children: M ? `${M}: ${d.slice(0, 8)}` : "Canvas"
         })
       }),
-      c && /* @__PURE__ */ p("div", {
+      f && /* @__PURE__ */ w("div", {
         style: {
           fontSize: 11,
           color: "oklch(var(--er))",
           padding: "4px 0",
           flexShrink: 0
         },
-        children: c
+        children: f
       }),
-      /* @__PURE__ */ p("div", {
-        ref: b,
+      /* @__PURE__ */ w("div", {
+        ref: I,
         style: {
           flex: 1,
           minHeight: 0
         },
-        children: /* @__PURE__ */ p(se, {
-          ref: f,
+        children: /* @__PURE__ */ w(oe, {
+          ref: c,
           value: r,
-          onChange: t,
+          onChange: s,
           language: "json",
           lineNumbers: !1,
           height: "100%",
@@ -624,98 +724,98 @@ function Oe() {
     ]
   });
 }
-function Ke() {
-  const { contextMenu: n, setContextMenu: u } = J(), { doc: o, setDoc: h, currentCanvasId: r, pushCanvas: a, setSelection: c } = B();
+function We() {
+  const { contextMenu: n, setContextMenu: p } = J(), { doc: l, setDoc: g, currentCanvasId: r, pushCanvas: a, setSelection: f } = Y();
   if (!n) return null;
-  const e = o.canvases[r];
+  const e = l.canvases[r];
   if (!e)
-    return u(null), null;
-  const m = n.nodeId ? e.nodes.find((b) => b.id === n.nodeId) : null, f = [];
-  return m && (m.data.childCanvasId ? (f.push({
+    return p(null), null;
+  const t = n.nodeId ? e.nodes.find((I) => I.id === n.nodeId) : null, c = [];
+  return t && (t.data.childCanvasId ? (c.push({
     label: "Enter Sub-canvas",
     icon: "↓",
     action: () => {
-      a(m.data.childCanvasId), c({
+      a(t.data.childCanvasId), f({
         nodeIds: /* @__PURE__ */ new Set(),
         edgeIds: /* @__PURE__ */ new Set(),
         lineIds: /* @__PURE__ */ new Set()
       });
     }
-  }), f.push({
+  }), c.push({
     label: "---",
     action: () => {
     }
-  }), f.push({
+  }), c.push({
     label: "Delete Sub-canvas",
     icon: "🗑",
     danger: !0,
     action: () => {
-      const b = m.data.childCanvasId;
-      h((s) => {
-        const t = { ...s.canvases };
-        ee(t, b);
-        const S = t[r];
-        if (!S) return s;
-        t[r] = {
-          ...S,
-          nodes: S.nodes.map((I) => I.id === m.id ? {
-            ...I,
+      const I = t.data.childCanvasId;
+      g((d) => {
+        const s = { ...d.canvases };
+        ne(s, I);
+        const M = s[r];
+        if (!M) return d;
+        s[r] = {
+          ...M,
+          nodes: M.nodes.map((b) => b.id === t.id ? {
+            ...b,
             data: {
-              ...I.data,
+              ...b.data,
               childCanvasId: void 0
             }
-          } : I)
+          } : b)
         };
-        const g = s.stack.filter((I) => t[I]);
-        return g.length === 0 && g.push(re), {
-          ...s,
-          canvases: t,
-          stack: g
+        const v = d.stack.filter((b) => s[b]);
+        return v.length === 0 && v.push(re), {
+          ...d,
+          canvases: s,
+          stack: v
         };
       });
     }
-  })) : f.push({
+  })) : c.push({
     label: "Create Sub-canvas",
     icon: "⊞",
     action: () => {
-      const b = X("canvas");
-      h((s) => {
-        const t = s.canvases[r];
-        return t ? {
-          ...s,
+      const I = X("canvas");
+      g((d) => {
+        const s = d.canvases[r];
+        return s ? {
+          ...d,
           canvases: {
-            ...s.canvases,
+            ...d.canvases,
             [r]: {
-              ...t,
-              nodes: t.nodes.map((S) => S.id === m.id ? {
-                ...S,
+              ...s,
+              nodes: s.nodes.map((M) => M.id === t.id ? {
+                ...M,
                 data: {
-                  ...S.data,
-                  childCanvasId: b
+                  ...M.data,
+                  childCanvasId: I
                 }
-              } : S)
+              } : M)
             },
-            [b]: {
+            [I]: {
               nodes: [],
               edges: [],
               lines: []
             }
           }
-        } : s;
-      }), a(b);
+        } : d;
+      }), a(I);
     }
-  })), f.length === 0 ? null : /* @__PURE__ */ p(ye, {
+  })), c.length === 0 ? null : /* @__PURE__ */ w(ye, {
     x: n.x,
     y: n.y,
-    items: f,
-    onClose: () => u(null)
+    items: c,
+    onClose: () => p(null)
   });
 }
-function ee(n, u) {
-  const o = n[u];
-  if (o) {
-    for (const h of o.nodes) h.data.childCanvasId && ee(n, h.data.childCanvasId);
-    delete n[u];
+function ne(n, p) {
+  const l = n[p];
+  if (l) {
+    for (const g of l.nodes) g.data.childCanvasId && ne(n, g.data.childCanvasId);
+    delete n[p];
   }
 }
 export {