@blueking/flow-canvas 0.0.1-beta.4 → 0.0.2

package/dist/index.esm.js

@@ -1,24 +1,24 @@
-import { ref as z, computed as j, onScopeDispose as Le, defineComponent as re, onBeforeUnmount as Se, createElementBlock as S, openBlock as k, normalizeStyle as me, createElementVNode as A, createVNode as Be, createCommentVNode as H, normalizeClass as W, Transition as ze, withCtx as Ne, withModifiers as He, createTextVNode as De, renderSlot as fe, onMounted as Fe, watch as le, createBlock as ve, Fragment as ie, renderList as ye, toDisplayString as de, unref as Ue, resolveDynamicComponent as qe, inject as Ge } from "vue";
-import { Graph as Ve } from "@antv/x6";
-import { register as We } from "@antv/x6-vue-shape";
-function io() {
+import { ref as L, computed as H, onScopeDispose as Ue, defineComponent as ce, onBeforeUnmount as Re, createElementBlock as N, openBlock as I, normalizeStyle as Ie, createElementVNode as R, createVNode as Ve, createCommentVNode as F, normalizeClass as Q, Transition as We, withCtx as $e, withModifiers as Ze, createTextVNode as Oe, renderSlot as me, onMounted as Je, watch as ge, createBlock as Ce, Fragment as de, renderList as Ee, toDisplayString as he, unref as et, resolveDynamicComponent as tt, inject as ot } from "vue";
+import { Graph as nt } from "@antv/x6";
+import { register as st } from "@antv/x6-vue-shape";
+function mo() {
   return {
     version: "1.0",
     nodes: {},
     edges: {}
   };
 }
-class K extends Error {
+class Y extends Error {
   constructor(e) {
     super(e), this.name = "CanvasConstraintError";
   }
 }
-class Qe extends Error {
+class it extends Error {
   constructor(e) {
     super(e), this.name = "CanvasSchemaError";
   }
 }
-function be(s, e, t) {
+function Me(s, e, t) {
   if (e.length === 0) {
     if (t === void 0) return;
     if (typeof t != "object" || t === null || Array.isArray(t))
@@ -34,189 +34,189 @@ function be(s, e, t) {
   const i = e[e.length - 1];
   return t === void 0 ? delete n[i] : n[i] = t, o;
 }
-function Me(s, e) {
+function Te(s, e) {
   switch (e.type) {
     case "node.add":
-      return Xe(s, e.node);
+      return rt(s, e.node);
     case "node.move":
-      return Ke(s, e.nodeId, e.position);
+      return at(s, e.nodeId, e.position);
     case "node.remove":
-      return Ye(s, e.nodeId);
+      return lt(s, e.nodeId);
     case "node.update":
-      return Ze(s, e.nodeId, e.patch);
+      return dt(s, e.nodeId, e.patch);
     case "node.set-payload":
-      return Je(s, e.nodeId, e.path, e.value);
+      return ct(s, e.nodeId, e.path, e.value);
     case "node.set-extensions":
-      return et(s, e.nodeId, e.path, e.value);
+      return ut(s, e.nodeId, e.path, e.value);
     case "edge.add":
-      return tt(s, e.edge);
+      return ft(s, e.edge);
     case "edge.remove":
-      return ot(s, e.edgeId);
+      return pt(s, e.edgeId);
     case "edge.reconnect":
-      return nt(s, e.edgeId, e.source, e.target);
+      return gt(s, e.edgeId, e.source, e.target);
     case "edge.update":
-      return st(s, e.edgeId, e.patch);
+      return ht(s, e.edgeId, e.patch);
     case "edge.set-payload":
-      return it(s, e.edgeId, e.path, e.value);
+      return vt(s, e.edgeId, e.path, e.value);
     case "edge.label.update":
-      return rt(s, e.edgeId, e.labelId, e.patch);
+      return yt(s, e.edgeId, e.labelId, e.patch);
     case "model.set-meta":
-      return at(s, e.path, e.value);
+      return mt(s, e.path, e.value);
     default:
-      throw new K(`Unknown command type: ${e.type}`);
+      throw new Y(`Unknown command type: ${e.type}`);
   }
 }
-function pe(s, e) {
+function be(s, e) {
   const t = s.nodes[e];
-  if (!t) throw new K(`Node "${e}" does not exist`);
+  if (!t) throw new Y(`Node "${e}" does not exist`);
   return t;
 }
-function ge(s, e) {
+function we(s, e) {
   const t = s.edges[e];
-  if (!t) throw new K(`Edge "${e}" does not exist`);
+  if (!t) throw new Y(`Edge "${e}" does not exist`);
   return t;
 }
-function ce(s, e, t) {
+function ve(s, e, t) {
   const o = s.nodes[e.nodeId];
   if (!o)
-    throw new K(`${t} node "${e.nodeId}" does not exist`);
+    throw new Y(`${t} node "${e.nodeId}" does not exist`);
   if (e.portId && o.ports && !o.ports.some((i) => i.id === e.portId))
-    throw new K(`${t} port "${e.portId}" not found on node "${e.nodeId}"`);
+    throw new Y(`${t} port "${e.portId}" not found on node "${e.nodeId}"`);
 }
-function we(s, e, t) {
+function Ne(s, e, t) {
   return { ...s, nodes: { ...s.nodes, [e]: t } };
 }
-function xe(s, e, t) {
+function Se(s, e, t) {
   return { ...s, edges: { ...s.edges, [e]: t } };
 }
-function Xe(s, e) {
+function rt(s, e) {
   if (s.nodes[e.id])
-    throw new K(`Node id "${e.id}" already exists`);
+    throw new Y(`Node id "${e.id}" already exists`);
   return { ...s, nodes: { ...s.nodes, [e.id]: e } };
 }
-function Ke(s, e, t) {
-  const o = pe(s, e);
-  return we(s, e, { ...o, position: t });
+function at(s, e, t) {
+  const o = be(s, e);
+  return Ne(s, e, { ...o, position: t });
 }
-function Ye(s, e) {
-  pe(s, e);
+function lt(s, e) {
+  be(s, e);
   const { [e]: t, ...o } = s.nodes, n = {};
   for (const [i, r] of Object.entries(s.edges))
     r.source.nodeId !== e && r.target.nodeId !== e && (n[i] = r);
   return { ...s, nodes: o, edges: n };
 }
-function Ze(s, e, t) {
-  const o = pe(s, e);
-  return we(s, e, { ...o, ...t, id: o.id });
+function dt(s, e, t) {
+  const o = be(s, e);
+  return Ne(s, e, { ...o, ...t, id: o.id });
 }
-function Je(s, e, t, o) {
-  const n = pe(s, e), i = be(n.payload, t, o);
-  return we(s, e, { ...n, payload: i });
+function ct(s, e, t, o) {
+  const n = be(s, e), i = Me(n.payload, t, o);
+  return Ne(s, e, { ...n, payload: i });
 }
-function et(s, e, t, o) {
-  const n = pe(s, e), i = be(n.extensions, t, o);
-  return we(s, e, { ...n, extensions: i });
+function ut(s, e, t, o) {
+  const n = be(s, e), i = Me(n.extensions, t, o);
+  return Ne(s, e, { ...n, extensions: i });
 }
-function tt(s, e) {
+function ft(s, e) {
   if (s.edges[e.id])
-    throw new K(`Edge id "${e.id}" already exists`);
-  if (ce(s, e.source, "Source"), ce(s, e.target, "Target"), e.labels) {
+    throw new Y(`Edge id "${e.id}" already exists`);
+  if (ve(s, e.source, "Source"), ve(s, e.target, "Target"), e.labels) {
     const t = /* @__PURE__ */ new Set();
     for (const o of e.labels) {
       if (t.has(o.id))
-        throw new K(`Duplicate label id "${o.id}" in edge "${e.id}"`);
+        throw new Y(`Duplicate label id "${o.id}" in edge "${e.id}"`);
       t.add(o.id);
     }
   }
   return { ...s, edges: { ...s.edges, [e.id]: e } };
 }
-function ot(s, e) {
-  ge(s, e);
+function pt(s, e) {
+  we(s, e);
   const { [e]: t, ...o } = s.edges;
   return { ...s, edges: o };
 }
-function nt(s, e, t, o) {
-  const n = ge(s, e), i = t ?? n.source, r = o ?? n.target;
-  return ce(s, i, "Source"), ce(s, r, "Target"), xe(s, e, { ...n, source: i, target: r });
+function gt(s, e, t, o) {
+  const n = we(s, e), i = t ?? n.source, r = o ?? n.target;
+  return ve(s, i, "Source"), ve(s, r, "Target"), Se(s, e, { ...n, source: i, target: r });
 }
-function st(s, e, t) {
-  const o = ge(s, e), n = { ...o, ...t, id: o.id };
-  return t.source && ce(s, n.source, "Source"), t.target && ce(s, n.target, "Target"), xe(s, e, n);
+function ht(s, e, t) {
+  const o = we(s, e), n = { ...o, ...t, id: o.id };
+  return t.source && ve(s, n.source, "Source"), t.target && ve(s, n.target, "Target"), Se(s, e, n);
 }
-function it(s, e, t, o) {
-  const n = ge(s, e), i = be(n.payload, t, o);
-  return xe(s, e, { ...n, payload: i });
+function vt(s, e, t, o) {
+  const n = we(s, e), i = Me(n.payload, t, o);
+  return Se(s, e, { ...n, payload: i });
 }
-function rt(s, e, t, o) {
-  const n = ge(s, e);
+function yt(s, e, t, o) {
+  const n = we(s, e);
   if (!n.labels)
-    throw new K(`Edge "${e}" has no labels`);
+    throw new Y(`Edge "${e}" has no labels`);
   const i = n.labels.findIndex((l) => l.id === t);
   if (i === -1)
-    throw new K(`Label "${t}" not found in edge "${e}"`);
+    throw new Y(`Label "${t}" not found in edge "${e}"`);
   const r = [...n.labels];
-  return r[i] = { ...r[i], ...o, id: t }, xe(s, e, { ...n, labels: r });
+  return r[i] = { ...r[i], ...o, id: t }, Se(s, e, { ...n, labels: r });
 }
-function at(s, e, t) {
-  const o = be(s.meta, e, t);
+function mt(s, e, t) {
+  const o = Me(s.meta, e, t);
   return { ...s, meta: o };
 }
-function lt(s, e) {
-  const t = e?.maxHistorySize ?? 100, o = z(s), n = [], i = [], r = z(!1), l = z(!1);
+function bt(s, e) {
+  const t = e?.maxHistorySize ?? 100, o = L(s), n = [], i = [], r = L(!1), l = L(!1);
   function a() {
     r.value = n.length > 0, l.value = i.length > 0;
   }
-  function c(b) {
-    const y = o.value;
-    let m = y;
-    for (const R of b.commands)
-      m = Me(m, R);
-    return n.push({ snapshot: y, envelope: b }), n.length > t && n.shift(), i.length = 0, o.value = m, a(), m;
+  function f(k) {
+    const w = o.value;
+    let x = w;
+    for (const A of k.commands)
+      x = Te(x, A);
+    return n.push({ snapshot: w, envelope: k }), n.length > t && n.shift(), i.length = 0, o.value = x, a(), x;
   }
   function d() {
-    const b = n.pop();
-    return b ? (i.push({ snapshot: o.value, envelope: b.envelope }), o.value = b.snapshot, a(), b.snapshot) : null;
-  }
-  function g() {
-    const b = i.pop();
-    if (!b) return null;
-    n.push({ snapshot: o.value, envelope: b.envelope });
-    let y = o.value;
-    for (const m of b.envelope.commands)
-      y = Me(y, m);
-    return o.value = y, a(), y;
-  }
-  function p() {
+    const k = n.pop();
+    return k ? (i.push({ snapshot: o.value, envelope: k.envelope }), o.value = k.snapshot, a(), k.snapshot) : null;
+  }
+  function b() {
+    const k = i.pop();
+    if (!k) return null;
+    n.push({ snapshot: o.value, envelope: k.envelope });
+    let w = o.value;
+    for (const x of k.envelope.commands)
+      w = Te(w, x);
+    return o.value = w, a(), w;
+  }
+  function m() {
     n.length = 0, i.length = 0, a();
   }
-  function u() {
+  function g() {
     return o.value;
   }
-  function N(b) {
-    o.value = b, p();
+  function S(k) {
+    o.value = k, m();
   }
   return {
     currentFlowModel: o,
-    execute: c,
+    execute: f,
     undo: d,
-    redo: g,
+    redo: b,
     canUndo: r,
     canRedo: l,
     get undoStack() {
-      return n.map((b) => b.envelope);
+      return n.map((k) => k.envelope);
     },
     get redoStack() {
-      return i.map((b) => b.envelope);
+      return i.map((k) => k.envelope);
     },
-    clear: p,
-    createSnapshot: u,
-    replaceFlowModel: N
+    clear: m,
+    createSnapshot: g,
+    replaceFlowModel: S
   };
 }
-function dt(s) {
+function wt(s) {
   return s !== null && typeof s == "object" && s.rejected === !0;
 }
-class ct {
+class xt {
   plugins = [];
   editorContext = null;
   runtimeCtx = null;
@@ -281,7 +281,7 @@ class ct {
             source: o.name
           }
         };
-      if (dt(i))
+      if (wt(i))
         return {
           rejected: !0,
           error: {
@@ -374,42 +374,42 @@ class ct {
         const n = o ?? e.commands;
         let i = t.flowModel.value;
         for (const r of n)
-          i = Me(i, r);
+          i = Te(i, r);
         return i;
       }
     };
   }
 }
-function ro(s) {
-  const { schema: e, plugins: t = [], historyOptions: o } = s, n = { version: "1.0", ...s.initialFlowModel }, i = lt(n, o), r = z(s.mode ?? "edit"), l = z(!1), a = z(null), c = z([]), d = {}, g = new ct();
-  function p(y, m, R, h = "user:toolbar") {
-    const v = {
+function bo(s) {
+  const { schema: e, plugins: t = [], historyOptions: o } = s, n = { version: "1.0", ...s.initialFlowModel }, i = bt(n, o), r = L(s.mode ?? "edit"), l = L(!1), a = L(null), f = L([]), d = {}, b = new xt();
+  function m(w, x, A, U = "user:toolbar") {
+    const O = {
       id: `history-${Date.now()}`,
-      source: h,
-      label: y,
+      source: U,
+      label: w,
       timestamp: Date.now(),
       commands: []
     };
-    g.afterCommand(v, m, R), c.value = g.collectToolbarItems(), s.onCommandResult?.({
+    b.afterCommand(O, x, A), f.value = b.collectToolbarItems(), s.onCommandResult?.({
       status: "applied",
-      envelope: v,
-      flowModel: R
+      envelope: O,
+      flowModel: A
     }), s.onFlowModelChange?.({
-      flowModel: R,
-      prevFlowModel: m,
-      envelope: v,
-      source: h
+      flowModel: A,
+      prevFlowModel: x,
+      envelope: O,
+      source: U
     });
   }
-  const u = {
+  const g = {
     execute: i.execute,
     undo() {
-      const y = i.currentFlowModel.value, m = i.undo();
-      return m && p("撤销", y, m), m;
+      const w = i.currentFlowModel.value, x = i.undo();
+      return x && m("撤销", w, x), x;
     },
     redo() {
-      const y = i.currentFlowModel.value, m = i.redo();
-      return m && p("重做", y, m), m;
+      const w = i.currentFlowModel.value, x = i.redo();
+      return x && m("重做", w, x), x;
     },
     get canUndo() {
       return i.canUndo;
@@ -425,82 +425,89 @@ function ro(s) {
     },
     clear: i.clear,
     createSnapshot: i.createSnapshot,
-    replaceFlowModel(y) {
-      const m = i.currentFlowModel.value;
-      i.replaceFlowModel(y), p("替换 FlowModel", m, y, "system:replace");
+    replaceFlowModel(w) {
+      const x = i.currentFlowModel.value;
+      i.replaceFlowModel(w), m("替换 FlowModel", x, w, "system:replace");
     }
-  }, N = {
-    flowModel: j(() => i.currentFlowModel.value),
-    history: u,
+  }, S = {
+    flowModel: H(() => i.currentFlowModel.value),
+    history: g,
     schema: e,
     mode: r,
-    executeCommand: b,
-    replaceFlowModel(y) {
-      u.replaceFlowModel(y);
+    executeCommand: k,
+    replaceFlowModel(w) {
+      g.replaceFlowModel(w);
     },
-    setMode(y) {
-      r.value = y;
+    setMode(w) {
+      r.value = w;
     },
     selectionMode: l,
-    setSelectionMode(y) {
-      l.value = y;
+    setSelectionMode(w) {
+      l.value = w;
     },
     api: a,
-    toolbarItems: c,
+    toolbarItems: f,
     extendedApi: d,
-    _pluginManager: g
+    _pluginManager: b
   };
-  g.install(t, {
-    flowModel: N.flowModel,
-    history: u,
+  b.install(t, {
+    flowModel: S.flowModel,
+    history: g,
     schema: e,
     mode: r,
-    executeCommand: b
-  }), c.value = g.collectToolbarItems(), Le(() => {
-    g.dispose();
+    executeCommand: k
+  }), f.value = b.collectToolbarItems(), Ue(() => {
+    b.dispose();
   });
-  function b(y) {
-    const m = g.transformCommand(y);
-    if ("rejected" in m) {
-      const v = {
+  function k(w) {
+    const x = b.transformCommand(w);
+    if ("rejected" in x) {
+      const O = {
         status: "rejected",
-        envelope: y,
-        error: m.error
+        envelope: w,
+        error: x.error
       };
-      return s.onCommandResult?.(v), v;
+      return s.onCommandResult?.(O), O;
     }
-    const R = m.envelope, h = i.currentFlowModel.value;
+    const A = x.envelope, U = i.currentFlowModel.value;
     try {
-      const v = i.execute(R), I = {
+      const O = i.execute(A), K = {
         status: "applied",
-        envelope: R,
-        flowModel: v
+        envelope: A,
+        flowModel: O
       };
-      return g.afterCommand(R, h, v), c.value = g.collectToolbarItems(), s.onCommandResult?.(I), s.onFlowModelChange?.({
-        flowModel: v,
-        prevFlowModel: h,
-        envelope: R,
-        source: R.source
-      }), I;
-    } catch (v) {
-      if (v instanceof K) {
-        const I = {
+      return b.afterCommand(A, U, O), f.value = b.collectToolbarItems(), s.onCommandResult?.(K), s.onFlowModelChange?.({
+        flowModel: O,
+        prevFlowModel: U,
+        envelope: A,
+        source: A.source
+      }), K;
+    } catch (O) {
+      if (O instanceof Y) {
+        const K = {
           status: "invalid",
-          envelope: R,
+          envelope: A,
           error: {
             code: "constraint_violated",
-            reason: v.message,
+            reason: O.message,
             source: "engine"
           }
         };
-        return s.onCommandResult?.(I), I;
+        return s.onCommandResult?.(K), K;
       }
-      throw v;
+      throw O;
     }
   }
-  return N;
+  return S;
+}
+const kt = ["top", "right", "bottom", "left"];
+function Qe() {
+  return kt.map((s) => ({ id: s, group: s }));
+}
+function Be(s, e) {
+  return e?.(s) ?? s.ports ?? Qe();
 }
-class ut {
+class Ct {
   graph;
   schema;
   shapeRegistry;
@@ -586,10 +593,10 @@ class ut {
     for (const [o, n] of Object.entries(e.nodes)) {
       const i = this.schema.nodeTypes[n.type];
       if (!i)
-        throw new Qe(
+        throw new it(
           `Unknown node type "${n.type}" for node "${o}". Registered types: [${Object.keys(this.schema.nodeTypes).join(", ")}]. Register the type in CanvasSchema.nodeTypes before using it in a FlowModel.`
         );
-      const r = this.shapeRegistry.registerNodeType(n.type, i.component), l = i.getSize(n), a = i.getPorts?.(n) ?? n.ports ?? [];
+      const r = this.shapeRegistry.registerNodeType(n.type, i.component), l = i.getSize(n), a = Be(n, i.getPorts);
       t.set(o, { model: n, definition: i, shapeName: r, size: l, ports: a });
     }
     return t;
@@ -668,8 +675,8 @@ class ut {
       ...l.x6CellConfig
     };
     this.graph.addNode(a), this.knownNodeIds.add(e), this.saveNodeDefaultAttrs(e, l);
-    const c = this.graph.getCellById(e);
-    c && (this.applyNodeBehavior(c, o, l), this.applyNodeHighlightAndDecoration(c, o));
+    const f = this.graph.getCellById(e);
+    f && (this.applyNodeBehavior(f, o, l), this.applyNodeHighlightAndDecoration(f, o));
   }
   /**
    * 将 schema 定义的 getBehavior 映射到 X6 节点属性。
@@ -793,8 +800,8 @@ class ut {
   applyNodeHighlightAndDecoration(e, t) {
     const o = this.highlightedNodeIds.has(e.id), n = this.resolveNodeDecoration?.(t), i = this.prevNodeDecorationClasses.get(e.id);
     i && (this.graph.findViewByCell(e)?.container?.classList.remove(i), this.prevNodeDecorationClasses.delete(e.id)), n?.className && (this.graph.findViewByCell(e)?.container?.classList.add(n.className), this.prevNodeDecorationClasses.set(e.id, n.className));
-    const r = n?.borderColor, a = r ?? (o ? "#3a84ff" : void 0), c = this.prevNodeDecorationColors.has(e.id) || this.defaultHighlightedNodeIds.has(e.id);
-    a ? (e.setAttrByPath("body/stroke", a), e.setAttrByPath("body/strokeWidth", 2)) : c && (this.restoreNodeAttr(e, "body/stroke", "stroke"), this.restoreNodeAttr(e, "body/strokeWidth", "strokeWidth")), r ? this.prevNodeDecorationColors.add(e.id) : this.prevNodeDecorationColors.delete(e.id), o && !r ? this.defaultHighlightedNodeIds.add(e.id) : this.defaultHighlightedNodeIds.delete(e.id);
+    const r = n?.borderColor, a = r ?? (o ? "#3a84ff" : void 0), f = this.prevNodeDecorationColors.has(e.id) || this.defaultHighlightedNodeIds.has(e.id);
+    a ? (e.setAttrByPath("body/stroke", a), e.setAttrByPath("body/strokeWidth", 2)) : f && (this.restoreNodeAttr(e, "body/stroke", "stroke"), this.restoreNodeAttr(e, "body/strokeWidth", "strokeWidth")), r ? this.prevNodeDecorationColors.add(e.id) : this.prevNodeDecorationColors.delete(e.id), o && !r ? this.defaultHighlightedNodeIds.add(e.id) : this.defaultHighlightedNodeIds.delete(e.id);
   }
   setHoveredEdge(e) {
     this.hoveredEdgeId = e;
@@ -819,22 +826,22 @@ class ut {
   applyEdgeStyleAndDecoration(e, t, o) {
     const n = this.highlightedEdgeIds.has(e.id), i = this.resolveEdgeDecoration?.(t), r = this.prevEdgeDecorationClasses.get(e.id);
     r && (this.graph.findViewByCell(e)?.container?.classList.remove(r), this.prevEdgeDecorationClasses.delete(e.id)), i?.className && (this.graph.findViewByCell(e)?.container?.classList.add(i.className), this.prevEdgeDecorationClasses.set(e.id, i.className));
-    let l, a, c;
+    let l, a, f;
     if (o?.style) {
-      const N = this.graph.isSelected?.(e) ?? !1, b = this.hoveredEdgeId === e.id, y = o.style(t, { selected: N, highlighted: n, hovered: b });
-      l = y.stroke, a = y.strokeWidth, c = y.strokeDasharray;
+      const S = this.graph.isSelected?.(e) ?? !1, k = this.hoveredEdgeId === e.id, w = o.style(t, { selected: S, highlighted: n, hovered: k });
+      l = w.stroke, a = w.strokeWidth, f = w.strokeDasharray;
     }
-    const d = !o?.style && n ? "#3a84ff" : void 0, g = i?.strokeColor, p = g ?? l ?? d, u = !!o?.style || this.prevEdgeDecorationColors.has(e.id) || this.defaultHighlightedEdgeIds.has(e.id) || this.prevEdgeStyleIds.has(e.id);
-    p ? e.setAttrByPath("line/stroke", p) : u && this.restoreEdgeAttr(e, "line/stroke", "stroke"), o?.style ? (this.prevEdgeStyleIds.add(e.id), a ? e.setAttrByPath("line/strokeWidth", a) : this.restoreEdgeAttr(e, "line/strokeWidth", "strokeWidth"), c ? e.setAttrByPath("line/strokeDasharray", c) : this.restoreEdgeAttr(e, "line/strokeDasharray", "strokeDasharray")) : this.prevEdgeStyleIds.has(e.id) && (this.restoreEdgeAttr(e, "line/strokeWidth", "strokeWidth"), this.restoreEdgeAttr(e, "line/strokeDasharray", "strokeDasharray"), this.prevEdgeStyleIds.delete(e.id)), g ? this.prevEdgeDecorationColors.add(e.id) : this.prevEdgeDecorationColors.delete(e.id), d ? this.defaultHighlightedEdgeIds.add(e.id) : this.defaultHighlightedEdgeIds.delete(e.id);
+    const d = !o?.style && n ? "#3a84ff" : void 0, b = i?.strokeColor, m = b ?? l ?? d, g = !!o?.style || this.prevEdgeDecorationColors.has(e.id) || this.defaultHighlightedEdgeIds.has(e.id) || this.prevEdgeStyleIds.has(e.id);
+    m ? e.setAttrByPath("line/stroke", m) : g && 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"), f ? e.setAttrByPath("line/strokeDasharray", f) : 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)), b ? this.prevEdgeDecorationColors.add(e.id) : this.prevEdgeDecorationColors.delete(e.id), d ? this.defaultHighlightedEdgeIds.add(e.id) : this.defaultHighlightedEdgeIds.delete(e.id);
   }
 }
-let ft = 0;
-function T() {
+let Et = 0;
+function $() {
   const s = Date.now().toString(36), e = Math.random().toString(36).substring(2, 8);
-  return `${s}-${e}-${++ft}`;
+  return `${s}-${e}-${++Et}`;
 }
-class pt {
-  instanceId = T();
+class It {
+  instanceId = $();
   registeredShapes = /* @__PURE__ */ new Map();
   getShapeName(e) {
     let t = this.registeredShapes.get(e);
@@ -842,7 +849,7 @@ class pt {
   }
   registerNodeType(e, t) {
     const o = this.getShapeName(e);
-    return We({
+    return st({
       shape: o,
       component: t,
       width: 100,
@@ -853,7 +860,7 @@ class pt {
     this.registeredShapes.clear();
   }
 }
-class gt {
+class Mt {
   graph;
   onUiEvent;
   onCommand;
@@ -880,11 +887,11 @@ class gt {
     }), this.on("edge:click", ({ edge: e, e: t }) => {
       const n = t.target?.closest?.(".x6-edge-label");
       if (n) {
-        const r = e.getData?.()?.labels ?? [], l = n.parentElement?.querySelectorAll(".x6-edge-label"), a = l ? Array.from(l).indexOf(n) : 0, c = r[Math.max(0, a)];
+        const r = e.getData?.()?.labels ?? [], l = n.parentElement?.querySelectorAll(".x6-edge-label"), a = l ? Array.from(l).indexOf(n) : 0, f = r[Math.max(0, a)];
         this.onUiEvent({
           type: "edge.label.click",
           edgeId: e.id,
-          labelId: c?.id ?? `label-${a}`
+          labelId: f?.id ?? `label-${a}`
         });
         return;
       }
@@ -900,7 +907,7 @@ class gt {
     }), this.on("node:moved", ({ node: e }) => {
       const t = e.getPosition();
       this.onCommand({
-        id: T(),
+        id: $(),
         source: "user:drag",
         label: "移动节点",
         timestamp: Date.now(),
@@ -911,7 +918,7 @@ class gt {
       if (!o || !n) return;
       const i = e.getSourcePortId(), r = e.getTargetPortId(), l = e.id in this.flowModelRef.value.edges;
       t && !l ? this.onCommand({
-        id: T(),
+        id: $(),
         source: "user:drag",
         label: "连线",
         timestamp: Date.now(),
@@ -926,7 +933,7 @@ class gt {
           }
         ]
       }) : this.onCommand({
-        id: T(),
+        id: $(),
         source: "user:drag",
         label: "重连",
         timestamp: Date.now(),
@@ -946,16 +953,16 @@ class gt {
       for (let r = 0; r < Math.min(n.length, t.length); r++) {
         const l = t[r], a = n[r];
         if (!a?.id) continue;
-        const c = typeof l.position == "object" ? l.position?.distance : l.position;
-        c != null && i.push({
+        const f = typeof l.position == "object" ? l.position?.distance : l.position;
+        f != null && i.push({
           type: "edge.label.update",
           edgeId: e.id,
           labelId: a.id,
-          patch: { position: c }
+          patch: { position: f }
         });
       }
       i.length && this.onCommand({
-        id: T(),
+        id: $(),
         source: "user:drag",
         label: "拖动标签",
         timestamp: Date.now(),
@@ -967,7 +974,7 @@ class gt {
     this.graph.on(e, t), this.disposers.push(() => this.graph.off(e, t));
   }
 }
-function ht(s) {
+function Nt(s) {
   function e(t) {
     const o = s.getCellById(t);
     if (!o || !o.isNode()) return null;
@@ -978,8 +985,8 @@ function ht(s) {
     getNodeScreenRect: e
   };
 }
-const vt = 100;
-function yt({
+const St = 100;
+function Dt({
   graph: s,
   overlayManager: e,
   executeCommand: t,
@@ -990,63 +997,116 @@ function yt({
   onHighlightChange: l,
   resolveNodeShape: a
 }) {
-  let c = [], d = [], g = null, p = !1, u = null, N = !1;
-  async function b() {
-    if (p) return g;
-    p = !0;
+  let f = [], d = [], b = null, m = !1, g = null, S = !1;
+  async function k() {
+    if (m) return b;
+    m = !0;
     try {
-      const h = await import("@antv/x6-plugin-dnd"), v = h.Dnd ?? h.default;
-      return v ? (g = new v({
+      const p = await import("@antv/x6-plugin-dnd"), c = p.Dnd ?? p.default;
+      return c ? (b = new c({
         target: s,
         scaled: !0,
         animation: !0,
-        getDragNode: (I) => I.clone(),
-        getDropNode: (I) => I.clone()
-      }), g) : null;
+        getDragNode: (C) => C.clone(),
+        getDropNode: (C) => C.clone()
+      }), b) : null;
     } catch {
       return console.warn("[flow-canvas] @antv/x6-plugin-dnd not available, add it to your dependencies"), null;
     }
   }
-  async function y() {
-    if (!N) {
-      N = !0;
+  async function w() {
+    if (!S) {
+      S = !0;
       try {
-        const h = await import("@antv/x6-plugin-export"), v = h.Export ?? h.default;
-        v && s.use(new v());
+        const p = await import("@antv/x6-plugin-export"), c = p.Export ?? p.default;
+        c && s.use(new c());
       } catch {
         console.warn("[flow-canvas] @antv/x6-plugin-export not available, add it to your dependencies");
       }
     }
   }
-  const m = ({ node: h }) => {
-    const v = h.getData?.();
-    if (!v?._dndSessionId || v._dndSessionId !== u) return;
-    u = null;
-    const I = h.getPosition();
-    s.removeNode(h.id);
-    const { _dndSessionId: L, ...D } = v, C = D.id || T();
+  const x = ({ node: p }) => {
+    const c = p.getData?.();
+    if (!c?._dndSessionId || c._dndSessionId !== g) return;
+    g = null;
+    const C = p.getPosition();
+    s.removeNode(p.id);
+    const { _dndSessionId: z, ..._ } = c, j = _.id || $();
     t({
-      id: T(),
+      id: $(),
       source: "user:drag",
       label: "拖入节点",
       timestamp: Date.now(),
       commands: [
         {
           type: "node.add",
-          node: { ...D, id: C, position: { x: I.x, y: I.y } }
+          node: { ..._, id: j, position: { x: C.x, y: C.y } }
         }
       ]
     });
   };
-  return s.on("node:added", m), {
+  s.on("node:added", x);
+  function A(p) {
+    const c = o.nodeTypes[p.type];
+    return Be(p, c?.getPorts);
+  }
+  function U(p, c, C, z, _) {
+    switch (p) {
+      case "left":
+        return {
+          x: c.position.x - _ - z.width,
+          y: c.position.y + (C.height - z.height) / 2
+        };
+      case "top":
+        return {
+          x: c.position.x + (C.width - z.width) / 2,
+          y: c.position.y - _ - z.height
+        };
+      case "bottom":
+        return {
+          x: c.position.x + (C.width - z.width) / 2,
+          y: c.position.y + C.height + _
+        };
+      default:
+        return {
+          x: c.position.x + C.width + _,
+          y: c.position.y + (C.height - z.height) / 2
+        };
+    }
+  }
+  function O(p, c, C) {
+    switch (p) {
+      case "left":
+        return { x: -(c.width + C), y: 0 };
+      case "top":
+        return { x: 0, y: -(c.height + C) };
+      case "bottom":
+        return { x: 0, y: c.height + C };
+      default:
+        return { x: c.width + C, y: 0 };
+    }
+  }
+  function K(p) {
+    switch (p) {
+      case "left":
+        return "right";
+      case "top":
+        return "bottom";
+      case "bottom":
+        return "top";
+      default:
+        return "left";
+    }
+  }
+  return {
     zoomIn() {
       s.zoom(0.1);
     },
     zoomOut() {
       s.zoom(-0.1);
     },
-    zoomTo(h) {
-      s.zoomTo(h);
+    zoomTo(p) {
+      s.zoomTo(p);
     },
     zoomToFit() {
       s.zoomToFit({ padding: 40, maxScale: 1.5 });
@@ -1060,179 +1120,176 @@ function yt({
     scrollToOrigin() {
       s.translate(0, 0);
     },
-    scrollToNode(h) {
-      const v = s.getCellById(h);
-      v && s.centerCell(v);
+    scrollToNode(p) {
+      const c = s.getCellById(p);
+      c && s.centerCell(c);
     },
     getSelection() {
-      const h = s.getSelectedCells?.() ?? [];
+      const p = s.getSelectedCells?.() ?? [];
       return {
-        nodeIds: h.filter((v) => v.isNode()).map((v) => v.id),
-        edgeIds: h.filter((v) => v.isEdge()).map((v) => v.id)
+        nodeIds: p.filter((c) => c.isNode()).map((c) => c.id),
+        edgeIds: p.filter((c) => c.isEdge()).map((c) => c.id)
       };
     },
-    selectNodes(h) {
-      const v = h.map((I) => s.getCellById(I)).filter(Boolean);
-      s.select?.(v);
+    selectNodes(p) {
+      const c = p.map((C) => s.getCellById(C)).filter(Boolean);
+      s.select?.(c);
     },
-    selectEdges(h) {
-      const v = h.map((I) => s.getCellById(I)).filter(Boolean);
-      s.select?.(v);
+    selectEdges(p) {
+      const c = p.map((C) => s.getCellById(C)).filter(Boolean);
+      s.select?.(c);
     },
     clearSelection() {
-      const h = s.getSelectedCells?.();
-      h?.length && s.unselect?.(h);
+      const p = s.getSelectedCells?.();
+      p?.length && s.unselect?.(p);
     },
-    registerDndSource(h, v) {
-      const I = async (L) => {
-        const D = await b();
-        if (!D) return;
-        const C = T();
-        u = C;
-        const F = v(), Y = a?.(F.type), q = s.createNode({
-          width: Y?.width ?? 154,
-          height: Y?.height ?? 54,
-          shape: Y?.shapeName ?? "rect",
-          data: { ...F, _dndSessionId: C }
+    registerDndSource(p, c) {
+      const C = async (z) => {
+        const _ = await k();
+        if (!_) return;
+        const j = $();
+        g = j;
+        const G = c(), q = a?.(G.type), X = s.createNode({
+          width: q?.width ?? 154,
+          height: q?.height ?? 54,
+          shape: q?.shapeName ?? "rect",
+          data: { ...G, _dndSessionId: j }
         });
-        D.start(q, L);
+        _.start(X, z);
       };
-      return h.addEventListener("mousedown", I), () => {
-        h.removeEventListener("mousedown", I);
+      return p.addEventListener("mousedown", C), () => {
+        p.removeEventListener("mousedown", C);
       };
     },
     /**
      * 通过编程方式发起连线：直接命中真实 port 元素，
      * 复用 X6 原生的连线拖拽流程与 connecting.createEdge 配置。
      */
-    startConnection(h, v) {
-      const I = s.getCellById(h);
-      if (!I?.isNode()) return;
-      const L = I, D = s.findViewByCell(L);
-      if (!D) return;
-      const C = D.findPortElem(v, "circle") ?? D.findPortElem(v);
-      if (!C) return;
-      const Y = (C.matches?.("[magnet]") ? C : C.querySelector?.("[magnet]")) ?? C, q = Y.getBoundingClientRect(), Q = q.left + q.width / 2, X = q.top + q.height / 2, G = new MouseEvent("mousedown", {
-        clientX: Q,
-        clientY: X,
+    startConnection(p, c) {
+      const C = s.getCellById(p);
+      if (!C?.isNode()) return;
+      const z = C, _ = s.findViewByCell(z);
+      if (!_) return;
+      const j = _.findPortElem(c, "circle") ?? _.findPortElem(c);
+      if (!j) return;
+      const q = (j.matches?.("[magnet]") ? j : j.querySelector?.("[magnet]")) ?? j, X = q.getBoundingClientRect(), ye = X.left + X.width / 2, se = X.top + X.height / 2, ae = new MouseEvent("mousedown", {
+        clientX: ye,
+        clientY: se,
         button: 0,
         buttons: 1,
         bubbles: !0,
         cancelable: !0
       });
-      Y.dispatchEvent(G);
+      q.dispatchEvent(ae);
     },
-    async exportAsImage(h) {
-      await y();
-      const v = s;
-      return typeof v.toPNG != "function" ? (console.warn("[flow-canvas] exportAsImage requires @antv/x6-plugin-export, add it to your dependencies"), new Blob()) : new Promise((I) => {
-        v.toPNG(
-          (L) => {
-            fetch(L).then((D) => D.blob()).then(I).catch(() => I(new Blob()));
+    async exportAsImage(p) {
+      await w();
+      const c = s;
+      return typeof c.toPNG != "function" ? (console.warn("[flow-canvas] exportAsImage requires @antv/x6-plugin-export, add it to your dependencies"), new Blob()) : new Promise((C) => {
+        c.toPNG(
+          (z) => {
+            fetch(z).then((_) => _.blob()).then(C).catch(() => C(new Blob()));
           },
           {
-            backgroundColor: h?.backgroundColor ?? "#ffffff",
-            padding: h?.padding ?? 20,
-            quality: h?.quality,
+            backgroundColor: p?.backgroundColor ?? "#ffffff",
+            padding: p?.padding ?? 20,
+            quality: p?.quality,
             copyStyles: !0
           }
         );
       });
     },
     async exportAsSVG() {
-      await y();
-      const h = s;
-      return typeof h.toSVG != "function" ? (console.warn("[flow-canvas] exportAsSVG requires @antv/x6-plugin-export, add it to your dependencies"), "") : new Promise((v) => {
-        h.toSVG((I) => v(I));
+      await w();
+      const p = s;
+      return typeof p.toSVG != "function" ? (console.warn("[flow-canvas] exportAsSVG requires @antv/x6-plugin-export, add it to your dependencies"), "") : new Promise((c) => {
+        p.toSVG((C) => c(C));
       });
     },
-    highlightNodes(h) {
-      c = h, l?.(c, d);
+    highlightNodes(p) {
+      f = p, l?.(f, d);
     },
-    highlightEdges(h) {
-      d = h, l?.(c, d);
+    highlightEdges(p) {
+      d = p, l?.(f, d);
     },
     clearHighlight() {
-      c = [], d = [], l?.([], []);
+      f = [], d = [], l?.([], []);
     },
     overlay: e,
-    getContextMenuItems(h) {
-      return r?.(h) ?? [];
+    getContextMenuItems(p) {
+      return r?.(p) ?? [];
     },
-    insertNodeToRight(h, v, I) {
-      const L = n.value, D = L.nodes[h];
-      if (!D)
+    insertNodeToRight(p, c, C) {
+      const z = n.value, _ = z.nodes[p];
+      if (!_)
         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 "${p}" not found`, source: "api" }
         };
-      const C = I?.gap ?? i ?? vt, F = o.nodeTypes[D.type], Y = o.nodeTypes[v.type], q = F?.getSize(D) ?? { width: 154, height: 54 }, Q = Y?.getSize({ ...v, position: { x: 0, y: 0 } }) ?? {
+      const j = C?.gap ?? i ?? St, G = C?.direction ?? "right", q = o.nodeTypes[_.type], X = o.nodeTypes[c.type], ye = q?.getSize(_) ?? { width: 154, height: 54 }, se = X?.getSize({ ...c, position: { x: 0, y: 0 } }) ?? {
         width: 154,
         height: 54
-      }, X = {
-        x: D.position.x + q.width + C,
-        y: D.position.y + (q.height - Q.height) / 2
-      }, G = v.id || T(), se = { ...v, id: G, position: X }, ee = [{ type: "node.add", node: se }], ke = Q.width + C, te = { x: X.x, y: X.y, width: Q.width, height: Q.height };
-      for (const [Z, V] of Object.entries(L.nodes)) {
-        if (Z === h || Z === G) continue;
-        const oe = o.nodeTypes[V.type]?.getSize(V) ?? { width: 154, height: 54 }, U = te.x < V.position.x + oe.width && te.x + te.width > V.position.x, x = te.y < V.position.y + oe.height && te.y + te.height > V.position.y;
-        U && x && ee.push({
+      }, ae = U(G, _, ye, se, j), ie = c.id || $(), xe = { ...c, id: ie, position: ae }, J = [{ type: "node.add", node: xe }], ke = O(G, se, j), ee = { x: ae.x, y: ae.y, width: se.width, height: se.height };
+      for (const [le, V] of Object.entries(z.nodes)) {
+        if (le === p || le === ie) continue;
+        const fe = o.nodeTypes[V.type]?.getSize(V) ?? { width: 154, height: 54 }, oe = ee.x < V.position.x + fe.width && ee.x + ee.width > V.position.x, pe = ee.y < V.position.y + fe.height && ee.y + ee.height > V.position.y;
+        oe && pe && J.push({
           type: "node.move",
-          nodeId: Z,
-          position: { x: V.position.x + ke, y: V.position.y }
+          nodeId: le,
+          position: { x: V.position.x + ke.x, y: V.position.y + ke.y }
         });
       }
-      if (I?.autoWireEdges) {
-        const Z = D.ports?.find((U) => U.group === "right"), V = se.ports?.find((U) => U.group === "left"), ue = se.ports?.find((U) => U.group === "right"), oe = Z ? Object.values(L.edges).find(
-          (U) => U.source.nodeId === h && U.source.portId === Z.id
-        ) : Object.values(L.edges).find((U) => U.source.nodeId === h);
-        if (oe) {
-          const U = oe.target;
-          ee.push({ type: "edge.remove", edgeId: oe.id }), ee.push({
+      if (C?.autoWireEdges) {
+        const le = A(_), V = A(xe), te = G, fe = K(G), oe = le.find((h) => h.group === te), pe = V.find((h) => h.group === fe), Pe = V.find((h) => h.group === te), v = oe ? Object.values(z.edges).find(
+          (h) => h.source.nodeId === p && h.source.portId === oe.id
+        ) : Object.values(z.edges).find((h) => h.source.nodeId === p);
+        if (v) {
+          const h = v.target;
+          J.push({ type: "edge.remove", edgeId: v.id }), J.push({
             type: "edge.add",
             edge: {
-              id: T(),
-              source: { nodeId: h, portId: Z?.id },
-              target: { nodeId: G, portId: V?.id }
+              id: $(),
+              source: { nodeId: p, portId: oe?.id },
+              target: { nodeId: ie, portId: pe?.id }
             }
-          }), ee.push({
+          }), J.push({
             type: "edge.add",
             edge: {
-              id: T(),
-              source: { nodeId: G, portId: ue?.id },
-              target: U
+              id: $(),
+              source: { nodeId: ie, portId: Pe?.id },
+              target: h
             }
           });
         } else
-          ee.push({
+          J.push({
             type: "edge.add",
             edge: {
-              id: T(),
-              source: { nodeId: h, portId: Z?.id },
-              target: { nodeId: G, portId: V?.id }
+              id: $(),
+              source: { nodeId: p, portId: oe?.id },
+              target: { nodeId: ie, portId: pe?.id }
             }
           });
       }
-      const he = {
-        id: T(),
-        source: I?.source ?? "user:toolbar",
-        label: I?.label ?? "插入节点",
+      const De = {
+        id: $(),
+        source: C?.source ?? "user:toolbar",
+        label: C?.label ?? "插入节点",
         timestamp: Date.now(),
-        commands: ee
+        commands: J
       };
-      return t(he);
+      return t(De);
     },
-    onGraphEvent(h, v) {
-      return s.on(h, v), () => s.off(h, v);
+    onGraphEvent(p, c) {
+      return s.on(p, c), () => s.off(p, c);
     },
     unsafeGetGraph() {
       return s;
     }
   };
 }
-function mt() {
-  const s = z(null), e = z(!1);
+function Pt() {
+  const s = L(null), e = L(!1);
   let t = null, o = !1;
   function n(d) {
     t && (clearTimeout(t), t = null), s.value = d;
@@ -1251,33 +1308,33 @@ function mt() {
   function a() {
     t && (clearTimeout(t), t = null);
   }
-  function c() {
+  function f() {
     t && clearTimeout(t);
   }
-  return { hoveredNodeId: s, isDraggingNode: e, enter: n, leave: i, enterOverlay: r, leaveOverlay: l, cancelLeave: a, cleanup: c };
+  return { hoveredNodeId: s, isDraggingNode: e, enter: n, leave: i, enterOverlay: r, leaveOverlay: l, cancelLeave: a, cleanup: f };
 }
-const _e = 10;
-function Pe(s, e) {
+const ze = 10;
+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 i = 50, r = t / i;
   let l = 0;
-  for (let g = 0; g <= i; g++) {
-    const p = g * r, u = s.getPointAtLength(p), N = (u.x - e.x) ** 2 + (u.y - e.y) ** 2;
-    N < n && (n = N, o = u, l = p);
+  for (let b = 0; b <= i; b++) {
+    const m = b * r, g = s.getPointAtLength(m), S = (g.x - e.x) ** 2 + (g.y - e.y) ** 2;
+    S < n && (n = S, o = g, l = m);
   }
-  const a = Math.max(0, l - r), c = Math.min(t, l + r), d = (c - a) / 20;
-  for (let g = a; g <= c; g += d) {
-    const p = s.getPointAtLength(g), u = (p.x - e.x) ** 2 + (p.y - e.y) ** 2;
-    u < n && (n = u, o = p, l = g);
+  const a = Math.max(0, l - r), f = Math.min(t, l + r), d = (f - a) / 20;
+  for (let b = a; b <= f; b += d) {
+    const m = s.getPointAtLength(b), g = (m.x - e.x) ** 2 + (m.y - e.y) ** 2;
+    g < n && (n = g, o = m, l = b);
   }
   return { x: o.x, y: o.y, length: l, totalLength: t };
 }
-function Ae(s, e) {
-  return s < _e || s > e - _e;
+function Ge(s, e) {
+  return s < ze || s > e - ze;
 }
-function Te() {
+function He() {
   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");
@@ -1285,37 +1342,37 @@ function Te() {
   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 bt(s) {
+function _t(s) {
   let e = null, t = null;
   function o(l, a) {
     i(), t = l;
-    const c = s.getCellById(l);
-    if (!c?.isEdge()) return;
-    const d = s.findViewByCell(c);
+    const f = s.getCellById(l);
+    if (!f?.isEdge()) return;
+    const d = s.findViewByCell(f);
     if (!d) return;
-    const g = d.container.querySelector("path");
-    if (!g) return;
-    const p = s.clientToLocal(a.clientX, a.clientY), u = Pe(g, p);
-    if (Ae(u.length, u.totalLength)) return;
-    const N = Te();
-    N.setAttribute("transform", `translate(${u.x}, ${u.y})`), d.container.appendChild(N), e = N;
+    const b = d.container.querySelector("path");
+    if (!b) return;
+    const m = s.clientToLocal(a.clientX, a.clientY), g = je(b, m);
+    if (Ge(g.length, g.totalLength)) return;
+    const S = He();
+    S.setAttribute("transform", `translate(${g.x}, ${g.y})`), d.container.appendChild(S), e = S;
   }
   function n(l) {
     if (!t) return;
     const a = s.getCellById(t);
     if (!a?.isEdge()) return;
-    const c = s.findViewByCell(a);
-    if (!c) return;
-    const d = c.container.querySelector("path");
+    const f = s.findViewByCell(a);
+    if (!f) return;
+    const d = f.container.querySelector("path");
     if (!d) return;
-    const g = s.clientToLocal(l.clientX, l.clientY), p = Pe(d, g);
-    if (Ae(p.length, p.totalLength))
+    const b = s.clientToLocal(l.clientX, l.clientY), m = je(d, b);
+    if (Ge(m.length, m.totalLength))
       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(${m.x}, ${m.y})`);
     else {
-      const u = Te();
-      u.setAttribute("transform", `translate(${p.x}, ${p.y})`), c.container.appendChild(u), e = u;
+      const g = He();
+      g.setAttribute("transform", `translate(${m.x}, ${m.y})`), f.container.appendChild(g), e = g;
     }
   }
   function i() {
@@ -1326,23 +1383,23 @@ function bt(s) {
   }
   return { show: o, move: n, remove: i, handleEdgeRemoved: r };
 }
-function wt(s) {
+function At(s) {
   let e = null, t = 0;
   function o(d) {
-    const g = d ? "visible" : "hidden";
-    for (const p of s.getNodes())
-      for (const u of p.getPorts())
-        p.setPortProp(u.id, "attrs/circle/visibility", g);
+    const b = d ? "visible" : "hidden";
+    for (const m of s.getNodes())
+      for (const g of m.getPorts())
+        m.setPortProp(g.id, "attrs/circle/visibility", b);
   }
   function n(d) {
     if (!e)
-      for (const g of d.getPorts())
-        d.setPortProp(g.id, "attrs/circle/visibility", "visible");
+      for (const b of d.getPorts())
+        d.setPortProp(b.id, "attrs/circle/visibility", "visible");
   }
   function i(d) {
     if (!e)
-      for (const g of d.getPorts())
-        d.setPortProp(g.id, "attrs/circle/visibility", "hidden");
+      for (const b of d.getPorts())
+        d.setPortProp(b.id, "attrs/circle/visibility", "hidden");
   }
   function r(d) {
     d.getTargetCell() || (e = d.id, o(!0));
@@ -1353,7 +1410,7 @@ function wt(s) {
   function a(d) {
     d === e && (e = null, o(!1));
   }
-  function c() {
+  function f() {
     return !e && Date.now() >= t;
   }
   return {
@@ -1362,10 +1419,10 @@ function wt(s) {
     handleEdgeAdded: r,
     handleEdgeConnected: l,
     handleEdgeRemoved: a,
-    canShowEdgeTool: c
+    canShowEdgeTool: f
   };
 }
-const xt = { class: "flow-canvas-node-actions__bar" }, kt = /* @__PURE__ */ re({
+const Tt = { class: "flow-canvas-node-actions__bar" }, Rt = /* @__PURE__ */ ce({
   __name: "node-actions-toolbar",
   props: {
     node: {},
@@ -1376,14 +1433,14 @@ const xt = { class: "flow-canvas-node-actions__bar" }, kt = /* @__PURE__ */ re({
   },
   emits: ["action"],
   setup(s, { emit: e }) {
-    const t = s, o = j(() => {
-      const g = t.actionsOffset?.x ?? 0, p = t.actionsOffset?.y ?? 0, u = g !== 0 || p !== 0;
+    const t = s, o = H(() => {
+      const b = t.actionsOffset?.x ?? 0, m = t.actionsOffset?.y ?? 0, g = b !== 0 || m !== 0;
       return {
         left: `${t.position.x}px`,
         top: `${t.position.y}px`,
-        transform: u ? `translate(${g}px, ${p}px)` : "translateX(-100%)"
+        transform: g ? `translate(${b}px, ${m}px)` : "translateX(-100%)"
       };
-    }), n = e, i = j(() => ({
+    }), n = e, i = H(() => ({
       debug: {
         visible: t.config.showDebug && t.behavior.debuggable !== !1,
         disabled: t.behavior.debugDisabled === !0
@@ -1404,9 +1461,9 @@ const xt = { class: "flow-canvas-node-actions__bar" }, kt = /* @__PURE__ */ re({
         visible: t.config.showDisconnect && t.behavior.disconnectable !== !1,
         disabled: t.behavior.disconnectDisabled === !0
       }
-    })), r = j(() => i.value.copy.visible || i.value.copyInsert.visible || i.value.disconnect.visible), l = z(!1);
+    })), r = H(() => i.value.copy.visible || i.value.copyInsert.visible || i.value.disconnect.visible), l = L(!1);
     let a = null;
-    function c() {
+    function f() {
       a && (clearTimeout(a), a = null), l.value = !0;
     }
     function d() {
@@ -1414,79 +1471,79 @@ const xt = { class: "flow-canvas-node-actions__bar" }, kt = /* @__PURE__ */ re({
         l.value = !1, a = null;
       }, 100);
     }
-    return Se(() => {
+    return Re(() => {
       a && clearTimeout(a);
-    }), (g, p) => (k(), S("div", {
+    }), (b, m) => (I(), N("div", {
       class: "flow-canvas-node-actions",
-      style: me(o.value)
+      style: Ie(o.value)
     }, [
-      A("div", xt, [
-        i.value.debug.visible ? (k(), S("i", {
+      R("div", Tt, [
+        i.value.debug.visible ? (I(), N("i", {
           key: 0,
-          class: W(["flow-canvas-icon canvas-debug flow-canvas-node-actions__icon", { "is-disabled": i.value.debug.disabled }]),
-          onClick: p[0] || (p[0] = (u) => !i.value.debug.disabled && n("action", "debug", s.node.id))
-        }, null, 2)) : H("", !0),
-        i.value.delete.visible ? (k(), S("i", {
+          class: Q(["flow-canvas-icon canvas-debug flow-canvas-node-actions__icon", { "is-disabled": i.value.debug.disabled }]),
+          onClick: m[0] || (m[0] = (g) => !i.value.debug.disabled && n("action", "debug", s.node.id))
+        }, null, 2)) : F("", !0),
+        i.value.delete.visible ? (I(), N("i", {
           key: 1,
-          class: W(["flow-canvas-icon canvas-shanchu flow-canvas-node-actions__icon", { "is-disabled": i.value.delete.disabled }]),
-          onClick: p[1] || (p[1] = (u) => !i.value.delete.disabled && n("action", "delete", s.node.id))
-        }, null, 2)) : H("", !0),
-        r.value ? (k(), S("div", {
+          class: Q(["flow-canvas-icon canvas-shanchu flow-canvas-node-actions__icon", { "is-disabled": i.value.delete.disabled }]),
+          onClick: m[1] || (m[1] = (g) => !i.value.delete.disabled && n("action", "delete", s.node.id))
+        }, null, 2)) : F("", !0),
+        r.value ? (I(), N("div", {
           key: 2,
           class: "flow-canvas-node-actions__more-wrapper",
-          onMouseenter: c,
+          onMouseenter: f,
           onMouseleave: d
-        }, [...p[5] || (p[5] = [
-          A("i", { class: "flow-canvas-icon canvas-gengduo flow-canvas-node-actions__icon" }, null, -1)
-        ])], 32)) : H("", !0)
+        }, [...m[5] || (m[5] = [
+          R("i", { class: "flow-canvas-icon canvas-gengduo flow-canvas-node-actions__icon" }, null, -1)
+        ])], 32)) : F("", !0)
       ]),
-      Be(ze, { name: "flow-canvas-fade" }, {
-        default: Ne(() => [
-          l.value && r.value ? (k(), S("div", {
+      Ve(We, { name: "flow-canvas-fade" }, {
+        default: $e(() => [
+          l.value && r.value ? (I(), N("div", {
             key: 0,
             class: "flow-canvas-node-actions__dropdown",
-            onMouseenter: c,
+            onMouseenter: f,
             onMouseleave: d
           }, [
-            i.value.copy.visible ? (k(), S("div", {
+            i.value.copy.visible ? (I(), N("div", {
               key: 0,
-              class: W(["flow-canvas-node-actions__dropdown-item", { "is-disabled": i.value.copy.disabled }]),
-              onClick: p[2] || (p[2] = (u) => !i.value.copy.disabled && n("action", "copy", s.node.id))
-            }, [...p[6] || (p[6] = [
-              A("i", { class: "flow-canvas-icon canvas-copy-fuzhi-2" }, null, -1),
-              A("span", null, "复制", -1)
-            ])], 2)) : H("", !0),
-            i.value.copyInsert.visible ? (k(), S("div", {
+              class: Q(["flow-canvas-node-actions__dropdown-item", { "is-disabled": i.value.copy.disabled }]),
+              onClick: m[2] || (m[2] = (g) => !i.value.copy.disabled && n("action", "copy", s.node.id))
+            }, [...m[6] || (m[6] = [
+              R("i", { class: "flow-canvas-icon canvas-copy-fuzhi-2" }, null, -1),
+              R("span", null, "复制", -1)
+            ])], 2)) : F("", !0),
+            i.value.copyInsert.visible ? (I(), N("div", {
               key: 1,
-              class: W(["flow-canvas-node-actions__dropdown-item", { "is-disabled": i.value.copyInsert.disabled }]),
-              onClick: p[3] || (p[3] = (u) => !i.value.copyInsert.disabled && n("action", "copy-insert", s.node.id))
-            }, [...p[7] || (p[7] = [
-              A("i", { class: "flow-canvas-icon canvas-fuzhibingcharu" }, null, -1),
-              A("span", null, "复制并插入", -1)
-            ])], 2)) : H("", !0),
-            i.value.disconnect.visible ? (k(), S("div", {
+              class: Q(["flow-canvas-node-actions__dropdown-item", { "is-disabled": i.value.copyInsert.disabled }]),
+              onClick: m[3] || (m[3] = (g) => !i.value.copyInsert.disabled && n("action", "copy-insert", s.node.id))
+            }, [...m[7] || (m[7] = [
+              R("i", { class: "flow-canvas-icon canvas-fuzhibingcharu" }, null, -1),
+              R("span", null, "复制并插入", -1)
+            ])], 2)) : F("", !0),
+            i.value.disconnect.visible ? (I(), N("div", {
               key: 2,
-              class: W(["flow-canvas-node-actions__dropdown-item", { "is-disabled": i.value.disconnect.disabled }]),
-              onClick: p[4] || (p[4] = (u) => !i.value.disconnect.disabled && n("action", "disconnect", s.node.id))
-            }, [...p[8] || (p[8] = [
-              A("i", { class: "flow-canvas-icon canvas-unlock-jiebang" }, null, -1),
-              A("span", null, "断开连线", -1)
-            ])], 2)) : H("", !0)
-          ], 32)) : H("", !0)
+              class: Q(["flow-canvas-node-actions__dropdown-item", { "is-disabled": i.value.disconnect.disabled }]),
+              onClick: m[4] || (m[4] = (g) => !i.value.disconnect.disabled && n("action", "disconnect", s.node.id))
+            }, [...m[8] || (m[8] = [
+              R("i", { class: "flow-canvas-icon canvas-unlock-jiebang" }, null, -1),
+              R("span", null, "断开连线", -1)
+            ])], 2)) : F("", !0)
+          ], 32)) : F("", !0)
         ]),
         _: 1
       })
     ], 4));
   }
-}), ae = (s, e) => {
+}), ue = (s, e) => {
   const t = s.__vccOpts || s;
   for (const [o, n] of e)
     t[o] = n;
   return t;
-}, Ct = /* @__PURE__ */ ae(kt, [["__scopeId", "data-v-3b39dab5"]]), Et = {
+}, $t = /* @__PURE__ */ ue(Rt, [["__scopeId", "data-v-3b39dab5"]]), Bt = {
   key: 0,
   class: "flow-canvas-quick-add__tooltip"
-}, It = 5, Mt = /* @__PURE__ */ re({
+}, Lt = 5, Ot = /* @__PURE__ */ ce({
   __name: "node-quick-add-popover",
   props: {
     node: {},
@@ -1495,98 +1552,98 @@ const xt = { class: "flow-canvas-node-actions__bar" }, kt = /* @__PURE__ */ re({
   },
   emits: ["open", "close", "start-drag", "mouseenter", "mouseleave"],
   setup(s, { expose: e, emit: t }) {
-    const o = s, n = t, i = z(), r = z(), l = z(!1), a = z(!1);
-    let c = null, d = !1, g = null;
-    function p(D) {
-      D.preventDefault(), D.stopPropagation(), c = { x: D.clientX, y: D.clientY }, d = !1, document.addEventListener("mousemove", u), document.addEventListener("mouseup", N);
+    const o = s, n = t, i = L(), r = L(), l = L(!1), a = L(!1);
+    let f = null, d = !1, b = null;
+    function m(p) {
+      p.preventDefault(), p.stopPropagation(), f = { x: p.clientX, y: p.clientY }, d = !1, document.addEventListener("mousemove", g), document.addEventListener("mouseup", S);
     }
-    function u(D) {
-      if (!c) return;
-      const C = D.clientX - c.x, F = D.clientY - c.y;
-      Math.sqrt(C * C + F * F) >= It && (d = !0, b(), n("start-drag", o.node.id));
+    function g(p) {
+      if (!f) return;
+      const c = p.clientX - f.x, C = p.clientY - f.y;
+      Math.sqrt(c * c + C * C) >= Lt && (d = !0, k(), n("start-drag", o.node.id));
     }
-    function N() {
-      b(), d || y(), c = null, d = !1;
+    function S() {
+      k(), d || w(), f = null, d = !1;
     }
-    function b() {
-      document.removeEventListener("mousemove", u), document.removeEventListener("mouseup", N);
+    function k() {
+      document.removeEventListener("mousemove", g), document.removeEventListener("mouseup", S);
     }
-    function y() {
-      a.value ? R() : m();
+    function w() {
+      a.value ? A() : x();
     }
-    function m() {
+    function x() {
       a.value = !0, n("open", o.node.id), requestAnimationFrame(() => {
-        document.addEventListener("mousedown", h);
+        document.addEventListener("mousedown", U);
       });
     }
-    function R() {
-      a.value = !1, n("close"), document.removeEventListener("mousedown", h);
+    function A() {
+      a.value = !1, n("close"), document.removeEventListener("mousedown", U);
     }
-    function h(D) {
-      const C = D.target;
-      i.value?.contains(C) || r.value?.contains(C) || R();
+    function U(p) {
+      const c = p.target;
+      i.value?.contains(c) || r.value?.contains(c) || A();
     }
-    function v() {
+    function O() {
       a.value || n("mouseleave");
     }
-    function I() {
-      g && (clearTimeout(g), g = null), n("mouseenter");
+    function K() {
+      b && (clearTimeout(b), b = null), n("mouseenter");
     }
-    function L() {
-      g = setTimeout(() => {
-        R(), n("mouseleave"), g = null;
+    function Z() {
+      b = setTimeout(() => {
+        A(), n("mouseleave"), b = null;
       }, 150);
     }
-    return Se(() => {
-      b(), g && clearTimeout(g), document.removeEventListener("mousedown", h);
-    }), e({ closePopover: R }), (D, C) => (k(), S("div", {
+    return Re(() => {
+      k(), b && clearTimeout(b), document.removeEventListener("mousedown", U);
+    }), e({ closePopover: A }), (p, c) => (I(), N("div", {
       class: "flow-canvas-quick-add",
-      style: me({ left: `${s.portPosition.x}px`, top: `${s.portPosition.y}px` }),
-      onMouseenter: C[2] || (C[2] = (F) => n("mouseenter")),
-      onMouseleave: v,
-      onClick: C[3] || (C[3] = He(() => {
+      style: Ie({ left: `${s.portPosition.x}px`, top: `${s.portPosition.y}px` }),
+      onMouseenter: c[2] || (c[2] = (C) => n("mouseenter")),
+      onMouseleave: O,
+      onClick: c[3] || (c[3] = Ze(() => {
       }, ["stop"]))
     }, [
-      A("div", {
+      R("div", {
         ref_key: "btnRef",
         ref: i,
-        class: W(["flow-canvas-quick-add__btn", { "is-hovered": l.value, "is-active": a.value }]),
-        onMouseenter: C[0] || (C[0] = (F) => l.value = !0),
-        onMouseleave: C[1] || (C[1] = (F) => l.value = !1),
-        onMousedown: p
-      }, [...C[4] || (C[4] = [
-        A("i", { class: "flow-canvas-icon canvas-zoom-add" }, null, -1)
+        class: Q(["flow-canvas-quick-add__btn", { "is-hovered": l.value, "is-active": a.value }]),
+        onMouseenter: c[0] || (c[0] = (C) => l.value = !0),
+        onMouseleave: c[1] || (c[1] = (C) => l.value = !1),
+        onMousedown: m
+      }, [...c[4] || (c[4] = [
+        R("i", { class: "flow-canvas-icon canvas-zoom-add" }, null, -1)
       ])], 34),
-      l.value && !a.value ? (k(), S("div", Et, [...C[5] || (C[5] = [
-        A("div", null, [
-          A("b", null, "点击"),
-          De(" 添加节点")
+      l.value && !a.value ? (I(), N("div", Bt, [...c[5] || (c[5] = [
+        R("div", null, [
+          R("b", null, "点击"),
+          Oe(" 添加节点")
         ], -1),
-        A("div", null, [
-          A("b", null, "拖拽"),
-          De(" 连接节点")
+        R("div", null, [
+          R("b", null, "拖拽"),
+          Oe(" 连接节点")
         ], -1)
-      ])])) : H("", !0),
-      Be(ze, { name: "flow-canvas-fade" }, {
-        default: Ne(() => [
-          a.value ? (k(), S("div", {
+      ])])) : F("", !0),
+      Ve(We, { name: "flow-canvas-fade" }, {
+        default: $e(() => [
+          a.value ? (I(), N("div", {
             key: 0,
             ref_key: "popoverRef",
             ref: r,
             class: "flow-canvas-quick-add__popover",
-            onMouseenter: I,
-            onMouseleave: L
+            onMouseenter: K,
+            onMouseleave: Z
           }, [
-            fe(D.$slots, "default", {}, () => [
-              C[6] || (C[6] = A("div", { class: "flow-canvas-quick-add__default-content" }, "节点快捷操作面板", -1))
+            me(p.$slots, "default", {}, () => [
+              c[6] || (c[6] = R("div", { class: "flow-canvas-quick-add__default-content" }, "节点快捷操作面板", -1))
             ], !0)
-          ], 544)) : H("", !0)
+          ], 544)) : F("", !0)
         ]),
         _: 3
       })
     ], 36));
   }
-}), St = /* @__PURE__ */ ae(Mt, [["__scopeId", "data-v-deb5af25"]]), Nt = { class: "flow-canvas-runtime-core__overlay" }, Dt = /* @__PURE__ */ re({
+}), zt = /* @__PURE__ */ ue(Ot, [["__scopeId", "data-v-deb5af25"]]), jt = { class: "flow-canvas-runtime-core__overlay" }, Gt = /* @__PURE__ */ ce({
   __name: "canvas-runtime-core",
   props: {
     editor: {},
@@ -1596,46 +1653,46 @@ const xt = { class: "flow-canvas-node-actions__bar" }, kt = /* @__PURE__ */ re({
   },
   emits: ["ui-event"],
   setup(s, { emit: e }) {
-    const t = s, o = e, n = z(), i = z();
-    let r, l, a, c;
-    const d = mt(), { hoveredNodeId: g, isDraggingNode: p } = d, u = d.enterOverlay, N = () => d.leaveOverlay(), b = z(null);
-    let y = null;
-    function m(x) {
-      return h(), V(x) ? (b.value = x, !0) : (b.value = null, !1);
-    }
-    function R() {
-      y && clearTimeout(y), y = setTimeout(() => {
-        b.value = null, y = null;
+    const t = s, o = e, n = L(), i = L();
+    let r, l, a, f;
+    const d = Pt(), { hoveredNodeId: b, isDraggingNode: m } = d, g = d.enterOverlay, S = () => d.leaveOverlay(), k = L(null);
+    let w = null;
+    function x(v) {
+      return U(), J(v) ? (k.value = v, !0) : (k.value = null, !1);
+    }
+    function A() {
+      w && clearTimeout(w), w = setTimeout(() => {
+        k.value = null, w = null;
       }, 150);
     }
-    function h() {
-      y && (clearTimeout(y), y = null);
+    function U() {
+      w && (clearTimeout(w), w = null);
     }
-    function v() {
-      h(), d.enterOverlay();
+    function O() {
+      U(), d.enterOverlay();
     }
-    function I() {
-      R(), d.leaveOverlay();
+    function K() {
+      A(), d.leaveOverlay();
     }
-    let L = null, D = null, C = null;
-    const F = z(0), Y = j(
+    let Z = null, p = null, c = null;
+    const C = L(0), z = H(
       () => {
-        if (F.value, !t.editor.api.value) return [];
-        const x = t.editor.flowModel.value, E = t.editor.api.value.overlay, w = [];
-        for (const [_, B] of Object.entries(x.nodes)) {
-          const P = t.editor._pluginManager.collectNodeDecorations(B);
+        if (C.value, !t.editor.api.value) return [];
+        const v = t.editor.flowModel.value, h = t.editor.api.value.overlay, u = [];
+        for (const [E, D] of Object.entries(v.nodes)) {
+          const P = t.editor._pluginManager.collectNodeDecorations(D);
           if (!P?.badge) continue;
-          const O = E.getNodeScreenRect(_);
-          O && w.push({
-            nodeId: _,
-            x: O.x + O.width - 4,
-            y: O.y - 8,
+          const T = h.getNodeScreenRect(E);
+          T && u.push({
+            nodeId: E,
+            x: T.x + T.width - 4,
+            y: T.y - 8,
             badge: P.badge
           });
         }
-        return w;
+        return u;
       }
-    ), q = j(() => ({
+    ), _ = H(() => ({
       showDebug: !1,
       showDelete: !0,
       showCopy: !0,
@@ -1643,155 +1700,229 @@ const xt = { class: "flow-canvas-node-actions__bar" }, kt = /* @__PURE__ */ re({
       showDisconnect: !0,
       insertGap: 100,
       ...t.nodeActions
-    })), Q = j(() => {
-      F.value;
-      const x = g.value;
-      if (!x || p.value || !t.editor.api.value || t.editor.mode.value !== "edit") return null;
-      const E = t.editor.flowModel.value, w = E.nodes[x];
-      if (!w) return null;
-      const _ = t.editor.api.value.overlay.getNodeScreenRect(x);
-      if (!_) return null;
-      const P = t.editor.schema.nodeTypes[w.type]?.getBehavior?.(w, {
+    })), j = H(() => {
+      C.value;
+      const v = b.value;
+      if (!v || m.value || !t.editor.api.value || t.editor.mode.value !== "edit") return null;
+      const h = t.editor.flowModel.value, u = h.nodes[v];
+      if (!u) return null;
+      const E = t.editor.api.value.overlay.getNodeScreenRect(v);
+      if (!E) return null;
+      const P = t.editor.schema.nodeTypes[u.type]?.getBehavior?.(u, {
         api: t.editor.api.value,
-        flowModel: E,
+        flowModel: h,
         history: t.editor.history,
         mode: t.editor.mode.value
       }) ?? {};
       return P.showActions === !1 ? null : {
-        node: w,
-        position: { x: _.x + _.width, y: _.y + _.height + 4 },
+        node: u,
+        position: { x: E.x + E.width, y: E.y + E.height + 4 },
         behavior: P
       };
-    }), X = j(() => ({
+    }), G = H(() => ({
       enabled: !0,
       tooltipText: "",
+      portGroup: "right",
       ...t.quickAdd
-    })), G = j(() => {
-      if (F.value, !X.value.enabled) return null;
-      const x = b.value;
-      if (!x || p.value || !t.editor.api.value || t.editor.mode.value !== "edit") return null;
-      const E = t.editor.flowModel.value, w = E.nodes[x];
-      if (!w) return null;
-      const B = t.editor.schema.nodeTypes[w.type]?.getBehavior?.(w, {
+    })), q = H(() => {
+      if (C.value, !G.value.enabled) return null;
+      const v = k.value;
+      if (!v || m.value || !t.editor.api.value || t.editor.mode.value !== "edit") return null;
+      const h = t.editor.flowModel.value, u = h.nodes[v];
+      if (!u) return null;
+      const D = t.editor.schema.nodeTypes[u.type]?.getBehavior?.(u, {
         api: t.editor.api.value,
-        flowModel: E,
+        flowModel: h,
         history: t.editor.history,
         mode: t.editor.mode.value
       }) ?? {};
-      if (B.quickAddEnabled === !1) return null;
-      const P = t.editor.api.value.overlay.getNodeScreenRect(x);
+      if (D.quickAddEnabled === !1) return null;
+      const P = te(u);
       return P ? {
-        node: w,
-        portPosition: { x: P.x + P.width, y: P.y + P.height / 2 },
-        behavior: B
+        node: u,
+        portId: P.portId,
+        portGroup: P.portGroup,
+        portPosition: P.portPosition,
+        behavior: D
       } : null;
-    }), se = z();
-    function ee(x) {
-      const E = G.value;
-      E && o("ui-event", {
+    }), X = L();
+    function ye(v) {
+      const h = q.value;
+      h && o("ui-event", {
         type: "node.quick-add",
-        nodeId: x,
-        position: E.portPosition
+        nodeId: v,
+        position: h.portPosition
       });
     }
-    function ke(x) {
-      const E = t.editor.api.value;
-      E && E.startConnection(x, "right");
-    }
-    function te(x, E) {
-      const w = t.editor.api.value;
-      if (!w) return;
-      const _ = E.id || T(), B = { ...E, id: _ };
-      w.insertNodeToRight(x, B, {
+    function se(v) {
+      const h = t.editor.api.value;
+      if (!h) return;
+      const E = t.editor.flowModel.value.nodes[v];
+      if (!E) return;
+      const D = te(E);
+      D && h.startConnection(v, D.portId);
+    }
+    function ae(v, h) {
+      const u = t.editor.api.value;
+      if (!u) return;
+      const E = h.id || $(), D = { ...h, id: E }, P = t.editor.flowModel.value.nodes[v];
+      if (!P) return;
+      u.insertNodeToRight(v, D, {
         autoWireEdges: !0,
-        gap: q.value.insertGap,
+        direction: fe(P),
+        gap: _.value.insertGap,
         source: "user:quick-add",
         label: "快捷插入节点"
-      }).status === "applied" && o("ui-event", { type: "node.action.quick-insert", sourceNodeId: x, newNodeId: _ }), se.value?.closePopover();
+      }).status === "applied" && o("ui-event", { type: "node.action.quick-insert", sourceNodeId: v, newNodeId: E }), X.value?.closePopover();
     }
-    function he(x) {
+    function ie(v) {
       return {
-        id: T(),
-        type: x.type,
-        label: x.label,
-        ports: x.ports ? JSON.parse(JSON.stringify(x.ports)) : void 0,
-        payload: x.payload ? JSON.parse(JSON.stringify(x.payload)) : void 0,
-        extensions: x.extensions ? JSON.parse(JSON.stringify(x.extensions)) : void 0
+        id: $(),
+        type: v.type,
+        label: v.label,
+        ports: v.ports ? JSON.parse(JSON.stringify(v.ports)) : void 0,
+        payload: v.payload ? JSON.parse(JSON.stringify(v.payload)) : void 0,
+        extensions: v.extensions ? JSON.parse(JSON.stringify(v.extensions)) : void 0
       };
     }
-    function Z(x, E) {
-      const w = t.editor, _ = w.api.value;
-      switch (x) {
+    function xe(v, h) {
+      const u = t.editor, E = u.api.value;
+      switch (v) {
         case "delete": {
-          w.executeCommand({
-            id: T(),
+          u.executeCommand({
+            id: $(),
             source: "user:toolbar",
             label: "删除节点",
             timestamp: Date.now(),
-            commands: [{ type: "node.remove", nodeId: E }]
-          }), o("ui-event", { type: "node.action.delete", nodeId: E }), g.value = null;
+            commands: [{ type: "node.remove", nodeId: h }]
+          }), o("ui-event", { type: "node.action.delete", nodeId: h }), b.value = null;
           break;
         }
         case "copy": {
-          if (!_) break;
-          const B = w.flowModel.value.nodes[E];
-          if (!B) break;
-          const P = he(B);
-          _.insertNodeToRight(E, P, {
+          if (!E) break;
+          const D = u.flowModel.value.nodes[h];
+          if (!D) break;
+          const P = ie(D);
+          E.insertNodeToRight(h, P, {
             autoWireEdges: !1,
-            gap: q.value.insertGap,
+            gap: _.value.insertGap,
             label: "复制节点"
-          }), o("ui-event", { type: "node.action.copy", sourceNodeId: E, newNodeId: P.id });
+          }), o("ui-event", { type: "node.action.copy", sourceNodeId: h, newNodeId: P.id });
           break;
         }
         case "copy-insert": {
-          if (!_) break;
-          const B = w.flowModel.value.nodes[E];
-          if (!B) break;
-          const P = he(B);
-          _.insertNodeToRight(E, P, {
+          if (!E) break;
+          const D = u.flowModel.value.nodes[h];
+          if (!D) break;
+          const P = ie(D);
+          E.insertNodeToRight(h, P, {
             autoWireEdges: !0,
-            gap: q.value.insertGap,
+            gap: _.value.insertGap,
             label: "复制并插入节点"
-          }), o("ui-event", { type: "node.action.copy-insert", sourceNodeId: E, newNodeId: P.id });
+          }), o("ui-event", { type: "node.action.copy-insert", sourceNodeId: h, newNodeId: P.id });
           break;
         }
         case "disconnect": {
-          const B = w.flowModel.value, P = Object.entries(B.edges).filter(([, O]) => {
-            const J = O;
-            return J.source.nodeId === E || J.target.nodeId === E;
-          }).map(([O]) => O);
+          const D = u.flowModel.value, P = Object.entries(D.edges).filter(([, T]) => {
+            const W = T;
+            return W.source.nodeId === h || W.target.nodeId === h;
+          }).map(([T]) => T);
           if (P.length === 0) break;
-          w.executeCommand({
-            id: T(),
+          u.executeCommand({
+            id: $(),
             source: "user:toolbar",
             label: "断开连线",
             timestamp: Date.now(),
-            commands: P.map((O) => ({ type: "edge.remove", edgeId: O }))
-          }), o("ui-event", { type: "node.action.disconnect", nodeId: E, edgeIds: P });
+            commands: P.map((T) => ({ type: "edge.remove", edgeId: T }))
+          }), o("ui-event", { type: "node.action.disconnect", nodeId: h, edgeIds: P });
           break;
         }
         case "debug": {
-          o("ui-event", { type: "node.action.debug", nodeId: E });
+          o("ui-event", { type: "node.action.debug", nodeId: h });
           break;
         }
       }
     }
-    function V(x) {
-      if (!X.value.enabled || t.editor.mode.value !== "edit") return !1;
-      const E = t.editor.flowModel.value, w = E.nodes[x];
-      return w ? (t.editor.schema.nodeTypes[w.type]?.getBehavior?.(w, {
+    function J(v) {
+      if (!G.value.enabled || t.editor.mode.value !== "edit") return !1;
+      const h = t.editor.flowModel.value, u = h.nodes[v];
+      return !u || (t.editor.schema.nodeTypes[u.type]?.getBehavior?.(u, {
         api: t.editor.api.value,
-        flowModel: E,
+        flowModel: h,
         history: t.editor.history,
         mode: t.editor.mode.value
-      }) ?? {}).quickAddEnabled !== !1 : !1;
+      }) ?? {}).quickAddEnabled === !1 ? !1 : !!te(u);
+    }
+    function ke(v) {
+      const h = t.editor.schema.nodeTypes[v.type];
+      return Be(v, h?.getPorts);
+    }
+    function ee(v) {
+      return v === "top" || v === "right" || v === "bottom" || v === "left";
+    }
+    function De(v, h) {
+      const u = G.value.getPort?.(v, h);
+      if (!u) return null;
+      const E = typeof u == "string" ? u : u.id;
+      return h.find((D) => D.id === E) ?? null;
+    }
+    function le(v, h) {
+      const u = t.editor.api.value?.overlay.getNodeScreenRect(v);
+      if (!u) return null;
+      switch (h) {
+        case "top":
+          return { x: u.x + u.width / 2, y: u.y };
+        case "bottom":
+          return { x: u.x + u.width / 2, y: u.y + u.height };
+        case "left":
+          return { x: u.x, y: u.y + u.height / 2 };
+        case "right":
+          return { x: u.x + u.width, y: u.y + u.height / 2 };
+        default:
+          return null;
+      }
     }
-    function ue(x) {
+    function V(v, h, u) {
+      const E = r.getCellById(v);
+      if (E?.isNode()) {
+        const D = E, P = r.findViewByCell(D), T = P?.findPortElem(h, "circle") ?? P?.findPortElem(h);
+        if (T) {
+          const W = r.container.getBoundingClientRect(), re = T.getBoundingClientRect();
+          return {
+            x: re.left - W.left + re.width / 2,
+            y: re.top - W.top + re.height / 2
+          };
+        }
+      }
+      return le(v, u);
+    }
+    function te(v) {
+      const h = ke(v), u = De(v, h) ?? h.find((D) => D.group === G.value.portGroup) ?? null;
+      if (!u) return null;
+      const E = V(v.id, u.id, u.group);
+      return E ? {
+        portId: u.id,
+        portGroup: u.group,
+        portPosition: E
+      } : null;
+    }
+    function fe(v) {
+      const h = te(v), u = G.value.insertDirection;
+      if (typeof u == "function") {
+        const E = u(
+          v,
+          h ? { id: h.portId, group: h.portGroup } : null
+        );
+        if (E) return E;
+      } else if (u)
+        return u;
+      return h && ee(h.portGroup) ? h.portGroup : ee(G.value.portGroup) ? G.value.portGroup : "right";
+    }
+    function oe(v) {
       if (t.editor.mode.value !== "edit") return;
-      t.editor._pluginManager.dispatchKeyboardShortcut(x) && (x.preventDefault(), x.stopPropagation());
+      t.editor._pluginManager.dispatchKeyboardShortcut(v) && (v.preventDefault(), v.stopPropagation());
     }
-    function oe() {
+    function pe() {
       return {
         refX: 0,
         children: [
@@ -1812,8 +1943,8 @@ const xt = { class: "flow-canvas-node-actions__bar" }, kt = /* @__PURE__ */ re({
         ]
       };
     }
-    function U(x) {
-      const E = t.editor.schema.defaultEdgeType ?? "default", w = t.editor.schema.edgeTypes?.[E], _ = {
+    function Pe(v) {
+      const h = t.editor.schema.defaultEdgeType ?? "default", u = t.editor.schema.edgeTypes?.[h], E = {
         zIndex: -1,
         attrs: {
           line: {
@@ -1823,28 +1954,28 @@ const xt = { class: "flow-canvas-node-actions__bar" }, kt = /* @__PURE__ */ re({
           }
         }
       };
-      w?.router && (_.router = typeof w.router == "string" ? { name: w.router } : w.router), w?.connector && (_.connector = typeof w.connector == "string" ? { name: w.connector } : w.connector), w?.x6EdgeConfig && Object.assign(_, w.x6EdgeConfig);
-      const B = _.attrs ?? {}, P = B.line ?? {};
-      return _.attrs = {
-        ...B,
+      u?.router && (E.router = typeof u.router == "string" ? { name: u.router } : u.router), u?.connector && (E.connector = typeof u.connector == "string" ? { name: u.connector } : u.connector), u?.x6EdgeConfig && Object.assign(E, u.x6EdgeConfig);
+      const D = E.attrs ?? {}, P = D.line ?? {};
+      return E.attrs = {
+        ...D,
         line: {
           ...P,
-          targetMarker: oe()
+          targetMarker: pe()
         }
-      }, x.createEdge(_);
+      }, v.createEdge(E);
     }
-    return Fe(() => {
+    return Je(() => {
       if (!i.value) return;
-      const x = /* @__PURE__ */ new Set(["model", "container"]), E = {};
+      const v = /* @__PURE__ */ new Set(["model", "container"]), h = {};
       if (t.graphOptions)
-        for (const [f, M] of Object.entries(t.graphOptions)) {
-          if (x.has(f)) {
-            console.warn(`[flow-canvas] graphOptions.${f} is managed by the engine and will be ignored`);
+        for (const [y, M] of Object.entries(t.graphOptions)) {
+          if (v.has(y)) {
+            console.warn(`[flow-canvas] graphOptions.${y} is managed by the engine and will be ignored`);
             continue;
           }
-          E[f] = M;
+          h[y] = M;
         }
-      r = new Ve({
+      r = new nt({
         container: i.value,
         autoResize: !0,
         background: { color: "#edf2fc" },
@@ -1852,8 +1983,8 @@ const xt = { class: "flow-canvas-node-actions__bar" }, kt = /* @__PURE__ */ re({
         panning: { enabled: !0 },
         mousewheel: { enabled: !0, modifiers: ["ctrl", "meta"] },
         interacting: {
-          nodeMovable(f) {
-            return f.cell.getProp("draggable") !== !1;
+          nodeMovable(y) {
+            return y.cell.getProp("draggable") !== !1;
           }
         },
         connecting: {
@@ -1867,16 +1998,16 @@ const xt = { class: "flow-canvas-node-actions__bar" }, kt = /* @__PURE__ */ re({
           connectionPoint: "anchor",
           snap: { radius: 30 },
           createEdge() {
-            return U(this);
+            return Pe(this);
           }
         },
-        ...E
-      }), a = new pt(), l = new ut(
+        ...h
+      }), a = new It(), l = new Ct(
         r,
         t.editor.schema,
         a,
-        (f) => t.editor._pluginManager.collectNodeDecorations(f),
-        (f) => t.editor._pluginManager.collectEdgeDecorations(f),
+        (y) => t.editor._pluginManager.collectNodeDecorations(y),
+        (y) => t.editor._pluginManager.collectEdgeDecorations(y),
         () => t.editor.api.value ? {
           api: t.editor.api.value,
           flowModel: t.editor.flowModel.value,
@@ -1884,261 +2015,263 @@ const xt = { class: "flow-canvas-node-actions__bar" }, kt = /* @__PURE__ */ re({
           mode: t.editor.mode.value
         } : null
       );
-      const w = ht(r), _ = yt({
+      const u = Nt(r), E = Dt({
         graph: r,
-        overlayManager: w,
-        executeCommand: (f) => t.editor.executeCommand(f),
+        overlayManager: u,
+        executeCommand: (y) => t.editor.executeCommand(y),
         schema: t.editor.schema,
         flowModel: t.editor.flowModel,
         defaultInsertGap: t.nodeActions?.insertGap,
-        getContextMenuItems: (f) => t.editor._pluginManager.collectContextMenuItems(f),
-        onHighlightChange: (f, M) => {
-          l.setHighlightedNodes(f), l.setHighlightedEdges(M), l.refreshNodeHighlights(), l.refreshEdgeStyles();
+        getContextMenuItems: (y) => t.editor._pluginManager.collectContextMenuItems(y),
+        onHighlightChange: (y, M) => {
+          l.setHighlightedNodes(y), l.setHighlightedEdges(M), l.refreshNodeHighlights(), l.refreshEdgeStyles();
         },
-        resolveNodeShape: (f) => {
-          const M = t.editor.schema.nodeTypes[f];
+        resolveNodeShape: (y) => {
+          const M = t.editor.schema.nodeTypes[y];
           if (!M) return null;
-          const $ = a.registerNodeType(f, M.component), ne = M.getSize({ id: "", type: f, position: { x: 0, y: 0 } });
-          return { shapeName: $, width: ne.width, height: ne.height };
+          const B = a.registerNodeType(y, M.component), ne = M.getSize({ id: "", type: y, position: { x: 0, y: 0 } });
+          return { shapeName: B, width: ne.width, height: ne.height };
         }
       });
-      t.editor.api.value = _;
-      const B = {
+      t.editor.api.value = E;
+      const D = {
         flowModel: t.editor.flowModel,
         history: t.editor.history,
         schema: t.editor.schema,
         mode: t.editor.mode,
         executeCommand: t.editor.executeCommand,
-        api: _,
-        overlay: w,
+        api: E,
+        overlay: u,
         graph: r
       };
-      t.editor._pluginManager.attachRuntime(B);
+      t.editor._pluginManager.attachRuntime(D);
       const P = t.editor._pluginManager.collectExtendedApi();
-      Object.assign(t.editor.extendedApi, P), c = new gt(
+      Object.assign(t.editor.extendedApi, P), f = new Mt(
         r,
-        (f) => {
-          (f.type === "node.click" || f.type === "node.dblclick" || f.type === "node.contextmenu") && d.enter(f.nodeId), t.editor._pluginManager.dispatchUiEvent(f), o("ui-event", f);
+        (y) => {
+          (y.type === "node.click" || y.type === "node.dblclick" || y.type === "node.contextmenu") && d.enter(y.nodeId), t.editor._pluginManager.dispatchUiEvent(y), o("ui-event", y);
         },
-        (f) => {
+        (y) => {
           if (l.isSyncing) return;
-          if (t.editor.executeCommand(f).status !== "applied") {
-            for (const $ of f.commands)
-              if ($.type === "edge.add") {
-                const ne = r.getCellById($.edge.id);
+          if (t.editor.executeCommand(y).status !== "applied") {
+            for (const B of y.commands)
+              if (B.type === "edge.add") {
+                const ne = r.getCellById(B.edge.id);
                 ne && r.removeCell(ne);
               }
           }
         },
         t.editor.flowModel
-      ), L = bt(r);
-      const O = wt(r), J = r, Ce = (f) => {
-        const M = J.isRubberbandEnabled?.() ?? !1;
-        M && J.disableRubberband?.(), f ? r.enablePanning() : r.disablePanning(), M && J.enableRubberband?.();
-      }, Ee = () => {
-        F.value++;
+      ), Z = _t(r);
+      const T = At(r), W = r, re = (y) => {
+        const M = W.isRubberbandEnabled?.() ?? !1;
+        M && W.disableRubberband?.(), y ? r.enablePanning() : r.disablePanning(), M && W.enableRubberband?.();
+      }, _e = () => {
+        C.value++;
       };
-      r.on("translate", Ee), r.on("scale", Ee), r.on("resize", Ee), r.on("node:move", () => {
-        p.value = !0;
+      r.on("translate", _e), r.on("scale", _e), r.on("resize", _e), r.on("node:move", () => {
+        m.value = !0;
       }), r.on("node:moved", () => {
-        p.value = !1;
-      }), r.on("node:mouseenter", ({ node: f }) => {
-        d.enter(f.id), X.value.enabled && m(f.id) || O.showNodePorts(f);
-      }), r.on("node:mouseleave", ({ node: f }) => {
-        const M = t.editor.flowModel.value.nodes[f.id];
-        let $ = 100;
+        m.value = !1;
+      }), r.on("node:mouseenter", ({ node: y }) => {
+        d.enter(y.id), G.value.enabled && x(y.id) || T.showNodePorts(y);
+      }), r.on("node:mouseleave", ({ node: y }) => {
+        const M = t.editor.flowModel.value.nodes[y.id];
+        let B = 100;
         M && t.editor.api.value && t.editor.schema.nodeTypes[M.type]?.getBehavior?.(M, {
           api: t.editor.api.value,
           flowModel: t.editor.flowModel.value,
           history: t.editor.history,
           mode: t.editor.mode.value
-        })?.actionsOffset && ($ = 300), d.leave($), X.value.enabled && b.value === f.id ? R() : O.hideNodePorts(f);
+        })?.actionsOffset && (B = 300), d.leave(B), G.value.enabled && k.value === y.id ? A() : T.hideNodePorts(y);
       });
-      function Oe(f) {
-        const M = r.getCellById(f);
+      function Xe(y) {
+        const M = r.getCellById(y);
         if (!M?.isNode()) return;
-        const $ = M, ne = !p.value && V(f);
-        for (const Ie of $.getPorts()) {
-          const je = ne && Ie.group === "right" ? "hidden" : "visible";
-          $.setPortProp(Ie.id, "attrs/circle/visibility", je);
+        const B = M, ne = t.editor.flowModel.value.nodes[y];
+        if (!ne) return;
+        const Ae = te(ne), Ke = !m.value && !!Ae && J(y);
+        for (const Le of B.getPorts()) {
+          const Ye = Ke && Le.id === Ae?.portId ? "hidden" : "visible";
+          B.setPortProp(Le.id, "attrs/circle/visibility", Ye);
         }
       }
-      le(
-        [b, p],
-        ([f], [M]) => {
-          if (M && M !== f) {
-            const $ = r.getCellById(M);
-            $?.isNode() && O.hideNodePorts($);
+      ge(
+        [k, m],
+        ([y], [M]) => {
+          if (M && M !== y) {
+            const B = r.getCellById(M);
+            B?.isNode() && T.hideNodePorts(B);
           }
-          f && Oe(f);
+          y && Xe(y);
         },
         { flush: "sync" }
-      ), r.on("edge:added", ({ edge: f }) => {
-        O.handleEdgeAdded(f);
+      ), r.on("edge:added", ({ edge: y }) => {
+        T.handleEdgeAdded(y);
       }), r.on("edge:connected", () => {
-        O.handleEdgeConnected();
-      }), r.on("edge:removed", ({ edge: f }) => {
-        O.handleEdgeRemoved(f.id), L.handleEdgeRemoved(f.id);
+        T.handleEdgeConnected();
+      }), r.on("edge:removed", ({ edge: y }) => {
+        T.handleEdgeRemoved(y.id), Z.handleEdgeRemoved(y.id);
       }), r.on("selection:changed", () => {
-        const f = r.getSelectedCells?.() ?? [], M = {
-          nodeIds: f.filter(($) => $.isNode()).map(($) => $.id),
-          edgeIds: f.filter(($) => $.isEdge()).map(($) => $.id)
+        const y = r.getSelectedCells?.() ?? [], M = {
+          nodeIds: y.filter((B) => B.isNode()).map((B) => B.id),
+          edgeIds: y.filter((B) => B.isEdge()).map((B) => B.id)
         };
         t.editor._pluginManager.dispatchSelectionChange(M), o("ui-event", {
           type: "selection.change",
           nodeIds: M.nodeIds,
           edgeIds: M.edgeIds
         }), l.refreshEdgeStyles();
-      }), r.on("edge:mouseenter", ({ edge: f, e: M }) => {
-        l.setHoveredEdge(f.id), l.refreshEdgeStyles(), t.editor.mode.value === "edit" && O.canShowEdgeTool() && L.show(f.id, M);
-      }), D = (f) => L.move(f), r.container.addEventListener("mousemove", D), r.on("edge:mouseleave", () => {
-        l.setHoveredEdge(null), l.refreshEdgeStyles(), L.remove();
-      }), r.on("edge:click", ({ edge: f, e: M }) => {
-        M.target?.closest?.(".flow-canvas-edge-delete-tool") && t.editor.mode.value === "edit" && (L.remove(), t.editor.executeCommand({
-          id: T(),
+      }), r.on("edge:mouseenter", ({ edge: y, e: M }) => {
+        l.setHoveredEdge(y.id), l.refreshEdgeStyles(), t.editor.mode.value === "edit" && T.canShowEdgeTool() && Z.show(y.id, M);
+      }), p = (y) => Z.move(y), r.container.addEventListener("mousemove", p), r.on("edge:mouseleave", () => {
+        l.setHoveredEdge(null), l.refreshEdgeStyles(), Z.remove();
+      }), r.on("edge:click", ({ edge: y, e: M }) => {
+        M.target?.closest?.(".flow-canvas-edge-delete-tool") && t.editor.mode.value === "edit" && (Z.remove(), t.editor.executeCommand({
+          id: $(),
           source: "user:toolbar",
           label: "删除连线",
           timestamp: Date.now(),
-          commands: [{ type: "edge.remove", edgeId: f.id }]
+          commands: [{ type: "edge.remove", edgeId: y.id }]
         }));
-      }), n.value?.addEventListener("keydown", ue), l.syncFlowModel(t.editor.flowModel.value), le(
+      }), n.value?.addEventListener("keydown", oe), l.syncFlowModel(t.editor.flowModel.value), ge(
         () => t.editor.flowModel.value,
-        (f) => l.syncFlowModel(f)
-      ), le(
+        (y) => l.syncFlowModel(y)
+      ), ge(
         () => t.editor.selectionMode.value,
-        (f) => {
-          if (C?.(), C = null, f) {
-            Ce(!1), J.enableRubberband?.();
+        (y) => {
+          if (c?.(), c = null, y) {
+            re(!1), W.enableRubberband?.();
             const M = () => {
-              r.container.removeEventListener("mouseup", M), C = null, setTimeout(() => {
+              r.container.removeEventListener("mouseup", M), c = null, setTimeout(() => {
                 t.editor.selectionMode.value && t.editor.setSelectionMode(!1);
               }, 50);
             };
-            r.container.addEventListener("mouseup", M), C = () => r.container.removeEventListener("mouseup", M);
+            r.container.addEventListener("mouseup", M), c = () => r.container.removeEventListener("mouseup", M);
           } else
-            J.disableRubberband?.(), Ce(!0);
+            W.disableRubberband?.(), re(!0);
         }
-      ), le(
+      ), ge(
         () => t.editor.mode.value,
-        (f) => {
-          const M = f === "edit";
-          Ce(!0), M ? J.enableSelection?.() : J.disableSelection?.();
+        (y) => {
+          const M = y === "edit";
+          re(!0), M ? W.enableSelection?.() : W.disableSelection?.();
         }
       );
-    }), Se(() => {
-      d.cleanup(), y && clearTimeout(y), L?.remove(), C?.(), D && r?.container?.removeEventListener("mousemove", D), n.value?.removeEventListener("keydown", ue), t.editor._pluginManager.detachRuntime(), t.editor.api.value = null;
-      for (const x of Object.keys(t.editor.extendedApi))
-        delete t.editor.extendedApi[x];
-      c?.dispose(), l?.dispose(), a?.dispose(), r?.dispose();
-    }), (x, E) => (k(), S("div", {
+    }), Re(() => {
+      d.cleanup(), w && clearTimeout(w), Z?.remove(), c?.(), p && r?.container?.removeEventListener("mousemove", p), n.value?.removeEventListener("keydown", oe), t.editor._pluginManager.detachRuntime(), t.editor.api.value = null;
+      for (const v of Object.keys(t.editor.extendedApi))
+        delete t.editor.extendedApi[v];
+      f?.dispose(), l?.dispose(), a?.dispose(), r?.dispose();
+    }), (v, h) => (I(), N("div", {
       ref_key: "rootRef",
       ref: n,
       class: "flow-canvas-runtime-core",
       tabindex: "0"
     }, [
-      A("div", {
+      R("div", {
         ref_key: "containerRef",
         ref: i,
         class: "flow-canvas-runtime-core__graph"
       }, null, 512),
-      A("div", Nt, [
-        (k(!0), S(ie, null, ye(Y.value, (w) => (k(), S("div", {
-          key: `badge-${w.nodeId}`,
+      R("div", jt, [
+        (I(!0), N(de, null, Ee(z.value, (u) => (I(), N("div", {
+          key: `badge-${u.nodeId}`,
           class: "flow-canvas-runtime-core__badge",
-          style: me({ left: `${w.x}px`, top: `${w.y}px`, backgroundColor: w.badge.color })
-        }, de(w.badge.text), 5))), 128)),
-        G.value ? (k(), ve(St, {
+          style: Ie({ left: `${u.x}px`, top: `${u.y}px`, backgroundColor: u.badge.color })
+        }, he(u.badge.text), 5))), 128)),
+        q.value ? (I(), Ce(zt, {
           key: 0,
           ref_key: "quickAddPopoverRef",
-          ref: se,
-          node: G.value.node,
-          "port-position": G.value.portPosition,
-          "tooltip-text": X.value.tooltipText,
-          onOpen: ee,
-          onStartDrag: ke,
-          onMouseenter: v,
-          onMouseleave: I
+          ref: X,
+          node: q.value.node,
+          "port-position": q.value.portPosition,
+          "tooltip-text": G.value.tooltipText,
+          onOpen: ye,
+          onStartDrag: se,
+          onMouseenter: O,
+          onMouseleave: K
         }, {
-          default: Ne(() => [
-            fe(x.$slots, "quick-add-panel", {
-              node: G.value.node,
+          default: $e(() => [
+            me(v.$slots, "quick-add-panel", {
+              node: q.value.node,
               api: s.editor.api.value,
-              insertNodeToRight: (w) => te(G.value.node.id, w),
-              closePopover: () => se.value?.closePopover()
+              insertNodeToRight: (u) => ae(q.value.node.id, u),
+              closePopover: () => X.value?.closePopover()
             }, void 0, !0)
           ]),
           _: 3
-        }, 8, ["node", "port-position", "tooltip-text"])) : H("", !0),
-        Q.value ? (k(), ve(Ct, {
+        }, 8, ["node", "port-position", "tooltip-text"])) : F("", !0),
+        j.value ? (I(), Ce($t, {
           key: 1,
-          node: Q.value.node,
-          position: Q.value.position,
-          config: q.value,
-          behavior: Q.value.behavior,
-          "actions-offset": Q.value.behavior.actionsOffset,
-          onAction: Z,
-          onMouseenter: Ue(u),
-          onMouseleave: N
-        }, null, 8, ["node", "position", "config", "behavior", "actions-offset", "onMouseenter"])) : H("", !0)
+          node: j.value.node,
+          position: j.value.position,
+          config: _.value,
+          behavior: j.value.behavior,
+          "actions-offset": j.value.behavior.actionsOffset,
+          onAction: xe,
+          onMouseenter: et(g),
+          onMouseleave: S
+        }, null, 8, ["node", "position", "config", "behavior", "actions-offset", "onMouseenter"])) : F("", !0)
       ])
     ], 512));
   }
-}), ao = /* @__PURE__ */ ae(Dt, [["__scopeId", "data-v-96013976"]]), _t = { class: "flow-canvas-node-palette" }, Pt = ["data-node-type"], At = { class: "flow-canvas-node-palette__item-label" }, Tt = /* @__PURE__ */ re({
+}), wo = /* @__PURE__ */ ue(Gt, [["__scopeId", "data-v-7e8e2569"]]), Ht = { class: "flow-canvas-node-palette" }, Ft = ["data-node-type"], qt = { class: "flow-canvas-node-palette__item-label" }, Ut = /* @__PURE__ */ ce({
   __name: "canvas-node-palette",
   props: {
     editor: {},
     items: {}
   },
   setup(s) {
-    const e = s, t = z(), o = j(() => e.items ? e.items : Object.keys(e.editor.schema.nodeTypes).map((n) => ({
+    const e = s, t = L(), o = H(() => e.items ? e.items : Object.keys(e.editor.schema.nodeTypes).map((n) => ({
       type: n,
       label: n.charAt(0).toUpperCase() + n.slice(1)
     })));
-    return le(
+    return ge(
       [() => e.editor.api.value, o, t],
       ([n, i, r], l, a) => {
         if (!n || !r) return;
-        const c = [];
+        const f = [];
         for (const d of i) {
-          const g = r.querySelector(`[data-node-type="${d.type}"]`);
-          if (!g) continue;
-          const p = n.registerDndSource(g, () => ({
-            id: T(),
+          const b = r.querySelector(`[data-node-type="${d.type}"]`);
+          if (!b) continue;
+          const m = n.registerDndSource(b, () => ({
+            id: $(),
             type: d.type,
             label: d.label,
             position: { x: 0, y: 0 }
           }));
-          c.push(p);
+          f.push(m);
         }
         a(() => {
-          for (const d of c) d();
+          for (const d of f) d();
         });
       },
       { flush: "post" }
-    ), (n, i) => (k(), S("div", _t, [
-      A("div", {
+    ), (n, i) => (I(), N("div", Ht, [
+      R("div", {
         ref_key: "listRef",
         ref: t,
         class: "flow-canvas-node-palette__list"
       }, [
-        (k(!0), S(ie, null, ye(o.value, (r) => (k(), S("div", {
+        (I(!0), N(de, null, Ee(o.value, (r) => (I(), N("div", {
           key: r.type,
           class: "flow-canvas-node-palette__item",
           "data-node-type": r.type
         }, [
-          r.icon ? (k(), S("i", {
+          r.icon ? (I(), N("i", {
             key: 0,
-            class: W([r.icon, "flow-canvas-node-palette__item-icon"])
-          }, null, 2)) : H("", !0),
-          A("span", At, de(r.label), 1)
-        ], 8, Pt))), 128))
+            class: Q([r.icon, "flow-canvas-node-palette__item-icon"])
+          }, null, 2)) : F("", !0),
+          R("span", qt, he(r.label), 1)
+        ], 8, Ft))), 128))
       ], 512)
     ]));
   }
-}), Rt = /* @__PURE__ */ ae(Tt, [["__scopeId", "data-v-300314b7"]]), $t = { class: "flow-canvas-layout" }, Lt = { class: "flow-canvas-layout__main" }, Bt = { class: "flow-canvas-layout__content" }, zt = {
+}), Vt = /* @__PURE__ */ ue(Ut, [["__scopeId", "data-v-300314b7"]]), Wt = { class: "flow-canvas-layout" }, Qt = { class: "flow-canvas-layout__main" }, Xt = { class: "flow-canvas-layout__content" }, Kt = {
   key: 0,
   class: "flow-canvas-layout__footer"
-}, Ot = /* @__PURE__ */ re({
+}, Yt = /* @__PURE__ */ ce({
   __name: "canvas-layout",
   props: {
     sidebarCollapsed: { type: Boolean, default: !1 },
@@ -2150,34 +2283,34 @@ const xt = { class: "flow-canvas-node-actions__bar" }, kt = /* @__PURE__ */ re({
   },
   emits: ["update:sidebarCollapsed"],
   setup(s) {
-    return (e, t) => (k(), S("div", $t, [
-      !s.hideSidebar && (e.$slots.sidebar || s.editor) ? (k(), S("aside", {
+    return (e, t) => (I(), N("div", Wt, [
+      !s.hideSidebar && (e.$slots.sidebar || s.editor) ? (I(), N("aside", {
         key: 0,
-        class: W(["flow-canvas-layout__sidebar", { "is-collapsed": s.sidebarCollapsed }]),
-        style: me({ width: s.sidebarCollapsed ? "0px" : `${s.sidebarWidth}px` })
+        class: Q(["flow-canvas-layout__sidebar", { "is-collapsed": s.sidebarCollapsed }]),
+        style: Ie({ width: s.sidebarCollapsed ? "0px" : `${s.sidebarWidth}px` })
       }, [
-        fe(e.$slots, "sidebar", {}, () => [
-          s.editor ? (k(), ve(Rt, {
+        me(e.$slots, "sidebar", {}, () => [
+          s.editor ? (I(), Ce(Vt, {
             key: 0,
             editor: s.editor,
             items: s.paletteItems
-          }, null, 8, ["editor", "items"])) : H("", !0)
+          }, null, 8, ["editor", "items"])) : F("", !0)
         ], !0)
-      ], 6)) : H("", !0),
-      A("div", Lt, [
-        A("div", Bt, [
-          fe(e.$slots, "default", {}, void 0, !0)
+      ], 6)) : F("", !0),
+      R("div", Qt, [
+        R("div", Xt, [
+          me(e.$slots, "default", {}, void 0, !0)
         ]),
-        !s.hideFooter && e.$slots.footer ? (k(), S("div", zt, [
-          fe(e.$slots, "footer", {}, void 0, !0)
-        ])) : H("", !0)
+        !s.hideFooter && e.$slots.footer ? (I(), N("div", Kt, [
+          me(e.$slots, "footer", {}, void 0, !0)
+        ])) : F("", !0)
       ])
     ]));
   }
-}), lo = /* @__PURE__ */ ae(Ot, [["__scopeId", "data-v-26f35b6b"]]), jt = ["undo", "redo"];
-function Ht(s) {
+}), xo = /* @__PURE__ */ ue(Yt, [["__scopeId", "data-v-26f35b6b"]]), Zt = ["undo", "redo"];
+function Jt(s) {
   const e = new Set(s?.include), t = /* @__PURE__ */ new Set([
-    ...jt.filter((a) => !e.has(a)),
+    ...Zt.filter((a) => !e.has(a)),
     ...s?.exclude ?? []
   ]), o = [
     {
@@ -2269,13 +2402,13 @@ function Ht(s) {
     (a) => !t.has(a.type)
   ), ...i, ...r];
 }
-const Ft = { class: "flow-canvas-toolbar" }, Ut = {
+const eo = { class: "flow-canvas-toolbar" }, to = {
   key: 0,
   class: "flow-canvas-toolbar__separator"
-}, qt = { class: "flow-canvas-toolbar__group" }, Gt = {
+}, oo = { class: "flow-canvas-toolbar__group" }, no = {
   key: 0,
   class: "flow-canvas-toolbar__zoom-display"
-}, Vt = ["data-description", "disabled", "onClick"], Wt = ["textContent"], Qt = /* @__PURE__ */ re({
+}, so = ["data-description", "disabled", "onClick"], io = ["textContent"], ro = /* @__PURE__ */ ce({
   __name: "canvas-toolbar",
   props: {
     items: {},
@@ -2283,42 +2416,42 @@ const Ft = { class: "flow-canvas-toolbar" }, Ut = {
     editor: {}
   },
   setup(s) {
-    const e = s, t = j(() => e.items ? e.items : Ht({ exclude: e.exclude })), o = z(1);
+    const e = s, t = H(() => e.items ? e.items : Jt({ exclude: e.exclude })), o = L(1);
     let n = null;
-    le(
+    ge(
       () => e.editor.api.value,
-      (u) => {
-        n?.(), n = null, u && (o.value = u.getZoom(), n = u.onGraphEvent("scale", () => {
-          o.value = u.getZoom();
+      (g) => {
+        n?.(), n = null, g && (o.value = g.getZoom(), n = g.onGraphEvent("scale", () => {
+          o.value = g.getZoom();
         }));
       },
       { immediate: !0 }
-    ), Le(() => {
+    ), Ue(() => {
       n?.();
     });
-    const i = j(() => `${Math.round(o.value * 100)}%`), r = j(() => e.editor.api.value ? {
+    const i = H(() => `${Math.round(o.value * 100)}%`), r = H(() => e.editor.api.value ? {
       api: e.editor.api.value,
       flowModel: e.editor.flowModel.value,
       history: e.editor.history,
       mode: e.editor.mode.value
     } : null);
-    function l(u) {
-      return u.visible === !1 ? !1 : typeof u.visible == "function" ? r.value ? u.visible(r.value) : !1 : !0;
+    function l(g) {
+      return g.visible === !1 ? !1 : typeof g.visible == "function" ? r.value ? g.visible(r.value) : !1 : !0;
     }
-    function a(u) {
-      return u.type === "select" ? e.editor.selectionMode.value : !1;
+    function a(g) {
+      return g.type === "select" ? e.editor.selectionMode.value : !1;
     }
-    function c(u) {
-      return !r.value || u.disabled === !0 ? !0 : typeof u.disabled == "function" ? u.disabled(r.value) : u.type === "undo" ? !e.editor.history.canUndo.value : u.type === "redo" ? !e.editor.history.canRedo.value : !1;
+    function f(g) {
+      return !r.value || g.disabled === !0 ? !0 : typeof g.disabled == "function" ? g.disabled(r.value) : g.type === "undo" ? !e.editor.history.canUndo.value : g.type === "redo" ? !e.editor.history.canRedo.value : !1;
     }
-    function d(u) {
-      if (!r.value || c(u)) return;
-      if (u.onClick) {
-        u.onClick(r.value);
+    function d(g) {
+      if (!r.value || f(g)) return;
+      if (g.onClick) {
+        g.onClick(r.value);
         return;
       }
-      const { api: N } = r.value;
-      switch (u.type) {
+      const { api: S } = r.value;
+      switch (g.type) {
         case "undo":
           e.editor.history.undo();
           break;
@@ -2326,23 +2459,23 @@ const Ft = { class: "flow-canvas-toolbar" }, Ut = {
           e.editor.history.redo();
           break;
         case "zoom-in":
-          N.zoomIn(), o.value = N.getZoom();
+          S.zoomIn(), o.value = S.getZoom();
           break;
         case "zoom-out":
-          N.zoomOut(), o.value = N.getZoom();
+          S.zoomOut(), o.value = S.getZoom();
           break;
         case "fit":
-          N.zoomToFit();
+          S.zoomToFit();
           break;
         case "reset":
-          N.zoomTo(1), N.scrollToOrigin(), o.value = 1;
+          S.zoomTo(1), S.scrollToOrigin(), o.value = 1;
           break;
         case "export":
-          N.exportAsImage().then((b) => {
-            const y = URL.createObjectURL(b), m = document.createElement("a");
-            m.href = y, m.download = "canvas-export.png", m.click(), URL.revokeObjectURL(y);
-          }).catch((b) => {
-            console.warn("[flow-canvas] Export failed:", b);
+          S.exportAsImage().then((k) => {
+            const w = URL.createObjectURL(k), x = document.createElement("a");
+            x.href = w, x.download = "canvas-export.png", x.click(), URL.revokeObjectURL(w);
+          }).catch((k) => {
+            console.warn("[flow-canvas] Export failed:", k);
           });
           break;
         case "select":
@@ -2351,61 +2484,61 @@ const Ft = { class: "flow-canvas-toolbar" }, Ut = {
         case "search":
         case "auto-layout":
         case "minimap":
-          console.warn(`[flow-canvas] "${u.type}" toolbar item has no built-in handler. Provide an onClick callback.`);
+          console.warn(`[flow-canvas] "${g.type}" toolbar item has no built-in handler. Provide an onClick callback.`);
           break;
         default:
-          u.type !== "custom" && console.warn(`[flow-canvas] No default handler for toolbar type "${u.type}". Provide an onClick handler.`);
+          g.type !== "custom" && console.warn(`[flow-canvas] No default handler for toolbar type "${g.type}". Provide an onClick handler.`);
           break;
       }
     }
-    const g = j(() => t.value.filter(l)), p = j(() => {
-      const u = /* @__PURE__ */ new Map(), N = [];
-      for (const b of g.value) {
-        const y = b.group ?? "default";
-        u.has(y) || (u.set(y, []), N.push(y)), u.get(y).push(b);
+    const b = H(() => t.value.filter(l)), m = H(() => {
+      const g = /* @__PURE__ */ new Map(), S = [];
+      for (const k of b.value) {
+        const w = k.group ?? "default";
+        g.has(w) || (g.set(w, []), S.push(w)), g.get(w).push(k);
       }
-      return N.map((b) => ({ name: b, items: u.get(b) })).filter((b) => b.items.length > 0);
+      return S.map((k) => ({ name: k, items: g.get(k) })).filter((k) => k.items.length > 0);
     });
-    return (u, N) => (k(), S("div", Ft, [
-      (k(!0), S(ie, null, ye(p.value, (b, y) => (k(), S(ie, {
-        key: b.name
+    return (g, S) => (I(), N("div", eo, [
+      (I(!0), N(de, null, Ee(m.value, (k, w) => (I(), N(de, {
+        key: k.name
       }, [
-        y > 0 ? (k(), S("div", Ut)) : H("", !0),
-        A("div", qt, [
-          (k(!0), S(ie, null, ye(b.items, (m) => (k(), S(ie, {
-            key: m.id
+        w > 0 ? (I(), N("div", to)) : F("", !0),
+        R("div", oo, [
+          (I(!0), N(de, null, Ee(k.items, (x) => (I(), N(de, {
+            key: x.id
           }, [
-            m.type === "zoom-display" ? (k(), S("span", Gt, de(i.value), 1)) : (k(), S("button", {
+            x.type === "zoom-display" ? (I(), N("span", no, he(i.value), 1)) : (I(), N("button", {
               key: 1,
-              class: W(["flow-canvas-toolbar__btn", { "is-disabled": c(m), "is-active": a(m) }]),
-              "data-description": m.description,
-              disabled: c(m),
-              onClick: (R) => d(m)
+              class: Q(["flow-canvas-toolbar__btn", { "is-disabled": f(x), "is-active": a(x) }]),
+              "data-description": x.description,
+              disabled: f(x),
+              onClick: (A) => d(x)
             }, [
-              m.component ? (k(), ve(qe(m.component), { key: 0 })) : m.icon ? (k(), S("i", {
+              x.component ? (I(), Ce(tt(x.component), { key: 0 })) : x.icon ? (I(), N("i", {
                 key: 1,
-                class: W(m.icon)
-              }, null, 2)) : (k(), S("span", {
+                class: Q(x.icon)
+              }, null, 2)) : (I(), N("span", {
                 key: 2,
                 class: "flow-canvas-toolbar__text",
-                textContent: de(m.text ?? m.description ?? m.id)
-              }, null, 8, Wt))
-            ], 10, Vt))
+                textContent: he(x.text ?? x.description ?? x.id)
+              }, null, 8, io))
+            ], 10, so))
           ], 64))), 128))
         ])
       ], 64))), 128))
     ]));
   }
-}), co = /* @__PURE__ */ ae(Qt, [["__scopeId", "data-v-51b5c98a"]]), Xt = { class: "flow-canvas-default-node__ep-label" }, Kt = {
+}), ko = /* @__PURE__ */ ue(ro, [["__scopeId", "data-v-51b5c98a"]]), ao = { class: "flow-canvas-default-node__ep-label" }, lo = {
   key: 1,
   class: "flow-canvas-default-node__diamond"
-}, Yt = {
+}, co = {
   key: 2,
   class: "flow-canvas-default-node__task-label"
-}, Zt = /* @__PURE__ */ re({
+}, uo = /* @__PURE__ */ ce({
   __name: "default-node",
   setup(s) {
-    const t = Ge("getNode")?.(), o = j(() => t?.getData?.() ?? null), n = j(() => o.value?.label || o.value?.type || ""), i = {
+    const t = ot("getNode")?.(), o = H(() => t?.getData?.() ?? null), n = H(() => o.value?.label || o.value?.type || ""), i = {
       start: "canvas-kaishi",
       end: "canvas-stop",
       "parallel-gateway": "canvas-bingxingwangguan",
@@ -2417,28 +2550,28 @@ const Ft = { class: "flow-canvas-toolbar" }, Ut = {
       "branch-gateway",
       "converge-gateway",
       "conditional-parallel-gateway"
-    ]), a = j(() => {
+    ]), a = H(() => {
       const d = o.value?.type ?? "";
       return r.has(d) ? "endpoint" : l.has(d) ? "gateway" : "task";
-    }), c = j(() => i[o.value?.type ?? ""] ?? "");
-    return (d, g) => (k(), S("div", {
-      class: W(["flow-canvas-default-node", `is-${a.value}`])
+    }), f = H(() => i[o.value?.type ?? ""] ?? "");
+    return (d, b) => (I(), N("div", {
+      class: Q(["flow-canvas-default-node", `is-${a.value}`])
     }, [
-      a.value === "endpoint" ? (k(), S(ie, { key: 0 }, [
-        c.value ? (k(), S("i", {
+      a.value === "endpoint" ? (I(), N(de, { key: 0 }, [
+        f.value ? (I(), N("i", {
           key: 0,
-          class: W([["flow-canvas-icon", c.value], "flow-canvas-default-node__ep-icon"])
-        }, null, 2)) : H("", !0),
-        A("span", Xt, de(n.value), 1)
-      ], 64)) : a.value === "gateway" ? (k(), S("div", Kt, [
-        c.value ? (k(), S("i", {
+          class: Q([["flow-canvas-icon", f.value], "flow-canvas-default-node__ep-icon"])
+        }, null, 2)) : F("", !0),
+        R("span", ao, he(n.value), 1)
+      ], 64)) : a.value === "gateway" ? (I(), N("div", lo, [
+        f.value ? (I(), N("i", {
           key: 0,
-          class: W([["flow-canvas-icon", c.value], "flow-canvas-default-node__gw-icon"])
-        }, null, 2)) : H("", !0)
-      ])) : (k(), S("span", Yt, de(n.value), 1))
+          class: Q([["flow-canvas-icon", f.value], "flow-canvas-default-node__gw-icon"])
+        }, null, 2)) : F("", !0)
+      ])) : (I(), N("span", co, he(n.value), 1))
     ], 2));
   }
-}), Jt = /* @__PURE__ */ ae(Zt, [["__scopeId", "data-v-c88cdae7"]]), eo = {
+}), fo = /* @__PURE__ */ ue(uo, [["__scopeId", "data-v-c88cdae7"]]), po = {
   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 },
@@ -2451,43 +2584,44 @@ const Ft = { class: "flow-canvas-toolbar" }, Ut = {
     width: 64,
     height: 64
   }
-}, Re = (s, e) => ({
+}, Fe = (s, e) => ({
   stroke: e.hovered ? "#3a84ff" : "#abb5cc",
   strokeWidth: 2
-}), $e = {
-  attrs: {
-    line: {
-      stroke: "#abb5cc",
-      strokeWidth: 2,
-      targetMarker: { name: "block", width: 8, height: 8 }
-    }
-  }
-}, to = {
-  manhattan: {
-    router: { name: "manhattan", args: { padding: 10, maxDirectionChange: 90 } },
-    connector: { name: "rounded", args: { radius: 8 } },
-    style: Re,
-    x6EdgeConfig: $e
-  },
-  bezier: {
-    connector: { name: "smooth" },
-    style: Re,
-    x6EdgeConfig: $e
-  }
-};
-function uo(s) {
-  const e = s?.nodeTypes ?? eo, t = {}, o = [];
+});
+function qe() {
+  return {
+    attrs: {
+      line: {
+        stroke: "#abb5cc",
+        strokeWidth: 2,
+        targetMarker: { name: "block", width: 8, height: 8 }
+      }
+    }
+  };
+}
+function go() {
+  return {
+    manhattan: {
+      router: { name: "manhattan", args: { padding: 10, maxDirectionChange: 90 } },
+      connector: { name: "rounded", args: { radius: 8 } },
+      style: Fe,
+      x6EdgeConfig: qe()
+    },
+    bezier: {
+      connector: { name: "smooth" },
+      style: Fe,
+      x6EdgeConfig: qe()
+    }
+  };
+}
+function Co(s) {
+  const e = s?.nodeTypes ?? po, t = {}, o = [];
   for (const [r, l] of Object.entries(e)) {
-    const a = l.width ?? 150, c = l.height ?? 50;
+    const a = l.width ?? 150, f = l.height ?? 50;
     t[r] = {
-      component: Jt,
-      getSize: () => ({ width: a, height: c }),
-      getPorts: () => [
-        { id: "top", group: "top" },
-        { id: "right", group: "right" },
-        { id: "bottom", group: "bottom" },
-        { id: "left", group: "left" }
-      ]
+      component: fo,
+      getSize: () => ({ width: a, height: f }),
+      getPorts: () => Qe()
     }, o.push({
       type: r,
       label: l.label ?? r,
@@ -2495,7 +2629,7 @@ function uo(s) {
     });
   }
   const n = {
-    ...to,
+    ...go(),
     ...s?.edgeTypes
   }, i = s?.defaultEdgeType ?? "manhattan";
   return {
@@ -2503,7 +2637,7 @@ function uo(s) {
     paletteItems: o
   };
 }
-function fo(s) {
+function Eo(s) {
   return {
     name: "connection-validator",
     priority: 10,
@@ -2512,20 +2646,20 @@ function fo(s) {
         if (n.type !== "edge.add" && n.type !== "edge.reconnect") continue;
         const i = o.flowModel.value, r = n.type === "edge.add" ? n.edge.source.nodeId : n.source?.nodeId, l = n.type === "edge.add" ? n.edge.target.nodeId : n.target?.nodeId;
         if (!r || !l) continue;
-        const a = i.nodes[r], c = i.nodes[l];
-        if (!a || !c) continue;
-        const d = n.type === "edge.add" ? n.edge.source.portId : n.source?.portId, g = n.type === "edge.add" ? n.edge.target.portId : n.target?.portId, p = d ? a.ports?.find((m) => m.id === d) : void 0, u = g ? c.ports?.find((m) => m.id === g) : void 0, N = n.type === "edge.reconnect" ? n.edgeId : void 0, b = Object.values(i.edges).filter((m) => m.id !== N), y = s({
+        const a = i.nodes[r], f = i.nodes[l];
+        if (!a || !f) continue;
+        const d = n.type === "edge.add" ? n.edge.source.portId : n.source?.portId, b = n.type === "edge.add" ? n.edge.target.portId : n.target?.portId, m = d ? a.ports?.find((x) => x.id === d) : void 0, g = b ? f.ports?.find((x) => x.id === b) : void 0, S = n.type === "edge.reconnect" ? n.edgeId : void 0, k = Object.values(i.edges).filter((x) => x.id !== S), w = s({
           flowModel: i,
           sourceNode: a,
-          targetNode: c,
-          sourcePort: p,
-          targetPort: u,
-          existingEdges: b
+          targetNode: f,
+          sourcePort: m,
+          targetPort: g,
+          existingEdges: k
         });
-        if (!y.valid)
+        if (!w.valid)
           return {
             rejected: !0,
-            reason: y.reason ?? "Connection validation failed",
+            reason: w.reason ?? "Connection validation failed",
             code: "validation_failed"
           };
       }
@@ -2533,7 +2667,7 @@ function fo(s) {
     }
   };
 }
-function po(s) {
+function Io(s) {
   const { rubberband: e = !0, multiple: t = !0, movable: o = !0 } = s ?? {};
   return {
     name: "selection",
@@ -2553,7 +2687,7 @@ function po(s) {
     }
   };
 }
-function go(s) {
+function Mo(s) {
   const { tolerance: e = 10, color: t = "#3a84ff" } = s ?? {};
   let o = null;
   return {
@@ -2574,7 +2708,7 @@ function go(s) {
     }
   };
 }
-function ho(s) {
+function No(s) {
   let e = null;
   return {
     name: "minimap",
@@ -2612,7 +2746,7 @@ function ho(s) {
     }
   };
 }
-function vo() {
+function So() {
   let s = null, e = 0;
   return {
     name: "clipboard",
@@ -2624,22 +2758,22 @@ function vo() {
         if (!i.length) return !1;
         const r = o.flowModel.value, l = new Set(i.filter((d) => d.isNode()).map((d) => d.id)), a = [...l].map((d) => r.nodes[d]).filter(Boolean);
         if (!a.length) return !1;
-        const c = Object.values(r.edges).filter(
+        const f = Object.values(r.edges).filter(
           (d) => l.has(d.source.nodeId) && l.has(d.target.nodeId)
         );
-        return s = { nodes: a, edges: c }, e = 0, !0;
+        return s = { nodes: a, edges: f }, e = 0, !0;
       }
       if (n && t.key === "v") {
         if (!s?.nodes.length) return !1;
         e++;
         const i = e * 30, r = /* @__PURE__ */ new Map(), l = [];
         for (const a of s.nodes) {
-          const c = `${a.id}_cp${T().slice(0, 6)}`;
-          r.set(a.id, c), l.push({
+          const f = `${a.id}_cp${$().slice(0, 6)}`;
+          r.set(a.id, f), l.push({
             type: "node.add",
             node: {
               ...a,
-              id: c,
+              id: f,
               position: {
                 x: a.position.x + i,
                 y: a.position.y + i
@@ -2650,21 +2784,21 @@ function vo() {
           });
         }
         for (const a of s.edges) {
-          const c = r.get(a.source.nodeId), d = r.get(a.target.nodeId);
-          !c || !d || l.push({
+          const f = r.get(a.source.nodeId), d = r.get(a.target.nodeId);
+          !f || !d || l.push({
             type: "edge.add",
             edge: {
               ...a,
-              id: `${a.id}_cp${T().slice(0, 6)}`,
-              source: { ...a.source, nodeId: c },
+              id: `${a.id}_cp${$().slice(0, 6)}`,
+              source: { ...a.source, nodeId: f },
               target: { ...a.target, nodeId: d },
-              labels: a.labels?.map((g) => ({ ...g, id: `${g.id}_cp${T().slice(0, 6)}` })),
+              labels: a.labels?.map((b) => ({ ...b, id: `${b.id}_cp${$().slice(0, 6)}` })),
               payload: a.payload ? { ...a.payload } : {}
             }
           });
         }
         return l.length && o.executeCommand({
-          id: T(),
+          id: $(),
           source: "user:keyboard",
           label: "粘贴",
           timestamp: Date.now(),
@@ -2676,25 +2810,26 @@ function vo() {
   };
 }
 export {
-  K as CanvasConstraintError,
-  lo as CanvasLayout,
-  Rt as CanvasNodePalette,
-  ao as CanvasRuntime,
-  Qe as CanvasSchemaError,
-  co as CanvasToolbar,
-  Jt as DefaultNode,
-  Ct as NodeActionsToolbar,
-  St as NodeQuickAddPopover,
-  Me as applyCanvasCommand,
-  vo as clipboardPlugin,
-  fo as connectionValidatorPlugin,
-  lt as createCanvasHistory,
-  uo as createDefaultSchema,
-  Ht as createDefaultToolbarItems,
-  io as createEmptyFlowModel,
-  T as generateId,
-  ho as minimapPlugin,
-  po as selectionPlugin,
-  go as snaplinePlugin,
-  ro as useCanvasEditor
+  Y as CanvasConstraintError,
+  xo as CanvasLayout,
+  Vt as CanvasNodePalette,
+  wo as CanvasRuntime,
+  it as CanvasSchemaError,
+  ko as CanvasToolbar,
+  fo as DefaultNode,
+  $t as NodeActionsToolbar,
+  zt as NodeQuickAddPopover,
+  Te as applyCanvasCommand,
+  So as clipboardPlugin,
+  Eo as connectionValidatorPlugin,
+  go as createBuiltinEdgeTypes,
+  bt as createCanvasHistory,
+  Co as createDefaultSchema,
+  Jt as createDefaultToolbarItems,
+  mo as createEmptyFlowModel,
+  $ as generateId,
+  No as minimapPlugin,
+  Io as selectionPlugin,
+  Mo as snaplinePlugin,
+  bo as useCanvasEditor
 };