@xyflow/vue 2.0.0-next.4 → 2.0.0-next.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -115,7 +115,7 @@ var export_helper_default = (sfc, props) => {
115
115
  };
116
116
  //#endregion
117
117
  //#region src/components/Background/Background.vue
118
- const _sfc_main$24 = /* @__PURE__ */ (0, vue.defineComponent)({
118
+ const _sfc_main$25 = /* @__PURE__ */ (0, vue.defineComponent)({
119
119
  name: "Background",
120
120
  compatConfig: { MODE: 3 },
121
121
  props: {
@@ -200,7 +200,7 @@ const _sfc_main$24 = /* @__PURE__ */ (0, vue.defineComponent)({
200
200
  return __returned__;
201
201
  }
202
202
  });
203
- const _hoisted_1$14 = { class: "vue-flow__background vue-flow__container" };
203
+ const _hoisted_1$15 = { class: "vue-flow__background vue-flow__container" };
204
204
  const _hoisted_2$4 = [
205
205
  "id",
206
206
  "x",
@@ -214,8 +214,8 @@ const _hoisted_3$3 = [
214
214
  "y",
215
215
  "fill"
216
216
  ];
217
- function _sfc_render$24(_ctx, _cache, $props, $setup, $data, $options) {
218
- return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$14, [
217
+ function _sfc_render$25(_ctx, _cache, $props, $setup, $data, $options) {
218
+ return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$15, [
219
219
  (0, vue.renderSlot)(_ctx.$slots, "pattern-container", { id: $setup.patternId }, () => [(0, vue.createElementVNode)("pattern", {
220
220
  id: $setup.patternId,
221
221
  x: $setup.viewport.x % $setup.background.scaledGap[0],
@@ -248,10 +248,10 @@ function _sfc_render$24(_ctx, _cache, $props, $setup, $data, $options) {
248
248
  (0, vue.renderSlot)(_ctx.$slots, "default", { id: $setup.patternId })
249
249
  ]);
250
250
  }
251
- var Background_default = /* @__PURE__ */ export_helper_default(_sfc_main$24, [["render", _sfc_render$24], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Background/Background.vue"]]);
251
+ var Background_default = /* @__PURE__ */ export_helper_default(_sfc_main$25, [["render", _sfc_render$25], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Background/Background.vue"]]);
252
252
  //#endregion
253
253
  //#region src/components/Controls/ControlButton.vue
254
- const _sfc_main$23 = /* @__PURE__ */ (0, vue.defineComponent)({
254
+ const _sfc_main$24 = /* @__PURE__ */ (0, vue.defineComponent)({
255
255
  name: "ControlButton",
256
256
  compatConfig: { MODE: 3 },
257
257
  props: {
@@ -275,12 +275,12 @@ const _sfc_main$23 = /* @__PURE__ */ (0, vue.defineComponent)({
275
275
  return __returned__;
276
276
  }
277
277
  });
278
- const _hoisted_1$13 = [
278
+ const _hoisted_1$14 = [
279
279
  "disabled",
280
280
  "aria-label",
281
281
  "title"
282
282
  ];
283
- function _sfc_render$23(_ctx, _cache, $props, $setup, $data, $options) {
283
+ function _sfc_render$24(_ctx, _cache, $props, $setup, $data, $options) {
284
284
  return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
285
285
  type: "button",
286
286
  class: "vue-flow__controls-button",
@@ -288,9 +288,9 @@ function _sfc_render$23(_ctx, _cache, $props, $setup, $data, $options) {
288
288
  "aria-label": $props.label,
289
289
  title: $props.label,
290
290
  onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
291
- }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 8, _hoisted_1$13);
291
+ }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 8, _hoisted_1$14);
292
292
  }
293
- var ControlButton_default = /* @__PURE__ */ export_helper_default(_sfc_main$23, [["render", _sfc_render$23], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Controls/ControlButton.vue"]]);
293
+ var ControlButton_default = /* @__PURE__ */ export_helper_default(_sfc_main$24, [["render", _sfc_render$24], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Controls/ControlButton.vue"]]);
294
294
  //#endregion
295
295
  //#region src/composables/storeToRefs.ts
296
296
  /**
@@ -319,7 +319,7 @@ function storeToRefs(store) {
319
319
  * @param params
320
320
  */
321
321
  function useDrag(params) {
322
- const { panBy, getInternalNode, removeSelectedNodes, removeSelectedEdges, updateNodePositions, getNodes, getEdges } = useVueFlow();
322
+ const { panBy, getInternalNode, addSelectedNodes, removeSelectedNodes, removeSelectedEdges, updateNodePositions, getNodes, getEdges } = useVueFlow();
323
323
  const store = useStore();
324
324
  const { nodeLookup } = store;
325
325
  const { onStart, onDrag, onStop, onClick, el, disabled, id, selectable, dragHandle } = params;
@@ -391,6 +391,13 @@ function useDrag(params) {
391
391
  },
392
392
  autoPanSpeed: store.autoPanSpeed
393
393
  }),
394
+ onNodeMouseDown: (nodeId) => {
395
+ const node = getInternalNode(nodeId);
396
+ if (!node) return;
397
+ store.nodesSelectionActive = false;
398
+ if (!node.selected) addSelectedNodes([node]);
399
+ else if (store.multiSelectionActive) removeSelectedNodes([node]);
400
+ },
394
401
  onDragStart: (event, _dragItems, node, nodes) => {
395
402
  dragFired = true;
396
403
  dragging.value = true;
@@ -1720,7 +1727,7 @@ function useWatchProps(models, props, handle) {
1720
1727
  }
1721
1728
  //#endregion
1722
1729
  //#region src/components/Panel/Panel.vue
1723
- const _sfc_main$22 = /* @__PURE__ */ (0, vue.defineComponent)({
1730
+ const _sfc_main$23 = /* @__PURE__ */ (0, vue.defineComponent)({
1724
1731
  name: "Panel",
1725
1732
  compatConfig: { MODE: 3 },
1726
1733
  props: {
@@ -1750,15 +1757,15 @@ const _sfc_main$22 = /* @__PURE__ */ (0, vue.defineComponent)({
1750
1757
  return __returned__;
1751
1758
  }
1752
1759
  });
1753
- const _hoisted_1$12 = ["aria-label"];
1754
- function _sfc_render$22(_ctx, _cache, $props, $setup, $data, $options) {
1760
+ const _hoisted_1$13 = ["aria-label"];
1761
+ function _sfc_render$23(_ctx, _cache, $props, $setup, $data, $options) {
1755
1762
  return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
1756
1763
  class: (0, vue.normalizeClass)(["vue-flow__panel", $setup.positionClasses]),
1757
1764
  "aria-label": $props.label ?? void 0,
1758
1765
  style: (0, vue.normalizeStyle)({ pointerEvents: $setup.userSelectionActive ? "none" : "all" })
1759
- }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 14, _hoisted_1$12);
1766
+ }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 14, _hoisted_1$13);
1760
1767
  }
1761
- var Panel_default = /* @__PURE__ */ export_helper_default(_sfc_main$22, [["render", _sfc_render$22], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Panel/Panel.vue"]]);
1768
+ var Panel_default = /* @__PURE__ */ export_helper_default(_sfc_main$23, [["render", _sfc_render$23], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Panel/Panel.vue"]]);
1762
1769
  //#endregion
1763
1770
  //#region src/components/Controls/icons.ts
1764
1771
  function icon(viewBox, d) {
@@ -1775,7 +1782,7 @@ const Lock = icon("0 0 25 32", "M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 1
1775
1782
  const Unlock = icon("0 0 25 32", "M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z");
1776
1783
  //#endregion
1777
1784
  //#region src/components/Controls/Controls.vue
1778
- const _sfc_main$21 = /* @__PURE__ */ (0, vue.defineComponent)({
1785
+ const _sfc_main$22 = /* @__PURE__ */ (0, vue.defineComponent)({
1779
1786
  name: "Controls",
1780
1787
  compatConfig: { MODE: 3 },
1781
1788
  props: {
@@ -1885,7 +1892,7 @@ const _sfc_main$21 = /* @__PURE__ */ (0, vue.defineComponent)({
1885
1892
  return __returned__;
1886
1893
  }
1887
1894
  });
1888
- function _sfc_render$21(_ctx, _cache, $props, $setup, $data, $options) {
1895
+ function _sfc_render$22(_ctx, _cache, $props, $setup, $data, $options) {
1889
1896
  return (0, vue.openBlock)(), (0, vue.createBlock)($setup["Panel"], {
1890
1897
  class: "vue-flow__controls",
1891
1898
  position: $props.position,
@@ -1932,10 +1939,10 @@ function _sfc_render$21(_ctx, _cache, $props, $setup, $data, $options) {
1932
1939
  _: 3
1933
1940
  }, 8, ["position", "label"]);
1934
1941
  }
1935
- var Controls_default = /* @__PURE__ */ export_helper_default(_sfc_main$21, [["render", _sfc_render$21], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Controls/Controls.vue"]]);
1942
+ var Controls_default = /* @__PURE__ */ export_helper_default(_sfc_main$22, [["render", _sfc_render$22], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Controls/Controls.vue"]]);
1936
1943
  //#endregion
1937
1944
  //#region src/components/Edges/EdgeText.vue
1938
- const _sfc_main$20 = /* @__PURE__ */ (0, vue.defineComponent)({
1945
+ const _sfc_main$21 = /* @__PURE__ */ (0, vue.defineComponent)({
1939
1946
  name: "EdgeText",
1940
1947
  compatConfig: { MODE: 3 },
1941
1948
  props: {
@@ -2015,7 +2022,7 @@ const _sfc_main$20 = /* @__PURE__ */ (0, vue.defineComponent)({
2015
2022
  return __returned__;
2016
2023
  }
2017
2024
  });
2018
- const _hoisted_1$11 = ["transform", "visibility"];
2025
+ const _hoisted_1$12 = ["transform", "visibility"];
2019
2026
  const _hoisted_2$3 = [
2020
2027
  "width",
2021
2028
  "height",
@@ -2025,7 +2032,7 @@ const _hoisted_2$3 = [
2025
2032
  "ry"
2026
2033
  ];
2027
2034
  const _hoisted_3$2 = ["y"];
2028
- function _sfc_render$20(_ctx, _cache, $props, $setup, $data, $options) {
2035
+ function _sfc_render$21(_ctx, _cache, $props, $setup, $data, $options) {
2029
2036
  return (0, vue.openBlock)(), (0, vue.createElementBlock)("g", {
2030
2037
  transform: $setup.transform,
2031
2038
  visibility: $setup.box.width ? "visible" : "hidden",
@@ -2046,12 +2053,12 @@ function _sfc_render$20(_ctx, _cache, $props, $setup, $data, $options) {
2046
2053
  y: $setup.box.height / 2,
2047
2054
  dy: "0.3em",
2048
2055
  style: $props.labelStyle
2049
- }), [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [typeof $props.label !== "string" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)($props.label), { key: 0 })) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)($props.label), 1)], 64))])], 16, _hoisted_3$2)], 8, _hoisted_1$11);
2056
+ }), [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [typeof $props.label !== "string" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)($props.label), { key: 0 })) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)($props.label), 1)], 64))])], 16, _hoisted_3$2)], 8, _hoisted_1$12);
2050
2057
  }
2051
- var EdgeText_default = /* @__PURE__ */ export_helper_default(_sfc_main$20, [["render", _sfc_render$20], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Edges/EdgeText.vue"]]);
2058
+ var EdgeText_default = /* @__PURE__ */ export_helper_default(_sfc_main$21, [["render", _sfc_render$21], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Edges/EdgeText.vue"]]);
2052
2059
  //#endregion
2053
2060
  //#region src/components/Edges/BaseEdge.vue
2054
- const _sfc_main$19 = /* @__PURE__ */ (0, vue.defineComponent)({
2061
+ const _sfc_main$20 = /* @__PURE__ */ (0, vue.defineComponent)({
2055
2062
  name: "BaseEdge",
2056
2063
  inheritAttrs: false,
2057
2064
  compatConfig: { MODE: 3 },
@@ -2134,14 +2141,14 @@ const _sfc_main$19 = /* @__PURE__ */ (0, vue.defineComponent)({
2134
2141
  return __returned__;
2135
2142
  }
2136
2143
  });
2137
- const _hoisted_1$10 = [
2144
+ const _hoisted_1$11 = [
2138
2145
  "id",
2139
2146
  "d",
2140
2147
  "marker-end",
2141
2148
  "marker-start"
2142
2149
  ];
2143
2150
  const _hoisted_2$2 = ["d", "stroke-width"];
2144
- function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
2151
+ function _sfc_render$20(_ctx, _cache, $props, $setup, $data, $options) {
2145
2152
  return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [
2146
2153
  (0, vue.createElementVNode)("path", (0, vue.mergeProps)($setup.attrs, {
2147
2154
  id: $props.id,
@@ -2150,7 +2157,7 @@ function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
2150
2157
  class: "vue-flow__edge-path",
2151
2158
  "marker-end": $props.markerEnd,
2152
2159
  "marker-start": $props.markerStart
2153
- }), null, 16, _hoisted_1$10),
2160
+ }), null, 16, _hoisted_1$11),
2154
2161
  $props.interactionWidth ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("path", {
2155
2162
  key: 0,
2156
2163
  ref: "interactionEl",
@@ -2183,7 +2190,7 @@ function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
2183
2190
  ])) : (0, vue.createCommentVNode)("v-if", true)
2184
2191
  ], 64);
2185
2192
  }
2186
- var BaseEdge_default = /* @__PURE__ */ export_helper_default(_sfc_main$19, [["render", _sfc_render$19], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Edges/BaseEdge.vue"]]);
2193
+ var BaseEdge_default = /* @__PURE__ */ export_helper_default(_sfc_main$20, [["render", _sfc_render$20], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Edges/BaseEdge.vue"]]);
2187
2194
  //#endregion
2188
2195
  //#region src/components/Edges/utils.ts
2189
2196
  /**
@@ -2251,7 +2258,7 @@ const BezierEdge = (0, vue.defineComponent)({
2251
2258
  });
2252
2259
  //#endregion
2253
2260
  //#region src/components/Edges/EdgeLabelRenderer.vue
2254
- const _sfc_main$18 = /* @__PURE__ */ (0, vue.defineComponent)({
2261
+ const _sfc_main$19 = /* @__PURE__ */ (0, vue.defineComponent)({
2255
2262
  name: "EdgeLabelRenderer",
2256
2263
  compatConfig: { MODE: 3 },
2257
2264
  setup(__props, { expose: __expose }) {
@@ -2268,17 +2275,17 @@ const _sfc_main$18 = /* @__PURE__ */ (0, vue.defineComponent)({
2268
2275
  return __returned__;
2269
2276
  }
2270
2277
  });
2271
- const _hoisted_1$9 = {
2278
+ const _hoisted_1$10 = {
2272
2279
  height: "0",
2273
2280
  width: "0"
2274
2281
  };
2275
- function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
2276
- return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", null, [((0, vue.openBlock)(), (0, vue.createElementBlock)("foreignObject", _hoisted_1$9, [((0, vue.openBlock)(), (0, vue.createBlock)(vue.Teleport, {
2282
+ function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
2283
+ return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", null, [((0, vue.openBlock)(), (0, vue.createElementBlock)("foreignObject", _hoisted_1$10, [((0, vue.openBlock)(), (0, vue.createBlock)(vue.Teleport, {
2277
2284
  to: $setup.teleportTarget,
2278
2285
  disabled: !$setup.teleportTarget
2279
2286
  }, [(0, vue.renderSlot)(_ctx.$slots, "default")], 8, ["to", "disabled"]))]))]);
2280
2287
  }
2281
- var EdgeLabelRenderer_default = /* @__PURE__ */ export_helper_default(_sfc_main$18, [["render", _sfc_render$18], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Edges/EdgeLabelRenderer.vue"]]);
2288
+ var EdgeLabelRenderer_default = /* @__PURE__ */ export_helper_default(_sfc_main$19, [["render", _sfc_render$19], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Edges/EdgeLabelRenderer.vue"]]);
2282
2289
  //#endregion
2283
2290
  //#region src/components/Edges/SimpleBezierEdge.ts
2284
2291
  function getControl({ pos, x1, y1, x2, y2 }) {
@@ -2487,7 +2494,7 @@ const StraightEdge = (0, vue.defineComponent)({
2487
2494
  });
2488
2495
  //#endregion
2489
2496
  //#region src/components/Handle/Handle.vue
2490
- const _sfc_main$17 = /* @__PURE__ */ (0, vue.defineComponent)({
2497
+ const _sfc_main$18 = /* @__PURE__ */ (0, vue.defineComponent)({
2491
2498
  name: "Handle",
2492
2499
  compatConfig: { MODE: 3 },
2493
2500
  props: {
@@ -2659,8 +2666,8 @@ const _sfc_main$17 = /* @__PURE__ */ (0, vue.defineComponent)({
2659
2666
  return __returned__;
2660
2667
  }
2661
2668
  });
2662
- const _hoisted_1$8 = ["aria-label"];
2663
- function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
2669
+ const _hoisted_1$9 = ["aria-label"];
2670
+ function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
2664
2671
  return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({ ref: "handle" }, $setup.handleDataIds, {
2665
2672
  "aria-label": $setup.store.ariaLabelConfig["handle.ariaLabel"],
2666
2673
  class: ["vue-flow__handle", [
@@ -2674,9 +2681,84 @@ function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
2674
2681
  onMousedown: $setup.onPointerDown,
2675
2682
  onTouchstartPassive: $setup.onPointerDown,
2676
2683
  onClick: $setup.onClick
2677
- }), [(0, vue.renderSlot)(_ctx.$slots, "default", { id: $props.id })], 16, _hoisted_1$8);
2684
+ }), [(0, vue.renderSlot)(_ctx.$slots, "default", { id: $props.id })], 16, _hoisted_1$9);
2685
+ }
2686
+ var Handle_default = /* @__PURE__ */ export_helper_default(_sfc_main$18, [["render", _sfc_render$18], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Handle/Handle.vue"]]);
2687
+ //#endregion
2688
+ //#region src/components/EdgeToolbar/EdgeToolbar.vue
2689
+ const _sfc_main$17 = /* @__PURE__ */ (0, vue.defineComponent)({
2690
+ name: "EdgeToolbar",
2691
+ compatConfig: { MODE: 3 },
2692
+ inheritAttrs: false,
2693
+ props: {
2694
+ edgeId: {
2695
+ type: String,
2696
+ required: true
2697
+ },
2698
+ x: {
2699
+ type: Number,
2700
+ required: true
2701
+ },
2702
+ y: {
2703
+ type: Number,
2704
+ required: true
2705
+ },
2706
+ isVisible: {
2707
+ type: Boolean,
2708
+ required: false,
2709
+ default: void 0
2710
+ },
2711
+ alignX: {
2712
+ type: String,
2713
+ required: false,
2714
+ default: "center"
2715
+ },
2716
+ alignY: {
2717
+ type: String,
2718
+ required: false,
2719
+ default: "center"
2720
+ }
2721
+ },
2722
+ setup(__props, { expose: __expose }) {
2723
+ __expose();
2724
+ const props = __props;
2725
+ const { viewport } = useVueFlow();
2726
+ const { edgeLookup } = useStore();
2727
+ const edge = (0, vue.computed)(() => edgeLookup.get(props.edgeId));
2728
+ const __returned__ = {
2729
+ props,
2730
+ viewport,
2731
+ edgeLookup,
2732
+ edge,
2733
+ isActive: (0, vue.computed)(() => typeof props.isVisible === "boolean" ? props.isVisible : edge.value?.selected),
2734
+ wrapperStyle: (0, vue.computed)(() => ({
2735
+ position: "absolute",
2736
+ transform: (0, _xyflow_system.getEdgeToolbarTransform)(props.x, props.y, viewport.value.zoom, props.alignX, props.alignY),
2737
+ zIndex: (edge.value?.zIndex ?? 0) + 1,
2738
+ pointerEvents: "all",
2739
+ transformOrigin: "0 0"
2740
+ })),
2741
+ EdgeLabelRenderer: EdgeLabelRenderer_default
2742
+ };
2743
+ Object.defineProperty(__returned__, "__isScriptSetup", {
2744
+ enumerable: false,
2745
+ value: true
2746
+ });
2747
+ return __returned__;
2748
+ }
2749
+ });
2750
+ const _hoisted_1$8 = ["data-id"];
2751
+ function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
2752
+ return $setup.isActive ? ((0, vue.openBlock)(), (0, vue.createBlock)($setup["EdgeLabelRenderer"], { key: 0 }, {
2753
+ default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", (0, vue.mergeProps)(_ctx.$attrs, {
2754
+ style: $setup.wrapperStyle,
2755
+ "data-id": $setup.edge?.id ?? "",
2756
+ class: "vue-flow__edge-toolbar"
2757
+ }), [(0, vue.renderSlot)(_ctx.$slots, "default")], 16, _hoisted_1$8)]),
2758
+ _: 3
2759
+ })) : (0, vue.createCommentVNode)("v-if", true);
2678
2760
  }
2679
- var Handle_default = /* @__PURE__ */ export_helper_default(_sfc_main$17, [["render", _sfc_render$17], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/Handle/Handle.vue"]]);
2761
+ var EdgeToolbar_default = /* @__PURE__ */ export_helper_default(_sfc_main$17, [["render", _sfc_render$17], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/EdgeToolbar/EdgeToolbar.vue"]]);
2680
2762
  //#endregion
2681
2763
  //#region src/components/MiniMap/types.ts
2682
2764
  const Slots = Symbol("MiniMapSlots");
@@ -7475,6 +7557,37 @@ function connectionLineProps() {
7475
7557
  };
7476
7558
  }
7477
7559
  //#endregion
7560
+ //#region src/utils/edges.ts
7561
+ const defaultOnError = (0, _xyflow_system.createDevWarn)("Vue Flow", "https://vueflow.dev/");
7562
+ /**
7563
+ * Adds a `Connection` (or a full `Edge`) to an edges array and returns a new array — generating the
7564
+ * edge id and skipping the add when an equivalent connection already exists. The pure helper to use
7565
+ * in an `@connect` handler against a `v-model:edges` array, e.g.
7566
+ * `edges.value = addEdge(connection, edges.value)`, with no store/instance access.
7567
+ *
7568
+ * Mirrors xyflow/react's + xyflow/svelte's `addEdge`.
7569
+ */
7570
+ function addEdge(edgeParams, edges, options = {}) {
7571
+ return (0, _xyflow_system.addEdge)(edgeParams, edges, {
7572
+ ...options,
7573
+ onError: options.onError ?? defaultOnError
7574
+ });
7575
+ }
7576
+ /**
7577
+ * Reconnects an existing edge to a new `Connection`, returning a new edges array. The pure,
7578
+ * controlled counterpart to the store action `useVueFlow().reconnectEdge` — use it in an
7579
+ * `@reconnect` handler against a `v-model:edges` array, e.g.
7580
+ * `edges.value = reconnectEdge(oldEdge, newConnection, edges.value)`.
7581
+ *
7582
+ * Mirrors xyflow/react's `reconnectEdge`.
7583
+ */
7584
+ function reconnectEdge(oldEdge, newConnection, edges, options = { shouldReplaceId: true }) {
7585
+ return (0, _xyflow_system.reconnectEdge)(oldEdge, newConnection, edges, {
7586
+ ...options,
7587
+ onError: options.onError ?? defaultOnError
7588
+ });
7589
+ }
7590
+ //#endregion
7478
7591
  exports.Background = Background_default;
7479
7592
  exports.BaseEdge = BaseEdge_default;
7480
7593
  exports.BezierEdge = BezierEdge;
@@ -7494,6 +7607,7 @@ exports.ControlButton = ControlButton_default;
7494
7607
  exports.Controls = Controls_default;
7495
7608
  exports.EdgeLabelRenderer = EdgeLabelRenderer_default;
7496
7609
  exports.EdgeText = EdgeText_default;
7610
+ exports.EdgeToolbar = EdgeToolbar_default;
7497
7611
  exports.ErrorCode = ErrorCode;
7498
7612
  exports.Handle = Handle_default;
7499
7613
  exports.MarkerType = MarkerType;
@@ -7537,6 +7651,7 @@ exports.VueFlow = VueFlow_default;
7537
7651
  exports.VueFlowError = VueFlowError;
7538
7652
  exports.VueFlowInjection = VueFlow;
7539
7653
  exports.VueFlowProvider = VueFlowProvider_default;
7654
+ exports.addEdge = addEdge;
7540
7655
  exports.applyChanges = applyChanges;
7541
7656
  exports.applyEdgeChanges = applyEdgeChanges;
7542
7657
  exports.applyNodeChanges = applyNodeChanges;
@@ -7671,6 +7786,7 @@ Object.defineProperty(exports, "pointToRendererPoint", {
7671
7786
  return _xyflow_system.pointToRendererPoint;
7672
7787
  }
7673
7788
  });
7789
+ exports.reconnectEdge = reconnectEdge;
7674
7790
  Object.defineProperty(exports, "rendererPointToPoint", {
7675
7791
  enumerable: true,
7676
7792
  get: function() {