@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.d.mts +74 -29
- package/dist/index.d.ts +74 -29
- package/dist/index.js +155 -39
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +154 -41
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
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$
|
|
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$
|
|
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$
|
|
218
|
-
return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$
|
|
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$
|
|
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$
|
|
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$
|
|
278
|
+
const _hoisted_1$14 = [
|
|
279
279
|
"disabled",
|
|
280
280
|
"aria-label",
|
|
281
281
|
"title"
|
|
282
282
|
];
|
|
283
|
-
function _sfc_render$
|
|
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$
|
|
291
|
+
}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 8, _hoisted_1$14);
|
|
292
292
|
}
|
|
293
|
-
var ControlButton_default = /* @__PURE__ */ export_helper_default(_sfc_main$
|
|
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$
|
|
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$
|
|
1754
|
-
function _sfc_render$
|
|
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$
|
|
1766
|
+
}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 14, _hoisted_1$13);
|
|
1760
1767
|
}
|
|
1761
|
-
var Panel_default = /* @__PURE__ */ export_helper_default(_sfc_main$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
2278
|
+
const _hoisted_1$10 = {
|
|
2272
2279
|
height: "0",
|
|
2273
2280
|
width: "0"
|
|
2274
2281
|
};
|
|
2275
|
-
function _sfc_render$
|
|
2276
|
-
return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", null, [((0, vue.openBlock)(), (0, vue.createElementBlock)("foreignObject", _hoisted_1$
|
|
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$
|
|
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$
|
|
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$
|
|
2663
|
-
function _sfc_render$
|
|
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$
|
|
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
|
|
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() {
|