@blueking/flow-canvas 0.0.10 → 0.0.11

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { ref as z, computed as V, onScopeDispose as rt, defineComponent as fe, h as qe, watch as ge, onBeforeUnmount as Te, createElementBlock as P, openBlock as A, normalizeStyle as be, createElementVNode as q, createVNode as it, createCommentVNode as Y, normalizeClass as oe, Transition as at, withCtx as He, withModifiers as pt, createTextVNode as Ue, renderSlot as Me, onMounted as lt, createBlock as Ie, Fragment as de, renderList as Ce, toDisplayString as ce, unref as le, reactive as vt, resolveDynamicComponent as mt, Teleport as yt, nextTick as dt, inject as wt, createApp as bt } from "vue";
+import { ref as H, computed as V, onScopeDispose as it, defineComponent as fe, h as qe, watch as ge, onBeforeUnmount as Te, createElementBlock as T, openBlock as A, normalizeStyle as Ee, createElementVNode as q, createVNode as at, createCommentVNode as Y, normalizeClass as te, Transition as lt, withCtx as He, withModifiers as ht, createTextVNode as je, renderSlot as Me, nextTick as Ge, onMounted as dt, createBlock as Ie, Fragment as de, renderList as Ce, toDisplayString as ce, unref as re, reactive as vt, resolveDynamicComponent as mt, Teleport as yt, inject as wt, createApp as bt } from "vue";
 import { Graph as Et } from "@antv/x6";
 import { register as xt } from "@antv/x6-vue-shape";
 import { Selection as It } from "@antv/x6-plugin-selection";
@@ -20,7 +20,7 @@ class kt extends Error {
     super(e), this.name = "CanvasSchemaError";
   }
 }
-function Le(n, e, o) {
+function Re(n, e, o) {
   if (e.length === 0) {
     if (o === void 0) return;
     if (typeof o != "object" || o === null || Array.isArray(o))
@@ -55,9 +55,9 @@ function ct(n, e) {
     case "edge.remove":
       return Tt(n, e.edgeId);
     case "edge.reconnect":
-      return Lt(n, e.edgeId, e.source, e.target);
+      return Rt(n, e.edgeId, e.source, e.target);
     case "edge.update":
-      return Rt(n, e.edgeId, e.patch);
+      return Lt(n, e.edgeId, e.patch);
     case "edge.set-payload":
       return Ot(n, e.edgeId, e.path, e.value);
     case "edge.label.update":
@@ -85,7 +85,7 @@ function ke(n, e, o) {
   if (e.portId && t.ports && !t.ports.some((r) => r.id === e.portId))
     throw new ue(`${o} port "${e.portId}" not found on node "${e.nodeId}"`);
 }
-function Re(n, e, o) {
+function Le(n, e, o) {
   return { ...n, nodes: { ...n.nodes, [e]: o } };
 }
 function Oe(n, e, o) {
@@ -98,7 +98,7 @@ function St(n, e) {
 }
 function Mt(n, e, o) {
   const t = Ne(n, e);
-  return Re(n, e, { ...t, position: o });
+  return Le(n, e, { ...t, position: o });
 }
 function Nt(n, e) {
   Ne(n, e);
@@ -109,15 +109,15 @@ function Nt(n, e) {
 }
 function Dt(n, e, o) {
   const t = Ne(n, e);
-  return Re(n, e, { ...t, ...o, id: t.id });
+  return Le(n, e, { ...t, ...o, id: t.id });
 }
 function At(n, e, o, t) {
-  const s = Ne(n, e), r = Le(s.payload, o, t);
-  return Re(n, e, { ...s, payload: r });
+  const s = Ne(n, e), r = Re(s.payload, o, t);
+  return Le(n, e, { ...s, payload: r });
 }
 function _t(n, e, o, t) {
-  const s = Ne(n, e), r = Le(s.extensions, o, t);
-  return Re(n, e, { ...s, extensions: r });
+  const s = Ne(n, e), r = Re(s.extensions, o, t);
+  return Le(n, e, { ...s, extensions: r });
 }
 function Pt(n, e) {
   if (n.edges[e.id])
@@ -137,16 +137,16 @@ function Tt(n, e) {
   const { [e]: o, ...t } = n.edges;
   return { ...n, edges: t };
 }
-function Lt(n, e, o, t) {
+function Rt(n, e, o, t) {
   const s = De(n, e), r = o ?? s.source, i = t ?? s.target;
   return ke(n, r, "Source"), ke(n, i, "Target"), Oe(n, e, { ...s, source: r, target: i });
 }
-function Rt(n, e, o) {
+function Lt(n, e, o) {
   const t = De(n, e), s = { ...t, ...o, id: t.id };
   return o.source && ke(n, s.source, "Source"), o.target && ke(n, s.target, "Target"), Oe(n, e, s);
 }
 function Ot(n, e, o, t) {
-  const s = De(n, e), r = Le(s.payload, o, t);
+  const s = De(n, e), r = Re(s.payload, o, t);
   return Oe(n, e, { ...s, payload: r });
 }
 function $t(n, e, o, t) {
@@ -160,66 +160,66 @@ function $t(n, e, o, t) {
   return i[r] = { ...i[r], ...t, id: o }, Oe(n, e, { ...s, labels: i });
 }
 function Bt(n, e, o) {
-  const t = Le(n.meta, e, o);
+  const t = Re(n.meta, e, o);
   return { ...n, meta: t };
 }
 function Ft(n, e) {
-  const o = e?.maxHistorySize ?? 100, t = z(n), s = [], r = [], i = z(!1), l = z(!1);
+  const o = e?.maxHistorySize ?? 100, t = H(n), s = [], r = [], i = H(!1), l = H(!1);
   function a() {
     i.value = s.length > 0, l.value = r.length > 0;
   }
   function v(b) {
-    const M = t.value;
-    let S = M;
-    for (const H of b.commands)
-      S = ct(S, H);
+    const S = t.value;
+    let M = S;
+    for (const B of b.commands)
+      M = ct(M, B);
     if (!b.skipHistory) {
-      const H = e?.excludeCommandFromHistory, X = H ? b.commands.filter((k) => !H(k)) : b.commands;
-      if (X.length > 0) {
-        const k = X.length < b.commands.length ? { ...b, commands: X } : b;
-        s.push({ snapshot: M, envelope: k }), s.length > o && s.shift(), r.length = 0;
+      const B = e?.excludeCommandFromHistory, j = B ? b.commands.filter((k) => !B(k)) : b.commands;
+      if (j.length > 0) {
+        const k = j.length < b.commands.length ? { ...b, commands: j } : b;
+        s.push({ snapshot: S, envelope: k }), s.length > o && s.shift(), r.length = 0;
       }
     }
-    return t.value = S, a(), S;
+    return t.value = M, a(), M;
   }
-  function u() {
+  function f() {
     const b = s.pop();
     if (!b) return null;
     r.push({ snapshot: t.value, envelope: b.envelope });
-    const M = e?.preserveMetaOnUndoRedo ? { ...b.snapshot, meta: t.value.meta } : b.snapshot;
-    return t.value = M, a(), M;
+    const S = e?.preserveMetaOnUndoRedo ? { ...b.snapshot, meta: t.value.meta } : b.snapshot;
+    return t.value = S, a(), S;
   }
-  function h() {
+  function p() {
     const b = r.pop();
     if (!b) return null;
     s.push({ snapshot: t.value, envelope: b.envelope });
-    const M = e?.preserveMetaOnUndoRedo ? { ...b.snapshot, meta: t.value.meta } : b.snapshot;
-    return t.value = M, a(), M;
+    const S = e?.preserveMetaOnUndoRedo ? { ...b.snapshot, meta: t.value.meta } : b.snapshot;
+    return t.value = S, a(), S;
   }
-  function c() {
+  function u() {
     s.length = 0, r.length = 0, a();
   }
   function w() {
     return t.value;
   }
-  function N(b) {
-    t.value = b, c();
+  function D(b) {
+    t.value = b, u();
   }
-  function O(b, M) {
-    const S = {
+  function O(b, S) {
+    const M = {
       id: `update-${Date.now()}`,
       source: "system:update",
-      label: M ?? "更新模型",
+      label: S ?? "更新模型",
       timestamp: Date.now(),
       commands: []
     };
-    s.push({ snapshot: t.value, envelope: S }), s.length > o && s.shift(), r.length = 0, t.value = b, a();
+    s.push({ snapshot: t.value, envelope: M }), s.length > o && s.shift(), r.length = 0, t.value = b, a();
   }
   return {
     currentFlowModel: t,
     execute: v,
-    undo: u,
-    redo: h,
+    undo: f,
+    redo: p,
     canUndo: i,
     canRedo: l,
     get undoStack() {
@@ -228,9 +228,9 @@ function Ft(n, e) {
     get redoStack() {
       return r.map((b) => b.envelope);
     },
-    clear: c,
+    clear: u,
     createSnapshot: w,
-    replaceFlowModel: N,
+    replaceFlowModel: D,
     updateFlowModel: O
   };
 }
@@ -274,9 +274,9 @@ class Ht {
     const t = this, s = new Proxy(e.graph, {
       get(r, i, l) {
         const a = Reflect.get(r, i, l);
-        return i === "use" && typeof a == "function" ? function(...u) {
+        return i === "use" && typeof a == "function" ? function(...f) {
           if (t.runtimeVersion === o)
-            return a.apply(r, u);
+            return a.apply(r, f);
         } : a;
       }
     });
@@ -402,41 +402,41 @@ class Ht {
   }
 }
 let Gt = 0;
-function Q() {
+function J() {
   const n = Date.now().toString(36), e = Math.random().toString(36).substring(2, 8);
   return `${n}-${e}-${++Gt}`;
 }
-const Ge = () => Q();
+const ze = () => J();
 function Nn(n) {
-  const { schema: e, plugins: o = [], historyOptions: t } = n, s = n.idGenerator ?? Ge, r = { version: "1.0", ...n.initialFlowModel }, i = Ft(r, t), l = z(n.mode ?? "edit"), a = z(!1), v = z(null), u = z([]), h = {}, c = new Ht();
-  function w(M, S, H, X = "user:toolbar") {
+  const { schema: e, plugins: o = [], historyOptions: t } = n, s = n.idGenerator ?? ze, r = { version: "1.0", ...n.initialFlowModel }, i = Ft(r, t), l = H(n.mode ?? "edit"), a = H(!1), v = H(null), f = H([]), p = {}, u = new Ht();
+  function w(S, M, B, j = "user:toolbar") {
     const k = {
       id: `history-${Date.now()}`,
-      source: X,
-      label: M,
+      source: j,
+      label: S,
       timestamp: Date.now(),
       commands: []
     };
-    c.afterCommand(k, S, H), u.value = c.collectToolbarItems(), n.onCommandResult?.({
+    u.afterCommand(k, M, B), f.value = u.collectToolbarItems(), n.onCommandResult?.({
       status: "applied",
       envelope: k,
-      flowModel: H
+      flowModel: B
     }), n.onFlowModelChange?.({
-      flowModel: H,
-      prevFlowModel: S,
+      flowModel: B,
+      prevFlowModel: M,
       envelope: k,
-      source: X
+      source: j
     });
   }
-  const N = {
+  const D = {
     execute: i.execute,
     undo() {
-      const M = i.currentFlowModel.value, S = i.undo();
-      return S && w("撤销", M, S), S;
+      const S = i.currentFlowModel.value, M = i.undo();
+      return M && w("撤销", S, M), M;
     },
     redo() {
-      const M = i.currentFlowModel.value, S = i.redo();
-      return S && w("重做", M, S), S;
+      const S = i.currentFlowModel.value, M = i.redo();
+      return M && w("重做", S, M), M;
     },
     get canUndo() {
       return i.canUndo;
@@ -452,87 +452,87 @@ function Nn(n) {
     },
     clear: i.clear,
     createSnapshot: i.createSnapshot,
-    replaceFlowModel(M) {
-      const S = i.currentFlowModel.value;
-      i.replaceFlowModel(M), w("替换 FlowModel", S, M, "system:replace");
+    replaceFlowModel(S) {
+      const M = i.currentFlowModel.value;
+      i.replaceFlowModel(S), w("替换 FlowModel", M, S, "system:replace");
     },
-    updateFlowModel(M, S) {
-      const H = i.currentFlowModel.value;
-      i.updateFlowModel(M, S), w(S ?? "更新 FlowModel", H, M, "system:update");
+    updateFlowModel(S, M) {
+      const B = i.currentFlowModel.value;
+      i.updateFlowModel(S, M), w(M ?? "更新 FlowModel", B, S, "system:update");
     }
   }, O = {
     flowModel: V(() => i.currentFlowModel.value),
-    history: N,
+    history: D,
     schema: e,
     mode: l,
     idGenerator: s,
     executeCommand: b,
-    replaceFlowModel(M) {
-      N.replaceFlowModel(M);
+    replaceFlowModel(S) {
+      D.replaceFlowModel(S);
     },
-    updateFlowModel(M, S) {
-      N.updateFlowModel(M, S);
+    updateFlowModel(S, M) {
+      D.updateFlowModel(S, M);
     },
-    setMode(M) {
-      l.value = M;
+    setMode(S) {
+      l.value = S;
     },
     selectionMode: a,
-    setSelectionMode(M) {
-      a.value = M;
+    setSelectionMode(S) {
+      a.value = S;
     },
     api: v,
-    toolbarItems: u,
-    extendedApi: h,
-    _pluginManager: c,
-    _emitUiEvent: (M) => {
-      c.dispatchUiEvent(M);
+    toolbarItems: f,
+    extendedApi: p,
+    _pluginManager: u,
+    _emitUiEvent: (S) => {
+      u.dispatchUiEvent(S);
     }
   };
-  c.install(o, {
+  u.install(o, {
     flowModel: O.flowModel,
-    history: N,
+    history: D,
     schema: e,
     mode: l,
     idGenerator: s,
     executeCommand: b
-  }), u.value = c.collectToolbarItems(), rt(() => {
-    c.dispose();
+  }), f.value = u.collectToolbarItems(), it(() => {
+    u.dispose();
   });
-  function b(M) {
-    const S = c.transformCommand(M);
-    if ("rejected" in S) {
+  function b(S) {
+    const M = u.transformCommand(S);
+    if ("rejected" in M) {
       const k = {
         status: "rejected",
-        envelope: M,
-        error: S.error
+        envelope: S,
+        error: M.error
       };
       return n.onCommandResult?.(k), k;
     }
-    const H = S.envelope, X = i.currentFlowModel.value;
+    const B = M.envelope, j = i.currentFlowModel.value;
     try {
-      const k = i.execute(H), K = {
+      const k = i.execute(B), X = {
         status: "applied",
-        envelope: H,
+        envelope: B,
         flowModel: k
       };
-      return c.afterCommand(H, X, k), u.value = c.collectToolbarItems(), n.onCommandResult?.(K), n.onFlowModelChange?.({
+      return u.afterCommand(B, j, k), f.value = u.collectToolbarItems(), n.onCommandResult?.(X), n.onFlowModelChange?.({
         flowModel: k,
-        prevFlowModel: X,
-        envelope: H,
-        source: H.source
-      }), K;
+        prevFlowModel: j,
+        envelope: B,
+        source: B.source
+      }), X;
     } catch (k) {
       if (k instanceof ue) {
-        const K = {
+        const X = {
           status: "invalid",
-          envelope: H,
+          envelope: B,
           error: {
             code: "constraint_violated",
             reason: k.message,
             source: "engine"
           }
         };
-        return n.onCommandResult?.(K), K;
+        return n.onCommandResult?.(X), X;
       }
       throw k;
     }
@@ -543,10 +543,10 @@ const zt = ["top", "right", "bottom", "left"];
 function ut() {
   return zt.map((n) => ({ id: n, group: n }));
 }
-function ze(n, e) {
+function Ue(n, e) {
   return e?.(n) ?? n.ports ?? ut();
 }
-const Fe = -1, Ut = "flow-canvas-node-ring-target", je = "flow-canvas-node-ring-target--decorated", We = "flow-canvas-node-ring-target--pulse", jt = "linear-gradient(135deg, #cadcfa 0%, #cee0ff 100%)";
+const Fe = -1, Ut = "flow-canvas-node-ring-target", We = "flow-canvas-node-ring-target--decorated", Ve = "flow-canvas-node-ring-target--pulse", jt = "linear-gradient(135deg, #cadcfa 0%, #cee0ff 100%)";
 class Wt {
   graph;
   schema;
@@ -679,7 +679,7 @@ class Wt {
         throw new kt(
           `Unknown node type "${s.type}" for node "${t}". Registered types: [${Object.keys(this.schema.nodeTypes).join(", ")}]. Register the type in CanvasSchema.nodeTypes before using it in a FlowModel.`
         );
-      const i = this.shapeRegistry.registerNodeType(s.type, r.component), l = r.getSize(s), a = ze(s, r.getPorts);
+      const i = this.shapeRegistry.registerNodeType(s.type, r.component), l = r.getSize(s), a = Ue(s, r.getPorts);
       o.set(t, { model: s, definition: r, shapeName: i, size: l, ports: a });
     }
     return o;
@@ -760,7 +760,7 @@ class Wt {
             }
           }
         },
-        items: i.map((u) => ({ id: u.id, group: u.group, ...u.x6PortConfig }))
+        items: i.map((f) => ({ id: f.id, group: f.group, ...f.x6PortConfig }))
       },
       ...l.x6CellConfig
     };
@@ -838,18 +838,18 @@ class Wt {
   updateExistingEdge(e, o, t, s) {
     const r = e.getSource(), i = e.getTarget(), l = r.cell !== o.source.nodeId || r.port !== o.source.portId, a = i.cell !== o.target.nodeId || i.port !== o.target.portId;
     l && e.setSource({ cell: o.source.nodeId, port: o.source.portId }), a && e.setTarget({ cell: o.target.nodeId, port: o.target.portId });
-    const u = (e.getData()?.type ?? void 0) !== (o.type ?? void 0);
-    if (u) {
+    const f = (e.getData()?.type ?? void 0) !== (o.type ?? void 0);
+    if (f) {
       if (t?.router) {
-        const h = typeof t.router == "string" ? { name: t.router } : t.router;
-        e.setRouter(h);
+        const p = typeof t.router == "string" ? { name: t.router } : t.router;
+        e.setRouter(p);
       }
       if (t?.connector) {
-        const h = typeof t.connector == "string" ? { name: t.connector } : t.connector;
-        e.setConnector(h);
+        const p = typeof t.connector == "string" ? { name: t.connector } : t.connector;
+        e.setConnector(p);
       }
     }
-    (u || l || a) && (this.syncEdgeMarker(e, t, "sourceMarker"), this.syncEdgeMarker(e, t, "targetMarker")), this.syncEdgeLabels(e, o), e.getZIndex() !== Fe && e.setZIndex(Fe), e.setData({ ...o }, { silent: !0 }), this.applyEdgeStyleAndDecoration(e, o, t);
+    (f || l || a) && (this.syncEdgeMarker(e, t, "sourceMarker"), this.syncEdgeMarker(e, t, "targetMarker")), this.syncEdgeLabels(e, o), e.getZIndex() !== Fe && e.setZIndex(Fe), e.setData({ ...o }, { silent: !0 }), this.applyEdgeStyleAndDecoration(e, o, t);
   }
   syncEdgeLabels(e, o) {
     if (!o.labels?.length) {
@@ -930,11 +930,11 @@ class Wt {
   applyNodeHighlightAndDecoration(e, o) {
     const t = this.highlightedNodeIds.has(e.id), s = this.resolveNodeDecoration?.(o), r = this.graph.findViewByCell(e)?.container, i = this.getNodeRingTarget(r), l = this.prevNodeDecorationClasses.get(e.id);
     l && (r?.classList.remove(l), this.prevNodeDecorationClasses.delete(e.id)), s?.className && (r?.classList.add(s.className), this.prevNodeDecorationClasses.set(e.id, s.className));
-    const a = s?.borderColor, u = a ?? (t ? "#3a84ff" : void 0), h = this.prevNodeDecorationColors.has(e.id) || this.defaultHighlightedNodeIds.has(e.id);
-    u ? (e.setAttrByPath("body/stroke", u), e.setAttrByPath("body/strokeWidth", 2)) : h && (this.restoreNodeAttr(e, "body/stroke", "stroke"), this.restoreNodeAttr(e, "body/strokeWidth", "strokeWidth")), i && (i.classList.add(Ut), a ? (i.classList.add(je), i.style.setProperty("--flow-canvas-node-decoration-ring-background", a), i.style.setProperty("--flow-canvas-node-decoration-ring-opacity", "0.95")) : (i.classList.remove(je), i.style.removeProperty("--flow-canvas-node-decoration-ring-background"), i.style.removeProperty("--flow-canvas-node-decoration-ring-opacity")), t ? (i.classList.add(We), i.style.setProperty(
+    const a = s?.borderColor, f = a ?? (t ? "#3a84ff" : void 0), p = this.prevNodeDecorationColors.has(e.id) || this.defaultHighlightedNodeIds.has(e.id);
+    f ? (e.setAttrByPath("body/stroke", f), e.setAttrByPath("body/strokeWidth", 2)) : p && (this.restoreNodeAttr(e, "body/stroke", "stroke"), this.restoreNodeAttr(e, "body/strokeWidth", "strokeWidth")), i && (i.classList.add(Ut), a ? (i.classList.add(We), i.style.setProperty("--flow-canvas-node-decoration-ring-background", a), i.style.setProperty("--flow-canvas-node-decoration-ring-opacity", "0.95")) : (i.classList.remove(We), i.style.removeProperty("--flow-canvas-node-decoration-ring-background"), i.style.removeProperty("--flow-canvas-node-decoration-ring-opacity")), t ? (i.classList.add(Ve), i.style.setProperty(
       "--flow-canvas-node-pulse-ring-background",
       a ?? jt
-    ), i.style.setProperty("--flow-canvas-node-pulse-ring-opacity", "0.95")) : (i.classList.remove(We), i.style.removeProperty("--flow-canvas-node-pulse-ring-background"), i.style.removeProperty("--flow-canvas-node-pulse-ring-opacity"))), a ? this.prevNodeDecorationColors.add(e.id) : this.prevNodeDecorationColors.delete(e.id), t && !a ? this.defaultHighlightedNodeIds.add(e.id) : this.defaultHighlightedNodeIds.delete(e.id);
+    ), i.style.setProperty("--flow-canvas-node-pulse-ring-opacity", "0.95")) : (i.classList.remove(Ve), i.style.removeProperty("--flow-canvas-node-pulse-ring-background"), i.style.removeProperty("--flow-canvas-node-pulse-ring-opacity"))), a ? this.prevNodeDecorationColors.add(e.id) : this.prevNodeDecorationColors.delete(e.id), t && !a ? this.defaultHighlightedNodeIds.add(e.id) : this.defaultHighlightedNodeIds.delete(e.id);
   }
   getHoveredEdgeId() {
     return this.hoveredEdgeId;
@@ -965,15 +965,15 @@ class Wt {
     i && (this.graph.findViewByCell(e)?.container?.classList.remove(i), this.prevEdgeDecorationClasses.delete(e.id)), r?.className && (this.graph.findViewByCell(e)?.container?.classList.add(r.className), this.prevEdgeDecorationClasses.set(e.id, r.className));
     let l, a, v;
     if (t?.style) {
-      const O = this.graph.isSelected?.(e) ?? !1, b = this.hoveredEdgeId === e.id, M = t.style(o, { selected: O, highlighted: s, hovered: b });
-      l = M.stroke, a = M.strokeWidth, v = M.strokeDasharray;
+      const O = this.graph.isSelected?.(e) ?? !1, b = this.hoveredEdgeId === e.id, S = t.style(o, { selected: O, highlighted: s, hovered: b });
+      l = S.stroke, a = S.strokeWidth, v = S.strokeDasharray;
     }
-    const u = !t?.style && s ? "#3a84ff" : void 0, h = r?.strokeColor, c = r?.targetMarkerColor, w = h ?? l ?? u, N = !!t?.style || this.prevEdgeDecorationColors.has(e.id) || this.defaultHighlightedEdgeIds.has(e.id) || this.prevEdgeStyleIds.has(e.id);
-    w ? this.setEdgeAttrIfChanged(e, "line/stroke", w) : N && this.restoreEdgeAttr(e, "line/stroke", "stroke"), this.applyEdgeMarkerDecoration(e, t, "targetMarker", c), t?.style ? (this.prevEdgeStyleIds.add(e.id), a ? this.setEdgeAttrIfChanged(e, "line/strokeWidth", a) : this.restoreEdgeAttr(e, "line/strokeWidth", "strokeWidth"), v ? this.setEdgeAttrIfChanged(e, "line/strokeDasharray", v) : this.restoreEdgeAttr(e, "line/strokeDasharray", "strokeDasharray")) : this.prevEdgeStyleIds.has(e.id) && (this.restoreEdgeAttr(e, "line/strokeWidth", "strokeWidth"), this.restoreEdgeAttr(e, "line/strokeDasharray", "strokeDasharray"), this.prevEdgeStyleIds.delete(e.id)), h ? this.prevEdgeDecorationColors.add(e.id) : this.prevEdgeDecorationColors.delete(e.id), u ? this.defaultHighlightedEdgeIds.add(e.id) : this.defaultHighlightedEdgeIds.delete(e.id);
+    const f = !t?.style && s ? "#3a84ff" : void 0, p = r?.strokeColor, u = r?.targetMarkerColor, w = p ?? l ?? f, D = !!t?.style || this.prevEdgeDecorationColors.has(e.id) || this.defaultHighlightedEdgeIds.has(e.id) || this.prevEdgeStyleIds.has(e.id);
+    w ? this.setEdgeAttrIfChanged(e, "line/stroke", w) : D && this.restoreEdgeAttr(e, "line/stroke", "stroke"), this.applyEdgeMarkerDecoration(e, t, "targetMarker", u), t?.style ? (this.prevEdgeStyleIds.add(e.id), a ? this.setEdgeAttrIfChanged(e, "line/strokeWidth", a) : this.restoreEdgeAttr(e, "line/strokeWidth", "strokeWidth"), v ? this.setEdgeAttrIfChanged(e, "line/strokeDasharray", v) : this.restoreEdgeAttr(e, "line/strokeDasharray", "strokeDasharray")) : this.prevEdgeStyleIds.has(e.id) && (this.restoreEdgeAttr(e, "line/strokeWidth", "strokeWidth"), this.restoreEdgeAttr(e, "line/strokeDasharray", "strokeDasharray"), this.prevEdgeStyleIds.delete(e.id)), p ? this.prevEdgeDecorationColors.add(e.id) : this.prevEdgeDecorationColors.delete(e.id), f ? this.defaultHighlightedEdgeIds.add(e.id) : this.defaultHighlightedEdgeIds.delete(e.id);
   }
 }
 class Vt {
-  instanceId = Q();
+  instanceId = J();
   registeredShapes = /* @__PURE__ */ new Map();
   wrappedComponents = /* @__PURE__ */ new Map();
   getShapeName(e) {
@@ -1007,7 +1007,7 @@ class Xt {
   idGenerator;
   disposers = [];
   constructor(e, o, t, s, r) {
-    this.graph = e, this.onUiEvent = o, this.onCommand = t, this.flowModelRef = s, this.idGenerator = r ?? Ge, this.bindEvents();
+    this.graph = e, this.onUiEvent = o, this.onCommand = t, this.flowModelRef = s, this.idGenerator = r ?? ze, this.bindEvents();
   }
   dispose() {
     for (const e of this.disposers) e();
@@ -1047,7 +1047,7 @@ class Xt {
     }), this.on("node:moved", ({ node: e }) => {
       const o = e.getPosition();
       this.onCommand({
-        id: Q(),
+        id: J(),
         source: "user:drag",
         label: "移动节点",
         timestamp: Date.now(),
@@ -1058,7 +1058,7 @@ class Xt {
       if (!t || !s) return;
       const r = e.getSourcePortId(), i = e.getTargetPortId(), l = e.id in this.flowModelRef.value.edges;
       o && !l ? (this.graph.removeCell(e), this.onCommand({
-        id: Q(),
+        id: J(),
         source: "user:drag",
         label: "连线",
         timestamp: Date.now(),
@@ -1073,7 +1073,7 @@ class Xt {
           }
         ]
       })) : this.onCommand({
-        id: Q(),
+        id: J(),
         source: "user:drag",
         label: "重连",
         timestamp: Date.now(),
@@ -1102,7 +1102,7 @@ class Xt {
         });
       }
       r.length && this.onCommand({
-        id: Q(),
+        id: J(),
         source: "user:drag",
         label: "拖动标签",
         timestamp: Date.now(),
@@ -1186,85 +1186,85 @@ function to({
   defaultInsertGap: l,
   getContextMenuItems: a,
   onHighlightChange: v,
-  resolveNodeShape: u
+  resolveNodeShape: f
 }) {
-  const h = i ?? Ge;
-  let c = [], w = [], N = null, O = !1, b = null;
-  async function M() {
-    if (O) return N;
+  const p = i ?? ze;
+  let u = [], w = [], D = null, O = !1, b = null;
+  async function S() {
+    if (O) return D;
     O = !0;
     try {
-      const f = await import("@antv/x6-plugin-dnd"), y = f.Dnd ?? f.default;
-      return y ? (N = new y({
+      const d = await import("@antv/x6-plugin-dnd"), y = d.Dnd ?? d.default;
+      return y ? (D = new y({
         target: n,
         scaled: !0,
         animation: !0,
-        getDragNode: (d) => d.clone(),
-        getDropNode: (d) => d.clone()
-      }), N) : null;
+        getDragNode: (c) => c.clone(),
+        getDropNode: (c) => c.clone()
+      }), D) : null;
     } catch {
       return console.warn("[flow-canvas] @antv/x6-plugin-dnd not available, add it to your dependencies"), null;
     }
   }
-  function S() {
-    return new Promise((f) => {
-      requestAnimationFrame(() => requestAnimationFrame(() => f()));
+  function M() {
+    return new Promise((d) => {
+      requestAnimationFrame(() => requestAnimationFrame(() => d()));
     });
   }
-  const H = ({ node: f }) => {
-    const y = f.getData?.();
+  const B = ({ node: d }) => {
+    const y = d.getData?.();
     if (!y?._dndSessionId || y._dndSessionId !== b) return;
     b = null;
-    const d = f.getPosition();
-    n.removeNode(f.id);
-    const { _dndSessionId: g, ...p } = y, m = p.id || h("node");
+    const c = d.getPosition();
+    n.removeNode(d.id);
+    const { _dndSessionId: g, ...h } = y, m = h.id || p("node");
     o({
-      id: Q(),
+      id: J(),
       source: "user:drag",
       label: "拖入节点",
       timestamp: Date.now(),
       commands: [
         {
           type: "node.add",
-          node: { ...p, id: m, position: { x: d.x, y: d.y } }
+          node: { ...h, id: m, position: { x: c.x, y: c.y } }
         }
       ]
     });
   };
-  n.on("node:added", H);
-  function X(f) {
-    const y = t.nodeTypes[f.type];
-    return ze(f, y?.getPorts);
+  n.on("node:added", B);
+  function j(d) {
+    const y = t.nodeTypes[d.type];
+    return Ue(d, y?.getPorts);
   }
-  function k(f) {
-    return f ?? ft(n.getSelectedCells?.() ?? []);
+  function k(d) {
+    return d ?? ft(n.getSelectedCells?.() ?? []);
   }
-  function K(f, y, d, g, p) {
-    switch (f) {
+  function X(d, y, c, g, h) {
+    switch (d) {
       case "left":
         return {
-          x: y.position.x - p - g.width,
-          y: y.position.y + (d.height - g.height) / 2
+          x: y.position.x - h - g.width,
+          y: y.position.y + (c.height - g.height) / 2
         };
       case "top":
         return {
-          x: y.position.x + (d.width - g.width) / 2,
-          y: y.position.y - p - g.height
+          x: y.position.x + (c.width - g.width) / 2,
+          y: y.position.y - h - g.height
         };
       case "bottom":
         return {
-          x: y.position.x + (d.width - g.width) / 2,
-          y: y.position.y + d.height + p
+          x: y.position.x + (c.width - g.width) / 2,
+          y: y.position.y + c.height + h
         };
       default:
         return {
-          x: y.position.x + d.width + p,
-          y: y.position.y + (d.height - g.height) / 2
+          x: y.position.x + c.width + h,
+          y: y.position.y + (c.height - g.height) / 2
         };
     }
   }
-  function R(f) {
-    switch (f) {
+  function U(d) {
+    switch (d) {
       case "left":
         return "right";
       case "top":
@@ -1275,18 +1275,18 @@ function to({
         return "left";
     }
   }
-  const B = {
+  const G = {
     zoomIn() {
       n.zoom(0.1);
     },
     zoomOut() {
       n.zoom(-0.1);
     },
-    zoomTo(f) {
-      n.zoomTo(f);
+    zoomTo(d) {
+      n.zoomTo(d);
     },
-    zoomToFit() {
-      n.zoomToFit({ padding: 40, maxScale: 1.5 });
+    zoomToFit(d) {
+      n.zoomToFit({ padding: 40, maxScale: 1, ...d });
     },
     getZoom() {
       return n.zoom();
@@ -1297,218 +1297,218 @@ function to({
     scrollToOrigin() {
       n.translate(0, 0);
     },
-    scrollToNode(f) {
-      const y = n.getCellById(f);
+    scrollToNode(d) {
+      const y = n.getCellById(d);
       y && n.centerCell(y);
     },
     getSelection() {
       return k();
     },
-    getSelectionBounds(f) {
-      return Qt(n, k(f));
+    getSelectionBounds(d) {
+      return Qt(n, k(d));
     },
-    selectNodes(f) {
-      const y = f.map((d) => n.getCellById(d)).filter(Boolean);
+    selectNodes(d) {
+      const y = d.map((c) => n.getCellById(c)).filter(Boolean);
       n.select?.(y);
     },
-    selectEdges(f) {
-      const y = f.map((d) => n.getCellById(d)).filter(Boolean);
+    selectEdges(d) {
+      const y = d.map((c) => n.getCellById(c)).filter(Boolean);
       n.select?.(y);
     },
     clearSelection() {
-      const f = n.getSelectedCells?.();
-      f?.length && n.unselect?.(f);
+      const d = n.getSelectedCells?.();
+      d?.length && n.unselect?.(d);
     },
-    deleteSelection(f) {
-      const y = k(f?.selection), d = gt(y, s.value, r ?? (() => ({}))), g = Jt(d);
+    deleteSelection(d) {
+      const y = k(d?.selection), c = gt(y, s.value, r ?? (() => ({}))), g = Jt(c);
       if (g.length === 0) return null;
-      const p = o({
-        id: Q(),
-        source: f?.source ?? "user:toolbar",
-        label: f?.label ?? "删除选中",
+      const h = o({
+        id: J(),
+        source: d?.source ?? "user:toolbar",
+        label: d?.label ?? "删除选中",
         timestamp: Date.now(),
         commands: g
       });
-      return p.status === "applied" && f?.clearSelectionAfterApply !== !1 && B.clearSelection(), p;
+      return h.status === "applied" && d?.clearSelectionAfterApply !== !1 && G.clearSelection(), h;
     },
-    registerDndSource(f, y) {
-      const d = async (g) => {
-        const p = await M();
-        if (!p) return;
-        const m = Q();
+    registerDndSource(d, y) {
+      const c = async (g) => {
+        const h = await S();
+        if (!h) return;
+        const m = J();
         b = m;
-        const E = y(), $ = u?.(E.type), U = n.createNode({
-          width: $?.width ?? 154,
-          height: $?.height ?? 54,
-          shape: $?.shapeName ?? "rect",
+        const E = y(), L = f?.(E.type), z = n.createNode({
+          width: L?.width ?? 154,
+          height: L?.height ?? 54,
+          shape: L?.shapeName ?? "rect",
           data: { ...E, _dndSessionId: m }
         });
-        p.start(U, g);
+        h.start(z, g);
       };
-      return f.addEventListener("mousedown", d), () => {
-        f.removeEventListener("mousedown", d);
+      return d.addEventListener("mousedown", c), () => {
+        d.removeEventListener("mousedown", c);
       };
     },
     /**
      * 通过编程方式发起连线：直接命中真实 port 元素，
      * 复用 X6 原生的连线拖拽流程与 connecting.createEdge 配置。
      */
-    startConnection(f, y) {
-      const d = n.getCellById(f);
-      if (!d?.isNode()) return;
-      const g = d, p = n.findViewByCell(g);
-      if (!p) return;
-      const m = p.findPortElem(y, "circle") ?? p.findPortElem(y);
+    startConnection(d, y) {
+      const c = n.getCellById(d);
+      if (!c?.isNode()) return;
+      const g = c, h = n.findViewByCell(g);
+      if (!h) return;
+      const m = h.findPortElem(y, "circle") ?? h.findPortElem(y);
       if (!m) return;
-      const $ = (m.matches?.("[magnet]") ? m : m.querySelector?.("[magnet]")) ?? m, U = $.getBoundingClientRect(), D = U.left + U.width / 2, L = U.top + U.height / 2, x = new MouseEvent("mousedown", {
-        clientX: D,
-        clientY: L,
+      const L = (m.matches?.("[magnet]") ? m : m.querySelector?.("[magnet]")) ?? m, z = L.getBoundingClientRect(), ie = z.left + z.width / 2, N = z.top + z.height / 2, _ = new MouseEvent("mousedown", {
+        clientX: ie,
+        clientY: N,
         button: 0,
         buttons: 1,
         bubbles: !0,
         cancelable: !0
       });
-      $.dispatchEvent(x);
+      L.dispatchEvent(_);
     },
-    async exportAsImage(f) {
-      const { domToBlob: y } = await import("modern-screenshot"), d = f?.padding ?? 20, g = f?.backgroundColor ?? n.options.background?.color ?? "#ffffff", p = n.zoom(), m = n.translate(), E = n.getContentBBox(), $ = E.width / p, U = E.height / p;
-      if ($ === 0 || U === 0)
+    async exportAsImage(d) {
+      const { domToBlob: y } = await import("modern-screenshot"), c = d?.padding ?? 20, g = d?.backgroundColor ?? n.options.background?.color ?? "#ffffff", h = n.zoom(), m = n.translate(), E = n.getContentBBox(), L = E.width / h, z = E.height / h;
+      if (L === 0 || z === 0)
         return new Blob();
-      const D = (E.x - m.tx) / p, L = (E.y - m.ty) / p, x = Math.ceil($ + d * 2), T = Math.ceil(U + d * 2), G = document.createElement("div");
-      G.style.cssText = "position:fixed;left:-99999px;top:0;pointer-events:none;";
-      const j = n.container.cloneNode(!0);
-      j.style.width = `${x}px`, j.style.height = `${T}px`, j.style.overflow = "visible";
-      const ee = j.querySelector("svg");
-      ee && (ee.setAttribute("width", String(x)), ee.setAttribute("height", String(T)), ee.style.width = `${x}px`, ee.style.height = `${T}px`), j.querySelector(".x6-graph-svg-viewport")?.setAttribute("transform", `matrix(1,0,0,1,${-D + d},${-L + d})`), G.appendChild(j), document.body.appendChild(G);
+      const ie = (E.x - m.tx) / h, N = (E.y - m.ty) / h, _ = Math.ceil(L + c * 2), x = Math.ceil(z + c * 2), R = document.createElement("div");
+      R.style.cssText = "position:fixed;left:-99999px;top:0;pointer-events:none;";
+      const F = n.container.cloneNode(!0);
+      F.style.width = `${_}px`, F.style.height = `${x}px`, F.style.overflow = "visible";
+      const Z = F.querySelector("svg");
+      Z && (Z.setAttribute("width", String(_)), Z.setAttribute("height", String(x)), Z.style.width = `${_}px`, Z.style.height = `${x}px`), F.querySelector(".x6-graph-svg-viewport")?.setAttribute("transform", `matrix(1,0,0,1,${-ie + c},${-N + c})`), R.appendChild(F), document.body.appendChild(R);
       try {
-        return await S(), await y(j, {
-          width: x,
-          height: T,
+        return await M(), await y(F, {
+          width: _,
+          height: x,
           backgroundColor: g,
-          scale: f?.scale ?? window.devicePixelRatio,
-          filter: (Z) => {
-            if (Z instanceof Element) {
-              const J = Z.getAttribute("class") ?? "";
-              if (J.includes("x6-widget-selection") || J.includes("x6-widget-transform") || J.includes("x6-graph-grid") || J.includes("x6-graph-background"))
+          scale: d?.scale ?? window.devicePixelRatio,
+          filter: (Q) => {
+            if (Q instanceof Element) {
+              const K = Q.getAttribute("class") ?? "";
+              if (K.includes("x6-widget-selection") || K.includes("x6-widget-transform") || K.includes("x6-graph-grid") || K.includes("x6-graph-background"))
                 return !1;
             }
             return !0;
           }
         });
-      } catch (Z) {
-        return console.warn("[flow-canvas] Export failed:", Z), new Blob();
+      } catch (Q) {
+        return console.warn("[flow-canvas] Export failed:", Q), new Blob();
       } finally {
-        G.remove();
+        R.remove();
       }
     },
-    highlightNodes(f) {
-      c = f, v?.(c, w);
+    highlightNodes(d) {
+      u = d, v?.(u, w);
     },
-    highlightEdges(f) {
-      w = f, v?.(c, w);
+    highlightEdges(d) {
+      w = d, v?.(u, w);
     },
     clearHighlight() {
-      c = [], w = [], v?.([], []);
+      u = [], w = [], v?.([], []);
     },
     overlay: e,
-    getContextMenuItems(f) {
-      return a?.(f) ?? [];
+    getContextMenuItems(d) {
+      return a?.(d) ?? [];
     },
-    insertNodeToRight(f, y, d) {
-      const g = s.value, p = g.nodes[f];
-      if (!p)
+    insertNodeToRight(d, y, c) {
+      const g = s.value, h = g.nodes[d];
+      if (!h)
         return {
           status: "invalid",
           envelope: { id: "", source: "user:toolbar", timestamp: Date.now(), commands: [] },
-          error: { code: "constraint_violated", reason: `Source node "${f}" not found`, source: "api" }
+          error: { code: "constraint_violated", reason: `Source node "${d}" not found`, source: "api" }
         };
-      const m = d?.gap ?? l ?? eo, E = d?.direction ?? "right", $ = t.nodeTypes[p.type], U = t.nodeTypes[y.type], D = $?.getSize(p) ?? { width: 154, height: 54 }, L = U?.getSize({ ...y, position: { x: 0, y: 0 } }) ?? {
+      const m = c?.gap ?? l ?? eo, E = c?.direction ?? "right", L = t.nodeTypes[h.type], z = t.nodeTypes[y.type], ie = L?.getSize(h) ?? { width: 154, height: 54 }, N = z?.getSize({ ...y, position: { x: 0, y: 0 } }) ?? {
         width: 154,
         height: 54
-      }, x = K(E, p, D, L, m), T = y.id || h("node"), G = { ...y, id: T, position: x }, j = [{ type: "node.add", node: G }];
-      if (d?.autoWireEdges) {
-        const ie = X(p), Z = X(G), J = E, Ee = R(E), he = ie.find((I) => I.group === J), ye = Z.find((I) => I.group === Ee), $e = Z.find((I) => I.group === J), Se = he ? Object.values(g.edges).find(
-          (I) => I.source.nodeId === f && I.source.portId === he.id
-        ) : Object.values(g.edges).find((I) => I.source.nodeId === f);
+      }, _ = X(E, h, ie, N, m), x = y.id || p("node"), R = { ...y, id: x, position: _ }, F = [{ type: "node.add", node: R }];
+      if (c?.autoWireEdges) {
+        const ae = j(h), Q = j(R), K = E, me = U(E), pe = ae.find((I) => I.group === K), we = Q.find((I) => I.group === me), $e = Q.find((I) => I.group === K), Se = pe ? Object.values(g.edges).find(
+          (I) => I.source.nodeId === d && I.source.portId === pe.id
+        ) : Object.values(g.edges).find((I) => I.source.nodeId === d);
         if (Se) {
-          const I = Se.target, C = L.width + m, _ = E === "right" ? C : E === "left" ? -C : 0, W = E === "bottom" ? C : E === "top" ? -C : 0, te = /* @__PURE__ */ new Set(), ae = [I.nodeId];
-          for (; ae.length > 0; ) {
-            const ne = ae.shift();
-            if (te.has(ne) || ne === f) continue;
-            te.add(ne);
-            const xe = g.nodes[ne];
+          const I = Se.target, C = N.width + m, P = E === "right" ? C : E === "left" ? -C : 0, W = E === "bottom" ? C : E === "top" ? -C : 0, ee = /* @__PURE__ */ new Set(), le = [I.nodeId];
+          for (; le.length > 0; ) {
+            const oe = le.shift();
+            if (ee.has(oe) || oe === d) continue;
+            ee.add(oe);
+            const xe = g.nodes[oe];
             if (xe) {
-              j.push({
+              F.push({
                 type: "node.move",
-                nodeId: ne,
+                nodeId: oe,
                 position: {
-                  x: xe.position.x + _,
+                  x: xe.position.x + P,
                   y: xe.position.y + W
                 }
               });
-              for (const we of Object.values(g.edges))
-                we.source.nodeId === ne && !te.has(we.target.nodeId) && ae.push(we.target.nodeId);
+              for (const be of Object.values(g.edges))
+                be.source.nodeId === oe && !ee.has(be.target.nodeId) && le.push(be.target.nodeId);
             }
           }
-          j.push({ type: "edge.remove", edgeId: Se.id }), j.push({
+          F.push({ type: "edge.remove", edgeId: Se.id }), F.push({
             type: "edge.add",
             edge: {
-              id: h("edge"),
-              source: { nodeId: f, portId: he?.id },
-              target: { nodeId: T, portId: ye?.id }
+              id: p("edge"),
+              source: { nodeId: d, portId: pe?.id },
+              target: { nodeId: x, portId: we?.id }
             }
-          }), j.push({
+          }), F.push({
             type: "edge.add",
             edge: {
-              id: h("edge"),
-              source: { nodeId: T, portId: $e?.id },
+              id: p("edge"),
+              source: { nodeId: x, portId: $e?.id },
               target: I
             }
           });
         } else
-          j.push({
+          F.push({
             type: "edge.add",
             edge: {
-              id: h("edge"),
-              source: { nodeId: f, portId: he?.id },
-              target: { nodeId: T, portId: ye?.id }
+              id: p("edge"),
+              source: { nodeId: d, portId: pe?.id },
+              target: { nodeId: x, portId: we?.id }
             }
           });
       }
-      const ee = {
-        id: Q(),
-        source: d?.source ?? "user:toolbar",
-        label: d?.label ?? "插入节点",
+      const Z = {
+        id: J(),
+        source: c?.source ?? "user:toolbar",
+        label: c?.label ?? "插入节点",
         timestamp: Date.now(),
-        commands: j
+        commands: F
       };
-      return o(ee);
+      return o(Z);
     },
-    onGraphEvent(f, y) {
-      return n.on(f, y), () => n.off(f, y);
+    onGraphEvent(d, y) {
+      return n.on(d, y), () => n.off(d, y);
     },
     unsafeGetGraph() {
       return n;
     }
   };
-  return B;
+  return G;
 }
 function oo() {
-  const n = z(null), e = z(!1);
+  const n = H(null), e = H(!1);
   let o = null, t = !1;
-  function s(h) {
-    o && (clearTimeout(o), o = null), n.value = h;
+  function s(p) {
+    o && (clearTimeout(o), o = null), n.value = p;
   }
-  function r(h = 100) {
+  function r(p = 100) {
     t || (o && clearTimeout(o), o = setTimeout(() => {
       n.value = null, o = null;
-    }, h));
+    }, p));
   }
   function i() {
     t = !0, o && (clearTimeout(o), o = null);
   }
-  function l(h = 100) {
-    t = !1, r(h);
+  function l(p = 100) {
+    t = !1, r(p);
   }
   function a() {
     o && (clearTimeout(o), o = null);
@@ -1516,33 +1516,33 @@ function oo() {
   function v() {
     a(), t = !1, n.value = null;
   }
-  function u() {
+  function f() {
     o && clearTimeout(o);
   }
-  return { hoveredNodeId: n, isDraggingNode: e, enter: s, leave: r, enterOverlay: i, leaveOverlay: l, cancelLeave: a, reset: v, cleanup: u };
+  return { hoveredNodeId: n, isDraggingNode: e, enter: s, leave: r, enterOverlay: i, leaveOverlay: l, cancelLeave: a, reset: v, cleanup: f };
 }
-const Ve = 10, Ae = 12;
-function Xe(n, e) {
+const Xe = 10, Ae = 12;
+function Ke(n, e) {
   const o = n.getTotalLength();
   if (o === 0) return { ...e, length: 0, totalLength: 0 };
   let t = n.getPointAtLength(0), s = 1 / 0;
   const r = 50, i = o / r;
   let l = 0;
-  for (let h = 0; h <= r; h++) {
-    const c = h * i, w = n.getPointAtLength(c), N = (w.x - e.x) ** 2 + (w.y - e.y) ** 2;
-    N < s && (s = N, t = w, l = c);
+  for (let p = 0; p <= r; p++) {
+    const u = p * i, w = n.getPointAtLength(u), D = (w.x - e.x) ** 2 + (w.y - e.y) ** 2;
+    D < s && (s = D, t = w, l = u);
   }
-  const a = Math.max(0, l - i), v = Math.min(o, l + i), u = (v - a) / 20;
-  for (let h = a; h <= v; h += u) {
-    const c = n.getPointAtLength(h), w = (c.x - e.x) ** 2 + (c.y - e.y) ** 2;
-    w < s && (s = w, t = c, l = h);
+  const a = Math.max(0, l - i), v = Math.min(o, l + i), f = (v - a) / 20;
+  for (let p = a; p <= v; p += f) {
+    const u = n.getPointAtLength(p), w = (u.x - e.x) ** 2 + (u.y - e.y) ** 2;
+    w < s && (s = w, t = u, l = p);
   }
   return { x: t.x, y: t.y, length: l, totalLength: o };
 }
-function Ke(n, e) {
-  return n < Ve || n > e - Ve;
+function Ye(n, e) {
+  return n < Xe || n > e - Xe;
 }
-function Ye(n, e, o) {
+function Ze(n, e, o) {
   const t = n.querySelectorAll(".x6-edge-label");
   for (const s of t) {
     const r = s.getBoundingClientRect();
@@ -1551,7 +1551,7 @@ function Ye(n, e, o) {
   }
   return !1;
 }
-function Ze() {
+function Qe() {
   const n = "http://www.w3.org/2000/svg", e = document.createElementNS(n, "g");
   e.setAttribute("class", "flow-canvas-edge-delete-tool"), e.style.cursor = "pointer";
   const o = document.createElementNS(n, "rect");
@@ -1563,16 +1563,16 @@ function no(n) {
   let e = null, o = null;
   function t(l, a) {
     if (r(), o = l, a.target?.closest?.(".x6-edge-label")) return;
-    const u = n.getCellById(l);
-    if (!u?.isEdge()) return;
-    const h = n.findViewByCell(u);
-    if (!h) return;
-    const c = h.container.querySelector("path");
-    if (!c) return;
-    const w = n.clientToLocal(a.clientX, a.clientY), N = Xe(c, w);
-    if (Ke(N.length, N.totalLength) || Ye(h.container, a.clientX, a.clientY)) return;
-    const O = Ze();
-    O.setAttribute("transform", `translate(${N.x}, ${N.y})`), h.container.appendChild(O), e = O;
+    const f = n.getCellById(l);
+    if (!f?.isEdge()) return;
+    const p = n.findViewByCell(f);
+    if (!p) return;
+    const u = p.container.querySelector("path");
+    if (!u) return;
+    const w = n.clientToLocal(a.clientX, a.clientY), D = Ke(u, w);
+    if (Ye(D.length, D.totalLength) || Ze(p.container, a.clientX, a.clientY)) return;
+    const O = Qe();
+    O.setAttribute("transform", `translate(${D.x}, ${D.y})`), p.container.appendChild(O), e = O;
   }
   function s(l) {
     if (!o) return;
@@ -1582,18 +1582,18 @@ function no(n) {
     }
     const v = n.getCellById(o);
     if (!v?.isEdge()) return;
-    const u = n.findViewByCell(v);
-    if (!u) return;
-    const h = u.container.querySelector("path");
-    if (!h) return;
-    const c = n.clientToLocal(l.clientX, l.clientY), w = Xe(h, c);
-    if (Ke(w.length, w.totalLength) || Ye(u.container, l.clientX, l.clientY))
+    const f = n.findViewByCell(v);
+    if (!f) return;
+    const p = f.container.querySelector("path");
+    if (!p) return;
+    const u = n.clientToLocal(l.clientX, l.clientY), w = Ke(p, u);
+    if (Ye(w.length, w.totalLength) || Ze(f.container, l.clientX, l.clientY))
       e && e.setAttribute("display", "none");
     else if (e)
       e.removeAttribute("display"), e.setAttribute("transform", `translate(${w.x}, ${w.y})`);
     else {
-      const N = Ze();
-      N.setAttribute("transform", `translate(${w.x}, ${w.y})`), u.container.appendChild(N), e = N;
+      const D = Qe();
+      D.setAttribute("transform", `translate(${w.x}, ${w.y})`), f.container.appendChild(D), e = D;
     }
   }
   function r() {
@@ -1606,29 +1606,29 @@ function no(n) {
 }
 function so(n) {
   let e = null, o = 0;
-  function t(u) {
-    const h = u ? "visible" : "hidden";
-    for (const c of n.getNodes())
-      for (const w of c.getPorts())
-        c.setPortProp(w.id, "attrs/circle/visibility", h);
+  function t(f) {
+    const p = f ? "visible" : "hidden";
+    for (const u of n.getNodes())
+      for (const w of u.getPorts())
+        u.setPortProp(w.id, "attrs/circle/visibility", p);
   }
-  function s(u) {
+  function s(f) {
     if (!e)
-      for (const h of u.getPorts())
-        u.setPortProp(h.id, "attrs/circle/visibility", "visible");
+      for (const p of f.getPorts())
+        f.setPortProp(p.id, "attrs/circle/visibility", "visible");
   }
-  function r(u) {
+  function r(f) {
     if (!e)
-      for (const h of u.getPorts())
-        u.setPortProp(h.id, "attrs/circle/visibility", "hidden");
-  }
-  function i(u, h) {
-    if (!u.getTargetCell())
-      if (e = u.id, h?.size)
-        for (const c of n.getNodes()) {
-          const w = h.has(c.id) ? "hidden" : "visible";
-          for (const N of c.getPorts())
-            c.setPortProp(N.id, "attrs/circle/visibility", w);
+      for (const p of f.getPorts())
+        f.setPortProp(p.id, "attrs/circle/visibility", "hidden");
+  }
+  function i(f, p) {
+    if (!f.getTargetCell())
+      if (e = f.id, p?.size)
+        for (const u of n.getNodes()) {
+          const w = p.has(u.id) ? "hidden" : "visible";
+          for (const D of u.getPorts())
+            u.setPortProp(D.id, "attrs/circle/visibility", w);
         }
       else
         t(!0);
@@ -1636,8 +1636,8 @@ function so(n) {
   function l() {
     e = null, t(!1), o = Date.now() + 300;
   }
-  function a(u) {
-    u === e && (e = null, t(!1));
+  function a(f) {
+    f === e && (e = null, t(!1));
   }
   function v() {
     return !e && Date.now() >= o;
@@ -1651,48 +1651,50 @@ function so(n) {
     canShowEdgeTool: v
   };
 }
-function Qe(n) {
+function Je(n) {
   return n === "top" || n === "right" || n === "bottom" || n === "left";
 }
 function ro(n) {
-  const { editor: e, nodeHover: o, isSelectionModeActive: t, viewportVersion: s, getNodeBehavior: r, getInsertGap: i } = n, { isDraggingNode: l } = n, a = z(null), v = z(!1);
-  let u = null, h = null, c = null;
+  const { editor: e, nodeHover: o, isSelectionModeActive: t, viewportVersion: s, getNodeBehavior: r, getInsertGap: i } = n, { isDraggingNode: l } = n, a = H(null), v = H(!1);
+  let f = null, p = null, u = null;
   const w = V(() => ({
     enabled: !0,
     portGroup: "right",
+    autoPanOnOpen: !0,
+    autoPanPadding: 16,
     ...n.quickAddProp.value
   }));
-  function N() {
-    u && (clearTimeout(u), u = null);
+  function D() {
+    f && (clearTimeout(f), f = null);
   }
   function O() {
-    u && clearTimeout(u), u = setTimeout(() => {
-      a.value = null, u = null;
+    f && clearTimeout(f), f = setTimeout(() => {
+      a.value = null, f = null;
     }, 150);
   }
-  function b(D) {
-    return v.value ? !0 : (N(), f(D) ? (a.value = D, !0) : (a.value = null, !1));
-  }
-  function M() {
-    N(), o.enterOverlay();
+  function b(N) {
+    return v.value ? !0 : (D(), d(N) ? (a.value = N, !0) : (a.value = null, !1));
   }
   function S() {
+    D(), o.enterOverlay();
+  }
+  function M() {
     O(), o.leaveOverlay();
   }
-  function H(D) {
-    const L = e.schema.nodeTypes[D.type];
-    return ze(D, L?.getPorts);
+  function B(N) {
+    const _ = e.schema.nodeTypes[N.type];
+    return Ue(N, _?.getPorts);
   }
-  function X(D, L) {
-    const x = w.value.getPort?.(D, L);
+  function j(N, _) {
+    const x = w.value.getPort?.(N, _);
     if (!x) return null;
-    const T = typeof x == "string" ? x : x.id;
-    return L.find((G) => G.id === T) ?? null;
+    const R = typeof x == "string" ? x : x.id;
+    return _.find((F) => F.id === R) ?? null;
   }
-  function k(D, L) {
-    const x = e.api.value?.overlay.getNodeScreenRect(D);
+  function k(N, _) {
+    const x = e.api.value?.overlay.getNodeScreenRect(N);
     if (!x) return null;
-    switch (L) {
+    switch (_) {
       case "top":
         return { x: x.x + x.width / 2, y: x.y };
       case "bottom":
@@ -1705,113 +1707,118 @@ function ro(n) {
         return null;
     }
   }
-  function K(D, L, x) {
-    if (!h) return k(D, x);
-    const T = h.getCellById(D);
-    if (T?.isNode()) {
-      const G = T, j = h.findViewByCell(G), ee = j?.findPortElem(L, "circle") ?? j?.findPortElem(L);
-      if (ee) {
-        const ie = h.container.getBoundingClientRect(), Z = ee.getBoundingClientRect();
+  function X(N, _, x) {
+    if (!p) return k(N, x);
+    const R = p.getCellById(N);
+    if (R?.isNode()) {
+      const F = R, Z = p.findViewByCell(F), ae = Z?.findPortElem(_, "circle") ?? Z?.findPortElem(_);
+      if (ae) {
+        const Q = p.container.getBoundingClientRect(), K = ae.getBoundingClientRect();
         return {
-          x: Z.left - ie.left + Z.width / 2,
-          y: Z.top - ie.top + Z.height / 2
+          x: K.left - Q.left + K.width / 2,
+          y: K.top - Q.top + K.height / 2
         };
       }
     }
-    return k(D, x);
+    return k(N, x);
   }
-  function R(D) {
-    const L = H(D), x = X(D, L) ?? L.find((G) => G.group === w.value.portGroup) ?? null;
+  function U(N) {
+    const _ = B(N), x = j(N, _) ?? _.find((F) => F.group === w.value.portGroup) ?? null;
     if (!x) return null;
-    const T = K(D.id, x.id, x.group);
-    return T ? { portId: x.id, portGroup: x.group, portPosition: T } : null;
+    const R = X(N.id, x.id, x.group);
+    return R ? { portId: x.id, portGroup: x.group, portPosition: R } : null;
   }
-  function B(D) {
-    const L = R(D), x = w.value.insertDirection;
+  function G(N) {
+    const _ = U(N), x = w.value.insertDirection;
     if (typeof x == "function") {
-      const T = x(D, L ? { id: L.portId, group: L.portGroup } : null);
-      if (T) return T;
+      const R = x(N, _ ? { id: _.portId, group: _.portGroup } : null);
+      if (R) return R;
     } else if (x)
       return x;
-    return L && Qe(L.portGroup) ? L.portGroup : Qe(w.value.portGroup) ? w.value.portGroup : "right";
+    return _ && Je(_.portGroup) ? _.portGroup : Je(w.value.portGroup) ? w.value.portGroup : "right";
   }
-  function f(D) {
+  function d(N) {
     if (!w.value.enabled || e.mode.value !== "edit") return !1;
-    const x = e.flowModel.value.nodes[D];
-    return !x || r(x).quickAddEnabled === !1 ? !1 : !!R(x);
+    const x = e.flowModel.value.nodes[N];
+    return !x || r(x).quickAddEnabled === !1 ? !1 : !!U(x);
   }
   const y = V(() => {
     if (s.value, !w.value.enabled) return null;
-    const D = a.value;
-    if (!D || l.value || !e.api.value || e.mode.value !== "edit" || t.value)
+    const N = a.value;
+    if (!N || l.value || !e.api.value || e.mode.value !== "edit" || t.value)
       return null;
-    const x = e.flowModel.value.nodes[D];
+    const x = e.flowModel.value.nodes[N];
     if (!x) return null;
-    const T = r(x);
-    if (T.quickAddEnabled === !1) return null;
-    const G = R(x);
-    return G ? { node: x, ...G, behavior: T } : null;
+    const R = r(x);
+    if (R.quickAddEnabled === !1) return null;
+    const F = U(x);
+    return F ? { node: x, ...F, behavior: R } : null;
   });
-  function d(D) {
-    v.value = !0, y.value && e._emitUiEvent({ type: "node.quick-add", nodeId: D, position: y.value.portPosition });
+  function c(N) {
+    v.value = !0, y.value && e._emitUiEvent({ type: "node.quick-add", nodeId: N, position: y.value.portPosition });
   }
   function g() {
     v.value = !1;
   }
-  function p(D) {
-    const L = e.api.value;
-    if (!L) return;
-    const x = e.flowModel.value.nodes[D];
+  function h(N) {
+    const _ = e.api.value;
+    if (!_) return;
+    const x = e.flowModel.value.nodes[N];
     if (!x) return;
-    const T = R(x);
-    T && L.startConnection(D, T.portId);
+    const R = U(x);
+    R && _.startConnection(N, R.portId);
+  }
+  function m(N) {
+    if (!p || !w.value.autoPanOnOpen || N <= 0) return;
+    const _ = p.translate();
+    p.translate(_.tx - N, _.ty);
   }
-  function m(D, L) {
+  function E(N, _) {
     const x = e.api.value;
     if (!x) return;
-    const T = L.id || e.idGenerator("node"), G = { ...L, id: T }, j = e.flowModel.value.nodes[D];
-    if (!j) return;
-    x.insertNodeToRight(D, G, {
+    const R = _.id || e.idGenerator("node"), F = { ..._, id: R }, Z = e.flowModel.value.nodes[N];
+    if (!Z) return;
+    x.insertNodeToRight(N, F, {
       autoWireEdges: !0,
-      direction: B(j),
+      direction: G(Z),
       gap: i(),
       source: "user:quick-add",
       label: "快捷插入节点"
-    }).status === "applied" && e._emitUiEvent({ type: "node.action.quick-insert", sourceNodeId: D, newNodeId: T }), n.closePopover();
-  }
-  function E(D) {
-    if (!h) return;
-    const L = h.getCellById(D);
-    if (!L?.isNode()) return;
-    const x = L, T = e.flowModel.value.nodes[D];
-    if (!T) return;
-    const G = R(T);
-    let j = !0;
-    r(T).hidePortForQuickAdd === !1 && (j = !1);
-    const ie = j && !l.value && !!G && f(D);
-    for (const Z of x.getPorts()) {
-      const J = ie && Z.id === G?.portId ? "hidden" : "visible";
-      x.setPortProp(Z.id, "attrs/circle/visibility", J);
-    }
-  }
-  function $(D, L) {
-    c?.(), h = D, c = ge(
+    }).status === "applied" && e._emitUiEvent({ type: "node.action.quick-insert", sourceNodeId: N, newNodeId: R }), n.closePopover();
+  }
+  function L(N) {
+    if (!p) return;
+    const _ = p.getCellById(N);
+    if (!_?.isNode()) return;
+    const x = _, R = e.flowModel.value.nodes[N];
+    if (!R) return;
+    const F = U(R);
+    let Z = !0;
+    r(R).hidePortForQuickAdd === !1 && (Z = !1);
+    const Q = Z && !l.value && !!F && d(N);
+    for (const K of x.getPorts()) {
+      const me = Q && K.id === F?.portId ? "hidden" : "visible";
+      x.setPortProp(K.id, "attrs/circle/visibility", me);
+    }
+  }
+  function z(N, _) {
+    u?.(), p = N, u = ge(
       [a, l],
-      ([x], [T]) => {
-        if (T && T !== x) {
-          const G = D.getCellById(T);
-          G?.isNode() && L(G);
+      ([x], [R]) => {
+        if (R && R !== x) {
+          const F = N.getCellById(R);
+          F?.isNode() && _(F);
         }
-        x && E(x);
+        x && L(x);
       },
       { flush: "sync" }
     );
   }
-  ge(y, (D) => {
-    D || (v.value = !1);
+  ge(y, (N) => {
+    N || (v.value = !1);
   });
-  function U() {
-    u && clearTimeout(u), c?.(), c = null, h = null;
+  function ie() {
+    f && clearTimeout(f), u?.(), u = null, p = null;
   }
   return {
     quickAddNodeId: a,
@@ -1820,17 +1827,18 @@ function ro(n) {
     data: y,
     enter: b,
     leave: O,
-    cancelLeave: N,
-    handleOverlayEnter: M,
-    handleOverlayLeave: S,
-    handleOpen: d,
+    cancelLeave: D,
+    handleOverlayEnter: S,
+    handleOverlayLeave: M,
+    handleOpen: c,
     handleClose: g,
-    handleStartDrag: p,
-    handleInsert: m,
-    isActiveForNode: f,
-    syncNodePorts: E,
-    attachRuntime: $,
-    cleanup: U
+    handleStartDrag: h,
+    handlePopoverViewportOverflow: m,
+    handleInsert: E,
+    isActiveForNode: d,
+    syncNodePorts: L,
+    attachRuntime: z,
+    cleanup: ie
   };
 }
 const io = 15, ao = 10;
@@ -1846,125 +1854,125 @@ function lo(n) {
     outgoingPortGroup: "right",
     ...n.edgeDropProp.value
   }));
-  function v(f) {
+  function v(d) {
     if (!o) return null;
-    const y = o.getCellById(f);
+    const y = o.getCellById(d);
     if (!y?.isEdge()) return null;
-    const d = o.findViewByCell(y)?.container;
-    if (!d) return null;
-    const g = d.querySelectorAll("path");
-    for (const p of g)
-      if (p.getAttribute("stroke") !== "transparent") return p;
+    const c = o.findViewByCell(y)?.container;
+    if (!c) return null;
+    const g = c.querySelectorAll("path");
+    for (const h of g)
+      if (h.getAttribute("stroke") !== "transparent") return h;
     return null;
   }
-  function u(f) {
-    const y = v(f);
-    y && (y.style.stroke = "#3a84ff", r = f);
+  function f(d) {
+    const y = v(d);
+    y && (y.style.stroke = "#3a84ff", r = d);
   }
-  function h() {
+  function p() {
     if (!r) return;
-    const f = v(r);
-    f && (f.style.stroke = ""), r = null;
+    const d = v(r);
+    d && (d.style.stroke = ""), r = null;
   }
-  function c(f, y, d) {
+  function u(d, y, c) {
     if (o) {
-      const g = o.getCellById(f);
+      const g = o.getCellById(d);
       if (g?.isNode()) {
-        const p = g.getPorts().find((m) => m.group === d);
-        if (p?.id) return p.id;
+        const h = g.getPorts().find((m) => m.group === c);
+        if (h?.id) return h.id;
       }
     }
     if (y.ports?.length) {
-      const g = y.ports.find((p) => p.group === d);
+      const g = y.ports.find((h) => h.group === c);
       if (g) return g.id;
     }
-    return d;
+    return c;
   }
-  function w(f) {
-    const y = f.getTotalLength();
+  function w(d) {
+    const y = d.getTotalLength();
     if (y === 0) return [];
-    const d = [];
-    for (let p = 0; p <= y; p += ao) {
-      const m = f.getPointAtLength(p);
-      d.push({ x: m.x, y: m.y });
+    const c = [];
+    for (let h = 0; h <= y; h += ao) {
+      const m = d.getPointAtLength(h);
+      c.push({ x: m.x, y: m.y });
     }
-    const g = f.getPointAtLength(y);
-    return d.push({ x: g.x, y: g.y }), d;
+    const g = d.getPointAtLength(y);
+    return c.push({ x: g.x, y: g.y }), c;
   }
-  function N(f, y, d) {
+  function D(d, y, c) {
     if (!o) return null;
-    const g = a.value, p = g.bufferMargin, m = {
-      x: f.x + p,
-      y: f.y + p,
-      width: Math.max(0, f.width - p * 2),
-      height: Math.max(0, f.height - p * 2)
+    const g = a.value, h = g.bufferMargin, m = {
+      x: d.x + h,
+      y: d.y + h,
+      width: Math.max(0, d.width - h * 2),
+      height: Math.max(0, d.height - h * 2)
     };
     if (m.width <= 0 || m.height <= 0) return null;
-    const E = m.x + m.width, $ = m.y + m.height;
-    let U = null;
-    const D = f.x + f.width / 2, L = f.y + f.height / 2;
-    for (const x of o.getEdges()) {
-      const T = y.edges[x.id];
-      if (!T || d && (T.source.nodeId === d || T.target.nodeId === d) || g.isEdgeDropTarget && !g.isEdgeDropTarget(T, y)) continue;
-      const G = o.findViewByCell(x);
-      if (!G) continue;
-      const j = G.findOne?.("path");
-      if (!j || typeof j.getTotalLength != "function") continue;
-      const ee = w(j);
-      if (!ee.length) continue;
-      let ie = !1, Z = 1 / 0;
-      for (const J of ee)
-        if (J.x >= m.x && J.x <= E && J.y >= m.y && J.y <= $) {
-          const Ee = J.x - D, he = J.y - L, ye = Ee * Ee + he * he;
-          ye < Z && (Z = ye), ie = !0;
+    const E = m.x + m.width, L = m.y + m.height;
+    let z = null;
+    const ie = d.x + d.width / 2, N = d.y + d.height / 2;
+    for (const _ of o.getEdges()) {
+      const x = y.edges[_.id];
+      if (!x || c && (x.source.nodeId === c || x.target.nodeId === c) || g.isEdgeDropTarget && !g.isEdgeDropTarget(x, y)) continue;
+      const R = o.findViewByCell(_);
+      if (!R) continue;
+      const F = R.findOne?.("path");
+      if (!F || typeof F.getTotalLength != "function") continue;
+      const Z = w(F);
+      if (!Z.length) continue;
+      let ae = !1, Q = 1 / 0;
+      for (const K of Z)
+        if (K.x >= m.x && K.x <= E && K.y >= m.y && K.y <= L) {
+          const me = K.x - ie, pe = K.y - N, we = me * me + pe * pe;
+          we < Q && (Q = we), ae = !0;
         }
-      ie && (!U || Z < U.distSq) && (U = { edgeId: x.id, edge: T, distSq: Z });
+      ae && (!z || Q < z.distSq) && (z = { edgeId: _.id, edge: x, distSq: Q });
     }
-    return U ? { edgeId: U.edgeId, edge: U.edge } : null;
+    return z ? { edgeId: z.edgeId, edge: z.edge } : null;
   }
-  function O(f, y) {
+  function O(d, y) {
     if (!a.value.enabled) return;
-    const g = e.flowModel.value, p = N(f, g, y);
-    p ? t !== p.edgeId && (h(), t = p.edgeId, u(p.edgeId)) : t && (h(), t = null);
+    const g = e.flowModel.value, h = D(d, g, y);
+    h ? t !== h.edgeId && (p(), t = h.edgeId, f(h.edgeId)) : t && (p(), t = null);
   }
   let b = !0;
-  function M({ node: f }) {
+  function S({ node: d }) {
     if (t = null, !a.value.enabled) return;
-    const y = e.flowModel.value, d = y.nodes[f.id];
-    if (!d) {
+    const y = e.flowModel.value, c = y.nodes[d.id];
+    if (!c) {
       b = !1;
       return;
     }
     const g = a.value;
-    b = !g.isNodeInsertable || g.isNodeInsertable(d, y);
+    b = !g.isNodeInsertable || g.isNodeInsertable(c, y);
   }
-  function S({ node: f }) {
+  function M({ node: d }) {
     !a.value.enabled || !b || s === null && (s = requestAnimationFrame(() => {
       if (s = null, !o) return;
-      const y = f.getPosition(), d = f.getSize();
-      O({ x: y.x, y: y.y, width: d.width, height: d.height }, f.id);
+      const y = d.getPosition(), c = d.getSize();
+      O({ x: y.x, y: y.y, width: c.width, height: c.height }, d.id);
     }));
   }
-  function H() {
-    s !== null && (cancelAnimationFrame(s), s = null), h(), b = !0;
+  function B() {
+    s !== null && (cancelAnimationFrame(s), s = null), p(), b = !0;
   }
-  function X() {
+  function j() {
     if (!o) return;
-    let f = !1;
+    let d = !1;
     l = () => {
       if (!a.value.enabled) return;
       const y = document.querySelector(".x6-widget-dnd");
       if (!y) {
-        f && (f = !1, h(), t = null);
+        d && (d = !1, p(), t = null);
         return;
       }
-      f = !0, s === null && (s = requestAnimationFrame(() => {
+      d = !0, s === null && (s = requestAnimationFrame(() => {
         if (s = null, !o) return;
-        const d = y.getBoundingClientRect(), g = o.clientToLocal(d.left, d.top), p = o.clientToLocal(d.right, d.bottom), m = {
+        const c = y.getBoundingClientRect(), g = o.clientToLocal(c.left, c.top), h = o.clientToLocal(c.right, c.bottom), m = {
           x: g.x,
           y: g.y,
-          width: p.x - g.x,
-          height: p.y - g.y
+          width: h.x - g.x,
+          height: h.y - g.y
         };
         O(m);
       }));
@@ -1973,64 +1981,64 @@ function lo(n) {
     });
   }
   function k() {
-    h(), t = null, s !== null && (cancelAnimationFrame(s), s = null);
+    p(), t = null, s !== null && (cancelAnimationFrame(s), s = null);
   }
-  function K(f) {
-    if (!t || f.source !== "user:drag") return f;
+  function X(d) {
+    if (!t || d.source !== "user:drag") return d;
     const y = t;
-    t = null, h();
-    const d = e.flowModel.value, g = d.edges[y];
-    if (!g) return f;
-    const p = f.commands.find((G) => G.type === "node.add" || G.type === "node.move");
-    if (!p) return f;
-    const m = p.type === "node.add" ? p.node.id : p.nodeId, E = p.type === "node.add" ? p.node : d.nodes[p.nodeId];
-    if (!E) return f;
-    const $ = a.value;
-    if ($.isNodeInsertable && !$.isNodeInsertable(E, d))
-      return f;
-    const U = c(m, E, $.incomingPortGroup), D = c(m, E, $.outgoingPortGroup), L = e.idGenerator("edge"), x = e.idGenerator("edge"), T = [
+    t = null, p();
+    const c = e.flowModel.value, g = c.edges[y];
+    if (!g) return d;
+    const h = d.commands.find((R) => R.type === "node.add" || R.type === "node.move");
+    if (!h) return d;
+    const m = h.type === "node.add" ? h.node.id : h.nodeId, E = h.type === "node.add" ? h.node : c.nodes[h.nodeId];
+    if (!E) return d;
+    const L = a.value;
+    if (L.isNodeInsertable && !L.isNodeInsertable(E, c))
+      return d;
+    const z = u(m, E, L.incomingPortGroup), ie = u(m, E, L.outgoingPortGroup), N = e.idGenerator("edge"), _ = e.idGenerator("edge"), x = [
       { type: "edge.remove", edgeId: y },
       {
         type: "edge.add",
         edge: {
-          id: L,
+          id: N,
           type: g.type,
           source: { nodeId: g.source.nodeId, portId: g.source.portId },
-          target: { nodeId: m, portId: U }
+          target: { nodeId: m, portId: z }
         }
       },
       {
         type: "edge.add",
         edge: {
-          id: x,
+          id: _,
           type: g.type,
-          source: { nodeId: m, portId: D },
+          source: { nodeId: m, portId: ie },
           target: { nodeId: g.target.nodeId, portId: g.target.portId }
         }
       }
     ];
     return {
-      ...f,
+      ...d,
       source: "user:edge-drop",
-      commands: [...f.commands, ...T]
+      commands: [...d.commands, ...x]
     };
   }
-  function R(f) {
-    o = f;
-    const y = (d, g) => {
-      f.on(d, g), i.push(() => f.off(d, g));
+  function U(d) {
+    o = d;
+    const y = (c, g) => {
+      d.on(c, g), i.push(() => d.off(c, g));
     };
-    y("node:move", M), y("node:change:position", S), y("node:moved", H), X();
+    y("node:move", S), y("node:change:position", M), y("node:moved", B), j();
   }
-  function B() {
+  function G() {
     k();
-    for (const f of i) f();
+    for (const d of i) d();
     i.length = 0, o = null, b = !0;
   }
   return {
-    attachRuntime: R,
-    tryExpandForEdgeDrop: K,
-    cleanup: B
+    attachRuntime: U,
+    tryExpandForEdgeDrop: X,
+    cleanup: G
   };
 }
 function co(n) {
@@ -2049,7 +2057,7 @@ function co(n) {
     switch (s) {
       case "delete":
         return n.executeCommand({
-          id: Q(),
+          id: J(),
           source: "user:toolbar",
           label: "删除节点",
           timestamp: Date.now(),
@@ -2059,9 +2067,9 @@ function co(n) {
         if (!l) break;
         const a = n.flowModel.value.nodes[r];
         if (!a) break;
-        const v = e(a), u = 50;
+        const v = e(a), f = 50;
         n.executeCommand({
-          id: Q(),
+          id: J(),
           source: "user:toolbar",
           label: "复制节点",
           timestamp: Date.now(),
@@ -2071,8 +2079,8 @@ function co(n) {
               node: {
                 ...v,
                 position: {
-                  x: a.position.x + u,
-                  y: a.position.y + u
+                  x: a.position.x + f,
+                  y: a.position.y + f
                 }
               }
             }
@@ -2093,17 +2101,17 @@ function co(n) {
         break;
       }
       case "disconnect": {
-        const a = n.flowModel.value, v = Object.entries(a.edges).filter(([, u]) => {
-          const h = u;
-          return h.source.nodeId === r || h.target.nodeId === r;
-        }).map(([u]) => u);
+        const a = n.flowModel.value, v = Object.entries(a.edges).filter(([, f]) => {
+          const p = f;
+          return p.source.nodeId === r || p.target.nodeId === r;
+        }).map(([f]) => f);
         if (v.length === 0) break;
         n.executeCommand({
-          id: Q(),
+          id: J(),
           source: "user:toolbar",
           label: "断开连线",
           timestamp: Date.now(),
-          commands: v.map((u) => ({ type: "edge.remove", edgeId: u }))
+          commands: v.map((f) => ({ type: "edge.remove", edgeId: f }))
         }), n._emitUiEvent({ type: "node.action.disconnect", nodeId: r, edgeIds: v });
         break;
       }
@@ -2165,13 +2173,13 @@ function fo(n, e) {
     }
   }, n.createEdge(s);
 }
-const go = ".x6-widget-selection", ho = ".x6-graph-svg";
-function po(n) {
-  const e = n.querySelector(go), o = n.querySelector(ho);
+const go = ".x6-widget-selection", po = ".x6-graph-svg";
+function ho(n) {
+  const e = n.querySelector(go), o = n.querySelector(po);
   return !e || !o || e.parentNode !== o.parentNode || !o.parentNode || o.previousSibling === e ? !1 : (o.parentNode.insertBefore(e, o), !0);
 }
 function vo(n) {
-  const e = () => po(n);
+  const e = () => ho(n);
   e();
   const o = new MutationObserver(() => {
     e();
@@ -2199,11 +2207,11 @@ const yo = { class: "flow-canvas-node-actions__bar" }, wo = /* @__PURE__ */ fe({
   emits: ["action"],
   setup(n, { emit: e }) {
     const o = n, t = V(() => {
-      const h = o.actionsOffset?.x ?? 0, c = o.actionsOffset?.y ?? 0, w = h !== 0 || c !== 0;
+      const p = o.actionsOffset?.x ?? 0, u = o.actionsOffset?.y ?? 0, w = p !== 0 || u !== 0;
       return {
         left: `${o.position.x}px`,
         top: `${o.position.y}px`,
-        transform: w ? `translate(${h}px, ${c}px)` : "translateX(-100%)"
+        transform: w ? `translate(${p}px, ${u}px)` : "translateX(-100%)"
       };
     }), s = e, r = V(() => ({
       debug: {
@@ -2226,71 +2234,71 @@ const yo = { class: "flow-canvas-node-actions__bar" }, wo = /* @__PURE__ */ fe({
         visible: o.config.showDisconnect && o.behavior.disconnectable !== !1,
         disabled: o.behavior.disconnectDisabled === !0
       }
-    })), i = V(() => r.value.copy.visible || r.value.copyInsert.visible || r.value.disconnect.visible), l = z(!1);
+    })), i = V(() => r.value.copy.visible || r.value.copyInsert.visible || r.value.disconnect.visible), l = H(!1);
     let a = null;
     function v() {
       a && (clearTimeout(a), a = null), l.value = !0;
     }
-    function u() {
+    function f() {
       a = setTimeout(() => {
         l.value = !1, a = null;
       }, 100);
     }
     return Te(() => {
       a && clearTimeout(a);
-    }), (h, c) => (A(), P("div", {
+    }), (p, u) => (A(), T("div", {
       class: "flow-canvas-node-actions",
-      style: be(t.value)
+      style: Ee(t.value)
     }, [
       q("div", yo, [
-        r.value.debug.visible ? (A(), P("i", {
+        r.value.debug.visible ? (A(), T("i", {
           key: 0,
-          class: oe(["flow-canvas-icon canvas-debug flow-canvas-node-actions__icon", { "is-disabled": r.value.debug.disabled }]),
-          onClick: c[0] || (c[0] = (w) => !r.value.debug.disabled && s("action", "debug", n.node.id))
+          class: te(["flow-canvas-icon canvas-debug flow-canvas-node-actions__icon", { "is-disabled": r.value.debug.disabled }]),
+          onClick: u[0] || (u[0] = (w) => !r.value.debug.disabled && s("action", "debug", n.node.id))
         }, null, 2)) : Y("", !0),
-        r.value.delete.visible ? (A(), P("i", {
+        r.value.delete.visible ? (A(), T("i", {
           key: 1,
-          class: oe(["flow-canvas-icon canvas-shanchu flow-canvas-node-actions__icon", { "is-disabled": r.value.delete.disabled }]),
-          onClick: c[1] || (c[1] = (w) => !r.value.delete.disabled && s("action", "delete", n.node.id))
+          class: te(["flow-canvas-icon canvas-shanchu flow-canvas-node-actions__icon", { "is-disabled": r.value.delete.disabled }]),
+          onClick: u[1] || (u[1] = (w) => !r.value.delete.disabled && s("action", "delete", n.node.id))
         }, null, 2)) : Y("", !0),
-        i.value ? (A(), P("div", {
+        i.value ? (A(), T("div", {
           key: 2,
           class: "flow-canvas-node-actions__more-wrapper",
           onMouseenter: v,
-          onMouseleave: u
-        }, [...c[5] || (c[5] = [
+          onMouseleave: f
+        }, [...u[5] || (u[5] = [
           q("i", { class: "flow-canvas-icon canvas-gengduo flow-canvas-node-actions__icon" }, null, -1)
         ])], 32)) : Y("", !0)
       ]),
-      it(at, { name: "flow-canvas-fade" }, {
+      at(lt, { name: "flow-canvas-fade" }, {
         default: He(() => [
-          l.value && i.value ? (A(), P("div", {
+          l.value && i.value ? (A(), T("div", {
             key: 0,
             class: "flow-canvas-node-actions__dropdown",
             onMouseenter: v,
-            onMouseleave: u
+            onMouseleave: f
           }, [
-            r.value.copy.visible ? (A(), P("div", {
+            r.value.copy.visible ? (A(), T("div", {
               key: 0,
-              class: oe(["flow-canvas-node-actions__dropdown-item", { "is-disabled": r.value.copy.disabled }]),
-              onClick: c[2] || (c[2] = (w) => !r.value.copy.disabled && s("action", "copy", n.node.id))
-            }, [...c[6] || (c[6] = [
+              class: te(["flow-canvas-node-actions__dropdown-item", { "is-disabled": r.value.copy.disabled }]),
+              onClick: u[2] || (u[2] = (w) => !r.value.copy.disabled && s("action", "copy", n.node.id))
+            }, [...u[6] || (u[6] = [
               q("i", { class: "flow-canvas-icon canvas-copy-fuzhi-2" }, null, -1),
               q("span", null, "复制", -1)
             ])], 2)) : Y("", !0),
-            r.value.copyInsert.visible ? (A(), P("div", {
+            r.value.copyInsert.visible ? (A(), T("div", {
               key: 1,
-              class: oe(["flow-canvas-node-actions__dropdown-item", { "is-disabled": r.value.copyInsert.disabled }]),
-              onClick: c[3] || (c[3] = (w) => !r.value.copyInsert.disabled && s("action", "copy-insert", n.node.id))
-            }, [...c[7] || (c[7] = [
+              class: te(["flow-canvas-node-actions__dropdown-item", { "is-disabled": r.value.copyInsert.disabled }]),
+              onClick: u[3] || (u[3] = (w) => !r.value.copyInsert.disabled && s("action", "copy-insert", n.node.id))
+            }, [...u[7] || (u[7] = [
               q("i", { class: "flow-canvas-icon canvas-fuzhibingcharu" }, null, -1),
               q("span", null, "复制并插入", -1)
             ])], 2)) : Y("", !0),
-            r.value.disconnect.visible ? (A(), P("div", {
+            r.value.disconnect.visible ? (A(), T("div", {
               key: 2,
-              class: oe(["flow-canvas-node-actions__dropdown-item", { "is-disabled": r.value.disconnect.disabled }]),
-              onClick: c[4] || (c[4] = (w) => !r.value.disconnect.disabled && s("action", "disconnect", n.node.id))
-            }, [...c[8] || (c[8] = [
+              class: te(["flow-canvas-node-actions__dropdown-item", { "is-disabled": r.value.disconnect.disabled }]),
+              onClick: u[4] || (u[4] = (w) => !r.value.disconnect.disabled && s("action", "disconnect", n.node.id))
+            }, [...u[8] || (u[8] = [
               q("i", { class: "flow-canvas-icon canvas-unlock-jiebang" }, null, -1),
               q("span", null, "断开连线", -1)
             ])], 2)) : Y("", !0)
@@ -2312,94 +2320,107 @@ const yo = { class: "flow-canvas-node-actions__bar" }, wo = /* @__PURE__ */ fe({
   __name: "node-quick-add-popover",
   props: {
     node: {},
-    portPosition: {}
+    portPosition: {},
+    autoPanOnOpen: { type: Boolean },
+    autoPanPadding: {}
   },
-  emits: ["open", "close", "start-drag", "mouseenter", "mouseleave"],
+  emits: ["open", "close", "start-drag", "viewport-overflow-right", "mouseenter", "mouseleave"],
   setup(n, { expose: e, emit: o }) {
-    const t = n, s = o, r = z(), i = z(), l = z(!1), a = z(!1);
-    let v = null, u = !1, h = null;
-    function c(R) {
-      R.preventDefault(), R.stopPropagation(), v = { x: R.clientX, y: R.clientY }, u = !1, document.addEventListener("mousemove", w), document.addEventListener("mouseup", N);
+    const t = n, s = o, r = H(), i = H(), l = H(!1), a = H(!1);
+    let v = null, f = !1, p = null;
+    function u(G) {
+      G.preventDefault(), G.stopPropagation(), v = { x: G.clientX, y: G.clientY }, f = !1, document.addEventListener("mousemove", w), document.addEventListener("mouseup", D);
     }
-    function w(R) {
+    function w(G) {
       if (!v) return;
-      const B = R.clientX - v.x, f = R.clientY - v.y;
-      Math.sqrt(B * B + f * f) >= xo && (u = !0, O(), s("start-drag", t.node.id));
+      const d = G.clientX - v.x, y = G.clientY - v.y;
+      Math.sqrt(d * d + y * y) >= xo && (f = !0, O(), s("start-drag", t.node.id));
     }
-    function N() {
-      O(), u || b(), v = null, u = !1;
+    function D() {
+      O(), f || b(), v = null, f = !1;
     }
     function O() {
-      document.removeEventListener("mousemove", w), document.removeEventListener("mouseup", N);
+      document.removeEventListener("mousemove", w), document.removeEventListener("mouseup", D);
     }
     function b() {
-      a.value ? S() : M();
+      a.value ? B() : S();
     }
-    function M() {
-      a.value = !0, s("open", t.node.id), requestAnimationFrame(() => {
-        document.addEventListener("mousedown", H);
+    function S() {
+      a.value = !0, s("open", t.node.id), Ge(() => {
+        requestAnimationFrame(() => {
+          M();
+        });
+      }), requestAnimationFrame(() => {
+        document.addEventListener("mousedown", j);
       });
     }
-    function S() {
-      a.value = !1, s("close"), document.removeEventListener("mousedown", H);
+    function M() {
+      if (!a.value || !t.autoPanOnOpen || !i.value) return;
+      const G = window.innerWidth || document.documentElement.clientWidth || 0;
+      if (G <= 0) return;
+      const d = t.autoPanPadding ?? 16, c = i.value.getBoundingClientRect().right + d - G;
+      c > 0 && s("viewport-overflow-right", c);
     }
-    function H(R) {
-      const B = R.target;
-      r.value?.contains(B) || i.value?.contains(B) || S();
+    function B() {
+      a.value = !1, s("close"), document.removeEventListener("mousedown", j);
     }
-    function X() {
-      a.value || s("mouseleave");
+    function j(G) {
+      const d = G.target;
+      r.value?.contains(d) || i.value?.contains(d) || B();
     }
     function k() {
-      h && (clearTimeout(h), h = null), s("mouseenter");
+      a.value || s("mouseleave");
+    }
+    function X() {
+      p && (clearTimeout(p), p = null), s("mouseenter");
     }
-    function K() {
-      h = setTimeout(() => {
-        S(), s("mouseleave"), h = null;
+    function U() {
+      p = setTimeout(() => {
+        B(), s("mouseleave"), p = null;
       }, 150);
     }
     return Te(() => {
-      O(), h && clearTimeout(h), document.removeEventListener("mousedown", H);
-    }), e({ closePopover: S }), (R, B) => (A(), P("div", {
+      O(), p && clearTimeout(p), document.removeEventListener("mousedown", j);
+    }), e({ closePopover: B }), (G, d) => (A(), T("div", {
       class: "flow-canvas-quick-add",
-      style: be({ left: `${n.portPosition.x}px`, top: `${n.portPosition.y}px` }),
-      onMouseenter: B[2] || (B[2] = (f) => s("mouseenter")),
-      onMouseleave: X,
-      onClick: B[3] || (B[3] = pt(() => {
+      style: Ee({ left: `${n.portPosition.x}px`, top: `${n.portPosition.y}px` }),
+      onMouseenter: d[2] || (d[2] = (y) => s("mouseenter")),
+      onMouseleave: k,
+      onClick: d[3] || (d[3] = ht(() => {
       }, ["stop"]))
     }, [
       q("div", {
         ref_key: "btnRef",
         ref: r,
-        class: oe(["flow-canvas-quick-add__btn", { "is-hovered": l.value, "is-active": a.value }]),
-        onMouseenter: B[0] || (B[0] = (f) => l.value = !0),
-        onMouseleave: B[1] || (B[1] = (f) => l.value = !1),
-        onMousedown: c
-      }, [...B[4] || (B[4] = [
+        class: te(["flow-canvas-quick-add__btn", { "is-hovered": l.value, "is-active": a.value }]),
+        onMouseenter: d[0] || (d[0] = (y) => l.value = !0),
+        onMouseleave: d[1] || (d[1] = (y) => l.value = !1),
+        onMousedown: u
+      }, [...d[4] || (d[4] = [
         q("i", { class: "flow-canvas-icon canvas-zoom-add" }, null, -1)
       ])], 34),
-      l.value && !a.value ? (A(), P("div", Eo, [...B[5] || (B[5] = [
+      l.value && !a.value ? (A(), T("div", Eo, [...d[5] || (d[5] = [
         q("div", null, [
           q("b", null, "点击"),
-          Ue(" 添加节点")
+          je(" 添加节点")
         ], -1),
         q("div", null, [
           q("b", null, "拖拽"),
-          Ue(" 连接节点")
+          je(" 连接节点")
         ], -1)
       ])])) : Y("", !0),
-      it(at, { name: "flow-canvas-fade" }, {
+      at(lt, { name: "flow-canvas-fade" }, {
         default: He(() => [
-          a.value ? (A(), P("div", {
+          a.value ? (A(), T("div", {
             key: 0,
             ref_key: "popoverRef",
             ref: i,
             class: "flow-canvas-quick-add__popover",
-            onMouseenter: k,
-            onMouseleave: K
+            onMouseenter: X,
+            onMouseleave: U
           }, [
-            Me(R.$slots, "default", {}, () => [
-              B[6] || (B[6] = q("div", { class: "flow-canvas-quick-add__default-content" }, "节点快捷操作面板", -1))
+            Me(G.$slots, "default", {}, () => [
+              d[6] || (d[6] = q("div", { class: "flow-canvas-quick-add__default-content" }, "节点快捷操作面板", -1))
             ], !0)
           ], 544)) : Y("", !0)
         ]),
@@ -2407,7 +2428,7 @@ const yo = { class: "flow-canvas-node-actions__bar" }, wo = /* @__PURE__ */ fe({
       })
     ], 36));
   }
-}), Co = /* @__PURE__ */ ve(Io, [["__scopeId", "data-v-336cc3b4"]]), ko = { class: "flow-canvas-selection-actions__bar" }, So = /* @__PURE__ */ fe({
+}), Co = /* @__PURE__ */ ve(Io, [["__scopeId", "data-v-255b3d8c"]]), ko = { class: "flow-canvas-selection-actions__bar" }, So = /* @__PURE__ */ fe({
   __name: "selection-actions-toolbar",
   props: {
     position: {},
@@ -2420,13 +2441,13 @@ const yo = { class: "flow-canvas-node-actions__bar" }, wo = /* @__PURE__ */ fe({
       top: `${o.position.y}px`,
       transform: "translateX(-100%)"
     }));
-    return (r, i) => (A(), P("div", {
+    return (r, i) => (A(), T("div", {
       class: "flow-canvas-selection-actions",
-      style: be(s.value)
+      style: Ee(s.value)
     }, [
       q("div", ko, [
         q("i", {
-          class: oe(["flow-canvas-icon canvas-shanchu flow-canvas-selection-actions__icon", { "is-disabled": !n.canDelete }]),
+          class: te(["flow-canvas-icon canvas-shanchu flow-canvas-selection-actions__icon", { "is-disabled": !n.canDelete }]),
           onClick: i[0] || (i[0] = (l) => n.canDelete && t("action", "delete"))
         }, null, 2)
       ])
@@ -2445,10 +2466,10 @@ const yo = { class: "flow-canvas-node-actions__bar" }, wo = /* @__PURE__ */ fe({
   },
   emits: ["ui-event"],
   setup(n, { expose: e, emit: o }) {
-    const t = n, s = o, r = z(), i = z();
-    let l, a, v, u, h = null, c = null, w = null, N = null, O = null;
-    const b = oo(), { hoveredNodeId: M, isDraggingNode: S } = b, H = b.enterOverlay, X = () => b.leaveOverlay(), k = z(0), K = z({ nodeIds: [], edgeIds: [] });
-    function R(I) {
+    const t = n, s = o, r = H(), i = H();
+    let l, a, v, f, p = null, u = null, w = null, D = null, O = null;
+    const b = oo(), { hoveredNodeId: S, isDraggingNode: M } = b, B = b.enterOverlay, j = () => b.leaveOverlay(), k = H(0), X = H({ nodeIds: [], edgeIds: [] });
+    function U(I) {
       const C = t.editor.api.value;
       return C ? t.editor.schema.nodeTypes[I.type]?.getBehavior?.(I, {
         api: C,
@@ -2457,7 +2478,7 @@ const yo = { class: "flow-canvas-node-actions__bar" }, wo = /* @__PURE__ */ fe({
         mode: t.editor.mode.value
       }) ?? {} : {};
     }
-    const B = V(() => t.editor.mode.value === "edit" && t.editor.selectionMode.value), f = V(() => ({
+    const G = V(() => t.editor.mode.value === "edit" && t.editor.selectionMode.value), d = V(() => ({
       showDebug: !1,
       showDelete: !0,
       showCopy: !0,
@@ -2468,71 +2489,71 @@ const yo = { class: "flow-canvas-node-actions__bar" }, wo = /* @__PURE__ */ fe({
     })), y = V(
       () => {
         if (k.value, !t.editor.api.value) return [];
-        const I = t.editor.flowModel.value, C = t.editor.api.value.overlay, _ = [];
-        for (const [W, te] of Object.entries(I.nodes)) {
-          const ae = t.editor._pluginManager.collectNodeDecorations(te);
-          if (!ae?.badge) continue;
-          const ne = C.getNodeScreenRect(W);
-          ne && _.push({
+        const I = t.editor.flowModel.value, C = t.editor.api.value.overlay, P = [];
+        for (const [W, ee] of Object.entries(I.nodes)) {
+          const le = t.editor._pluginManager.collectNodeDecorations(ee);
+          if (!le?.badge) continue;
+          const oe = C.getNodeScreenRect(W);
+          oe && P.push({
             nodeId: W,
-            x: ne.x + ne.width - 4,
-            y: ne.y - 8,
-            badge: ae.badge
+            x: oe.x + oe.width - 4,
+            y: oe.y - 8,
+            badge: le.badge
           });
         }
-        return _;
+        return P;
       }
-    ), d = V(() => {
+    ), c = V(() => {
       k.value;
-      const I = M.value;
-      if (!I || S.value || !t.editor.api.value || t.editor.mode.value !== "edit" || B.value)
+      const I = S.value;
+      if (!I || M.value || !t.editor.api.value || t.editor.mode.value !== "edit" || G.value)
         return null;
-      const _ = t.editor.flowModel.value.nodes[I];
-      if (!_) return null;
+      const P = t.editor.flowModel.value.nodes[I];
+      if (!P) return null;
       const W = t.editor.api.value.overlay.getNodeScreenRect(I);
       if (!W) return null;
-      const te = R(_);
-      return te.showActions === !1 ? null : {
-        node: _,
+      const ee = U(P);
+      return ee.showActions === !1 ? null : {
+        node: P,
         position: { x: W.x + W.width, y: W.y + W.height + 4 },
-        behavior: te
+        behavior: ee
       };
     }), g = V(() => {
       if (k.value, !t.editor.api.value || t.editor.mode.value !== "edit") return null;
-      const I = K.value;
+      const I = X.value;
       if (I.nodeIds.length + I.edgeIds.length === 0) return null;
       const C = t.editor.api.value.getSelectionBounds(I);
       if (!C) return null;
-      const _ = gt(I, t.editor.flowModel.value, R);
+      const P = gt(I, t.editor.flowModel.value, U);
       return {
         position: { x: C.x + C.width, y: C.y + C.height + 4 },
-        canDelete: _.nodeIds.length > 0 || _.edgeIds.length > 0
+        canDelete: P.nodeIds.length > 0 || P.edgeIds.length > 0
       };
-    }), p = z(), m = ro({
+    }), h = H(), m = ro({
       editor: t.editor,
       quickAddProp: V(() => t.quickAdd),
-      isDraggingNode: S,
+      isDraggingNode: M,
       nodeHover: b,
-      isSelectionModeActive: B,
+      isSelectionModeActive: G,
       viewportVersion: k,
-      getNodeBehavior: R,
-      getInsertGap: () => f.value.insertGap,
-      closePopover: () => p.value?.closePopover()
-    }), E = m.data, $ = m.handleOpen, U = m.handleStartDrag;
-    function D() {
+      getNodeBehavior: U,
+      getInsertGap: () => d.value.insertGap,
+      closePopover: () => h.value?.closePopover()
+    }), E = m.data, L = m.handleOpen, z = m.handleStartDrag;
+    function ie() {
       m.handleClose(), b.leaveOverlay(200), m.leave();
     }
-    const L = m.handleOverlayEnter, x = m.handleOverlayLeave, T = m.handleInsert, G = lo({
+    const N = m.handleOverlayEnter, _ = m.handleOverlayLeave, x = m.handleInsert, R = lo({
       editor: t.editor,
       edgeDropProp: V(() => t.edgeDrop)
-    }), j = co(t.editor);
-    function ee(I, C) {
-      j.handleNodeAction(I, C, f.value.insertGap) && (M.value = null);
+    }), F = co(t.editor);
+    function Z(I, C) {
+      F.handleNodeAction(I, C, d.value.insertGap) && (S.value = null);
     }
-    function ie(I) {
-      I === "delete" && j.deleteSelection(K.value);
+    function ae(I) {
+      I === "delete" && F.deleteSelection(X.value);
     }
-    function Z(I) {
+    function Q(I) {
       if (t.editor.mode.value !== "edit") return;
       if ((I.metaKey || I.ctrlKey) && (I.key === "z" || I.key === "Z")) {
         if (I.shiftKey) {
@@ -2547,84 +2568,84 @@ const yo = { class: "flow-canvas-node-actions__bar" }, wo = /* @__PURE__ */ fe({
       }
       t.editor._pluginManager.dispatchKeyboardShortcut(I) && (I.preventDefault(), I.stopPropagation());
     }
-    function J(I, C) {
-      const _ = l, W = (te) => {
-        const ae = _.isRubberbandEnabled?.() ?? !1;
-        ae && _.disableRubberband?.(), te ? l.enablePanning() : l.disablePanning(), ae && _.enableRubberband?.();
+    function K(I, C) {
+      const P = l, W = (ee) => {
+        const le = P.isRubberbandEnabled?.() ?? !1;
+        le && P.disableRubberband?.(), ee ? l.enablePanning() : l.disablePanning(), le && P.enableRubberband?.();
       };
-      I && C ? (_.enableSelection?.(), b.reset(), m.quickAddNodeId.value = null, m.quickAddPopoverOpen.value = !1, h?.remove(), W(!1), _.enableRubberband?.()) : (_.disableRubberband?.(), W(!0), _.disableSelection?.(), _.cleanSelection?.());
+      I && C ? (P.enableSelection?.(), b.reset(), m.quickAddNodeId.value = null, m.quickAddPopoverOpen.value = !1, p?.remove(), W(!1), P.enableRubberband?.()) : (P.disableRubberband?.(), W(!0), P.disableSelection?.(), P.cleanSelection?.());
     }
-    function Ee(I) {
+    function me(I) {
       l.on("node:move", ({ node: C }) => {
-        S.value = !0;
-        const _ = t.editor.flowModel.value.nodes[C.id];
-        _ && R(_).bringToFrontOnDrag === !1 || C.toFront?.();
+        M.value = !0;
+        const P = t.editor.flowModel.value.nodes[C.id];
+        P && U(P).bringToFrontOnDrag === !1 || C.toFront?.();
       }), l.on("node:moved", () => {
-        S.value = !1;
+        M.value = !1;
       }), l.on("node:mouseenter", ({ node: C }) => {
-        if (B.value) {
-          M.value = null, m.quickAddNodeId.value = null, I.hideNodePorts(C);
+        if (G.value) {
+          S.value = null, m.quickAddNodeId.value = null, I.hideNodePorts(C);
           return;
         }
         b.enter(C.id);
-        const _ = t.editor.flowModel.value.nodes[C.id];
-        if (_ && R(_).showPorts === !1) {
+        const P = t.editor.flowModel.value.nodes[C.id];
+        if (P && U(P).showPorts === !1) {
           m.mergedConfig.value.enabled && m.enter(C.id);
           return;
         }
         m.mergedConfig.value.enabled && m.enter(C.id) || I.showNodePorts(C);
       }), l.on("node:mouseleave", ({ node: C }) => {
-        if (B.value) {
+        if (G.value) {
           I.hideNodePorts(C);
           return;
         }
-        const _ = t.editor.flowModel.value.nodes[C.id];
+        const P = t.editor.flowModel.value.nodes[C.id];
         let W = 100;
-        _ && R(_).actionsOffset && (W = 300), b.leave(W), m.mergedConfig.value.enabled ? m.quickAddNodeId.value === C.id && !m.quickAddPopoverOpen.value ? m.leave() : m.quickAddNodeId.value !== C.id && I.hideNodePorts(C) : I.hideNodePorts(C);
+        P && U(P).actionsOffset && (W = 300), b.leave(W), m.mergedConfig.value.enabled ? m.quickAddNodeId.value === C.id && !m.quickAddPopoverOpen.value ? m.leave() : m.quickAddNodeId.value !== C.id && I.hideNodePorts(C) : I.hideNodePorts(C);
       });
     }
-    function he(I) {
+    function pe(I) {
       l.on("edge:added", ({ edge: C }) => {
-        let _;
+        let P;
         if (t.getConnectionExcludedNodeIds && !C.getTargetCell()) {
           const W = C.getSourceCell();
           if (W) {
-            const te = t.getConnectionExcludedNodeIds(W.id);
-            _ = te instanceof Set ? te : new Set(te);
+            const ee = t.getConnectionExcludedNodeIds(W.id);
+            P = ee instanceof Set ? ee : new Set(ee);
           }
         }
-        I.handleEdgeAdded(C, _);
+        I.handleEdgeAdded(C, P);
       }), l.on("edge:connected", () => {
         I.handleEdgeConnected();
       }), l.on("edge:removed", ({ edge: C }) => {
-        I.handleEdgeRemoved(C.id), h.handleEdgeRemoved(C.id);
-      }), l.on("edge:mouseenter", ({ edge: C, e: _ }) => {
+        I.handleEdgeRemoved(C.id), p.handleEdgeRemoved(C.id);
+      }), l.on("edge:mouseenter", ({ edge: C, e: P }) => {
         const W = a.getHoveredEdgeId();
-        a.setHoveredEdge(C.id), W && W !== C.id && a.refreshSingleEdgeStyle(W), a.refreshSingleEdgeStyle(C.id), t.editor.mode.value === "edit" && !B.value && I.canShowEdgeTool() && h.show(C.id, _);
+        a.setHoveredEdge(C.id), W && W !== C.id && a.refreshSingleEdgeStyle(W), a.refreshSingleEdgeStyle(C.id), t.editor.mode.value === "edit" && !G.value && I.canShowEdgeTool() && p.show(C.id, P);
       }), l.on("edge:mouseleave", ({ edge: C }) => {
-        a.setHoveredEdge(null), a.refreshSingleEdgeStyle(C.id), h.remove();
-      }), l.on("edge:click", ({ edge: C, e: _ }) => {
-        _.target?.closest?.(".flow-canvas-edge-delete-tool") && t.editor.mode.value === "edit" && (h.remove(), t.editor.executeCommand({
-          id: Q(),
+        a.setHoveredEdge(null), a.refreshSingleEdgeStyle(C.id), p.remove();
+      }), l.on("edge:click", ({ edge: C, e: P }) => {
+        P.target?.closest?.(".flow-canvas-edge-delete-tool") && t.editor.mode.value === "edit" && (p.remove(), t.editor.executeCommand({
+          id: J(),
           source: "user:toolbar",
           label: "删除连线",
           timestamp: Date.now(),
           commands: [{ type: "edge.remove", edgeId: C.id }]
         }));
-      }), c = (C) => h.move(C), l.container.addEventListener("mousemove", c);
+      }), u = (C) => p.move(C), l.container.addEventListener("mousemove", u);
     }
-    function ye() {
+    function we() {
       w = (I) => {
-        if (!M.value && !m.quickAddNodeId.value) return;
+        if (!S.value && !m.quickAddNodeId.value) return;
         const C = I.target;
         if (C?.closest?.(".x6-node") || C?.closest?.(".flow-canvas-node-actions") || C?.closest?.(".flow-canvas-quick-add")) {
           b.cancelLeave(), m.cancelLeave();
           return;
         }
         b.leave(180), m.quickAddPopoverOpen.value || m.leave();
-      }, r.value?.addEventListener("mousemove", w), N = () => {
+      }, r.value?.addEventListener("mousemove", w), D = () => {
         b.reset(), m.quickAddPopoverOpen.value || (m.quickAddNodeId.value = null);
-      }, r.value?.addEventListener("mouseleave", N), r.value?.addEventListener("keydown", Z);
+      }, r.value?.addEventListener("mouseleave", D), r.value?.addEventListener("keydown", Q);
     }
     function $e() {
       ge(
@@ -2633,21 +2654,21 @@ const yo = { class: "flow-canvas-node-actions__bar" }, wo = /* @__PURE__ */ fe({
       ), ge(
         [() => t.editor.mode.value, () => t.editor.selectionMode.value],
         ([I, C]) => {
-          J(I === "edit", C);
+          K(I === "edit", C);
         },
         { immediate: !0 }
       );
     }
-    lt(() => {
+    dt(() => {
       if (!i.value) return;
       const I = /* @__PURE__ */ new Set(["model", "container"]), C = {};
       if (t.graphOptions)
-        for (const [F, se] of Object.entries(t.graphOptions)) {
-          if (I.has(F)) {
-            console.warn(`[flow-canvas] graphOptions.${F} is managed by the engine and will be ignored`);
+        for (const [$, ne] of Object.entries(t.graphOptions)) {
+          if (I.has($)) {
+            console.warn(`[flow-canvas] graphOptions.${$} is managed by the engine and will be ignored`);
             continue;
           }
-          C[F] = se;
+          C[$] = ne;
         }
       l = new Et({
         container: i.value,
@@ -2668,8 +2689,8 @@ const yo = { class: "flow-canvas-node-actions__bar" }, wo = /* @__PURE__ */ fe({
         panning: { enabled: !0 },
         mousewheel: { enabled: !0, modifiers: ["ctrl", "meta"] },
         interacting: {
-          nodeMovable(F) {
-            return F.cell.getProp("draggable") !== !1;
+          nodeMovable($) {
+            return $.cell.getProp("draggable") !== !1;
           }
         },
         connecting: {
@@ -2691,8 +2712,8 @@ const yo = { class: "flow-canvas-node-actions__bar" }, wo = /* @__PURE__ */ fe({
         l,
         t.editor.schema,
         v,
-        (F) => t.editor._pluginManager.collectNodeDecorations(F),
-        (F) => t.editor._pluginManager.collectEdgeDecorations(F),
+        ($) => t.editor._pluginManager.collectNodeDecorations($),
+        ($) => t.editor._pluginManager.collectEdgeDecorations($),
         () => t.editor.api.value ? {
           api: t.editor.api.value,
           flowModel: t.editor.flowModel.value,
@@ -2700,35 +2721,35 @@ const yo = { class: "flow-canvas-node-actions__bar" }, wo = /* @__PURE__ */ fe({
           mode: t.editor.mode.value
         } : null
       );
-      const _ = Kt(l), W = to({
+      const P = Kt(l), W = to({
         graph: l,
-        overlayManager: _,
-        executeCommand: (F) => t.editor.executeCommand(G.tryExpandForEdgeDrop(F)),
+        overlayManager: P,
+        executeCommand: ($) => t.editor.executeCommand(R.tryExpandForEdgeDrop($)),
         schema: t.editor.schema,
         flowModel: t.editor.flowModel,
-        getNodeBehavior: R,
+        getNodeBehavior: U,
         idGenerator: t.editor.idGenerator,
         defaultInsertGap: t.nodeActions?.insertGap,
-        getContextMenuItems: (F) => t.editor._pluginManager.collectContextMenuItems(F),
-        onHighlightChange: (F, se) => {
-          a.setHighlightedNodes(F);
-          const pe = a.setHighlightedEdges(se);
+        getContextMenuItems: ($) => t.editor._pluginManager.collectContextMenuItems($),
+        onHighlightChange: ($, ne) => {
+          a.setHighlightedNodes($);
+          const he = a.setHighlightedEdges(ne);
           a.refreshNodeHighlights();
-          const re = new Set(se);
-          for (const me of pe)
-            re.has(me) || a.refreshSingleEdgeStyle(me);
-          for (const me of re)
-            pe.has(me) || a.refreshSingleEdgeStyle(me);
+          const se = new Set(ne);
+          for (const ye of he)
+            se.has(ye) || a.refreshSingleEdgeStyle(ye);
+          for (const ye of se)
+            he.has(ye) || a.refreshSingleEdgeStyle(ye);
         },
-        resolveNodeShape: (F) => {
-          const se = t.editor.schema.nodeTypes[F];
-          if (!se) return null;
-          const pe = v.registerNodeType(F, se.component), re = se.getSize({ id: "", type: F, position: { x: 0, y: 0 } });
-          return { shapeName: pe, width: re.width, height: re.height };
+        resolveNodeShape: ($) => {
+          const ne = t.editor.schema.nodeTypes[$];
+          if (!ne) return null;
+          const he = v.registerNodeType($, ne.component), se = ne.getSize({ id: "", type: $, position: { x: 0, y: 0 } });
+          return { shapeName: he, width: se.width, height: se.height };
         }
       });
       t.editor.api.value = W;
-      const te = {
+      const ee = {
         flowModel: t.editor.flowModel,
         history: t.editor.history,
         schema: t.editor.schema,
@@ -2737,66 +2758,66 @@ const yo = { class: "flow-canvas-node-actions__bar" }, wo = /* @__PURE__ */ fe({
         executeCommand: t.editor.executeCommand,
         selectionMode: t.editor.selectionMode,
         api: W,
-        overlay: _,
+        overlay: P,
         graph: l
       };
-      t.editor._pluginManager.attachRuntime(te);
-      const ae = t.editor._pluginManager.collectExtendedApi();
-      Object.assign(t.editor.extendedApi, ae), t.editor._emitUiEvent = (F) => {
-        t.editor._pluginManager.dispatchUiEvent(F), s("ui-event", F);
-      }, u = new Xt(
+      t.editor._pluginManager.attachRuntime(ee);
+      const le = t.editor._pluginManager.collectExtendedApi();
+      Object.assign(t.editor.extendedApi, le), t.editor._emitUiEvent = ($) => {
+        t.editor._pluginManager.dispatchUiEvent($), s("ui-event", $);
+      }, f = new Xt(
         l,
-        (F) => {
-          (F.type === "node.click" || F.type === "node.dblclick" || F.type === "node.contextmenu") && b.enter(F.nodeId), t.editor._emitUiEvent(F);
+        ($) => {
+          ($.type === "node.click" || $.type === "node.dblclick" || $.type === "node.contextmenu") && b.enter($.nodeId), t.editor._emitUiEvent($);
         },
-        (F) => {
+        ($) => {
           if (a.isSyncing) return;
-          const se = G.tryExpandForEdgeDrop(F);
-          if (t.editor.executeCommand(se).status !== "applied") {
-            for (const re of se.commands)
-              if (re.type === "edge.add") {
-                const me = l.getCellById(re.edge.id);
-                me && l.removeCell(me);
+          const ne = R.tryExpandForEdgeDrop($);
+          if (t.editor.executeCommand(ne).status !== "applied") {
+            for (const se of ne.commands)
+              if (se.type === "edge.add") {
+                const ye = l.getCellById(se.edge.id);
+                ye && l.removeCell(ye);
               }
           }
         },
         t.editor.flowModel,
         t.editor.idGenerator
-      ), h = no(l);
-      const ne = so(l);
-      m.attachRuntime(l, (F) => ne.hideNodePorts(F)), G.attachRuntime(l), Ee(ne), he(ne), O = vo(l.container);
-      let xe = /* @__PURE__ */ new Set(), we = /* @__PURE__ */ new Set();
+      ), p = no(l);
+      const oe = so(l);
+      m.attachRuntime(l, ($) => oe.hideNodePorts($)), R.attachRuntime(l), me(oe), pe(oe), O = vo(l.container);
+      let xe = /* @__PURE__ */ new Set(), be = /* @__PURE__ */ new Set();
       l.on("selection:changed", () => {
-        const F = ft(l.getSelectedCells?.() ?? []), se = new Set(F.nodeIds);
-        mo(l, xe, se), xe = se, K.value = F, t.editor._pluginManager.dispatchSelectionChange(F), s("ui-event", {
+        const $ = ft(l.getSelectedCells?.() ?? []), ne = new Set($.nodeIds);
+        mo(l, xe, ne), xe = ne, X.value = $, t.editor._pluginManager.dispatchSelectionChange($), s("ui-event", {
           type: "selection.change",
-          nodeIds: F.nodeIds,
-          edgeIds: F.edgeIds
+          nodeIds: $.nodeIds,
+          edgeIds: $.edgeIds
         }), a.refreshNodeHighlights();
-        const pe = new Set(F.edgeIds);
-        for (const re of we)
-          pe.has(re) || a.refreshSingleEdgeStyle(re);
-        for (const re of pe)
-          we.has(re) || a.refreshSingleEdgeStyle(re);
-        we = pe;
+        const he = new Set($.edgeIds);
+        for (const se of be)
+          he.has(se) || a.refreshSingleEdgeStyle(se);
+        for (const se of he)
+          be.has(se) || a.refreshSingleEdgeStyle(se);
+        be = he;
       });
       const Be = () => {
         k.value++;
       };
-      l.on("translate", Be), l.on("scale", Be), l.on("resize", Be), ye(), a.syncFlowModel(t.editor.flowModel.value), $e();
+      l.on("translate", Be), l.on("scale", Be), l.on("resize", Be), we(), a.syncFlowModel(t.editor.flowModel.value), $e();
     });
     function Se() {
       b.reset(), m.quickAddNodeId.value = null, m.quickAddPopoverOpen.value = !1;
     }
     return e({ resetHoverState: Se }), Te(() => {
-      b.cleanup(), m.cleanup(), G.cleanup(), h?.remove(), c && l?.container?.removeEventListener("mousemove", c), w && r.value?.removeEventListener("mousemove", w), N && r.value?.removeEventListener("mouseleave", N), O?.(), r.value?.removeEventListener("keydown", Z), t.editor._pluginManager.detachRuntime(), t.editor.api.value = null;
+      b.cleanup(), m.cleanup(), R.cleanup(), p?.remove(), u && l?.container?.removeEventListener("mousemove", u), w && r.value?.removeEventListener("mousemove", w), D && r.value?.removeEventListener("mouseleave", D), O?.(), r.value?.removeEventListener("keydown", Q), t.editor._pluginManager.detachRuntime(), t.editor.api.value = null;
       for (const I of Object.keys(t.editor.extendedApi))
         delete t.editor.extendedApi[I];
-      u?.dispose(), a?.dispose(), v?.dispose(), l?.dispose();
-    }), (I, C) => (A(), P("div", {
+      f?.dispose(), a?.dispose(), v?.dispose(), l?.dispose();
+    }), (I, C) => (A(), T("div", {
       ref_key: "rootRef",
       ref: r,
-      class: oe(["flow-canvas-runtime-core", { "flow-canvas-runtime-core--selection-mode": B.value }]),
+      class: te(["flow-canvas-runtime-core", { "flow-canvas-runtime-core--selection-mode": G.value }]),
       tabindex: "0"
     }, [
       q("div", {
@@ -2805,61 +2826,64 @@ const yo = { class: "flow-canvas-node-actions__bar" }, wo = /* @__PURE__ */ fe({
         class: "flow-canvas-runtime-core__graph"
       }, null, 512),
       q("div", No, [
-        (A(!0), P(de, null, Ce(y.value, (_) => (A(), P("div", {
-          key: `badge-${_.nodeId}`,
+        (A(!0), T(de, null, Ce(y.value, (P) => (A(), T("div", {
+          key: `badge-${P.nodeId}`,
           class: "flow-canvas-runtime-core__badge",
-          style: be({ left: `${_.x}px`, top: `${_.y}px`, backgroundColor: _.badge.color })
-        }, ce(_.badge.text), 5))), 128)),
-        le(E) ? (A(), Ie(Co, {
+          style: Ee({ left: `${P.x}px`, top: `${P.y}px`, backgroundColor: P.badge.color })
+        }, ce(P.badge.text), 5))), 128)),
+        re(E) ? (A(), Ie(Co, {
           key: 0,
           ref_key: "quickAddPopoverRef",
-          ref: p,
-          node: le(E).node,
-          "port-position": le(E).portPosition,
-          onOpen: le($),
-          onClose: D,
-          onStartDrag: le(U),
-          onMouseenter: le(L),
-          onMouseleave: le(x)
+          ref: h,
+          node: re(E).node,
+          "port-position": re(E).portPosition,
+          "auto-pan-on-open": re(m).mergedConfig.value.autoPanOnOpen,
+          "auto-pan-padding": re(m).mergedConfig.value.autoPanPadding,
+          onOpen: re(L),
+          onClose: ie,
+          onStartDrag: re(z),
+          onViewportOverflowRight: re(m).handlePopoverViewportOverflow,
+          onMouseenter: re(N),
+          onMouseleave: re(_)
         }, {
           default: He(() => [
             Me(I.$slots, "quick-add-panel", {
-              node: le(E).node,
+              node: re(E).node,
               api: n.editor.api.value,
-              insertNodeToRight: (_) => le(T)(le(E).node.id, _),
-              closePopover: () => p.value?.closePopover()
+              insertNodeToRight: (P) => re(x)(re(E).node.id, P),
+              closePopover: () => h.value?.closePopover()
             }, void 0, !0)
           ]),
           _: 3
-        }, 8, ["node", "port-position", "onOpen", "onStartDrag", "onMouseenter", "onMouseleave"])) : Y("", !0),
-        d.value ? (A(), Ie(bo, {
+        }, 8, ["node", "port-position", "auto-pan-on-open", "auto-pan-padding", "onOpen", "onStartDrag", "onViewportOverflowRight", "onMouseenter", "onMouseleave"])) : Y("", !0),
+        c.value ? (A(), Ie(bo, {
           key: 1,
-          node: d.value.node,
-          position: d.value.position,
-          config: f.value,
-          behavior: d.value.behavior,
-          "actions-offset": d.value.behavior.actionsOffset,
-          onAction: ee,
-          onMouseenter: le(H),
-          onMouseleave: X
+          node: c.value.node,
+          position: c.value.position,
+          config: d.value,
+          behavior: c.value.behavior,
+          "actions-offset": c.value.behavior.actionsOffset,
+          onAction: Z,
+          onMouseenter: re(B),
+          onMouseleave: j
         }, null, 8, ["node", "position", "config", "behavior", "actions-offset", "onMouseenter"])) : Y("", !0),
         g.value ? (A(), Ie(Mo, {
           key: 2,
           position: g.value.position,
           "can-delete": g.value.canDelete,
-          onAction: ie
+          onAction: ae
         }, null, 8, ["position", "can-delete"])) : Y("", !0)
       ])
     ], 2));
   }
-}), Dn = /* @__PURE__ */ ve(Do, [["__scopeId", "data-v-a9bbf5f1"]]), Ao = { class: "flow-canvas-node-palette" }, _o = ["data-node-type"], Po = { class: "flow-canvas-node-palette__item-label" }, To = /* @__PURE__ */ fe({
+}), Dn = /* @__PURE__ */ ve(Do, [["__scopeId", "data-v-84584822"]]), Ao = { class: "flow-canvas-node-palette" }, _o = ["data-node-type"], Po = { class: "flow-canvas-node-palette__item-label" }, To = /* @__PURE__ */ fe({
   __name: "canvas-node-palette",
   props: {
     editor: {},
     items: {}
   },
   setup(n) {
-    const e = n, o = z(), t = V(() => e.items ? e.items : Object.keys(e.editor.schema.nodeTypes).map((s) => ({
+    const e = n, o = H(), t = V(() => e.items ? e.items : Object.keys(e.editor.schema.nodeTypes).map((s) => ({
       type: s,
       label: s.charAt(0).toUpperCase() + s.slice(1)
     })));
@@ -2868,43 +2892,43 @@ const yo = { class: "flow-canvas-node-actions__bar" }, wo = /* @__PURE__ */ fe({
       ([s, r, i], l, a) => {
         if (!s || !i) return;
         const v = [];
-        for (const u of r) {
-          const h = i.querySelector(`[data-node-type="${u.type}"]`);
-          if (!h) continue;
-          const c = s.registerDndSource(h, () => ({
-            id: Q(),
-            type: u.type,
-            label: u.label,
+        for (const f of r) {
+          const p = i.querySelector(`[data-node-type="${f.type}"]`);
+          if (!p) continue;
+          const u = s.registerDndSource(p, () => ({
+            id: J(),
+            type: f.type,
+            label: f.label,
             position: { x: 0, y: 0 }
           }));
-          v.push(c);
+          v.push(u);
         }
         a(() => {
-          for (const u of v) u();
+          for (const f of v) f();
         });
       },
       { flush: "post" }
-    ), (s, r) => (A(), P("div", Ao, [
+    ), (s, r) => (A(), T("div", Ao, [
       q("div", {
         ref_key: "listRef",
         ref: o,
         class: "flow-canvas-node-palette__list"
       }, [
-        (A(!0), P(de, null, Ce(t.value, (i) => (A(), P("div", {
+        (A(!0), T(de, null, Ce(t.value, (i) => (A(), T("div", {
           key: i.type,
           class: "flow-canvas-node-palette__item",
           "data-node-type": i.type
         }, [
-          i.icon ? (A(), P("i", {
+          i.icon ? (A(), T("i", {
             key: 0,
-            class: oe([i.icon, "flow-canvas-node-palette__item-icon"])
+            class: te([i.icon, "flow-canvas-node-palette__item-icon"])
           }, null, 2)) : Y("", !0),
           q("span", Po, ce(i.label), 1)
         ], 8, _o))), 128))
       ], 512)
     ]));
   }
-}), Lo = /* @__PURE__ */ ve(To, [["__scopeId", "data-v-300314b7"]]), Ro = { class: "flow-canvas-layout" }, Oo = { class: "flow-canvas-layout__main" }, $o = { class: "flow-canvas-layout__content" }, Bo = {
+}), Ro = /* @__PURE__ */ ve(To, [["__scopeId", "data-v-300314b7"]]), Lo = { class: "flow-canvas-layout" }, Oo = { class: "flow-canvas-layout__main" }, $o = { class: "flow-canvas-layout__content" }, Bo = {
   key: 0,
   class: "flow-canvas-layout__footer"
 }, Fo = /* @__PURE__ */ fe({
@@ -2919,14 +2943,14 @@ const yo = { class: "flow-canvas-node-actions__bar" }, wo = /* @__PURE__ */ fe({
   },
   emits: ["update:sidebarCollapsed"],
   setup(n) {
-    return (e, o) => (A(), P("div", Ro, [
-      !n.hideSidebar && (e.$slots.sidebar || n.editor) ? (A(), P("aside", {
+    return (e, o) => (A(), T("div", Lo, [
+      !n.hideSidebar && (e.$slots.sidebar || n.editor) ? (A(), T("aside", {
         key: 0,
-        class: oe(["flow-canvas-layout__sidebar", { "is-collapsed": n.sidebarCollapsed }]),
-        style: be({ width: n.sidebarCollapsed ? "0px" : `${n.sidebarWidth}px` })
+        class: te(["flow-canvas-layout__sidebar", { "is-collapsed": n.sidebarCollapsed }]),
+        style: Ee({ width: n.sidebarCollapsed ? "0px" : `${n.sidebarWidth}px` })
       }, [
         Me(e.$slots, "sidebar", {}, () => [
-          n.editor ? (A(), Ie(Lo, {
+          n.editor ? (A(), Ie(Ro, {
             key: 0,
             editor: n.editor,
             items: n.paletteItems
@@ -2937,13 +2961,13 @@ const yo = { class: "flow-canvas-node-actions__bar" }, wo = /* @__PURE__ */ fe({
         q("div", $o, [
           Me(e.$slots, "default", {}, void 0, !0)
         ]),
-        !n.hideFooter && e.$slots.footer ? (A(), P("div", Bo, [
+        !n.hideFooter && e.$slots.footer ? (A(), T("div", Bo, [
           Me(e.$slots, "footer", {}, void 0, !0)
         ])) : Y("", !0)
       ])
     ]));
   }
-}), An = /* @__PURE__ */ ve(Fo, [["__scopeId", "data-v-26f35b6b"]]), Je = typeof navigator < "u" && /Mac|iPod|iPhone|iPad/.test(navigator.platform ?? navigator.userAgent), qo = ["undo", "redo"];
+}), An = /* @__PURE__ */ ve(Fo, [["__scopeId", "data-v-26f35b6b"]]), et = typeof navigator < "u" && /Mac|iPod|iPhone|iPad/.test(navigator.platform ?? navigator.userAgent), qo = ["undo", "redo"];
 function Ho(n) {
   const e = new Set(n?.include), o = new Set(qo.filter((a) => !e.has(a))), t = [
     {
@@ -2952,7 +2976,7 @@ function Ho(n) {
       group: "history",
       icon: "flow-canvas-icon canvas-undo",
       description: "撤销",
-      shortcut: Je ? ["⌘", "Z"] : ["Ctrl", "Z"],
+      shortcut: et ? ["⌘", "Z"] : ["Ctrl", "Z"],
       order: 10
     },
     {
@@ -2961,7 +2985,7 @@ function Ho(n) {
       group: "history",
       icon: "flow-canvas-icon canvas-redo",
       description: "重做",
-      shortcut: Je ? ["⇧", "⌘", "Z"] : ["Ctrl", "Shift", "Z"],
+      shortcut: et ? ["⇧", "⌘", "Z"] : ["Ctrl", "Shift", "Z"],
       order: 11
     }
   ], s = [
@@ -3048,47 +3072,47 @@ const Go = { class: "flow-canvas-toolbar" }, zo = {
       "minimap",
       "export"
     ]), o = /* @__PURE__ */ new Set(["select", "search", "minimap"]);
-    function t(d) {
-      return d.id.startsWith("plugin:") || d.type === "custom";
+    function t(c) {
+      return c.id.startsWith("plugin:") || c.type === "custom";
     }
-    function s(d) {
-      return d !== "custom" && o.has(d);
+    function s(c) {
+      return c !== "custom" && o.has(c);
     }
     const r = n, i = V(() => {
       if (r.items) return r.items;
-      const d = Ho({ include: r.include }), g = r.editor.toolbarItems.value, p = new Set(r.exclude ?? []), m = /* @__PURE__ */ new Map();
-      for (const E of d)
+      const c = Ho({ include: r.include }), g = r.editor.toolbarItems.value, h = new Set(r.exclude ?? []), m = /* @__PURE__ */ new Map();
+      for (const E of c)
         m.set(E.id, E);
       for (const E of g) {
-        const $ = m.get(E.id);
-        $ ? m.set(E.id, { ...$, ...E, order: $.order, group: $.group }) : t(E) && m.set(E.id, E);
+        const L = m.get(E.id);
+        L ? m.set(E.id, { ...L, ...E, order: L.order, group: L.group }) : t(E) && m.set(E.id, E);
       }
-      return [...m.values()].filter((E) => E.type === "custom" || !e.has(E.type) ? !0 : !p.has(E.type)).sort((E, $) => (E.order ?? 0) - ($.order ?? 0));
-    }), l = z(1), a = z(null), v = z(null), u = z(!1);
-    let h = null;
+      return [...m.values()].filter((E) => E.type === "custom" || !e.has(E.type) ? !0 : !h.has(E.type)).sort((E, L) => (E.order ?? 0) - (L.order ?? 0));
+    }), l = H(1), a = H(null), v = H(null), f = H(!1);
+    let p = null;
     ge(
       () => r.editor.api.value,
-      (d) => {
-        h?.(), h = null, d && (l.value = d.getZoom(), h = d.onGraphEvent("scale", () => {
-          l.value = d.getZoom();
+      (c) => {
+        p?.(), p = null, c && (l.value = c.getZoom(), p = c.onGraphEvent("scale", () => {
+          l.value = c.getZoom();
         }));
       },
       { immediate: !0 }
     );
-    const c = vt({ visible: !1, text: "", shortcut: [], x: 0, y: 0 });
-    function w(d, g) {
+    const u = vt({ visible: !1, text: "", shortcut: [], x: 0, y: 0 });
+    function w(c, g) {
       if (!g.description) return;
-      const m = d.currentTarget.getBoundingClientRect();
-      c.text = g.description, c.shortcut = g.shortcut ?? [], c.visible = !0, dt(() => {
-        const E = a.value?.offsetWidth ?? 0, $ = a.value?.offsetHeight ?? 0;
-        c.x = m.left + m.width / 2 - E / 2, c.y = m.top - $ - 6;
+      const m = c.currentTarget.getBoundingClientRect();
+      u.text = g.description, u.shortcut = g.shortcut ?? [], u.visible = !0, Ge(() => {
+        const E = a.value?.offsetWidth ?? 0, L = a.value?.offsetHeight ?? 0;
+        u.x = m.left + m.width / 2 - E / 2, u.y = m.top - L - 6;
       });
     }
-    function N() {
-      c.visible = !1, a.value = null;
+    function D() {
+      u.visible = !1, a.value = null;
     }
-    rt(() => {
-      h?.();
+    it(() => {
+      p?.();
     });
     const O = V(() => `${Math.round(l.value * 100)}%`), b = V(() => r.editor.api.value ? {
       api: r.editor.api.value,
@@ -3096,48 +3120,48 @@ const Go = { class: "flow-canvas-toolbar" }, zo = {
       history: r.editor.history,
       mode: r.editor.mode.value
     } : null);
-    function M(d) {
-      return d.visible === !1 ? !1 : typeof d.visible == "function" ? b.value ? d.visible(b.value) : !1 : !0;
+    function S(c) {
+      return c.visible === !1 ? !1 : typeof c.visible == "function" ? b.value ? c.visible(b.value) : !1 : !0;
     }
-    function S(d) {
-      return typeof d.active == "function" ? b.value ? d.active(b.value) : !1 : d.active !== void 0 ? d.active : d.type === "select" ? r.editor.selectionMode.value : !1;
+    function M(c) {
+      return typeof c.active == "function" ? b.value ? c.active(b.value) : !1 : c.active !== void 0 ? c.active : c.type === "select" ? r.editor.selectionMode.value : !1;
     }
-    const H = V(() => {
-      const d = f.value.filter(
-        (p) => s(p.type) && S(p)
+    const B = V(() => {
+      const c = d.value.filter(
+        (h) => s(h.type) && M(h)
       );
-      if (d.length === 0) return null;
+      if (c.length === 0) return null;
       const g = v.value;
-      return g && d.some((p) => p.type === g) ? g : d[0]?.type ?? null;
+      return g && c.some((h) => h.type === g) ? g : c[0]?.type ?? null;
     });
-    function X(d) {
-      return s(d.type) ? H.value === d.type : S(d);
+    function j(c) {
+      return s(c.type) ? B.value === c.type : M(c);
     }
-    function k(d) {
-      return !b.value || d.disabled === !0 ? !0 : typeof d.disabled == "function" ? d.disabled(b.value) : d.type === "undo" ? !r.editor.history.canUndo.value : d.type === "redo" ? !r.editor.history.canRedo.value : d.type === "export" ? u.value : !1;
+    function k(c) {
+      return !b.value || c.disabled === !0 ? !0 : typeof c.disabled == "function" ? c.disabled(b.value) : c.type === "undo" ? !r.editor.history.canUndo.value : c.type === "redo" ? !r.editor.history.canRedo.value : c.type === "export" ? f.value : !1;
     }
-    function K(d) {
-      if (!(!b.value || !s(d.type) || !S(d))) {
-        if (d.type === "select") {
+    function X(c) {
+      if (!(!b.value || !s(c.type) || !M(c))) {
+        if (c.type === "select") {
           r.editor.setSelectionMode(!1);
           return;
         }
-        d.onClick?.(b.value);
+        c.onClick?.(b.value);
       }
     }
-    function R(d) {
-      if (s(d.type))
-        for (const g of f.value)
-          !s(g.type) || g.id === d.id || K(g);
+    function U(c) {
+      if (s(c.type))
+        for (const g of d.value)
+          !s(g.type) || g.id === c.id || X(g);
     }
-    function B(d) {
-      if (!b.value || k(d)) return;
-      if (s(d.type) && (v.value = d.type, R(d)), d.onClick) {
-        d.onClick(b.value);
+    function G(c) {
+      if (!b.value || k(c)) return;
+      if (s(c.type) && (v.value = c.type, U(c)), c.onClick) {
+        c.onClick(b.value);
         return;
       }
       const { api: g } = b.value;
-      switch (d.type) {
+      switch (c.type) {
         case "undo":
           r.editor.history.undo();
           break;
@@ -3157,14 +3181,14 @@ const Go = { class: "flow-canvas-toolbar" }, zo = {
           g.zoomTo(1), g.scrollToOrigin(), l.value = 1;
           break;
         case "export":
-          if (u.value) break;
-          u.value = !0, g.exportAsImage().then((p) => {
-            const m = URL.createObjectURL(p), E = document.createElement("a");
+          if (f.value) break;
+          f.value = !0, g.exportAsImage().then((h) => {
+            const m = URL.createObjectURL(h), E = document.createElement("a");
             E.href = m, E.download = "canvas-export.png", E.click(), URL.revokeObjectURL(m);
-          }).catch((p) => {
-            console.warn("[flow-canvas] Export failed:", p);
+          }).catch((h) => {
+            console.warn("[flow-canvas] Export failed:", h);
           }).finally(() => {
-            u.value = !1;
+            f.value = !1;
           });
           break;
         case "select":
@@ -3175,49 +3199,49 @@ const Go = { class: "flow-canvas-toolbar" }, zo = {
           break;
         case "search":
         case "minimap":
-          console.warn(`[flow-canvas] "${d.type}" toolbar item has no built-in handler. Provide an onClick callback.`);
+          console.warn(`[flow-canvas] "${c.type}" toolbar item has no built-in handler. Provide an onClick callback.`);
           break;
         default:
-          d.type !== "custom" && console.warn(`[flow-canvas] No default handler for toolbar type "${d.type}". Provide an onClick handler.`);
+          c.type !== "custom" && console.warn(`[flow-canvas] No default handler for toolbar type "${c.type}". Provide an onClick handler.`);
           break;
       }
     }
-    const f = V(() => i.value.filter(M)), y = V(() => {
-      const d = /* @__PURE__ */ new Map(), g = [];
-      for (const p of f.value) {
-        const m = p.group ?? "default";
-        d.has(m) || (d.set(m, []), g.push(m)), d.get(m).push(p);
+    const d = V(() => i.value.filter(S)), y = V(() => {
+      const c = /* @__PURE__ */ new Map(), g = [];
+      for (const h of d.value) {
+        const m = h.group ?? "default";
+        c.has(m) || (c.set(m, []), g.push(m)), c.get(m).push(h);
       }
-      return g.map((p) => ({ name: p, items: d.get(p) })).filter((p) => p.items.length > 0);
+      return g.map((h) => ({ name: h, items: c.get(h) })).filter((h) => h.items.length > 0);
     });
-    return (d, g) => (A(), P("div", Go, [
-      (A(!0), P(de, null, Ce(y.value, (p, m) => (A(), P(de, {
-        key: p.name
+    return (c, g) => (A(), T("div", Go, [
+      (A(!0), T(de, null, Ce(y.value, (h, m) => (A(), T(de, {
+        key: h.name
       }, [
-        m > 0 ? (A(), P("div", zo)) : Y("", !0),
+        m > 0 ? (A(), T("div", zo)) : Y("", !0),
         q("div", Uo, [
-          (A(!0), P(de, null, Ce(p.items, (E) => (A(), P(de, {
+          (A(!0), T(de, null, Ce(h.items, (E) => (A(), T(de, {
             key: E.id
           }, [
-            E.type === "zoom-display" ? (A(), P("span", jo, ce(O.value), 1)) : (A(), P("button", {
+            E.type === "zoom-display" ? (A(), T("span", jo, ce(O.value), 1)) : (A(), T("button", {
               key: 1,
               type: "button",
-              class: oe(["flow-canvas-toolbar__btn", {
+              class: te(["flow-canvas-toolbar__btn", {
                 "is-disabled": k(E),
-                "is-active": X(E),
-                "is-exporting": E.type === "export" && u.value
+                "is-active": j(E),
+                "is-exporting": E.type === "export" && f.value
               }]),
               "data-toolbar-id": E.id,
               "data-toolbar-type": E.type,
               disabled: k(E),
-              onClick: ($) => B(E),
-              onMouseenter: ($) => w($, E),
-              onMouseleave: N
+              onClick: (L) => G(E),
+              onMouseenter: (L) => w(L, E),
+              onMouseleave: D
             }, [
-              E.component ? (A(), Ie(mt(E.component), { key: 0 })) : E.icon ? (A(), P("i", {
+              E.component ? (A(), Ie(mt(E.component), { key: 0 })) : E.icon ? (A(), T("i", {
                 key: 1,
-                class: oe(E.icon)
-              }, null, 2)) : (A(), P("span", {
+                class: te(E.icon)
+              }, null, 2)) : (A(), T("span", {
                 key: 2,
                 class: "flow-canvas-toolbar__text",
                 textContent: ce(E.text ?? E.description ?? E.id)
@@ -3227,16 +3251,16 @@ const Go = { class: "flow-canvas-toolbar" }, zo = {
         ])
       ], 64))), 128)),
       (A(), Ie(yt, { to: "body" }, [
-        c.visible ? (A(), P("div", {
+        u.visible ? (A(), T("div", {
           key: 0,
           ref_key: "tooltipRef",
           ref: a,
           class: "flow-canvas-toolbar-tooltip",
-          style: be({ left: `${c.x}px`, top: `${c.y}px` })
+          style: Ee({ left: `${u.x}px`, top: `${u.y}px` })
         }, [
-          q("span", null, ce(c.text), 1),
-          c.shortcut.length ? (A(), P("kbd", Xo, [
-            (A(!0), P(de, null, Ce(c.shortcut, (p, m) => (A(), P("span", { key: m }, ce(p), 1))), 128))
+          q("span", null, ce(u.text), 1),
+          u.shortcut.length ? (A(), T("kbd", Xo, [
+            (A(!0), T(de, null, Ce(u.shortcut, (h, m) => (A(), T("span", { key: m }, ce(h), 1))), 128))
           ])) : Y("", !0),
           g[0] || (g[0] = q("div", { class: "flow-canvas-toolbar-tooltip__arrow" }, null, -1))
         ], 4)) : Y("", !0)
@@ -3265,24 +3289,24 @@ const Go = { class: "flow-canvas-toolbar" }, zo = {
       "converge-gateway",
       "conditional-parallel-gateway"
     ]), a = V(() => {
-      const u = t.value?.type ?? "";
-      return i.has(u) ? "endpoint" : l.has(u) ? "gateway" : "task";
+      const f = t.value?.type ?? "";
+      return i.has(f) ? "endpoint" : l.has(f) ? "gateway" : "task";
     }), v = V(() => r[t.value?.type ?? ""] ?? "");
-    return (u, h) => (A(), P("div", {
-      class: oe(["flow-canvas-default-node", [`is-${a.value}`, { "flow-canvas-highlight-target": a.value !== "gateway" }]])
+    return (f, p) => (A(), T("div", {
+      class: te(["flow-canvas-default-node", [`is-${a.value}`, { "flow-canvas-highlight-target": a.value !== "gateway" }]])
     }, [
-      a.value === "endpoint" ? (A(), P(de, { key: 0 }, [
-        v.value ? (A(), P("i", {
+      a.value === "endpoint" ? (A(), T(de, { key: 0 }, [
+        v.value ? (A(), T("i", {
           key: 0,
-          class: oe([["flow-canvas-icon", v.value], "flow-canvas-default-node__ep-icon"])
+          class: te([["flow-canvas-icon", v.value], "flow-canvas-default-node__ep-icon"])
         }, null, 2)) : Y("", !0),
         q("span", Yo, ce(s.value), 1)
-      ], 64)) : a.value === "gateway" ? (A(), P("div", Zo, [
-        v.value ? (A(), P("i", {
+      ], 64)) : a.value === "gateway" ? (A(), T("div", Zo, [
+        v.value ? (A(), T("i", {
           key: 0,
-          class: oe([["flow-canvas-icon", v.value], "flow-canvas-default-node__gw-icon"])
+          class: te([["flow-canvas-icon", v.value], "flow-canvas-default-node__gw-icon"])
         }, null, 2)) : Y("", !0)
-      ])) : (A(), P("span", Qo, ce(s.value), 1))
+      ])) : (A(), T("span", Qo, ce(s.value), 1))
     ], 2));
   }
 }), en = /* @__PURE__ */ ve(Jo, [["__scopeId", "data-v-f0e24a9f"]]), tn = {
@@ -3298,11 +3322,11 @@ const Go = { class: "flow-canvas-toolbar" }, zo = {
     width: 64,
     height: 64
   }
-}, et = (n, e) => ({
+}, tt = (n, e) => ({
   stroke: e.hovered ? "#3a84ff" : "#abb5cc",
   strokeWidth: 2
 });
-function tt() {
+function ot() {
   return {
     attrs: {
       line: {
@@ -3318,13 +3342,13 @@ function on() {
     manhattan: {
       router: { name: "manhattan", args: { padding: 10, maxDirectionChange: 90 } },
       connector: { name: "rounded", args: { radius: 8 } },
-      style: et,
-      x6EdgeConfig: tt()
+      style: tt,
+      x6EdgeConfig: ot()
     },
     bezier: {
       connector: { name: "smooth" },
-      style: et,
-      x6EdgeConfig: tt()
+      style: tt,
+      x6EdgeConfig: ot()
     }
   };
 }
@@ -3363,22 +3387,22 @@ function Tn(n) {
         if (r.type !== "edge.add" && r.type !== "edge.reconnect") continue;
         const i = t.flowModel.value, l = r.type === "edge.add" ? r.edge.source.nodeId : r.source?.nodeId, a = r.type === "edge.add" ? r.edge.target.nodeId : r.target?.nodeId;
         if (!l || !a) continue;
-        const v = i.nodes[l], u = i.nodes[a];
-        if (!v || !u) continue;
-        const h = r.type === "edge.add" ? r.edge.source.portId : r.source?.portId, c = r.type === "edge.add" ? r.edge.target.portId : r.target?.portId, w = h ? v.ports?.find((S) => S.id === h) : void 0, N = c ? u.ports?.find((S) => S.id === c) : void 0, O = r.type === "edge.reconnect" ? r.edgeId : void 0, b = Object.values(i.edges).filter(
-          (S) => S.id !== O && !s.has(S.id)
-        ), M = n({
+        const v = i.nodes[l], f = i.nodes[a];
+        if (!v || !f) continue;
+        const p = r.type === "edge.add" ? r.edge.source.portId : r.source?.portId, u = r.type === "edge.add" ? r.edge.target.portId : r.target?.portId, w = p ? v.ports?.find((M) => M.id === p) : void 0, D = u ? f.ports?.find((M) => M.id === u) : void 0, O = r.type === "edge.reconnect" ? r.edgeId : void 0, b = Object.values(i.edges).filter(
+          (M) => M.id !== O && !s.has(M.id)
+        ), S = n({
           flowModel: i,
           sourceNode: v,
-          targetNode: u,
+          targetNode: f,
           sourcePort: w,
-          targetPort: N,
+          targetPort: D,
           existingEdges: b
         });
-        if (!M.valid)
+        if (!S.valid)
           return {
             rejected: !0,
-            reason: M.reason ?? "Connection validation failed",
+            reason: S.reason ?? "Connection validation failed",
             code: "validation_failed"
           };
       }
@@ -3386,7 +3410,7 @@ function Tn(n) {
     }
   };
 }
-function Ln(n) {
+function Rn(n) {
   const { rubberband: e = !0, multiple: o = !0, movable: t = !0 } = n ?? {};
   return {
     name: "selection",
@@ -3406,7 +3430,7 @@ function Ln(n) {
     }
   };
 }
-function Rn(n) {
+function Ln(n) {
   const { tolerance: e = 10, color: o = "#3a84ff" } = n ?? {};
   let t = null;
   return {
@@ -3443,11 +3467,11 @@ const nn = { class: "flow-canvas-search-popover__input-box" }, sn = ["value", "p
   },
   emits: ["update:query", "select", "nextMatch", "prevMatch", "close"],
   setup(n, { emit: e }) {
-    const o = n, t = e, s = z(null), r = z(null), i = z(-1);
+    const o = n, t = e, s = H(null), r = H(null), i = H(-1);
     ge(
       () => o.open,
-      (c) => {
-        c && (i.value = -1, dt(() => {
+      (u) => {
+        u && (i.value = -1, Ge(() => {
           s.value?.focus(), s.value?.select();
         }));
       }
@@ -3458,62 +3482,62 @@ const nn = { class: "flow-canvas-search-popover__input-box" }, sn = ["value", "p
       }
     ), ge(
       () => o.results.length,
-      (c) => {
-        if (!c) {
+      (u) => {
+        if (!u) {
           i.value = -1;
           return;
         }
-        i.value >= c && (i.value = -1);
+        i.value >= u && (i.value = -1);
       }
     );
-    function l(c) {
-      t("update:query", c.target.value);
+    function l(u) {
+      t("update:query", u.target.value);
     }
-    function a(c) {
-      i.value = c;
+    function a(u) {
+      i.value = u;
     }
     function v() {
       i.value = -1;
     }
-    function u(c) {
-      if (c.key === "Escape") {
-        c.preventDefault(), t("close");
+    function f(u) {
+      if (u.key === "Escape") {
+        u.preventDefault(), t("close");
         return;
       }
-      if (c.key === "ArrowDown") {
-        if (c.preventDefault(), !o.results.length) return;
+      if (u.key === "ArrowDown") {
+        if (u.preventDefault(), !o.results.length) return;
         i.value = i.value < o.results.length - 1 ? i.value + 1 : 0;
         return;
       }
-      if (c.key === "ArrowUp") {
-        if (c.preventDefault(), !o.results.length) return;
+      if (u.key === "ArrowUp") {
+        if (u.preventDefault(), !o.results.length) return;
         i.value = i.value > 0 ? i.value - 1 : o.results.length - 1;
         return;
       }
-      if (c.key === "Enter") {
-        if (c.preventDefault(), i.value >= 0) {
+      if (u.key === "Enter") {
+        if (u.preventDefault(), i.value >= 0) {
           const w = o.results[i.value];
           w && t("select", w.id);
           return;
         }
-        c.shiftKey ? t("prevMatch") : t("nextMatch");
+        u.shiftKey ? t("prevMatch") : t("nextMatch");
       }
     }
-    function h(c) {
+    function p(u) {
       if (!o.open) return;
-      const w = c.target;
-      w && r.value?.contains(w) || o.isAnchorTarget?.(c.target) || t("close");
+      const w = u.target;
+      w && r.value?.contains(w) || o.isAnchorTarget?.(u.target) || t("close");
     }
-    return lt(() => {
-      document.addEventListener("mousedown", h);
+    return dt(() => {
+      document.addEventListener("mousedown", p);
     }), Te(() => {
-      document.removeEventListener("mousedown", h);
-    }), (c, w) => n.open ? (A(), P("div", {
+      document.removeEventListener("mousedown", p);
+    }), (u, w) => n.open ? (A(), T("div", {
       key: 0,
       ref_key: "panelRef",
       ref: r,
       class: "flow-canvas-search-popover",
-      style: be({ left: `${n.position.x}px`, top: `${n.position.y}px`, width: `${n.position.width}px` })
+      style: Ee({ left: `${n.position.x}px`, top: `${n.position.y}px`, width: `${n.position.width}px` })
     }, [
       q("div", nn, [
         q("input", {
@@ -3522,15 +3546,15 @@ const nn = { class: "flow-canvas-search-popover__input-box" }, sn = ["value", "p
           value: n.query,
           placeholder: n.placeholder,
           onInput: l,
-          onKeydown: u
+          onKeydown: f
         }, null, 40, sn),
-        n.query ? (A(), P(de, { key: 0 }, [
-          n.results.length ? (A(), P(de, { key: 1 }, [
+        n.query ? (A(), T(de, { key: 0 }, [
+          n.results.length ? (A(), T(de, { key: 1 }, [
             q("button", {
               type: "button",
               class: "flow-canvas-search-popover__nav-btn",
               "aria-label": "上一个",
-              onClick: w[0] || (w[0] = (N) => t("prevMatch"))
+              onClick: w[0] || (w[0] = (D) => t("prevMatch"))
             }, [...w[2] || (w[2] = [
               q("svg", {
                 viewBox: "0 0 16 16",
@@ -3552,7 +3576,7 @@ const nn = { class: "flow-canvas-search-popover__input-box" }, sn = ["value", "p
               type: "button",
               class: "flow-canvas-search-popover__nav-btn",
               "aria-label": "下一个",
-              onClick: w[1] || (w[1] = (N) => t("nextMatch"))
+              onClick: w[1] || (w[1] = (D) => t("nextMatch"))
             }, [...w[3] || (w[3] = [
               q("svg", {
                 viewBox: "0 0 16 16",
@@ -3569,29 +3593,29 @@ const nn = { class: "flow-canvas-search-popover__input-box" }, sn = ["value", "p
                 })
               ], -1)
             ])])
-          ], 64)) : (A(), P("span", rn, "无结果"))
+          ], 64)) : (A(), T("span", rn, "无结果"))
         ], 64)) : Y("", !0),
         w[4] || (w[4] = q("i", { class: "flow-canvas-icon canvas-search flow-canvas-search-popover__search-icon" }, null, -1))
       ]),
-      n.query && n.results.length ? (A(), P("div", {
+      n.query && n.results.length ? (A(), T("div", {
         key: 0,
         class: "flow-canvas-search-popover__list-box",
         onMouseleave: v
       }, [
-        (A(!0), P(de, null, Ce(n.results, (N, O) => (A(), P("button", {
-          key: N.id,
+        (A(!0), T(de, null, Ce(n.results, (D, O) => (A(), T("button", {
+          key: D.id,
           type: "button",
-          class: oe(["flow-canvas-search-popover__item", { "is-active": O === i.value, "is-matched": O === n.matchIndex }]),
+          class: te(["flow-canvas-search-popover__item", { "is-active": O === i.value, "is-matched": O === n.matchIndex }]),
           onMouseenter: (b) => a(O),
-          onClick: (b) => t("select", N.id)
+          onClick: (b) => t("select", D.id)
         }, [
-          q("span", dn, ce(N.label), 1)
+          q("span", dn, ce(D.label), 1)
         ], 42, ln))), 128))
       ], 32)) : Y("", !0)
     ], 4)) : Y("", !0);
   }
-}), un = /* @__PURE__ */ ve(cn, [["__scopeId", "data-v-aca2b1c1"]]), ot = 282, fn = 4, gn = 300, _e = "flow-canvas-node-ring-target--search-match", Pe = "flow-canvas-node-ring-target--search-current", hn = "flow-canvas-node-ring-target";
-function pn(n) {
+}), un = /* @__PURE__ */ ve(cn, [["__scopeId", "data-v-aca2b1c1"]]), nt = 282, fn = 4, gn = 300, _e = "flow-canvas-node-ring-target--search-match", Pe = "flow-canvas-node-ring-target--search-current", pn = "flow-canvas-node-ring-target";
+function hn(n) {
   return n !== null;
 }
 function vn(n) {
@@ -3618,20 +3642,20 @@ function yn(n, e) {
 }
 function On(n) {
   let e = null, o = null, t = null, s = null, r = null, i = null;
-  const l = z(!1), a = z(""), v = z({ x: 0, y: 0, width: ot }), u = z(-1), h = V(() => e ? Object.values(e.flowModel.value.nodes).map((g) => yn(g, n)).filter(pn) : []), c = V(() => {
-    const g = a.value.trim().toLowerCase(), p = Math.max(1, n?.maxResults ?? gn);
-    return g ? h.value.filter((m) => m.keywords.some((E) => E.toLowerCase().includes(g))).slice(0, p) : h.value.slice(0, p);
+  const l = H(!1), a = H(""), v = H({ x: 0, y: 0, width: nt }), f = H(-1), p = V(() => e ? Object.values(e.flowModel.value.nodes).map((g) => yn(g, n)).filter(hn) : []), u = V(() => {
+    const g = a.value.trim().toLowerCase(), h = Math.max(1, n?.maxResults ?? gn);
+    return g ? p.value.filter((m) => m.keywords.some((E) => E.toLowerCase().includes(g))).slice(0, h) : p.value.slice(0, h);
   });
   function w() {
     return t?.querySelector('.flow-canvas-toolbar__btn[data-toolbar-type="search"]');
   }
-  function N() {
+  function D() {
     return w()?.closest(".flow-canvas-toolbar");
   }
   function O() {
-    const g = N(), p = t?.getBoundingClientRect(), m = g?.getBoundingClientRect() ?? p;
+    const g = D(), h = t?.getBoundingClientRect(), m = g?.getBoundingClientRect() ?? h;
     if (!m) return;
-    const E = Math.max(ot, Math.round(m.width));
+    const E = Math.max(nt, Math.round(m.width));
     v.value = {
       x: mn(m.left, E),
       y: m.bottom + fn,
@@ -3640,87 +3664,87 @@ function On(n) {
   }
   function b(g) {
     if (!o) return null;
-    const p = o.graph.getCellById(g);
-    if (!p?.isNode()) return null;
-    const m = o.graph.findViewByCell(p)?.container;
+    const h = o.graph.getCellById(g);
+    if (!h?.isNode()) return null;
+    const m = o.graph.findViewByCell(h)?.container;
     return m ? m.querySelector(".flow-canvas-highlight-target") ?? m.querySelector(".flow-canvas-node-surface > :first-child") : null;
   }
-  function M() {
+  function S() {
     if (!o) return;
     const g = o.graph.getNodes();
-    for (const p of g) {
-      const m = b(p.id);
+    for (const h of g) {
+      const m = b(h.id);
       m && m.classList.remove(_e, Pe);
     }
   }
-  function S() {
+  function M() {
     if (!o) return;
     const g = a.value.trim().toLowerCase();
     if (!l.value || !g) {
-      M();
+      S();
       return;
     }
-    const p = new Set(c.value.map(($) => $.id)), m = u.value >= 0 ? c.value[u.value]?.id : null, E = o.graph.getNodes();
-    for (const $ of E) {
-      const U = b($.id);
-      U && (U.classList.add(hn), $.id === m ? (U.classList.remove(_e), U.classList.add(Pe)) : p.has($.id) ? (U.classList.remove(Pe), U.classList.add(_e)) : U.classList.remove(_e, Pe));
+    const h = new Set(u.value.map((L) => L.id)), m = f.value >= 0 ? u.value[f.value]?.id : null, E = o.graph.getNodes();
+    for (const L of E) {
+      const z = b(L.id);
+      z && (z.classList.add(pn), L.id === m ? (z.classList.remove(_e), z.classList.add(Pe)) : h.has(L.id) ? (z.classList.remove(Pe), z.classList.add(_e)) : z.classList.remove(_e, Pe));
     }
   }
-  function H(g) {
+  function B(g) {
     if (!o) return;
-    const p = c.value.findIndex((m) => m.id === g);
-    p >= 0 && (u.value = p), o.api.scrollToNode(g), S();
+    const h = u.value.findIndex((m) => m.id === g);
+    h >= 0 && (f.value = h), o.api.scrollToNode(g), M();
   }
-  function X() {
-    const g = c.value;
+  function j() {
+    const g = u.value;
     if (g.length === 0) return;
-    const p = u.value < g.length - 1 ? u.value + 1 : 0;
-    u.value = p, H(g[p].id);
+    const h = f.value < g.length - 1 ? f.value + 1 : 0;
+    f.value = h, B(g[h].id);
   }
   function k() {
-    const g = c.value;
+    const g = u.value;
     if (g.length === 0) return;
-    const p = u.value > 0 ? u.value - 1 : g.length - 1;
-    u.value = p, H(g[p].id);
+    const h = f.value > 0 ? f.value - 1 : g.length - 1;
+    f.value = h, B(g[h].id);
   }
-  function K() {
+  function X() {
     o && (l.value = !0, O(), requestAnimationFrame(() => O()));
   }
-  function R() {
-    l.value = !1, a.value = "", u.value = -1, M();
+  function U() {
+    l.value = !1, a.value = "", f.value = -1, S();
   }
-  function B() {
+  function G() {
     if (l.value) {
-      R();
+      U();
       return;
     }
-    K();
+    X();
   }
-  function f(g) {
-    const p = w();
-    return !!(p && g instanceof Node && p.contains(g));
+  function d(g) {
+    const h = w();
+    return !!(h && g instanceof Node && h.contains(g));
   }
   function y() {
     l.value && O();
   }
-  const d = fe({
+  const c = fe({
     name: "FlowCanvasSearchHost",
     setup() {
       return () => qe(un, {
         open: l.value,
         position: v.value,
         query: a.value,
-        results: c.value,
-        matchIndex: u.value,
+        results: u.value,
+        matchIndex: f.value,
         placeholder: n?.placeholder ?? "搜索节点名称",
-        isAnchorTarget: f,
+        isAnchorTarget: d,
         "onUpdate:query": (g) => {
-          a.value = g, u.value = -1;
+          a.value = g, f.value = -1;
         },
-        onSelect: H,
-        onNextMatch: X,
+        onSelect: B,
+        onNextMatch: j,
         onPrevMatch: k,
-        onClose: R
+        onClose: U
       });
     }
   });
@@ -3731,18 +3755,18 @@ function On(n) {
       e = g;
     },
     attachRuntime(g) {
-      o = g, t = g.graph.container.closest(".flow-canvas-layout__content") ?? g.graph.container.parentElement, s = document.createElement("div"), s.className = "flow-canvas-search-host", document.body.append(s), r = bt(d), r.mount(s), i = ge(
-        () => [a.value, c.value.length],
+      o = g, t = g.graph.container.closest(".flow-canvas-layout__content") ?? g.graph.container.parentElement, s = document.createElement("div"), s.className = "flow-canvas-search-host", document.body.append(s), r = bt(c), r.mount(s), i = ge(
+        () => [a.value, u.value.length],
         () => {
-          u.value = -1, S();
+          f.value = -1, M();
         }
       ), window.addEventListener("resize", y), window.addEventListener("scroll", y, !0);
     },
     detachRuntime() {
-      R(), i?.(), i = null, window.removeEventListener("resize", y), window.removeEventListener("scroll", y, !0), r?.unmount(), r = null, s?.remove(), s = null, t = null, o = null;
+      U(), i?.(), i = null, window.removeEventListener("resize", y), window.removeEventListener("scroll", y, !0), r?.unmount(), r = null, s?.remove(), s = null, t = null, o = null;
     },
     dispose() {
-      R(), i?.(), i = null, e = null;
+      U(), i?.(), i = null, e = null;
     },
     provideToolbarItems() {
       return [
@@ -3754,15 +3778,15 @@ function On(n) {
           group: "tools",
           order: 22,
           active: () => l.value,
-          onClick: B
+          onClick: G
         }
       ];
     }
   };
 }
-const nt = 52, st = 16, ht = 4, wn = 40;
+const st = 52, rt = 16, pt = 4, wn = 40;
 function bn(n) {
-  const { mountRect: e, toolbarRect: o, fallbackLeft: t, fallbackTop: s, fallbackWidth: r, height: i } = n, l = n.offset ?? ht;
+  const { mountRect: e, toolbarRect: o, fallbackLeft: t, fallbackTop: s, fallbackWidth: r, height: i } = n, l = n.offset ?? pt;
   return !o || o.width <= 0 ? {
     left: t,
     top: s,
@@ -3783,28 +3807,28 @@ function En(n) {
     width: `${n.width}px`,
     height: `${n.height}px`
   }), n.floating !== !1 && Object.assign(e.style, {
-    top: `${nt}px`,
-    left: `${st}px`
+    top: `${st}px`,
+    left: `${rt}px`
   });
   let t = null, s = n.defaultOpen ?? !1, r = null, i = null, l = null, a = null, v = {
     width: n.width,
     height: n.height
   };
-  function u(k, K) {
+  function f(k, X) {
     if (!t) return;
-    const R = t;
-    R.options.width = k, R.options.height = K, R.updatePaper(n.sourceGraph.container.clientWidth, n.sourceGraph.container.clientHeight);
+    const U = t;
+    U.options.width = k, U.options.height = X, U.updatePaper(n.sourceGraph.container.clientWidth, n.sourceGraph.container.clientHeight);
   }
-  function h() {
+  function p() {
     if (n.floating === !1) return;
     const k = bn({
       mountRect: n.mountTarget.getBoundingClientRect(),
       toolbarRect: n.getToolbarElement?.()?.getBoundingClientRect() ?? null,
-      fallbackLeft: st,
-      fallbackTop: nt,
+      fallbackLeft: rt,
+      fallbackTop: st,
       fallbackWidth: n.width,
       height: n.height,
-      offset: n.panelOffset ?? ht
+      offset: n.panelOffset ?? pt
     });
     v = {
       width: k.width,
@@ -3814,33 +3838,33 @@ function En(n) {
       top: `${k.top}px`,
       width: `${k.width}px`,
       height: `${k.height}px`
-    }), u(k.width, k.height);
+    }), f(k.width, k.height);
   }
-  function c() {
+  function u() {
     if (n.floating === !1 || typeof ResizeObserver > "u") return;
     const k = n.getToolbarElement?.() ?? null;
     i || (i = new ResizeObserver(() => {
-      s && (c(), h());
+      s && (u(), p());
     })), a !== k && (i.disconnect(), i.observe(n.mountTarget), k && i.observe(k), a = k);
   }
   function w() {
-    n.floating !== !1 && (h(), c(), l || (l = () => {
-      s && (c(), h());
+    n.floating !== !1 && (p(), u(), l || (l = () => {
+      s && (u(), p());
     }, window.addEventListener("resize", l)));
   }
-  function N() {
+  function D() {
     l && (window.removeEventListener("resize", l), l = null), i?.disconnect(), i = null, a = null;
   }
   function O() {
     !n.onClickOutside || r || (r = (k) => {
-      const K = k.target;
-      K && e.contains(K) || k.target?.closest('[data-toolbar-type="minimap"]') || k.target?.closest(".flow-canvas-layout__content") || n.onClickOutside();
+      const X = k.target;
+      X && e.contains(X) || k.target?.closest('[data-toolbar-type="minimap"]') || k.target?.closest(".flow-canvas-layout__content") || n.onClickOutside();
     }, document.addEventListener("mousedown", r));
   }
   function b() {
     r && (document.removeEventListener("mousedown", r), r = null);
   }
-  function M() {
+  function S() {
     t || (t = new Ct({
       container: o,
       width: v.width,
@@ -3849,31 +3873,31 @@ function En(n) {
       scalable: !1
     }), n.sourceGraph.use(t));
   }
-  function S(k) {
-    s = k, e.style.display = s ? "" : "none", s ? (w(), M(), O(), requestAnimationFrame(() => {
-      s && (c(), h());
-    })) : (b(), N());
+  function M(k) {
+    s = k, e.style.display = s ? "" : "none", s ? (w(), S(), O(), requestAnimationFrame(() => {
+      s && (u(), p());
+    })) : (b(), D());
   }
-  function H() {
-    S(s), n.mountTarget.appendChild(e);
+  function B() {
+    M(s), n.mountTarget.appendChild(e);
   }
-  function X() {
-    b(), N(), t?.dispose(), t = null, e.remove();
+  function j() {
+    b(), D(), t?.dispose(), t = null, e.remove();
   }
-  return H(), {
+  return B(), {
     element: e,
     isOpen: () => s,
-    setOpen: S,
+    setOpen: M,
     toggle() {
       const k = !s;
-      return S(k), k;
+      return M(k), k;
     },
-    destroy: X
+    destroy: j
   };
 }
 function $n(n) {
   let e = null, o = null;
-  const t = z(!1);
+  const t = H(!1);
   function s() {
     return o?.querySelector('.flow-canvas-toolbar__btn[data-toolbar-type="minimap"]');
   }
@@ -3890,14 +3914,14 @@ function $n(n) {
     name: "minimap",
     priority: 90,
     attachRuntime(a) {
-      const v = a, u = n?.width ?? 334, h = n?.height ?? 180;
+      const v = a, f = n?.width ?? 334, p = n?.height ?? 180;
       o = v.graph.container.closest(".flow-canvas-layout__content") ?? v.graph.container.parentElement;
-      const c = n?.container ?? o;
-      c && (e = En({
+      const u = n?.container ?? o;
+      u && (e = En({
         sourceGraph: a.graph,
-        mountTarget: c,
-        width: u,
-        height: h,
+        mountTarget: u,
+        width: f,
+        height: p,
         floating: !n?.container,
         defaultOpen: !1,
         getToolbarElement: n?.container ? void 0 : r,
@@ -3933,10 +3957,10 @@ function Bn() {
       if (s && o.key === "c") {
         const r = t.graph.getSelectedCells?.() ?? [];
         if (!r.length) return !1;
-        const i = t.flowModel.value, l = new Set(r.filter((u) => u.isNode()).map((u) => u.id)), a = [...l].map((u) => i.nodes[u]).filter(Boolean);
+        const i = t.flowModel.value, l = new Set(r.filter((f) => f.isNode()).map((f) => f.id)), a = [...l].map((f) => i.nodes[f]).filter(Boolean);
         if (!a.length) return !1;
         const v = Object.values(i.edges).filter(
-          (u) => l.has(u.source.nodeId) && l.has(u.target.nodeId)
+          (f) => l.has(f.source.nodeId) && l.has(f.target.nodeId)
         );
         return n = { nodes: a, edges: v }, e = 0, !0;
       }
@@ -3945,7 +3969,7 @@ function Bn() {
         e++;
         const r = e * 30, i = /* @__PURE__ */ new Map(), l = [];
         for (const a of n.nodes) {
-          const v = `${a.id}_cp${Q().slice(0, 6)}`;
+          const v = `${a.id}_cp${J().slice(0, 6)}`;
           i.set(a.id, v), l.push({
             type: "node.add",
             node: {
@@ -3961,21 +3985,21 @@ function Bn() {
           });
         }
         for (const a of n.edges) {
-          const v = i.get(a.source.nodeId), u = i.get(a.target.nodeId);
-          !v || !u || l.push({
+          const v = i.get(a.source.nodeId), f = i.get(a.target.nodeId);
+          !v || !f || l.push({
             type: "edge.add",
             edge: {
               ...a,
-              id: `${a.id}_cp${Q().slice(0, 6)}`,
+              id: `${a.id}_cp${J().slice(0, 6)}`,
               source: { ...a.source, nodeId: v },
-              target: { ...a.target, nodeId: u },
-              labels: a.labels?.map((h) => ({ ...h, id: `${h.id}_cp${Q().slice(0, 6)}` })),
+              target: { ...a.target, nodeId: f },
+              labels: a.labels?.map((p) => ({ ...p, id: `${p.id}_cp${J().slice(0, 6)}` })),
               payload: a.payload ? { ...a.payload } : {}
             }
           });
         }
         return l.length && t.executeCommand({
-          id: Q(),
+          id: J(),
           source: "user:keyboard",
           label: "粘贴",
           timestamp: Date.now(),
@@ -3989,7 +4013,7 @@ function Bn() {
 export {
   ue as CanvasConstraintError,
   An as CanvasLayout,
-  Lo as CanvasNodePalette,
+  Ro as CanvasNodePalette,
   Dn as CanvasRuntime,
   kt as CanvasSchemaError,
   _n as CanvasToolbar,
@@ -4004,10 +4028,10 @@ export {
   Pn as createDefaultSchema,
   Ho as createDefaultToolbarItems,
   Mn as createEmptyFlowModel,
-  Q as generateId,
+  J as generateId,
   $n as minimapPlugin,
   On as searchPlugin,
-  Ln as selectionPlugin,
-  Rn as snaplinePlugin,
+  Rn as selectionPlugin,
+  Ln as snaplinePlugin,
   Nn as useCanvasEditor
 };