@blueking/flow-canvas 0.0.1-beta.1 → 0.0.1-beta.2

package/dist/index.esm.js

@@ -1,6 +1,6 @@
-import { ref as B, computed as z, onScopeDispose as ze, defineComponent as ie, onBeforeUnmount as Ne, createElementBlock as M, openBlock as C, normalizeStyle as we, createElementVNode as $, createVNode as Oe, createCommentVNode as O, normalizeClass as Q, Transition as je, withCtx as De, withModifiers as qe, createTextVNode as Ae, renderSlot as ce, onMounted as Ge, watch as de, createBlock as be, Fragment as se, renderList as ge, toDisplayString as ue, unref as le, resolveDynamicComponent as Ve, inject as We } from "vue";
-import { Graph as Qe } from "@antv/x6";
-import { register as Xe } from "@antv/x6-vue-shape";
+import { ref as z, computed as j, onScopeDispose as Le, defineComponent as re, onBeforeUnmount as Se, createElementBlock as S, openBlock as k, normalizeStyle as me, createElementVNode as A, createVNode as Be, createCommentVNode as H, normalizeClass as W, Transition as ze, withCtx as Ne, withModifiers as He, createTextVNode as De, renderSlot as fe, onMounted as Fe, watch as le, createBlock as ve, Fragment as ie, renderList as ye, toDisplayString as de, unref as Ue, resolveDynamicComponent as qe, inject as Ge } from "vue";
+import { Graph as Ve } from "@antv/x6";
+import { register as We } from "@antv/x6-vue-shape";
 function io() {
   return {
     version: "1.0",
@@ -13,12 +13,12 @@ class K extends Error {
     super(e), this.name = "CanvasConstraintError";
   }
 }
-class Ye extends Error {
+class Qe extends Error {
   constructor(e) {
     super(e), this.name = "CanvasSchemaError";
   }
 }
-function xe(s, e, t) {
+function be(s, e, t) {
   if (e.length === 0) {
     if (t === void 0) return;
     if (typeof t != "object" || t === null || Array.isArray(t))
@@ -28,99 +28,99 @@ function xe(s, e, t) {
   const o = s ? { ...s } : {};
   let n = o;
   for (let r = 0; r < e.length - 1; r++) {
-    const a = e[r], l = n[a];
-    l && typeof l == "object" && !Array.isArray(l) ? n[a] = { ...l } : n[a] = {}, n = n[a];
+    const l = e[r], a = n[l];
+    a && typeof a == "object" && !Array.isArray(a) ? n[l] = { ...a } : n[l] = {}, n = n[l];
   }
   const i = e[e.length - 1];
   return t === void 0 ? delete n[i] : n[i] = t, o;
 }
-function Se(s, e) {
+function Me(s, e) {
   switch (e.type) {
     case "node.add":
-      return Ke(s, e.node);
+      return Xe(s, e.node);
     case "node.move":
-      return Ze(s, e.nodeId, e.position);
+      return Ke(s, e.nodeId, e.position);
     case "node.remove":
-      return Je(s, e.nodeId);
+      return Ye(s, e.nodeId);
     case "node.update":
-      return et(s, e.nodeId, e.patch);
+      return Ze(s, e.nodeId, e.patch);
     case "node.set-payload":
-      return tt(s, e.nodeId, e.path, e.value);
+      return Je(s, e.nodeId, e.path, e.value);
     case "node.set-extensions":
-      return ot(s, e.nodeId, e.path, e.value);
+      return et(s, e.nodeId, e.path, e.value);
     case "edge.add":
-      return nt(s, e.edge);
+      return tt(s, e.edge);
     case "edge.remove":
-      return st(s, e.edgeId);
+      return ot(s, e.edgeId);
     case "edge.reconnect":
-      return it(s, e.edgeId, e.source, e.target);
+      return nt(s, e.edgeId, e.source, e.target);
     case "edge.update":
-      return rt(s, e.edgeId, e.patch);
+      return st(s, e.edgeId, e.patch);
     case "edge.set-payload":
-      return at(s, e.edgeId, e.path, e.value);
+      return it(s, e.edgeId, e.path, e.value);
     case "edge.label.update":
-      return lt(s, e.edgeId, e.labelId, e.patch);
+      return rt(s, e.edgeId, e.labelId, e.patch);
     case "model.set-meta":
-      return dt(s, e.path, e.value);
+      return at(s, e.path, e.value);
     default:
       throw new K(`Unknown command type: ${e.type}`);
   }
 }
-function he(s, e) {
+function pe(s, e) {
   const t = s.nodes[e];
   if (!t) throw new K(`Node "${e}" does not exist`);
   return t;
 }
-function ve(s, e) {
+function ge(s, e) {
   const t = s.edges[e];
   if (!t) throw new K(`Edge "${e}" does not exist`);
   return t;
 }
-function fe(s, e, t) {
+function ce(s, e, t) {
   const o = s.nodes[e.nodeId];
   if (!o)
     throw new K(`${t} node "${e.nodeId}" does not exist`);
   if (e.portId && o.ports && !o.ports.some((i) => i.id === e.portId))
     throw new K(`${t} port "${e.portId}" not found on node "${e.nodeId}"`);
 }
-function ke(s, e, t) {
+function we(s, e, t) {
   return { ...s, nodes: { ...s.nodes, [e]: t } };
 }
-function Ce(s, e, t) {
+function xe(s, e, t) {
   return { ...s, edges: { ...s.edges, [e]: t } };
 }
-function Ke(s, e) {
+function Xe(s, e) {
   if (s.nodes[e.id])
     throw new K(`Node id "${e.id}" already exists`);
   return { ...s, nodes: { ...s.nodes, [e.id]: e } };
 }
-function Ze(s, e, t) {
-  const o = he(s, e);
-  return ke(s, e, { ...o, position: t });
+function Ke(s, e, t) {
+  const o = pe(s, e);
+  return we(s, e, { ...o, position: t });
 }
-function Je(s, e) {
-  he(s, e);
+function Ye(s, e) {
+  pe(s, e);
   const { [e]: t, ...o } = s.nodes, n = {};
   for (const [i, r] of Object.entries(s.edges))
     r.source.nodeId !== e && r.target.nodeId !== e && (n[i] = r);
   return { ...s, nodes: o, edges: n };
 }
-function et(s, e, t) {
-  const o = he(s, e);
-  return ke(s, e, { ...o, ...t, id: o.id });
+function Ze(s, e, t) {
+  const o = pe(s, e);
+  return we(s, e, { ...o, ...t, id: o.id });
 }
-function tt(s, e, t, o) {
-  const n = he(s, e), i = xe(n.payload, t, o);
-  return ke(s, e, { ...n, payload: i });
+function Je(s, e, t, o) {
+  const n = pe(s, e), i = be(n.payload, t, o);
+  return we(s, e, { ...n, payload: i });
 }
-function ot(s, e, t, o) {
-  const n = he(s, e), i = xe(n.extensions, t, o);
-  return ke(s, e, { ...n, extensions: i });
+function et(s, e, t, o) {
+  const n = pe(s, e), i = be(n.extensions, t, o);
+  return we(s, e, { ...n, extensions: i });
 }
-function nt(s, e) {
+function tt(s, e) {
   if (s.edges[e.id])
     throw new K(`Edge id "${e.id}" already exists`);
-  if (fe(s, e.source, "Source"), fe(s, e.target, "Target"), e.labels) {
+  if (ce(s, e.source, "Source"), ce(s, e.target, "Target"), e.labels) {
     const t = /* @__PURE__ */ new Set();
     for (const o of e.labels) {
       if (t.has(o.id))
@@ -130,93 +130,93 @@ function nt(s, e) {
   }
   return { ...s, edges: { ...s.edges, [e.id]: e } };
 }
-function st(s, e) {
-  ve(s, e);
+function ot(s, e) {
+  ge(s, e);
   const { [e]: t, ...o } = s.edges;
   return { ...s, edges: o };
 }
-function it(s, e, t, o) {
-  const n = ve(s, e), i = t ?? n.source, r = o ?? n.target;
-  return fe(s, i, "Source"), fe(s, r, "Target"), Ce(s, e, { ...n, source: i, target: r });
+function nt(s, e, t, o) {
+  const n = ge(s, e), i = t ?? n.source, r = o ?? n.target;
+  return ce(s, i, "Source"), ce(s, r, "Target"), xe(s, e, { ...n, source: i, target: r });
 }
-function rt(s, e, t) {
-  const o = ve(s, e), n = { ...o, ...t, id: o.id };
-  return t.source && fe(s, n.source, "Source"), t.target && fe(s, n.target, "Target"), Ce(s, e, n);
+function st(s, e, t) {
+  const o = ge(s, e), n = { ...o, ...t, id: o.id };
+  return t.source && ce(s, n.source, "Source"), t.target && ce(s, n.target, "Target"), xe(s, e, n);
 }
-function at(s, e, t, o) {
-  const n = ve(s, e), i = xe(n.payload, t, o);
-  return Ce(s, e, { ...n, payload: i });
+function it(s, e, t, o) {
+  const n = ge(s, e), i = be(n.payload, t, o);
+  return xe(s, e, { ...n, payload: i });
 }
-function lt(s, e, t, o) {
-  const n = ve(s, e);
+function rt(s, e, t, o) {
+  const n = ge(s, e);
   if (!n.labels)
     throw new K(`Edge "${e}" has no labels`);
-  const i = n.labels.findIndex((a) => a.id === t);
+  const i = n.labels.findIndex((l) => l.id === t);
   if (i === -1)
     throw new K(`Label "${t}" not found in edge "${e}"`);
   const r = [...n.labels];
-  return r[i] = { ...r[i], ...o, id: t }, Ce(s, e, { ...n, labels: r });
+  return r[i] = { ...r[i], ...o, id: t }, xe(s, e, { ...n, labels: r });
 }
-function dt(s, e, t) {
-  const o = xe(s.meta, e, t);
+function at(s, e, t) {
+  const o = be(s.meta, e, t);
   return { ...s, meta: o };
 }
-function ct(s, e) {
-  const t = e?.maxHistorySize ?? 100, o = B(s), n = [], i = [], r = B(!1), a = B(!1);
-  function l() {
-    r.value = n.length > 0, a.value = i.length > 0;
+function lt(s, e) {
+  const t = e?.maxHistorySize ?? 100, o = z(s), n = [], i = [], r = z(!1), l = z(!1);
+  function a() {
+    r.value = n.length > 0, l.value = i.length > 0;
   }
   function c(b) {
-    const m = o.value;
-    let p = m;
-    for (const P of b.commands)
-      p = Se(p, P);
-    return n.push({ snapshot: m, envelope: b }), n.length > t && n.shift(), i.length = 0, o.value = p, l(), p;
+    const y = o.value;
+    let m = y;
+    for (const R of b.commands)
+      m = Me(m, R);
+    return n.push({ snapshot: y, envelope: b }), n.length > t && n.shift(), i.length = 0, o.value = m, a(), m;
   }
-  function u() {
+  function d() {
     const b = n.pop();
-    return b ? (i.push({ snapshot: o.value, envelope: b.envelope }), o.value = b.snapshot, l(), b.snapshot) : null;
+    return b ? (i.push({ snapshot: o.value, envelope: b.envelope }), o.value = b.snapshot, a(), b.snapshot) : null;
   }
-  function d() {
+  function g() {
     const b = i.pop();
     if (!b) return null;
     n.push({ snapshot: o.value, envelope: b.envelope });
-    let m = o.value;
-    for (const p of b.envelope.commands)
-      m = Se(m, p);
-    return o.value = m, l(), m;
+    let y = o.value;
+    for (const m of b.envelope.commands)
+      y = Me(y, m);
+    return o.value = y, a(), y;
   }
-  function w() {
-    n.length = 0, i.length = 0, l();
+  function p() {
+    n.length = 0, i.length = 0, a();
   }
-  function f() {
+  function u() {
     return o.value;
   }
-  function E(b) {
-    o.value = b, w();
+  function N(b) {
+    o.value = b, p();
   }
   return {
     currentFlowModel: o,
     execute: c,
-    undo: u,
-    redo: d,
+    undo: d,
+    redo: g,
     canUndo: r,
-    canRedo: a,
+    canRedo: l,
     get undoStack() {
       return n.map((b) => b.envelope);
     },
     get redoStack() {
       return i.map((b) => b.envelope);
     },
-    clear: w,
-    createSnapshot: f,
-    replaceFlowModel: E
+    clear: p,
+    createSnapshot: u,
+    replaceFlowModel: N
   };
 }
-function ut(s) {
+function dt(s) {
   return s !== null && typeof s == "object" && s.rejected === !0;
 }
-class ft {
+class ct {
   plugins = [];
   editorContext = null;
   runtimeCtx = null;
@@ -251,12 +251,12 @@ class ft {
    */
   createSafeRuntimeContext(e, t) {
     const o = this, n = new Proxy(e.graph, {
-      get(i, r, a) {
-        const l = Reflect.get(i, r, a);
-        return r === "use" && typeof l == "function" ? function(...u) {
+      get(i, r, l) {
+        const a = Reflect.get(i, r, l);
+        return r === "use" && typeof a == "function" ? function(...d) {
           if (o.runtimeVersion === t)
-            return l.apply(i, u);
-        } : l;
+            return a.apply(i, d);
+        } : a;
       }
     });
     return { ...e, graph: n };
@@ -281,7 +281,7 @@ class ft {
             source: o.name
           }
         };
-      if (ut(i))
+      if (dt(i))
         return {
           rejected: !0,
           error: {
@@ -374,42 +374,42 @@ class ft {
         const n = o ?? e.commands;
         let i = t.flowModel.value;
         for (const r of n)
-          i = Se(i, r);
+          i = Me(i, r);
         return i;
       }
     };
   }
 }
 function ro(s) {
-  const { initialFlowModel: e, schema: t, plugins: o = [], historyOptions: n } = s, i = ct(e, n), r = B(s.mode ?? "edit"), a = B(!1), l = B(null), c = B([]), u = {}, d = new ft();
-  function w(m, p, P, g = "user:toolbar") {
+  const { schema: e, plugins: t = [], historyOptions: o } = s, n = { version: "1.0", ...s.initialFlowModel }, i = lt(n, o), r = z(s.mode ?? "edit"), l = z(!1), a = z(null), c = z([]), d = {}, g = new ct();
+  function p(y, m, R, h = "user:toolbar") {
     const v = {
       id: `history-${Date.now()}`,
-      source: g,
-      label: m,
+      source: h,
+      label: y,
       timestamp: Date.now(),
       commands: []
     };
-    d.afterCommand(v, p, P), c.value = d.collectToolbarItems(), s.onCommandResult?.({
+    g.afterCommand(v, m, R), c.value = g.collectToolbarItems(), s.onCommandResult?.({
       status: "applied",
       envelope: v,
-      flowModel: P
+      flowModel: R
     }), s.onFlowModelChange?.({
-      flowModel: P,
-      prevFlowModel: p,
+      flowModel: R,
+      prevFlowModel: m,
       envelope: v,
-      source: g
+      source: h
     });
   }
-  const f = {
+  const u = {
     execute: i.execute,
     undo() {
-      const m = i.currentFlowModel.value, p = i.undo();
-      return p && w("撤销", m, p), p;
+      const y = i.currentFlowModel.value, m = i.undo();
+      return m && p("撤销", y, m), m;
     },
     redo() {
-      const m = i.currentFlowModel.value, p = i.redo();
-      return p && w("重做", m, p), p;
+      const y = i.currentFlowModel.value, m = i.redo();
+      return m && p("重做", y, m), m;
     },
     get canUndo() {
       return i.canUndo;
@@ -425,82 +425,82 @@ function ro(s) {
     },
     clear: i.clear,
     createSnapshot: i.createSnapshot,
-    replaceFlowModel(m) {
-      const p = i.currentFlowModel.value;
-      i.replaceFlowModel(m), w("替换 FlowModel", p, m, "system:replace");
-    }
-  }, E = {
-    flowModel: z(() => i.currentFlowModel.value),
-    history: f,
-    schema: t,
+    replaceFlowModel(y) {
+      const m = i.currentFlowModel.value;
+      i.replaceFlowModel(y), p("替换 FlowModel", m, y, "system:replace");
+    }
+  }, N = {
+    flowModel: j(() => i.currentFlowModel.value),
+    history: u,
+    schema: e,
     mode: r,
     executeCommand: b,
-    replaceFlowModel(m) {
-      f.replaceFlowModel(m);
+    replaceFlowModel(y) {
+      u.replaceFlowModel(y);
     },
-    setMode(m) {
-      r.value = m;
+    setMode(y) {
+      r.value = y;
     },
-    selectionMode: a,
-    setSelectionMode(m) {
-      a.value = m;
+    selectionMode: l,
+    setSelectionMode(y) {
+      l.value = y;
     },
-    api: l,
+    api: a,
     toolbarItems: c,
-    extendedApi: u,
-    _pluginManager: d
+    extendedApi: d,
+    _pluginManager: g
   };
-  d.install(o, {
-    flowModel: E.flowModel,
-    history: f,
-    schema: t,
+  g.install(t, {
+    flowModel: N.flowModel,
+    history: u,
+    schema: e,
     mode: r,
     executeCommand: b
-  }), c.value = d.collectToolbarItems(), ze(() => {
-    d.dispose();
+  }), c.value = g.collectToolbarItems(), Le(() => {
+    g.dispose();
   });
-  function b(m) {
-    const p = d.transformCommand(m);
-    if ("rejected" in p) {
+  function b(y) {
+    const m = g.transformCommand(y);
+    if ("rejected" in m) {
       const v = {
         status: "rejected",
-        envelope: m,
-        error: p.error
+        envelope: y,
+        error: m.error
       };
       return s.onCommandResult?.(v), v;
     }
-    const P = p.envelope, g = i.currentFlowModel.value;
+    const R = m.envelope, h = i.currentFlowModel.value;
     try {
-      const v = i.execute(P), N = {
+      const v = i.execute(R), I = {
         status: "applied",
-        envelope: P,
+        envelope: R,
         flowModel: v
       };
-      return d.afterCommand(P, g, v), c.value = d.collectToolbarItems(), s.onCommandResult?.(N), s.onFlowModelChange?.({
+      return g.afterCommand(R, h, v), c.value = g.collectToolbarItems(), s.onCommandResult?.(I), s.onFlowModelChange?.({
         flowModel: v,
-        prevFlowModel: g,
-        envelope: P,
-        source: P.source
-      }), N;
+        prevFlowModel: h,
+        envelope: R,
+        source: R.source
+      }), I;
     } catch (v) {
       if (v instanceof K) {
-        const N = {
+        const I = {
           status: "invalid",
-          envelope: P,
+          envelope: R,
           error: {
             code: "constraint_violated",
             reason: v.message,
             source: "engine"
           }
         };
-        return s.onCommandResult?.(N), N;
+        return s.onCommandResult?.(I), I;
       }
       throw v;
     }
   }
-  return E;
+  return N;
 }
-class pt {
+class ut {
   graph;
   schema;
   shapeRegistry;
@@ -586,11 +586,11 @@ class pt {
     for (const [o, n] of Object.entries(e.nodes)) {
       const i = this.schema.nodeTypes[n.type];
       if (!i)
-        throw new Ye(
+        throw new Qe(
           `Unknown node type "${n.type}" for node "${o}". Registered types: [${Object.keys(this.schema.nodeTypes).join(", ")}]. Register the type in CanvasSchema.nodeTypes before using it in a FlowModel.`
         );
-      const r = this.shapeRegistry.registerNodeType(n.type, i.component), a = i.getSize(n), l = i.getPorts?.(n) ?? n.ports ?? [];
-      t.set(o, { model: n, definition: i, shapeName: r, size: a, ports: l });
+      const r = this.shapeRegistry.registerNodeType(n.type, i.component), l = i.getSize(n), a = i.getPorts?.(n) ?? n.ports ?? [];
+      t.set(o, { model: n, definition: i, shapeName: r, size: l, ports: a });
     }
     return t;
   }
@@ -615,10 +615,10 @@ class pt {
     }
   }
   updateExistingNode(e, t) {
-    const { model: o, size: n, ports: i, definition: r } = t, a = e.getPosition();
-    (a.x !== o.position.x || a.y !== o.position.y) && e.setPosition(o.position.x, o.position.y);
-    const l = e.getSize();
-    (l.width !== n.width || l.height !== n.height) && e.setSize(n.width, n.height, { silent: !0 }), this.syncNodePorts(e, i), e.setData({ ...o }, { silent: !0 }), this.applyNodeBehavior(e, o, r), this.applyNodeHighlightAndDecoration(e, o);
+    const { model: o, size: n, ports: i, definition: r } = t, l = e.getPosition();
+    (l.x !== o.position.x || l.y !== o.position.y) && e.setPosition(o.position.x, o.position.y);
+    const a = e.getSize();
+    (a.width !== n.width || a.height !== n.height) && e.setSize(n.width, n.height, { silent: !0 }), this.syncNodePorts(e, i), e.setData({ ...o }), this.applyNodeBehavior(e, o, r), this.applyNodeHighlightAndDecoration(e, o);
   }
   syncNodePorts(e, t) {
     const o = e.getPorts(), n = new Set(t.map((r) => r.id)), i = new Set(o.map((r) => r.id));
@@ -628,7 +628,7 @@ class pt {
       i.has(r.id) || e.addPort({ id: r.id, group: r.group, ...r.x6PortConfig });
   }
   addNewNode(e, t) {
-    const { model: o, shapeName: n, size: i, ports: r, definition: a } = t, l = {
+    const { model: o, shapeName: n, size: i, ports: r, definition: l } = t, a = {
       id: o.id,
       shape: n,
       x: o.position.x,
@@ -663,13 +663,13 @@ class pt {
             }
           }
         },
-        items: r.map((u) => ({ id: u.id, group: u.group, ...u.x6PortConfig }))
+        items: r.map((d) => ({ id: d.id, group: d.group, ...d.x6PortConfig }))
       },
-      ...a.x6CellConfig
+      ...l.x6CellConfig
     };
-    this.graph.addNode(l), this.knownNodeIds.add(e), this.saveNodeDefaultAttrs(e, a);
+    this.graph.addNode(a), this.knownNodeIds.add(e), this.saveNodeDefaultAttrs(e, l);
     const c = this.graph.getCellById(e);
-    c && (this.applyNodeBehavior(c, o, a), this.applyNodeHighlightAndDecoration(c, o));
+    c && (this.applyNodeBehavior(c, o, l), this.applyNodeHighlightAndDecoration(c, o));
   }
   /**
    * 将 schema 定义的 getBehavior 映射到 X6 节点属性。
@@ -686,14 +686,14 @@ class pt {
     if (!n) return;
     const i = o.getBehavior(t, n);
     if (i.draggable !== void 0 && e.setProp("draggable", i.draggable, { silent: !0 }), i.connectable !== void 0) {
-      const a = i.connectable;
-      for (const l of e.getPorts())
-        e.setPortProp(l.id, "attrs/circle/magnet", a, { silent: !0 });
+      const l = i.connectable;
+      for (const a of e.getPorts())
+        e.setPortProp(a.id, "attrs/circle/magnet", l, { silent: !0 });
     }
     if (i.showPorts !== void 0) {
-      const a = i.showPorts;
-      for (const l of e.getPorts())
-        e.setPortProp(l.id, "attrs/circle/style/visibility", a ? "visible" : "hidden", { silent: !0 });
+      const l = i.showPorts;
+      for (const a of e.getPorts())
+        e.setPortProp(a.id, "attrs/circle/style/visibility", l ? "visible" : "hidden", { silent: !0 });
     }
     const r = e.getData() ?? {};
     i.deletable !== void 0 && r._deletable !== i.deletable && e.setData({ ...r, _deletable: i.deletable }, { silent: !0 }), i.selectable !== void 0 && r._selectable !== i.selectable && e.setData({ ...e.getData(), _selectable: i.selectable }, { silent: !0 });
@@ -706,8 +706,8 @@ class pt {
         i && this.graph.removeCell(i), this.knownEdgeIds.delete(n), this.defaultHighlightedEdgeIds.delete(n), this.prevEdgeDecorationClasses.delete(n), this.prevEdgeDecorationColors.delete(n), this.prevEdgeStyleIds.delete(n), this.edgeDefaultAttrs.delete(n);
       }
     for (const [n, i] of e) {
-      const r = this.graph.getCellById(n), { model: a, definition: l } = i;
-      r ? (this.updateExistingEdge(r, a, l, t), this.knownEdgeIds.has(n) || (this.knownEdgeIds.add(n), this.saveEdgeDefaultAttrs(n, l))) : this.addNewEdge(n, a, l);
+      const r = this.graph.getCellById(n), { model: l, definition: a } = i;
+      r ? (this.updateExistingEdge(r, l, a, t), this.knownEdgeIds.has(n) || (this.knownEdgeIds.add(n), this.saveEdgeDefaultAttrs(n, a))) : this.addNewEdge(n, l, a);
     }
   }
   /**
@@ -718,12 +718,12 @@ class pt {
   updateExistingEdge(e, t, o, n) {
     const i = e.getSource(), r = e.getTarget();
     if ((i.cell !== t.source.nodeId || i.port !== t.source.portId) && e.setSource({ cell: t.source.nodeId, port: t.source.portId }), (r.cell !== t.target.nodeId || r.port !== t.target.portId) && e.setTarget({ cell: t.target.nodeId, port: t.target.portId }), o?.router) {
-      const a = typeof o.router == "string" ? { name: o.router } : o.router;
-      e.setRouter(a);
+      const l = typeof o.router == "string" ? { name: o.router } : o.router;
+      e.setRouter(l);
     }
     if (o?.connector) {
-      const a = typeof o.connector == "string" ? { name: o.connector } : o.connector;
-      e.setConnector(a);
+      const l = typeof o.connector == "string" ? { name: o.connector } : o.connector;
+      e.setConnector(l);
     }
     this.syncEdgeMarker(e, o, "sourceMarker"), this.syncEdgeMarker(e, o, "targetMarker"), this.syncEdgeLabels(e, t), e.setData({ ...t }, { silent: !0 }), this.applyEdgeStyleAndDecoration(e, t, o);
   }
@@ -793,8 +793,8 @@ class pt {
   applyNodeHighlightAndDecoration(e, t) {
     const o = this.highlightedNodeIds.has(e.id), n = this.resolveNodeDecoration?.(t), i = this.prevNodeDecorationClasses.get(e.id);
     i && (this.graph.findViewByCell(e)?.container?.classList.remove(i), this.prevNodeDecorationClasses.delete(e.id)), n?.className && (this.graph.findViewByCell(e)?.container?.classList.add(n.className), this.prevNodeDecorationClasses.set(e.id, n.className));
-    const r = n?.borderColor, l = r ?? (o ? "#3a84ff" : void 0), c = this.prevNodeDecorationColors.has(e.id) || this.defaultHighlightedNodeIds.has(e.id);
-    l ? (e.setAttrByPath("body/stroke", l), e.setAttrByPath("body/strokeWidth", 2)) : c && (this.restoreNodeAttr(e, "body/stroke", "stroke"), this.restoreNodeAttr(e, "body/strokeWidth", "strokeWidth")), r ? this.prevNodeDecorationColors.add(e.id) : this.prevNodeDecorationColors.delete(e.id), o && !r ? this.defaultHighlightedNodeIds.add(e.id) : this.defaultHighlightedNodeIds.delete(e.id);
+    const r = n?.borderColor, a = r ?? (o ? "#3a84ff" : void 0), c = this.prevNodeDecorationColors.has(e.id) || this.defaultHighlightedNodeIds.has(e.id);
+    a ? (e.setAttrByPath("body/stroke", a), e.setAttrByPath("body/strokeWidth", 2)) : c && (this.restoreNodeAttr(e, "body/stroke", "stroke"), this.restoreNodeAttr(e, "body/strokeWidth", "strokeWidth")), r ? this.prevNodeDecorationColors.add(e.id) : this.prevNodeDecorationColors.delete(e.id), o && !r ? this.defaultHighlightedNodeIds.add(e.id) : this.defaultHighlightedNodeIds.delete(e.id);
   }
   setHoveredEdge(e) {
     this.hoveredEdgeId = e;
@@ -819,22 +819,22 @@ class pt {
   applyEdgeStyleAndDecoration(e, t, o) {
     const n = this.highlightedEdgeIds.has(e.id), i = this.resolveEdgeDecoration?.(t), r = this.prevEdgeDecorationClasses.get(e.id);
     r && (this.graph.findViewByCell(e)?.container?.classList.remove(r), this.prevEdgeDecorationClasses.delete(e.id)), i?.className && (this.graph.findViewByCell(e)?.container?.classList.add(i.className), this.prevEdgeDecorationClasses.set(e.id, i.className));
-    let a, l, c;
+    let l, a, c;
     if (o?.style) {
-      const E = this.graph.isSelected?.(e) ?? !1, b = this.hoveredEdgeId === e.id, m = o.style(t, { selected: E, highlighted: n, hovered: b });
-      a = m.stroke, l = m.strokeWidth, c = m.strokeDasharray;
+      const N = this.graph.isSelected?.(e) ?? !1, b = this.hoveredEdgeId === e.id, y = o.style(t, { selected: N, highlighted: n, hovered: b });
+      l = y.stroke, a = y.strokeWidth, c = y.strokeDasharray;
     }
-    const u = !o?.style && n ? "#3a84ff" : void 0, d = i?.strokeColor, w = d ?? a ?? u, f = !!o?.style || this.prevEdgeDecorationColors.has(e.id) || this.defaultHighlightedEdgeIds.has(e.id) || this.prevEdgeStyleIds.has(e.id);
-    w ? e.setAttrByPath("line/stroke", w) : f && this.restoreEdgeAttr(e, "line/stroke", "stroke"), o?.style ? (this.prevEdgeStyleIds.add(e.id), l ? e.setAttrByPath("line/strokeWidth", l) : this.restoreEdgeAttr(e, "line/strokeWidth", "strokeWidth"), c ? e.setAttrByPath("line/strokeDasharray", c) : 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)), d ? this.prevEdgeDecorationColors.add(e.id) : this.prevEdgeDecorationColors.delete(e.id), u ? this.defaultHighlightedEdgeIds.add(e.id) : this.defaultHighlightedEdgeIds.delete(e.id);
+    const d = !o?.style && n ? "#3a84ff" : void 0, g = i?.strokeColor, p = g ?? l ?? d, u = !!o?.style || this.prevEdgeDecorationColors.has(e.id) || this.defaultHighlightedEdgeIds.has(e.id) || this.prevEdgeStyleIds.has(e.id);
+    p ? e.setAttrByPath("line/stroke", p) : u && this.restoreEdgeAttr(e, "line/stroke", "stroke"), o?.style ? (this.prevEdgeStyleIds.add(e.id), a ? e.setAttrByPath("line/strokeWidth", a) : this.restoreEdgeAttr(e, "line/strokeWidth", "strokeWidth"), c ? e.setAttrByPath("line/strokeDasharray", c) : 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)), g ? this.prevEdgeDecorationColors.add(e.id) : this.prevEdgeDecorationColors.delete(e.id), d ? this.defaultHighlightedEdgeIds.add(e.id) : this.defaultHighlightedEdgeIds.delete(e.id);
   }
 }
-let gt = 0;
-function L() {
+let ft = 0;
+function T() {
   const s = Date.now().toString(36), e = Math.random().toString(36).substring(2, 8);
-  return `${s}-${e}-${++gt}`;
+  return `${s}-${e}-${++ft}`;
 }
-class ht {
-  instanceId = L();
+class pt {
+  instanceId = T();
   registeredShapes = /* @__PURE__ */ new Map();
   getShapeName(e) {
     let t = this.registeredShapes.get(e);
@@ -842,7 +842,7 @@ class ht {
   }
   registerNodeType(e, t) {
     const o = this.getShapeName(e);
-    return Xe({
+    return We({
       shape: o,
       component: t,
       width: 100,
@@ -853,7 +853,7 @@ class ht {
     this.registeredShapes.clear();
   }
 }
-class vt {
+class gt {
   graph;
   onUiEvent;
   onCommand;
@@ -880,11 +880,11 @@ class vt {
     }), this.on("edge:click", ({ edge: e, e: t }) => {
       const n = t.target?.closest?.(".x6-edge-label");
       if (n) {
-        const r = e.getData?.()?.labels ?? [], a = n.parentElement?.querySelectorAll(".x6-edge-label"), l = a ? Array.from(a).indexOf(n) : 0, c = r[Math.max(0, l)];
+        const r = e.getData?.()?.labels ?? [], l = n.parentElement?.querySelectorAll(".x6-edge-label"), a = l ? Array.from(l).indexOf(n) : 0, c = r[Math.max(0, a)];
         this.onUiEvent({
           type: "edge.label.click",
           edgeId: e.id,
-          labelId: c?.id ?? `label-${l}`
+          labelId: c?.id ?? `label-${a}`
         });
         return;
       }
@@ -900,7 +900,7 @@ class vt {
     }), this.on("node:moved", ({ node: e }) => {
       const t = e.getPosition();
       this.onCommand({
-        id: L(),
+        id: T(),
         source: "user:drag",
         label: "移动节点",
         timestamp: Date.now(),
@@ -909,9 +909,9 @@ class vt {
     }), this.on("edge:connected", ({ edge: e, isNew: t }) => {
       const o = e.getSourceCell(), n = e.getTargetCell();
       if (!o || !n) return;
-      const i = e.getSourcePortId(), r = e.getTargetPortId(), a = e.id in this.flowModelRef.value.edges;
-      t && !a ? this.onCommand({
-        id: L(),
+      const i = e.getSourcePortId(), r = e.getTargetPortId(), l = e.id in this.flowModelRef.value.edges;
+      t && !l ? this.onCommand({
+        id: T(),
         source: "user:drag",
         label: "连线",
         timestamp: Date.now(),
@@ -926,7 +926,7 @@ class vt {
           }
         ]
       }) : this.onCommand({
-        id: L(),
+        id: T(),
         source: "user:drag",
         label: "重连",
         timestamp: Date.now(),
@@ -944,18 +944,18 @@ class vt {
       if (!n.length || !t?.length) return;
       const i = [];
       for (let r = 0; r < Math.min(n.length, t.length); r++) {
-        const a = t[r], l = n[r];
-        if (!l?.id) continue;
-        const c = typeof a.position == "object" ? a.position?.distance : a.position;
+        const l = t[r], a = n[r];
+        if (!a?.id) continue;
+        const c = typeof l.position == "object" ? l.position?.distance : l.position;
         c != null && i.push({
           type: "edge.label.update",
           edgeId: e.id,
-          labelId: l.id,
+          labelId: a.id,
           patch: { position: c }
         });
       }
       i.length && this.onCommand({
-        id: L(),
+        id: T(),
         source: "user:drag",
         label: "拖动标签",
         timestamp: Date.now(),
@@ -967,31 +967,19 @@ class vt {
     this.graph.on(e, t), this.disposers.push(() => this.graph.off(e, t));
   }
 }
-function yt(s, e) {
-  const t = B(null);
-  function o(i) {
-    const r = s.getCellById(i);
-    if (!r || !r.isNode()) return null;
-    const a = r, l = a.getPosition(), c = a.getSize(), u = { x: l.x, y: l.y, width: c.width, height: c.height }, d = s.localToGraph(u);
-    return new DOMRect(d.x, d.y, d.width, d.height);
-  }
-  function n(i, r) {
-    const a = s.getCellById(i);
-    if (!a || !a.isNode()) return null;
-    const l = a, c = l.getData() ?? {}, u = c.type, f = ((u ? e.nodeTypes[u] : void 0)?.getOverlayAnchors?.(c) ?? {})[r], E = f && typeof f == "object" && "x" in f ? f : void 0, b = l.getPosition(), m = b.x + (E?.x ?? 0), p = b.y + (E?.y ?? 0), P = s.localToGraph({ x: m, y: p });
-    return {
-      x: P.x,
-      y: P.y
-    };
+function ht(s) {
+  function e(t) {
+    const o = s.getCellById(t);
+    if (!o || !o.isNode()) return null;
+    const n = o, i = n.getPosition(), r = n.getSize(), l = { x: i.x, y: i.y, width: r.width, height: r.height }, a = s.localToGraph(l);
+    return new DOMRect(a.x, a.y, a.width, a.height);
   }
   return {
-    overlayContainer: t,
-    getNodeScreenRect: o,
-    getAnchorScreenPosition: n
+    getNodeScreenRect: e
   };
 }
-const mt = 100;
-function bt({
+const vt = 100;
+function yt({
   graph: s,
   overlayManager: e,
   executeCommand: t,
@@ -999,66 +987,66 @@ function bt({
   flowModel: n,
   defaultInsertGap: i,
   getContextMenuItems: r,
-  onHighlightChange: a,
-  resolveNodeShape: l
+  onHighlightChange: l,
+  resolveNodeShape: a
 }) {
-  let c = [], u = [], d = null, w = !1, f = null, E = !1;
+  let c = [], d = [], g = null, p = !1, u = null, N = !1;
   async function b() {
-    if (w) return d;
-    w = !0;
+    if (p) return g;
+    p = !0;
     try {
-      const g = await import("./index-BAAMFT_J.js"), v = g.Dnd ?? g.default;
-      return v ? (d = new v({
+      const h = await import("./index-BAAMFT_J.js"), v = h.Dnd ?? h.default;
+      return v ? (g = new v({
         target: s,
         scaled: !0,
         animation: !0,
-        getDragNode: (N) => N.clone(),
-        getDropNode: (N) => N.clone()
-      }), d) : null;
+        getDragNode: (I) => I.clone(),
+        getDropNode: (I) => I.clone()
+      }), g) : null;
     } catch {
       return console.warn("[flow-canvas] @antv/x6-plugin-dnd not available, add it to your dependencies"), null;
     }
   }
-  async function m() {
-    if (!E) {
-      E = !0;
+  async function y() {
+    if (!N) {
+      N = !0;
       try {
-        const g = await import("./index-siYsjzl4.js"), v = g.Export ?? g.default;
+        const h = await import("./index-siYsjzl4.js"), v = h.Export ?? h.default;
         v && s.use(new v());
       } catch {
         console.warn("[flow-canvas] @antv/x6-plugin-export not available, add it to your dependencies");
       }
     }
   }
-  const p = ({ node: g }) => {
-    const v = g.getData?.();
-    if (!v?._dndSessionId || v._dndSessionId !== f) return;
-    f = null;
-    const N = g.getPosition();
-    s.removeNode(g.id);
-    const { _dndSessionId: U, ...S } = v, I = S.id || L();
+  const m = ({ node: h }) => {
+    const v = h.getData?.();
+    if (!v?._dndSessionId || v._dndSessionId !== u) return;
+    u = null;
+    const I = h.getPosition();
+    s.removeNode(h.id);
+    const { _dndSessionId: L, ...D } = v, C = D.id || T();
     t({
-      id: L(),
+      id: T(),
       source: "user:drag",
       label: "拖入节点",
       timestamp: Date.now(),
       commands: [
         {
           type: "node.add",
-          node: { ...S, id: I, position: { x: N.x, y: N.y } }
+          node: { ...D, id: C, position: { x: I.x, y: I.y } }
         }
       ]
     });
   };
-  return s.on("node:added", p), {
+  return s.on("node:added", m), {
     zoomIn() {
       s.zoom(0.1);
     },
     zoomOut() {
       s.zoom(-0.1);
     },
-    zoomTo(g) {
-      s.zoomTo(g);
+    zoomTo(h) {
+      s.zoomTo(h);
     },
     zoomToFit() {
       s.zoomToFit({ padding: 40, maxScale: 1.5 });
@@ -1072,218 +1060,224 @@ function bt({
     scrollToOrigin() {
       s.translate(0, 0);
     },
-    scrollToNode(g) {
-      const v = s.getCellById(g);
+    scrollToNode(h) {
+      const v = s.getCellById(h);
       v && s.centerCell(v);
     },
     getSelection() {
-      const g = s.getSelectedCells?.() ?? [];
+      const h = s.getSelectedCells?.() ?? [];
       return {
-        nodeIds: g.filter((v) => v.isNode()).map((v) => v.id),
-        edgeIds: g.filter((v) => v.isEdge()).map((v) => v.id)
+        nodeIds: h.filter((v) => v.isNode()).map((v) => v.id),
+        edgeIds: h.filter((v) => v.isEdge()).map((v) => v.id)
       };
     },
-    selectNodes(g) {
-      const v = g.map((N) => s.getCellById(N)).filter(Boolean);
+    selectNodes(h) {
+      const v = h.map((I) => s.getCellById(I)).filter(Boolean);
       s.select?.(v);
     },
-    selectEdges(g) {
-      const v = g.map((N) => s.getCellById(N)).filter(Boolean);
+    selectEdges(h) {
+      const v = h.map((I) => s.getCellById(I)).filter(Boolean);
       s.select?.(v);
     },
     clearSelection() {
-      const g = s.getSelectedCells?.();
-      g?.length && s.unselect?.(g);
+      const h = s.getSelectedCells?.();
+      h?.length && s.unselect?.(h);
     },
-    registerDndSource(g, v) {
-      const N = async (U) => {
-        const S = await b();
-        if (!S) return;
-        const I = L();
-        f = I;
-        const j = v(), q = l?.(j.type), Y = s.createNode({
-          width: q?.width ?? 154,
-          height: q?.height ?? 54,
-          shape: q?.shapeName ?? "rect",
-          data: { ...j, _dndSessionId: I }
+    registerDndSource(h, v) {
+      const I = async (L) => {
+        const D = await b();
+        if (!D) return;
+        const C = T();
+        u = C;
+        const F = v(), Y = a?.(F.type), q = s.createNode({
+          width: Y?.width ?? 154,
+          height: Y?.height ?? 54,
+          shape: Y?.shapeName ?? "rect",
+          data: { ...F, _dndSessionId: C }
         });
-        S.start(Y, U);
+        D.start(q, L);
       };
-      return g.addEventListener("mousedown", N), () => {
-        g.removeEventListener("mousedown", N);
+      return h.addEventListener("mousedown", I), () => {
+        h.removeEventListener("mousedown", I);
       };
     },
     /**
      * 通过编程方式发起连线：直接命中真实 port 元素，
      * 复用 X6 原生的连线拖拽流程与 connecting.createEdge 配置。
      */
-    startConnection(g, v) {
-      const N = s.getCellById(g);
-      if (!N?.isNode()) return;
-      const U = N, S = s.findViewByCell(U);
-      if (!S) return;
-      const I = S.findPortElem(v, "circle") ?? S.findPortElem(v);
-      if (!I) return;
-      const q = (I.matches?.("[magnet]") ? I : I.querySelector?.("[magnet]")) ?? I, Y = q.getBoundingClientRect(), oe = Y.left + Y.width / 2, Z = Y.top + Y.height / 2, X = new MouseEvent("mousedown", {
-        clientX: oe,
-        clientY: Z,
+    startConnection(h, v) {
+      const I = s.getCellById(h);
+      if (!I?.isNode()) return;
+      const L = I, D = s.findViewByCell(L);
+      if (!D) return;
+      const C = D.findPortElem(v, "circle") ?? D.findPortElem(v);
+      if (!C) return;
+      const Y = (C.matches?.("[magnet]") ? C : C.querySelector?.("[magnet]")) ?? C, q = Y.getBoundingClientRect(), Q = q.left + q.width / 2, X = q.top + q.height / 2, G = new MouseEvent("mousedown", {
+        clientX: Q,
+        clientY: X,
         button: 0,
         buttons: 1,
         bubbles: !0,
         cancelable: !0
       });
-      q.dispatchEvent(X);
+      Y.dispatchEvent(G);
     },
-    async exportAsImage(g) {
-      await m();
+    async exportAsImage(h) {
+      await y();
       const v = s;
-      return typeof v.toPNG != "function" ? (console.warn("[flow-canvas] exportAsImage requires @antv/x6-plugin-export, add it to your dependencies"), new Blob()) : new Promise((N) => {
+      return typeof v.toPNG != "function" ? (console.warn("[flow-canvas] exportAsImage requires @antv/x6-plugin-export, add it to your dependencies"), new Blob()) : new Promise((I) => {
         v.toPNG(
-          (U) => {
-            fetch(U).then((S) => S.blob()).then(N).catch(() => N(new Blob()));
+          (L) => {
+            fetch(L).then((D) => D.blob()).then(I).catch(() => I(new Blob()));
           },
           {
-            backgroundColor: g?.backgroundColor ?? "#ffffff",
-            padding: g?.padding ?? 20,
-            quality: g?.quality,
+            backgroundColor: h?.backgroundColor ?? "#ffffff",
+            padding: h?.padding ?? 20,
+            quality: h?.quality,
             copyStyles: !0
           }
         );
       });
     },
     async exportAsSVG() {
-      await m();
-      const g = s;
-      return typeof g.toSVG != "function" ? (console.warn("[flow-canvas] exportAsSVG requires @antv/x6-plugin-export, add it to your dependencies"), "") : new Promise((v) => {
-        g.toSVG((N) => v(N));
+      await y();
+      const h = s;
+      return typeof h.toSVG != "function" ? (console.warn("[flow-canvas] exportAsSVG requires @antv/x6-plugin-export, add it to your dependencies"), "") : new Promise((v) => {
+        h.toSVG((I) => v(I));
       });
     },
-    highlightNodes(g) {
-      c = g, a?.(c, u);
+    highlightNodes(h) {
+      c = h, l?.(c, d);
     },
-    highlightEdges(g) {
-      u = g, a?.(c, u);
+    highlightEdges(h) {
+      d = h, l?.(c, d);
     },
     clearHighlight() {
-      c = [], u = [], a?.([], []);
+      c = [], d = [], l?.([], []);
     },
     overlay: e,
-    getContextMenuItems(g) {
-      return r?.(g) ?? [];
+    getContextMenuItems(h) {
+      return r?.(h) ?? [];
     },
-    insertNodeToRight(g, v, N) {
-      const U = n.value, S = U.nodes[g];
-      if (!S)
+    insertNodeToRight(h, v, I) {
+      const L = n.value, D = L.nodes[h];
+      if (!D)
         return {
           status: "invalid",
           envelope: { id: "", source: "user:toolbar", timestamp: Date.now(), commands: [] },
-          error: { code: "constraint_violated", reason: `Source node "${g}" not found`, source: "api" }
+          error: { code: "constraint_violated", reason: `Source node "${h}" not found`, source: "api" }
         };
-      const I = N?.gap ?? i ?? mt, j = o.nodeTypes[S.type], q = o.nodeTypes[v.type], Y = j?.getSize(S) ?? { width: 154, height: 54 }, oe = q?.getSize({ ...v, position: { x: 0, y: 0 } }) ?? {
+      const C = I?.gap ?? i ?? vt, F = o.nodeTypes[D.type], Y = o.nodeTypes[v.type], q = F?.getSize(D) ?? { width: 154, height: 54 }, Q = Y?.getSize({ ...v, position: { x: 0, y: 0 } }) ?? {
         width: 154,
         height: 54
-      }, Z = {
-        x: S.position.x + Y.width + I,
-        y: S.position.y + (Y.height - oe.height) / 2
-      }, X = v.id || L(), ee = { ...v, id: X, position: Z }, V = [{ type: "node.add", node: ee }], pe = oe.width + I, ne = { x: Z.x, y: Z.y, width: oe.width, height: oe.height };
-      for (const [J, G] of Object.entries(U.nodes)) {
-        if (J === g || J === X) continue;
-        const te = o.nodeTypes[G.type]?.getSize(G) ?? { width: 154, height: 54 }, H = ne.x < G.position.x + te.width && ne.x + ne.width > G.position.x, Ie = ne.y < G.position.y + te.height && ne.y + ne.height > G.position.y;
-        H && Ie && V.push({
+      }, X = {
+        x: D.position.x + q.width + C,
+        y: D.position.y + (q.height - Q.height) / 2
+      }, G = v.id || T(), se = { ...v, id: G, position: X }, ee = [{ type: "node.add", node: se }], ke = Q.width + C, te = { x: X.x, y: X.y, width: Q.width, height: Q.height };
+      for (const [Z, V] of Object.entries(L.nodes)) {
+        if (Z === h || Z === G) continue;
+        const oe = o.nodeTypes[V.type]?.getSize(V) ?? { width: 154, height: 54 }, U = te.x < V.position.x + oe.width && te.x + te.width > V.position.x, x = te.y < V.position.y + oe.height && te.y + te.height > V.position.y;
+        U && x && ee.push({
           type: "node.move",
-          nodeId: J,
-          position: { x: G.position.x + pe, y: G.position.y }
+          nodeId: Z,
+          position: { x: V.position.x + ke, y: V.position.y }
         });
       }
-      if (N?.autoWireEdges) {
-        const J = S.ports?.find((H) => H.group === "right"), G = ee.ports?.find((H) => H.group === "left"), ye = ee.ports?.find((H) => H.group === "right"), te = J ? Object.values(U.edges).find(
-          (H) => H.source.nodeId === g && H.source.portId === J.id
-        ) : Object.values(U.edges).find((H) => H.source.nodeId === g);
-        if (te) {
-          const H = te.target;
-          V.push({ type: "edge.remove", edgeId: te.id }), V.push({
+      if (I?.autoWireEdges) {
+        const Z = D.ports?.find((U) => U.group === "right"), V = se.ports?.find((U) => U.group === "left"), ue = se.ports?.find((U) => U.group === "right"), oe = Z ? Object.values(L.edges).find(
+          (U) => U.source.nodeId === h && U.source.portId === Z.id
+        ) : Object.values(L.edges).find((U) => U.source.nodeId === h);
+        if (oe) {
+          const U = oe.target;
+          ee.push({ type: "edge.remove", edgeId: oe.id }), ee.push({
             type: "edge.add",
             edge: {
-              id: L(),
-              source: { nodeId: g, portId: J?.id },
-              target: { nodeId: X, portId: G?.id }
+              id: T(),
+              source: { nodeId: h, portId: Z?.id },
+              target: { nodeId: G, portId: V?.id }
             }
-          }), V.push({
+          }), ee.push({
             type: "edge.add",
             edge: {
-              id: L(),
-              source: { nodeId: X, portId: ye?.id },
-              target: H
+              id: T(),
+              source: { nodeId: G, portId: ue?.id },
+              target: U
             }
           });
         } else
-          V.push({
+          ee.push({
             type: "edge.add",
             edge: {
-              id: L(),
-              source: { nodeId: g, portId: J?.id },
-              target: { nodeId: X, portId: G?.id }
+              id: T(),
+              source: { nodeId: h, portId: Z?.id },
+              target: { nodeId: G, portId: V?.id }
             }
           });
       }
-      const Ee = {
-        id: L(),
-        source: N?.source ?? "user:toolbar",
-        label: N?.label ?? "插入节点",
+      const he = {
+        id: T(),
+        source: I?.source ?? "user:toolbar",
+        label: I?.label ?? "插入节点",
         timestamp: Date.now(),
-        commands: V
+        commands: ee
       };
-      return t(Ee);
+      return t(he);
     },
-    onGraphEvent(g, v) {
-      return s.on(g, v), () => s.off(g, v);
+    onGraphEvent(h, v) {
+      return s.on(h, v), () => s.off(h, v);
     },
     unsafeGetGraph() {
       return s;
     }
   };
 }
-function wt() {
-  const s = B(null), e = B(!1);
-  let t = null;
-  function o(a) {
-    t && (clearTimeout(t), t = null), s.value = a;
-  }
-  function n() {
-    t = setTimeout(() => {
+function mt() {
+  const s = z(null), e = z(!1);
+  let t = null, o = !1;
+  function n(d) {
+    t && (clearTimeout(t), t = null), s.value = d;
+  }
+  function i(d = 100) {
+    o || (t && clearTimeout(t), t = setTimeout(() => {
       s.value = null, t = null;
-    }, 100);
+    }, d));
   }
-  function i() {
+  function r() {
+    o = !0, t && (clearTimeout(t), t = null);
+  }
+  function l(d = 100) {
+    o = !1, i(d);
+  }
+  function a() {
     t && (clearTimeout(t), t = null);
   }
-  function r() {
+  function c() {
     t && clearTimeout(t);
   }
-  return { hoveredNodeId: s, isDraggingNode: e, enter: o, leave: n, cancelLeave: i, cleanup: r };
+  return { hoveredNodeId: s, isDraggingNode: e, enter: n, leave: i, enterOverlay: r, leaveOverlay: l, cancelLeave: a, cleanup: c };
 }
-const Pe = 10;
-function Te(s, e) {
+const _e = 10;
+function Pe(s, e) {
   const t = s.getTotalLength();
   if (t === 0) return { ...e, length: 0, totalLength: 0 };
   let o = s.getPointAtLength(0), n = 1 / 0;
   const i = 50, r = t / i;
-  let a = 0;
-  for (let d = 0; d <= i; d++) {
-    const w = d * r, f = s.getPointAtLength(w), E = (f.x - e.x) ** 2 + (f.y - e.y) ** 2;
-    E < n && (n = E, o = f, a = w);
+  let l = 0;
+  for (let g = 0; g <= i; g++) {
+    const p = g * r, u = s.getPointAtLength(p), N = (u.x - e.x) ** 2 + (u.y - e.y) ** 2;
+    N < n && (n = N, o = u, l = p);
   }
-  const l = Math.max(0, a - r), c = Math.min(t, a + r), u = (c - l) / 20;
-  for (let d = l; d <= c; d += u) {
-    const w = s.getPointAtLength(d), f = (w.x - e.x) ** 2 + (w.y - e.y) ** 2;
-    f < n && (n = f, o = w, a = d);
+  const a = Math.max(0, l - r), c = Math.min(t, l + r), d = (c - a) / 20;
+  for (let g = a; g <= c; g += d) {
+    const p = s.getPointAtLength(g), u = (p.x - e.x) ** 2 + (p.y - e.y) ** 2;
+    u < n && (n = u, o = p, l = g);
   }
-  return { x: o.x, y: o.y, length: a, totalLength: t };
+  return { x: o.x, y: o.y, length: l, totalLength: t };
 }
-function Re(s, e) {
-  return s < Pe || s > e - Pe;
+function Ae(s, e) {
+  return s < _e || s > e - _e;
 }
-function $e() {
+function Te() {
   const s = "http://www.w3.org/2000/svg", e = document.createElementNS(s, "g");
   e.setAttribute("class", "flow-canvas-edge-delete-tool"), e.style.cursor = "pointer";
   const t = document.createElementNS(s, "rect");
@@ -1291,73 +1285,73 @@ function $e() {
   const o = document.createElementNS(s, "text");
   return o.setAttribute("font-family", "flow-canvas"), o.setAttribute("font-size", "16"), o.setAttribute("fill", "#ffffff"), o.setAttribute("text-anchor", "middle"), o.setAttribute("dominant-baseline", "central"), o.textContent = "", e.appendChild(o), e;
 }
-function xt(s) {
+function bt(s) {
   let e = null, t = null;
-  function o(a, l) {
-    i(), t = a;
-    const c = s.getCellById(a);
+  function o(l, a) {
+    i(), t = l;
+    const c = s.getCellById(l);
     if (!c?.isEdge()) return;
-    const u = s.findViewByCell(c);
-    if (!u) return;
-    const d = u.container.querySelector("path");
+    const d = s.findViewByCell(c);
     if (!d) return;
-    const w = s.clientToLocal(l.clientX, l.clientY), f = Te(d, w);
-    if (Re(f.length, f.totalLength)) return;
-    const E = $e();
-    E.setAttribute("transform", `translate(${f.x}, ${f.y})`), u.container.appendChild(E), e = E;
-  }
-  function n(a) {
+    const g = d.container.querySelector("path");
+    if (!g) return;
+    const p = s.clientToLocal(a.clientX, a.clientY), u = Pe(g, p);
+    if (Ae(u.length, u.totalLength)) return;
+    const N = Te();
+    N.setAttribute("transform", `translate(${u.x}, ${u.y})`), d.container.appendChild(N), e = N;
+  }
+  function n(l) {
     if (!t) return;
-    const l = s.getCellById(t);
-    if (!l?.isEdge()) return;
-    const c = s.findViewByCell(l);
+    const a = s.getCellById(t);
+    if (!a?.isEdge()) return;
+    const c = s.findViewByCell(a);
     if (!c) return;
-    const u = c.container.querySelector("path");
-    if (!u) return;
-    const d = s.clientToLocal(a.clientX, a.clientY), w = Te(u, d);
-    if (Re(w.length, w.totalLength))
+    const d = c.container.querySelector("path");
+    if (!d) return;
+    const g = s.clientToLocal(l.clientX, l.clientY), p = Pe(d, g);
+    if (Ae(p.length, p.totalLength))
       e && e.setAttribute("display", "none");
     else if (e)
-      e.removeAttribute("display"), e.setAttribute("transform", `translate(${w.x}, ${w.y})`);
+      e.removeAttribute("display"), e.setAttribute("transform", `translate(${p.x}, ${p.y})`);
     else {
-      const f = $e();
-      f.setAttribute("transform", `translate(${w.x}, ${w.y})`), c.container.appendChild(f), e = f;
+      const u = Te();
+      u.setAttribute("transform", `translate(${p.x}, ${p.y})`), c.container.appendChild(u), e = u;
     }
   }
   function i() {
     e && (e.remove(), e = null), t = null;
   }
-  function r(a) {
-    a === t && (e = null, t = null);
+  function r(l) {
+    l === t && (e = null, t = null);
   }
   return { show: o, move: n, remove: i, handleEdgeRemoved: r };
 }
-function kt(s) {
+function wt(s) {
   let e = null, t = 0;
-  function o(u) {
-    const d = u ? "visible" : "hidden";
-    for (const w of s.getNodes())
-      for (const f of w.getPorts())
-        w.setPortProp(f.id, "attrs/circle/visibility", d);
+  function o(d) {
+    const g = d ? "visible" : "hidden";
+    for (const p of s.getNodes())
+      for (const u of p.getPorts())
+        p.setPortProp(u.id, "attrs/circle/visibility", g);
   }
-  function n(u) {
+  function n(d) {
     if (!e)
-      for (const d of u.getPorts())
-        u.setPortProp(d.id, "attrs/circle/visibility", "visible");
+      for (const g of d.getPorts())
+        d.setPortProp(g.id, "attrs/circle/visibility", "visible");
   }
-  function i(u) {
+  function i(d) {
     if (!e)
-      for (const d of u.getPorts())
-        u.setPortProp(d.id, "attrs/circle/visibility", "hidden");
+      for (const g of d.getPorts())
+        d.setPortProp(g.id, "attrs/circle/visibility", "hidden");
   }
-  function r(u) {
-    u.getTargetCell() || (e = u.id, o(!0));
+  function r(d) {
+    d.getTargetCell() || (e = d.id, o(!0));
   }
-  function a() {
+  function l() {
     e = null, o(!1), t = Date.now() + 300;
   }
-  function l(u) {
-    u === e && (e = null, o(!1));
+  function a(d) {
+    d === e && (e = null, o(!1));
   }
   function c() {
     return !e && Date.now() >= t;
@@ -1366,22 +1360,30 @@ function kt(s) {
     showNodePorts: n,
     hideNodePorts: i,
     handleEdgeAdded: r,
-    handleEdgeConnected: a,
-    handleEdgeRemoved: l,
+    handleEdgeConnected: l,
+    handleEdgeRemoved: a,
     canShowEdgeTool: c
   };
 }
-const Ct = { class: "flow-canvas-node-actions__bar" }, Et = /* @__PURE__ */ ie({
+const xt = { class: "flow-canvas-node-actions__bar" }, kt = /* @__PURE__ */ re({
   __name: "node-actions-toolbar",
   props: {
     node: {},
     position: {},
     config: {},
-    behavior: {}
+    behavior: {},
+    actionsOffset: {}
   },
   emits: ["action"],
   setup(s, { emit: e }) {
-    const t = s, o = e, n = z(() => ({
+    const t = s, o = j(() => {
+      const g = t.actionsOffset?.x ?? 0, p = t.actionsOffset?.y ?? 0, u = g !== 0 || p !== 0;
+      return {
+        left: `${t.position.x}px`,
+        top: `${t.position.y}px`,
+        transform: u ? `translate(${g}px, ${p}px)` : "translateX(-100%)"
+      };
+    }), n = e, i = j(() => ({
       debug: {
         visible: t.config.showDebug && t.behavior.debuggable !== !1,
         disabled: t.behavior.debugDisabled === !0
@@ -1402,89 +1404,89 @@ const Ct = { class: "flow-canvas-node-actions__bar" }, Et = /* @__PURE__ */ ie({
         visible: t.config.showDisconnect && t.behavior.disconnectable !== !1,
         disabled: t.behavior.disconnectDisabled === !0
       }
-    })), i = z(() => n.value.copy.visible || n.value.copyInsert.visible || n.value.disconnect.visible), r = B(!1);
+    })), r = j(() => i.value.copy.visible || i.value.copyInsert.visible || i.value.disconnect.visible), l = z(!1);
     let a = null;
-    function l() {
-      a && (clearTimeout(a), a = null), r.value = !0;
-    }
     function c() {
+      a && (clearTimeout(a), a = null), l.value = !0;
+    }
+    function d() {
       a = setTimeout(() => {
-        r.value = !1, a = null;
+        l.value = !1, a = null;
       }, 100);
     }
-    return Ne(() => {
+    return Se(() => {
       a && clearTimeout(a);
-    }), (u, d) => (C(), M("div", {
+    }), (g, p) => (k(), S("div", {
       class: "flow-canvas-node-actions",
-      style: we({ left: `${s.position.x}px`, top: `${s.position.y}px` })
+      style: me(o.value)
     }, [
-      $("div", Ct, [
-        n.value.debug.visible ? (C(), M("i", {
+      A("div", xt, [
+        i.value.debug.visible ? (k(), S("i", {
           key: 0,
-          class: Q(["flow-canvas-icon canvas-debug flow-canvas-node-actions__icon", { "is-disabled": n.value.debug.disabled }]),
-          onClick: d[0] || (d[0] = (w) => !n.value.debug.disabled && o("action", "debug", s.node.id))
-        }, null, 2)) : O("", !0),
-        n.value.delete.visible ? (C(), M("i", {
+          class: W(["flow-canvas-icon canvas-debug flow-canvas-node-actions__icon", { "is-disabled": i.value.debug.disabled }]),
+          onClick: p[0] || (p[0] = (u) => !i.value.debug.disabled && n("action", "debug", s.node.id))
+        }, null, 2)) : H("", !0),
+        i.value.delete.visible ? (k(), S("i", {
           key: 1,
-          class: Q(["flow-canvas-icon canvas-shanchu flow-canvas-node-actions__icon", { "is-disabled": n.value.delete.disabled }]),
-          onClick: d[1] || (d[1] = (w) => !n.value.delete.disabled && o("action", "delete", s.node.id))
-        }, null, 2)) : O("", !0),
-        i.value ? (C(), M("div", {
+          class: W(["flow-canvas-icon canvas-shanchu flow-canvas-node-actions__icon", { "is-disabled": i.value.delete.disabled }]),
+          onClick: p[1] || (p[1] = (u) => !i.value.delete.disabled && n("action", "delete", s.node.id))
+        }, null, 2)) : H("", !0),
+        r.value ? (k(), S("div", {
           key: 2,
           class: "flow-canvas-node-actions__more-wrapper",
-          onMouseenter: l,
-          onMouseleave: c
-        }, [...d[5] || (d[5] = [
-          $("i", { class: "flow-canvas-icon canvas-gengduo flow-canvas-node-actions__icon" }, null, -1)
-        ])], 32)) : O("", !0)
+          onMouseenter: c,
+          onMouseleave: d
+        }, [...p[5] || (p[5] = [
+          A("i", { class: "flow-canvas-icon canvas-gengduo flow-canvas-node-actions__icon" }, null, -1)
+        ])], 32)) : H("", !0)
       ]),
-      Oe(je, { name: "flow-canvas-fade" }, {
-        default: De(() => [
-          r.value && i.value ? (C(), M("div", {
+      Be(ze, { name: "flow-canvas-fade" }, {
+        default: Ne(() => [
+          l.value && r.value ? (k(), S("div", {
             key: 0,
             class: "flow-canvas-node-actions__dropdown",
-            onMouseenter: l,
-            onMouseleave: c
+            onMouseenter: c,
+            onMouseleave: d
           }, [
-            n.value.copy.visible ? (C(), M("div", {
+            i.value.copy.visible ? (k(), S("div", {
               key: 0,
-              class: Q(["flow-canvas-node-actions__dropdown-item", { "is-disabled": n.value.copy.disabled }]),
-              onClick: d[2] || (d[2] = (w) => !n.value.copy.disabled && o("action", "copy", s.node.id))
-            }, [...d[6] || (d[6] = [
-              $("i", { class: "flow-canvas-icon canvas-copy-fuzhi-2" }, null, -1),
-              $("span", null, "复制", -1)
-            ])], 2)) : O("", !0),
-            n.value.copyInsert.visible ? (C(), M("div", {
+              class: W(["flow-canvas-node-actions__dropdown-item", { "is-disabled": i.value.copy.disabled }]),
+              onClick: p[2] || (p[2] = (u) => !i.value.copy.disabled && n("action", "copy", s.node.id))
+            }, [...p[6] || (p[6] = [
+              A("i", { class: "flow-canvas-icon canvas-copy-fuzhi-2" }, null, -1),
+              A("span", null, "复制", -1)
+            ])], 2)) : H("", !0),
+            i.value.copyInsert.visible ? (k(), S("div", {
               key: 1,
-              class: Q(["flow-canvas-node-actions__dropdown-item", { "is-disabled": n.value.copyInsert.disabled }]),
-              onClick: d[3] || (d[3] = (w) => !n.value.copyInsert.disabled && o("action", "copy-insert", s.node.id))
-            }, [...d[7] || (d[7] = [
-              $("i", { class: "flow-canvas-icon canvas-fuzhibingcharu" }, null, -1),
-              $("span", null, "复制并插入", -1)
-            ])], 2)) : O("", !0),
-            n.value.disconnect.visible ? (C(), M("div", {
+              class: W(["flow-canvas-node-actions__dropdown-item", { "is-disabled": i.value.copyInsert.disabled }]),
+              onClick: p[3] || (p[3] = (u) => !i.value.copyInsert.disabled && n("action", "copy-insert", s.node.id))
+            }, [...p[7] || (p[7] = [
+              A("i", { class: "flow-canvas-icon canvas-fuzhibingcharu" }, null, -1),
+              A("span", null, "复制并插入", -1)
+            ])], 2)) : H("", !0),
+            i.value.disconnect.visible ? (k(), S("div", {
               key: 2,
-              class: Q(["flow-canvas-node-actions__dropdown-item", { "is-disabled": n.value.disconnect.disabled }]),
-              onClick: d[4] || (d[4] = (w) => !n.value.disconnect.disabled && o("action", "disconnect", s.node.id))
-            }, [...d[8] || (d[8] = [
-              $("i", { class: "flow-canvas-icon canvas-unlock-jiebang" }, null, -1),
-              $("span", null, "断开连线", -1)
-            ])], 2)) : O("", !0)
-          ], 32)) : O("", !0)
+              class: W(["flow-canvas-node-actions__dropdown-item", { "is-disabled": i.value.disconnect.disabled }]),
+              onClick: p[4] || (p[4] = (u) => !i.value.disconnect.disabled && n("action", "disconnect", s.node.id))
+            }, [...p[8] || (p[8] = [
+              A("i", { class: "flow-canvas-icon canvas-unlock-jiebang" }, null, -1),
+              A("span", null, "断开连线", -1)
+            ])], 2)) : H("", !0)
+          ], 32)) : H("", !0)
         ]),
         _: 1
       })
     ], 4));
   }
-}), re = (s, e) => {
+}), ae = (s, e) => {
   const t = s.__vccOpts || s;
   for (const [o, n] of e)
     t[o] = n;
   return t;
-}, It = /* @__PURE__ */ re(Et, [["__scopeId", "data-v-14d6590b"]]), Mt = {
+}, Ct = /* @__PURE__ */ ae(kt, [["__scopeId", "data-v-3b39dab5"]]), Et = {
   key: 0,
   class: "flow-canvas-quick-add__tooltip"
-}, St = 5, Nt = /* @__PURE__ */ ie({
+}, It = 5, Mt = /* @__PURE__ */ re({
   __name: "node-quick-add-popover",
   props: {
     node: {},
@@ -1493,98 +1495,98 @@ const Ct = { class: "flow-canvas-node-actions__bar" }, Et = /* @__PURE__ */ ie({
   },
   emits: ["open", "close", "start-drag", "mouseenter", "mouseleave"],
   setup(s, { expose: e, emit: t }) {
-    const o = s, n = t, i = B(), r = B(), a = B(!1), l = B(!1);
-    let c = null, u = !1, d = null;
-    function w(S) {
-      S.preventDefault(), S.stopPropagation(), c = { x: S.clientX, y: S.clientY }, u = !1, document.addEventListener("mousemove", f), document.addEventListener("mouseup", E);
+    const o = s, n = t, i = z(), r = z(), l = z(!1), a = z(!1);
+    let c = null, d = !1, g = null;
+    function p(D) {
+      D.preventDefault(), D.stopPropagation(), c = { x: D.clientX, y: D.clientY }, d = !1, document.addEventListener("mousemove", u), document.addEventListener("mouseup", N);
     }
-    function f(S) {
+    function u(D) {
       if (!c) return;
-      const I = S.clientX - c.x, j = S.clientY - c.y;
-      Math.sqrt(I * I + j * j) >= St && (u = !0, b(), n("start-drag", o.node.id));
+      const C = D.clientX - c.x, F = D.clientY - c.y;
+      Math.sqrt(C * C + F * F) >= It && (d = !0, b(), n("start-drag", o.node.id));
     }
-    function E() {
-      b(), u || m(), c = null, u = !1;
+    function N() {
+      b(), d || y(), c = null, d = !1;
     }
     function b() {
-      document.removeEventListener("mousemove", f), document.removeEventListener("mouseup", E);
+      document.removeEventListener("mousemove", u), document.removeEventListener("mouseup", N);
     }
-    function m() {
-      l.value ? P() : p();
+    function y() {
+      a.value ? R() : m();
     }
-    function p() {
-      l.value = !0, n("open", o.node.id), requestAnimationFrame(() => {
-        document.addEventListener("mousedown", g);
+    function m() {
+      a.value = !0, n("open", o.node.id), requestAnimationFrame(() => {
+        document.addEventListener("mousedown", h);
       });
     }
-    function P() {
-      l.value = !1, n("close"), document.removeEventListener("mousedown", g);
+    function R() {
+      a.value = !1, n("close"), document.removeEventListener("mousedown", h);
     }
-    function g(S) {
-      const I = S.target;
-      i.value?.contains(I) || r.value?.contains(I) || P();
+    function h(D) {
+      const C = D.target;
+      i.value?.contains(C) || r.value?.contains(C) || R();
     }
     function v() {
-      l.value || n("mouseleave");
+      a.value || n("mouseleave");
     }
-    function N() {
-      d && (clearTimeout(d), d = null), n("mouseenter");
+    function I() {
+      g && (clearTimeout(g), g = null), n("mouseenter");
     }
-    function U() {
-      d = setTimeout(() => {
-        P(), n("mouseleave"), d = null;
+    function L() {
+      g = setTimeout(() => {
+        R(), n("mouseleave"), g = null;
       }, 150);
     }
-    return Ne(() => {
-      b(), d && clearTimeout(d), document.removeEventListener("mousedown", g);
-    }), e({ closePopover: P }), (S, I) => (C(), M("div", {
+    return Se(() => {
+      b(), g && clearTimeout(g), document.removeEventListener("mousedown", h);
+    }), e({ closePopover: R }), (D, C) => (k(), S("div", {
       class: "flow-canvas-quick-add",
-      style: we({ left: `${s.portPosition.x}px`, top: `${s.portPosition.y}px` }),
-      onMouseenter: I[2] || (I[2] = (j) => n("mouseenter")),
+      style: me({ left: `${s.portPosition.x}px`, top: `${s.portPosition.y}px` }),
+      onMouseenter: C[2] || (C[2] = (F) => n("mouseenter")),
       onMouseleave: v,
-      onClick: I[3] || (I[3] = qe(() => {
+      onClick: C[3] || (C[3] = He(() => {
       }, ["stop"]))
     }, [
-      $("div", {
+      A("div", {
         ref_key: "btnRef",
         ref: i,
-        class: Q(["flow-canvas-quick-add__btn", { "is-hovered": a.value, "is-active": l.value }]),
-        onMouseenter: I[0] || (I[0] = (j) => a.value = !0),
-        onMouseleave: I[1] || (I[1] = (j) => a.value = !1),
-        onMousedown: w
-      }, [...I[4] || (I[4] = [
-        $("i", { class: "flow-canvas-icon canvas-zoom-add" }, null, -1)
+        class: W(["flow-canvas-quick-add__btn", { "is-hovered": l.value, "is-active": a.value }]),
+        onMouseenter: C[0] || (C[0] = (F) => l.value = !0),
+        onMouseleave: C[1] || (C[1] = (F) => l.value = !1),
+        onMousedown: p
+      }, [...C[4] || (C[4] = [
+        A("i", { class: "flow-canvas-icon canvas-zoom-add" }, null, -1)
       ])], 34),
-      a.value && !l.value ? (C(), M("div", Mt, [...I[5] || (I[5] = [
-        $("div", null, [
-          $("b", null, "点击"),
-          Ae(" 添加节点")
+      l.value && !a.value ? (k(), S("div", Et, [...C[5] || (C[5] = [
+        A("div", null, [
+          A("b", null, "点击"),
+          De(" 添加节点")
         ], -1),
-        $("div", null, [
-          $("b", null, "拖拽"),
-          Ae(" 连接节点")
+        A("div", null, [
+          A("b", null, "拖拽"),
+          De(" 连接节点")
         ], -1)
-      ])])) : O("", !0),
-      Oe(je, { name: "flow-canvas-fade" }, {
-        default: De(() => [
-          l.value ? (C(), M("div", {
+      ])])) : H("", !0),
+      Be(ze, { name: "flow-canvas-fade" }, {
+        default: Ne(() => [
+          a.value ? (k(), S("div", {
             key: 0,
             ref_key: "popoverRef",
             ref: r,
             class: "flow-canvas-quick-add__popover",
-            onMouseenter: N,
-            onMouseleave: U
+            onMouseenter: I,
+            onMouseleave: L
           }, [
-            ce(S.$slots, "default", {}, () => [
-              I[6] || (I[6] = $("div", { class: "flow-canvas-quick-add__default-content" }, "节点快捷操作面板", -1))
+            fe(D.$slots, "default", {}, () => [
+              C[6] || (C[6] = A("div", { class: "flow-canvas-quick-add__default-content" }, "节点快捷操作面板", -1))
             ], !0)
-          ], 544)) : O("", !0)
+          ], 544)) : H("", !0)
         ]),
         _: 3
       })
     ], 36));
   }
-}), Dt = /* @__PURE__ */ re(Nt, [["__scopeId", "data-v-deb5af25"]]), _t = /* @__PURE__ */ ie({
+}), St = /* @__PURE__ */ ae(Mt, [["__scopeId", "data-v-deb5af25"]]), Nt = { class: "flow-canvas-runtime-core__overlay" }, Dt = /* @__PURE__ */ re({
   __name: "canvas-runtime-core",
   props: {
     editor: {},
@@ -1594,60 +1596,46 @@ const Ct = { class: "flow-canvas-node-actions__bar" }, Et = /* @__PURE__ */ ie({
   },
   emits: ["ui-event"],
   setup(s, { emit: e }) {
-    const t = s, o = e, n = B(), i = B(), r = B();
-    let a, l, c, u;
-    const d = wt(), { hoveredNodeId: w, isDraggingNode: f } = d, E = d.cancelLeave, b = d.leave, m = B(null);
-    let p = null;
-    function P(x) {
-      return v(), te(x) ? (m.value = x, !0) : (m.value = null, !1);
-    }
-    function g() {
-      p && clearTimeout(p), p = setTimeout(() => {
-        m.value = null, p = null;
+    const t = s, o = e, n = z(), i = z();
+    let r, l, a, c;
+    const d = mt(), { hoveredNodeId: g, isDraggingNode: p } = d, u = d.enterOverlay, N = () => d.leaveOverlay(), b = z(null);
+    let y = null;
+    function m(x) {
+      return h(), V(x) ? (b.value = x, !0) : (b.value = null, !1);
+    }
+    function R() {
+      y && clearTimeout(y), y = setTimeout(() => {
+        b.value = null, y = null;
       }, 150);
     }
-    function v() {
-      p && (clearTimeout(p), p = null);
+    function h() {
+      y && (clearTimeout(y), y = null);
     }
-    function N() {
-      v(), d.cancelLeave();
+    function v() {
+      h(), d.enterOverlay();
     }
-    function U() {
-      g(), d.leave();
+    function I() {
+      R(), d.leaveOverlay();
     }
-    let S = null, I = null, j = null;
-    const q = B(0), Y = z(
+    let L = null, D = null, C = null;
+    const F = z(0), Y = j(
       () => {
-        if (q.value, !t.editor.api.value) return [];
-        const x = t.editor.flowModel.value, k = t.editor.api.value.overlay, y = [];
-        for (const [D, T] of Object.entries(x.nodes)) {
-          const A = t.editor._pluginManager.collectNodeDecorations(T);
-          if (!A?.badge) continue;
-          const R = k.getNodeScreenRect(D);
-          R && y.push({
-            nodeId: D,
-            x: R.x + R.width - 4,
-            y: R.y - 8,
-            badge: A.badge
+        if (F.value, !t.editor.api.value) return [];
+        const x = t.editor.flowModel.value, E = t.editor.api.value.overlay, w = [];
+        for (const [_, B] of Object.entries(x.nodes)) {
+          const P = t.editor._pluginManager.collectNodeDecorations(B);
+          if (!P?.badge) continue;
+          const O = E.getNodeScreenRect(_);
+          O && w.push({
+            nodeId: _,
+            x: O.x + O.width - 4,
+            y: O.y - 8,
+            badge: P.badge
           });
         }
-        return y;
+        return w;
       }
-    ), oe = z(() => {
-      q.value;
-      const x = w.value;
-      if (!x || !t.editor.api.value) return [];
-      const y = t.editor.flowModel.value.nodes[x];
-      if (!y) return [];
-      const D = t.editor.schema.nodeTypes[y.type];
-      if (!D?.getOverlayAnchors) return [];
-      const T = D.getOverlayAnchors(y), A = t.editor.api.value.overlay, R = {};
-      for (const W of Object.keys(T)) {
-        const ae = A.getAnchorScreenPosition(x, W);
-        ae && (R[W] = ae);
-      }
-      return [{ node: y, screenAnchors: R }];
-    }), Z = z(() => ({
+    ), q = j(() => ({
       showDebug: !1,
       showDelete: !0,
       showCopy: !0,
@@ -1655,75 +1643,75 @@ const Ct = { class: "flow-canvas-node-actions__bar" }, Et = /* @__PURE__ */ ie({
       showDisconnect: !0,
       insertGap: 100,
       ...t.nodeActions
-    })), X = z(() => {
-      q.value;
-      const x = w.value;
-      if (!x || f.value || !t.editor.api.value || t.editor.mode.value !== "edit") return null;
-      const k = t.editor.flowModel.value, y = k.nodes[x];
-      if (!y) return null;
-      const D = t.editor.api.value.overlay.getNodeScreenRect(x);
-      if (!D) return null;
-      const A = t.editor.schema.nodeTypes[y.type]?.getBehavior?.(y, {
+    })), Q = j(() => {
+      F.value;
+      const x = g.value;
+      if (!x || p.value || !t.editor.api.value || t.editor.mode.value !== "edit") return null;
+      const E = t.editor.flowModel.value, w = E.nodes[x];
+      if (!w) return null;
+      const _ = t.editor.api.value.overlay.getNodeScreenRect(x);
+      if (!_) return null;
+      const P = t.editor.schema.nodeTypes[w.type]?.getBehavior?.(w, {
         api: t.editor.api.value,
-        flowModel: k,
+        flowModel: E,
         history: t.editor.history,
         mode: t.editor.mode.value
       }) ?? {};
-      return A.showActions === !1 ? null : {
-        node: y,
-        position: { x: D.x + D.width, y: D.y + D.height + 4 },
-        behavior: A
+      return P.showActions === !1 ? null : {
+        node: w,
+        position: { x: _.x + _.width, y: _.y + _.height + 4 },
+        behavior: P
       };
-    }), ee = z(() => ({
+    }), X = j(() => ({
       enabled: !0,
       tooltipText: "",
       ...t.quickAdd
-    })), V = z(() => {
-      if (q.value, !ee.value.enabled) return null;
-      const x = m.value;
-      if (!x || f.value || !t.editor.api.value || t.editor.mode.value !== "edit") return null;
-      const k = t.editor.flowModel.value, y = k.nodes[x];
-      if (!y) return null;
-      const T = t.editor.schema.nodeTypes[y.type]?.getBehavior?.(y, {
+    })), G = j(() => {
+      if (F.value, !X.value.enabled) return null;
+      const x = b.value;
+      if (!x || p.value || !t.editor.api.value || t.editor.mode.value !== "edit") return null;
+      const E = t.editor.flowModel.value, w = E.nodes[x];
+      if (!w) return null;
+      const B = t.editor.schema.nodeTypes[w.type]?.getBehavior?.(w, {
         api: t.editor.api.value,
-        flowModel: k,
+        flowModel: E,
         history: t.editor.history,
         mode: t.editor.mode.value
       }) ?? {};
-      if (T.quickAddEnabled === !1) return null;
-      const A = t.editor.api.value.overlay.getNodeScreenRect(x);
-      return A ? {
-        node: y,
-        portPosition: { x: A.x + A.width, y: A.y + A.height / 2 },
-        behavior: T
+      if (B.quickAddEnabled === !1) return null;
+      const P = t.editor.api.value.overlay.getNodeScreenRect(x);
+      return P ? {
+        node: w,
+        portPosition: { x: P.x + P.width, y: P.y + P.height / 2 },
+        behavior: B
       } : null;
-    }), pe = B();
-    function ne(x) {
-      const k = V.value;
-      k && o("ui-event", {
+    }), se = z();
+    function ee(x) {
+      const E = G.value;
+      E && o("ui-event", {
         type: "node.quick-add",
         nodeId: x,
-        position: k.portPosition
+        position: E.portPosition
       });
     }
-    function Ee(x) {
-      const k = t.editor.api.value;
-      k && k.startConnection(x, "right");
+    function ke(x) {
+      const E = t.editor.api.value;
+      E && E.startConnection(x, "right");
     }
-    function J(x, k) {
-      const y = t.editor.api.value;
-      if (!y) return;
-      const D = k.id || L(), T = { ...k, id: D };
-      y.insertNodeToRight(x, T, {
+    function te(x, E) {
+      const w = t.editor.api.value;
+      if (!w) return;
+      const _ = E.id || T(), B = { ...E, id: _ };
+      w.insertNodeToRight(x, B, {
         autoWireEdges: !0,
-        gap: Z.value.insertGap,
+        gap: q.value.insertGap,
         source: "user:quick-add",
         label: "快捷插入节点"
-      }).status === "applied" && o("ui-event", { type: "node.action.quick-insert", sourceNodeId: x, newNodeId: D }), pe.value?.closePopover();
+      }).status === "applied" && o("ui-event", { type: "node.action.quick-insert", sourceNodeId: x, newNodeId: _ }), se.value?.closePopover();
     }
-    function G(x) {
+    function he(x) {
       return {
-        id: L(),
+        id: T(),
         type: x.type,
         label: x.label,
         ports: x.ports ? JSON.parse(JSON.stringify(x.ports)) : void 0,
@@ -1731,79 +1719,79 @@ const Ct = { class: "flow-canvas-node-actions__bar" }, Et = /* @__PURE__ */ ie({
         extensions: x.extensions ? JSON.parse(JSON.stringify(x.extensions)) : void 0
       };
     }
-    function ye(x, k) {
-      const y = t.editor, D = y.api.value;
+    function Z(x, E) {
+      const w = t.editor, _ = w.api.value;
       switch (x) {
         case "delete": {
-          y.executeCommand({
-            id: L(),
+          w.executeCommand({
+            id: T(),
             source: "user:toolbar",
             label: "删除节点",
             timestamp: Date.now(),
-            commands: [{ type: "node.remove", nodeId: k }]
-          }), o("ui-event", { type: "node.action.delete", nodeId: k }), w.value = null;
+            commands: [{ type: "node.remove", nodeId: E }]
+          }), o("ui-event", { type: "node.action.delete", nodeId: E }), g.value = null;
           break;
         }
         case "copy": {
-          if (!D) break;
-          const T = y.flowModel.value.nodes[k];
-          if (!T) break;
-          const A = G(T);
-          D.insertNodeToRight(k, A, {
+          if (!_) break;
+          const B = w.flowModel.value.nodes[E];
+          if (!B) break;
+          const P = he(B);
+          _.insertNodeToRight(E, P, {
             autoWireEdges: !1,
-            gap: Z.value.insertGap,
+            gap: q.value.insertGap,
             label: "复制节点"
-          }), o("ui-event", { type: "node.action.copy", sourceNodeId: k, newNodeId: A.id });
+          }), o("ui-event", { type: "node.action.copy", sourceNodeId: E, newNodeId: P.id });
           break;
         }
         case "copy-insert": {
-          if (!D) break;
-          const T = y.flowModel.value.nodes[k];
-          if (!T) break;
-          const A = G(T);
-          D.insertNodeToRight(k, A, {
+          if (!_) break;
+          const B = w.flowModel.value.nodes[E];
+          if (!B) break;
+          const P = he(B);
+          _.insertNodeToRight(E, P, {
             autoWireEdges: !0,
-            gap: Z.value.insertGap,
+            gap: q.value.insertGap,
             label: "复制并插入节点"
-          }), o("ui-event", { type: "node.action.copy-insert", sourceNodeId: k, newNodeId: A.id });
+          }), o("ui-event", { type: "node.action.copy-insert", sourceNodeId: E, newNodeId: P.id });
           break;
         }
         case "disconnect": {
-          const T = y.flowModel.value, A = Object.entries(T.edges).filter(([, R]) => {
-            const W = R;
-            return W.source.nodeId === k || W.target.nodeId === k;
-          }).map(([R]) => R);
-          if (A.length === 0) break;
-          y.executeCommand({
-            id: L(),
+          const B = w.flowModel.value, P = Object.entries(B.edges).filter(([, O]) => {
+            const J = O;
+            return J.source.nodeId === E || J.target.nodeId === E;
+          }).map(([O]) => O);
+          if (P.length === 0) break;
+          w.executeCommand({
+            id: T(),
             source: "user:toolbar",
             label: "断开连线",
             timestamp: Date.now(),
-            commands: A.map((R) => ({ type: "edge.remove", edgeId: R }))
-          }), o("ui-event", { type: "node.action.disconnect", nodeId: k, edgeIds: A });
+            commands: P.map((O) => ({ type: "edge.remove", edgeId: O }))
+          }), o("ui-event", { type: "node.action.disconnect", nodeId: E, edgeIds: P });
           break;
         }
         case "debug": {
-          o("ui-event", { type: "node.action.debug", nodeId: k });
+          o("ui-event", { type: "node.action.debug", nodeId: E });
           break;
         }
       }
     }
-    function te(x) {
-      if (!ee.value.enabled || t.editor.mode.value !== "edit") return !1;
-      const k = t.editor.flowModel.value, y = k.nodes[x];
-      return y ? (t.editor.schema.nodeTypes[y.type]?.getBehavior?.(y, {
+    function V(x) {
+      if (!X.value.enabled || t.editor.mode.value !== "edit") return !1;
+      const E = t.editor.flowModel.value, w = E.nodes[x];
+      return w ? (t.editor.schema.nodeTypes[w.type]?.getBehavior?.(w, {
         api: t.editor.api.value,
-        flowModel: k,
+        flowModel: E,
         history: t.editor.history,
         mode: t.editor.mode.value
       }) ?? {}).quickAddEnabled !== !1 : !1;
     }
-    function H(x) {
+    function ue(x) {
       if (t.editor.mode.value !== "edit") return;
       t.editor._pluginManager.dispatchKeyboardShortcut(x) && (x.preventDefault(), x.stopPropagation());
     }
-    function Ie() {
+    function oe() {
       return {
         refX: 0,
         children: [
@@ -1824,8 +1812,8 @@ const Ct = { class: "flow-canvas-node-actions__bar" }, Et = /* @__PURE__ */ ie({
         ]
       };
     }
-    function He(x) {
-      const k = t.editor.schema.defaultEdgeType ?? "default", y = t.editor.schema.edgeTypes?.[k], D = {
+    function U(x) {
+      const E = t.editor.schema.defaultEdgeType ?? "default", w = t.editor.schema.edgeTypes?.[E], _ = {
         zIndex: -1,
         attrs: {
           line: {
@@ -1835,34 +1823,39 @@ const Ct = { class: "flow-canvas-node-actions__bar" }, Et = /* @__PURE__ */ ie({
           }
         }
       };
-      y?.router && (D.router = typeof y.router == "string" ? { name: y.router } : y.router), y?.connector && (D.connector = typeof y.connector == "string" ? { name: y.connector } : y.connector), y?.x6EdgeConfig && Object.assign(D, y.x6EdgeConfig);
-      const T = D.attrs ?? {}, A = T.line ?? {};
-      return D.attrs = {
-        ...T,
+      w?.router && (_.router = typeof w.router == "string" ? { name: w.router } : w.router), w?.connector && (_.connector = typeof w.connector == "string" ? { name: w.connector } : w.connector), w?.x6EdgeConfig && Object.assign(_, w.x6EdgeConfig);
+      const B = _.attrs ?? {}, P = B.line ?? {};
+      return _.attrs = {
+        ...B,
         line: {
-          ...A,
-          targetMarker: Ie()
+          ...P,
+          targetMarker: oe()
         }
-      }, x.createEdge(D);
+      }, x.createEdge(_);
     }
-    return Ge(() => {
+    return Fe(() => {
       if (!i.value) return;
-      const x = /* @__PURE__ */ new Set(["model", "container"]), k = {};
+      const x = /* @__PURE__ */ new Set(["model", "container"]), E = {};
       if (t.graphOptions)
-        for (const [h, _] of Object.entries(t.graphOptions)) {
-          if (x.has(h)) {
-            console.warn(`[flow-canvas] graphOptions.${h} is managed by the engine and will be ignored`);
+        for (const [f, M] of Object.entries(t.graphOptions)) {
+          if (x.has(f)) {
+            console.warn(`[flow-canvas] graphOptions.${f} is managed by the engine and will be ignored`);
             continue;
           }
-          k[h] = _;
+          E[f] = M;
         }
-      a = new Qe({
+      r = new Ve({
         container: i.value,
         autoResize: !0,
         background: { color: "#edf2fc" },
         grid: { visible: !0, size: 20, type: "dot" },
         panning: { enabled: !0 },
         mousewheel: { enabled: !0, modifiers: ["ctrl", "meta"] },
+        interacting: {
+          nodeMovable(f) {
+            return f.cell.getProp("draggable") !== !1;
+          }
+        },
         connecting: {
           allowBlank: !1,
           allowMulti: !0,
@@ -1874,16 +1867,16 @@ const Ct = { class: "flow-canvas-node-actions__bar" }, Et = /* @__PURE__ */ ie({
           connectionPoint: "anchor",
           snap: { radius: 30 },
           createEdge() {
-            return He(this);
+            return U(this);
           }
         },
-        ...k
-      }), c = new ht(), l = new pt(
-        a,
+        ...E
+      }), a = new pt(), l = new ut(
+        r,
         t.editor.schema,
-        c,
-        (h) => t.editor._pluginManager.collectNodeDecorations(h),
-        (h) => t.editor._pluginManager.collectEdgeDecorations(h),
+        a,
+        (f) => t.editor._pluginManager.collectNodeDecorations(f),
+        (f) => t.editor._pluginManager.collectEdgeDecorations(f),
         () => t.editor.api.value ? {
           api: t.editor.api.value,
           flowModel: t.editor.flowModel.value,
@@ -1891,266 +1884,261 @@ const Ct = { class: "flow-canvas-node-actions__bar" }, Et = /* @__PURE__ */ ie({
           mode: t.editor.mode.value
         } : null
       );
-      const y = yt(a, t.editor.schema);
-      r.value && (y.overlayContainer.value = r.value);
-      const D = bt({
-        graph: a,
-        overlayManager: y,
-        executeCommand: (h) => t.editor.executeCommand(h),
+      const w = ht(r), _ = yt({
+        graph: r,
+        overlayManager: w,
+        executeCommand: (f) => t.editor.executeCommand(f),
         schema: t.editor.schema,
         flowModel: t.editor.flowModel,
         defaultInsertGap: t.nodeActions?.insertGap,
-        getContextMenuItems: (h) => t.editor._pluginManager.collectContextMenuItems(h),
-        onHighlightChange: (h, _) => {
-          l.setHighlightedNodes(h), l.setHighlightedEdges(_), l.refreshNodeHighlights(), l.refreshEdgeStyles();
+        getContextMenuItems: (f) => t.editor._pluginManager.collectContextMenuItems(f),
+        onHighlightChange: (f, M) => {
+          l.setHighlightedNodes(f), l.setHighlightedEdges(M), l.refreshNodeHighlights(), l.refreshEdgeStyles();
         },
-        resolveNodeShape: (h) => {
-          const _ = t.editor.schema.nodeTypes[h];
-          if (!_) return null;
-          const F = c.registerNodeType(h, _.component), me = _.getSize({ id: "", type: h, position: { x: 0, y: 0 } });
-          return { shapeName: F, width: me.width, height: me.height };
+        resolveNodeShape: (f) => {
+          const M = t.editor.schema.nodeTypes[f];
+          if (!M) return null;
+          const $ = a.registerNodeType(f, M.component), ne = M.getSize({ id: "", type: f, position: { x: 0, y: 0 } });
+          return { shapeName: $, width: ne.width, height: ne.height };
         }
       });
-      t.editor.api.value = D;
-      const T = {
+      t.editor.api.value = _;
+      const B = {
         flowModel: t.editor.flowModel,
         history: t.editor.history,
         schema: t.editor.schema,
         mode: t.editor.mode,
         executeCommand: t.editor.executeCommand,
-        api: D,
-        overlay: y,
-        graph: a
+        api: _,
+        overlay: w,
+        graph: r
       };
-      t.editor._pluginManager.attachRuntime(T);
-      const A = t.editor._pluginManager.collectExtendedApi();
-      Object.assign(t.editor.extendedApi, A), u = new vt(
-        a,
-        (h) => {
-          (h.type === "node.click" || h.type === "node.dblclick" || h.type === "node.contextmenu") && d.enter(h.nodeId), t.editor._pluginManager.dispatchUiEvent(h), o("ui-event", h);
+      t.editor._pluginManager.attachRuntime(B);
+      const P = t.editor._pluginManager.collectExtendedApi();
+      Object.assign(t.editor.extendedApi, P), c = new gt(
+        r,
+        (f) => {
+          (f.type === "node.click" || f.type === "node.dblclick" || f.type === "node.contextmenu") && d.enter(f.nodeId), t.editor._pluginManager.dispatchUiEvent(f), o("ui-event", f);
         },
-        (h) => {
-          l.isSyncing || t.editor.executeCommand(h);
+        (f) => {
+          if (l.isSyncing) return;
+          if (t.editor.executeCommand(f).status !== "applied") {
+            for (const $ of f.commands)
+              if ($.type === "edge.add") {
+                const ne = r.getCellById($.edge.id);
+                ne && r.removeCell(ne);
+              }
+          }
         },
         t.editor.flowModel
-      ), S = xt(a);
-      const R = kt(a), W = a, ae = (h) => {
-        const _ = W.isRubberbandEnabled?.() ?? !1;
-        _ && W.disableRubberband?.(), h ? a.enablePanning() : a.disablePanning(), _ && W.enableRubberband?.();
-      }, Me = () => {
-        q.value++;
+      ), L = bt(r);
+      const O = wt(r), J = r, Ce = (f) => {
+        const M = J.isRubberbandEnabled?.() ?? !1;
+        M && J.disableRubberband?.(), f ? r.enablePanning() : r.disablePanning(), M && J.enableRubberband?.();
+      }, Ee = () => {
+        F.value++;
       };
-      a.on("translate", Me), a.on("scale", Me), a.on("resize", Me), a.on("node:move", () => {
-        f.value = !0;
-      }), a.on("node:moved", () => {
-        f.value = !1;
-      }), a.on("node:mouseenter", ({ node: h }) => {
-        d.enter(h.id), ee.value.enabled && P(h.id) || R.showNodePorts(h);
-      }), a.on("node:mouseleave", ({ node: h }) => {
-        d.leave(), ee.value.enabled && m.value === h.id ? g() : R.hideNodePorts(h);
+      r.on("translate", Ee), r.on("scale", Ee), r.on("resize", Ee), r.on("node:move", () => {
+        p.value = !0;
+      }), r.on("node:moved", () => {
+        p.value = !1;
+      }), r.on("node:mouseenter", ({ node: f }) => {
+        d.enter(f.id), X.value.enabled && m(f.id) || O.showNodePorts(f);
+      }), r.on("node:mouseleave", ({ node: f }) => {
+        const M = t.editor.flowModel.value.nodes[f.id];
+        let $ = 100;
+        M && t.editor.api.value && t.editor.schema.nodeTypes[M.type]?.getBehavior?.(M, {
+          api: t.editor.api.value,
+          flowModel: t.editor.flowModel.value,
+          history: t.editor.history,
+          mode: t.editor.mode.value
+        })?.actionsOffset && ($ = 300), d.leave($), X.value.enabled && b.value === f.id ? R() : O.hideNodePorts(f);
       });
-      function Fe(h) {
-        const _ = a.getCellById(h);
-        if (!_?.isNode()) return;
-        const F = _, me = !f.value && te(h);
-        for (const _e of F.getPorts()) {
-          const Ue = me && _e.group === "right" ? "hidden" : "visible";
-          F.setPortProp(_e.id, "attrs/circle/visibility", Ue);
+      function Oe(f) {
+        const M = r.getCellById(f);
+        if (!M?.isNode()) return;
+        const $ = M, ne = !p.value && V(f);
+        for (const Ie of $.getPorts()) {
+          const je = ne && Ie.group === "right" ? "hidden" : "visible";
+          $.setPortProp(Ie.id, "attrs/circle/visibility", je);
         }
       }
-      de(
-        [m, f],
-        ([h], [_]) => {
-          if (_ && _ !== h) {
-            const F = a.getCellById(_);
-            F?.isNode() && R.hideNodePorts(F);
+      le(
+        [b, p],
+        ([f], [M]) => {
+          if (M && M !== f) {
+            const $ = r.getCellById(M);
+            $?.isNode() && O.hideNodePorts($);
           }
-          h && Fe(h);
+          f && Oe(f);
         },
         { flush: "sync" }
-      ), a.on("edge:added", ({ edge: h }) => {
-        R.handleEdgeAdded(h);
-      }), a.on("edge:connected", () => {
-        R.handleEdgeConnected();
-      }), a.on("edge:removed", ({ edge: h }) => {
-        R.handleEdgeRemoved(h.id), S.handleEdgeRemoved(h.id);
-      }), a.on("selection:changed", () => {
-        const h = a.getSelectedCells?.() ?? [], _ = {
-          nodeIds: h.filter((F) => F.isNode()).map((F) => F.id),
-          edgeIds: h.filter((F) => F.isEdge()).map((F) => F.id)
+      ), r.on("edge:added", ({ edge: f }) => {
+        O.handleEdgeAdded(f);
+      }), r.on("edge:connected", () => {
+        O.handleEdgeConnected();
+      }), r.on("edge:removed", ({ edge: f }) => {
+        O.handleEdgeRemoved(f.id), L.handleEdgeRemoved(f.id);
+      }), r.on("selection:changed", () => {
+        const f = r.getSelectedCells?.() ?? [], M = {
+          nodeIds: f.filter(($) => $.isNode()).map(($) => $.id),
+          edgeIds: f.filter(($) => $.isEdge()).map(($) => $.id)
         };
-        t.editor._pluginManager.dispatchSelectionChange(_), o("ui-event", {
+        t.editor._pluginManager.dispatchSelectionChange(M), o("ui-event", {
           type: "selection.change",
-          nodeIds: _.nodeIds,
-          edgeIds: _.edgeIds
+          nodeIds: M.nodeIds,
+          edgeIds: M.edgeIds
         }), l.refreshEdgeStyles();
-      }), a.on("edge:mouseenter", ({ edge: h, e: _ }) => {
-        l.setHoveredEdge(h.id), l.refreshEdgeStyles(), t.editor.mode.value === "edit" && R.canShowEdgeTool() && S.show(h.id, _);
-      }), I = (h) => S.move(h), a.container.addEventListener("mousemove", I), a.on("edge:mouseleave", () => {
-        l.setHoveredEdge(null), l.refreshEdgeStyles(), S.remove();
-      }), a.on("edge:click", ({ edge: h, e: _ }) => {
-        _.target?.closest?.(".flow-canvas-edge-delete-tool") && t.editor.mode.value === "edit" && (S.remove(), t.editor.executeCommand({
-          id: L(),
+      }), r.on("edge:mouseenter", ({ edge: f, e: M }) => {
+        l.setHoveredEdge(f.id), l.refreshEdgeStyles(), t.editor.mode.value === "edit" && O.canShowEdgeTool() && L.show(f.id, M);
+      }), D = (f) => L.move(f), r.container.addEventListener("mousemove", D), r.on("edge:mouseleave", () => {
+        l.setHoveredEdge(null), l.refreshEdgeStyles(), L.remove();
+      }), r.on("edge:click", ({ edge: f, e: M }) => {
+        M.target?.closest?.(".flow-canvas-edge-delete-tool") && t.editor.mode.value === "edit" && (L.remove(), t.editor.executeCommand({
+          id: T(),
           source: "user:toolbar",
           label: "删除连线",
           timestamp: Date.now(),
-          commands: [{ type: "edge.remove", edgeId: h.id }]
+          commands: [{ type: "edge.remove", edgeId: f.id }]
         }));
-      }), n.value?.addEventListener("keydown", H), l.syncFlowModel(t.editor.flowModel.value), de(
+      }), n.value?.addEventListener("keydown", ue), l.syncFlowModel(t.editor.flowModel.value), le(
         () => t.editor.flowModel.value,
-        (h) => l.syncFlowModel(h)
-      ), de(
+        (f) => l.syncFlowModel(f)
+      ), le(
         () => t.editor.selectionMode.value,
-        (h) => {
-          if (j?.(), j = null, h) {
-            ae(!1), W.enableRubberband?.();
-            const _ = () => {
-              a.container.removeEventListener("mouseup", _), j = null, setTimeout(() => {
+        (f) => {
+          if (C?.(), C = null, f) {
+            Ce(!1), J.enableRubberband?.();
+            const M = () => {
+              r.container.removeEventListener("mouseup", M), C = null, setTimeout(() => {
                 t.editor.selectionMode.value && t.editor.setSelectionMode(!1);
               }, 50);
             };
-            a.container.addEventListener("mouseup", _), j = () => a.container.removeEventListener("mouseup", _);
+            r.container.addEventListener("mouseup", M), C = () => r.container.removeEventListener("mouseup", M);
           } else
-            W.disableRubberband?.(), ae(!0);
+            J.disableRubberband?.(), Ce(!0);
         }
-      ), de(
+      ), le(
         () => t.editor.mode.value,
-        (h) => {
-          const _ = h === "edit";
-          ae(!0), _ ? W.enableSelection?.() : W.disableSelection?.();
+        (f) => {
+          const M = f === "edit";
+          Ce(!0), M ? J.enableSelection?.() : J.disableSelection?.();
         }
       );
-    }), Ne(() => {
-      d.cleanup(), p && clearTimeout(p), S?.remove(), j?.(), I && a?.container?.removeEventListener("mousemove", I), n.value?.removeEventListener("keydown", H), t.editor._pluginManager.detachRuntime(), t.editor.api.value = null;
+    }), Se(() => {
+      d.cleanup(), y && clearTimeout(y), L?.remove(), C?.(), D && r?.container?.removeEventListener("mousemove", D), n.value?.removeEventListener("keydown", ue), t.editor._pluginManager.detachRuntime(), t.editor.api.value = null;
       for (const x of Object.keys(t.editor.extendedApi))
         delete t.editor.extendedApi[x];
-      u?.dispose(), l?.dispose(), c?.dispose(), a?.dispose();
-    }), (x, k) => (C(), M("div", {
+      c?.dispose(), l?.dispose(), a?.dispose(), r?.dispose();
+    }), (x, E) => (k(), S("div", {
       ref_key: "rootRef",
       ref: n,
       class: "flow-canvas-runtime-core",
       tabindex: "0"
     }, [
-      $("div", {
+      A("div", {
         ref_key: "containerRef",
         ref: i,
         class: "flow-canvas-runtime-core__graph"
       }, null, 512),
-      $("div", {
-        ref_key: "overlayContainerRef",
-        ref: r,
-        class: "flow-canvas-runtime-core__overlay"
-      }, [
-        (C(!0), M(se, null, ge(Y.value, (y) => (C(), M("div", {
-          key: `badge-${y.nodeId}`,
+      A("div", Nt, [
+        (k(!0), S(ie, null, ye(Y.value, (w) => (k(), S("div", {
+          key: `badge-${w.nodeId}`,
           class: "flow-canvas-runtime-core__badge",
-          style: we({ left: `${y.x}px`, top: `${y.y}px`, backgroundColor: y.badge.color })
-        }, ue(y.badge.text), 5))), 128)),
-        V.value ? (C(), be(Dt, {
+          style: me({ left: `${w.x}px`, top: `${w.y}px`, backgroundColor: w.badge.color })
+        }, de(w.badge.text), 5))), 128)),
+        G.value ? (k(), ve(St, {
           key: 0,
           ref_key: "quickAddPopoverRef",
-          ref: pe,
-          node: V.value.node,
-          "port-position": V.value.portPosition,
-          "tooltip-text": ee.value.tooltipText,
-          onOpen: ne,
-          onStartDrag: Ee,
-          onMouseenter: N,
-          onMouseleave: U
+          ref: se,
+          node: G.value.node,
+          "port-position": G.value.portPosition,
+          "tooltip-text": X.value.tooltipText,
+          onOpen: ee,
+          onStartDrag: ke,
+          onMouseenter: v,
+          onMouseleave: I
         }, {
-          default: De(() => [
-            ce(x.$slots, "quick-add-panel", {
-              node: V.value.node,
+          default: Ne(() => [
+            fe(x.$slots, "quick-add-panel", {
+              node: G.value.node,
               api: s.editor.api.value,
-              insertNodeToRight: (y) => J(V.value.node.id, y),
-              closePopover: () => pe.value?.closePopover()
+              insertNodeToRight: (w) => te(G.value.node.id, w),
+              closePopover: () => se.value?.closePopover()
             }, void 0, !0)
           ]),
           _: 3
-        }, 8, ["node", "port-position", "tooltip-text"])) : O("", !0),
-        X.value ? (C(), be(It, {
+        }, 8, ["node", "port-position", "tooltip-text"])) : H("", !0),
+        Q.value ? (k(), ve(Ct, {
           key: 1,
-          node: X.value.node,
-          position: X.value.position,
-          config: Z.value,
-          behavior: X.value.behavior,
-          onAction: ye,
-          onMouseenter: le(E),
-          onMouseleave: le(b)
-        }, null, 8, ["node", "position", "config", "behavior", "onMouseenter", "onMouseleave"])) : O("", !0),
-        (C(!0), M(se, null, ge(oe.value, (y) => (C(), M("div", {
-          key: y.node.id,
-          class: "flow-canvas-runtime-core__node-overlay",
-          onMouseenter: k[0] || (k[0] = //@ts-ignore
-          (...D) => le(E) && le(E)(...D)),
-          onMouseleave: k[1] || (k[1] = //@ts-ignore
-          (...D) => le(b) && le(b)(...D))
-        }, [
-          ce(x.$slots, "node-overlay", {
-            node: y.node,
-            screenAnchors: y.screenAnchors,
-            api: s.editor.api.value
-          }, void 0, !0)
-        ], 32))), 128))
-      ], 512)
+          node: Q.value.node,
+          position: Q.value.position,
+          config: q.value,
+          behavior: Q.value.behavior,
+          "actions-offset": Q.value.behavior.actionsOffset,
+          onAction: Z,
+          onMouseenter: Ue(u),
+          onMouseleave: N
+        }, null, 8, ["node", "position", "config", "behavior", "actions-offset", "onMouseenter"])) : H("", !0)
+      ])
     ], 512));
   }
-}), ao = /* @__PURE__ */ re(_t, [["__scopeId", "data-v-bba2427b"]]), At = { class: "flow-canvas-node-palette" }, Pt = ["data-node-type"], Tt = { class: "flow-canvas-node-palette__item-label" }, Rt = /* @__PURE__ */ ie({
+}), ao = /* @__PURE__ */ ae(Dt, [["__scopeId", "data-v-96013976"]]), _t = { class: "flow-canvas-node-palette" }, Pt = ["data-node-type"], At = { class: "flow-canvas-node-palette__item-label" }, Tt = /* @__PURE__ */ re({
   __name: "canvas-node-palette",
   props: {
     editor: {},
     items: {}
   },
   setup(s) {
-    const e = s, t = B(), o = z(() => e.items ? e.items : Object.keys(e.editor.schema.nodeTypes).map((n) => ({
+    const e = s, t = z(), o = j(() => e.items ? e.items : Object.keys(e.editor.schema.nodeTypes).map((n) => ({
       type: n,
       label: n.charAt(0).toUpperCase() + n.slice(1)
     })));
-    return de(
+    return le(
       [() => e.editor.api.value, o, t],
-      ([n, i, r], a, l) => {
+      ([n, i, r], l, a) => {
         if (!n || !r) return;
         const c = [];
-        for (const u of i) {
-          const d = r.querySelector(`[data-node-type="${u.type}"]`);
-          if (!d) continue;
-          const w = n.registerDndSource(d, () => ({
-            id: L(),
-            type: u.type,
-            label: u.label,
+        for (const d of i) {
+          const g = r.querySelector(`[data-node-type="${d.type}"]`);
+          if (!g) continue;
+          const p = n.registerDndSource(g, () => ({
+            id: T(),
+            type: d.type,
+            label: d.label,
             position: { x: 0, y: 0 }
           }));
-          c.push(w);
+          c.push(p);
         }
-        l(() => {
-          for (const u of c) u();
+        a(() => {
+          for (const d of c) d();
         });
       },
       { flush: "post" }
-    ), (n, i) => (C(), M("div", At, [
-      $("div", {
+    ), (n, i) => (k(), S("div", _t, [
+      A("div", {
         ref_key: "listRef",
         ref: t,
         class: "flow-canvas-node-palette__list"
       }, [
-        (C(!0), M(se, null, ge(o.value, (r) => (C(), M("div", {
+        (k(!0), S(ie, null, ye(o.value, (r) => (k(), S("div", {
           key: r.type,
           class: "flow-canvas-node-palette__item",
           "data-node-type": r.type
         }, [
-          r.icon ? (C(), M("i", {
+          r.icon ? (k(), S("i", {
             key: 0,
-            class: Q([r.icon, "flow-canvas-node-palette__item-icon"])
-          }, null, 2)) : O("", !0),
-          $("span", Tt, ue(r.label), 1)
+            class: W([r.icon, "flow-canvas-node-palette__item-icon"])
+          }, null, 2)) : H("", !0),
+          A("span", At, de(r.label), 1)
         ], 8, Pt))), 128))
       ], 512)
     ]));
   }
-}), $t = /* @__PURE__ */ re(Rt, [["__scopeId", "data-v-300314b7"]]), Lt = { class: "flow-canvas-layout" }, Bt = { class: "flow-canvas-layout__main" }, zt = { class: "flow-canvas-layout__content" }, Ot = {
+}), Rt = /* @__PURE__ */ ae(Tt, [["__scopeId", "data-v-300314b7"]]), $t = { class: "flow-canvas-layout" }, Lt = { class: "flow-canvas-layout__main" }, Bt = { class: "flow-canvas-layout__content" }, zt = {
   key: 0,
   class: "flow-canvas-layout__footer"
-}, jt = /* @__PURE__ */ ie({
+}, Ot = /* @__PURE__ */ re({
   __name: "canvas-layout",
   props: {
     sidebarCollapsed: { type: Boolean, default: !1 },
@@ -2162,33 +2150,36 @@ const Ct = { class: "flow-canvas-node-actions__bar" }, Et = /* @__PURE__ */ ie({
   },
   emits: ["update:sidebarCollapsed"],
   setup(s) {
-    return (e, t) => (C(), M("div", Lt, [
-      !s.hideSidebar && (e.$slots.sidebar || s.editor) ? (C(), M("aside", {
+    return (e, t) => (k(), S("div", $t, [
+      !s.hideSidebar && (e.$slots.sidebar || s.editor) ? (k(), S("aside", {
         key: 0,
-        class: Q(["flow-canvas-layout__sidebar", { "is-collapsed": s.sidebarCollapsed }]),
-        style: we({ width: s.sidebarCollapsed ? "0px" : `${s.sidebarWidth}px` })
+        class: W(["flow-canvas-layout__sidebar", { "is-collapsed": s.sidebarCollapsed }]),
+        style: me({ width: s.sidebarCollapsed ? "0px" : `${s.sidebarWidth}px` })
       }, [
-        ce(e.$slots, "sidebar", {}, () => [
-          s.editor ? (C(), be($t, {
+        fe(e.$slots, "sidebar", {}, () => [
+          s.editor ? (k(), ve(Rt, {
             key: 0,
             editor: s.editor,
             items: s.paletteItems
-          }, null, 8, ["editor", "items"])) : O("", !0)
+          }, null, 8, ["editor", "items"])) : H("", !0)
         ], !0)
-      ], 6)) : O("", !0),
-      $("div", Bt, [
-        $("div", zt, [
-          ce(e.$slots, "default", {}, void 0, !0)
+      ], 6)) : H("", !0),
+      A("div", Lt, [
+        A("div", Bt, [
+          fe(e.$slots, "default", {}, void 0, !0)
         ]),
-        !s.hideFooter && e.$slots.footer ? (C(), M("div", Ot, [
-          ce(e.$slots, "footer", {}, void 0, !0)
-        ])) : O("", !0)
+        !s.hideFooter && e.$slots.footer ? (k(), S("div", zt, [
+          fe(e.$slots, "footer", {}, void 0, !0)
+        ])) : H("", !0)
       ])
     ]));
   }
-}), lo = /* @__PURE__ */ re(jt, [["__scopeId", "data-v-26f35b6b"]]);
+}), lo = /* @__PURE__ */ ae(Ot, [["__scopeId", "data-v-26f35b6b"]]), jt = ["undo", "redo"];
 function Ht(s) {
-  const e = new Set(s?.exclude), t = [
+  const e = new Set(s?.include), t = /* @__PURE__ */ new Set([
+    ...jt.filter((a) => !e.has(a)),
+    ...s?.exclude ?? []
+  ]), o = [
     {
       id: "undo",
       type: "undo",
@@ -2205,7 +2196,7 @@ function Ht(s) {
       description: "重做",
       order: 11
     }
-  ], o = [
+  ], n = [
     {
       id: "select",
       type: "select",
@@ -2246,7 +2237,7 @@ function Ht(s) {
       description: "导出为图片",
       order: 24
     }
-  ], n = [
+  ], i = [
     {
       id: "zoom-out",
       type: "zoom-out",
@@ -2264,7 +2255,7 @@ function Ht(s) {
       description: "放大画布",
       order: 32
     }
-  ], i = [
+  ], r = [
     {
       id: "reset",
       type: "reset",
@@ -2274,9 +2265,9 @@ function Ht(s) {
       order: 40
     }
   ];
-  return [...[...t, ...o].filter(
-    (a) => !e.has(a.type)
-  ), ...n, ...i];
+  return [...[...o, ...n].filter(
+    (a) => !t.has(a.type)
+  ), ...i, ...r];
 }
 const Ft = { class: "flow-canvas-toolbar" }, Ut = {
   key: 0,
@@ -2284,7 +2275,7 @@ const Ft = { class: "flow-canvas-toolbar" }, Ut = {
 }, qt = { class: "flow-canvas-toolbar__group" }, Gt = {
   key: 0,
   class: "flow-canvas-toolbar__zoom-display"
-}, Vt = ["data-description", "disabled", "onClick"], Wt = ["textContent"], Qt = /* @__PURE__ */ ie({
+}, Vt = ["data-description", "disabled", "onClick"], Wt = ["textContent"], Qt = /* @__PURE__ */ re({
   __name: "canvas-toolbar",
   props: {
     items: {},
@@ -2292,42 +2283,42 @@ const Ft = { class: "flow-canvas-toolbar" }, Ut = {
     editor: {}
   },
   setup(s) {
-    const e = s, t = z(() => e.items ? e.items : Ht({ exclude: e.exclude })), o = B(1);
+    const e = s, t = j(() => e.items ? e.items : Ht({ exclude: e.exclude })), o = z(1);
     let n = null;
-    de(
+    le(
       () => e.editor.api.value,
-      (f) => {
-        n?.(), n = null, f && (o.value = f.getZoom(), n = f.onGraphEvent("scale", () => {
-          o.value = f.getZoom();
+      (u) => {
+        n?.(), n = null, u && (o.value = u.getZoom(), n = u.onGraphEvent("scale", () => {
+          o.value = u.getZoom();
         }));
       },
       { immediate: !0 }
-    ), ze(() => {
+    ), Le(() => {
       n?.();
     });
-    const i = z(() => `${Math.round(o.value * 100)}%`), r = z(() => e.editor.api.value ? {
+    const i = j(() => `${Math.round(o.value * 100)}%`), r = j(() => e.editor.api.value ? {
       api: e.editor.api.value,
       flowModel: e.editor.flowModel.value,
       history: e.editor.history,
       mode: e.editor.mode.value
     } : null);
-    function a(f) {
-      return f.visible === !1 ? !1 : typeof f.visible == "function" ? r.value ? f.visible(r.value) : !1 : !0;
+    function l(u) {
+      return u.visible === !1 ? !1 : typeof u.visible == "function" ? r.value ? u.visible(r.value) : !1 : !0;
     }
-    function l(f) {
-      return f.type === "select" ? e.editor.selectionMode.value : !1;
+    function a(u) {
+      return u.type === "select" ? e.editor.selectionMode.value : !1;
     }
-    function c(f) {
-      return !r.value || f.disabled === !0 ? !0 : typeof f.disabled == "function" ? f.disabled(r.value) : f.type === "undo" ? !e.editor.history.canUndo.value : f.type === "redo" ? !e.editor.history.canRedo.value : !1;
+    function c(u) {
+      return !r.value || u.disabled === !0 ? !0 : typeof u.disabled == "function" ? u.disabled(r.value) : u.type === "undo" ? !e.editor.history.canUndo.value : u.type === "redo" ? !e.editor.history.canRedo.value : !1;
     }
-    function u(f) {
-      if (!r.value || c(f)) return;
-      if (f.onClick) {
-        f.onClick(r.value);
+    function d(u) {
+      if (!r.value || c(u)) return;
+      if (u.onClick) {
+        u.onClick(r.value);
         return;
       }
-      const { api: E } = r.value;
-      switch (f.type) {
+      const { api: N } = r.value;
+      switch (u.type) {
         case "undo":
           e.editor.history.undo();
           break;
@@ -2335,21 +2326,21 @@ const Ft = { class: "flow-canvas-toolbar" }, Ut = {
           e.editor.history.redo();
           break;
         case "zoom-in":
-          E.zoomIn(), o.value = E.getZoom();
+          N.zoomIn(), o.value = N.getZoom();
           break;
         case "zoom-out":
-          E.zoomOut(), o.value = E.getZoom();
+          N.zoomOut(), o.value = N.getZoom();
           break;
         case "fit":
-          E.zoomToFit();
+          N.zoomToFit();
           break;
         case "reset":
-          E.zoomTo(1), E.scrollToOrigin(), o.value = 1;
+          N.zoomTo(1), N.scrollToOrigin(), o.value = 1;
           break;
         case "export":
-          E.exportAsImage().then((b) => {
-            const m = URL.createObjectURL(b), p = document.createElement("a");
-            p.href = m, p.download = "canvas-export.png", p.click(), URL.revokeObjectURL(m);
+          N.exportAsImage().then((b) => {
+            const y = URL.createObjectURL(b), m = document.createElement("a");
+            m.href = y, m.download = "canvas-export.png", m.click(), URL.revokeObjectURL(y);
           }).catch((b) => {
             console.warn("[flow-canvas] Export failed:", b);
           });
@@ -2360,44 +2351,44 @@ const Ft = { class: "flow-canvas-toolbar" }, Ut = {
         case "search":
         case "auto-layout":
         case "minimap":
-          console.warn(`[flow-canvas] "${f.type}" toolbar item has no built-in handler. Provide an onClick callback.`);
+          console.warn(`[flow-canvas] "${u.type}" toolbar item has no built-in handler. Provide an onClick callback.`);
           break;
         default:
-          f.type !== "custom" && console.warn(`[flow-canvas] No default handler for toolbar type "${f.type}". Provide an onClick handler.`);
+          u.type !== "custom" && console.warn(`[flow-canvas] No default handler for toolbar type "${u.type}". Provide an onClick handler.`);
           break;
       }
     }
-    const d = z(() => t.value.filter(a)), w = z(() => {
-      const f = /* @__PURE__ */ new Map(), E = [];
-      for (const b of d.value) {
-        const m = b.group ?? "default";
-        f.has(m) || (f.set(m, []), E.push(m)), f.get(m).push(b);
+    const g = j(() => t.value.filter(l)), p = j(() => {
+      const u = /* @__PURE__ */ new Map(), N = [];
+      for (const b of g.value) {
+        const y = b.group ?? "default";
+        u.has(y) || (u.set(y, []), N.push(y)), u.get(y).push(b);
       }
-      return E.map((b) => ({ name: b, items: f.get(b) })).filter((b) => b.items.length > 0);
+      return N.map((b) => ({ name: b, items: u.get(b) })).filter((b) => b.items.length > 0);
     });
-    return (f, E) => (C(), M("div", Ft, [
-      (C(!0), M(se, null, ge(w.value, (b, m) => (C(), M(se, {
+    return (u, N) => (k(), S("div", Ft, [
+      (k(!0), S(ie, null, ye(p.value, (b, y) => (k(), S(ie, {
         key: b.name
       }, [
-        m > 0 ? (C(), M("div", Ut)) : O("", !0),
-        $("div", qt, [
-          (C(!0), M(se, null, ge(b.items, (p) => (C(), M(se, {
-            key: p.id
+        y > 0 ? (k(), S("div", Ut)) : H("", !0),
+        A("div", qt, [
+          (k(!0), S(ie, null, ye(b.items, (m) => (k(), S(ie, {
+            key: m.id
           }, [
-            p.type === "zoom-display" ? (C(), M("span", Gt, ue(i.value), 1)) : (C(), M("button", {
+            m.type === "zoom-display" ? (k(), S("span", Gt, de(i.value), 1)) : (k(), S("button", {
               key: 1,
-              class: Q(["flow-canvas-toolbar__btn", { "is-disabled": c(p), "is-active": l(p) }]),
-              "data-description": p.description,
-              disabled: c(p),
-              onClick: (P) => u(p)
+              class: W(["flow-canvas-toolbar__btn", { "is-disabled": c(m), "is-active": a(m) }]),
+              "data-description": m.description,
+              disabled: c(m),
+              onClick: (R) => d(m)
             }, [
-              p.component ? (C(), be(Ve(p.component), { key: 0 })) : p.icon ? (C(), M("i", {
+              m.component ? (k(), ve(qe(m.component), { key: 0 })) : m.icon ? (k(), S("i", {
                 key: 1,
-                class: Q(p.icon)
-              }, null, 2)) : (C(), M("span", {
+                class: W(m.icon)
+              }, null, 2)) : (k(), S("span", {
                 key: 2,
                 class: "flow-canvas-toolbar__text",
-                textContent: ue(p.text ?? p.description ?? p.id)
+                textContent: de(m.text ?? m.description ?? m.id)
               }, null, 8, Wt))
             ], 10, Vt))
           ], 64))), 128))
@@ -2405,49 +2396,49 @@ const Ft = { class: "flow-canvas-toolbar" }, Ut = {
       ], 64))), 128))
     ]));
   }
-}), co = /* @__PURE__ */ re(Qt, [["__scopeId", "data-v-ca50cd45"]]), Xt = { class: "flow-canvas-default-node__ep-label" }, Yt = {
+}), co = /* @__PURE__ */ ae(Qt, [["__scopeId", "data-v-ca50cd45"]]), Xt = { class: "flow-canvas-default-node__ep-label" }, Kt = {
   key: 1,
   class: "flow-canvas-default-node__diamond"
-}, Kt = {
+}, Yt = {
   key: 2,
   class: "flow-canvas-default-node__task-label"
-}, Zt = /* @__PURE__ */ ie({
+}, Zt = /* @__PURE__ */ re({
   __name: "default-node",
   setup(s) {
-    const t = We("getNode")?.(), o = z(() => t?.getData?.() ?? null), n = z(() => o.value?.label || o.value?.type || ""), i = {
+    const t = Ge("getNode")?.(), o = j(() => t?.getData?.() ?? null), n = j(() => o.value?.label || o.value?.type || ""), i = {
       start: "canvas-kaishi",
       end: "canvas-stop",
       "parallel-gateway": "canvas-bingxingwangguan",
       "branch-gateway": "canvas-fenzhiwangguan",
       "converge-gateway": "canvas-huijuwangguan",
       "conditional-parallel-gateway": "canvas-tiaojianbingxingwangguan"
-    }, r = /* @__PURE__ */ new Set(["start", "end"]), a = /* @__PURE__ */ new Set([
+    }, r = /* @__PURE__ */ new Set(["start", "end"]), l = /* @__PURE__ */ new Set([
       "parallel-gateway",
       "branch-gateway",
       "converge-gateway",
       "conditional-parallel-gateway"
-    ]), l = z(() => {
-      const u = o.value?.type ?? "";
-      return r.has(u) ? "endpoint" : a.has(u) ? "gateway" : "task";
-    }), c = z(() => i[o.value?.type ?? ""] ?? "");
-    return (u, d) => (C(), M("div", {
-      class: Q(["flow-canvas-default-node", `is-${l.value}`])
+    ]), a = j(() => {
+      const d = o.value?.type ?? "";
+      return r.has(d) ? "endpoint" : l.has(d) ? "gateway" : "task";
+    }), c = j(() => i[o.value?.type ?? ""] ?? "");
+    return (d, g) => (k(), S("div", {
+      class: W(["flow-canvas-default-node", `is-${a.value}`])
     }, [
-      l.value === "endpoint" ? (C(), M(se, { key: 0 }, [
-        c.value ? (C(), M("i", {
+      a.value === "endpoint" ? (k(), S(ie, { key: 0 }, [
+        c.value ? (k(), S("i", {
           key: 0,
-          class: Q([["flow-canvas-icon", c.value], "flow-canvas-default-node__ep-icon"])
-        }, null, 2)) : O("", !0),
-        $("span", Xt, ue(n.value), 1)
-      ], 64)) : l.value === "gateway" ? (C(), M("div", Yt, [
-        c.value ? (C(), M("i", {
+          class: W([["flow-canvas-icon", c.value], "flow-canvas-default-node__ep-icon"])
+        }, null, 2)) : H("", !0),
+        A("span", Xt, de(n.value), 1)
+      ], 64)) : a.value === "gateway" ? (k(), S("div", Kt, [
+        c.value ? (k(), S("i", {
           key: 0,
-          class: Q([["flow-canvas-icon", c.value], "flow-canvas-default-node__gw-icon"])
-        }, null, 2)) : O("", !0)
-      ])) : (C(), M("span", Kt, ue(n.value), 1))
+          class: W([["flow-canvas-icon", c.value], "flow-canvas-default-node__gw-icon"])
+        }, null, 2)) : H("", !0)
+      ])) : (k(), S("span", Yt, de(n.value), 1))
     ], 2));
   }
-}), Jt = /* @__PURE__ */ re(Zt, [["__scopeId", "data-v-c88cdae7"]]), eo = {
+}), Jt = /* @__PURE__ */ ae(Zt, [["__scopeId", "data-v-c88cdae7"]]), eo = {
   start: { label: "开始", icon: "flow-canvas-icon canvas-kaishi", width: 88, height: 40 },
   end: { label: "结束", icon: "flow-canvas-icon canvas-stop", width: 88, height: 40 },
   empty: { label: "空节点", icon: "flow-canvas-icon canvas-jiedi", width: 240, height: 48 },
@@ -2460,10 +2451,10 @@ const Ft = { class: "flow-canvas-toolbar" }, Ut = {
     width: 64,
     height: 64
   }
-}, Le = (s, e) => ({
+}, Re = (s, e) => ({
   stroke: e.hovered ? "#3a84ff" : "#abb5cc",
   strokeWidth: 2
-}), Be = {
+}), $e = {
   attrs: {
     line: {
       stroke: "#abb5cc",
@@ -2475,22 +2466,22 @@ const Ft = { class: "flow-canvas-toolbar" }, Ut = {
   manhattan: {
     router: { name: "manhattan", args: { padding: 10, maxDirectionChange: 90 } },
     connector: { name: "rounded", args: { radius: 8 } },
-    style: Le,
-    x6EdgeConfig: Be
+    style: Re,
+    x6EdgeConfig: $e
   },
   bezier: {
     connector: { name: "smooth" },
-    style: Le,
-    x6EdgeConfig: Be
+    style: Re,
+    x6EdgeConfig: $e
   }
 };
 function uo(s) {
   const e = s?.nodeTypes ?? eo, t = {}, o = [];
-  for (const [r, a] of Object.entries(e)) {
-    const l = a.width ?? 150, c = a.height ?? 50;
+  for (const [r, l] of Object.entries(e)) {
+    const a = l.width ?? 150, c = l.height ?? 50;
     t[r] = {
       component: Jt,
-      getSize: () => ({ width: l, height: c }),
+      getSize: () => ({ width: a, height: c }),
       getPorts: () => [
         { id: "top", group: "top" },
         { id: "right", group: "right" },
@@ -2499,8 +2490,8 @@ function uo(s) {
       ]
     }, o.push({
       type: r,
-      label: a.label ?? r,
-      icon: a.icon
+      label: l.label ?? r,
+      icon: l.icon
     });
   }
   const n = {
@@ -2519,22 +2510,22 @@ function fo(s) {
     transformCommand(e, t, o) {
       for (const n of e.commands) {
         if (n.type !== "edge.add" && n.type !== "edge.reconnect") continue;
-        const i = o.flowModel.value, r = n.type === "edge.add" ? n.edge.source.nodeId : n.source?.nodeId, a = n.type === "edge.add" ? n.edge.target.nodeId : n.target?.nodeId;
-        if (!r || !a) continue;
-        const l = i.nodes[r], c = i.nodes[a];
-        if (!l || !c) continue;
-        const u = n.type === "edge.add" ? n.edge.source.portId : n.source?.portId, d = n.type === "edge.add" ? n.edge.target.portId : n.target?.portId, w = u ? l.ports?.find((p) => p.id === u) : void 0, f = d ? c.ports?.find((p) => p.id === d) : void 0, E = n.type === "edge.reconnect" ? n.edgeId : void 0, b = Object.values(i.edges).filter((p) => p.id !== E), m = s({
+        const i = o.flowModel.value, r = n.type === "edge.add" ? n.edge.source.nodeId : n.source?.nodeId, l = n.type === "edge.add" ? n.edge.target.nodeId : n.target?.nodeId;
+        if (!r || !l) continue;
+        const a = i.nodes[r], c = i.nodes[l];
+        if (!a || !c) continue;
+        const d = n.type === "edge.add" ? n.edge.source.portId : n.source?.portId, g = n.type === "edge.add" ? n.edge.target.portId : n.target?.portId, p = d ? a.ports?.find((m) => m.id === d) : void 0, u = g ? c.ports?.find((m) => m.id === g) : void 0, N = n.type === "edge.reconnect" ? n.edgeId : void 0, b = Object.values(i.edges).filter((m) => m.id !== N), y = s({
           flowModel: i,
-          sourceNode: l,
+          sourceNode: a,
           targetNode: c,
-          sourcePort: w,
-          targetPort: f,
+          sourcePort: p,
+          targetPort: u,
           existingEdges: b
         });
-        if (!m.valid)
+        if (!y.valid)
           return {
             rejected: !0,
-            reason: m.reason ?? "Connection validation failed",
+            reason: y.reason ?? "Connection validation failed",
             code: "validation_failed"
           };
       }
@@ -2552,7 +2543,7 @@ function po(s) {
       n.graph.use(
         new i({
           enabled: !0,
-          rubberband: !1,
+          rubberband: e,
           multiple: t,
           movable: o,
           showNodeSelectionBox: !0,
@@ -2631,53 +2622,53 @@ function vo() {
       if (n && t.key === "c") {
         const i = o.graph.getSelectedCells?.() ?? [];
         if (!i.length) return !1;
-        const r = o.flowModel.value, a = new Set(i.filter((u) => u.isNode()).map((u) => u.id)), l = [...a].map((u) => r.nodes[u]).filter(Boolean);
-        if (!l.length) return !1;
+        const r = o.flowModel.value, l = new Set(i.filter((d) => d.isNode()).map((d) => d.id)), a = [...l].map((d) => r.nodes[d]).filter(Boolean);
+        if (!a.length) return !1;
         const c = Object.values(r.edges).filter(
-          (u) => a.has(u.source.nodeId) && a.has(u.target.nodeId)
+          (d) => l.has(d.source.nodeId) && l.has(d.target.nodeId)
         );
-        return s = { nodes: l, edges: c }, e = 0, !0;
+        return s = { nodes: a, edges: c }, e = 0, !0;
       }
       if (n && t.key === "v") {
         if (!s?.nodes.length) return !1;
         e++;
-        const i = e * 30, r = /* @__PURE__ */ new Map(), a = [];
-        for (const l of s.nodes) {
-          const c = `${l.id}_cp${L().slice(0, 6)}`;
-          r.set(l.id, c), a.push({
+        const i = e * 30, r = /* @__PURE__ */ new Map(), l = [];
+        for (const a of s.nodes) {
+          const c = `${a.id}_cp${T().slice(0, 6)}`;
+          r.set(a.id, c), l.push({
             type: "node.add",
             node: {
-              ...l,
+              ...a,
               id: c,
               position: {
-                x: l.position.x + i,
-                y: l.position.y + i
+                x: a.position.x + i,
+                y: a.position.y + i
               },
-              payload: l.payload ? { ...l.payload } : {},
-              extensions: l.extensions ? { ...l.extensions } : void 0
+              payload: a.payload ? { ...a.payload } : {},
+              extensions: a.extensions ? { ...a.extensions } : void 0
             }
           });
         }
-        for (const l of s.edges) {
-          const c = r.get(l.source.nodeId), u = r.get(l.target.nodeId);
-          !c || !u || a.push({
+        for (const a of s.edges) {
+          const c = r.get(a.source.nodeId), d = r.get(a.target.nodeId);
+          !c || !d || l.push({
             type: "edge.add",
             edge: {
-              ...l,
-              id: `${l.id}_cp${L().slice(0, 6)}`,
-              source: { ...l.source, nodeId: c },
-              target: { ...l.target, nodeId: u },
-              labels: l.labels?.map((d) => ({ ...d, id: `${d.id}_cp${L().slice(0, 6)}` })),
-              payload: l.payload ? { ...l.payload } : {}
+              ...a,
+              id: `${a.id}_cp${T().slice(0, 6)}`,
+              source: { ...a.source, nodeId: c },
+              target: { ...a.target, nodeId: d },
+              labels: a.labels?.map((g) => ({ ...g, id: `${g.id}_cp${T().slice(0, 6)}` })),
+              payload: a.payload ? { ...a.payload } : {}
             }
           });
         }
-        return a.length && o.executeCommand({
-          id: L(),
+        return l.length && o.executeCommand({
+          id: T(),
           source: "user:keyboard",
           label: "粘贴",
           timestamp: Date.now(),
-          commands: a
+          commands: l
         }), !0;
       }
       return !1;
@@ -2687,21 +2678,21 @@ function vo() {
 export {
   K as CanvasConstraintError,
   lo as CanvasLayout,
-  $t as CanvasNodePalette,
+  Rt as CanvasNodePalette,
   ao as CanvasRuntime,
-  Ye as CanvasSchemaError,
+  Qe as CanvasSchemaError,
   co as CanvasToolbar,
   Jt as DefaultNode,
-  It as NodeActionsToolbar,
-  Dt as NodeQuickAddPopover,
-  Se as applyCanvasCommand,
+  Ct as NodeActionsToolbar,
+  St as NodeQuickAddPopover,
+  Me as applyCanvasCommand,
   vo as clipboardPlugin,
   fo as connectionValidatorPlugin,
-  ct as createCanvasHistory,
+  lt as createCanvasHistory,
   uo as createDefaultSchema,
   Ht as createDefaultToolbarItems,
   io as createEmptyFlowModel,
-  L as generateId,
+  T as generateId,
   ho as minimapPlugin,
   po as selectionPlugin,
   go as snaplinePlugin,