@blueking/flow-canvas 0.0.5 → 0.0.6

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { ref as q, computed as j, onScopeDispose as Je, defineComponent as fe, h as Re, watch as pe, onBeforeUnmount as Me, createElementBlock as R, openBlock as D, normalizeStyle as we, createElementVNode as U, createVNode as et, createCommentVNode as Y, normalizeClass as se, Transition as tt, withCtx as He, withModifiers as rt, createTextVNode as Le, renderSlot as Ee, onMounted as ot, createBlock as be, Fragment as me, renderList as Ie, toDisplayString as ge, unref as le, reactive as at, resolveDynamicComponent as lt, Teleport as dt, nextTick as Oe, inject as ct, createApp as ut } from "vue";
+import { ref as q, computed as j, onScopeDispose as Je, defineComponent as fe, h as Re, watch as pe, onBeforeUnmount as Me, createElementBlock as R, openBlock as D, normalizeStyle as we, createElementVNode as U, createVNode as et, createCommentVNode as Y, normalizeClass as se, Transition as tt, withCtx as He, withModifiers as rt, createTextVNode as Le, renderSlot as xe, onMounted as ot, createBlock as be, Fragment as me, renderList as Ie, toDisplayString as ge, unref as le, reactive as at, resolveDynamicComponent as lt, Teleport as dt, nextTick as Oe, inject as ct, createApp as ut } from "vue";
 import { Graph as ft } from "@antv/x6";
 import { register as gt } from "@antv/x6-vue-shape";
 import { Selection as pt } from "@antv/x6-plugin-selection";
@@ -47,9 +47,9 @@ function $e(s, e) {
     case "node.update":
       return bt(s, e.nodeId, e.patch);
     case "node.set-payload":
-      return xt(s, e.nodeId, e.path, e.value);
-    case "node.set-extensions":
       return Et(s, e.nodeId, e.path, e.value);
+    case "node.set-extensions":
+      return xt(s, e.nodeId, e.path, e.value);
     case "edge.add":
       return It(s, e.edge);
     case "edge.remove":
@@ -78,7 +78,7 @@ function ke(s, e) {
   if (!t) throw new ue(`Edge "${e}" does not exist`);
   return t;
 }
-function xe(s, e, t) {
+function Ee(s, e, t) {
   const o = s.nodes[e.nodeId];
   if (!o)
     throw new ue(`${t} node "${e.nodeId}" does not exist`);
@@ -111,18 +111,18 @@ function bt(s, e, t) {
   const o = Ce(s, e);
   return _e(s, e, { ...o, ...t, id: o.id });
 }
-function xt(s, e, t, o) {
+function Et(s, e, t, o) {
   const n = Ce(s, e), i = Ne(n.payload, t, o);
   return _e(s, e, { ...n, payload: i });
 }
-function Et(s, e, t, o) {
+function xt(s, e, t, o) {
   const n = Ce(s, e), i = Ne(n.extensions, t, o);
   return _e(s, e, { ...n, extensions: i });
 }
 function It(s, e) {
   if (s.edges[e.id])
     throw new ue(`Edge id "${e.id}" already exists`);
-  if (xe(s, e.source, "Source"), xe(s, e.target, "Target"), e.labels) {
+  if (Ee(s, e.source, "Source"), Ee(s, e.target, "Target"), e.labels) {
     const t = /* @__PURE__ */ new Set();
     for (const o of e.labels) {
       if (t.has(o.id))
@@ -139,11 +139,11 @@ function Ct(s, e) {
 }
 function kt(s, e, t, o) {
   const n = ke(s, e), i = t ?? n.source, r = o ?? n.target;
-  return xe(s, i, "Source"), xe(s, r, "Target"), De(s, e, { ...n, source: i, target: r });
+  return Ee(s, i, "Source"), Ee(s, r, "Target"), De(s, e, { ...n, source: i, target: r });
 }
 function St(s, e, t) {
   const o = ke(s, e), n = { ...o, ...t, id: o.id };
-  return t.source && xe(s, n.source, "Source"), t.target && xe(s, n.target, "Target"), De(s, e, n);
+  return t.source && Ee(s, n.source, "Source"), t.target && Ee(s, n.target, "Target"), De(s, e, n);
 }
 function Mt(s, e, t, o) {
   const n = ke(s, e), i = Ne(n.payload, t, o);
@@ -191,7 +191,7 @@ function Dt(s, e) {
   function p() {
     n.length = 0, i.length = 0, a();
   }
-  function x() {
+  function E() {
     return o.value;
   }
   function m(k) {
@@ -211,7 +211,7 @@ function Dt(s, e) {
       return i.map((k) => k.envelope);
     },
     clear: p,
-    createSnapshot: x,
+    createSnapshot: E,
     replaceFlowModel: m
   };
 }
@@ -390,7 +390,7 @@ function te() {
 const Ge = () => te();
 function gn(s) {
   const { schema: e, plugins: t = [], historyOptions: o } = s, n = s.idGenerator ?? Ge, i = { version: "1.0", ...s.initialFlowModel }, r = Dt(i, o), l = q(s.mode ?? "edit"), a = q(!1), h = q(null), u = q([]), g = {}, p = new Pt();
-  function x(T, P, G, K = "user:toolbar") {
+  function E(T, P, G, K = "user:toolbar") {
     const O = {
       id: `history-${Date.now()}`,
       source: K,
@@ -413,11 +413,11 @@ function gn(s) {
     execute: r.execute,
     undo() {
       const T = r.currentFlowModel.value, P = r.undo();
-      return P && x("撤销", T, P), P;
+      return P && E("撤销", T, P), P;
     },
     redo() {
       const T = r.currentFlowModel.value, P = r.redo();
-      return P && x("重做", T, P), P;
+      return P && E("重做", T, P), P;
     },
     get canUndo() {
       return r.canUndo;
@@ -435,7 +435,7 @@ function gn(s) {
     createSnapshot: r.createSnapshot,
     replaceFlowModel(T) {
       const P = r.currentFlowModel.value;
-      r.replaceFlowModel(T), x("替换 FlowModel", P, T, "system:replace");
+      r.replaceFlowModel(T), E("替换 FlowModel", P, T, "system:replace");
     }
   }, k = {
     flowModel: j(() => r.currentFlowModel.value),
@@ -898,8 +898,8 @@ class $t {
       const m = this.graph.isSelected?.(e) ?? !1, k = this.hoveredEdgeId === e.id, S = o.style(t, { selected: m, highlighted: n, hovered: k });
       l = S.stroke, a = S.strokeWidth, h = S.strokeDasharray;
     }
-    const u = !o?.style && n ? "#3a84ff" : void 0, g = i?.strokeColor, p = g ?? l ?? u, x = !!o?.style || this.prevEdgeDecorationColors.has(e.id) || this.defaultHighlightedEdgeIds.has(e.id) || this.prevEdgeStyleIds.has(e.id);
-    p ? this.setEdgeAttrIfChanged(e, "line/stroke", p) : x && this.restoreEdgeAttr(e, "line/stroke", "stroke"), o?.style ? (this.prevEdgeStyleIds.add(e.id), a ? this.setEdgeAttrIfChanged(e, "line/strokeWidth", a) : this.restoreEdgeAttr(e, "line/strokeWidth", "strokeWidth"), h ? this.setEdgeAttrIfChanged(e, "line/strokeDasharray", h) : this.restoreEdgeAttr(e, "line/strokeDasharray", "strokeDasharray")) : this.prevEdgeStyleIds.has(e.id) && (this.restoreEdgeAttr(e, "line/strokeWidth", "strokeWidth"), this.restoreEdgeAttr(e, "line/strokeDasharray", "strokeDasharray"), this.prevEdgeStyleIds.delete(e.id)), g ? this.prevEdgeDecorationColors.add(e.id) : this.prevEdgeDecorationColors.delete(e.id), u ? this.defaultHighlightedEdgeIds.add(e.id) : this.defaultHighlightedEdgeIds.delete(e.id);
+    const u = !o?.style && n ? "#3a84ff" : void 0, g = i?.strokeColor, p = g ?? l ?? u, E = !!o?.style || this.prevEdgeDecorationColors.has(e.id) || this.defaultHighlightedEdgeIds.has(e.id) || this.prevEdgeStyleIds.has(e.id);
+    p ? this.setEdgeAttrIfChanged(e, "line/stroke", p) : E && this.restoreEdgeAttr(e, "line/stroke", "stroke"), o?.style ? (this.prevEdgeStyleIds.add(e.id), a ? this.setEdgeAttrIfChanged(e, "line/strokeWidth", a) : this.restoreEdgeAttr(e, "line/strokeWidth", "strokeWidth"), h ? this.setEdgeAttrIfChanged(e, "line/strokeDasharray", h) : this.restoreEdgeAttr(e, "line/strokeDasharray", "strokeDasharray")) : this.prevEdgeStyleIds.has(e.id) && (this.restoreEdgeAttr(e, "line/strokeWidth", "strokeWidth"), this.restoreEdgeAttr(e, "line/strokeDasharray", "strokeDasharray"), this.prevEdgeStyleIds.delete(e.id)), g ? this.prevEdgeDecorationColors.add(e.id) : this.prevEdgeDecorationColors.delete(e.id), u ? this.defaultHighlightedEdgeIds.add(e.id) : this.defaultHighlightedEdgeIds.delete(e.id);
   }
 }
 class Bt {
@@ -1105,7 +1105,7 @@ function zt({
   resolveNodeShape: u
 }) {
   const g = r ?? Ge;
-  let p = [], x = [], m = null, k = !1, S = null;
+  let p = [], E = [], m = null, k = !1, S = null;
   async function T() {
     if (k) return m;
     k = !0;
@@ -1133,7 +1133,7 @@ function zt({
     S = null;
     const c = f.getPosition();
     s.removeNode(f.id);
-    const { _dndSessionId: v, ...b } = d, E = b.id || g("node");
+    const { _dndSessionId: v, ...b } = d, x = b.id || g("node");
     t({
       id: te(),
       source: "user:drag",
@@ -1142,7 +1142,7 @@ function zt({
       commands: [
         {
           type: "node.add",
-          node: { ...b, id: E, position: { x: c.x, y: c.y } }
+          node: { ...b, id: x, position: { x: c.x, y: c.y } }
         }
       ]
     });
@@ -1263,13 +1263,13 @@ function zt({
       const c = async (v) => {
         const b = await T();
         if (!b) return;
-        const E = te();
-        S = E;
+        const x = te();
+        S = x;
         const B = d(), X = u?.(B.type), C = s.createNode({
           width: X?.width ?? 154,
           height: X?.height ?? 54,
           shape: X?.shapeName ?? "rect",
-          data: { ...B, _dndSessionId: E }
+          data: { ...B, _dndSessionId: x }
         });
         b.start(C, v);
       };
@@ -1286,9 +1286,9 @@ function zt({
       if (!c?.isNode()) return;
       const v = c, b = s.findViewByCell(v);
       if (!b) return;
-      const E = b.findPortElem(d, "circle") ?? b.findPortElem(d);
-      if (!E) return;
-      const X = (E.matches?.("[magnet]") ? E : E.querySelector?.("[magnet]")) ?? E, C = X.getBoundingClientRect(), L = C.left + C.width / 2, w = C.top + C.height / 2, A = new MouseEvent("mousedown", {
+      const x = b.findPortElem(d, "circle") ?? b.findPortElem(d);
+      if (!x) return;
+      const X = (x.matches?.("[magnet]") ? x : x.querySelector?.("[magnet]")) ?? x, C = X.getBoundingClientRect(), L = C.left + C.width / 2, w = C.top + C.height / 2, A = new MouseEvent("mousedown", {
         clientX: L,
         clientY: w,
         button: 0,
@@ -1299,10 +1299,10 @@ function zt({
       X.dispatchEvent(A);
     },
     async exportAsImage(f) {
-      const { domToBlob: d } = await import("modern-screenshot"), c = f?.padding ?? 20, v = f?.backgroundColor ?? s.options.background?.color ?? "#ffffff", b = s.zoom(), E = s.translate(), B = s.getContentBBox(), X = B.width / b, C = B.height / b;
+      const { domToBlob: d } = await import("modern-screenshot"), c = f?.padding ?? 20, v = f?.backgroundColor ?? s.options.background?.color ?? "#ffffff", b = s.zoom(), x = s.translate(), B = s.getContentBBox(), X = B.width / b, C = B.height / b;
       if (X === 0 || C === 0)
         return new Blob();
-      const L = (B.x - E.tx) / b, w = (B.y - E.ty) / b, A = Math.ceil(X + c * 2), H = Math.ceil(C + c * 2), Z = document.createElement("div");
+      const L = (B.x - x.tx) / b, w = (B.y - x.ty) / b, A = Math.ceil(X + c * 2), H = Math.ceil(C + c * 2), Z = document.createElement("div");
       Z.style.cssText = "position:fixed;left:-99999px;top:0;pointer-events:none;";
       const V = s.container.cloneNode(!0);
       V.style.width = `${A}px`, V.style.height = `${H}px`, V.style.overflow = "visible";
@@ -1330,13 +1330,13 @@ function zt({
       }
     },
     highlightNodes(f) {
-      p = f, h?.(p, x);
+      p = f, h?.(p, E);
     },
     highlightEdges(f) {
-      x = f, h?.(p, x);
+      E = f, h?.(p, E);
     },
     clearHighlight() {
-      p = [], x = [], h?.([], []);
+      p = [], E = [], h?.([], []);
     },
     overlay: e,
     getContextMenuItems(f) {
@@ -1350,10 +1350,10 @@ function zt({
           envelope: { id: "", source: "user:toolbar", timestamp: Date.now(), commands: [] },
           error: { code: "constraint_violated", reason: `Source node "${f}" not found`, source: "api" }
         };
-      const E = c?.gap ?? l ?? Ut, B = c?.direction ?? "right", X = o.nodeTypes[b.type], C = o.nodeTypes[d.type], L = X?.getSize(b) ?? { width: 154, height: 54 }, w = C?.getSize({ ...d, position: { x: 0, y: 0 } }) ?? {
+      const x = c?.gap ?? l ?? Ut, B = c?.direction ?? "right", X = o.nodeTypes[b.type], C = o.nodeTypes[d.type], L = X?.getSize(b) ?? { width: 154, height: 54 }, w = C?.getSize({ ...d, position: { x: 0, y: 0 } }) ?? {
         width: 154,
         height: 54
-      }, A = W(B, b, L, w, E), H = d.id || g("node"), Z = { ...d, id: H, position: A }, V = [{ type: "node.add", node: Z }], ee = z(B, w, E), Q = { x: A.x, y: A.y, width: w.width, height: w.height };
+      }, A = W(B, b, L, w, x), H = d.id || g("node"), Z = { ...d, id: H, position: A }, V = [{ type: "node.add", node: Z }], ee = z(B, w, x), Q = { x: A.x, y: A.y, width: w.width, height: w.height };
       for (const [ie, ne] of Object.entries(v.nodes)) {
         if (ie === f || ie === H) continue;
         const I = o.nodeTypes[ne.type]?.getSize(ne) ?? { width: 154, height: 54 }, _ = Q.x < ne.position.x + I.width && Q.x + Q.width > ne.position.x, F = Q.y < ne.position.y + I.height && Q.y + Q.height > ne.position.y;
@@ -1448,13 +1448,13 @@ function je(s, e) {
   const i = 50, r = t / i;
   let l = 0;
   for (let g = 0; g <= i; g++) {
-    const p = g * r, x = s.getPointAtLength(p), m = (x.x - e.x) ** 2 + (x.y - e.y) ** 2;
-    m < n && (n = m, o = x, l = p);
+    const p = g * r, E = s.getPointAtLength(p), m = (E.x - e.x) ** 2 + (E.y - e.y) ** 2;
+    m < n && (n = m, o = E, l = p);
   }
   const a = Math.max(0, l - r), h = Math.min(t, l + r), u = (h - a) / 20;
   for (let g = a; g <= h; g += u) {
-    const p = s.getPointAtLength(g), x = (p.x - e.x) ** 2 + (p.y - e.y) ** 2;
-    x < n && (n = x, o = p, l = g);
+    const p = s.getPointAtLength(g), E = (p.x - e.x) ** 2 + (p.y - e.y) ** 2;
+    E < n && (n = E, o = p, l = g);
   }
   return { x: o.x, y: o.y, length: l, totalLength: t };
 }
@@ -1488,7 +1488,7 @@ function Wt(s) {
     if (!g) return;
     const p = g.container.querySelector("path");
     if (!p) return;
-    const x = s.clientToLocal(a.clientX, a.clientY), m = je(p, x);
+    const E = s.clientToLocal(a.clientX, a.clientY), m = je(p, E);
     if (We(m.length, m.totalLength) || Ve(g.container, a.clientX, a.clientY)) return;
     const k = Xe();
     k.setAttribute("transform", `translate(${m.x}, ${m.y})`), g.container.appendChild(k), e = k;
@@ -1505,14 +1505,14 @@ function Wt(s) {
     if (!u) return;
     const g = u.container.querySelector("path");
     if (!g) return;
-    const p = s.clientToLocal(l.clientX, l.clientY), x = je(g, p);
-    if (We(x.length, x.totalLength) || Ve(u.container, l.clientX, l.clientY))
+    const p = s.clientToLocal(l.clientX, l.clientY), E = je(g, p);
+    if (We(E.length, E.totalLength) || Ve(u.container, l.clientX, l.clientY))
       e && e.setAttribute("display", "none");
     else if (e)
-      e.removeAttribute("display"), e.setAttribute("transform", `translate(${x.x}, ${x.y})`);
+      e.removeAttribute("display"), e.setAttribute("transform", `translate(${E.x}, ${E.y})`);
     else {
       const m = Xe();
-      m.setAttribute("transform", `translate(${x.x}, ${x.y})`), u.container.appendChild(m), e = m;
+      m.setAttribute("transform", `translate(${E.x}, ${E.y})`), u.container.appendChild(m), e = m;
     }
   }
   function i() {
@@ -1528,8 +1528,8 @@ function Vt(s) {
   function o(u) {
     const g = u ? "visible" : "hidden";
     for (const p of s.getNodes())
-      for (const x of p.getPorts())
-        p.setPortProp(x.id, "attrs/circle/visibility", g);
+      for (const E of p.getPorts())
+        p.setPortProp(E.id, "attrs/circle/visibility", g);
   }
   function n(u) {
     if (!e)
@@ -1545,9 +1545,9 @@ function Vt(s) {
     if (!u.getTargetCell())
       if (e = u.id, g?.size)
         for (const p of s.getNodes()) {
-          const x = g.has(p.id) ? "hidden" : "visible";
+          const E = g.has(p.id) ? "hidden" : "visible";
           for (const m of p.getPorts())
-            p.setPortProp(m.id, "attrs/circle/visibility", x);
+            p.setPortProp(m.id, "attrs/circle/visibility", E);
         }
       else
         o(!0);
@@ -1576,7 +1576,7 @@ function Ye(s) {
 function Xt(s) {
   const { editor: e, nodeHover: t, isSelectionModeActive: o, viewportVersion: n, getNodeBehavior: i, getInsertGap: r } = s, { isDraggingNode: l } = s, a = q(null), h = q(!1);
   let u = null, g = null, p = null;
-  const x = j(() => ({
+  const E = j(() => ({
     enabled: !0,
     portGroup: "right",
     ...s.quickAddProp.value
@@ -1603,7 +1603,7 @@ function Xt(s) {
     return qe(C, L?.getPorts);
   }
   function K(C, L) {
-    const w = x.value.getPort?.(C, L);
+    const w = E.value.getPort?.(C, L);
     if (!w) return null;
     const A = typeof w == "string" ? w : w.id;
     return L.find((H) => H.id === A) ?? null;
@@ -1640,27 +1640,27 @@ function Xt(s) {
     return O(C, w);
   }
   function z(C) {
-    const L = G(C), w = K(C, L) ?? L.find((H) => H.group === x.value.portGroup) ?? null;
+    const L = G(C), w = K(C, L) ?? L.find((H) => H.group === E.value.portGroup) ?? null;
     if (!w) return null;
     const A = W(C.id, w.id, w.group);
     return A ? { portId: w.id, portGroup: w.group, portPosition: A } : null;
   }
   function M(C) {
-    const L = z(C), w = x.value.insertDirection;
+    const L = z(C), w = E.value.insertDirection;
     if (typeof w == "function") {
       const A = w(C, L ? { id: L.portId, group: L.portGroup } : null);
       if (A) return A;
     } else if (w)
       return w;
-    return L && Ye(L.portGroup) ? L.portGroup : Ye(x.value.portGroup) ? x.value.portGroup : "right";
+    return L && Ye(L.portGroup) ? L.portGroup : Ye(E.value.portGroup) ? E.value.portGroup : "right";
   }
   function y(C) {
-    if (!x.value.enabled || e.mode.value !== "edit") return !1;
+    if (!E.value.enabled || e.mode.value !== "edit") return !1;
     const w = e.flowModel.value.nodes[C];
     return !w || i(w).quickAddEnabled === !1 ? !1 : !!z(w);
   }
   const f = j(() => {
-    if (n.value, !x.value.enabled) return null;
+    if (n.value, !E.value.enabled) return null;
     const C = a.value;
     if (!C || l.value || !e.api.value || e.mode.value !== "edit" || o.value)
       return null;
@@ -1698,7 +1698,7 @@ function Xt(s) {
       label: "快捷插入节点"
     }).status === "applied" && e._emitUiEvent({ type: "node.action.quick-insert", sourceNodeId: C, newNodeId: A }), s.closePopover();
   }
-  function E(C) {
+  function x(C) {
     if (!g) return;
     const L = g.getCellById(C);
     if (!L?.isNode()) return;
@@ -1721,7 +1721,7 @@ function Xt(s) {
           const H = C.getCellById(A);
           H?.isNode() && L(H);
         }
-        w && E(w);
+        w && x(w);
       },
       { flush: "sync" }
     );
@@ -1735,7 +1735,7 @@ function Xt(s) {
   return {
     quickAddNodeId: a,
     quickAddPopoverOpen: h,
-    mergedConfig: x,
+    mergedConfig: E,
     data: f,
     enter: S,
     leave: k,
@@ -1747,7 +1747,7 @@ function Xt(s) {
     handleStartDrag: v,
     handleInsert: b,
     isActiveForNode: y,
-    syncNodePorts: E,
+    syncNodePorts: x,
     attachRuntime: B,
     cleanup: X
   };
@@ -1799,7 +1799,7 @@ function Zt(s) {
     }
     return d;
   }
-  function x(y) {
+  function E(y) {
     const f = y.getTotalLength();
     if (f === 0) return [];
     const d = [];
@@ -1819,7 +1819,7 @@ function Zt(s) {
       height: Math.max(0, y.height - v * 2)
     };
     if (b.width <= 0 || b.height <= 0) return null;
-    const E = b.x + b.width, B = b.y + b.height;
+    const x = b.x + b.width, B = b.y + b.height;
     let X = null;
     const C = y.x + y.width / 2, L = y.y + y.height / 2;
     for (const w of t.getEdges()) {
@@ -1829,11 +1829,11 @@ function Zt(s) {
       if (!H) continue;
       const Z = H.findOne?.("path");
       if (!Z || typeof Z.getTotalLength != "function") continue;
-      const V = x(Z);
+      const V = E(Z);
       if (!V.length) continue;
       let ee = !1, Q = 1 / 0;
       for (const oe of V)
-        if (oe.x >= b.x && oe.x <= E && oe.y >= b.y && oe.y <= B) {
+        if (oe.x >= b.x && oe.x <= x && oe.y >= b.y && oe.y <= B) {
           const ie = oe.x - C, ne = oe.y - L, N = ie * ie + ne * ne;
           N < Q && (Q = N), ee = !0;
         }
@@ -1902,12 +1902,12 @@ function Zt(s) {
     if (!c) return y;
     const v = y.commands.find((H) => H.type === "node.add" || H.type === "node.move");
     if (!v) return y;
-    const b = v.type === "node.add" ? v.node.id : v.nodeId, E = v.type === "node.add" ? v.node : d.nodes[v.nodeId];
-    if (!E) return y;
+    const b = v.type === "node.add" ? v.node.id : v.nodeId, x = v.type === "node.add" ? v.node : d.nodes[v.nodeId];
+    if (!x) return y;
     const B = a.value;
-    if (B.isNodeInsertable && !B.isNodeInsertable(E, d))
+    if (B.isNodeInsertable && !B.isNodeInsertable(x, d))
       return y;
-    const X = p(b, E, B.incomingPortGroup), C = p(b, E, B.outgoingPortGroup), L = e.idGenerator("edge"), w = e.idGenerator("edge"), A = [
+    const X = p(b, x, B.incomingPortGroup), C = p(b, x, B.outgoingPortGroup), L = e.idGenerator("edge"), w = e.idGenerator("edge"), A = [
       { type: "edge.remove", edgeId: f },
       {
         type: "edge.add",
@@ -2083,11 +2083,11 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
   emits: ["action"],
   setup(s, { emit: e }) {
     const t = s, o = j(() => {
-      const g = t.actionsOffset?.x ?? 0, p = t.actionsOffset?.y ?? 0, x = g !== 0 || p !== 0;
+      const g = t.actionsOffset?.x ?? 0, p = t.actionsOffset?.y ?? 0, E = g !== 0 || p !== 0;
       return {
         left: `${t.position.x}px`,
         top: `${t.position.y}px`,
-        transform: x ? `translate(${g}px, ${p}px)` : "translateX(-100%)"
+        transform: E ? `translate(${g}px, ${p}px)` : "translateX(-100%)"
       };
     }), n = e, i = j(() => ({
       debug: {
@@ -2130,12 +2130,12 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
         i.value.debug.visible ? (D(), R("i", {
           key: 0,
           class: se(["flow-canvas-icon canvas-debug flow-canvas-node-actions__icon", { "is-disabled": i.value.debug.disabled }]),
-          onClick: p[0] || (p[0] = (x) => !i.value.debug.disabled && n("action", "debug", s.node.id))
+          onClick: p[0] || (p[0] = (E) => !i.value.debug.disabled && n("action", "debug", s.node.id))
         }, null, 2)) : Y("", !0),
         i.value.delete.visible ? (D(), R("i", {
           key: 1,
           class: se(["flow-canvas-icon canvas-shanchu flow-canvas-node-actions__icon", { "is-disabled": i.value.delete.disabled }]),
-          onClick: p[1] || (p[1] = (x) => !i.value.delete.disabled && n("action", "delete", s.node.id))
+          onClick: p[1] || (p[1] = (E) => !i.value.delete.disabled && n("action", "delete", s.node.id))
         }, null, 2)) : Y("", !0),
         r.value ? (D(), R("div", {
           key: 2,
@@ -2157,7 +2157,7 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
             i.value.copy.visible ? (D(), R("div", {
               key: 0,
               class: se(["flow-canvas-node-actions__dropdown-item", { "is-disabled": i.value.copy.disabled }]),
-              onClick: p[2] || (p[2] = (x) => !i.value.copy.disabled && n("action", "copy", s.node.id))
+              onClick: p[2] || (p[2] = (E) => !i.value.copy.disabled && n("action", "copy", s.node.id))
             }, [...p[6] || (p[6] = [
               U("i", { class: "flow-canvas-icon canvas-copy-fuzhi-2" }, null, -1),
               U("span", null, "复制", -1)
@@ -2165,7 +2165,7 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
             i.value.copyInsert.visible ? (D(), R("div", {
               key: 1,
               class: se(["flow-canvas-node-actions__dropdown-item", { "is-disabled": i.value.copyInsert.disabled }]),
-              onClick: p[3] || (p[3] = (x) => !i.value.copyInsert.disabled && n("action", "copy-insert", s.node.id))
+              onClick: p[3] || (p[3] = (E) => !i.value.copyInsert.disabled && n("action", "copy-insert", s.node.id))
             }, [...p[7] || (p[7] = [
               U("i", { class: "flow-canvas-icon canvas-fuzhibingcharu" }, null, -1),
               U("span", null, "复制并插入", -1)
@@ -2173,7 +2173,7 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
             i.value.disconnect.visible ? (D(), R("div", {
               key: 2,
               class: se(["flow-canvas-node-actions__dropdown-item", { "is-disabled": i.value.disconnect.disabled }]),
-              onClick: p[4] || (p[4] = (x) => !i.value.disconnect.disabled && n("action", "disconnect", s.node.id))
+              onClick: p[4] || (p[4] = (E) => !i.value.disconnect.disabled && n("action", "disconnect", s.node.id))
             }, [...p[8] || (p[8] = [
               U("i", { class: "flow-canvas-icon canvas-unlock-jiebang" }, null, -1),
               U("span", null, "断开连线", -1)
@@ -2203,9 +2203,9 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
     const o = s, n = t, i = q(), r = q(), l = q(!1), a = q(!1);
     let h = null, u = !1, g = null;
     function p(z) {
-      z.preventDefault(), z.stopPropagation(), h = { x: z.clientX, y: z.clientY }, u = !1, document.addEventListener("mousemove", x), document.addEventListener("mouseup", m);
+      z.preventDefault(), z.stopPropagation(), h = { x: z.clientX, y: z.clientY }, u = !1, document.addEventListener("mousemove", E), document.addEventListener("mouseup", m);
     }
-    function x(z) {
+    function E(z) {
       if (!h) return;
       const M = z.clientX - h.x, y = z.clientY - h.y;
       Math.sqrt(M * M + y * y) >= io && (u = !0, k(), n("start-drag", o.node.id));
@@ -2214,7 +2214,7 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
       k(), u || S(), h = null, u = !1;
     }
     function k() {
-      document.removeEventListener("mousemove", x), document.removeEventListener("mouseup", m);
+      document.removeEventListener("mousemove", E), document.removeEventListener("mouseup", m);
     }
     function S() {
       a.value ? P() : T();
@@ -2282,7 +2282,7 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
             onMouseenter: O,
             onMouseleave: W
           }, [
-            Ee(z.$slots, "default", {}, () => [
+            xe(z.$slots, "default", {}, () => [
               M[6] || (M[6] = U("div", { class: "flow-canvas-quick-add__default-content" }, "节点快捷操作面板", -1))
             ], !0)
           ], 544)) : Y("", !0)
@@ -2329,7 +2329,7 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
   emits: ["ui-event"],
   setup(s, { emit: e }) {
     const t = s, o = e, n = q(), i = q();
-    let r, l, a, h, u = null, g = null, p = null, x = null;
+    let r, l, a, h, u = null, g = null, p = null, E = null;
     const m = jt(), { hoveredNodeId: k, isDraggingNode: S } = m, T = m.enterOverlay, P = () => m.leaveOverlay(), G = q(0), K = q({ nodeIds: [], edgeIds: [] });
     function O(N) {
       const I = t.editor.api.value;
@@ -2401,7 +2401,7 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
       getNodeBehavior: O,
       getInsertGap: () => z.value.insertGap,
       closePopover: () => d.value?.closePopover()
-    }), v = c.data, b = c.handleOpen, E = c.handleClose, B = c.handleStartDrag, X = c.handleOverlayEnter, C = c.handleOverlayLeave, L = c.handleInsert, w = Zt({
+    }), v = c.data, b = c.handleOpen, x = c.handleClose, B = c.handleStartDrag, X = c.handleOverlayEnter, C = c.handleOverlayLeave, L = c.handleInsert, w = Zt({
       editor: t.editor,
       edgeDropProp: j(() => t.edgeDrop)
     }), A = Qt(t.editor);
@@ -2490,9 +2490,9 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
           return;
         }
         m.leave(180), c.quickAddPopoverOpen.value || c.leave();
-      }, n.value?.addEventListener("mousemove", p), x = () => {
+      }, n.value?.addEventListener("mousemove", p), E = () => {
         m.reset(), c.quickAddPopoverOpen.value || (c.quickAddNodeId.value = null);
-      }, n.value?.addEventListener("mouseleave", x), n.value?.addEventListener("keydown", V);
+      }, n.value?.addEventListener("mouseleave", E), n.value?.addEventListener("keydown", V);
     }
     function ne() {
       pe(
@@ -2563,7 +2563,7 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
       const _ = Gt(r), F = zt({
         graph: r,
         overlayManager: _,
-        executeCommand: ($) => t.editor.executeCommand($),
+        executeCommand: ($) => t.editor.executeCommand(w.tryExpandForEdgeDrop($)),
         schema: t.editor.schema,
         flowModel: t.editor.flowModel,
         getNodeBehavior: O,
@@ -2645,7 +2645,7 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
       };
       r.on("translate", Pe), r.on("scale", Pe), r.on("resize", Pe), ie(), l.syncFlowModel(t.editor.flowModel.value), ne();
     }), Me(() => {
-      m.cleanup(), c.cleanup(), w.cleanup(), u?.remove(), g && r?.container?.removeEventListener("mousemove", g), p && n.value?.removeEventListener("mousemove", p), x && n.value?.removeEventListener("mouseleave", x), n.value?.removeEventListener("keydown", V), t.editor._pluginManager.detachRuntime(), t.editor.api.value = null;
+      m.cleanup(), c.cleanup(), w.cleanup(), u?.remove(), g && r?.container?.removeEventListener("mousemove", g), p && n.value?.removeEventListener("mousemove", p), E && n.value?.removeEventListener("mouseleave", E), n.value?.removeEventListener("keydown", V), t.editor._pluginManager.detachRuntime(), t.editor.api.value = null;
       for (const N of Object.keys(t.editor.extendedApi))
         delete t.editor.extendedApi[N];
       h?.dispose(), l?.dispose(), a?.dispose(), r?.dispose();
@@ -2673,13 +2673,13 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
           node: le(v).node,
           "port-position": le(v).portPosition,
           onOpen: le(b),
-          onClose: le(E),
+          onClose: le(x),
           onStartDrag: le(B),
           onMouseenter: le(X),
           onMouseleave: le(C)
         }, {
           default: He(() => [
-            Ee(N.$slots, "quick-add-panel", {
+            xe(N.$slots, "quick-add-panel", {
               node: le(v).node,
               api: s.editor.api.value,
               insertNodeToRight: (_) => le(L)(le(v).node.id, _),
@@ -2708,7 +2708,7 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
       ])
     ], 2));
   }
-}), pn = /* @__PURE__ */ he(go, [["__scopeId", "data-v-ef705b28"]]), po = { class: "flow-canvas-node-palette" }, ho = ["data-node-type"], vo = { class: "flow-canvas-node-palette__item-label" }, yo = /* @__PURE__ */ fe({
+}), pn = /* @__PURE__ */ he(go, [["__scopeId", "data-v-5a3959fd"]]), po = { class: "flow-canvas-node-palette" }, ho = ["data-node-type"], vo = { class: "flow-canvas-node-palette__item-label" }, yo = /* @__PURE__ */ fe({
   __name: "canvas-node-palette",
   props: {
     editor: {},
@@ -2760,7 +2760,7 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
       ], 512)
     ]));
   }
-}), mo = /* @__PURE__ */ he(yo, [["__scopeId", "data-v-300314b7"]]), wo = { class: "flow-canvas-layout" }, bo = { class: "flow-canvas-layout__main" }, xo = { class: "flow-canvas-layout__content" }, Eo = {
+}), mo = /* @__PURE__ */ he(yo, [["__scopeId", "data-v-300314b7"]]), wo = { class: "flow-canvas-layout" }, bo = { class: "flow-canvas-layout__main" }, Eo = { class: "flow-canvas-layout__content" }, xo = {
   key: 0,
   class: "flow-canvas-layout__footer"
 }, Io = /* @__PURE__ */ fe({
@@ -2781,7 +2781,7 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
         class: se(["flow-canvas-layout__sidebar", { "is-collapsed": s.sidebarCollapsed }]),
         style: we({ width: s.sidebarCollapsed ? "0px" : `${s.sidebarWidth}px` })
       }, [
-        Ee(e.$slots, "sidebar", {}, () => [
+        xe(e.$slots, "sidebar", {}, () => [
           s.editor ? (D(), be(mo, {
             key: 0,
             editor: s.editor,
@@ -2790,11 +2790,11 @@ const to = { class: "flow-canvas-node-actions__bar" }, oo = /* @__PURE__ */ fe({
         ], !0)
       ], 6)) : Y("", !0),
       U("div", bo, [
-        U("div", xo, [
-          Ee(e.$slots, "default", {}, void 0, !0)
+        U("div", Eo, [
+          xe(e.$slots, "default", {}, void 0, !0)
         ]),
-        !s.hideFooter && e.$slots.footer ? (D(), R("div", Eo, [
-          Ee(e.$slots, "footer", {}, void 0, !0)
+        !s.hideFooter && e.$slots.footer ? (D(), R("div", xo, [
+          xe(e.$slots, "footer", {}, void 0, !0)
         ])) : Y("", !0)
       ])
     ]));
@@ -2907,13 +2907,13 @@ const So = { class: "flow-canvas-toolbar" }, Mo = {
     const i = s, r = j(() => {
       if (i.items) return i.items;
       const d = ko(), c = i.editor.toolbarItems.value, v = new Set(i.exclude ?? []), b = /* @__PURE__ */ new Map();
-      for (const E of d)
-        b.set(E.id, E);
-      for (const E of c) {
-        const B = b.get(E.id);
-        B ? b.set(E.id, { ...B, ...E, order: B.order, group: B.group }) : o(E) && b.set(E.id, E);
+      for (const x of d)
+        b.set(x.id, x);
+      for (const x of c) {
+        const B = b.get(x.id);
+        B ? b.set(x.id, { ...B, ...x, order: B.order, group: B.group }) : o(x) && b.set(x.id, x);
       }
-      return [...b.values()].filter((E) => E.type === "custom" || !e.has(E.type) ? !0 : !v.has(E.type)).sort((E, B) => (E.order ?? 0) - (B.order ?? 0));
+      return [...b.values()].filter((x) => x.type === "custom" || !e.has(x.type) ? !0 : !v.has(x.type)).sort((x, B) => (x.order ?? 0) - (B.order ?? 0));
     }), l = q(1), a = q(null), h = q(null), u = q(!1);
     let g = null;
     pe(
@@ -2926,12 +2926,12 @@ const So = { class: "flow-canvas-toolbar" }, Mo = {
       { immediate: !0 }
     );
     const p = at({ visible: !1, text: "", x: 0, y: 0 });
-    function x(d, c) {
+    function E(d, c) {
       if (!c.description) return;
       const b = d.currentTarget.getBoundingClientRect();
       p.text = c.description, p.visible = !0, Oe(() => {
-        const E = a.value?.offsetWidth ?? 0, B = a.value?.offsetHeight ?? 0;
-        p.x = b.left + b.width / 2 - E / 2, p.y = b.top - B - 6;
+        const x = a.value?.offsetWidth ?? 0, B = a.value?.offsetHeight ?? 0;
+        p.x = b.left + b.width / 2 - x / 2, p.y = b.top - B - 6;
       });
     }
     function m() {
@@ -3009,8 +3009,8 @@ const So = { class: "flow-canvas-toolbar" }, Mo = {
         case "export":
           if (u.value) break;
           u.value = !0, c.exportAsImage().then((v) => {
-            const b = URL.createObjectURL(v), E = document.createElement("a");
-            E.href = b, E.download = "canvas-export.png", E.click(), URL.revokeObjectURL(b);
+            const b = URL.createObjectURL(v), x = document.createElement("a");
+            x.href = b, x.download = "canvas-export.png", x.click(), URL.revokeObjectURL(b);
           }).catch((v) => {
             console.warn("[flow-canvas] Export failed:", v);
           }).finally(() => {
@@ -3046,31 +3046,31 @@ const So = { class: "flow-canvas-toolbar" }, Mo = {
       }, [
         b > 0 ? (D(), R("div", Mo)) : Y("", !0),
         U("div", No, [
-          (D(!0), R(me, null, Ie(v.items, (E) => (D(), R(me, {
-            key: E.id
+          (D(!0), R(me, null, Ie(v.items, (x) => (D(), R(me, {
+            key: x.id
           }, [
-            E.type === "zoom-display" ? (D(), R("span", _o, ge(k.value), 1)) : (D(), R("button", {
+            x.type === "zoom-display" ? (D(), R("span", _o, ge(k.value), 1)) : (D(), R("button", {
               key: 1,
               type: "button",
               class: se(["flow-canvas-toolbar__btn", {
-                "is-disabled": O(E),
-                "is-active": K(E),
-                "is-exporting": E.type === "export" && u.value
+                "is-disabled": O(x),
+                "is-active": K(x),
+                "is-exporting": x.type === "export" && u.value
               }]),
-              "data-toolbar-id": E.id,
-              "data-toolbar-type": E.type,
-              disabled: O(E),
-              onClick: (B) => M(E),
-              onMouseenter: (B) => x(B, E),
+              "data-toolbar-id": x.id,
+              "data-toolbar-type": x.type,
+              disabled: O(x),
+              onClick: (B) => M(x),
+              onMouseenter: (B) => E(B, x),
               onMouseleave: m
             }, [
-              E.component ? (D(), be(lt(E.component), { key: 0 })) : E.icon ? (D(), R("i", {
+              x.component ? (D(), be(lt(x.component), { key: 0 })) : x.icon ? (D(), R("i", {
                 key: 1,
-                class: se(E.icon)
+                class: se(x.icon)
               }, null, 2)) : (D(), R("span", {
                 key: 2,
                 class: "flow-canvas-toolbar__text",
-                textContent: ge(E.text ?? E.description ?? E.id)
+                textContent: ge(x.text ?? x.description ?? x.id)
               }, null, 8, Ao))
             ], 42, Do))
           ], 64))), 128))
@@ -3212,13 +3212,13 @@ function mn(s) {
         if (!l || !a) continue;
         const h = r.nodes[l], u = r.nodes[a];
         if (!h || !u) continue;
-        const g = i.type === "edge.add" ? i.edge.source.portId : i.source?.portId, p = i.type === "edge.add" ? i.edge.target.portId : i.target?.portId, x = g ? h.ports?.find((P) => P.id === g) : void 0, m = p ? u.ports?.find((P) => P.id === p) : void 0, k = i.type === "edge.reconnect" ? i.edgeId : void 0, S = Object.values(r.edges).filter(
+        const g = i.type === "edge.add" ? i.edge.source.portId : i.source?.portId, p = i.type === "edge.add" ? i.edge.target.portId : i.target?.portId, E = g ? h.ports?.find((P) => P.id === g) : void 0, m = p ? u.ports?.find((P) => P.id === p) : void 0, k = i.type === "edge.reconnect" ? i.edgeId : void 0, S = Object.values(r.edges).filter(
           (P) => P.id !== k && !n.has(P.id)
         ), T = s({
           flowModel: r,
           sourceNode: h,
           targetNode: u,
-          sourcePort: x,
+          sourcePort: E,
           targetPort: m,
           existingEdges: S
         });
@@ -3351,15 +3351,15 @@ const Go = { class: "flow-canvas-search-popover__input" }, qo = ["value", "place
       }
       m.key === "Enter" && (m.preventDefault(), g());
     }
-    function x(m) {
+    function E(m) {
       if (!t.open) return;
       const k = m.target;
       k && i.value?.contains(k) || t.isAnchorTarget?.(m.target) || o("close");
     }
     return ot(() => {
-      document.addEventListener("mousedown", x);
+      document.addEventListener("mousedown", E);
     }), Me(() => {
-      document.removeEventListener("mousedown", x);
+      document.removeEventListener("mousedown", E);
     }), (m, k) => s.open ? (D(), R("div", {
       key: 0,
       ref_key: "panelRef",
@@ -3431,7 +3431,7 @@ function tn(s, e) {
     keywords: i
   } : null;
 }
-function xn(s) {
+function En(s) {
   let e = null, t = null, o = null, n = null, i = null, r = [];
   const l = q(!1), a = q(""), h = q({ x: 0, y: 0, width: Qe }), u = j(() => e ? Object.values(e.flowModel.value.nodes).map((M) => tn(M, s)).filter(Qo) : []), g = j(() => {
     const M = a.value.trim().toLowerCase(), y = Math.max(1, s?.maxResults ?? Yo);
@@ -3440,11 +3440,11 @@ function xn(s) {
   function p() {
     return o?.querySelector('.flow-canvas-toolbar__btn[data-toolbar-type="search"]');
   }
-  function x() {
+  function E() {
     return p()?.closest(".flow-canvas-toolbar");
   }
   function m() {
-    const M = x(), y = o?.getBoundingClientRect(), f = M?.getBoundingClientRect() ?? y;
+    const M = E(), y = o?.getBoundingClientRect(), f = M?.getBoundingClientRect() ?? y;
     if (!f) return;
     const d = Math.max(Qe, Math.round(f.width));
     h.value = {
@@ -3553,8 +3553,8 @@ function rn(s) {
   let o = null, n = s.defaultOpen ?? !1, i = null;
   function r() {
     !s.onClickOutside || i || (i = (p) => {
-      const x = p.target;
-      x && e.contains(x) || p.target?.closest('[data-toolbar-type="minimap"]') || s.onClickOutside();
+      const E = p.target;
+      E && e.contains(E) || p.target?.closest('[data-toolbar-type="minimap"]') || s.onClickOutside();
     }, document.addEventListener("mousedown", i));
   }
   function l() {
@@ -3589,7 +3589,7 @@ function rn(s) {
     destroy: g
   };
 }
-function En(s) {
+function xn(s) {
   let e = null;
   const t = q(!1);
   function o(i) {
@@ -3714,8 +3714,8 @@ export {
   ko as createDefaultToolbarItems,
   fn as createEmptyFlowModel,
   te as generateId,
-  En as minimapPlugin,
-  xn as searchPlugin,
+  xn as minimapPlugin,
+  En as searchPlugin,
   wn as selectionPlugin,
   bn as snaplinePlugin,
   gn as useCanvasEditor