@blueking/flow-canvas 0.0.3 → 0.0.5

package/dist/index.esm.js

@@ -1,24 +1,26 @@
-import { ref as O, computed as F, onScopeDispose as et, defineComponent as ge, onBeforeUnmount as ze, createElementBlock as S, openBlock as M, normalizeStyle as _e, createElementVNode as B, createVNode as tt, createCommentVNode as U, normalizeClass as ee, Transition as ot, withCtx as je, withModifiers as rt, createTextVNode as Ve, renderSlot as ke, onMounted as at, watch as fe, createBlock as De, Fragment as pe, renderList as Pe, toDisplayString as me, unref as lt, resolveDynamicComponent as dt, inject as ct } from "vue";
-import { Graph as ut } from "@antv/x6";
-import { register as ft } from "@antv/x6-vue-shape";
-function Mo() {
+import { ref as q, computed as j, onScopeDispose as Je, defineComponent as fe, h as Re, watch as pe, onBeforeUnmount as Me, createElementBlock as R, openBlock as D, normalizeStyle as we, createElementVNode as U, createVNode as et, createCommentVNode as Y, normalizeClass as se, Transition as tt, withCtx as He, withModifiers as rt, createTextVNode as Le, renderSlot as Ee, onMounted as ot, createBlock as be, Fragment as me, renderList as Ie, toDisplayString as ge, unref as le, reactive as at, resolveDynamicComponent as lt, Teleport as dt, nextTick as Oe, inject as ct, createApp as ut } from "vue";
+import { Graph as ft } from "@antv/x6";
+import { register as gt } from "@antv/x6-vue-shape";
+import { Selection as pt } from "@antv/x6-plugin-selection";
+import { MiniMap as ht } from "@antv/x6-plugin-minimap";
+function fn() {
   return {
     version: "1.0",
     nodes: {},
     edges: {}
   };
 }
-class ne extends Error {
+class ue extends Error {
   constructor(e) {
     super(e), this.name = "CanvasConstraintError";
   }
 }
-class pt extends Error {
+class vt extends Error {
   constructor(e) {
     super(e), this.name = "CanvasSchemaError";
   }
 }
-function Ae(s, e, t) {
+function Ne(s, e, t) {
   if (e.length === 0) {
     if (t === void 0) return;
     if (typeof t != "object" || t === null || Array.isArray(t))
@@ -27,196 +29,196 @@ function Ae(s, e, t) {
   }
   const o = s ? { ...s } : {};
   let n = o;
-  for (let i = 0; i < e.length - 1; i++) {
-    const l = e[i], a = n[l];
+  for (let r = 0; r < e.length - 1; r++) {
+    const l = e[r], a = n[l];
     a && typeof a == "object" && !Array.isArray(a) ? n[l] = { ...a } : n[l] = {}, n = n[l];
   }
-  const r = e[e.length - 1];
-  return t === void 0 ? delete n[r] : n[r] = t, o;
+  const i = e[e.length - 1];
+  return t === void 0 ? delete n[i] : n[i] = t, o;
 }
-function Ge(s, e) {
+function $e(s, e) {
   switch (e.type) {
     case "node.add":
-      return gt(s, e.node);
+      return yt(s, e.node);
     case "node.move":
-      return ht(s, e.nodeId, e.position);
+      return mt(s, e.nodeId, e.position);
     case "node.remove":
-      return vt(s, e.nodeId);
+      return wt(s, e.nodeId);
     case "node.update":
-      return yt(s, e.nodeId, e.patch);
+      return bt(s, e.nodeId, e.patch);
     case "node.set-payload":
-      return mt(s, e.nodeId, e.path, e.value);
+      return xt(s, e.nodeId, e.path, e.value);
     case "node.set-extensions":
-      return bt(s, e.nodeId, e.path, e.value);
+      return Et(s, e.nodeId, e.path, e.value);
     case "edge.add":
-      return wt(s, e.edge);
+      return It(s, e.edge);
     case "edge.remove":
-      return xt(s, e.edgeId);
+      return Ct(s, e.edgeId);
     case "edge.reconnect":
       return kt(s, e.edgeId, e.source, e.target);
     case "edge.update":
-      return Ct(s, e.edgeId, e.patch);
+      return St(s, e.edgeId, e.patch);
     case "edge.set-payload":
-      return Et(s, e.edgeId, e.path, e.value);
+      return Mt(s, e.edgeId, e.path, e.value);
     case "edge.label.update":
-      return It(s, e.edgeId, e.labelId, e.patch);
+      return Nt(s, e.edgeId, e.labelId, e.patch);
     case "model.set-meta":
-      return Mt(s, e.path, e.value);
+      return _t(s, e.path, e.value);
     default:
-      throw new ne(`Unknown command type: ${e.type}`);
+      throw new ue(`Unknown command type: ${e.type}`);
   }
 }
 function Ce(s, e) {
   const t = s.nodes[e];
-  if (!t) throw new ne(`Node "${e}" does not exist`);
+  if (!t) throw new ue(`Node "${e}" does not exist`);
   return t;
 }
-function Ee(s, e) {
+function ke(s, e) {
   const t = s.edges[e];
-  if (!t) throw new ne(`Edge "${e}" does not exist`);
+  if (!t) throw new ue(`Edge "${e}" does not exist`);
   return t;
 }
-function be(s, e, t) {
+function xe(s, e, t) {
   const o = s.nodes[e.nodeId];
   if (!o)
-    throw new ne(`${t} node "${e.nodeId}" does not exist`);
-  if (e.portId && o.ports && !o.ports.some((r) => r.id === e.portId))
-    throw new ne(`${t} port "${e.portId}" not found on node "${e.nodeId}"`);
+    throw new ue(`${t} node "${e.nodeId}" does not exist`);
+  if (e.portId && o.ports && !o.ports.some((i) => i.id === e.portId))
+    throw new ue(`${t} port "${e.portId}" not found on node "${e.nodeId}"`);
 }
-function Te(s, e, t) {
+function _e(s, e, t) {
   return { ...s, nodes: { ...s.nodes, [e]: t } };
 }
-function Re(s, e, t) {
+function De(s, e, t) {
   return { ...s, edges: { ...s.edges, [e]: t } };
 }
-function gt(s, e) {
+function yt(s, e) {
   if (s.nodes[e.id])
-    throw new ne(`Node id "${e.id}" already exists`);
+    throw new ue(`Node id "${e.id}" already exists`);
   return { ...s, nodes: { ...s.nodes, [e.id]: e } };
 }
-function ht(s, e, t) {
+function mt(s, e, t) {
   const o = Ce(s, e);
-  return Te(s, e, { ...o, position: t });
+  return _e(s, e, { ...o, position: t });
 }
-function vt(s, e) {
+function wt(s, e) {
   Ce(s, e);
   const { [e]: t, ...o } = s.nodes, n = {};
-  for (const [r, i] of Object.entries(s.edges))
-    i.source.nodeId !== e && i.target.nodeId !== e && (n[r] = i);
+  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 yt(s, e, t) {
+function bt(s, e, t) {
   const o = Ce(s, e);
-  return Te(s, e, { ...o, ...t, id: o.id });
+  return _e(s, e, { ...o, ...t, id: o.id });
 }
-function mt(s, e, t, o) {
-  const n = Ce(s, e), r = Ae(n.payload, t, o);
-  return Te(s, e, { ...n, payload: r });
+function xt(s, e, t, o) {
+  const n = Ce(s, e), i = Ne(n.payload, t, o);
+  return _e(s, e, { ...n, payload: i });
 }
-function bt(s, e, t, o) {
-  const n = Ce(s, e), r = Ae(n.extensions, t, o);
-  return Te(s, e, { ...n, extensions: r });
+function Et(s, e, t, o) {
+  const n = Ce(s, e), i = Ne(n.extensions, t, o);
+  return _e(s, e, { ...n, extensions: i });
 }
-function wt(s, e) {
+function It(s, e) {
   if (s.edges[e.id])
-    throw new ne(`Edge id "${e.id}" already exists`);
-  if (be(s, e.source, "Source"), be(s, e.target, "Target"), e.labels) {
+    throw new ue(`Edge id "${e.id}" already exists`);
+  if (xe(s, e.source, "Source"), xe(s, e.target, "Target"), e.labels) {
     const t = /* @__PURE__ */ new Set();
     for (const o of e.labels) {
       if (t.has(o.id))
-        throw new ne(`Duplicate label id "${o.id}" in edge "${e.id}"`);
+        throw new ue(`Duplicate label id "${o.id}" in edge "${e.id}"`);
       t.add(o.id);
     }
   }
   return { ...s, edges: { ...s.edges, [e.id]: e } };
 }
-function xt(s, e) {
-  Ee(s, e);
+function Ct(s, e) {
+  ke(s, e);
   const { [e]: t, ...o } = s.edges;
   return { ...s, edges: o };
 }
 function kt(s, e, t, o) {
-  const n = Ee(s, e), r = t ?? n.source, i = o ?? n.target;
-  return be(s, r, "Source"), be(s, i, "Target"), Re(s, e, { ...n, source: r, target: i });
+  const n = ke(s, e), i = t ?? n.source, r = o ?? n.target;
+  return xe(s, i, "Source"), xe(s, r, "Target"), De(s, e, { ...n, source: i, target: r });
 }
-function Ct(s, e, t) {
-  const o = Ee(s, e), n = { ...o, ...t, id: o.id };
-  return t.source && be(s, n.source, "Source"), t.target && be(s, n.target, "Target"), Re(s, e, n);
+function St(s, e, t) {
+  const o = ke(s, e), n = { ...o, ...t, id: o.id };
+  return t.source && xe(s, n.source, "Source"), t.target && xe(s, n.target, "Target"), De(s, e, n);
 }
-function Et(s, e, t, o) {
-  const n = Ee(s, e), r = Ae(n.payload, t, o);
-  return Re(s, e, { ...n, payload: r });
+function Mt(s, e, t, o) {
+  const n = ke(s, e), i = Ne(n.payload, t, o);
+  return De(s, e, { ...n, payload: i });
 }
-function It(s, e, t, o) {
-  const n = Ee(s, e);
+function Nt(s, e, t, o) {
+  const n = ke(s, e);
   if (!n.labels)
-    throw new ne(`Edge "${e}" has no labels`);
-  const r = n.labels.findIndex((l) => l.id === t);
-  if (r === -1)
-    throw new ne(`Label "${t}" not found in edge "${e}"`);
-  const i = [...n.labels];
-  return i[r] = { ...i[r], ...o, id: t }, Re(s, e, { ...n, labels: i });
-}
-function Mt(s, e, t) {
-  const o = Ae(s.meta, e, t);
+    throw new ue(`Edge "${e}" has no labels`);
+  const i = n.labels.findIndex((l) => l.id === t);
+  if (i === -1)
+    throw new ue(`Label "${t}" not found in edge "${e}"`);
+  const r = [...n.labels];
+  return r[i] = { ...r[i], ...o, id: t }, De(s, e, { ...n, labels: r });
+}
+function _t(s, e, t) {
+  const o = Ne(s.meta, e, t);
   return { ...s, meta: o };
 }
-function Nt(s, e) {
-  const t = e?.maxHistorySize ?? 100, o = O(s), n = [], r = [], i = O(!1), l = O(!1);
+function Dt(s, e) {
+  const t = e?.maxHistorySize ?? 100, o = q(s), n = [], i = [], r = q(!1), l = q(!1);
   function a() {
-    i.value = n.length > 0, l.value = r.length > 0;
-  }
-  function g(w) {
-    const N = o.value;
-    let m = N;
-    for (const D of w.commands)
-      m = Ge(m, D);
-    return n.push({ snapshot: N, envelope: w }), n.length > t && n.shift(), r.length = 0, o.value = m, a(), m;
+    r.value = n.length > 0, l.value = i.length > 0;
   }
-  function d() {
-    const w = n.pop();
-    return w ? (r.push({ snapshot: o.value, envelope: w.envelope }), o.value = w.snapshot, a(), w.snapshot) : null;
+  function h(k) {
+    const S = o.value;
+    let T = S;
+    for (const P of k.commands)
+      T = $e(T, P);
+    return n.push({ snapshot: S, envelope: k }), n.length > t && n.shift(), i.length = 0, o.value = T, a(), T;
   }
-  function v() {
-    const w = r.pop();
-    if (!w) return null;
-    n.push({ snapshot: o.value, envelope: w.envelope });
-    let N = o.value;
-    for (const m of w.envelope.commands)
-      N = Ge(N, m);
-    return o.value = N, a(), N;
+  function u() {
+    const k = n.pop();
+    return k ? (i.push({ snapshot: o.value, envelope: k.envelope }), o.value = k.snapshot, a(), k.snapshot) : null;
   }
-  function f() {
-    n.length = 0, r.length = 0, a();
+  function g() {
+    const k = i.pop();
+    if (!k) return null;
+    n.push({ snapshot: o.value, envelope: k.envelope });
+    let S = o.value;
+    for (const T of k.envelope.commands)
+      S = $e(S, T);
+    return o.value = S, a(), S;
   }
   function p() {
+    n.length = 0, i.length = 0, a();
+  }
+  function x() {
     return o.value;
   }
-  function E(w) {
-    o.value = w, f();
+  function m(k) {
+    o.value = k, p();
   }
   return {
     currentFlowModel: o,
-    execute: g,
-    undo: d,
-    redo: v,
-    canUndo: i,
+    execute: h,
+    undo: u,
+    redo: g,
+    canUndo: r,
     canRedo: l,
     get undoStack() {
-      return n.map((w) => w.envelope);
+      return n.map((k) => k.envelope);
     },
     get redoStack() {
-      return r.map((w) => w.envelope);
+      return i.map((k) => k.envelope);
     },
-    clear: f,
-    createSnapshot: p,
-    replaceFlowModel: E
+    clear: p,
+    createSnapshot: x,
+    replaceFlowModel: m
   };
 }
-function St(s) {
+function At(s) {
   return s !== null && typeof s == "object" && s.rejected === !0;
 }
-class Dt {
+class Pt {
   plugins = [];
   editorContext = null;
   runtimeCtx = null;
@@ -251,11 +253,11 @@ class Dt {
    */
   createSafeRuntimeContext(e, t) {
     const o = this, n = new Proxy(e.graph, {
-      get(r, i, l) {
-        const a = Reflect.get(r, i, l);
-        return i === "use" && typeof a == "function" ? function(...d) {
+      get(i, r, l) {
+        const a = Reflect.get(i, r, l);
+        return r === "use" && typeof a == "function" ? function(...u) {
           if (o.runtimeVersion === t)
-            return a.apply(r, d);
+            return a.apply(i, u);
         } : a;
       }
     });
@@ -271,8 +273,8 @@ class Dt {
     let t = e;
     for (const o of this.plugins) {
       if (!o.transformCommand) continue;
-      const n = this.createPreview(t), r = o.transformCommand(t, n, this.editorContext);
-      if (r === null)
+      const n = this.createPreview(t), i = o.transformCommand(t, n, this.editorContext);
+      if (i === null)
         return {
           rejected: !0,
           error: {
@@ -281,16 +283,16 @@ class Dt {
             source: o.name
           }
         };
-      if (St(r))
+      if (At(i))
         return {
           rejected: !0,
           error: {
-            code: r.code ?? "plugin_rejected",
-            reason: r.reason,
+            code: i.code ?? "plugin_rejected",
+            reason: i.reason,
             source: o.name
           }
         };
-      t = r;
+      t = i;
     }
     return { envelope: t };
   }
@@ -372,150 +374,154 @@ class Dt {
     return {
       previewFlowModel(o) {
         const n = o ?? e.commands;
-        let r = t.flowModel.value;
-        for (const i of n)
-          r = Ge(r, i);
-        return r;
+        let i = t.flowModel.value;
+        for (const r of n)
+          i = $e(i, r);
+        return i;
       }
     };
   }
 }
-let Pt = 0;
-function W() {
+let Tt = 0;
+function te() {
   const s = Date.now().toString(36), e = Math.random().toString(36).substring(2, 8);
-  return `${s}-${e}-${++Pt}`;
+  return `${s}-${e}-${++Tt}`;
 }
-const He = () => W();
-function No(s) {
-  const { schema: e, plugins: t = [], historyOptions: o } = s, n = s.idGenerator ?? He, r = { version: "1.0", ...s.initialFlowModel }, i = Nt(r, o), l = O(s.mode ?? "edit"), a = O(!1), g = O(null), d = O([]), v = {}, f = new Dt();
-  function p(m, D, z, X = "user:toolbar") {
-    const j = {
+const Ge = () => te();
+function gn(s) {
+  const { schema: e, plugins: t = [], historyOptions: o } = s, n = s.idGenerator ?? Ge, i = { version: "1.0", ...s.initialFlowModel }, r = Dt(i, o), l = q(s.mode ?? "edit"), a = q(!1), h = q(null), u = q([]), g = {}, p = new Pt();
+  function x(T, P, G, K = "user:toolbar") {
+    const O = {
       id: `history-${Date.now()}`,
-      source: X,
-      label: m,
+      source: K,
+      label: T,
       timestamp: Date.now(),
       commands: []
     };
-    f.afterCommand(j, D, z), d.value = f.collectToolbarItems(), s.onCommandResult?.({
+    p.afterCommand(O, P, G), u.value = p.collectToolbarItems(), s.onCommandResult?.({
       status: "applied",
-      envelope: j,
-      flowModel: z
+      envelope: O,
+      flowModel: G
     }), s.onFlowModelChange?.({
-      flowModel: z,
-      prevFlowModel: D,
-      envelope: j,
-      source: X
+      flowModel: G,
+      prevFlowModel: P,
+      envelope: O,
+      source: K
     });
   }
-  const E = {
-    execute: i.execute,
+  const m = {
+    execute: r.execute,
     undo() {
-      const m = i.currentFlowModel.value, D = i.undo();
-      return D && p("撤销", m, D), D;
+      const T = r.currentFlowModel.value, P = r.undo();
+      return P && x("撤销", T, P), P;
     },
     redo() {
-      const m = i.currentFlowModel.value, D = i.redo();
-      return D && p("重做", m, D), D;
+      const T = r.currentFlowModel.value, P = r.redo();
+      return P && x("重做", T, P), P;
     },
     get canUndo() {
-      return i.canUndo;
+      return r.canUndo;
     },
     get canRedo() {
-      return i.canRedo;
+      return r.canRedo;
     },
     get undoStack() {
-      return i.undoStack;
+      return r.undoStack;
     },
     get redoStack() {
-      return i.redoStack;
+      return r.redoStack;
     },
-    clear: i.clear,
-    createSnapshot: i.createSnapshot,
-    replaceFlowModel(m) {
-      const D = i.currentFlowModel.value;
-      i.replaceFlowModel(m), p("替换 FlowModel", D, m, "system:replace");
-    }
-  }, w = {
-    flowModel: F(() => i.currentFlowModel.value),
-    history: E,
+    clear: r.clear,
+    createSnapshot: r.createSnapshot,
+    replaceFlowModel(T) {
+      const P = r.currentFlowModel.value;
+      r.replaceFlowModel(T), x("替换 FlowModel", P, T, "system:replace");
+    }
+  }, k = {
+    flowModel: j(() => r.currentFlowModel.value),
+    history: m,
     schema: e,
     mode: l,
     idGenerator: n,
-    executeCommand: N,
-    replaceFlowModel(m) {
-      E.replaceFlowModel(m);
+    executeCommand: S,
+    replaceFlowModel(T) {
+      m.replaceFlowModel(T);
     },
-    setMode(m) {
-      l.value = m;
+    setMode(T) {
+      l.value = T;
     },
     selectionMode: a,
-    setSelectionMode(m) {
-      a.value = m;
+    setSelectionMode(T) {
+      a.value = T;
     },
-    api: g,
-    toolbarItems: d,
-    extendedApi: v,
-    _pluginManager: f
+    api: h,
+    toolbarItems: u,
+    extendedApi: g,
+    _pluginManager: p,
+    _emitUiEvent: (T) => {
+      p.dispatchUiEvent(T);
+    }
   };
-  f.install(t, {
-    flowModel: w.flowModel,
-    history: E,
+  p.install(t, {
+    flowModel: k.flowModel,
+    history: m,
     schema: e,
     mode: l,
     idGenerator: n,
-    executeCommand: N
-  }), d.value = f.collectToolbarItems(), et(() => {
-    f.dispose();
+    executeCommand: S
+  }), u.value = p.collectToolbarItems(), Je(() => {
+    p.dispose();
   });
-  function N(m) {
-    const D = f.transformCommand(m);
-    if ("rejected" in D) {
-      const j = {
+  function S(T) {
+    const P = p.transformCommand(T);
+    if ("rejected" in P) {
+      const O = {
         status: "rejected",
-        envelope: m,
-        error: D.error
+        envelope: T,
+        error: P.error
       };
-      return s.onCommandResult?.(j), j;
+      return s.onCommandResult?.(O), O;
     }
-    const z = D.envelope, X = i.currentFlowModel.value;
+    const G = P.envelope, K = r.currentFlowModel.value;
     try {
-      const j = i.execute(z), oe = {
+      const O = r.execute(G), W = {
         status: "applied",
-        envelope: z,
-        flowModel: j
+        envelope: G,
+        flowModel: O
       };
-      return f.afterCommand(z, X, j), d.value = f.collectToolbarItems(), s.onCommandResult?.(oe), s.onFlowModelChange?.({
-        flowModel: j,
-        prevFlowModel: X,
-        envelope: z,
-        source: z.source
-      }), oe;
-    } catch (j) {
-      if (j instanceof ne) {
-        const oe = {
+      return p.afterCommand(G, K, O), u.value = p.collectToolbarItems(), s.onCommandResult?.(W), s.onFlowModelChange?.({
+        flowModel: O,
+        prevFlowModel: K,
+        envelope: G,
+        source: G.source
+      }), W;
+    } catch (O) {
+      if (O instanceof ue) {
+        const W = {
           status: "invalid",
-          envelope: z,
+          envelope: G,
           error: {
             code: "constraint_violated",
-            reason: j.message,
+            reason: O.message,
             source: "engine"
           }
         };
-        return s.onCommandResult?.(oe), oe;
+        return s.onCommandResult?.(W), W;
       }
-      throw j;
+      throw O;
     }
   }
-  return w;
+  return k;
 }
-const _t = ["top", "right", "bottom", "left"];
+const Rt = ["top", "right", "bottom", "left"];
 function nt() {
-  return _t.map((s) => ({ id: s, group: s }));
+  return Rt.map((s) => ({ id: s, group: s }));
 }
-function Fe(s, e) {
+function qe(s, e) {
   return e?.(s) ?? s.ports ?? nt();
 }
-class At {
+const Te = -1, Lt = "flow-canvas-node-ring-target", Fe = "flow-canvas-node-ring-target--decorated", Ue = "flow-canvas-node-ring-target--pulse", Ot = "linear-gradient(135deg, #cadcfa 0%, #cee0ff 100%)";
+class $t {
   graph;
   schema;
   shapeRegistry;
@@ -540,8 +546,8 @@ class At {
   /** x6EdgeConfig 中 attrs.line 的基线值，清理时恢复而非删除 */
   edgeDefaultAttrs = /* @__PURE__ */ new Map();
   lastModel = null;
-  constructor(e, t, o, n, r, i) {
-    this.graph = e, this.schema = t, this.shapeRegistry = o, this.resolveNodeDecoration = n, this.resolveEdgeDecoration = r, this.resolveCanvasContext = i;
+  constructor(e, t, o, n, i, r) {
+    this.graph = e, this.schema = t, this.shapeRegistry = o, this.resolveNodeDecoration = n, this.resolveEdgeDecoration = i, this.resolveCanvasContext = r;
   }
   syncFlowModel(e) {
     if (!this.syncing) {
@@ -564,9 +570,9 @@ class At {
   saveNodeDefaultAttrs(e, t) {
     const n = t.x6CellConfig?.attrs?.body;
     if (!n) return;
-    const r = {};
-    let i = !1;
-    n.stroke !== void 0 && (r.stroke = n.stroke, i = !0), n.strokeWidth !== void 0 && (r.strokeWidth = n.strokeWidth, i = !0), i && this.nodeDefaultAttrs.set(e, r);
+    const i = {};
+    let r = !1;
+    n.stroke !== void 0 && (i.stroke = n.stroke, r = !0), n.strokeWidth !== void 0 && (i.strokeWidth = n.strokeWidth, r = !0), r && this.nodeDefaultAttrs.set(e, i);
   }
   /**
    * 从 x6EdgeConfig.attrs.line 中提取基线描边，用于管理层清理时恢复。
@@ -574,24 +580,45 @@ class At {
   saveEdgeDefaultAttrs(e, t) {
     const n = t?.x6EdgeConfig?.attrs?.line;
     if (!n) return;
-    const r = {};
-    let i = !1;
-    n.stroke !== void 0 && (r.stroke = n.stroke, i = !0), n.strokeWidth !== void 0 && (r.strokeWidth = n.strokeWidth, i = !0), n.strokeDasharray !== void 0 && (r.strokeDasharray = n.strokeDasharray, i = !0), i && this.edgeDefaultAttrs.set(e, r);
+    const i = {};
+    let r = !1;
+    n.stroke !== void 0 && (i.stroke = n.stroke, r = !0), n.strokeWidth !== void 0 && (i.strokeWidth = n.strokeWidth, r = !0), n.strokeDasharray !== void 0 && (i.strokeDasharray = n.strokeDasharray, r = !0), r && this.edgeDefaultAttrs.set(e, i);
   }
-  /** 恢复节点 attr 到基线值；无基线时移除。 */
+  /**
+   * 恢复节点 attr 到基线值；无基线时设为安全默认值。
+   * 不使用 removeAttrByPath，因为对 Vue Shape 节点执行 remove 会触发 X6
+   * 完整的 cell view 重渲染，可能导致 foreignObject 尺寸被瞬间重置，
+   * 使得内部 Vue 组件 (width/height: 100%) 折叠后无法恢复。
+   */
   restoreNodeAttr(e, t, o) {
     const n = this.nodeDefaultAttrs.get(e.id)?.[o];
-    n !== void 0 ? e.setAttrByPath(t, n) : e.removeAttrByPath(t);
+    if (n !== void 0)
+      e.setAttrByPath(t, n);
+    else {
+      const i = o === "stroke" ? "none" : 0;
+      e.setAttrByPath(t, i);
+    }
   }
   /** 恢复边 attr 到基线值；无基线时移除。 */
   restoreEdgeAttr(e, t, o) {
     const n = this.edgeDefaultAttrs.get(e.id)?.[o];
-    n !== void 0 ? e.setAttrByPath(t, n) : e.removeAttrByPath(t);
+    n !== void 0 ? this.setEdgeAttrIfChanged(e, t, n) : e.attr(t) !== void 0 && e.removeAttrByPath(t);
+  }
+  /**
+   * 仅在值实际变化时调用 setAttrByPath。
+   * X6 的 setAttrByPath 每次都会创建新的 attrs 对象引用并触发 change:attrs 事件，
+   * 即使值相同也会导致 EdgeView.update() → updateConnection() → 路由器全量重算。
+   */
+  setEdgeAttrIfChanged(e, t, o) {
+    e.attr(t) !== o && e.setAttrByPath(t, o);
+  }
+  getNodeRingTarget(e) {
+    return e ? e.querySelector(".flow-canvas-highlight-target") ?? e.querySelector(".flow-canvas-node-surface > :first-child") : null;
   }
   /** 让正式边接管交互式预览边时，恢复 schema 定义的端点 marker。 */
   syncEdgeMarker(e, t, o) {
-    const r = t?.x6EdgeConfig?.attrs?.line?.[o], i = `line/${o}`;
-    e.removeAttrByPath(i), r !== void 0 && e.setAttrByPath(i, r);
+    const i = t?.x6EdgeConfig?.attrs?.line?.[o], r = `line/${o}`;
+    e.removeAttrByPath(r), i !== void 0 && e.setAttrByPath(r, i);
   }
   dispose() {
     this.knownNodeIds.clear(), this.knownEdgeIds.clear();
@@ -599,21 +626,21 @@ class At {
   resolveNodes(e) {
     const t = /* @__PURE__ */ new Map();
     for (const [o, n] of Object.entries(e.nodes)) {
-      const r = this.schema.nodeTypes[n.type];
-      if (!r)
-        throw new pt(
+      const i = this.schema.nodeTypes[n.type];
+      if (!i)
+        throw new vt(
           `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 i = this.shapeRegistry.registerNodeType(n.type, r.component), l = r.getSize(n), a = Fe(n, r.getPorts);
-      t.set(o, { model: n, definition: r, shapeName: i, size: l, ports: a });
+      const r = this.shapeRegistry.registerNodeType(n.type, i.component), l = i.getSize(n), a = qe(n, i.getPorts);
+      t.set(o, { model: n, definition: i, shapeName: r, size: l, ports: a });
     }
     return t;
   }
   resolveEdges(e) {
     const t = /* @__PURE__ */ new Map();
     for (const [o, n] of Object.entries(e.edges)) {
-      const r = n.type ?? this.schema.defaultEdgeType ?? "default", i = this.schema.edgeTypes?.[r];
-      t.set(o, { model: n, definition: i });
+      const i = n.type ?? this.schema.defaultEdgeType ?? "default", r = this.schema.edgeTypes?.[i];
+      t.set(o, { model: n, definition: r });
     }
     return t;
   }
@@ -625,36 +652,36 @@ class At {
         n && this.graph.removeCell(n), this.knownNodeIds.delete(o), this.defaultHighlightedNodeIds.delete(o), this.prevNodeDecorationClasses.delete(o), this.prevNodeDecorationColors.delete(o), this.nodeDefaultAttrs.delete(o);
       }
     for (const [o, n] of e) {
-      const r = this.graph.getCellById(o);
-      r ? this.updateExistingNode(r, n) : this.addNewNode(o, n);
+      const i = this.graph.getCellById(o);
+      i ? this.updateExistingNode(i, n) : this.addNewNode(o, n);
     }
   }
   updateExistingNode(e, t) {
-    const { model: o, size: n, ports: r, definition: i } = t;
+    const { model: o, size: n, ports: i, definition: r } = t;
     if (e.getData()?.type !== o.type) {
       this.graph.removeCell(e), this.addNewNode(e.id, t);
       return;
     }
     const a = e.getPosition();
     (a.x !== o.position.x || a.y !== o.position.y) && e.setPosition(o.position.x, o.position.y);
-    const g = e.getSize();
-    (g.width !== n.width || g.height !== n.height) && e.setSize(n.width, n.height, { silent: !0 }), this.syncNodePorts(e, r), e.setData({ ...o }), this.applyNodeBehavior(e, o, i), this.applyNodeHighlightAndDecoration(e, o);
+    const h = e.getSize();
+    (h.width !== n.width || h.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((i) => i.id)), r = new Set(o.map((i) => i.id));
-    for (const i of o)
-      i.id && !n.has(i.id) && e.removePort(i.id);
-    for (const i of t)
-      r.has(i.id) || e.addPort({ id: i.id, group: i.group, ...i.x6PortConfig });
+    const o = e.getPorts(), n = new Set(t.map((r) => r.id)), i = new Set(o.map((r) => r.id));
+    for (const r of o)
+      r.id && !n.has(r.id) && e.removePort(r.id);
+    for (const r of t)
+      i.has(r.id) || e.addPort({ id: r.id, group: r.group, ...r.x6PortConfig });
   }
   addNewNode(e, t) {
-    const { model: o, shapeName: n, size: r, ports: i, definition: l } = t, a = {
+    const { model: o, shapeName: n, size: i, ports: r, definition: l } = t, a = {
       id: o.id,
       shape: n,
       x: o.position.x,
       y: o.position.y,
-      width: r.width,
-      height: r.height,
+      width: i.width,
+      height: i.height,
       data: { ...o },
       ports: {
         groups: {
@@ -683,20 +710,23 @@ class At {
             }
           }
         },
-        items: i.map((d) => ({ id: d.id, group: d.group, ...d.x6PortConfig }))
+        items: r.map((u) => ({ id: u.id, group: u.group, ...u.x6PortConfig }))
       },
       ...l.x6CellConfig
     };
     this.graph.addNode(a), this.knownNodeIds.add(e), this.saveNodeDefaultAttrs(e, l);
-    const g = this.graph.getCellById(e);
-    g && (this.applyNodeBehavior(g, o, l), this.applyNodeHighlightAndDecoration(g, o));
+    const h = this.graph.getCellById(e);
+    h && (this.applyNodeBehavior(h, o, l), this.applyNodeHighlightAndDecoration(h, o));
   }
   /**
    * 将 schema 定义的 getBehavior 映射到 X6 节点属性。
    * NodeBehaviorConfig 的每个字段都映射到 X6 Cell 对应能力：
    *  - draggable → 是否可拖拽移动
    *  - selectable → 是否可被选中（注意：X6 Selection 插件也有全局控制）
-   *  - connectable → ports 的 magnet 属性，控制是否可从该节点发起连线
+   *  - connectable / targetable → ports 的 magnet 属性
+   *      true       → 可发起，也可作为目标
+   *      'passive'  → 不可发起，但仍可作为目标（如结束节点）
+   *      false      → 不可发起，也不可作为目标
    *  - showPorts → ports 的可见性
    *  - deletable → 存入 cell data，由删除操作（插件/快捷键）自行读取判断
    */
@@ -704,30 +734,30 @@ class At {
     if (!o.getBehavior) return;
     const n = this.resolveCanvasContext?.();
     if (!n) return;
-    const r = o.getBehavior(t, n);
-    if (r.draggable !== void 0 && e.setProp("draggable", r.draggable, { silent: !0 }), r.connectable !== void 0) {
-      const l = r.connectable;
+    const i = o.getBehavior(t, n);
+    if (i.draggable !== void 0 && e.setProp("draggable", i.draggable, { silent: !0 }), i.connectable !== void 0) {
+      const l = i.connectable ? !0 : i.targetable === !1 ? !1 : "passive";
       for (const a of e.getPorts())
         e.setPortProp(a.id, "attrs/circle/magnet", l, { silent: !0 });
     }
-    if (r.showPorts !== void 0) {
-      const l = r.showPorts;
+    if (i.showPorts !== void 0) {
+      const l = i.showPorts;
       for (const a of e.getPorts())
         e.setPortProp(a.id, "attrs/circle/visibility", l ? "visible" : "hidden", { silent: !0 });
     }
-    const i = e.getData() ?? {};
-    r.deletable !== void 0 && i._deletable !== r.deletable && e.setData({ ...i, _deletable: r.deletable }, { silent: !0 }), r.selectable !== void 0 && i._selectable !== r.selectable && e.setData({ ...e.getData(), _selectable: r.selectable }, { 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 });
   }
   syncEdges(e, t) {
     const o = new Set(e.keys());
     for (const n of this.knownEdgeIds)
       if (!o.has(n)) {
-        const r = this.graph.getCellById(n);
-        r && this.graph.removeCell(r), this.knownEdgeIds.delete(n), this.defaultHighlightedEdgeIds.delete(n), this.prevEdgeDecorationClasses.delete(n), this.prevEdgeDecorationColors.delete(n), this.prevEdgeStyleIds.delete(n), this.edgeDefaultAttrs.delete(n);
+        const i = this.graph.getCellById(n);
+        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, r] of e) {
-      const i = this.graph.getCellById(n), { model: l, definition: a } = r;
-      i ? (this.updateExistingEdge(i, l, a, t), this.knownEdgeIds.has(n) || (this.knownEdgeIds.add(n), this.saveEdgeDefaultAttrs(n, a))) : this.addNewEdge(n, l, a);
+    for (const [n, i] of e) {
+      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);
     }
   }
   /**
@@ -736,16 +766,20 @@ class At {
    * 需要用 (currentSource as any).cell 来比较。
    */
   updateExistingEdge(e, t, o, n) {
-    const r = e.getSource(), i = e.getTarget();
-    if ((r.cell !== t.source.nodeId || r.port !== t.source.portId) && e.setSource({ cell: t.source.nodeId, port: t.source.portId }), (i.cell !== t.target.nodeId || i.port !== t.target.portId) && e.setTarget({ cell: t.target.nodeId, port: t.target.portId }), o?.router) {
-      const l = typeof o.router == "string" ? { name: o.router } : o.router;
-      e.setRouter(l);
-    }
-    if (o?.connector) {
-      const l = typeof o.connector == "string" ? { name: o.connector } : o.connector;
-      e.setConnector(l);
+    const i = e.getSource(), r = e.getTarget(), l = i.cell !== t.source.nodeId || i.port !== t.source.portId, a = r.cell !== t.target.nodeId || r.port !== t.target.portId;
+    l && e.setSource({ cell: t.source.nodeId, port: t.source.portId }), a && e.setTarget({ cell: t.target.nodeId, port: t.target.portId });
+    const u = (e.getData()?.type ?? void 0) !== (t.type ?? void 0);
+    if (u) {
+      if (o?.router) {
+        const g = typeof o.router == "string" ? { name: o.router } : o.router;
+        e.setRouter(g);
+      }
+      if (o?.connector) {
+        const g = typeof o.connector == "string" ? { name: o.connector } : o.connector;
+        e.setConnector(g);
+      }
     }
-    this.syncEdgeMarker(e, o, "sourceMarker"), this.syncEdgeMarker(e, o, "targetMarker"), this.syncEdgeLabels(e, t), e.setData({ ...t }, { silent: !0 }), this.applyEdgeStyleAndDecoration(e, t, o);
+    (u || l || a) && (this.syncEdgeMarker(e, o, "sourceMarker"), this.syncEdgeMarker(e, o, "targetMarker")), this.syncEdgeLabels(e, t), e.getZIndex() !== Te && e.setZIndex(Te), e.setData({ ...t }, { silent: !0 }), this.applyEdgeStyleAndDecoration(e, t, o);
   }
   syncEdgeLabels(e, t) {
     if (!t.labels?.length) {
@@ -766,29 +800,41 @@ class At {
       source: { cell: t.source.nodeId, port: t.source.portId },
       target: { cell: t.target.nodeId, port: t.target.portId },
       data: { ...t },
-      zIndex: -1
+      zIndex: Te
     };
-    o?.router && (n.router = typeof o.router == "string" ? { name: o.router } : o.router), o?.connector && (n.connector = typeof o.connector == "string" ? { name: o.connector } : o.connector), o?.x6EdgeConfig && Object.assign(n, o.x6EdgeConfig), t.labels?.length && (n.labels = t.labels.map((i) => ({
-      attrs: { label: { text: i.text ?? "" } },
-      position: i.position != null ? { distance: i.position } : void 0
+    o?.router && (n.router = typeof o.router == "string" ? { name: o.router } : o.router), o?.connector && (n.connector = typeof o.connector == "string" ? { name: o.connector } : o.connector), o?.x6EdgeConfig && Object.assign(n, o.x6EdgeConfig), t.labels?.length && (n.labels = t.labels.map((r) => ({
+      attrs: { label: { text: r.text ?? "" } },
+      position: r.position != null ? { distance: r.position } : void 0
     }))), this.graph.addEdge(n), this.knownEdgeIds.add(e), this.saveEdgeDefaultAttrs(e, o);
-    const r = this.graph.getCellById(e);
-    r && this.applyEdgeStyleAndDecoration(r, t, o);
+    const i = this.graph.getCellById(e);
+    i && this.applyEdgeStyleAndDecoration(i, t, o);
   }
   /**
-   * 外部通知选区、高亮或 hover 变化时，重算所有边的视觉样式。
-   * 每条边走统一分层管道 applyEdgeStyleAndDecoration，
-   * 保证 defaultHighlight → schema style() → plugin decoration 的覆盖顺序。
+   * 重算所有边的视觉样式。
+   * 仅在需要全量刷新的场景使用（如高亮批量变更、选区批量变更）。
    */
   refreshEdgeStyles() {
     if (this.lastModel)
       for (const [e, t] of Object.entries(this.lastModel.edges)) {
         const o = this.graph.getCellById(e);
         if (!o?.isEdge()) continue;
-        const n = t.type ?? this.schema.defaultEdgeType ?? "default", r = this.schema.edgeTypes?.[n];
-        this.applyEdgeStyleAndDecoration(o, t, r);
+        const n = t.type ?? this.schema.defaultEdgeType ?? "default", i = this.schema.edgeTypes?.[n];
+        this.applyEdgeStyleAndDecoration(o, t, i);
       }
   }
+  /**
+   * 仅刷新单条边的视觉样式。
+   * 用于 hover 等只影响个别边的场景，避免对无关边触发 change:attrs → 路由重算。
+   */
+  refreshSingleEdgeStyle(e) {
+    if (!this.lastModel) return;
+    const t = this.lastModel.edges[e];
+    if (!t) return;
+    const o = this.graph.getCellById(e);
+    if (!o?.isEdge()) return;
+    const n = t.type ?? this.schema.defaultEdgeType ?? "default", i = this.schema.edgeTypes?.[n];
+    this.applyEdgeStyleAndDecoration(o, t, i);
+  }
   /**
    * 重算所有节点的高亮 + 装饰视觉。
    */
@@ -803,18 +849,25 @@ class At {
    * 单节点的高亮 + 装饰统一管道。
    * 所有路径（FlowModel 同步更新/新增节点/显式刷新高亮）必须走此方法。
    *
-   * body/stroke 的分层优先级（低 → 高）：
+   * 可见高亮的分层优先级（低 → 高）：
    *   1. 默认高亮 (#3a84ff) — 节点在 highlightedNodeIds 中时兜底
    *   2. 插件装饰 (decorateNode().borderColor) — 始终覆盖高亮
    *
    * 最终值 = decorationColor ?? highlightColor ?? (清除)。
-   * 只在"曾经设过 → 现在无值"时执行 removeAttrByPath，避免误删 X6 原始样式。
+   * 对 Vue Shape 节点，真正可见的 ring 通过节点高亮目标元素的独立装饰态 / 脉冲态 / 选中态 class 呈现；
+   * body/stroke 仅作为普通 SVG shape 的兜底同步。
    */
   applyNodeHighlightAndDecoration(e, t) {
-    const o = this.highlightedNodeIds.has(e.id), n = this.resolveNodeDecoration?.(t), r = this.prevNodeDecorationClasses.get(e.id);
-    r && (this.graph.findViewByCell(e)?.container?.classList.remove(r), this.prevNodeDecorationClasses.delete(e.id)), n?.className && (this.graph.findViewByCell(e)?.container?.classList.add(n.className), this.prevNodeDecorationClasses.set(e.id, n.className));
-    const i = n?.borderColor, a = i ?? (o ? "#3a84ff" : void 0), g = this.prevNodeDecorationColors.has(e.id) || this.defaultHighlightedNodeIds.has(e.id);
-    a ? (e.setAttrByPath("body/stroke", a), e.setAttrByPath("body/strokeWidth", 2)) : g && (this.restoreNodeAttr(e, "body/stroke", "stroke"), this.restoreNodeAttr(e, "body/strokeWidth", "strokeWidth")), i ? this.prevNodeDecorationColors.add(e.id) : this.prevNodeDecorationColors.delete(e.id), o && !i ? this.defaultHighlightedNodeIds.add(e.id) : this.defaultHighlightedNodeIds.delete(e.id);
+    const o = this.highlightedNodeIds.has(e.id), n = this.resolveNodeDecoration?.(t), i = this.graph.findViewByCell(e)?.container, r = this.getNodeRingTarget(i), l = this.prevNodeDecorationClasses.get(e.id);
+    l && (i?.classList.remove(l), this.prevNodeDecorationClasses.delete(e.id)), n?.className && (i?.classList.add(n.className), this.prevNodeDecorationClasses.set(e.id, n.className));
+    const a = n?.borderColor, u = a ?? (o ? "#3a84ff" : void 0), g = this.prevNodeDecorationColors.has(e.id) || this.defaultHighlightedNodeIds.has(e.id);
+    u ? (e.setAttrByPath("body/stroke", u), e.setAttrByPath("body/strokeWidth", 2)) : g && (this.restoreNodeAttr(e, "body/stroke", "stroke"), this.restoreNodeAttr(e, "body/strokeWidth", "strokeWidth")), r && (r.classList.add(Lt), a ? (r.classList.add(Fe), r.style.setProperty("--flow-canvas-node-decoration-ring-background", a), r.style.setProperty("--flow-canvas-node-decoration-ring-opacity", "0.95")) : (r.classList.remove(Fe), r.style.removeProperty("--flow-canvas-node-decoration-ring-background"), r.style.removeProperty("--flow-canvas-node-decoration-ring-opacity")), o ? (r.classList.add(Ue), r.style.setProperty(
+      "--flow-canvas-node-pulse-ring-background",
+      a ?? Ot
+    ), r.style.setProperty("--flow-canvas-node-pulse-ring-opacity", "0.95")) : (r.classList.remove(Ue), r.style.removeProperty("--flow-canvas-node-pulse-ring-background"), r.style.removeProperty("--flow-canvas-node-pulse-ring-opacity"))), a ? this.prevNodeDecorationColors.add(e.id) : this.prevNodeDecorationColors.delete(e.id), o && !a ? this.defaultHighlightedNodeIds.add(e.id) : this.defaultHighlightedNodeIds.delete(e.id);
+  }
+  getHoveredEdgeId() {
+    return this.hoveredEdgeId;
   }
   setHoveredEdge(e) {
     this.hoveredEdgeId = e;
@@ -823,7 +876,8 @@ class At {
     this.highlightedNodeIds = new Set(e);
   }
   setHighlightedEdges(e) {
-    this.highlightedEdgeIds = new Set(e);
+    const t = this.highlightedEdgeIds;
+    return this.highlightedEdgeIds = new Set(e), t;
   }
   /**
    * 单条边的 style + highlight + decoration 统一管道。
@@ -837,46 +891,53 @@ class At {
    * 最终值 = decorationStroke ?? styleStroke ?? defaultHighlightStroke ?? (清除)。
    */
   applyEdgeStyleAndDecoration(e, t, o) {
-    const n = this.highlightedEdgeIds.has(e.id), r = this.resolveEdgeDecoration?.(t), i = this.prevEdgeDecorationClasses.get(e.id);
-    i && (this.graph.findViewByCell(e)?.container?.classList.remove(i), this.prevEdgeDecorationClasses.delete(e.id)), r?.className && (this.graph.findViewByCell(e)?.container?.classList.add(r.className), this.prevEdgeDecorationClasses.set(e.id, r.className));
-    let l, a, g;
+    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 l, a, h;
     if (o?.style) {
-      const E = this.graph.isSelected?.(e) ?? !1, w = this.hoveredEdgeId === e.id, N = o.style(t, { selected: E, highlighted: n, hovered: w });
-      l = N.stroke, a = N.strokeWidth, g = N.strokeDasharray;
+      const m = this.graph.isSelected?.(e) ?? !1, k = this.hoveredEdgeId === e.id, S = o.style(t, { selected: m, highlighted: n, hovered: k });
+      l = S.stroke, a = S.strokeWidth, h = S.strokeDasharray;
     }
-    const d = !o?.style && n ? "#3a84ff" : void 0, v = r?.strokeColor, f = v ?? l ?? d, p = !!o?.style || this.prevEdgeDecorationColors.has(e.id) || this.defaultHighlightedEdgeIds.has(e.id) || this.prevEdgeStyleIds.has(e.id);
-    f ? e.setAttrByPath("line/stroke", f) : p && 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"), g ? e.setAttrByPath("line/strokeDasharray", g) : 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)), v ? this.prevEdgeDecorationColors.add(e.id) : this.prevEdgeDecorationColors.delete(e.id), d ? this.defaultHighlightedEdgeIds.add(e.id) : this.defaultHighlightedEdgeIds.delete(e.id);
+    const u = !o?.style && n ? "#3a84ff" : void 0, g = i?.strokeColor, p = g ?? l ?? u, x = !!o?.style || this.prevEdgeDecorationColors.has(e.id) || this.defaultHighlightedEdgeIds.has(e.id) || this.prevEdgeStyleIds.has(e.id);
+    p ? this.setEdgeAttrIfChanged(e, "line/stroke", p) : x && this.restoreEdgeAttr(e, "line/stroke", "stroke"), o?.style ? (this.prevEdgeStyleIds.add(e.id), a ? this.setEdgeAttrIfChanged(e, "line/strokeWidth", a) : this.restoreEdgeAttr(e, "line/strokeWidth", "strokeWidth"), h ? this.setEdgeAttrIfChanged(e, "line/strokeDasharray", h) : 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), u ? this.defaultHighlightedEdgeIds.add(e.id) : this.defaultHighlightedEdgeIds.delete(e.id);
   }
 }
-class Tt {
-  instanceId = W();
+class Bt {
+  instanceId = te();
   registeredShapes = /* @__PURE__ */ new Map();
+  wrappedComponents = /* @__PURE__ */ new Map();
   getShapeName(e) {
     let t = this.registeredShapes.get(e);
     return t || (t = `flow-node-${this.instanceId}-${e}`, this.registeredShapes.set(e, t)), t;
   }
   registerNodeType(e, t) {
     const o = this.getShapeName(e);
-    return ft({
+    let n = this.wrappedComponents.get(e);
+    return n || (n = fe({
+      name: `FlowCanvasNodeShape${e.replace(/(^|[-_])(\w)/g, (i, r, l) => l.toUpperCase())}`,
+      setup() {
+        return () => Re("div", { class: "flow-canvas-node-surface" }, [Re(t)]);
+      }
+    }), this.wrappedComponents.set(e, n)), gt({
       shape: o,
-      component: t,
+      component: n,
       width: 100,
       height: 40
     }), o;
   }
   dispose() {
-    this.registeredShapes.clear();
+    this.registeredShapes.clear(), this.wrappedComponents.clear();
   }
 }
-class Rt {
+class Ht {
   graph;
   onUiEvent;
   onCommand;
   flowModelRef;
   idGenerator;
   disposers = [];
-  constructor(e, t, o, n, r) {
-    this.graph = e, this.onUiEvent = t, this.onCommand = o, this.flowModelRef = n, this.idGenerator = r ?? He, this.bindEvents();
+  constructor(e, t, o, n, i) {
+    this.graph = e, this.onUiEvent = t, this.onCommand = o, this.flowModelRef = n, this.idGenerator = i ?? Ge, this.bindEvents();
   }
   dispose() {
     for (const e of this.disposers) e();
@@ -896,11 +957,11 @@ class Rt {
     }), this.on("edge:click", ({ edge: e, e: t }) => {
       const n = t.target?.closest?.(".x6-edge-label");
       if (n) {
-        const i = e.getData?.()?.labels ?? [], l = n.parentElement?.querySelectorAll(".x6-edge-label"), a = l ? Array.from(l).indexOf(n) : 0, g = i[Math.max(0, a)];
+        const r = e.getData?.()?.labels ?? [], l = n.parentElement?.querySelectorAll(".x6-edge-label"), a = l ? Array.from(l).indexOf(n) : 0, h = r[Math.max(0, a)];
         this.onUiEvent({
           type: "edge.label.click",
           edgeId: e.id,
-          labelId: g?.id ?? `label-${a}`
+          labelId: h?.id ?? `label-${a}`
         });
         return;
       }
@@ -916,7 +977,7 @@ class Rt {
     }), this.on("node:moved", ({ node: e }) => {
       const t = e.getPosition();
       this.onCommand({
-        id: W(),
+        id: te(),
         source: "user:drag",
         label: "移动节点",
         timestamp: Date.now(),
@@ -925,9 +986,9 @@ class Rt {
     }), this.on("edge:connected", ({ edge: e, isNew: t }) => {
       const o = e.getSourceCell(), n = e.getTargetCell();
       if (!o || !n) return;
-      const r = e.getSourcePortId(), i = e.getTargetPortId(), l = e.id in this.flowModelRef.value.edges;
+      const i = e.getSourcePortId(), r = e.getTargetPortId(), l = e.id in this.flowModelRef.value.edges;
       t && !l ? (this.graph.removeCell(e), this.onCommand({
-        id: W(),
+        id: te(),
         source: "user:drag",
         label: "连线",
         timestamp: Date.now(),
@@ -936,13 +997,13 @@ class Rt {
             type: "edge.add",
             edge: {
               id: this.idGenerator("edge"),
-              source: { nodeId: o.id, portId: r ?? void 0 },
-              target: { nodeId: n.id, portId: i ?? void 0 }
+              source: { nodeId: o.id, portId: i ?? void 0 },
+              target: { nodeId: n.id, portId: r ?? void 0 }
             }
           }
         ]
       })) : this.onCommand({
-        id: W(),
+        id: te(),
         source: "user:drag",
         label: "重连",
         timestamp: Date.now(),
@@ -950,32 +1011,32 @@ class Rt {
           {
             type: "edge.reconnect",
             edgeId: e.id,
-            source: { nodeId: o.id, portId: r ?? void 0 },
-            target: { nodeId: n.id, portId: i ?? void 0 }
+            source: { nodeId: o.id, portId: i ?? void 0 },
+            target: { nodeId: n.id, portId: r ?? void 0 }
           }
         ]
       });
     }), this.on("edge:change:labels", ({ edge: e, current: t }) => {
       const n = e.getData?.()?.labels ?? [];
       if (!n.length || !t?.length) return;
-      const r = [];
-      for (let i = 0; i < Math.min(n.length, t.length); i++) {
-        const l = t[i], a = n[i];
+      const i = [];
+      for (let r = 0; r < Math.min(n.length, t.length); r++) {
+        const l = t[r], a = n[r];
         if (!a?.id) continue;
-        const g = typeof l.position == "object" ? l.position?.distance : l.position;
-        g != null && r.push({
+        const h = typeof l.position == "object" ? l.position?.distance : l.position;
+        h != null && i.push({
           type: "edge.label.update",
           edgeId: e.id,
           labelId: a.id,
-          patch: { position: g }
+          patch: { position: h }
         });
       }
-      r.length && this.onCommand({
-        id: W(),
+      i.length && this.onCommand({
+        id: te(),
         source: "user:drag",
         label: "拖动标签",
         timestamp: Date.now(),
-        commands: r
+        commands: i
       });
     });
   }
@@ -983,122 +1044,155 @@ class Rt {
     this.graph.on(e, t), this.disposers.push(() => this.graph.off(e, t));
   }
 }
-function $t(s) {
+function Gt(s) {
   function e(t) {
     const o = s.getCellById(t);
     if (!o || !o.isNode()) return null;
-    const n = o, r = n.getPosition(), i = n.getSize(), l = { x: r.x, y: r.y, width: i.width, height: i.height }, a = s.localToGraph(l);
+    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 {
     getNodeScreenRect: e
   };
 }
-const Lt = 100;
-function Bt({
+function st(s) {
+  return {
+    nodeIds: s.filter((e) => e.isNode()).map((e) => e.id),
+    edgeIds: s.filter((e) => e.isEdge()).map((e) => e.id)
+  };
+}
+function qt(s, e) {
+  const t = [
+    ...e.nodeIds.map((i) => s.getCellById(i)),
+    ...e.edgeIds.map((i) => s.getCellById(i))
+  ].filter((i) => !!i);
+  if (t.length === 0) return null;
+  const o = s.getCellsBBox(t);
+  if (!o) return null;
+  const n = s.localToGraph(o);
+  return new DOMRect(n.x, n.y, n.width, n.height);
+}
+function it(s, e, t) {
+  const o = s.nodeIds.filter((r) => {
+    const l = e.nodes[r];
+    if (!l) return !1;
+    const a = t(l);
+    return a.deletable !== !1 && a.deleteDisabled !== !0;
+  }), n = new Set(o), i = s.edgeIds.filter((r) => {
+    const l = e.edges[r];
+    return l ? !n.has(l.source.nodeId) && !n.has(l.target.nodeId) : !1;
+  });
+  return { nodeIds: o, edgeIds: i };
+}
+function Ft(s) {
+  return [
+    ...s.edgeIds.map((e) => ({ type: "edge.remove", edgeId: e })),
+    ...s.nodeIds.map((e) => ({ type: "node.remove", nodeId: e }))
+  ];
+}
+const Ut = 100;
+function zt({
   graph: s,
   overlayManager: e,
   executeCommand: t,
   schema: o,
   flowModel: n,
+  getNodeBehavior: i,
   idGenerator: r,
-  defaultInsertGap: i,
-  getContextMenuItems: l,
-  onHighlightChange: a,
-  resolveNodeShape: g
+  defaultInsertGap: l,
+  getContextMenuItems: a,
+  onHighlightChange: h,
+  resolveNodeShape: u
 }) {
-  const d = r ?? He;
-  let v = [], f = [], p = null, E = !1, w = null, N = !1;
-  async function m() {
-    if (E) return p;
-    E = !0;
+  const g = r ?? Ge;
+  let p = [], x = [], m = null, k = !1, S = null;
+  async function T() {
+    if (k) return m;
+    k = !0;
     try {
-      const h = await import("@antv/x6-plugin-dnd"), b = h.Dnd ?? h.default;
-      return b ? (p = new b({
+      const f = await import("@antv/x6-plugin-dnd"), d = f.Dnd ?? f.default;
+      return d ? (m = new d({
         target: s,
         scaled: !0,
         animation: !0,
-        getDragNode: (C) => C.clone(),
-        getDropNode: (C) => C.clone()
-      }), p) : null;
+        getDragNode: (c) => c.clone(),
+        getDropNode: (c) => c.clone()
+      }), m) : null;
     } catch {
       return console.warn("[flow-canvas] @antv/x6-plugin-dnd not available, add it to your dependencies"), null;
     }
   }
-  async function D() {
-    if (!N) {
-      N = !0;
-      try {
-        const h = await import("@antv/x6-plugin-export"), b = h.Export ?? h.default;
-        b && s.use(new b());
-      } catch {
-        console.warn("[flow-canvas] @antv/x6-plugin-export not available, add it to your dependencies");
-      }
-    }
+  function P() {
+    return new Promise((f) => {
+      requestAnimationFrame(() => requestAnimationFrame(() => f()));
+    });
   }
-  const z = ({ node: h }) => {
-    const b = h.getData?.();
-    if (!b?._dndSessionId || b._dndSessionId !== w) return;
-    w = null;
-    const C = h.getPosition();
-    s.removeNode(h.id);
-    const { _dndSessionId: L, ...R } = b, q = R.id || d("node");
+  const G = ({ node: f }) => {
+    const d = f.getData?.();
+    if (!d?._dndSessionId || d._dndSessionId !== S) return;
+    S = null;
+    const c = f.getPosition();
+    s.removeNode(f.id);
+    const { _dndSessionId: v, ...b } = d, E = b.id || g("node");
     t({
-      id: W(),
+      id: te(),
       source: "user:drag",
       label: "拖入节点",
       timestamp: Date.now(),
       commands: [
         {
           type: "node.add",
-          node: { ...R, id: q, position: { x: C.x, y: C.y } }
+          node: { ...b, id: E, position: { x: c.x, y: c.y } }
         }
       ]
     });
   };
-  s.on("node:added", z);
-  function X(h) {
-    const b = o.nodeTypes[h.type];
-    return Fe(h, b?.getPorts);
+  s.on("node:added", G);
+  function K(f) {
+    const d = o.nodeTypes[f.type];
+    return qe(f, d?.getPorts);
+  }
+  function O(f) {
+    return f ?? st(s.getSelectedCells?.() ?? []);
   }
-  function j(h, b, C, L, R) {
-    switch (h) {
+  function W(f, d, c, v, b) {
+    switch (f) {
       case "left":
         return {
-          x: b.position.x - R - L.width,
-          y: b.position.y + (C.height - L.height) / 2
+          x: d.position.x - b - v.width,
+          y: d.position.y + (c.height - v.height) / 2
         };
       case "top":
         return {
-          x: b.position.x + (C.width - L.width) / 2,
-          y: b.position.y - R - L.height
+          x: d.position.x + (c.width - v.width) / 2,
+          y: d.position.y - b - v.height
         };
       case "bottom":
         return {
-          x: b.position.x + (C.width - L.width) / 2,
-          y: b.position.y + C.height + R
+          x: d.position.x + (c.width - v.width) / 2,
+          y: d.position.y + c.height + b
         };
       default:
         return {
-          x: b.position.x + C.width + R,
-          y: b.position.y + (C.height - L.height) / 2
+          x: d.position.x + c.width + b,
+          y: d.position.y + (c.height - v.height) / 2
         };
     }
   }
-  function oe(h, b, C) {
-    switch (h) {
+  function z(f, d, c) {
+    switch (f) {
       case "left":
-        return { x: -(b.width + C), y: 0 };
+        return { x: -(d.width + c), y: 0 };
       case "top":
-        return { x: 0, y: -(b.height + C) };
+        return { x: 0, y: -(d.height + c) };
       case "bottom":
-        return { x: 0, y: b.height + C };
+        return { x: 0, y: d.height + c };
       default:
-        return { x: b.width + C, y: 0 };
+        return { x: d.width + c, y: 0 };
     }
   }
-  function G(h) {
-    switch (h) {
+  function M(f) {
+    switch (f) {
       case "left":
         return "right";
       case "top":
@@ -1109,15 +1203,15 @@ function Bt({
         return "left";
     }
   }
-  return {
+  const y = {
     zoomIn() {
       s.zoom(0.1);
     },
     zoomOut() {
       s.zoom(-0.1);
     },
-    zoomTo(h) {
-      s.zoomTo(h);
+    zoomTo(f) {
+      s.zoomTo(f);
     },
     zoomToFit() {
       s.zoomToFit({ padding: 40, maxScale: 1.5 });
@@ -1131,233 +1225,252 @@ function Bt({
     scrollToOrigin() {
       s.translate(0, 0);
     },
-    scrollToNode(h) {
-      const b = s.getCellById(h);
-      b && s.centerCell(b);
+    scrollToNode(f) {
+      const d = s.getCellById(f);
+      d && s.centerCell(d);
     },
     getSelection() {
-      const h = s.getSelectedCells?.() ?? [];
-      return {
-        nodeIds: h.filter((b) => b.isNode()).map((b) => b.id),
-        edgeIds: h.filter((b) => b.isEdge()).map((b) => b.id)
-      };
+      return O();
     },
-    selectNodes(h) {
-      const b = h.map((C) => s.getCellById(C)).filter(Boolean);
-      s.select?.(b);
+    getSelectionBounds(f) {
+      return qt(s, O(f));
     },
-    selectEdges(h) {
-      const b = h.map((C) => s.getCellById(C)).filter(Boolean);
-      s.select?.(b);
+    selectNodes(f) {
+      const d = f.map((c) => s.getCellById(c)).filter(Boolean);
+      s.select?.(d);
+    },
+    selectEdges(f) {
+      const d = f.map((c) => s.getCellById(c)).filter(Boolean);
+      s.select?.(d);
     },
     clearSelection() {
-      const h = s.getSelectedCells?.();
-      h?.length && s.unselect?.(h);
+      const f = s.getSelectedCells?.();
+      f?.length && s.unselect?.(f);
+    },
+    deleteSelection(f) {
+      const d = O(f?.selection), c = it(d, n.value, i ?? (() => ({}))), v = Ft(c);
+      if (v.length === 0) return null;
+      const b = t({
+        id: te(),
+        source: f?.source ?? "user:toolbar",
+        label: f?.label ?? "删除选中",
+        timestamp: Date.now(),
+        commands: v
+      });
+      return b.status === "applied" && f?.clearSelectionAfterApply !== !1 && y.clearSelection(), b;
     },
-    registerDndSource(h, b) {
-      const C = async (L) => {
-        const R = await m();
-        if (!R) return;
-        const q = W();
-        w = q;
-        const Y = b(), H = g?.(Y.type), Q = s.createNode({
-          width: H?.width ?? 154,
-          height: H?.height ?? 54,
-          shape: H?.shapeName ?? "rect",
-          data: { ...Y, _dndSessionId: q }
+    registerDndSource(f, d) {
+      const c = async (v) => {
+        const b = await T();
+        if (!b) return;
+        const E = te();
+        S = E;
+        const B = d(), X = u?.(B.type), C = s.createNode({
+          width: X?.width ?? 154,
+          height: X?.height ?? 54,
+          shape: X?.shapeName ?? "rect",
+          data: { ...B, _dndSessionId: E }
         });
-        R.start(Q, L);
+        b.start(C, v);
       };
-      return h.addEventListener("mousedown", C), () => {
-        h.removeEventListener("mousedown", C);
+      return f.addEventListener("mousedown", c), () => {
+        f.removeEventListener("mousedown", c);
       };
     },
     /**
      * 通过编程方式发起连线：直接命中真实 port 元素，
      * 复用 X6 原生的连线拖拽流程与 connecting.createEdge 配置。
      */
-    startConnection(h, b) {
-      const C = s.getCellById(h);
-      if (!C?.isNode()) return;
-      const L = C, R = s.findViewByCell(L);
-      if (!R) return;
-      const q = R.findPortElem(b, "circle") ?? R.findPortElem(b);
-      if (!q) return;
-      const H = (q.matches?.("[magnet]") ? q : q.querySelector?.("[magnet]")) ?? q, Q = H.getBoundingClientRect(), de = Q.left + Q.width / 2, re = Q.top + Q.height / 2, ce = new MouseEvent("mousedown", {
-        clientX: de,
-        clientY: re,
+    startConnection(f, d) {
+      const c = s.getCellById(f);
+      if (!c?.isNode()) return;
+      const v = c, b = s.findViewByCell(v);
+      if (!b) return;
+      const E = b.findPortElem(d, "circle") ?? b.findPortElem(d);
+      if (!E) return;
+      const X = (E.matches?.("[magnet]") ? E : E.querySelector?.("[magnet]")) ?? E, C = X.getBoundingClientRect(), L = C.left + C.width / 2, w = C.top + C.height / 2, A = new MouseEvent("mousedown", {
+        clientX: L,
+        clientY: w,
         button: 0,
         buttons: 1,
         bubbles: !0,
         cancelable: !0
       });
-      H.dispatchEvent(ce);
+      X.dispatchEvent(A);
     },
-    async exportAsImage(h) {
-      await D();
-      const b = s;
-      return typeof b.toPNG != "function" ? (console.warn("[flow-canvas] exportAsImage requires @antv/x6-plugin-export, add it to your dependencies"), new Blob()) : new Promise((C) => {
-        b.toPNG(
-          (L) => {
-            fetch(L).then((R) => R.blob()).then(C).catch(() => C(new Blob()));
-          },
-          {
-            backgroundColor: h?.backgroundColor ?? "#ffffff",
-            padding: h?.padding ?? 20,
-            quality: h?.quality,
-            copyStyles: !0
+    async exportAsImage(f) {
+      const { domToBlob: d } = await import("modern-screenshot"), c = f?.padding ?? 20, v = f?.backgroundColor ?? s.options.background?.color ?? "#ffffff", b = s.zoom(), E = s.translate(), B = s.getContentBBox(), X = B.width / b, C = B.height / b;
+      if (X === 0 || C === 0)
+        return new Blob();
+      const L = (B.x - E.tx) / b, w = (B.y - E.ty) / b, A = Math.ceil(X + c * 2), H = Math.ceil(C + c * 2), Z = document.createElement("div");
+      Z.style.cssText = "position:fixed;left:-99999px;top:0;pointer-events:none;";
+      const V = s.container.cloneNode(!0);
+      V.style.width = `${A}px`, V.style.height = `${H}px`, V.style.overflow = "visible";
+      const ee = V.querySelector("svg");
+      ee && (ee.setAttribute("width", String(A)), ee.setAttribute("height", String(H)), ee.style.width = `${A}px`, ee.style.height = `${H}px`), V.querySelector(".x6-graph-svg-viewport")?.setAttribute("transform", `matrix(1,0,0,1,${-L + c},${-w + c})`), Z.appendChild(V), document.body.appendChild(Z);
+      try {
+        return await P(), await d(V, {
+          width: A,
+          height: H,
+          backgroundColor: v,
+          scale: f?.scale ?? window.devicePixelRatio,
+          filter: (oe) => {
+            if (oe instanceof Element) {
+              const ie = oe.getAttribute("class") ?? "";
+              if (ie.includes("x6-widget-selection") || ie.includes("x6-widget-transform") || ie.includes("x6-graph-grid") || ie.includes("x6-graph-background"))
+                return !1;
+            }
+            return !0;
           }
-        );
-      });
-    },
-    async exportAsSVG() {
-      await D();
-      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((b) => {
-        h.toSVG((C) => b(C));
-      });
+        });
+      } catch (oe) {
+        return console.warn("[flow-canvas] Export failed:", oe), new Blob();
+      } finally {
+        Z.remove();
+      }
     },
-    highlightNodes(h) {
-      v = h, a?.(v, f);
+    highlightNodes(f) {
+      p = f, h?.(p, x);
     },
-    highlightEdges(h) {
-      f = h, a?.(v, f);
+    highlightEdges(f) {
+      x = f, h?.(p, x);
     },
     clearHighlight() {
-      v = [], f = [], a?.([], []);
+      p = [], x = [], h?.([], []);
     },
     overlay: e,
-    getContextMenuItems(h) {
-      return l?.(h) ?? [];
+    getContextMenuItems(f) {
+      return a?.(f) ?? [];
     },
-    insertNodeToRight(h, b, C) {
-      const L = n.value, R = L.nodes[h];
-      if (!R)
+    insertNodeToRight(f, d, c) {
+      const v = n.value, b = v.nodes[f];
+      if (!b)
         return {
           status: "invalid",
           envelope: { id: "", source: "user:toolbar", timestamp: Date.now(), commands: [] },
-          error: { code: "constraint_violated", reason: `Source node "${h}" not found`, source: "api" }
+          error: { code: "constraint_violated", reason: `Source node "${f}" not found`, source: "api" }
         };
-      const q = C?.gap ?? i ?? Lt, Y = C?.direction ?? "right", H = o.nodeTypes[R.type], Q = o.nodeTypes[b.type], de = H?.getSize(R) ?? { width: 154, height: 54 }, re = Q?.getSize({ ...b, position: { x: 0, y: 0 } }) ?? {
+      const E = c?.gap ?? l ?? Ut, B = c?.direction ?? "right", X = o.nodeTypes[b.type], C = o.nodeTypes[d.type], L = X?.getSize(b) ?? { width: 154, height: 54 }, w = C?.getSize({ ...d, position: { x: 0, y: 0 } }) ?? {
         width: 154,
         height: 54
-      }, ce = j(Y, R, de, re, q), ue = b.id || d("node"), Ie = { ...b, id: ue, position: ce }, se = [{ type: "node.add", node: Ie }], Me = oe(Y, re, q), ie = { x: ce.x, y: ce.y, width: re.width, height: re.height };
-      for (const [ae, Z] of Object.entries(L.nodes)) {
-        if (ae === h || ae === ue) continue;
-        const ve = o.nodeTypes[Z.type]?.getSize(Z) ?? { width: 154, height: 54 }, te = ie.x < Z.position.x + ve.width && ie.x + ie.width > Z.position.x, ye = ie.y < Z.position.y + ve.height && ie.y + ie.height > Z.position.y;
-        te && ye && se.push({
+      }, A = W(B, b, L, w, E), H = d.id || g("node"), Z = { ...d, id: H, position: A }, V = [{ type: "node.add", node: Z }], ee = z(B, w, E), Q = { x: A.x, y: A.y, width: w.width, height: w.height };
+      for (const [ie, ne] of Object.entries(v.nodes)) {
+        if (ie === f || ie === H) continue;
+        const I = o.nodeTypes[ne.type]?.getSize(ne) ?? { width: 154, height: 54 }, _ = Q.x < ne.position.x + I.width && Q.x + Q.width > ne.position.x, F = Q.y < ne.position.y + I.height && Q.y + Q.height > ne.position.y;
+        _ && F && V.push({
           type: "node.move",
-          nodeId: ae,
-          position: { x: Z.position.x + Me.x, y: Z.position.y + Me.y }
+          nodeId: ie,
+          position: { x: ne.position.x + ee.x, y: ne.position.y + ee.y }
         });
       }
-      if (C?.autoWireEdges) {
-        const ae = X(R), Z = X(Ie), we = Y, ve = G(Y), te = ae.find((K) => K.group === we), ye = Z.find((K) => K.group === ve), Ne = Z.find((K) => K.group === we), xe = te ? Object.values(L.edges).find(
-          (K) => K.source.nodeId === h && K.source.portId === te.id
-        ) : Object.values(L.edges).find((K) => K.source.nodeId === h);
-        if (xe) {
-          const K = xe.target;
-          se.push({ type: "edge.remove", edgeId: xe.id }), se.push({
+      if (c?.autoWireEdges) {
+        const ie = K(b), ne = K(Z), N = B, I = M(B), _ = ie.find((J) => J.group === N), F = ne.find((J) => J.group === I), ae = ne.find((J) => J.group === N), de = _ ? Object.values(v.edges).find(
+          (J) => J.source.nodeId === f && J.source.portId === _.id
+        ) : Object.values(v.edges).find((J) => J.source.nodeId === f);
+        if (de) {
+          const J = de.target;
+          V.push({ type: "edge.remove", edgeId: de.id }), V.push({
             type: "edge.add",
             edge: {
-              id: d("edge"),
-              source: { nodeId: h, portId: te?.id },
-              target: { nodeId: ue, portId: ye?.id }
+              id: g("edge"),
+              source: { nodeId: f, portId: _?.id },
+              target: { nodeId: H, portId: F?.id }
             }
-          }), se.push({
+          }), V.push({
             type: "edge.add",
             edge: {
-              id: d("edge"),
-              source: { nodeId: ue, portId: Ne?.id },
-              target: K
+              id: g("edge"),
+              source: { nodeId: H, portId: ae?.id },
+              target: J
             }
           });
         } else
-          se.push({
+          V.push({
             type: "edge.add",
             edge: {
-              id: d("edge"),
-              source: { nodeId: h, portId: te?.id },
-              target: { nodeId: ue, portId: ye?.id }
+              id: g("edge"),
+              source: { nodeId: f, portId: _?.id },
+              target: { nodeId: H, portId: F?.id }
             }
           });
       }
-      const $e = {
-        id: W(),
-        source: C?.source ?? "user:toolbar",
-        label: C?.label ?? "插入节点",
+      const oe = {
+        id: te(),
+        source: c?.source ?? "user:toolbar",
+        label: c?.label ?? "插入节点",
         timestamp: Date.now(),
-        commands: se
+        commands: V
       };
-      return t($e);
+      return t(oe);
     },
-    onGraphEvent(h, b) {
-      return s.on(h, b), () => s.off(h, b);
+    onGraphEvent(f, d) {
+      return s.on(f, d), () => s.off(f, d);
     },
     unsafeGetGraph() {
       return s;
     }
   };
+  return y;
 }
-function Ot() {
-  const s = O(null), e = O(!1);
+function jt() {
+  const s = q(null), e = q(!1);
   let t = null, o = !1;
-  function n(v) {
-    t && (clearTimeout(t), t = null), s.value = v;
+  function n(g) {
+    t && (clearTimeout(t), t = null), s.value = g;
   }
-  function r(v = 100) {
+  function i(g = 100) {
     o || (t && clearTimeout(t), t = setTimeout(() => {
       s.value = null, t = null;
-    }, v));
+    }, g));
   }
-  function i() {
+  function r() {
     o = !0, t && (clearTimeout(t), t = null);
   }
-  function l(v = 100) {
-    o = !1, r(v);
+  function l(g = 100) {
+    o = !1, i(g);
   }
   function a() {
     t && (clearTimeout(t), t = null);
   }
-  function g() {
+  function h() {
     a(), o = !1, s.value = null;
   }
-  function d() {
+  function u() {
     t && clearTimeout(t);
   }
-  return { hoveredNodeId: s, isDraggingNode: e, enter: n, leave: r, enterOverlay: i, leaveOverlay: l, cancelLeave: a, reset: g, cleanup: d };
+  return { hoveredNodeId: s, isDraggingNode: e, enter: n, leave: i, enterOverlay: r, leaveOverlay: l, cancelLeave: a, reset: h, cleanup: u };
 }
-const We = 10, Se = 12;
-function Qe(s, e) {
+const ze = 10, Se = 12;
+function je(s, e) {
   const t = s.getTotalLength();
   if (t === 0) return { ...e, length: 0, totalLength: 0 };
   let o = s.getPointAtLength(0), n = 1 / 0;
-  const r = 50, i = t / r;
+  const i = 50, r = t / i;
   let l = 0;
-  for (let v = 0; v <= r; v++) {
-    const f = v * i, p = s.getPointAtLength(f), E = (p.x - e.x) ** 2 + (p.y - e.y) ** 2;
-    E < n && (n = E, o = p, l = f);
+  for (let g = 0; g <= i; g++) {
+    const p = g * r, x = s.getPointAtLength(p), m = (x.x - e.x) ** 2 + (x.y - e.y) ** 2;
+    m < n && (n = m, o = x, l = p);
   }
-  const a = Math.max(0, l - i), g = Math.min(t, l + i), d = (g - a) / 20;
-  for (let v = a; v <= g; v += d) {
-    const f = s.getPointAtLength(v), p = (f.x - e.x) ** 2 + (f.y - e.y) ** 2;
-    p < n && (n = p, o = f, l = v);
+  const a = Math.max(0, l - r), h = Math.min(t, l + r), u = (h - a) / 20;
+  for (let g = a; g <= h; g += u) {
+    const p = s.getPointAtLength(g), x = (p.x - e.x) ** 2 + (p.y - e.y) ** 2;
+    x < n && (n = x, o = p, l = g);
   }
   return { x: o.x, y: o.y, length: l, totalLength: t };
 }
-function Xe(s, e) {
-  return s < We || s > e - We;
+function We(s, e) {
+  return s < ze || s > e - ze;
 }
-function Ye(s, e, t) {
+function Ve(s, e, t) {
   const o = s.querySelectorAll(".x6-edge-label");
   for (const n of o) {
-    const r = n.getBoundingClientRect();
-    if (e >= r.left - Se && e <= r.right + Se && t >= r.top - Se && t <= r.bottom + Se)
+    const i = n.getBoundingClientRect();
+    if (e >= i.left - Se && e <= i.right + Se && t >= i.top - Se && t <= i.bottom + Se)
       return !0;
   }
   return !1;
 }
-function Ke() {
+function Xe() {
   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");
@@ -1365,20 +1478,20 @@ function Ke() {
   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 Gt(s) {
+function Wt(s) {
   let e = null, t = null;
   function o(l, a) {
-    if (r(), t = l, a.target?.closest?.(".x6-edge-label")) return;
-    const d = s.getCellById(l);
-    if (!d?.isEdge()) return;
-    const v = s.findViewByCell(d);
-    if (!v) return;
-    const f = v.container.querySelector("path");
-    if (!f) return;
-    const p = s.clientToLocal(a.clientX, a.clientY), E = Qe(f, p);
-    if (Xe(E.length, E.totalLength) || Ye(v.container, a.clientX, a.clientY)) return;
-    const w = Ke();
-    w.setAttribute("transform", `translate(${E.x}, ${E.y})`), v.container.appendChild(w), e = w;
+    if (i(), t = l, a.target?.closest?.(".x6-edge-label")) return;
+    const u = s.getCellById(l);
+    if (!u?.isEdge()) return;
+    const g = s.findViewByCell(u);
+    if (!g) return;
+    const p = g.container.querySelector("path");
+    if (!p) return;
+    const x = s.clientToLocal(a.clientX, a.clientY), m = je(p, x);
+    if (We(m.length, m.totalLength) || Ve(g.container, a.clientX, a.clientY)) return;
+    const k = Xe();
+    k.setAttribute("transform", `translate(${m.x}, ${m.y})`), g.container.appendChild(k), e = k;
   }
   function n(l) {
     if (!t) return;
@@ -1386,55 +1499,55 @@ function Gt(s) {
       e && e.setAttribute("display", "none");
       return;
     }
-    const g = s.getCellById(t);
-    if (!g?.isEdge()) return;
-    const d = s.findViewByCell(g);
-    if (!d) return;
-    const v = d.container.querySelector("path");
-    if (!v) return;
-    const f = s.clientToLocal(l.clientX, l.clientY), p = Qe(v, f);
-    if (Xe(p.length, p.totalLength) || Ye(d.container, l.clientX, l.clientY))
+    const h = s.getCellById(t);
+    if (!h?.isEdge()) return;
+    const u = s.findViewByCell(h);
+    if (!u) return;
+    const g = u.container.querySelector("path");
+    if (!g) return;
+    const p = s.clientToLocal(l.clientX, l.clientY), x = je(g, p);
+    if (We(x.length, x.totalLength) || Ve(u.container, l.clientX, l.clientY))
       e && e.setAttribute("display", "none");
     else if (e)
-      e.removeAttribute("display"), e.setAttribute("transform", `translate(${p.x}, ${p.y})`);
+      e.removeAttribute("display"), e.setAttribute("transform", `translate(${x.x}, ${x.y})`);
     else {
-      const E = Ke();
-      E.setAttribute("transform", `translate(${p.x}, ${p.y})`), d.container.appendChild(E), e = E;
+      const m = Xe();
+      m.setAttribute("transform", `translate(${x.x}, ${x.y})`), u.container.appendChild(m), e = m;
     }
   }
-  function r() {
+  function i() {
     e && (e.remove(), e = null), t = null;
   }
-  function i(l) {
+  function r(l) {
     l === t && (e = null, t = null);
   }
-  return { show: o, move: n, remove: r, handleEdgeRemoved: i };
+  return { show: o, move: n, remove: i, handleEdgeRemoved: r };
 }
-function zt(s) {
+function Vt(s) {
   let e = null, t = 0;
-  function o(d) {
-    const v = d ? "visible" : "hidden";
-    for (const f of s.getNodes())
-      for (const p of f.getPorts())
-        f.setPortProp(p.id, "attrs/circle/visibility", v);
+  function o(u) {
+    const g = u ? "visible" : "hidden";
+    for (const p of s.getNodes())
+      for (const x of p.getPorts())
+        p.setPortProp(x.id, "attrs/circle/visibility", g);
   }
-  function n(d) {
+  function n(u) {
     if (!e)
-      for (const v of d.getPorts())
-        d.setPortProp(v.id, "attrs/circle/visibility", "visible");
+      for (const g of u.getPorts())
+        u.setPortProp(g.id, "attrs/circle/visibility", "visible");
   }
-  function r(d) {
+  function i(u) {
     if (!e)
-      for (const v of d.getPorts())
-        d.setPortProp(v.id, "attrs/circle/visibility", "hidden");
-  }
-  function i(d, v) {
-    if (!d.getTargetCell())
-      if (e = d.id, v?.size)
-        for (const f of s.getNodes()) {
-          const p = v.has(f.id) ? "hidden" : "visible";
-          for (const E of f.getPorts())
-            f.setPortProp(E.id, "attrs/circle/visibility", p);
+      for (const g of u.getPorts())
+        u.setPortProp(g.id, "attrs/circle/visibility", "hidden");
+  }
+  function r(u, g) {
+    if (!u.getTargetCell())
+      if (e = u.id, g?.size)
+        for (const p of s.getNodes()) {
+          const x = g.has(p.id) ? "hidden" : "visible";
+          for (const m of p.getPorts())
+            p.setPortProp(m.id, "attrs/circle/visibility", x);
         }
       else
         o(!0);
@@ -1442,22 +1555,523 @@ function zt(s) {
   function l() {
     e = null, o(!1), t = Date.now() + 300;
   }
-  function a(d) {
-    d === e && (e = null, o(!1));
+  function a(u) {
+    u === e && (e = null, o(!1));
   }
-  function g() {
+  function h() {
     return !e && Date.now() >= t;
   }
   return {
     showNodePorts: n,
-    hideNodePorts: r,
-    handleEdgeAdded: i,
+    hideNodePorts: i,
+    handleEdgeAdded: r,
     handleEdgeConnected: l,
     handleEdgeRemoved: a,
-    canShowEdgeTool: g
+    canShowEdgeTool: h
+  };
+}
+function Ye(s) {
+  return s === "top" || s === "right" || s === "bottom" || s === "left";
+}
+function Xt(s) {
+  const { editor: e, nodeHover: t, isSelectionModeActive: o, viewportVersion: n, getNodeBehavior: i, getInsertGap: r } = s, { isDraggingNode: l } = s, a = q(null), h = q(!1);
+  let u = null, g = null, p = null;
+  const x = j(() => ({
+    enabled: !0,
+    portGroup: "right",
+    ...s.quickAddProp.value
+  }));
+  function m() {
+    u && (clearTimeout(u), u = null);
+  }
+  function k() {
+    u && clearTimeout(u), u = setTimeout(() => {
+      a.value = null, u = null;
+    }, 150);
+  }
+  function S(C) {
+    return h.value ? !0 : (m(), y(C) ? (a.value = C, !0) : (a.value = null, !1));
+  }
+  function T() {
+    m(), t.enterOverlay();
+  }
+  function P() {
+    k(), t.leaveOverlay();
+  }
+  function G(C) {
+    const L = e.schema.nodeTypes[C.type];
+    return qe(C, L?.getPorts);
+  }
+  function K(C, L) {
+    const w = x.value.getPort?.(C, L);
+    if (!w) return null;
+    const A = typeof w == "string" ? w : w.id;
+    return L.find((H) => H.id === A) ?? null;
+  }
+  function O(C, L) {
+    const w = e.api.value?.overlay.getNodeScreenRect(C);
+    if (!w) return null;
+    switch (L) {
+      case "top":
+        return { x: w.x + w.width / 2, y: w.y };
+      case "bottom":
+        return { x: w.x + w.width / 2, y: w.y + w.height };
+      case "left":
+        return { x: w.x, y: w.y + w.height / 2 };
+      case "right":
+        return { x: w.x + w.width, y: w.y + w.height / 2 };
+      default:
+        return null;
+    }
+  }
+  function W(C, L, w) {
+    if (!g) return O(C, w);
+    const A = g.getCellById(C);
+    if (A?.isNode()) {
+      const H = A, Z = g.findViewByCell(H), V = Z?.findPortElem(L, "circle") ?? Z?.findPortElem(L);
+      if (V) {
+        const ee = g.container.getBoundingClientRect(), Q = V.getBoundingClientRect();
+        return {
+          x: Q.left - ee.left + Q.width / 2,
+          y: Q.top - ee.top + Q.height / 2
+        };
+      }
+    }
+    return O(C, w);
+  }
+  function z(C) {
+    const L = G(C), w = K(C, L) ?? L.find((H) => H.group === x.value.portGroup) ?? null;
+    if (!w) return null;
+    const A = W(C.id, w.id, w.group);
+    return A ? { portId: w.id, portGroup: w.group, portPosition: A } : null;
+  }
+  function M(C) {
+    const L = z(C), w = x.value.insertDirection;
+    if (typeof w == "function") {
+      const A = w(C, L ? { id: L.portId, group: L.portGroup } : null);
+      if (A) return A;
+    } else if (w)
+      return w;
+    return L && Ye(L.portGroup) ? L.portGroup : Ye(x.value.portGroup) ? x.value.portGroup : "right";
+  }
+  function y(C) {
+    if (!x.value.enabled || e.mode.value !== "edit") return !1;
+    const w = e.flowModel.value.nodes[C];
+    return !w || i(w).quickAddEnabled === !1 ? !1 : !!z(w);
+  }
+  const f = j(() => {
+    if (n.value, !x.value.enabled) return null;
+    const C = a.value;
+    if (!C || l.value || !e.api.value || e.mode.value !== "edit" || o.value)
+      return null;
+    const w = e.flowModel.value.nodes[C];
+    if (!w) return null;
+    const A = i(w);
+    if (A.quickAddEnabled === !1) return null;
+    const H = z(w);
+    return H ? { node: w, ...H, behavior: A } : null;
+  });
+  function d(C) {
+    h.value = !0, f.value && e._emitUiEvent({ type: "node.quick-add", nodeId: C, position: f.value.portPosition });
+  }
+  function c() {
+    h.value = !1;
+  }
+  function v(C) {
+    const L = e.api.value;
+    if (!L) return;
+    const w = e.flowModel.value.nodes[C];
+    if (!w) return;
+    const A = z(w);
+    A && L.startConnection(C, A.portId);
+  }
+  function b(C, L) {
+    const w = e.api.value;
+    if (!w) return;
+    const A = L.id || e.idGenerator("node"), H = { ...L, id: A }, Z = e.flowModel.value.nodes[C];
+    if (!Z) return;
+    w.insertNodeToRight(C, H, {
+      autoWireEdges: !0,
+      direction: M(Z),
+      gap: r(),
+      source: "user:quick-add",
+      label: "快捷插入节点"
+    }).status === "applied" && e._emitUiEvent({ type: "node.action.quick-insert", sourceNodeId: C, newNodeId: A }), s.closePopover();
+  }
+  function E(C) {
+    if (!g) return;
+    const L = g.getCellById(C);
+    if (!L?.isNode()) return;
+    const w = L, A = e.flowModel.value.nodes[C];
+    if (!A) return;
+    const H = z(A);
+    let Z = !0;
+    i(A).hidePortForQuickAdd === !1 && (Z = !1);
+    const ee = Z && !l.value && !!H && y(C);
+    for (const Q of w.getPorts()) {
+      const oe = ee && Q.id === H?.portId ? "hidden" : "visible";
+      w.setPortProp(Q.id, "attrs/circle/visibility", oe);
+    }
+  }
+  function B(C, L) {
+    p?.(), g = C, p = pe(
+      [a, l],
+      ([w], [A]) => {
+        if (A && A !== w) {
+          const H = C.getCellById(A);
+          H?.isNode() && L(H);
+        }
+        w && E(w);
+      },
+      { flush: "sync" }
+    );
+  }
+  pe(f, (C) => {
+    C || (h.value = !1);
+  });
+  function X() {
+    u && clearTimeout(u), p?.(), p = null, g = null;
+  }
+  return {
+    quickAddNodeId: a,
+    quickAddPopoverOpen: h,
+    mergedConfig: x,
+    data: f,
+    enter: S,
+    leave: k,
+    cancelLeave: m,
+    handleOverlayEnter: T,
+    handleOverlayLeave: P,
+    handleOpen: d,
+    handleClose: c,
+    handleStartDrag: v,
+    handleInsert: b,
+    isActiveForNode: y,
+    syncNodePorts: E,
+    attachRuntime: B,
+    cleanup: X
+  };
+}
+const Yt = 15, Kt = 10;
+function Zt(s) {
+  const { editor: e } = s;
+  let t = null, o = null, n = null, i = null;
+  const r = [];
+  let l = null;
+  const a = j(() => ({
+    enabled: !1,
+    bufferMargin: Yt,
+    incomingPortGroup: "left",
+    outgoingPortGroup: "right",
+    ...s.edgeDropProp.value
+  }));
+  function h(y) {
+    if (!t) return null;
+    const f = t.getCellById(y);
+    if (!f?.isEdge()) return null;
+    const d = t.findViewByCell(f)?.container;
+    if (!d) return null;
+    const c = d.querySelectorAll("path");
+    for (const v of c)
+      if (v.getAttribute("stroke") !== "transparent") return v;
+    return null;
+  }
+  function u(y) {
+    const f = h(y);
+    f && (f.style.stroke = "#3a84ff", i = y);
+  }
+  function g() {
+    if (!i) return;
+    const y = h(i);
+    y && (y.style.stroke = ""), i = null;
+  }
+  function p(y, f, d) {
+    if (t) {
+      const c = t.getCellById(y);
+      if (c?.isNode()) {
+        const v = c.getPorts().find((b) => b.group === d);
+        if (v?.id) return v.id;
+      }
+    }
+    if (f.ports?.length) {
+      const c = f.ports.find((v) => v.group === d);
+      if (c) return c.id;
+    }
+    return d;
+  }
+  function x(y) {
+    const f = y.getTotalLength();
+    if (f === 0) return [];
+    const d = [];
+    for (let v = 0; v <= f; v += Kt) {
+      const b = y.getPointAtLength(v);
+      d.push({ x: b.x, y: b.y });
+    }
+    const c = y.getPointAtLength(f);
+    return d.push({ x: c.x, y: c.y }), d;
+  }
+  function m(y, f, d) {
+    if (!t) return null;
+    const c = a.value, v = c.bufferMargin, b = {
+      x: y.x + v,
+      y: y.y + v,
+      width: Math.max(0, y.width - v * 2),
+      height: Math.max(0, y.height - v * 2)
+    };
+    if (b.width <= 0 || b.height <= 0) return null;
+    const E = b.x + b.width, B = b.y + b.height;
+    let X = null;
+    const C = y.x + y.width / 2, L = y.y + y.height / 2;
+    for (const w of t.getEdges()) {
+      const A = f.edges[w.id];
+      if (!A || d && (A.source.nodeId === d || A.target.nodeId === d) || c.isEdgeDropTarget && !c.isEdgeDropTarget(A, f)) continue;
+      const H = t.findViewByCell(w);
+      if (!H) continue;
+      const Z = H.findOne?.("path");
+      if (!Z || typeof Z.getTotalLength != "function") continue;
+      const V = x(Z);
+      if (!V.length) continue;
+      let ee = !1, Q = 1 / 0;
+      for (const oe of V)
+        if (oe.x >= b.x && oe.x <= E && oe.y >= b.y && oe.y <= B) {
+          const ie = oe.x - C, ne = oe.y - L, N = ie * ie + ne * ne;
+          N < Q && (Q = N), ee = !0;
+        }
+      ee && (!X || Q < X.distSq) && (X = { edgeId: w.id, edge: A, distSq: Q });
+    }
+    return X ? { edgeId: X.edgeId, edge: X.edge } : null;
+  }
+  function k(y, f) {
+    if (!a.value.enabled) return;
+    const c = e.flowModel.value, v = m(y, c, f);
+    v ? o !== v.edgeId && (g(), o = v.edgeId, u(v.edgeId)) : o && (g(), o = null);
+  }
+  let S = !0;
+  function T({ node: y }) {
+    if (o = null, !a.value.enabled) return;
+    const f = e.flowModel.value, d = f.nodes[y.id];
+    if (!d) {
+      S = !1;
+      return;
+    }
+    const c = a.value;
+    S = !c.isNodeInsertable || c.isNodeInsertable(d, f);
+  }
+  function P({ node: y }) {
+    !a.value.enabled || !S || n === null && (n = requestAnimationFrame(() => {
+      if (n = null, !t) return;
+      const f = y.getPosition(), d = y.getSize();
+      k({ x: f.x, y: f.y, width: d.width, height: d.height }, y.id);
+    }));
+  }
+  function G() {
+    n !== null && (cancelAnimationFrame(n), n = null), g(), S = !0;
+  }
+  function K() {
+    if (!t) return;
+    let y = !1;
+    l = () => {
+      if (!a.value.enabled) return;
+      const f = document.querySelector(".x6-widget-dnd");
+      if (!f) {
+        y && (y = !1, g(), o = null);
+        return;
+      }
+      y = !0, n === null && (n = requestAnimationFrame(() => {
+        if (n = null, !t) return;
+        const d = f.getBoundingClientRect(), c = t.clientToLocal(d.left, d.top), v = t.clientToLocal(d.right, d.bottom), b = {
+          x: c.x,
+          y: c.y,
+          width: v.x - c.x,
+          height: v.y - c.y
+        };
+        k(b);
+      }));
+    }, document.addEventListener("mousemove", l), r.push(() => {
+      l && (document.removeEventListener("mousemove", l), l = null);
+    });
+  }
+  function O() {
+    g(), o = null, n !== null && (cancelAnimationFrame(n), n = null);
+  }
+  function W(y) {
+    if (!o || y.source !== "user:drag") return y;
+    const f = o;
+    o = null, g();
+    const d = e.flowModel.value, c = d.edges[f];
+    if (!c) return y;
+    const v = y.commands.find((H) => H.type === "node.add" || H.type === "node.move");
+    if (!v) return y;
+    const b = v.type === "node.add" ? v.node.id : v.nodeId, E = v.type === "node.add" ? v.node : d.nodes[v.nodeId];
+    if (!E) return y;
+    const B = a.value;
+    if (B.isNodeInsertable && !B.isNodeInsertable(E, d))
+      return y;
+    const X = p(b, E, B.incomingPortGroup), C = p(b, E, B.outgoingPortGroup), L = e.idGenerator("edge"), w = e.idGenerator("edge"), A = [
+      { type: "edge.remove", edgeId: f },
+      {
+        type: "edge.add",
+        edge: {
+          id: L,
+          type: c.type,
+          source: { nodeId: c.source.nodeId, portId: c.source.portId },
+          target: { nodeId: b, portId: X }
+        }
+      },
+      {
+        type: "edge.add",
+        edge: {
+          id: w,
+          type: c.type,
+          source: { nodeId: b, portId: C },
+          target: { nodeId: c.target.nodeId, portId: c.target.portId }
+        }
+      }
+    ];
+    return {
+      ...y,
+      source: "user:edge-drop",
+      commands: [...y.commands, ...A]
+    };
+  }
+  function z(y) {
+    t = y;
+    const f = (d, c) => {
+      y.on(d, c), r.push(() => y.off(d, c));
+    };
+    f("node:move", T), f("node:change:position", P), f("node:moved", G), K();
+  }
+  function M() {
+    O();
+    for (const y of r) y();
+    r.length = 0, t = null, S = !0;
+  }
+  return {
+    attachRuntime: z,
+    tryExpandForEdgeDrop: W,
+    cleanup: M
+  };
+}
+function Qt(s) {
+  function e(n) {
+    return {
+      id: s.idGenerator("node"),
+      type: n.type,
+      label: n.label,
+      ports: n.ports ? JSON.parse(JSON.stringify(n.ports)) : void 0,
+      payload: n.payload ? JSON.parse(JSON.stringify(n.payload)) : void 0,
+      extensions: n.extensions ? JSON.parse(JSON.stringify(n.extensions)) : void 0
+    };
+  }
+  function t(n, i, r) {
+    const l = s.api.value;
+    switch (n) {
+      case "delete":
+        return s.executeCommand({
+          id: te(),
+          source: "user:toolbar",
+          label: "删除节点",
+          timestamp: Date.now(),
+          commands: [{ type: "node.remove", nodeId: i }]
+        }), s._emitUiEvent({ type: "node.action.delete", nodeId: i }), !0;
+      case "copy": {
+        if (!l) break;
+        const a = s.flowModel.value.nodes[i];
+        if (!a) break;
+        const h = e(a);
+        l.insertNodeToRight(i, h, {
+          autoWireEdges: !1,
+          gap: r,
+          label: "复制节点"
+        }), s._emitUiEvent({ type: "node.action.copy", sourceNodeId: i, newNodeId: h.id });
+        break;
+      }
+      case "copy-insert": {
+        if (!l) break;
+        const a = s.flowModel.value.nodes[i];
+        if (!a) break;
+        const h = e(a);
+        l.insertNodeToRight(i, h, {
+          autoWireEdges: !0,
+          gap: r,
+          label: "复制并插入节点"
+        }), s._emitUiEvent({ type: "node.action.copy-insert", sourceNodeId: i, newNodeId: h.id });
+        break;
+      }
+      case "disconnect": {
+        const a = s.flowModel.value, h = Object.entries(a.edges).filter(([, u]) => {
+          const g = u;
+          return g.source.nodeId === i || g.target.nodeId === i;
+        }).map(([u]) => u);
+        if (h.length === 0) break;
+        s.executeCommand({
+          id: te(),
+          source: "user:toolbar",
+          label: "断开连线",
+          timestamp: Date.now(),
+          commands: h.map((u) => ({ type: "edge.remove", edgeId: u }))
+        }), s._emitUiEvent({ type: "node.action.disconnect", nodeId: i, edgeIds: h });
+        break;
+      }
+      case "debug": {
+        s._emitUiEvent({ type: "node.action.debug", nodeId: i });
+        break;
+      }
+    }
+    return !1;
+  }
+  function o(n) {
+    s.api.value?.deleteSelection({
+      selection: n,
+      source: "user:toolbar",
+      label: "批量删除选中"
+    });
+  }
+  return { handleNodeAction: t, deleteSelection: o };
+}
+function Jt() {
+  return {
+    refX: 0,
+    children: [
+      {
+        tagName: "path",
+        d: "M -16 -5 L -8 0 L -16 5 Z",
+        transform: "rotate(0)"
+      },
+      {
+        tagName: "circle",
+        cx: 0,
+        cy: 0,
+        r: 8,
+        fill: "#3a84ff",
+        stroke: "#3a84ff",
+        transform: "rotate(0)"
+      }
+    ]
+  };
+}
+function eo(s, e) {
+  const t = e.defaultEdgeType ?? "default", o = e.edgeTypes?.[t], n = {
+    zIndex: -1,
+    attrs: {
+      line: {
+        stroke: "#abb5cc",
+        strokeWidth: 2,
+        targetMarker: { name: "block", width: 8, height: 8 }
+      }
+    }
   };
+  o?.router && (n.router = typeof o.router == "string" ? { name: o.router } : o.router), o?.connector && (n.connector = typeof o.connector == "string" ? { name: o.connector } : o.connector), o?.x6EdgeConfig && Object.assign(n, o.x6EdgeConfig);
+  const i = n.attrs ?? {}, r = i.line ?? {};
+  return n.attrs = {
+    ...i,
+    line: {
+      ...r,
+      targetMarker: Jt()
+    }
+  }, s.createEdge(n);
 }
-const jt = { class: "flow-canvas-node-actions__bar" }, Ht = /* @__PURE__ */ ge({
+const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
   __name: "node-actions-toolbar",
   props: {
     node: {},
@@ -1468,14 +2082,14 @@ const jt = { class: "flow-canvas-node-actions__bar" }, Ht = /* @__PURE__ */ ge({
   },
   emits: ["action"],
   setup(s, { emit: e }) {
-    const t = s, o = F(() => {
-      const v = t.actionsOffset?.x ?? 0, f = t.actionsOffset?.y ?? 0, p = v !== 0 || f !== 0;
+    const t = s, o = j(() => {
+      const g = t.actionsOffset?.x ?? 0, p = t.actionsOffset?.y ?? 0, x = g !== 0 || p !== 0;
       return {
         left: `${t.position.x}px`,
         top: `${t.position.y}px`,
-        transform: p ? `translate(${v}px, ${f}px)` : "translateX(-100%)"
+        transform: x ? `translate(${g}px, ${p}px)` : "translateX(-100%)"
       };
-    }), n = e, r = F(() => ({
+    }), n = e, i = j(() => ({
       debug: {
         visible: t.config.showDebug && t.behavior.debuggable !== !1,
         disabled: t.behavior.debugDisabled === !0
@@ -1496,75 +2110,75 @@ const jt = { class: "flow-canvas-node-actions__bar" }, Ht = /* @__PURE__ */ ge({
         visible: t.config.showDisconnect && t.behavior.disconnectable !== !1,
         disabled: t.behavior.disconnectDisabled === !0
       }
-    })), i = F(() => r.value.copy.visible || r.value.copyInsert.visible || r.value.disconnect.visible), l = O(!1);
+    })), r = j(() => i.value.copy.visible || i.value.copyInsert.visible || i.value.disconnect.visible), l = q(!1);
     let a = null;
-    function g() {
+    function h() {
       a && (clearTimeout(a), a = null), l.value = !0;
     }
-    function d() {
+    function u() {
       a = setTimeout(() => {
         l.value = !1, a = null;
       }, 100);
     }
-    return ze(() => {
+    return Me(() => {
       a && clearTimeout(a);
-    }), (v, f) => (M(), S("div", {
+    }), (g, p) => (D(), R("div", {
       class: "flow-canvas-node-actions",
-      style: _e(o.value)
+      style: we(o.value)
     }, [
-      B("div", jt, [
-        r.value.debug.visible ? (M(), S("i", {
+      U("div", to, [
+        i.value.debug.visible ? (D(), R("i", {
           key: 0,
-          class: ee(["flow-canvas-icon canvas-debug flow-canvas-node-actions__icon", { "is-disabled": r.value.debug.disabled }]),
-          onClick: f[0] || (f[0] = (p) => !r.value.debug.disabled && n("action", "debug", s.node.id))
-        }, null, 2)) : U("", !0),
-        r.value.delete.visible ? (M(), S("i", {
+          class: se(["flow-canvas-icon canvas-debug flow-canvas-node-actions__icon", { "is-disabled": i.value.debug.disabled }]),
+          onClick: p[0] || (p[0] = (x) => !i.value.debug.disabled && n("action", "debug", s.node.id))
+        }, null, 2)) : Y("", !0),
+        i.value.delete.visible ? (D(), R("i", {
           key: 1,
-          class: ee(["flow-canvas-icon canvas-shanchu flow-canvas-node-actions__icon", { "is-disabled": r.value.delete.disabled }]),
-          onClick: f[1] || (f[1] = (p) => !r.value.delete.disabled && n("action", "delete", s.node.id))
-        }, null, 2)) : U("", !0),
-        i.value ? (M(), S("div", {
+          class: se(["flow-canvas-icon canvas-shanchu flow-canvas-node-actions__icon", { "is-disabled": i.value.delete.disabled }]),
+          onClick: p[1] || (p[1] = (x) => !i.value.delete.disabled && n("action", "delete", s.node.id))
+        }, null, 2)) : Y("", !0),
+        r.value ? (D(), R("div", {
           key: 2,
           class: "flow-canvas-node-actions__more-wrapper",
-          onMouseenter: g,
-          onMouseleave: d
-        }, [...f[5] || (f[5] = [
-          B("i", { class: "flow-canvas-icon canvas-gengduo flow-canvas-node-actions__icon" }, null, -1)
-        ])], 32)) : U("", !0)
+          onMouseenter: h,
+          onMouseleave: u
+        }, [...p[5] || (p[5] = [
+          U("i", { class: "flow-canvas-icon canvas-gengduo flow-canvas-node-actions__icon" }, null, -1)
+        ])], 32)) : Y("", !0)
       ]),
-      tt(ot, { name: "flow-canvas-fade" }, {
-        default: je(() => [
-          l.value && i.value ? (M(), S("div", {
+      et(tt, { name: "flow-canvas-fade" }, {
+        default: He(() => [
+          l.value && r.value ? (D(), R("div", {
             key: 0,
             class: "flow-canvas-node-actions__dropdown",
-            onMouseenter: g,
-            onMouseleave: d
+            onMouseenter: h,
+            onMouseleave: u
           }, [
-            r.value.copy.visible ? (M(), S("div", {
+            i.value.copy.visible ? (D(), R("div", {
               key: 0,
-              class: ee(["flow-canvas-node-actions__dropdown-item", { "is-disabled": r.value.copy.disabled }]),
-              onClick: f[2] || (f[2] = (p) => !r.value.copy.disabled && n("action", "copy", s.node.id))
-            }, [...f[6] || (f[6] = [
-              B("i", { class: "flow-canvas-icon canvas-copy-fuzhi-2" }, null, -1),
-              B("span", null, "复制", -1)
-            ])], 2)) : U("", !0),
-            r.value.copyInsert.visible ? (M(), S("div", {
+              class: se(["flow-canvas-node-actions__dropdown-item", { "is-disabled": i.value.copy.disabled }]),
+              onClick: p[2] || (p[2] = (x) => !i.value.copy.disabled && n("action", "copy", s.node.id))
+            }, [...p[6] || (p[6] = [
+              U("i", { class: "flow-canvas-icon canvas-copy-fuzhi-2" }, null, -1),
+              U("span", null, "复制", -1)
+            ])], 2)) : Y("", !0),
+            i.value.copyInsert.visible ? (D(), R("div", {
               key: 1,
-              class: ee(["flow-canvas-node-actions__dropdown-item", { "is-disabled": r.value.copyInsert.disabled }]),
-              onClick: f[3] || (f[3] = (p) => !r.value.copyInsert.disabled && n("action", "copy-insert", s.node.id))
-            }, [...f[7] || (f[7] = [
-              B("i", { class: "flow-canvas-icon canvas-fuzhibingcharu" }, null, -1),
-              B("span", null, "复制并插入", -1)
-            ])], 2)) : U("", !0),
-            r.value.disconnect.visible ? (M(), S("div", {
+              class: se(["flow-canvas-node-actions__dropdown-item", { "is-disabled": i.value.copyInsert.disabled }]),
+              onClick: p[3] || (p[3] = (x) => !i.value.copyInsert.disabled && n("action", "copy-insert", s.node.id))
+            }, [...p[7] || (p[7] = [
+              U("i", { class: "flow-canvas-icon canvas-fuzhibingcharu" }, null, -1),
+              U("span", null, "复制并插入", -1)
+            ])], 2)) : Y("", !0),
+            i.value.disconnect.visible ? (D(), R("div", {
               key: 2,
-              class: ee(["flow-canvas-node-actions__dropdown-item", { "is-disabled": r.value.disconnect.disabled }]),
-              onClick: f[4] || (f[4] = (p) => !r.value.disconnect.disabled && n("action", "disconnect", s.node.id))
-            }, [...f[8] || (f[8] = [
-              B("i", { class: "flow-canvas-icon canvas-unlock-jiebang" }, null, -1),
-              B("span", null, "断开连线", -1)
-            ])], 2)) : U("", !0)
-          ], 32)) : U("", !0)
+              class: se(["flow-canvas-node-actions__dropdown-item", { "is-disabled": i.value.disconnect.disabled }]),
+              onClick: p[4] || (p[4] = (x) => !i.value.disconnect.disabled && n("action", "disconnect", s.node.id))
+            }, [...p[8] || (p[8] = [
+              U("i", { class: "flow-canvas-icon canvas-unlock-jiebang" }, null, -1),
+              U("span", null, "断开连线", -1)
+            ])], 2)) : Y("", !0)
+          ], 32)) : Y("", !0)
         ]),
         _: 1
       })
@@ -1575,160 +2189,158 @@ const jt = { class: "flow-canvas-node-actions__bar" }, Ht = /* @__PURE__ */ ge({
   for (const [o, n] of e)
     t[o] = n;
   return t;
-}, Ft = /* @__PURE__ */ he(Ht, [["__scopeId", "data-v-3b39dab5"]]), qt = {
+}, no = /* @__PURE__ */ he(oo, [["__scopeId", "data-v-3b39dab5"]]), so = {
   key: 0,
   class: "flow-canvas-quick-add__tooltip"
-}, Ut = 5, Vt = /* @__PURE__ */ ge({
+}, io = 5, ro = /* @__PURE__ */ fe({
   __name: "node-quick-add-popover",
   props: {
     node: {},
-    portPosition: {},
-    tooltipText: {}
+    portPosition: {}
   },
   emits: ["open", "close", "start-drag", "mouseenter", "mouseleave"],
   setup(s, { expose: e, emit: t }) {
-    const o = s, n = t, r = O(), i = O(), l = O(!1), a = O(!1);
-    let g = null, d = !1, v = null;
-    function f(G) {
-      G.preventDefault(), G.stopPropagation(), g = { x: G.clientX, y: G.clientY }, d = !1, document.addEventListener("mousemove", p), document.addEventListener("mouseup", E);
+    const o = s, n = t, i = q(), r = q(), l = q(!1), a = q(!1);
+    let h = null, u = !1, g = null;
+    function p(z) {
+      z.preventDefault(), z.stopPropagation(), h = { x: z.clientX, y: z.clientY }, u = !1, document.addEventListener("mousemove", x), document.addEventListener("mouseup", m);
     }
-    function p(G) {
-      if (!g) return;
-      const T = G.clientX - g.x, h = G.clientY - g.y;
-      Math.sqrt(T * T + h * h) >= Ut && (d = !0, w(), n("start-drag", o.node.id));
+    function x(z) {
+      if (!h) return;
+      const M = z.clientX - h.x, y = z.clientY - h.y;
+      Math.sqrt(M * M + y * y) >= io && (u = !0, k(), n("start-drag", o.node.id));
     }
-    function E() {
-      w(), d || N(), g = null, d = !1;
+    function m() {
+      k(), u || S(), h = null, u = !1;
     }
-    function w() {
-      document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", E);
+    function k() {
+      document.removeEventListener("mousemove", x), document.removeEventListener("mouseup", m);
     }
-    function N() {
-      a.value ? D() : m();
+    function S() {
+      a.value ? P() : T();
     }
-    function m() {
+    function T() {
       a.value = !0, n("open", o.node.id), requestAnimationFrame(() => {
-        document.addEventListener("mousedown", z);
+        document.addEventListener("mousedown", G);
       });
     }
-    function D() {
-      a.value = !1, n("close"), document.removeEventListener("mousedown", z);
+    function P() {
+      a.value = !1, n("close"), document.removeEventListener("mousedown", G);
     }
-    function z(G) {
-      const T = G.target;
-      r.value?.contains(T) || i.value?.contains(T) || D();
+    function G(z) {
+      const M = z.target;
+      i.value?.contains(M) || r.value?.contains(M) || P();
     }
-    function X() {
+    function K() {
       a.value || n("mouseleave");
     }
-    function j() {
-      v && (clearTimeout(v), v = null), n("mouseenter");
+    function O() {
+      g && (clearTimeout(g), g = null), n("mouseenter");
     }
-    function oe() {
-      v = setTimeout(() => {
-        D(), n("mouseleave"), v = null;
+    function W() {
+      g = setTimeout(() => {
+        P(), n("mouseleave"), g = null;
       }, 150);
     }
-    return ze(() => {
-      w(), v && clearTimeout(v), document.removeEventListener("mousedown", z);
-    }), e({ closePopover: D }), (G, T) => (M(), S("div", {
+    return Me(() => {
+      k(), g && clearTimeout(g), document.removeEventListener("mousedown", G);
+    }), e({ closePopover: P }), (z, M) => (D(), R("div", {
       class: "flow-canvas-quick-add",
-      style: _e({ left: `${s.portPosition.x}px`, top: `${s.portPosition.y}px` }),
-      onMouseenter: T[2] || (T[2] = (h) => n("mouseenter")),
-      onMouseleave: X,
-      onClick: T[3] || (T[3] = rt(() => {
+      style: we({ left: `${s.portPosition.x}px`, top: `${s.portPosition.y}px` }),
+      onMouseenter: M[2] || (M[2] = (y) => n("mouseenter")),
+      onMouseleave: K,
+      onClick: M[3] || (M[3] = rt(() => {
       }, ["stop"]))
     }, [
-      B("div", {
+      U("div", {
         ref_key: "btnRef",
-        ref: r,
-        class: ee(["flow-canvas-quick-add__btn", { "is-hovered": l.value, "is-active": a.value }]),
-        onMouseenter: T[0] || (T[0] = (h) => l.value = !0),
-        onMouseleave: T[1] || (T[1] = (h) => l.value = !1),
-        onMousedown: f
-      }, [...T[4] || (T[4] = [
-        B("i", { class: "flow-canvas-icon canvas-zoom-add" }, null, -1)
+        ref: i,
+        class: se(["flow-canvas-quick-add__btn", { "is-hovered": l.value, "is-active": a.value }]),
+        onMouseenter: M[0] || (M[0] = (y) => l.value = !0),
+        onMouseleave: M[1] || (M[1] = (y) => l.value = !1),
+        onMousedown: p
+      }, [...M[4] || (M[4] = [
+        U("i", { class: "flow-canvas-icon canvas-zoom-add" }, null, -1)
       ])], 34),
-      l.value && !a.value ? (M(), S("div", qt, [...T[5] || (T[5] = [
-        B("div", null, [
-          B("b", null, "点击"),
-          Ve(" 添加节点")
+      l.value && !a.value ? (D(), R("div", so, [...M[5] || (M[5] = [
+        U("div", null, [
+          U("b", null, "点击"),
+          Le(" 添加节点")
         ], -1),
-        B("div", null, [
-          B("b", null, "拖拽"),
-          Ve(" 连接节点")
+        U("div", null, [
+          U("b", null, "拖拽"),
+          Le(" 连接节点")
         ], -1)
-      ])])) : U("", !0),
-      tt(ot, { name: "flow-canvas-fade" }, {
-        default: je(() => [
-          a.value ? (M(), S("div", {
+      ])])) : Y("", !0),
+      et(tt, { name: "flow-canvas-fade" }, {
+        default: He(() => [
+          a.value ? (D(), R("div", {
             key: 0,
             ref_key: "popoverRef",
-            ref: i,
+            ref: r,
             class: "flow-canvas-quick-add__popover",
-            onMouseenter: j,
-            onMouseleave: oe
+            onMouseenter: O,
+            onMouseleave: W
           }, [
-            ke(G.$slots, "default", {}, () => [
-              T[6] || (T[6] = B("div", { class: "flow-canvas-quick-add__default-content" }, "节点快捷操作面板", -1))
+            Ee(z.$slots, "default", {}, () => [
+              M[6] || (M[6] = U("div", { class: "flow-canvas-quick-add__default-content" }, "节点快捷操作面板", -1))
             ], !0)
-          ], 544)) : U("", !0)
+          ], 544)) : Y("", !0)
         ]),
         _: 3
       })
     ], 36));
   }
-}), Wt = /* @__PURE__ */ he(Vt, [["__scopeId", "data-v-b98695cf"]]), Qt = { class: "flow-canvas-runtime-core__overlay" }, Xt = /* @__PURE__ */ ge({
+}), ao = /* @__PURE__ */ he(ro, [["__scopeId", "data-v-336cc3b4"]]), lo = { class: "flow-canvas-selection-actions__bar" }, co = /* @__PURE__ */ fe({
+  __name: "selection-actions-toolbar",
+  props: {
+    position: {},
+    canDelete: { type: Boolean }
+  },
+  emits: ["action"],
+  setup(s, { emit: e }) {
+    const t = s, o = e, n = j(() => ({
+      left: `${t.position.x}px`,
+      top: `${t.position.y}px`,
+      transform: "translateX(-100%)"
+    }));
+    return (i, r) => (D(), R("div", {
+      class: "flow-canvas-selection-actions",
+      style: we(n.value)
+    }, [
+      U("div", lo, [
+        U("i", {
+          class: se(["flow-canvas-icon canvas-shanchu flow-canvas-selection-actions__icon", { "is-disabled": !s.canDelete }]),
+          onClick: r[0] || (r[0] = (l) => s.canDelete && o("action", "delete"))
+        }, null, 2)
+      ])
+    ], 4));
+  }
+}), uo = /* @__PURE__ */ he(co, [["__scopeId", "data-v-25eb8b79"]]), fo = { class: "flow-canvas-runtime-core__overlay" }, go = /* @__PURE__ */ fe({
   __name: "canvas-runtime-core",
   props: {
     editor: {},
     graphOptions: {},
     nodeActions: {},
     quickAdd: {},
+    edgeDrop: {},
     getConnectionExcludedNodeIds: { type: Function }
   },
   emits: ["ui-event"],
   setup(s, { emit: e }) {
-    const t = s, o = e, n = O(), r = O();
-    let i, l, a, g;
-    const d = Ot(), { hoveredNodeId: v, isDraggingNode: f } = d, p = d.enterOverlay, E = () => d.leaveOverlay(), w = O(null), N = O(!1);
-    let m = null;
-    function D(y) {
-      return N.value ? !0 : (X(), ie(y) ? (w.value = y, !0) : (w.value = null, !1));
-    }
-    function z() {
-      m && clearTimeout(m), m = setTimeout(() => {
-        w.value = null, m = null;
-      }, 150);
-    }
-    function X() {
-      m && (clearTimeout(m), m = null);
-    }
-    function j() {
-      X(), d.enterOverlay();
-    }
-    function oe() {
-      z(), d.leaveOverlay();
+    const t = s, o = e, n = q(), i = q();
+    let r, l, a, h, u = null, g = null, p = null, x = null;
+    const m = jt(), { hoveredNodeId: k, isDraggingNode: S } = m, T = m.enterOverlay, P = () => m.leaveOverlay(), G = q(0), K = q({ nodeIds: [], edgeIds: [] });
+    function O(N) {
+      const I = t.editor.api.value;
+      return I ? t.editor.schema.nodeTypes[N.type]?.getBehavior?.(N, {
+        api: I,
+        flowModel: t.editor.flowModel.value,
+        history: t.editor.history,
+        mode: t.editor.mode.value
+      }) ?? {} : {};
     }
-    let G = null, T = null, h = null, b = null, C = null;
-    const L = O(0), R = F(
-      () => {
-        if (L.value, !t.editor.api.value) return [];
-        const y = t.editor.flowModel.value, x = t.editor.api.value.overlay, c = [];
-        for (const [I, P] of Object.entries(y.nodes)) {
-          const _ = t.editor._pluginManager.collectNodeDecorations(P);
-          if (!_?.badge) continue;
-          const $ = x.getNodeScreenRect(I);
-          $ && c.push({
-            nodeId: I,
-            x: $.x + $.width - 4,
-            y: $.y - 8,
-            badge: _.badge
-          });
-        }
-        return c;
-      }
-    ), q = F(() => ({
+    const W = j(() => t.editor.mode.value === "edit" && t.editor.selectionMode.value), z = j(() => ({
       showDebug: !1,
       showDelete: !0,
       showCopy: !0,
@@ -1736,301 +2348,188 @@ const jt = { class: "flow-canvas-node-actions__bar" }, Ht = /* @__PURE__ */ ge({
       showDisconnect: !0,
       insertGap: 100,
       ...t.nodeActions
-    })), Y = F(() => {
-      L.value;
-      const y = v.value;
-      if (!y || f.value || !t.editor.api.value || t.editor.mode.value !== "edit") return null;
-      const x = t.editor.flowModel.value, c = x.nodes[y];
-      if (!c) return null;
-      const I = t.editor.api.value.overlay.getNodeScreenRect(y);
+    })), M = j(
+      () => {
+        if (G.value, !t.editor.api.value) return [];
+        const N = t.editor.flowModel.value, I = t.editor.api.value.overlay, _ = [];
+        for (const [F, ae] of Object.entries(N.nodes)) {
+          const de = t.editor._pluginManager.collectNodeDecorations(ae);
+          if (!de?.badge) continue;
+          const J = I.getNodeScreenRect(F);
+          J && _.push({
+            nodeId: F,
+            x: J.x + J.width - 4,
+            y: J.y - 8,
+            badge: de.badge
+          });
+        }
+        return _;
+      }
+    ), y = j(() => {
+      G.value;
+      const N = k.value;
+      if (!N || S.value || !t.editor.api.value || t.editor.mode.value !== "edit" || W.value)
+        return null;
+      const _ = t.editor.flowModel.value.nodes[N];
+      if (!_) return null;
+      const F = t.editor.api.value.overlay.getNodeScreenRect(N);
+      if (!F) return null;
+      const ae = O(_);
+      return ae.showActions === !1 ? null : {
+        node: _,
+        position: { x: F.x + F.width, y: F.y + F.height + 4 },
+        behavior: ae
+      };
+    }), f = j(() => {
+      if (G.value, !t.editor.api.value || t.editor.mode.value !== "edit") return null;
+      const N = K.value;
+      if (N.nodeIds.length + N.edgeIds.length <= 1) return null;
+      const I = t.editor.api.value.getSelectionBounds(N);
       if (!I) return null;
-      const _ = t.editor.schema.nodeTypes[c.type]?.getBehavior?.(c, {
-        api: t.editor.api.value,
-        flowModel: x,
-        history: t.editor.history,
-        mode: t.editor.mode.value
-      }) ?? {};
-      return _.showActions === !1 ? null : {
-        node: c,
+      const _ = it(N, t.editor.flowModel.value, O);
+      return {
         position: { x: I.x + I.width, y: I.y + I.height + 4 },
-        behavior: _
+        canDelete: _.nodeIds.length > 0 || _.edgeIds.length > 0
       };
-    }), H = F(
-      () => ({
-        enabled: !0,
-        tooltipText: "",
-        portGroup: "right",
-        ...t.quickAdd
-      })
-    ), Q = F(() => {
-      if (L.value, !H.value.enabled) return null;
-      const y = w.value;
-      if (!y || f.value || !t.editor.api.value || t.editor.mode.value !== "edit") return null;
-      const x = t.editor.flowModel.value, c = x.nodes[y];
-      if (!c) return null;
-      const P = t.editor.schema.nodeTypes[c.type]?.getBehavior?.(c, {
-        api: t.editor.api.value,
-        flowModel: x,
-        history: t.editor.history,
-        mode: t.editor.mode.value
-      }) ?? {};
-      if (P.quickAddEnabled === !1) return null;
-      const _ = te(c);
-      return _ ? {
-        node: c,
-        portId: _.portId,
-        portGroup: _.portGroup,
-        portPosition: _.portPosition,
-        behavior: P
-      } : null;
-    }), de = O();
-    function re(y) {
-      N.value = !0;
-      const x = Q.value;
-      x && o("ui-event", {
-        type: "node.quick-add",
-        nodeId: y,
-        position: x.portPosition
-      });
+    }), d = q(), c = Xt({
+      editor: t.editor,
+      quickAddProp: j(() => t.quickAdd),
+      isDraggingNode: S,
+      nodeHover: m,
+      isSelectionModeActive: W,
+      viewportVersion: G,
+      getNodeBehavior: O,
+      getInsertGap: () => z.value.insertGap,
+      closePopover: () => d.value?.closePopover()
+    }), v = c.data, b = c.handleOpen, E = c.handleClose, B = c.handleStartDrag, X = c.handleOverlayEnter, C = c.handleOverlayLeave, L = c.handleInsert, w = Zt({
+      editor: t.editor,
+      edgeDropProp: j(() => t.edgeDrop)
+    }), A = Qt(t.editor);
+    function H(N, I) {
+      A.handleNodeAction(N, I, z.value.insertGap) && (k.value = null);
+    }
+    function Z(N) {
+      N === "delete" && A.deleteSelection(K.value);
+    }
+    function V(N) {
+      if (t.editor.mode.value !== "edit") return;
+      t.editor._pluginManager.dispatchKeyboardShortcut(N) && (N.preventDefault(), N.stopPropagation());
     }
-    function ce() {
-      N.value = !1;
-    }
-    function ue(y) {
-      const x = t.editor.api.value;
-      if (!x) return;
-      const I = t.editor.flowModel.value.nodes[y];
-      if (!I) return;
-      const P = te(I);
-      P && x.startConnection(y, P.portId);
-    }
-    function Ie(y, x) {
-      const c = t.editor.api.value;
-      if (!c) return;
-      const I = x.id || t.editor.idGenerator("node"), P = { ...x, id: I }, _ = t.editor.flowModel.value.nodes[y];
-      if (!_) return;
-      c.insertNodeToRight(y, P, {
-        autoWireEdges: !0,
-        direction: ye(_),
-        gap: q.value.insertGap,
-        source: "user:quick-add",
-        label: "快捷插入节点"
-      }).status === "applied" && o("ui-event", { type: "node.action.quick-insert", sourceNodeId: y, newNodeId: I }), de.value?.closePopover();
-    }
-    function se(y) {
-      return {
-        id: t.editor.idGenerator("node"),
-        type: y.type,
-        label: y.label,
-        ports: y.ports ? JSON.parse(JSON.stringify(y.ports)) : void 0,
-        payload: y.payload ? JSON.parse(JSON.stringify(y.payload)) : void 0,
-        extensions: y.extensions ? JSON.parse(JSON.stringify(y.extensions)) : void 0
+    function ee(N, I) {
+      const _ = r, F = (ae) => {
+        const de = _.isRubberbandEnabled?.() ?? !1;
+        de && _.disableRubberband?.(), ae ? r.enablePanning() : r.disablePanning(), de && _.enableRubberband?.();
       };
-    }
-    function Me(y, x) {
-      const c = t.editor, I = c.api.value;
-      switch (y) {
-        case "delete": {
-          c.executeCommand({
-            id: W(),
-            source: "user:toolbar",
-            label: "删除节点",
-            timestamp: Date.now(),
-            commands: [{ type: "node.remove", nodeId: x }]
-          }), o("ui-event", { type: "node.action.delete", nodeId: x }), v.value = null;
-          break;
-        }
-        case "copy": {
-          if (!I) break;
-          const P = c.flowModel.value.nodes[x];
-          if (!P) break;
-          const _ = se(P);
-          I.insertNodeToRight(x, _, {
-            autoWireEdges: !1,
-            gap: q.value.insertGap,
-            label: "复制节点"
-          }), o("ui-event", { type: "node.action.copy", sourceNodeId: x, newNodeId: _.id });
-          break;
-        }
-        case "copy-insert": {
-          if (!I) break;
-          const P = c.flowModel.value.nodes[x];
-          if (!P) break;
-          const _ = se(P);
-          I.insertNodeToRight(x, _, {
-            autoWireEdges: !0,
-            gap: q.value.insertGap,
-            label: "复制并插入节点"
-          }), o("ui-event", { type: "node.action.copy-insert", sourceNodeId: x, newNodeId: _.id });
-          break;
-        }
-        case "disconnect": {
-          const P = c.flowModel.value, _ = Object.entries(P.edges).filter(([, $]) => {
-            const J = $;
-            return J.source.nodeId === x || J.target.nodeId === x;
-          }).map(([$]) => $);
-          if (_.length === 0) break;
-          c.executeCommand({
-            id: W(),
-            source: "user:toolbar",
-            label: "断开连线",
-            timestamp: Date.now(),
-            commands: _.map(($) => ({ type: "edge.remove", edgeId: $ }))
-          }), o("ui-event", { type: "node.action.disconnect", nodeId: x, edgeIds: _ });
-          break;
+      N && I ? (_.enableSelection?.(), m.reset(), c.quickAddNodeId.value = null, c.quickAddPopoverOpen.value = !1, u?.remove(), F(!1), _.enableRubberband?.()) : (_.disableRubberband?.(), F(!0), _.disableSelection?.(), _.cleanSelection?.());
+    }
+    function Q(N) {
+      r.on("node:move", ({ node: I }) => {
+        S.value = !0;
+        const _ = t.editor.flowModel.value.nodes[I.id];
+        _ && O(_).bringToFrontOnDrag === !1 || I.toFront?.();
+      }), r.on("node:moved", () => {
+        S.value = !1;
+      }), r.on("node:mouseenter", ({ node: I }) => {
+        if (W.value) {
+          k.value = null, c.quickAddNodeId.value = null, N.hideNodePorts(I);
+          return;
         }
-        case "debug": {
-          o("ui-event", { type: "node.action.debug", nodeId: x });
-          break;
+        m.enter(I.id);
+        const _ = t.editor.flowModel.value.nodes[I.id];
+        if (_ && O(_).showPorts === !1) {
+          c.mergedConfig.value.enabled && c.enter(I.id);
+          return;
         }
-      }
-    }
-    function ie(y) {
-      if (!H.value.enabled || t.editor.mode.value !== "edit") return !1;
-      const x = t.editor.flowModel.value, c = x.nodes[y];
-      return !c || (t.editor.schema.nodeTypes[c.type]?.getBehavior?.(c, {
-        api: t.editor.api.value,
-        flowModel: x,
-        history: t.editor.history,
-        mode: t.editor.mode.value
-      }) ?? {}).quickAddEnabled === !1 ? !1 : !!te(c);
-    }
-    function $e(y) {
-      const x = t.editor.schema.nodeTypes[y.type];
-      return Fe(y, x?.getPorts);
-    }
-    function ae(y) {
-      return y === "top" || y === "right" || y === "bottom" || y === "left";
-    }
-    function Z(y, x) {
-      const c = H.value.getPort?.(y, x);
-      if (!c) return null;
-      const I = typeof c == "string" ? c : c.id;
-      return x.find((P) => P.id === I) ?? null;
-    }
-    function we(y, x) {
-      const c = t.editor.api.value?.overlay.getNodeScreenRect(y);
-      if (!c) return null;
-      switch (x) {
-        case "top":
-          return { x: c.x + c.width / 2, y: c.y };
-        case "bottom":
-          return { x: c.x + c.width / 2, y: c.y + c.height };
-        case "left":
-          return { x: c.x, y: c.y + c.height / 2 };
-        case "right":
-          return { x: c.x + c.width, y: c.y + c.height / 2 };
-        default:
-          return null;
-      }
-    }
-    function ve(y, x, c) {
-      const I = i.getCellById(y);
-      if (I?.isNode()) {
-        const P = I, _ = i.findViewByCell(P), $ = _?.findPortElem(x, "circle") ?? _?.findPortElem(x);
-        if ($) {
-          const J = i.container.getBoundingClientRect(), le = $.getBoundingClientRect();
-          return {
-            x: le.left - J.left + le.width / 2,
-            y: le.top - J.top + le.height / 2
-          };
+        c.mergedConfig.value.enabled && c.enter(I.id) || N.showNodePorts(I);
+      }), r.on("node:mouseleave", ({ node: I }) => {
+        if (W.value) {
+          N.hideNodePorts(I);
+          return;
         }
-      }
-      return we(y, c);
-    }
-    function te(y) {
-      const x = $e(y), c = Z(y, x) ?? x.find((P) => P.group === H.value.portGroup) ?? null;
-      if (!c) return null;
-      const I = ve(y.id, c.id, c.group);
-      return I ? {
-        portId: c.id,
-        portGroup: c.group,
-        portPosition: I
-      } : null;
-    }
-    function ye(y) {
-      const x = te(y), c = H.value.insertDirection;
-      if (typeof c == "function") {
-        const I = c(
-          y,
-          x ? { id: x.portId, group: x.portGroup } : null
-        );
-        if (I) return I;
-      } else if (c)
-        return c;
-      return x && ae(x.portGroup) ? x.portGroup : ae(H.value.portGroup) ? H.value.portGroup : "right";
-    }
-    function Ne(y) {
-      if (t.editor.mode.value !== "edit") return;
-      t.editor._pluginManager.dispatchKeyboardShortcut(y) && (y.preventDefault(), y.stopPropagation());
-    }
-    function xe() {
-      return {
-        refX: 0,
-        children: [
-          {
-            tagName: "path",
-            d: "M -16 -5 L -8 0 L -16 5 Z",
-            transform: "rotate(0)"
-          },
-          {
-            tagName: "circle",
-            cx: 0,
-            cy: 0,
-            r: 8,
-            fill: "#3a84ff",
-            stroke: "#3a84ff",
-            transform: "rotate(0)"
-          }
-        ]
-      };
+        const _ = t.editor.flowModel.value.nodes[I.id];
+        let F = 100;
+        _ && O(_).actionsOffset && (F = 300), m.leave(F), c.mergedConfig.value.enabled ? c.quickAddNodeId.value === I.id && !c.quickAddPopoverOpen.value ? c.leave() : c.quickAddNodeId.value !== I.id && N.hideNodePorts(I) : N.hideNodePorts(I);
+      });
     }
-    function K(y) {
-      const x = t.editor.schema.defaultEdgeType ?? "default", c = t.editor.schema.edgeTypes?.[x], I = {
-        zIndex: -1,
-        attrs: {
-          line: {
-            stroke: "#abb5cc",
-            strokeWidth: 2,
-            targetMarker: { name: "block", width: 8, height: 8 }
+    function oe(N) {
+      r.on("edge:added", ({ edge: I }) => {
+        let _;
+        if (t.getConnectionExcludedNodeIds && !I.getTargetCell()) {
+          const F = I.getSourceCell();
+          if (F) {
+            const ae = t.getConnectionExcludedNodeIds(F.id);
+            _ = ae instanceof Set ? ae : new Set(ae);
           }
         }
-      };
-      c?.router && (I.router = typeof c.router == "string" ? { name: c.router } : c.router), c?.connector && (I.connector = typeof c.connector == "string" ? { name: c.connector } : c.connector), c?.x6EdgeConfig && Object.assign(I, c.x6EdgeConfig);
-      const P = I.attrs ?? {}, _ = P.line ?? {};
-      return I.attrs = {
-        ...P,
-        line: {
-          ..._,
-          targetMarker: xe()
+        N.handleEdgeAdded(I, _);
+      }), r.on("edge:connected", () => {
+        N.handleEdgeConnected();
+      }), r.on("edge:removed", ({ edge: I }) => {
+        N.handleEdgeRemoved(I.id), u.handleEdgeRemoved(I.id);
+      }), r.on("edge:mouseenter", ({ edge: I, e: _ }) => {
+        const F = l.getHoveredEdgeId();
+        l.setHoveredEdge(I.id), F && F !== I.id && l.refreshSingleEdgeStyle(F), l.refreshSingleEdgeStyle(I.id), t.editor.mode.value === "edit" && !W.value && N.canShowEdgeTool() && u.show(I.id, _);
+      }), r.on("edge:mouseleave", ({ edge: I }) => {
+        l.setHoveredEdge(null), l.refreshSingleEdgeStyle(I.id), u.remove();
+      }), r.on("edge:click", ({ edge: I, e: _ }) => {
+        _.target?.closest?.(".flow-canvas-edge-delete-tool") && t.editor.mode.value === "edit" && (u.remove(), t.editor.executeCommand({
+          id: te(),
+          source: "user:toolbar",
+          label: "删除连线",
+          timestamp: Date.now(),
+          commands: [{ type: "edge.remove", edgeId: I.id }]
+        }));
+      }), g = (I) => u.move(I), r.container.addEventListener("mousemove", g);
+    }
+    function ie() {
+      p = (N) => {
+        if (!k.value && !c.quickAddNodeId.value) return;
+        const I = N.target;
+        if (I?.closest?.(".x6-node") || I?.closest?.(".flow-canvas-node-actions") || I?.closest?.(".flow-canvas-quick-add")) {
+          m.cancelLeave(), c.cancelLeave();
+          return;
         }
-      }, y.createEdge(I);
+        m.leave(180), c.quickAddPopoverOpen.value || c.leave();
+      }, n.value?.addEventListener("mousemove", p), x = () => {
+        m.reset(), c.quickAddPopoverOpen.value || (c.quickAddNodeId.value = null);
+      }, n.value?.addEventListener("mouseleave", x), n.value?.addEventListener("keydown", V);
     }
-    return at(() => {
-      if (!r.value) return;
-      const y = /* @__PURE__ */ new Set(["model", "container"]), x = {};
+    function ne() {
+      pe(
+        () => t.editor.flowModel.value,
+        (N) => l.syncFlowModel(N)
+      ), pe(
+        [() => t.editor.mode.value, () => t.editor.selectionMode.value],
+        ([N, I]) => {
+          ee(N === "edit", I);
+        },
+        { immediate: !0 }
+      );
+    }
+    return ot(() => {
+      if (!i.value) return;
+      const N = /* @__PURE__ */ new Set(["model", "container"]), I = {};
       if (t.graphOptions)
-        for (const [u, k] of Object.entries(t.graphOptions)) {
-          if (y.has(u)) {
-            console.warn(`[flow-canvas] graphOptions.${u} is managed by the engine and will be ignored`);
+        for (const [$, re] of Object.entries(t.graphOptions)) {
+          if (N.has($)) {
+            console.warn(`[flow-canvas] graphOptions.${$} is managed by the engine and will be ignored`);
             continue;
           }
-          x[u] = k;
+          I[$] = re;
         }
-      i = new ut({
-        container: r.value,
+      r = new ft({
+        container: i.value,
         autoResize: !0,
         background: { color: "#edf2fc" },
         grid: { visible: !0, size: 20, type: "dot" },
         highlighting: {
-          // 连接吸附到 port 时不再叠加 X6 默认橙色高亮，由业务层自行控制端口视觉。
           magnetAdsorbed: { name: "className", args: { className: "flow-canvas-magnet-adsorbed" } }
         },
         panning: { enabled: !0 },
         mousewheel: { enabled: !0, modifiers: ["ctrl", "meta"] },
         interacting: {
-          nodeMovable(u) {
-            return u.cell.getProp("draggable") !== !1;
+          nodeMovable($) {
+            return $.cell.getProp("draggable") !== !1;
           }
         },
         connecting: {
@@ -2044,16 +2543,16 @@ const jt = { class: "flow-canvas-node-actions__bar" }, Ht = /* @__PURE__ */ ge({
           connectionPoint: "anchor",
           snap: { radius: 30 },
           createEdge() {
-            return K(this);
+            return eo(this, t.editor.schema);
           }
         },
-        ...x
-      }), a = new Tt(), l = new At(
-        i,
+        ...I
+      }), a = new Bt(), l = new $t(
+        r,
         t.editor.schema,
         a,
-        (u) => t.editor._pluginManager.collectNodeDecorations(u),
-        (u) => t.editor._pluginManager.collectEdgeDecorations(u),
+        ($) => t.editor._pluginManager.collectNodeDecorations($),
+        ($) => t.editor._pluginManager.collectEdgeDecorations($),
         () => t.editor.api.value ? {
           api: t.editor.api.value,
           flowModel: t.editor.flowModel.value,
@@ -2061,313 +2560,210 @@ const jt = { class: "flow-canvas-node-actions__bar" }, Ht = /* @__PURE__ */ ge({
           mode: t.editor.mode.value
         } : null
       );
-      const c = $t(i), I = Bt({
-        graph: i,
-        overlayManager: c,
-        executeCommand: (u) => t.editor.executeCommand(u),
+      const _ = Gt(r), F = zt({
+        graph: r,
+        overlayManager: _,
+        executeCommand: ($) => t.editor.executeCommand($),
         schema: t.editor.schema,
         flowModel: t.editor.flowModel,
+        getNodeBehavior: O,
         idGenerator: t.editor.idGenerator,
         defaultInsertGap: t.nodeActions?.insertGap,
-        getContextMenuItems: (u) => t.editor._pluginManager.collectContextMenuItems(u),
-        onHighlightChange: (u, k) => {
-          l.setHighlightedNodes(u), l.setHighlightedEdges(k), l.refreshNodeHighlights(), l.refreshEdgeStyles();
+        getContextMenuItems: ($) => t.editor._pluginManager.collectContextMenuItems($),
+        onHighlightChange: ($, re) => {
+          l.setHighlightedNodes($);
+          const ce = l.setHighlightedEdges(re);
+          l.refreshNodeHighlights();
+          const ve = new Set(re);
+          for (const ye of ce)
+            ve.has(ye) || l.refreshSingleEdgeStyle(ye);
+          for (const ye of ve)
+            ce.has(ye) || l.refreshSingleEdgeStyle(ye);
         },
-        resolveNodeShape: (u) => {
-          const k = t.editor.schema.nodeTypes[u];
-          if (!k) return null;
-          const A = a.registerNodeType(u, k.component), V = k.getSize({ id: "", type: u, position: { x: 0, y: 0 } });
-          return { shapeName: A, width: V.width, height: V.height };
+        resolveNodeShape: ($) => {
+          const re = t.editor.schema.nodeTypes[$];
+          if (!re) return null;
+          const ce = a.registerNodeType($, re.component), ve = re.getSize({ id: "", type: $, position: { x: 0, y: 0 } });
+          return { shapeName: ce, width: ve.width, height: ve.height };
         }
       });
-      t.editor.api.value = I;
-      const P = {
+      t.editor.api.value = F;
+      const ae = {
         flowModel: t.editor.flowModel,
         history: t.editor.history,
         schema: t.editor.schema,
         mode: t.editor.mode,
         idGenerator: t.editor.idGenerator,
         executeCommand: t.editor.executeCommand,
-        api: I,
-        overlay: c,
-        graph: i
+        selectionMode: t.editor.selectionMode,
+        api: F,
+        overlay: _,
+        graph: r
       };
-      t.editor._pluginManager.attachRuntime(P);
-      const _ = t.editor._pluginManager.collectExtendedApi();
-      Object.assign(t.editor.extendedApi, _), g = new Rt(
-        i,
-        (u) => {
-          (u.type === "node.click" || u.type === "node.dblclick" || u.type === "node.contextmenu") && d.enter(u.nodeId), t.editor._pluginManager.dispatchUiEvent(u), o("ui-event", u);
+      t.editor._pluginManager.attachRuntime(ae);
+      const de = t.editor._pluginManager.collectExtendedApi();
+      Object.assign(t.editor.extendedApi, de), t.editor._emitUiEvent = ($) => {
+        t.editor._pluginManager.dispatchUiEvent($), o("ui-event", $);
+      }, h = new Ht(
+        r,
+        ($) => {
+          ($.type === "node.click" || $.type === "node.dblclick" || $.type === "node.contextmenu") && m.enter($.nodeId), t.editor._emitUiEvent($);
         },
-        (u) => {
+        ($) => {
           if (l.isSyncing) return;
-          if (t.editor.executeCommand(u).status !== "applied") {
-            for (const A of u.commands)
-              if (A.type === "edge.add") {
-                const V = i.getCellById(A.edge.id);
-                V && i.removeCell(V);
+          const re = w.tryExpandForEdgeDrop($);
+          if (t.editor.executeCommand(re).status !== "applied") {
+            for (const ve of re.commands)
+              if (ve.type === "edge.add") {
+                const ye = r.getCellById(ve.edge.id);
+                ye && r.removeCell(ye);
               }
           }
         },
         t.editor.flowModel,
         t.editor.idGenerator
-      ), G = Gt(i);
-      const $ = zt(i), J = i, le = (u) => {
-        const k = J.isRubberbandEnabled?.() ?? !1;
-        k && J.disableRubberband?.(), u ? i.enablePanning() : i.disablePanning(), k && J.enableRubberband?.();
-      }, Le = () => {
-        L.value++;
-      };
-      i.on("translate", Le), i.on("scale", Le), i.on("resize", Le), i.on("node:move", ({ node: u }) => {
-        f.value = !0;
-        const k = t.editor.flowModel.value.nodes[u.id];
-        k && t.editor.api.value && t.editor.schema.nodeTypes[k.type]?.getBehavior?.(k, {
-          api: t.editor.api.value,
-          flowModel: t.editor.flowModel.value,
-          history: t.editor.history,
-          mode: t.editor.mode.value
-        })?.bringToFrontOnDrag === !1 || u.toFront?.();
-      }), i.on("node:moved", () => {
-        f.value = !1;
-      }), i.on("node:mouseenter", ({ node: u }) => {
-        d.enter(u.id);
-        const k = t.editor.flowModel.value.nodes[u.id];
-        if (k && t.editor.api.value && t.editor.schema.nodeTypes[k.type]?.getBehavior?.(k, {
-          api: t.editor.api.value,
-          flowModel: t.editor.flowModel.value,
-          history: t.editor.history,
-          mode: t.editor.mode.value
-        })?.showPorts === !1) {
-          H.value.enabled && D(u.id);
-          return;
-        }
-        H.value.enabled && D(u.id) || $.showNodePorts(u);
-      }), i.on("node:mouseleave", ({ node: u }) => {
-        const k = t.editor.flowModel.value.nodes[u.id];
-        let A = 100;
-        k && t.editor.api.value && t.editor.schema.nodeTypes[k.type]?.getBehavior?.(k, {
-          api: t.editor.api.value,
-          flowModel: t.editor.flowModel.value,
-          history: t.editor.history,
-          mode: t.editor.mode.value
-        })?.actionsOffset && (A = 300), d.leave(A), H.value.enabled ? w.value === u.id && !N.value ? z() : w.value !== u.id && $.hideNodePorts(u) : $.hideNodePorts(u);
-      });
-      function st(u) {
-        const k = i.getCellById(u);
-        if (!k?.isNode()) return;
-        const A = k, V = t.editor.flowModel.value.nodes[u];
-        if (!V) return;
-        const Be = te(V);
-        let qe = !0;
-        t.editor.api.value && t.editor.schema.nodeTypes[V.type]?.getBehavior?.(V, {
-          api: t.editor.api.value,
-          flowModel: t.editor.flowModel.value,
-          history: t.editor.history,
-          mode: t.editor.mode.value
-        })?.hidePortForQuickAdd === !1 && (qe = !1);
-        const it = qe && !f.value && !!Be && ie(u);
-        for (const Oe of A.getPorts()) {
-          const Ue = it && Oe.id === Be?.portId ? "hidden" : "visible";
-          A.setPortProp(Oe.id, "attrs/circle/visibility", Ue);
-        }
-      }
-      fe(
-        [w, f],
-        ([u], [k]) => {
-          if (k && k !== u) {
-            const A = i.getCellById(k);
-            A?.isNode() && $.hideNodePorts(A);
-          }
-          u && st(u);
-        },
-        { flush: "sync" }
-      ), fe(Q, (u) => {
-        u || (N.value = !1);
-      }), i.on("edge:added", ({ edge: u }) => {
-        let k;
-        if (t.getConnectionExcludedNodeIds && !u.getTargetCell()) {
-          const A = u.getSourceCell();
-          if (A) {
-            const V = t.getConnectionExcludedNodeIds(A.id);
-            k = V instanceof Set ? V : new Set(V);
-          }
-        }
-        $.handleEdgeAdded(u, k);
-      }), i.on("edge:connected", () => {
-        $.handleEdgeConnected();
-      }), i.on("edge:removed", ({ edge: u }) => {
-        $.handleEdgeRemoved(u.id), G.handleEdgeRemoved(u.id);
-      }), i.on("selection:changed", () => {
-        const u = i.getSelectedCells?.() ?? [], k = {
-          nodeIds: u.filter((A) => A.isNode()).map((A) => A.id),
-          edgeIds: u.filter((A) => A.isEdge()).map((A) => A.id)
-        };
-        t.editor._pluginManager.dispatchSelectionChange(k), o("ui-event", {
+      ), u = Wt(r);
+      const J = Vt(r);
+      c.attachRuntime(r, ($) => J.hideNodePorts($)), w.attachRuntime(r), Q(J), oe(J);
+      let Ae = /* @__PURE__ */ new Set();
+      r.on("selection:changed", () => {
+        const $ = st(r.getSelectedCells?.() ?? []);
+        K.value = $, t.editor._pluginManager.dispatchSelectionChange($), o("ui-event", {
           type: "selection.change",
-          nodeIds: k.nodeIds,
-          edgeIds: k.edgeIds
-        }), l.refreshEdgeStyles();
-      }), i.on("edge:mouseenter", ({ edge: u, e: k }) => {
-        l.setHoveredEdge(u.id), l.refreshEdgeStyles(), t.editor.mode.value === "edit" && $.canShowEdgeTool() && G.show(u.id, k);
-      }), T = (u) => G.move(u), i.container.addEventListener("mousemove", T), h = (u) => {
-        if (!v.value && !w.value) return;
-        const k = u.target;
-        if (k?.closest?.(".x6-node") || k?.closest?.(".flow-canvas-node-actions") || k?.closest?.(".flow-canvas-quick-add")) {
-          d.cancelLeave(), X();
-          return;
-        }
-        d.leave(180), N.value || z();
-      }, n.value?.addEventListener("mousemove", h), b = () => {
-        d.reset(), N.value || (w.value = null);
-      }, n.value?.addEventListener("mouseleave", b), i.on("edge:mouseleave", () => {
-        l.setHoveredEdge(null), l.refreshEdgeStyles(), G.remove();
-      }), i.on("edge:click", ({ edge: u, e: k }) => {
-        k.target?.closest?.(".flow-canvas-edge-delete-tool") && t.editor.mode.value === "edit" && (G.remove(), t.editor.executeCommand({
-          id: W(),
-          source: "user:toolbar",
-          label: "删除连线",
-          timestamp: Date.now(),
-          commands: [{ type: "edge.remove", edgeId: u.id }]
-        }));
-      }), n.value?.addEventListener("keydown", Ne), l.syncFlowModel(t.editor.flowModel.value), fe(
-        () => t.editor.flowModel.value,
-        (u) => l.syncFlowModel(u)
-      ), fe(
-        () => t.editor.selectionMode.value,
-        (u) => {
-          if (C?.(), C = null, u) {
-            le(!1), J.enableRubberband?.();
-            const k = () => {
-              i.container.removeEventListener("mouseup", k), C = null, setTimeout(() => {
-                t.editor.selectionMode.value && t.editor.setSelectionMode(!1);
-              }, 50);
-            };
-            i.container.addEventListener("mouseup", k), C = () => i.container.removeEventListener("mouseup", k);
-          } else
-            J.disableRubberband?.(), le(!0);
-        }
-      ), fe(
-        () => t.editor.mode.value,
-        (u) => {
-          const k = u === "edit";
-          le(!0), k ? J.enableSelection?.() : J.disableSelection?.();
-        }
-      );
-    }), ze(() => {
-      d.cleanup(), m && clearTimeout(m), G?.remove(), C?.(), T && i?.container?.removeEventListener("mousemove", T), h && n.value?.removeEventListener("mousemove", h), b && n.value?.removeEventListener("mouseleave", b), n.value?.removeEventListener("keydown", Ne), t.editor._pluginManager.detachRuntime(), t.editor.api.value = null;
-      for (const y of Object.keys(t.editor.extendedApi))
-        delete t.editor.extendedApi[y];
-      g?.dispose(), l?.dispose(), a?.dispose(), i?.dispose();
-    }), (y, x) => (M(), S("div", {
+          nodeIds: $.nodeIds,
+          edgeIds: $.edgeIds
+        }), l.refreshNodeHighlights();
+        const re = new Set($.edgeIds);
+        for (const ce of Ae)
+          re.has(ce) || l.refreshSingleEdgeStyle(ce);
+        for (const ce of re)
+          Ae.has(ce) || l.refreshSingleEdgeStyle(ce);
+        Ae = re;
+      });
+      const Pe = () => {
+        G.value++;
+      };
+      r.on("translate", Pe), r.on("scale", Pe), r.on("resize", Pe), ie(), l.syncFlowModel(t.editor.flowModel.value), ne();
+    }), Me(() => {
+      m.cleanup(), c.cleanup(), w.cleanup(), u?.remove(), g && r?.container?.removeEventListener("mousemove", g), p && n.value?.removeEventListener("mousemove", p), x && n.value?.removeEventListener("mouseleave", x), n.value?.removeEventListener("keydown", V), t.editor._pluginManager.detachRuntime(), t.editor.api.value = null;
+      for (const N of Object.keys(t.editor.extendedApi))
+        delete t.editor.extendedApi[N];
+      h?.dispose(), l?.dispose(), a?.dispose(), r?.dispose();
+    }), (N, I) => (D(), R("div", {
       ref_key: "rootRef",
       ref: n,
-      class: "flow-canvas-runtime-core",
+      class: se(["flow-canvas-runtime-core", { "flow-canvas-runtime-core--selection-mode": W.value }]),
       tabindex: "0"
     }, [
-      B("div", {
+      U("div", {
         ref_key: "containerRef",
-        ref: r,
+        ref: i,
         class: "flow-canvas-runtime-core__graph"
       }, null, 512),
-      B("div", Qt, [
-        (M(!0), S(pe, null, Pe(R.value, (c) => (M(), S("div", {
-          key: `badge-${c.nodeId}`,
+      U("div", fo, [
+        (D(!0), R(me, null, Ie(M.value, (_) => (D(), R("div", {
+          key: `badge-${_.nodeId}`,
           class: "flow-canvas-runtime-core__badge",
-          style: _e({ left: `${c.x}px`, top: `${c.y}px`, backgroundColor: c.badge.color })
-        }, me(c.badge.text), 5))), 128)),
-        Q.value ? (M(), De(Wt, {
+          style: we({ left: `${_.x}px`, top: `${_.y}px`, backgroundColor: _.badge.color })
+        }, ge(_.badge.text), 5))), 128)),
+        le(v) ? (D(), be(ao, {
           key: 0,
           ref_key: "quickAddPopoverRef",
-          ref: de,
-          node: Q.value.node,
-          "port-position": Q.value.portPosition,
-          "tooltip-text": H.value.tooltipText,
-          onOpen: re,
-          onClose: ce,
-          onStartDrag: ue,
-          onMouseenter: j,
-          onMouseleave: oe
+          ref: d,
+          node: le(v).node,
+          "port-position": le(v).portPosition,
+          onOpen: le(b),
+          onClose: le(E),
+          onStartDrag: le(B),
+          onMouseenter: le(X),
+          onMouseleave: le(C)
         }, {
-          default: je(() => [
-            ke(y.$slots, "quick-add-panel", {
-              node: Q.value.node,
+          default: He(() => [
+            Ee(N.$slots, "quick-add-panel", {
+              node: le(v).node,
               api: s.editor.api.value,
-              insertNodeToRight: (c) => Ie(Q.value.node.id, c),
-              closePopover: () => de.value?.closePopover()
+              insertNodeToRight: (_) => le(L)(le(v).node.id, _),
+              closePopover: () => d.value?.closePopover()
             }, void 0, !0)
           ]),
           _: 3
-        }, 8, ["node", "port-position", "tooltip-text"])) : U("", !0),
-        Y.value ? (M(), De(Ft, {
+        }, 8, ["node", "port-position", "onOpen", "onClose", "onStartDrag", "onMouseenter", "onMouseleave"])) : Y("", !0),
+        y.value ? (D(), be(no, {
           key: 1,
-          node: Y.value.node,
-          position: Y.value.position,
-          config: q.value,
-          behavior: Y.value.behavior,
-          "actions-offset": Y.value.behavior.actionsOffset,
-          onAction: Me,
-          onMouseenter: lt(p),
-          onMouseleave: E
-        }, null, 8, ["node", "position", "config", "behavior", "actions-offset", "onMouseenter"])) : U("", !0)
+          node: y.value.node,
+          position: y.value.position,
+          config: z.value,
+          behavior: y.value.behavior,
+          "actions-offset": y.value.behavior.actionsOffset,
+          onAction: H,
+          onMouseenter: le(T),
+          onMouseleave: P
+        }, null, 8, ["node", "position", "config", "behavior", "actions-offset", "onMouseenter"])) : Y("", !0),
+        f.value ? (D(), be(uo, {
+          key: 2,
+          position: f.value.position,
+          "can-delete": f.value.canDelete,
+          onAction: Z
+        }, null, 8, ["position", "can-delete"])) : Y("", !0)
       ])
-    ], 512));
+    ], 2));
   }
-}), So = /* @__PURE__ */ he(Xt, [["__scopeId", "data-v-b37732f8"]]), Yt = { class: "flow-canvas-node-palette" }, Kt = ["data-node-type"], Zt = { class: "flow-canvas-node-palette__item-label" }, Jt = /* @__PURE__ */ ge({
+}), pn = /* @__PURE__ */ he(go, [["__scopeId", "data-v-ef705b28"]]), po = { class: "flow-canvas-node-palette" }, ho = ["data-node-type"], vo = { class: "flow-canvas-node-palette__item-label" }, yo = /* @__PURE__ */ fe({
   __name: "canvas-node-palette",
   props: {
     editor: {},
     items: {}
   },
   setup(s) {
-    const e = s, t = O(), o = F(() => e.items ? e.items : Object.keys(e.editor.schema.nodeTypes).map((n) => ({
+    const e = s, t = q(), 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 fe(
+    return pe(
       [() => e.editor.api.value, o, t],
-      ([n, r, i], l, a) => {
-        if (!n || !i) return;
-        const g = [];
-        for (const d of r) {
-          const v = i.querySelector(`[data-node-type="${d.type}"]`);
-          if (!v) continue;
-          const f = n.registerDndSource(v, () => ({
-            id: W(),
-            type: d.type,
-            label: d.label,
+      ([n, i, r], l, a) => {
+        if (!n || !r) return;
+        const h = [];
+        for (const u of i) {
+          const g = r.querySelector(`[data-node-type="${u.type}"]`);
+          if (!g) continue;
+          const p = n.registerDndSource(g, () => ({
+            id: te(),
+            type: u.type,
+            label: u.label,
             position: { x: 0, y: 0 }
           }));
-          g.push(f);
+          h.push(p);
         }
         a(() => {
-          for (const d of g) d();
+          for (const u of h) u();
         });
       },
       { flush: "post" }
-    ), (n, r) => (M(), S("div", Yt, [
-      B("div", {
+    ), (n, i) => (D(), R("div", po, [
+      U("div", {
         ref_key: "listRef",
         ref: t,
         class: "flow-canvas-node-palette__list"
       }, [
-        (M(!0), S(pe, null, Pe(o.value, (i) => (M(), S("div", {
-          key: i.type,
+        (D(!0), R(me, null, Ie(o.value, (r) => (D(), R("div", {
+          key: r.type,
           class: "flow-canvas-node-palette__item",
-          "data-node-type": i.type
+          "data-node-type": r.type
         }, [
-          i.icon ? (M(), S("i", {
+          r.icon ? (D(), R("i", {
             key: 0,
-            class: ee([i.icon, "flow-canvas-node-palette__item-icon"])
-          }, null, 2)) : U("", !0),
-          B("span", Zt, me(i.label), 1)
-        ], 8, Kt))), 128))
+            class: se([r.icon, "flow-canvas-node-palette__item-icon"])
+          }, null, 2)) : Y("", !0),
+          U("span", vo, ge(r.label), 1)
+        ], 8, ho))), 128))
       ], 512)
     ]));
   }
-}), eo = /* @__PURE__ */ he(Jt, [["__scopeId", "data-v-300314b7"]]), to = { class: "flow-canvas-layout" }, oo = { class: "flow-canvas-layout__main" }, no = { class: "flow-canvas-layout__content" }, so = {
+}), mo = /* @__PURE__ */ he(yo, [["__scopeId", "data-v-300314b7"]]), wo = { class: "flow-canvas-layout" }, bo = { class: "flow-canvas-layout__main" }, xo = { class: "flow-canvas-layout__content" }, Eo = {
   key: 0,
   class: "flow-canvas-layout__footer"
-}, io = /* @__PURE__ */ ge({
+}, Io = /* @__PURE__ */ fe({
   __name: "canvas-layout",
   props: {
     sidebarCollapsed: { type: Boolean, default: !1 },
@@ -2379,33 +2775,33 @@ const jt = { class: "flow-canvas-node-actions__bar" }, Ht = /* @__PURE__ */ ge({
   },
   emits: ["update:sidebarCollapsed"],
   setup(s) {
-    return (e, t) => (M(), S("div", to, [
-      !s.hideSidebar && (e.$slots.sidebar || s.editor) ? (M(), S("aside", {
+    return (e, t) => (D(), R("div", wo, [
+      !s.hideSidebar && (e.$slots.sidebar || s.editor) ? (D(), R("aside", {
         key: 0,
-        class: ee(["flow-canvas-layout__sidebar", { "is-collapsed": s.sidebarCollapsed }]),
-        style: _e({ width: s.sidebarCollapsed ? "0px" : `${s.sidebarWidth}px` })
+        class: se(["flow-canvas-layout__sidebar", { "is-collapsed": s.sidebarCollapsed }]),
+        style: we({ width: s.sidebarCollapsed ? "0px" : `${s.sidebarWidth}px` })
       }, [
-        ke(e.$slots, "sidebar", {}, () => [
-          s.editor ? (M(), De(eo, {
+        Ee(e.$slots, "sidebar", {}, () => [
+          s.editor ? (D(), be(mo, {
             key: 0,
             editor: s.editor,
             items: s.paletteItems
-          }, null, 8, ["editor", "items"])) : U("", !0)
+          }, null, 8, ["editor", "items"])) : Y("", !0)
         ], !0)
-      ], 6)) : U("", !0),
-      B("div", oo, [
-        B("div", no, [
-          ke(e.$slots, "default", {}, void 0, !0)
+      ], 6)) : Y("", !0),
+      U("div", bo, [
+        U("div", xo, [
+          Ee(e.$slots, "default", {}, void 0, !0)
         ]),
-        !s.hideFooter && e.$slots.footer ? (M(), S("div", so, [
-          ke(e.$slots, "footer", {}, void 0, !0)
-        ])) : U("", !0)
+        !s.hideFooter && e.$slots.footer ? (D(), R("div", Eo, [
+          Ee(e.$slots, "footer", {}, void 0, !0)
+        ])) : Y("", !0)
       ])
     ]));
   }
-}), Do = /* @__PURE__ */ he(io, [["__scopeId", "data-v-26f35b6b"]]), ro = ["undo", "redo"];
-function ao(s) {
-  const e = new Set(s?.include), t = /* @__PURE__ */ new Set([...ro.filter((a) => !e.has(a)), ...s?.exclude ?? []]), o = [
+}), hn = /* @__PURE__ */ he(Io, [["__scopeId", "data-v-26f35b6b"]]), Co = ["undo", "redo"];
+function ko(s) {
+  const e = new Set(s?.include), t = new Set(Co.filter((a) => !e.has(a))), o = [
     {
       id: "undo",
       type: "undo",
@@ -2439,22 +2835,6 @@ function ao(s) {
       description: "自动排版",
       order: 21
     },
-    {
-      id: "search",
-      type: "search",
-      group: "tools",
-      icon: "flow-canvas-icon canvas-search",
-      description: "搜索节点",
-      order: 22
-    },
-    {
-      id: "minimap",
-      type: "minimap",
-      group: "tools",
-      icon: "flow-canvas-icon canvas-map",
-      description: "缩略图",
-      order: 23
-    },
     {
       id: "export",
       type: "export",
@@ -2463,7 +2843,7 @@ function ao(s) {
       description: "导出为图片",
       order: 24
     }
-  ], r = [
+  ], i = [
     {
       id: "zoom-out",
       type: "zoom-out",
@@ -2481,7 +2861,7 @@ function ao(s) {
       description: "放大画布",
       order: 32
     }
-  ], i = [
+  ], r = [
     {
       id: "reset",
       type: "reset",
@@ -2493,15 +2873,15 @@ function ao(s) {
   ];
   return [...[...o, ...n].filter(
     (a) => !t.has(a.type)
-  ), ...r, ...i];
+  ), ...i, ...r];
 }
-const lo = { class: "flow-canvas-toolbar" }, co = {
+const So = { class: "flow-canvas-toolbar" }, Mo = {
   key: 0,
   class: "flow-canvas-toolbar__separator"
-}, uo = { class: "flow-canvas-toolbar__group" }, fo = {
+}, No = { class: "flow-canvas-toolbar__group" }, _o = {
   key: 0,
   class: "flow-canvas-toolbar__zoom-display"
-}, po = ["data-description", "disabled", "onClick"], go = ["textContent"], ho = /* @__PURE__ */ ge({
+}, Do = ["data-toolbar-id", "data-toolbar-type", "disabled", "onClick", "onMouseenter"], Ao = ["textContent"], Po = /* @__PURE__ */ fe({
   __name: "canvas-toolbar",
   props: {
     items: {},
@@ -2509,162 +2889,250 @@ const lo = { class: "flow-canvas-toolbar" }, co = {
     editor: {}
   },
   setup(s) {
-    const e = s, t = F(() => e.items ? e.items : ao({ exclude: e.exclude })), o = O(1);
-    let n = null;
-    fe(
-      () => e.editor.api.value,
-      (p) => {
-        n?.(), n = null, p && (o.value = p.getZoom(), n = p.onGraphEvent("scale", () => {
-          o.value = p.getZoom();
+    const e = /* @__PURE__ */ new Set([
+      "undo",
+      "redo",
+      "select",
+      "auto-layout",
+      "search",
+      "minimap",
+      "export"
+    ]), t = /* @__PURE__ */ new Set(["select", "search", "minimap"]);
+    function o(d) {
+      return d.id.startsWith("plugin:") || d.type === "custom";
+    }
+    function n(d) {
+      return d !== "custom" && t.has(d);
+    }
+    const i = s, r = j(() => {
+      if (i.items) return i.items;
+      const d = ko(), c = i.editor.toolbarItems.value, v = new Set(i.exclude ?? []), b = /* @__PURE__ */ new Map();
+      for (const E of d)
+        b.set(E.id, E);
+      for (const E of c) {
+        const B = b.get(E.id);
+        B ? b.set(E.id, { ...B, ...E, order: B.order, group: B.group }) : o(E) && b.set(E.id, E);
+      }
+      return [...b.values()].filter((E) => E.type === "custom" || !e.has(E.type) ? !0 : !v.has(E.type)).sort((E, B) => (E.order ?? 0) - (B.order ?? 0));
+    }), l = q(1), a = q(null), h = q(null), u = q(!1);
+    let g = null;
+    pe(
+      () => i.editor.api.value,
+      (d) => {
+        g?.(), g = null, d && (l.value = d.getZoom(), g = d.onGraphEvent("scale", () => {
+          l.value = d.getZoom();
         }));
       },
       { immediate: !0 }
-    ), et(() => {
-      n?.();
+    );
+    const p = at({ visible: !1, text: "", x: 0, y: 0 });
+    function x(d, c) {
+      if (!c.description) return;
+      const b = d.currentTarget.getBoundingClientRect();
+      p.text = c.description, p.visible = !0, Oe(() => {
+        const E = a.value?.offsetWidth ?? 0, B = a.value?.offsetHeight ?? 0;
+        p.x = b.left + b.width / 2 - E / 2, p.y = b.top - B - 6;
+      });
+    }
+    function m() {
+      p.visible = !1, a.value = null;
+    }
+    Je(() => {
+      g?.();
     });
-    const r = F(() => `${Math.round(o.value * 100)}%`), i = F(() => e.editor.api.value ? {
-      api: e.editor.api.value,
-      flowModel: e.editor.flowModel.value,
-      history: e.editor.history,
-      mode: e.editor.mode.value
+    const k = j(() => `${Math.round(l.value * 100)}%`), S = j(() => i.editor.api.value ? {
+      api: i.editor.api.value,
+      flowModel: i.editor.flowModel.value,
+      history: i.editor.history,
+      mode: i.editor.mode.value
     } : null);
-    function l(p) {
-      return p.visible === !1 ? !1 : typeof p.visible == "function" ? i.value ? p.visible(i.value) : !1 : !0;
+    function T(d) {
+      return d.visible === !1 ? !1 : typeof d.visible == "function" ? S.value ? d.visible(S.value) : !1 : !0;
     }
-    function a(p) {
-      return p.type === "select" ? e.editor.selectionMode.value : !1;
+    function P(d) {
+      return typeof d.active == "function" ? S.value ? d.active(S.value) : !1 : d.active !== void 0 ? d.active : d.type === "select" ? i.editor.selectionMode.value : !1;
+    }
+    const G = j(() => {
+      const d = y.value.filter(
+        (v) => n(v.type) && P(v)
+      );
+      if (d.length === 0) return null;
+      const c = h.value;
+      return c && d.some((v) => v.type === c) ? c : d[0]?.type ?? null;
+    });
+    function K(d) {
+      return n(d.type) ? G.value === d.type : P(d);
     }
-    function g(p) {
-      return !i.value || p.disabled === !0 ? !0 : typeof p.disabled == "function" ? p.disabled(i.value) : p.type === "undo" ? !e.editor.history.canUndo.value : p.type === "redo" ? !e.editor.history.canRedo.value : !1;
+    function O(d) {
+      return !S.value || d.disabled === !0 ? !0 : typeof d.disabled == "function" ? d.disabled(S.value) : d.type === "undo" ? !i.editor.history.canUndo.value : d.type === "redo" ? !i.editor.history.canRedo.value : d.type === "export" ? u.value : !1;
     }
-    function d(p) {
-      if (!i.value || g(p)) return;
-      if (p.onClick) {
-        p.onClick(i.value);
+    function W(d) {
+      if (!(!S.value || !n(d.type) || !P(d))) {
+        if (d.type === "select") {
+          i.editor.setSelectionMode(!1);
+          return;
+        }
+        d.onClick?.(S.value);
+      }
+    }
+    function z(d) {
+      if (n(d.type))
+        for (const c of y.value)
+          !n(c.type) || c.id === d.id || W(c);
+    }
+    function M(d) {
+      if (!S.value || O(d)) return;
+      if (n(d.type) && (h.value = d.type, z(d)), d.onClick) {
+        d.onClick(S.value);
         return;
       }
-      const { api: E } = i.value;
-      switch (p.type) {
+      const { api: c } = S.value;
+      switch (d.type) {
         case "undo":
-          e.editor.history.undo();
+          i.editor.history.undo();
           break;
         case "redo":
-          e.editor.history.redo();
+          i.editor.history.redo();
           break;
         case "zoom-in":
-          E.zoomIn(), o.value = E.getZoom();
+          c.zoomIn(), l.value = c.getZoom();
           break;
         case "zoom-out":
-          E.zoomOut(), o.value = E.getZoom();
+          c.zoomOut(), l.value = c.getZoom();
           break;
         case "fit":
-          E.zoomToFit();
+          c.zoomToFit();
           break;
         case "reset":
-          E.zoomTo(1), E.scrollToOrigin(), o.value = 1;
+          c.zoomTo(1), c.scrollToOrigin(), l.value = 1;
           break;
         case "export":
-          E.exportAsImage().then((w) => {
-            const N = URL.createObjectURL(w), m = document.createElement("a");
-            m.href = N, m.download = "canvas-export.png", m.click(), URL.revokeObjectURL(N);
-          }).catch((w) => {
-            console.warn("[flow-canvas] Export failed:", w);
+          if (u.value) break;
+          u.value = !0, c.exportAsImage().then((v) => {
+            const b = URL.createObjectURL(v), E = document.createElement("a");
+            E.href = b, E.download = "canvas-export.png", E.click(), URL.revokeObjectURL(b);
+          }).catch((v) => {
+            console.warn("[flow-canvas] Export failed:", v);
+          }).finally(() => {
+            u.value = !1;
           });
           break;
         case "select":
-          e.editor.setSelectionMode(!e.editor.selectionMode.value);
+          i.editor.setSelectionMode(!i.editor.selectionMode.value);
           break;
-        case "search":
         case "auto-layout":
+          i.editor._emitUiEvent({ type: "toolbar.auto-layout" });
+          break;
+        case "search":
         case "minimap":
-          console.warn(`[flow-canvas] "${p.type}" toolbar item has no built-in handler. Provide an onClick callback.`);
+          console.warn(`[flow-canvas] "${d.type}" toolbar item has no built-in handler. Provide an onClick callback.`);
           break;
         default:
-          p.type !== "custom" && console.warn(`[flow-canvas] No default handler for toolbar type "${p.type}". Provide an onClick handler.`);
+          d.type !== "custom" && console.warn(`[flow-canvas] No default handler for toolbar type "${d.type}". Provide an onClick handler.`);
           break;
       }
     }
-    const v = F(() => t.value.filter(l)), f = F(() => {
-      const p = /* @__PURE__ */ new Map(), E = [];
-      for (const w of v.value) {
-        const N = w.group ?? "default";
-        p.has(N) || (p.set(N, []), E.push(N)), p.get(N).push(w);
+    const y = j(() => r.value.filter(T)), f = j(() => {
+      const d = /* @__PURE__ */ new Map(), c = [];
+      for (const v of y.value) {
+        const b = v.group ?? "default";
+        d.has(b) || (d.set(b, []), c.push(b)), d.get(b).push(v);
       }
-      return E.map((w) => ({ name: w, items: p.get(w) })).filter((w) => w.items.length > 0);
+      return c.map((v) => ({ name: v, items: d.get(v) })).filter((v) => v.items.length > 0);
     });
-    return (p, E) => (M(), S("div", lo, [
-      (M(!0), S(pe, null, Pe(f.value, (w, N) => (M(), S(pe, {
-        key: w.name
+    return (d, c) => (D(), R("div", So, [
+      (D(!0), R(me, null, Ie(f.value, (v, b) => (D(), R(me, {
+        key: v.name
       }, [
-        N > 0 ? (M(), S("div", co)) : U("", !0),
-        B("div", uo, [
-          (M(!0), S(pe, null, Pe(w.items, (m) => (M(), S(pe, {
-            key: m.id
+        b > 0 ? (D(), R("div", Mo)) : Y("", !0),
+        U("div", No, [
+          (D(!0), R(me, null, Ie(v.items, (E) => (D(), R(me, {
+            key: E.id
           }, [
-            m.type === "zoom-display" ? (M(), S("span", fo, me(r.value), 1)) : (M(), S("button", {
+            E.type === "zoom-display" ? (D(), R("span", _o, ge(k.value), 1)) : (D(), R("button", {
               key: 1,
-              class: ee(["flow-canvas-toolbar__btn", { "is-disabled": g(m), "is-active": a(m) }]),
-              "data-description": m.description,
-              disabled: g(m),
-              onClick: (D) => d(m)
+              type: "button",
+              class: se(["flow-canvas-toolbar__btn", {
+                "is-disabled": O(E),
+                "is-active": K(E),
+                "is-exporting": E.type === "export" && u.value
+              }]),
+              "data-toolbar-id": E.id,
+              "data-toolbar-type": E.type,
+              disabled: O(E),
+              onClick: (B) => M(E),
+              onMouseenter: (B) => x(B, E),
+              onMouseleave: m
             }, [
-              m.component ? (M(), De(dt(m.component), { key: 0 })) : m.icon ? (M(), S("i", {
+              E.component ? (D(), be(lt(E.component), { key: 0 })) : E.icon ? (D(), R("i", {
                 key: 1,
-                class: ee(m.icon)
-              }, null, 2)) : (M(), S("span", {
+                class: se(E.icon)
+              }, null, 2)) : (D(), R("span", {
                 key: 2,
                 class: "flow-canvas-toolbar__text",
-                textContent: me(m.text ?? m.description ?? m.id)
-              }, null, 8, go))
-            ], 10, po))
+                textContent: ge(E.text ?? E.description ?? E.id)
+              }, null, 8, Ao))
+            ], 42, Do))
           ], 64))), 128))
         ])
-      ], 64))), 128))
+      ], 64))), 128)),
+      (D(), be(dt, { to: "body" }, [
+        p.visible ? (D(), R("div", {
+          key: 0,
+          ref_key: "tooltipRef",
+          ref: a,
+          class: "flow-canvas-toolbar-tooltip",
+          style: we({ left: `${p.x}px`, top: `${p.y}px` })
+        }, [
+          Le(ge(p.text) + " ", 1),
+          c[0] || (c[0] = U("div", { class: "flow-canvas-toolbar-tooltip__arrow" }, null, -1))
+        ], 4)) : Y("", !0)
+      ]))
     ]));
   }
-}), Po = /* @__PURE__ */ he(ho, [["__scopeId", "data-v-51b5c98a"]]), vo = { class: "flow-canvas-default-node__ep-label" }, yo = {
+}), vn = /* @__PURE__ */ he(Po, [["__scopeId", "data-v-77d4afbb"]]), To = { class: "flow-canvas-default-node__ep-label" }, Ro = {
   key: 1,
-  class: "flow-canvas-default-node__diamond"
-}, mo = {
+  class: "flow-canvas-default-node__diamond flow-canvas-highlight-target"
+}, Lo = {
   key: 2,
   class: "flow-canvas-default-node__task-label"
-}, bo = /* @__PURE__ */ ge({
+}, Oo = /* @__PURE__ */ fe({
   __name: "default-node",
   setup(s) {
-    const t = ct("getNode")?.(), o = F(() => t?.getData?.() ?? null), n = F(() => o.value?.label || o.value?.type || ""), r = {
+    const t = ct("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"
-    }, i = /* @__PURE__ */ new Set(["start", "end"]), l = /* @__PURE__ */ new Set([
+    }, r = /* @__PURE__ */ new Set(["start", "end"]), l = /* @__PURE__ */ new Set([
       "parallel-gateway",
       "branch-gateway",
       "converge-gateway",
       "conditional-parallel-gateway"
-    ]), a = F(() => {
-      const d = o.value?.type ?? "";
-      return i.has(d) ? "endpoint" : l.has(d) ? "gateway" : "task";
-    }), g = F(() => r[o.value?.type ?? ""] ?? "");
-    return (d, v) => (M(), S("div", {
-      class: ee(["flow-canvas-default-node", `is-${a.value}`])
+    ]), a = j(() => {
+      const u = o.value?.type ?? "";
+      return r.has(u) ? "endpoint" : l.has(u) ? "gateway" : "task";
+    }), h = j(() => i[o.value?.type ?? ""] ?? "");
+    return (u, g) => (D(), R("div", {
+      class: se(["flow-canvas-default-node", [`is-${a.value}`, { "flow-canvas-highlight-target": a.value !== "gateway" }]])
     }, [
-      a.value === "endpoint" ? (M(), S(pe, { key: 0 }, [
-        g.value ? (M(), S("i", {
+      a.value === "endpoint" ? (D(), R(me, { key: 0 }, [
+        h.value ? (D(), R("i", {
           key: 0,
-          class: ee([["flow-canvas-icon", g.value], "flow-canvas-default-node__ep-icon"])
-        }, null, 2)) : U("", !0),
-        B("span", vo, me(n.value), 1)
-      ], 64)) : a.value === "gateway" ? (M(), S("div", yo, [
-        g.value ? (M(), S("i", {
+          class: se([["flow-canvas-icon", h.value], "flow-canvas-default-node__ep-icon"])
+        }, null, 2)) : Y("", !0),
+        U("span", To, ge(n.value), 1)
+      ], 64)) : a.value === "gateway" ? (D(), R("div", Ro, [
+        h.value ? (D(), R("i", {
           key: 0,
-          class: ee([["flow-canvas-icon", g.value], "flow-canvas-default-node__gw-icon"])
-        }, null, 2)) : U("", !0)
-      ])) : (M(), S("span", mo, me(n.value), 1))
+          class: se([["flow-canvas-icon", h.value], "flow-canvas-default-node__gw-icon"])
+        }, null, 2)) : Y("", !0)
+      ])) : (D(), R("span", Lo, ge(n.value), 1))
     ], 2));
   }
-}), wo = /* @__PURE__ */ he(bo, [["__scopeId", "data-v-c88cdae7"]]), xo = {
+}), $o = /* @__PURE__ */ he(Oo, [["__scopeId", "data-v-f0e24a9f"]]), Bo = {
   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 },
@@ -2677,11 +3145,11 @@ const lo = { class: "flow-canvas-toolbar" }, co = {
     width: 64,
     height: 64
   }
-}, Ze = (s, e) => ({
+}, Ke = (s, e) => ({
   stroke: e.hovered ? "#3a84ff" : "#abb5cc",
   strokeWidth: 2
 });
-function Je() {
+function Ze() {
   return {
     attrs: {
       line: {
@@ -2692,67 +3160,72 @@ function Je() {
     }
   };
 }
-function ko() {
+function Ho() {
   return {
     manhattan: {
       router: { name: "manhattan", args: { padding: 10, maxDirectionChange: 90 } },
       connector: { name: "rounded", args: { radius: 8 } },
-      style: Ze,
-      x6EdgeConfig: Je()
+      style: Ke,
+      x6EdgeConfig: Ze()
     },
     bezier: {
       connector: { name: "smooth" },
-      style: Ze,
-      x6EdgeConfig: Je()
+      style: Ke,
+      x6EdgeConfig: Ze()
     }
   };
 }
-function _o(s) {
-  const e = s?.nodeTypes ?? xo, t = {}, o = [];
-  for (const [i, l] of Object.entries(e)) {
-    const a = l.width ?? 150, g = l.height ?? 50;
-    t[i] = {
-      component: wo,
-      getSize: () => ({ width: a, height: g }),
+function yn(s) {
+  const e = s?.nodeTypes ?? Bo, t = {}, o = [];
+  for (const [r, l] of Object.entries(e)) {
+    const a = l.width ?? 150, h = l.height ?? 50;
+    t[r] = {
+      component: $o,
+      getSize: () => ({ width: a, height: h }),
       getPorts: () => nt()
     }, o.push({
-      type: i,
-      label: l.label ?? i,
+      type: r,
+      label: l.label ?? r,
       icon: l.icon
     });
   }
   const n = {
-    ...ko(),
+    ...Ho(),
     ...s?.edgeTypes
-  }, r = s?.defaultEdgeType ?? "manhattan";
+  }, i = s?.defaultEdgeType ?? "manhattan";
   return {
-    schema: { nodeTypes: t, defaultEdgeType: r, edgeTypes: n },
+    schema: { nodeTypes: t, defaultEdgeType: i, edgeTypes: n },
     paletteItems: o
   };
 }
-function Ao(s) {
+function mn(s) {
   return {
     name: "connection-validator",
     priority: 10,
     transformCommand(e, t, o) {
-      for (const n of e.commands) {
-        if (n.type !== "edge.add" && n.type !== "edge.reconnect") continue;
-        const r = o.flowModel.value, i = n.type === "edge.add" ? n.edge.source.nodeId : n.source?.nodeId, l = n.type === "edge.add" ? n.edge.target.nodeId : n.target?.nodeId;
-        if (!i || !l) continue;
-        const a = r.nodes[i], g = r.nodes[l];
-        if (!a || !g) continue;
-        const d = n.type === "edge.add" ? n.edge.source.portId : n.source?.portId, v = n.type === "edge.add" ? n.edge.target.portId : n.target?.portId, f = d ? a.ports?.find((m) => m.id === d) : void 0, p = v ? g.ports?.find((m) => m.id === v) : void 0, E = n.type === "edge.reconnect" ? n.edgeId : void 0, w = Object.values(r.edges).filter((m) => m.id !== E), N = s({
+      const n = /* @__PURE__ */ new Set();
+      for (const i of e.commands)
+        i.type === "edge.remove" && n.add(i.edgeId);
+      for (const i of e.commands) {
+        if (i.type !== "edge.add" && i.type !== "edge.reconnect") continue;
+        const r = o.flowModel.value, l = i.type === "edge.add" ? i.edge.source.nodeId : i.source?.nodeId, a = i.type === "edge.add" ? i.edge.target.nodeId : i.target?.nodeId;
+        if (!l || !a) continue;
+        const h = r.nodes[l], u = r.nodes[a];
+        if (!h || !u) continue;
+        const g = i.type === "edge.add" ? i.edge.source.portId : i.source?.portId, p = i.type === "edge.add" ? i.edge.target.portId : i.target?.portId, x = g ? h.ports?.find((P) => P.id === g) : void 0, m = p ? u.ports?.find((P) => P.id === p) : void 0, k = i.type === "edge.reconnect" ? i.edgeId : void 0, S = Object.values(r.edges).filter(
+          (P) => P.id !== k && !n.has(P.id)
+        ), T = s({
           flowModel: r,
-          sourceNode: a,
-          targetNode: g,
-          sourcePort: f,
-          targetPort: p,
-          existingEdges: w
+          sourceNode: h,
+          targetNode: u,
+          sourcePort: x,
+          targetPort: m,
+          existingEdges: S
         });
-        if (!N.valid)
+        if (!T.valid)
           return {
             rejected: !0,
-            reason: N.reason ?? "Connection validation failed",
+            reason: T.reason ?? "Connection validation failed",
             code: "validation_failed"
           };
       }
@@ -2760,36 +3233,36 @@ function Ao(s) {
     }
   };
 }
-function To(s) {
+function wn(s) {
   const { rubberband: e = !0, multiple: t = !0, movable: o = !0 } = s ?? {};
   return {
     name: "selection",
     priority: 90,
-    async attachRuntime(n) {
-      const { Selection: r } = await import("@antv/x6-plugin-selection");
+    attachRuntime(n) {
       n.graph.use(
-        new r({
+        new pt({
           enabled: !0,
           rubberband: e,
           multiple: t,
           movable: o,
+          pointerEvents: "none",
           showNodeSelectionBox: !0,
-          filter: (i) => !(i.isNode() && (!n.graph.isRubberbandEnabled?.() || (i.getData?.() ?? {})._selectable === !1))
+          filter: (i) => !(i.isNode() && (i.getData?.() ?? {})._selectable === !1)
         })
       );
     }
   };
 }
-function Ro(s) {
+function bn(s) {
   const { tolerance: e = 10, color: t = "#3a84ff" } = s ?? {};
   let o = null;
   return {
     name: "snapline",
     priority: 90,
     async attachRuntime(n) {
-      const { Snapline: r } = await import("@antv/x6-plugin-snapline");
+      const { Snapline: i } = await import("@antv/x6-plugin-snapline");
       n.graph.use(
-        new r({
+        new i({
           enabled: !0,
           tolerance: e,
           className: "flow-canvas-snapline"
@@ -2801,45 +3274,365 @@ function Ro(s) {
     }
   };
 }
-function $o(s) {
+const Go = { class: "flow-canvas-search-popover__input" }, qo = ["value", "placeholder"], Fo = ["onMouseenter", "onClick"], Uo = { class: "flow-canvas-search-popover__item-label" }, zo = {
+  key: 0,
+  class: "flow-canvas-search-popover__item-subtitle"
+}, jo = {
+  key: 1,
+  class: "flow-canvas-search-popover__empty"
+}, Wo = /* @__PURE__ */ fe({
+  __name: "search-popover",
+  props: {
+    open: { type: Boolean },
+    position: {},
+    query: {},
+    results: {},
+    placeholder: { default: "搜索节点名称" },
+    emptyText: { default: "暂无匹配节点" },
+    isAnchorTarget: { type: Function, default: void 0 }
+  },
+  emits: ["update:query", "select", "close"],
+  setup(s, { emit: e }) {
+    const t = s, o = e, n = q(null), i = q(null), r = q(-1);
+    pe(
+      () => t.open,
+      (m) => {
+        m && (r.value = -1, Oe(() => {
+          n.value?.focus(), n.value?.select();
+        }));
+      }
+    ), pe(
+      () => t.query,
+      () => {
+        r.value = -1;
+      }
+    ), pe(
+      () => t.results.length,
+      (m) => {
+        if (!m) {
+          r.value = -1;
+          return;
+        }
+        r.value >= m && (r.value = -1);
+      }
+    );
+    function l(m) {
+      o("update:query", m.target.value);
+    }
+    function a(m) {
+      r.value = m;
+    }
+    function h() {
+      r.value = -1;
+    }
+    function u() {
+      o("update:query", ""), Oe(() => {
+        n.value?.focus();
+      });
+    }
+    function g() {
+      const m = t.results[r.value] ?? t.results[0];
+      m && o("select", m.id);
+    }
+    function p(m) {
+      if (m.key === "Escape") {
+        m.preventDefault(), o("close");
+        return;
+      }
+      if (m.key === "ArrowDown") {
+        if (m.preventDefault(), !t.results.length) return;
+        r.value = r.value < t.results.length - 1 ? r.value + 1 : 0;
+        return;
+      }
+      if (m.key === "ArrowUp") {
+        if (m.preventDefault(), !t.results.length) return;
+        r.value = r.value > 0 ? r.value - 1 : t.results.length - 1;
+        return;
+      }
+      m.key === "Enter" && (m.preventDefault(), g());
+    }
+    function x(m) {
+      if (!t.open) return;
+      const k = m.target;
+      k && i.value?.contains(k) || t.isAnchorTarget?.(m.target) || o("close");
+    }
+    return ot(() => {
+      document.addEventListener("mousedown", x);
+    }), Me(() => {
+      document.removeEventListener("mousedown", x);
+    }), (m, k) => s.open ? (D(), R("div", {
+      key: 0,
+      ref_key: "panelRef",
+      ref: i,
+      class: "flow-canvas-search-popover",
+      style: we({ left: `${s.position.x}px`, top: `${s.position.y}px`, width: `${s.position.width}px` })
+    }, [
+      U("div", Go, [
+        k[1] || (k[1] = U("i", { class: "flow-canvas-icon canvas-search" }, null, -1)),
+        U("input", {
+          ref_key: "inputRef",
+          ref: n,
+          value: s.query,
+          placeholder: s.placeholder,
+          onInput: l,
+          onKeydown: p
+        }, null, 40, qo),
+        s.query ? (D(), R("button", {
+          key: 0,
+          type: "button",
+          class: "flow-canvas-search-popover__clear",
+          "aria-label": "清空搜索",
+          onClick: u
+        }, [...k[0] || (k[0] = [
+          U("i", { class: "flow-canvas-icon canvas-close-circle-shape" }, null, -1)
+        ])])) : Y("", !0)
+      ]),
+      s.results.length ? (D(), R("div", {
+        key: 0,
+        class: "flow-canvas-search-popover__list",
+        onMouseleave: h
+      }, [
+        (D(!0), R(me, null, Ie(s.results, (S, T) => (D(), R("button", {
+          key: S.id,
+          type: "button",
+          class: se(["flow-canvas-search-popover__item", { "is-active": T === r.value }]),
+          onMouseenter: (P) => a(T),
+          onClick: (P) => o("select", S.id)
+        }, [
+          U("span", Uo, ge(S.label), 1),
+          S.subtitle ? (D(), R("span", zo, ge(S.subtitle), 1)) : Y("", !0)
+        ], 42, Fo))), 128))
+      ], 32)) : (D(), R("div", jo, ge(s.emptyText), 1))
+    ], 4)) : Y("", !0);
+  }
+}), Vo = /* @__PURE__ */ he(Wo, [["__scopeId", "data-v-c80f6b26"]]), Qe = 282, Xo = 4, Yo = 300, Ko = 360, Be = 100, Zo = Ko * 4 - Be;
+function Qo(s) {
+  return s !== null;
+}
+function Jo(s) {
+  const e = /* @__PURE__ */ new Set();
+  return s.map((t) => t?.trim()).filter((t) => !!t).filter((t) => {
+    const o = t.toLowerCase();
+    return e.has(o) ? !1 : (e.add(o), !0);
+  });
+}
+function en(s, e) {
+  const t = Math.max(8, window.innerWidth - e - 8);
+  return Math.min(Math.max(8, s), t);
+}
+function tn(s, e) {
+  const t = e?.getNodeMeta?.(s);
+  if (t === null) return null;
+  const o = t?.label?.trim() || s.label?.trim() || s.id, n = t?.subtitle?.trim() || void 0, i = Jo(t?.keywords ?? [s.label, n]);
+  return i.length ? {
+    id: s.id,
+    label: o,
+    subtitle: n,
+    keywords: i
+  } : null;
+}
+function xn(s) {
+  let e = null, t = null, o = null, n = null, i = null, r = [];
+  const l = q(!1), a = q(""), h = q({ x: 0, y: 0, width: Qe }), u = j(() => e ? Object.values(e.flowModel.value.nodes).map((M) => tn(M, s)).filter(Qo) : []), g = j(() => {
+    const M = a.value.trim().toLowerCase(), y = Math.max(1, s?.maxResults ?? Yo);
+    return M ? u.value.filter((f) => f.keywords.some((d) => d.toLowerCase().includes(M))).slice(0, y) : u.value.slice(0, y);
+  });
+  function p() {
+    return o?.querySelector('.flow-canvas-toolbar__btn[data-toolbar-type="search"]');
+  }
+  function x() {
+    return p()?.closest(".flow-canvas-toolbar");
+  }
+  function m() {
+    const M = x(), y = o?.getBoundingClientRect(), f = M?.getBoundingClientRect() ?? y;
+    if (!f) return;
+    const d = Math.max(Qe, Math.round(f.width));
+    h.value = {
+      x: en(f.left, d),
+      y: f.bottom + Xo,
+      width: d
+    };
+  }
+  function k() {
+    r.forEach((M) => clearTimeout(M)), r = [], t?.api.clearHighlight();
+  }
+  function S(M) {
+    k();
+    const y = setTimeout(() => {
+      t?.api.highlightNodes([M]);
+    }, Be), f = setTimeout(() => {
+      t?.api.clearHighlight(), r = [];
+    }, Be + Zo);
+    r.push(y, f);
+  }
+  function T(M) {
+    t && (t.api.scrollToNode(M), S(M));
+  }
+  function P() {
+    t && (l.value = !0, m(), requestAnimationFrame(() => m()));
+  }
+  function G() {
+    l.value = !1, a.value = "";
+  }
+  function K() {
+    if (l.value) {
+      G();
+      return;
+    }
+    P();
+  }
+  function O(M) {
+    const y = p();
+    return !!(y && M instanceof Node && y.contains(M));
+  }
+  function W() {
+    l.value && m();
+  }
+  const z = fe({
+    name: "FlowCanvasSearchHost",
+    setup() {
+      return () => Re(Vo, {
+        open: l.value,
+        position: h.value,
+        query: a.value,
+        results: g.value,
+        placeholder: s?.placeholder ?? "搜索节点名称",
+        emptyText: s?.emptyText ?? "暂无匹配节点",
+        isAnchorTarget: O,
+        "onUpdate:query": (M) => {
+          a.value = M;
+        },
+        onSelect: T,
+        onClose: G
+      });
+    }
+  });
+  return {
+    name: "search",
+    priority: 90,
+    install(M) {
+      e = M;
+    },
+    attachRuntime(M) {
+      t = M, o = M.graph.container.closest(".flow-canvas-layout__content") ?? M.graph.container.parentElement, n = document.createElement("div"), n.className = "flow-canvas-search-host", document.body.append(n), i = ut(z), i.mount(n), window.addEventListener("resize", W), window.addEventListener("scroll", W, !0);
+    },
+    detachRuntime() {
+      G(), k(), window.removeEventListener("resize", W), window.removeEventListener("scroll", W, !0), i?.unmount(), i = null, n?.remove(), n = null, o = null, t = null;
+    },
+    dispose() {
+      G(), k(), e = null;
+    },
+    provideToolbarItems() {
+      return [
+        {
+          id: "plugin:search",
+          type: "search",
+          icon: "flow-canvas-icon canvas-search",
+          description: "搜索节点",
+          group: "tools",
+          order: 22,
+          active: () => l.value,
+          onClick: K
+        }
+      ];
+    }
+  };
+}
+const on = 52, nn = 16, sn = 40;
+function rn(s) {
+  const e = document.createElement("div");
+  e.className = "flow-canvas-minimap", s.floating !== !1 && e.classList.add("flow-canvas-minimap--floating");
+  const t = document.createElement("div");
+  t.className = "flow-canvas-minimap__host", e.append(t), Object.assign(e.style, {
+    width: `${s.width}px`,
+    height: `${s.height}px`
+  }), s.floating !== !1 && Object.assign(e.style, {
+    top: `${on}px`,
+    left: `${nn}px`
+  });
+  let o = null, n = s.defaultOpen ?? !1, i = null;
+  function r() {
+    !s.onClickOutside || i || (i = (p) => {
+      const x = p.target;
+      x && e.contains(x) || p.target?.closest('[data-toolbar-type="minimap"]') || s.onClickOutside();
+    }, document.addEventListener("mousedown", i));
+  }
+  function l() {
+    i && (document.removeEventListener("mousedown", i), i = null);
+  }
+  function a() {
+    o || (o = new ht({
+      container: t,
+      width: s.width,
+      height: s.height,
+      padding: s.contentPadding ?? sn,
+      scalable: !1
+    }), s.sourceGraph.use(o));
+  }
+  function h(p) {
+    n = p, e.style.display = n ? "" : "none", n ? (a(), r()) : l();
+  }
+  function u() {
+    h(n), s.mountTarget.appendChild(e);
+  }
+  function g() {
+    l(), o?.dispose(), o = null, e.remove();
+  }
+  return u(), {
+    element: e,
+    isOpen: () => n,
+    setOpen: h,
+    toggle() {
+      const p = !n;
+      return h(p), p;
+    },
+    destroy: g
+  };
+}
+function En(s) {
   let e = null;
+  const t = q(!1);
+  function o(i) {
+    e?.setOpen(i), t.value = i;
+  }
+  function n() {
+    e && (t.value = e.toggle());
+  }
   return {
     name: "minimap",
     priority: 90,
-    async attachRuntime(t) {
-      if (!s?.container) return;
-      e = s.container;
-      const { MiniMap: o } = await import("@antv/x6-plugin-minimap");
-      t.graph.use(
-        new o({
-          container: s.container,
-          width: s.width ?? 200,
-          height: s.height ?? 160
-        })
-      );
+    attachRuntime(i) {
+      const r = s?.width ?? 334, l = s?.height ?? 180, a = s?.container ?? i.graph.container.closest(".flow-canvas-layout__content") ?? i.graph.container.parentElement;
+      a && (e = rn({
+        sourceGraph: i.graph,
+        mountTarget: a,
+        width: r,
+        height: l,
+        floating: !s?.container,
+        defaultOpen: !1,
+        onClickOutside: () => o(!1)
+      }), o(!1));
     },
     detachRuntime() {
-      e = null;
+      e?.destroy(), e = null, t.value = !1;
     },
     provideToolbarItems() {
       return [
         {
-          id: "minimap",
+          id: "plugin:minimap",
           type: "minimap",
-          tooltip: "小地图",
-          order: 100,
-          visible: !!s?.container,
-          onClick() {
-            if (!e) return;
-            const t = e.style.display === "none";
-            e.style.display = t ? "" : "none";
-          }
+          icon: "flow-canvas-icon canvas-map",
+          description: "缩略图",
+          group: "tools",
+          order: 23,
+          active: () => t.value,
+          onClick: n
         }
       ];
     }
   };
 }
-function Lo() {
+function In() {
   let s = null, e = 0;
   return {
     name: "clipboard",
@@ -2847,29 +3640,29 @@ function Lo() {
     onKeyboardShortcut(t, o) {
       const n = t.metaKey || t.ctrlKey;
       if (n && t.key === "c") {
-        const r = o.graph.getSelectedCells?.() ?? [];
-        if (!r.length) return !1;
-        const i = o.flowModel.value, l = new Set(r.filter((d) => d.isNode()).map((d) => d.id)), a = [...l].map((d) => i.nodes[d]).filter(Boolean);
+        const i = o.graph.getSelectedCells?.() ?? [];
+        if (!i.length) return !1;
+        const r = o.flowModel.value, l = new Set(i.filter((u) => u.isNode()).map((u) => u.id)), a = [...l].map((u) => r.nodes[u]).filter(Boolean);
         if (!a.length) return !1;
-        const g = Object.values(i.edges).filter(
-          (d) => l.has(d.source.nodeId) && l.has(d.target.nodeId)
+        const h = Object.values(r.edges).filter(
+          (u) => l.has(u.source.nodeId) && l.has(u.target.nodeId)
         );
-        return s = { nodes: a, edges: g }, e = 0, !0;
+        return s = { nodes: a, edges: h }, e = 0, !0;
       }
       if (n && t.key === "v") {
         if (!s?.nodes.length) return !1;
         e++;
-        const r = e * 30, i = /* @__PURE__ */ new Map(), l = [];
+        const i = e * 30, r = /* @__PURE__ */ new Map(), l = [];
         for (const a of s.nodes) {
-          const g = `${a.id}_cp${W().slice(0, 6)}`;
-          i.set(a.id, g), l.push({
+          const h = `${a.id}_cp${te().slice(0, 6)}`;
+          r.set(a.id, h), l.push({
             type: "node.add",
             node: {
               ...a,
-              id: g,
+              id: h,
               position: {
-                x: a.position.x + r,
-                y: a.position.y + r
+                x: a.position.x + i,
+                y: a.position.y + i
               },
               payload: a.payload ? { ...a.payload } : {},
               extensions: a.extensions ? { ...a.extensions } : void 0
@@ -2877,21 +3670,21 @@ function Lo() {
           });
         }
         for (const a of s.edges) {
-          const g = i.get(a.source.nodeId), d = i.get(a.target.nodeId);
-          !g || !d || l.push({
+          const h = r.get(a.source.nodeId), u = r.get(a.target.nodeId);
+          !h || !u || l.push({
             type: "edge.add",
             edge: {
               ...a,
-              id: `${a.id}_cp${W().slice(0, 6)}`,
-              source: { ...a.source, nodeId: g },
-              target: { ...a.target, nodeId: d },
-              labels: a.labels?.map((v) => ({ ...v, id: `${v.id}_cp${W().slice(0, 6)}` })),
+              id: `${a.id}_cp${te().slice(0, 6)}`,
+              source: { ...a.source, nodeId: h },
+              target: { ...a.target, nodeId: u },
+              labels: a.labels?.map((g) => ({ ...g, id: `${g.id}_cp${te().slice(0, 6)}` })),
               payload: a.payload ? { ...a.payload } : {}
             }
           });
         }
         return l.length && o.executeCommand({
-          id: W(),
+          id: te(),
           source: "user:keyboard",
           label: "粘贴",
           timestamp: Date.now(),
@@ -2903,26 +3696,27 @@ function Lo() {
   };
 }
 export {
-  ne as CanvasConstraintError,
-  Do as CanvasLayout,
-  eo as CanvasNodePalette,
-  So as CanvasRuntime,
-  pt as CanvasSchemaError,
-  Po as CanvasToolbar,
-  wo as DefaultNode,
-  Ft as NodeActionsToolbar,
-  Wt as NodeQuickAddPopover,
-  Ge as applyCanvasCommand,
-  Lo as clipboardPlugin,
-  Ao as connectionValidatorPlugin,
-  ko as createBuiltinEdgeTypes,
-  Nt as createCanvasHistory,
-  _o as createDefaultSchema,
-  ao as createDefaultToolbarItems,
-  Mo as createEmptyFlowModel,
-  W as generateId,
-  $o as minimapPlugin,
-  To as selectionPlugin,
-  Ro as snaplinePlugin,
-  No as useCanvasEditor
+  ue as CanvasConstraintError,
+  hn as CanvasLayout,
+  mo as CanvasNodePalette,
+  pn as CanvasRuntime,
+  vt as CanvasSchemaError,
+  vn as CanvasToolbar,
+  $o as DefaultNode,
+  no as NodeActionsToolbar,
+  ao as NodeQuickAddPopover,
+  $e as applyCanvasCommand,
+  In as clipboardPlugin,
+  mn as connectionValidatorPlugin,
+  Ho as createBuiltinEdgeTypes,
+  Dt as createCanvasHistory,
+  yn as createDefaultSchema,
+  ko as createDefaultToolbarItems,
+  fn as createEmptyFlowModel,
+  te as generateId,
+  En as minimapPlugin,
+  xn as searchPlugin,
+  wn as selectionPlugin,
+  bn as snaplinePlugin,
+  gn as useCanvasEditor
 };