@particle-academy/fancy-flow 0.3.0 → 0.4.0
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/{chunk-DDHKYIH2.js → chunk-2BZ6OE5H.js} +229 -435
- package/dist/chunk-2BZ6OE5H.js.map +1 -0
- package/dist/{chunk-FGUJNX65.js → chunk-35OXF6W3.js} +3 -3
- package/dist/{chunk-FGUJNX65.js.map → chunk-35OXF6W3.js.map} +1 -1
- package/dist/chunk-4PZQRN5Y.js +114 -0
- package/dist/chunk-4PZQRN5Y.js.map +1 -0
- package/dist/chunk-DW66NGU5.js +138 -0
- package/dist/chunk-DW66NGU5.js.map +1 -0
- package/dist/{chunk-YPINKH2D.js → engine.cjs} +4 -111
- package/dist/engine.cjs.map +1 -0
- package/dist/engine.d.cts +35 -0
- package/dist/engine.d.ts +35 -0
- package/dist/engine.js +3 -0
- package/dist/engine.js.map +1 -0
- package/dist/index.cjs +227 -464
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +19 -19
- package/dist/index.d.ts +19 -19
- package/dist/index.js +6 -6
- package/dist/registry/index.d.cts +2 -3
- package/dist/registry/index.d.ts +2 -3
- package/dist/registry.cjs +225 -462
- package/dist/registry.cjs.map +1 -1
- package/dist/registry.js +2 -3
- package/dist/runtime/index.d.cts +4 -32
- package/dist/runtime/index.d.ts +4 -32
- package/dist/runtime.cjs +226 -463
- package/dist/runtime.cjs.map +1 -1
- package/dist/runtime.js +3 -3
- package/dist/schema/index.d.cts +1 -1
- package/dist/schema/index.d.ts +1 -1
- package/dist/schema.js +0 -1
- package/dist/{types-Ch4sAvum.d.cts → types-TemTtb04.d.cts} +1 -1
- package/dist/{types-Ch4sAvum.d.ts → types-TemTtb04.d.ts} +1 -1
- package/package.json +46 -9
- package/dist/chunk-7D4SUZUM.js +0 -35
- package/dist/chunk-7D4SUZUM.js.map +0 -1
- package/dist/chunk-DDHKYIH2.js.map +0 -1
- package/dist/chunk-YPINKH2D.js.map +0 -1
|
@@ -1,279 +1,7 @@
|
|
|
1
|
-
import { __commonJS, __require, __toESM } from './chunk-7D4SUZUM.js';
|
|
2
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
3
|
-
import ReactExports, { createContext, forwardRef, memo, useMemo, useState, useRef, useEffect, useCallback, useContext, useLayoutEffect } from 'react';
|
|
2
|
+
import ReactExports, { createContext, forwardRef, memo, useMemo, useState, useRef, useEffect, useCallback, useContext, useSyncExternalStore, useDebugValue, useLayoutEffect } from 'react';
|
|
4
3
|
import 'react-dom';
|
|
5
4
|
|
|
6
|
-
// node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js
|
|
7
|
-
var require_use_sync_external_store_shim_production = __commonJS({
|
|
8
|
-
"node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js"(exports) {
|
|
9
|
-
var React = __require("react");
|
|
10
|
-
function is(x, y) {
|
|
11
|
-
return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
|
|
12
|
-
}
|
|
13
|
-
var objectIs = "function" === typeof Object.is ? Object.is : is;
|
|
14
|
-
var useState2 = React.useState;
|
|
15
|
-
var useEffect2 = React.useEffect;
|
|
16
|
-
var useLayoutEffect2 = React.useLayoutEffect;
|
|
17
|
-
var useDebugValue2 = React.useDebugValue;
|
|
18
|
-
function useSyncExternalStore$2(subscribe, getSnapshot) {
|
|
19
|
-
var value = getSnapshot(), _useState = useState2({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
|
|
20
|
-
useLayoutEffect2(
|
|
21
|
-
function() {
|
|
22
|
-
inst.value = value;
|
|
23
|
-
inst.getSnapshot = getSnapshot;
|
|
24
|
-
checkIfSnapshotChanged(inst) && forceUpdate({ inst });
|
|
25
|
-
},
|
|
26
|
-
[subscribe, value, getSnapshot]
|
|
27
|
-
);
|
|
28
|
-
useEffect2(
|
|
29
|
-
function() {
|
|
30
|
-
checkIfSnapshotChanged(inst) && forceUpdate({ inst });
|
|
31
|
-
return subscribe(function() {
|
|
32
|
-
checkIfSnapshotChanged(inst) && forceUpdate({ inst });
|
|
33
|
-
});
|
|
34
|
-
},
|
|
35
|
-
[subscribe]
|
|
36
|
-
);
|
|
37
|
-
useDebugValue2(value);
|
|
38
|
-
return value;
|
|
39
|
-
}
|
|
40
|
-
function checkIfSnapshotChanged(inst) {
|
|
41
|
-
var latestGetSnapshot = inst.getSnapshot;
|
|
42
|
-
inst = inst.value;
|
|
43
|
-
try {
|
|
44
|
-
var nextValue = latestGetSnapshot();
|
|
45
|
-
return !objectIs(inst, nextValue);
|
|
46
|
-
} catch (error) {
|
|
47
|
-
return true;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
function useSyncExternalStore$1(subscribe, getSnapshot) {
|
|
51
|
-
return getSnapshot();
|
|
52
|
-
}
|
|
53
|
-
var shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
|
|
54
|
-
exports.useSyncExternalStore = void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim;
|
|
55
|
-
}
|
|
56
|
-
});
|
|
57
|
-
|
|
58
|
-
// node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js
|
|
59
|
-
var require_use_sync_external_store_shim_development = __commonJS({
|
|
60
|
-
"node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js"(exports) {
|
|
61
|
-
"production" !== process.env.NODE_ENV && (function() {
|
|
62
|
-
function is(x, y) {
|
|
63
|
-
return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
|
|
64
|
-
}
|
|
65
|
-
function useSyncExternalStore$2(subscribe, getSnapshot) {
|
|
66
|
-
didWarnOld18Alpha || void 0 === React.startTransition || (didWarnOld18Alpha = true, console.error(
|
|
67
|
-
"You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
|
|
68
|
-
));
|
|
69
|
-
var value = getSnapshot();
|
|
70
|
-
if (!didWarnUncachedGetSnapshot) {
|
|
71
|
-
var cachedValue = getSnapshot();
|
|
72
|
-
objectIs(value, cachedValue) || (console.error(
|
|
73
|
-
"The result of getSnapshot should be cached to avoid an infinite loop"
|
|
74
|
-
), didWarnUncachedGetSnapshot = true);
|
|
75
|
-
}
|
|
76
|
-
cachedValue = useState2({
|
|
77
|
-
inst: { value, getSnapshot }
|
|
78
|
-
});
|
|
79
|
-
var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
|
|
80
|
-
useLayoutEffect2(
|
|
81
|
-
function() {
|
|
82
|
-
inst.value = value;
|
|
83
|
-
inst.getSnapshot = getSnapshot;
|
|
84
|
-
checkIfSnapshotChanged(inst) && forceUpdate({ inst });
|
|
85
|
-
},
|
|
86
|
-
[subscribe, value, getSnapshot]
|
|
87
|
-
);
|
|
88
|
-
useEffect2(
|
|
89
|
-
function() {
|
|
90
|
-
checkIfSnapshotChanged(inst) && forceUpdate({ inst });
|
|
91
|
-
return subscribe(function() {
|
|
92
|
-
checkIfSnapshotChanged(inst) && forceUpdate({ inst });
|
|
93
|
-
});
|
|
94
|
-
},
|
|
95
|
-
[subscribe]
|
|
96
|
-
);
|
|
97
|
-
useDebugValue2(value);
|
|
98
|
-
return value;
|
|
99
|
-
}
|
|
100
|
-
function checkIfSnapshotChanged(inst) {
|
|
101
|
-
var latestGetSnapshot = inst.getSnapshot;
|
|
102
|
-
inst = inst.value;
|
|
103
|
-
try {
|
|
104
|
-
var nextValue = latestGetSnapshot();
|
|
105
|
-
return !objectIs(inst, nextValue);
|
|
106
|
-
} catch (error) {
|
|
107
|
-
return true;
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
function useSyncExternalStore$1(subscribe, getSnapshot) {
|
|
111
|
-
return getSnapshot();
|
|
112
|
-
}
|
|
113
|
-
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
|
|
114
|
-
var React = __require("react"), objectIs = "function" === typeof Object.is ? Object.is : is, useState2 = React.useState, useEffect2 = React.useEffect, useLayoutEffect2 = React.useLayoutEffect, useDebugValue2 = React.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
|
|
115
|
-
exports.useSyncExternalStore = void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim;
|
|
116
|
-
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
|
|
117
|
-
})();
|
|
118
|
-
}
|
|
119
|
-
});
|
|
120
|
-
|
|
121
|
-
// node_modules/use-sync-external-store/shim/index.js
|
|
122
|
-
var require_shim = __commonJS({
|
|
123
|
-
"node_modules/use-sync-external-store/shim/index.js"(exports, module) {
|
|
124
|
-
if (process.env.NODE_ENV === "production") {
|
|
125
|
-
module.exports = require_use_sync_external_store_shim_production();
|
|
126
|
-
} else {
|
|
127
|
-
module.exports = require_use_sync_external_store_shim_development();
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
});
|
|
131
|
-
|
|
132
|
-
// node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.js
|
|
133
|
-
var require_with_selector_production = __commonJS({
|
|
134
|
-
"node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.js"(exports) {
|
|
135
|
-
var React = __require("react");
|
|
136
|
-
var shim = require_shim();
|
|
137
|
-
function is(x, y) {
|
|
138
|
-
return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
|
|
139
|
-
}
|
|
140
|
-
var objectIs = "function" === typeof Object.is ? Object.is : is;
|
|
141
|
-
var useSyncExternalStore = shim.useSyncExternalStore;
|
|
142
|
-
var useRef2 = React.useRef;
|
|
143
|
-
var useEffect2 = React.useEffect;
|
|
144
|
-
var useMemo2 = React.useMemo;
|
|
145
|
-
var useDebugValue2 = React.useDebugValue;
|
|
146
|
-
exports.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
|
|
147
|
-
var instRef = useRef2(null);
|
|
148
|
-
if (null === instRef.current) {
|
|
149
|
-
var inst = { hasValue: false, value: null };
|
|
150
|
-
instRef.current = inst;
|
|
151
|
-
} else inst = instRef.current;
|
|
152
|
-
instRef = useMemo2(
|
|
153
|
-
function() {
|
|
154
|
-
function memoizedSelector(nextSnapshot) {
|
|
155
|
-
if (!hasMemo) {
|
|
156
|
-
hasMemo = true;
|
|
157
|
-
memoizedSnapshot = nextSnapshot;
|
|
158
|
-
nextSnapshot = selector(nextSnapshot);
|
|
159
|
-
if (void 0 !== isEqual && inst.hasValue) {
|
|
160
|
-
var currentSelection = inst.value;
|
|
161
|
-
if (isEqual(currentSelection, nextSnapshot))
|
|
162
|
-
return memoizedSelection = currentSelection;
|
|
163
|
-
}
|
|
164
|
-
return memoizedSelection = nextSnapshot;
|
|
165
|
-
}
|
|
166
|
-
currentSelection = memoizedSelection;
|
|
167
|
-
if (objectIs(memoizedSnapshot, nextSnapshot)) return currentSelection;
|
|
168
|
-
var nextSelection = selector(nextSnapshot);
|
|
169
|
-
if (void 0 !== isEqual && isEqual(currentSelection, nextSelection))
|
|
170
|
-
return memoizedSnapshot = nextSnapshot, currentSelection;
|
|
171
|
-
memoizedSnapshot = nextSnapshot;
|
|
172
|
-
return memoizedSelection = nextSelection;
|
|
173
|
-
}
|
|
174
|
-
var hasMemo = false, memoizedSnapshot, memoizedSelection, maybeGetServerSnapshot = void 0 === getServerSnapshot ? null : getServerSnapshot;
|
|
175
|
-
return [
|
|
176
|
-
function() {
|
|
177
|
-
return memoizedSelector(getSnapshot());
|
|
178
|
-
},
|
|
179
|
-
null === maybeGetServerSnapshot ? void 0 : function() {
|
|
180
|
-
return memoizedSelector(maybeGetServerSnapshot());
|
|
181
|
-
}
|
|
182
|
-
];
|
|
183
|
-
},
|
|
184
|
-
[getSnapshot, getServerSnapshot, selector, isEqual]
|
|
185
|
-
);
|
|
186
|
-
var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
|
|
187
|
-
useEffect2(
|
|
188
|
-
function() {
|
|
189
|
-
inst.hasValue = true;
|
|
190
|
-
inst.value = value;
|
|
191
|
-
},
|
|
192
|
-
[value]
|
|
193
|
-
);
|
|
194
|
-
useDebugValue2(value);
|
|
195
|
-
return value;
|
|
196
|
-
};
|
|
197
|
-
}
|
|
198
|
-
});
|
|
199
|
-
|
|
200
|
-
// node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js
|
|
201
|
-
var require_with_selector_development = __commonJS({
|
|
202
|
-
"node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js"(exports) {
|
|
203
|
-
"production" !== process.env.NODE_ENV && (function() {
|
|
204
|
-
function is(x, y) {
|
|
205
|
-
return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
|
|
206
|
-
}
|
|
207
|
-
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
|
|
208
|
-
var React = __require("react"), shim = require_shim(), objectIs = "function" === typeof Object.is ? Object.is : is, useSyncExternalStore = shim.useSyncExternalStore, useRef2 = React.useRef, useEffect2 = React.useEffect, useMemo2 = React.useMemo, useDebugValue2 = React.useDebugValue;
|
|
209
|
-
exports.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
|
|
210
|
-
var instRef = useRef2(null);
|
|
211
|
-
if (null === instRef.current) {
|
|
212
|
-
var inst = { hasValue: false, value: null };
|
|
213
|
-
instRef.current = inst;
|
|
214
|
-
} else inst = instRef.current;
|
|
215
|
-
instRef = useMemo2(
|
|
216
|
-
function() {
|
|
217
|
-
function memoizedSelector(nextSnapshot) {
|
|
218
|
-
if (!hasMemo) {
|
|
219
|
-
hasMemo = true;
|
|
220
|
-
memoizedSnapshot = nextSnapshot;
|
|
221
|
-
nextSnapshot = selector(nextSnapshot);
|
|
222
|
-
if (void 0 !== isEqual && inst.hasValue) {
|
|
223
|
-
var currentSelection = inst.value;
|
|
224
|
-
if (isEqual(currentSelection, nextSnapshot))
|
|
225
|
-
return memoizedSelection = currentSelection;
|
|
226
|
-
}
|
|
227
|
-
return memoizedSelection = nextSnapshot;
|
|
228
|
-
}
|
|
229
|
-
currentSelection = memoizedSelection;
|
|
230
|
-
if (objectIs(memoizedSnapshot, nextSnapshot))
|
|
231
|
-
return currentSelection;
|
|
232
|
-
var nextSelection = selector(nextSnapshot);
|
|
233
|
-
if (void 0 !== isEqual && isEqual(currentSelection, nextSelection))
|
|
234
|
-
return memoizedSnapshot = nextSnapshot, currentSelection;
|
|
235
|
-
memoizedSnapshot = nextSnapshot;
|
|
236
|
-
return memoizedSelection = nextSelection;
|
|
237
|
-
}
|
|
238
|
-
var hasMemo = false, memoizedSnapshot, memoizedSelection, maybeGetServerSnapshot = void 0 === getServerSnapshot ? null : getServerSnapshot;
|
|
239
|
-
return [
|
|
240
|
-
function() {
|
|
241
|
-
return memoizedSelector(getSnapshot());
|
|
242
|
-
},
|
|
243
|
-
null === maybeGetServerSnapshot ? void 0 : function() {
|
|
244
|
-
return memoizedSelector(maybeGetServerSnapshot());
|
|
245
|
-
}
|
|
246
|
-
];
|
|
247
|
-
},
|
|
248
|
-
[getSnapshot, getServerSnapshot, selector, isEqual]
|
|
249
|
-
);
|
|
250
|
-
var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
|
|
251
|
-
useEffect2(
|
|
252
|
-
function() {
|
|
253
|
-
inst.hasValue = true;
|
|
254
|
-
inst.value = value;
|
|
255
|
-
},
|
|
256
|
-
[value]
|
|
257
|
-
);
|
|
258
|
-
useDebugValue2(value);
|
|
259
|
-
return value;
|
|
260
|
-
};
|
|
261
|
-
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
|
|
262
|
-
})();
|
|
263
|
-
}
|
|
264
|
-
});
|
|
265
|
-
|
|
266
|
-
// node_modules/use-sync-external-store/shim/with-selector.js
|
|
267
|
-
var require_with_selector = __commonJS({
|
|
268
|
-
"node_modules/use-sync-external-store/shim/with-selector.js"(exports, module) {
|
|
269
|
-
if (process.env.NODE_ENV === "production") {
|
|
270
|
-
module.exports = require_with_selector_production();
|
|
271
|
-
} else {
|
|
272
|
-
module.exports = require_with_selector_development();
|
|
273
|
-
}
|
|
274
|
-
}
|
|
275
|
-
});
|
|
276
|
-
|
|
277
5
|
// node_modules/d3-dispatch/src/dispatch.js
|
|
278
6
|
var noop = { value: () => {
|
|
279
7
|
} };
|
|
@@ -3205,10 +2933,10 @@ function zoom_default2() {
|
|
|
3205
2933
|
|
|
3206
2934
|
// node_modules/@xyflow/system/dist/esm/index.js
|
|
3207
2935
|
var errorMessages = {
|
|
3208
|
-
error001: (
|
|
2936
|
+
error001: (lib = "react") => `Seems like you have not used zustand provider as an ancestor. Help: https://${lib}flow.dev/error#001`,
|
|
3209
2937
|
error002: () => "It looks like you've created a new nodeTypes or edgeTypes object. If this wasn't on purpose please define the nodeTypes/edgeTypes outside of the component or memoize them.",
|
|
3210
2938
|
error003: (nodeType) => `Node type "${nodeType}" not found. Using fallback type "default".`,
|
|
3211
|
-
error004: () => "The
|
|
2939
|
+
error004: () => "The parent container needs a width and a height to render the graph.",
|
|
3212
2940
|
error005: () => "Only child nodes can use a parent extent.",
|
|
3213
2941
|
error006: () => "Can't create edge. An edge needs a source and a target.",
|
|
3214
2942
|
error007: (id2) => `The old edge with id=${id2} does not exist.`,
|
|
@@ -3219,7 +2947,8 @@ var errorMessages = {
|
|
|
3219
2947
|
error012: (id2) => `Node with id "${id2}" does not exist, it may have been removed. This can happen when a node is deleted before the "onNodeClick" handler is called.`,
|
|
3220
2948
|
error013: (lib = "react") => `It seems that you haven't loaded the styles. Please import '@xyflow/${lib}/dist/style.css' or base.css to make sure everything is working properly.`,
|
|
3221
2949
|
error014: () => "useNodeConnections: No node ID found. Call useNodeConnections inside a custom Node or provide a node ID.",
|
|
3222
|
-
error015: () => "It seems that you are trying to drag a node that is not initialized. Please use onNodesChange as explained in the docs."
|
|
2950
|
+
error015: () => "It seems that you are trying to drag a node that is not initialized. Please use onNodesChange as explained in the docs.",
|
|
2951
|
+
error016: (id2) => `Edge with id "${id2}" does not exist, it may have been removed. This can happen when an edge is deleted before the "onEdgeClick" handler is called.`
|
|
3223
2952
|
};
|
|
3224
2953
|
var infiniteExtent = [
|
|
3225
2954
|
[Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
|
|
@@ -3387,7 +3116,7 @@ function getFitViewNodes(nodeLookup, options) {
|
|
|
3387
3116
|
}
|
|
3388
3117
|
async function fitViewport({ nodes, width, height, panZoom, minZoom, maxZoom }, options) {
|
|
3389
3118
|
if (nodes.size === 0) {
|
|
3390
|
-
return
|
|
3119
|
+
return true;
|
|
3391
3120
|
}
|
|
3392
3121
|
const nodesToFit = getFitViewNodes(nodes, options);
|
|
3393
3122
|
const bounds = getInternalNodesBounds(nodesToFit);
|
|
@@ -3397,7 +3126,7 @@ async function fitViewport({ nodes, width, height, panZoom, minZoom, maxZoom },
|
|
|
3397
3126
|
ease: options?.ease,
|
|
3398
3127
|
interpolate: options?.interpolate
|
|
3399
3128
|
});
|
|
3400
|
-
return
|
|
3129
|
+
return true;
|
|
3401
3130
|
}
|
|
3402
3131
|
function calculateNodePosition({ nodeId, nextPosition, nodeLookup, nodeOrigin = [0, 0], nodeExtent, onError }) {
|
|
3403
3132
|
const node = nodeLookup.get(nodeId);
|
|
@@ -3544,9 +3273,9 @@ var getOverlappingArea = (rectA, rectB) => {
|
|
|
3544
3273
|
};
|
|
3545
3274
|
var isRectObject = (obj) => isNumeric(obj.width) && isNumeric(obj.height) && isNumeric(obj.x) && isNumeric(obj.y);
|
|
3546
3275
|
var isNumeric = (n) => !isNaN(n) && isFinite(n);
|
|
3547
|
-
var
|
|
3276
|
+
var createDevWarn = (lib, helpUrl) => (id2, message) => {
|
|
3548
3277
|
if (process.env.NODE_ENV === "development") {
|
|
3549
|
-
console.warn(`[
|
|
3278
|
+
console.warn(`[${lib}]: ${message} Help: ${helpUrl}error#${id2}`);
|
|
3550
3279
|
}
|
|
3551
3280
|
};
|
|
3552
3281
|
var snapPosition = (position, snapGrid = [1, 1]) => {
|
|
@@ -3584,7 +3313,7 @@ function parsePadding(padding, viewport) {
|
|
|
3584
3313
|
return Math.floor(viewport * paddingValue * 0.01);
|
|
3585
3314
|
}
|
|
3586
3315
|
}
|
|
3587
|
-
console.error(`
|
|
3316
|
+
console.error(`The padding value "${padding}" is invalid. Please provide a number or a string with a valid unit (px or %).`);
|
|
3588
3317
|
return 0;
|
|
3589
3318
|
}
|
|
3590
3319
|
function parsePaddings(padding, width, height) {
|
|
@@ -3838,7 +3567,7 @@ var connectionExists = (edge, edges) => {
|
|
|
3838
3567
|
};
|
|
3839
3568
|
var addEdge = (edgeParams, edges, options = {}) => {
|
|
3840
3569
|
if (!edgeParams.source || !edgeParams.target) {
|
|
3841
|
-
|
|
3570
|
+
options.onError?.("006", errorMessages["error006"]());
|
|
3842
3571
|
return edges;
|
|
3843
3572
|
}
|
|
3844
3573
|
const edgeIdGenerator = options.getEdgeId || getEdgeId;
|
|
@@ -4434,7 +4163,7 @@ function updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOri
|
|
|
4434
4163
|
}
|
|
4435
4164
|
async function panBy({ delta, panZoom, transform: transform2, translateExtent, width, height }) {
|
|
4436
4165
|
if (!panZoom || !delta.x && !delta.y) {
|
|
4437
|
-
return
|
|
4166
|
+
return false;
|
|
4438
4167
|
}
|
|
4439
4168
|
const nextViewport = await panZoom.setViewportConstrained({
|
|
4440
4169
|
x: transform2[0] + delta.x,
|
|
@@ -4445,7 +4174,7 @@ async function panBy({ delta, panZoom, transform: transform2, translateExtent, w
|
|
|
4445
4174
|
[width, height]
|
|
4446
4175
|
], translateExtent);
|
|
4447
4176
|
const transformChanged = !!nextViewport && (nextViewport.x !== transform2[0] || nextViewport.y !== transform2[1] || nextViewport.k !== transform2[2]);
|
|
4448
|
-
return
|
|
4177
|
+
return transformChanged;
|
|
4449
4178
|
}
|
|
4450
4179
|
function addConnectionToLookup(type, connection, connectionKey, connectionLookup, nodeId, handleId) {
|
|
4451
4180
|
let key = nodeId;
|
|
@@ -4735,6 +4464,9 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
|
|
|
4735
4464
|
}
|
|
4736
4465
|
}).on("end", (event) => {
|
|
4737
4466
|
if (!dragStarted || abortDrag) {
|
|
4467
|
+
if (abortDrag && dragItems.size > 0) {
|
|
4468
|
+
getStoreItems().updateNodePositions(dragItems, false);
|
|
4469
|
+
}
|
|
4738
4470
|
return;
|
|
4739
4471
|
}
|
|
4740
4472
|
autoPanStarted = false;
|
|
@@ -5276,7 +5008,7 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
|
|
|
5276
5008
|
const zoomPanValues = {
|
|
5277
5009
|
isZoomingOrPanning: false,
|
|
5278
5010
|
usedRightMouseButton: false,
|
|
5279
|
-
prevViewport: {
|
|
5011
|
+
prevViewport: {},
|
|
5280
5012
|
mouseButton: 0,
|
|
5281
5013
|
timerId: void 0,
|
|
5282
5014
|
panScrollTimeout: void 0,
|
|
@@ -5296,13 +5028,13 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
|
|
|
5296
5028
|
const d3ZoomHandler = d3Selection.on("wheel.zoom");
|
|
5297
5029
|
const d3DblClickZoomHandler = d3Selection.on("dblclick.zoom");
|
|
5298
5030
|
d3ZoomInstance.wheelDelta(wheelDelta);
|
|
5299
|
-
function setTransform(transform2, options) {
|
|
5031
|
+
async function setTransform(transform2, options) {
|
|
5300
5032
|
if (d3Selection) {
|
|
5301
5033
|
return new Promise((resolve) => {
|
|
5302
5034
|
d3ZoomInstance?.interpolate(options?.interpolate === "linear" ? value_default : zoom_default).transform(getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)), transform2);
|
|
5303
5035
|
});
|
|
5304
5036
|
}
|
|
5305
|
-
return
|
|
5037
|
+
return false;
|
|
5306
5038
|
}
|
|
5307
5039
|
function update({ noWheelClassName, noPanClassName, onPaneContextMenu, userSelectionActive, panOnScroll, panOnDrag, panOnScrollMode, panOnScrollSpeed, preventScrolling, zoomOnPinch, zoomOnScroll, zoomOnDoubleClick, zoomActivationKeyPressed, lib, onTransformChange, connectionInProgress, paneClickDistance, selectionOnDrag }) {
|
|
5308
5040
|
if (userSelectionActive && !zoomPanValues.isZoomingOrPanning) {
|
|
@@ -5327,31 +5059,29 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
|
|
|
5327
5059
|
d3ZoomHandler
|
|
5328
5060
|
});
|
|
5329
5061
|
d3Selection.on("wheel.zoom", wheelHandler, { passive: false });
|
|
5330
|
-
|
|
5331
|
-
|
|
5332
|
-
|
|
5333
|
-
|
|
5334
|
-
|
|
5335
|
-
|
|
5336
|
-
|
|
5337
|
-
|
|
5338
|
-
|
|
5339
|
-
|
|
5340
|
-
|
|
5341
|
-
|
|
5342
|
-
|
|
5343
|
-
|
|
5344
|
-
|
|
5345
|
-
|
|
5346
|
-
|
|
5347
|
-
|
|
5348
|
-
|
|
5349
|
-
|
|
5350
|
-
|
|
5351
|
-
|
|
5352
|
-
|
|
5353
|
-
d3ZoomInstance.on("end", panZoomEndHandler);
|
|
5354
|
-
}
|
|
5062
|
+
const startHandler = createPanZoomStartHandler({
|
|
5063
|
+
zoomPanValues,
|
|
5064
|
+
onDraggingChange,
|
|
5065
|
+
onPanZoomStart
|
|
5066
|
+
});
|
|
5067
|
+
d3ZoomInstance.on("start", startHandler);
|
|
5068
|
+
const panZoomHandler = createPanZoomHandler({
|
|
5069
|
+
zoomPanValues,
|
|
5070
|
+
panOnDrag,
|
|
5071
|
+
onPaneContextMenu: !!onPaneContextMenu,
|
|
5072
|
+
onPanZoom,
|
|
5073
|
+
onTransformChange
|
|
5074
|
+
});
|
|
5075
|
+
d3ZoomInstance.on("zoom", panZoomHandler);
|
|
5076
|
+
const panZoomEndHandler = createPanZoomEndHandler({
|
|
5077
|
+
zoomPanValues,
|
|
5078
|
+
panOnDrag,
|
|
5079
|
+
panOnScroll,
|
|
5080
|
+
onPaneContextMenu,
|
|
5081
|
+
onPanZoomEnd,
|
|
5082
|
+
onDraggingChange
|
|
5083
|
+
});
|
|
5084
|
+
d3ZoomInstance.on("end", panZoomEndHandler);
|
|
5355
5085
|
const filter2 = createFilter({
|
|
5356
5086
|
zoomActivationKeyPressed,
|
|
5357
5087
|
panOnDrag,
|
|
@@ -5381,12 +5111,12 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
|
|
|
5381
5111
|
if (contrainedTransform) {
|
|
5382
5112
|
await setTransform(contrainedTransform);
|
|
5383
5113
|
}
|
|
5384
|
-
return
|
|
5114
|
+
return contrainedTransform;
|
|
5385
5115
|
}
|
|
5386
5116
|
async function setViewport(viewport2, options) {
|
|
5387
5117
|
const nextTransform = viewportToTransform(viewport2);
|
|
5388
5118
|
await setTransform(nextTransform, options);
|
|
5389
|
-
return
|
|
5119
|
+
return nextTransform;
|
|
5390
5120
|
}
|
|
5391
5121
|
function syncViewport(viewport2) {
|
|
5392
5122
|
if (d3Selection) {
|
|
@@ -5401,21 +5131,21 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
|
|
|
5401
5131
|
const transform2 = d3Selection ? transform(d3Selection.node()) : { x: 0, y: 0, k: 1 };
|
|
5402
5132
|
return { x: transform2.x, y: transform2.y, zoom: transform2.k };
|
|
5403
5133
|
}
|
|
5404
|
-
function scaleTo(zoom, options) {
|
|
5134
|
+
async function scaleTo(zoom, options) {
|
|
5405
5135
|
if (d3Selection) {
|
|
5406
5136
|
return new Promise((resolve) => {
|
|
5407
5137
|
d3ZoomInstance?.interpolate(options?.interpolate === "linear" ? value_default : zoom_default).scaleTo(getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)), zoom);
|
|
5408
5138
|
});
|
|
5409
5139
|
}
|
|
5410
|
-
return
|
|
5140
|
+
return false;
|
|
5411
5141
|
}
|
|
5412
|
-
function scaleBy(factor, options) {
|
|
5142
|
+
async function scaleBy(factor, options) {
|
|
5413
5143
|
if (d3Selection) {
|
|
5414
5144
|
return new Promise((resolve) => {
|
|
5415
5145
|
d3ZoomInstance?.interpolate(options?.interpolate === "linear" ? value_default : zoom_default).scaleBy(getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)), factor);
|
|
5416
5146
|
});
|
|
5417
5147
|
}
|
|
5418
|
-
return
|
|
5148
|
+
return false;
|
|
5419
5149
|
}
|
|
5420
5150
|
function setScaleExtent(scaleExtent) {
|
|
5421
5151
|
d3ZoomInstance?.scaleExtent(scaleExtent);
|
|
@@ -5610,12 +5340,6 @@ var initStartValues = {
|
|
|
5610
5340
|
pointerY: 0,
|
|
5611
5341
|
aspectRatio: 1
|
|
5612
5342
|
};
|
|
5613
|
-
function nodeToParentExtent(node) {
|
|
5614
|
-
return [
|
|
5615
|
-
[0, 0],
|
|
5616
|
-
[node.measured.width, node.measured.height]
|
|
5617
|
-
];
|
|
5618
|
-
}
|
|
5619
5343
|
function nodeToChildExtent(child, parent, nodeOrigin) {
|
|
5620
5344
|
const x = parent.position.x + child.position.x;
|
|
5621
5345
|
const y = parent.position.y + child.position.y;
|
|
@@ -5654,7 +5378,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
|
|
|
5654
5378
|
let containerBounds = null;
|
|
5655
5379
|
let childNodes = [];
|
|
5656
5380
|
let parentNode = void 0;
|
|
5657
|
-
let
|
|
5381
|
+
let nodeExtent = void 0;
|
|
5658
5382
|
let childExtent = void 0;
|
|
5659
5383
|
let resizeDetected = false;
|
|
5660
5384
|
const dragHandler = drag_default().on("start", (event) => {
|
|
@@ -5683,9 +5407,15 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
|
|
|
5683
5407
|
aspectRatio: prevValues.width / prevValues.height
|
|
5684
5408
|
};
|
|
5685
5409
|
parentNode = void 0;
|
|
5410
|
+
nodeExtent = isCoordinateExtent(node.extent) ? node.extent : void 0;
|
|
5686
5411
|
if (node.parentId && (node.extent === "parent" || node.expandParent)) {
|
|
5687
5412
|
parentNode = nodeLookup.get(node.parentId);
|
|
5688
|
-
|
|
5413
|
+
}
|
|
5414
|
+
if (parentNode && node.extent === "parent") {
|
|
5415
|
+
nodeExtent = [
|
|
5416
|
+
[0, 0],
|
|
5417
|
+
[parentNode.measured.width, parentNode.measured.height]
|
|
5418
|
+
];
|
|
5689
5419
|
}
|
|
5690
5420
|
childNodes = [];
|
|
5691
5421
|
childExtent = void 0;
|
|
@@ -5725,7 +5455,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
|
|
|
5725
5455
|
const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;
|
|
5726
5456
|
const change = {};
|
|
5727
5457
|
const nodeOrigin = node.origin ?? storeNodeOrigin;
|
|
5728
|
-
const { width, height, x, y } = getDimensionsAfterResize(startValues, params.controlDirection, pointerPosition, params.boundaries, params.keepAspectRatio, nodeOrigin,
|
|
5458
|
+
const { width, height, x, y } = getDimensionsAfterResize(startValues, params.controlDirection, pointerPosition, params.boundaries, params.keepAspectRatio, nodeOrigin, nodeExtent, childExtent);
|
|
5729
5459
|
const isWidthChange = width !== prevWidth;
|
|
5730
5460
|
const isHeightChange = height !== prevHeight;
|
|
5731
5461
|
const isXPosChange = x !== prevX && isWidthChange;
|
|
@@ -5820,9 +5550,62 @@ function cc(names) {
|
|
|
5820
5550
|
}
|
|
5821
5551
|
return out;
|
|
5822
5552
|
}
|
|
5823
|
-
|
|
5824
|
-
|
|
5825
|
-
|
|
5553
|
+
function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
|
|
5554
|
+
const instRef = useRef(null);
|
|
5555
|
+
let inst;
|
|
5556
|
+
if (instRef.current === null) {
|
|
5557
|
+
inst = { hasValue: false, value: null };
|
|
5558
|
+
instRef.current = inst;
|
|
5559
|
+
} else {
|
|
5560
|
+
inst = instRef.current;
|
|
5561
|
+
}
|
|
5562
|
+
const [getSelection, getServerSelection] = useMemo(() => {
|
|
5563
|
+
let hasMemo = false;
|
|
5564
|
+
let memoizedSnapshot;
|
|
5565
|
+
let memoizedSelection;
|
|
5566
|
+
const memoizedSelector = (nextSnapshot) => {
|
|
5567
|
+
if (!hasMemo) {
|
|
5568
|
+
hasMemo = true;
|
|
5569
|
+
memoizedSnapshot = nextSnapshot;
|
|
5570
|
+
const nextSelection2 = selector(nextSnapshot);
|
|
5571
|
+
if (isEqual !== void 0 && inst.hasValue) {
|
|
5572
|
+
const currentSelection = inst.value;
|
|
5573
|
+
if (isEqual(currentSelection, nextSelection2)) {
|
|
5574
|
+
memoizedSelection = currentSelection;
|
|
5575
|
+
return currentSelection;
|
|
5576
|
+
}
|
|
5577
|
+
}
|
|
5578
|
+
memoizedSelection = nextSelection2;
|
|
5579
|
+
return nextSelection2;
|
|
5580
|
+
}
|
|
5581
|
+
const prevSnapshot = memoizedSnapshot;
|
|
5582
|
+
const prevSelection = memoizedSelection;
|
|
5583
|
+
if (Object.is(prevSnapshot, nextSnapshot)) {
|
|
5584
|
+
return prevSelection;
|
|
5585
|
+
}
|
|
5586
|
+
const nextSelection = selector(nextSnapshot);
|
|
5587
|
+
if (isEqual !== void 0 && isEqual(prevSelection, nextSelection)) {
|
|
5588
|
+
memoizedSnapshot = nextSnapshot;
|
|
5589
|
+
return prevSelection;
|
|
5590
|
+
}
|
|
5591
|
+
memoizedSnapshot = nextSnapshot;
|
|
5592
|
+
memoizedSelection = nextSelection;
|
|
5593
|
+
return nextSelection;
|
|
5594
|
+
};
|
|
5595
|
+
const maybeGetServerSnapshot = getServerSnapshot === void 0 || getServerSnapshot === null ? null : getServerSnapshot;
|
|
5596
|
+
const getSnapshotWithSelector = () => memoizedSelector(getSnapshot());
|
|
5597
|
+
const getServerSnapshotWithSelector = maybeGetServerSnapshot === null ? void 0 : () => memoizedSelector(maybeGetServerSnapshot());
|
|
5598
|
+
return [getSnapshotWithSelector, getServerSnapshotWithSelector];
|
|
5599
|
+
}, [getSnapshot, getServerSnapshot, selector, isEqual]);
|
|
5600
|
+
const value = useSyncExternalStore(subscribe, getSelection, getServerSelection);
|
|
5601
|
+
useEffect(() => {
|
|
5602
|
+
inst.hasValue = true;
|
|
5603
|
+
inst.value = value;
|
|
5604
|
+
}, [value]);
|
|
5605
|
+
useDebugValue(value);
|
|
5606
|
+
return value;
|
|
5607
|
+
}
|
|
5608
|
+
var use_sync_external_store_with_selector_default = { useSyncExternalStoreWithSelector };
|
|
5826
5609
|
|
|
5827
5610
|
// node_modules/zustand/esm/vanilla.mjs
|
|
5828
5611
|
var createStoreImpl = (createState) => {
|
|
@@ -5857,18 +5640,18 @@ var createStoreImpl = (createState) => {
|
|
|
5857
5640
|
var createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
|
|
5858
5641
|
|
|
5859
5642
|
// node_modules/zustand/esm/traditional.mjs
|
|
5860
|
-
var { useDebugValue } = ReactExports;
|
|
5861
|
-
var { useSyncExternalStoreWithSelector } =
|
|
5643
|
+
var { useDebugValue: useDebugValue2 } = ReactExports;
|
|
5644
|
+
var { useSyncExternalStoreWithSelector: useSyncExternalStoreWithSelector2 } = use_sync_external_store_with_selector_default;
|
|
5862
5645
|
var identity3 = (arg) => arg;
|
|
5863
5646
|
function useStoreWithEqualityFn(api, selector = identity3, equalityFn) {
|
|
5864
|
-
const slice =
|
|
5647
|
+
const slice = useSyncExternalStoreWithSelector2(
|
|
5865
5648
|
api.subscribe,
|
|
5866
5649
|
api.getState,
|
|
5867
5650
|
api.getServerState || api.getInitialState,
|
|
5868
5651
|
selector,
|
|
5869
5652
|
equalityFn
|
|
5870
5653
|
);
|
|
5871
|
-
|
|
5654
|
+
useDebugValue2(slice);
|
|
5872
5655
|
return slice;
|
|
5873
5656
|
}
|
|
5874
5657
|
var createWithEqualityFnImpl = (createState, defaultEqualityFn) => {
|
|
@@ -5918,7 +5701,7 @@ function shallow$1(objA, objB) {
|
|
|
5918
5701
|
}
|
|
5919
5702
|
var StoreContext = createContext(null);
|
|
5920
5703
|
var Provider$1 = StoreContext.Provider;
|
|
5921
|
-
var zustandErrorMessage = errorMessages["error001"]();
|
|
5704
|
+
var zustandErrorMessage = errorMessages["error001"]("react");
|
|
5922
5705
|
function useStore(selector, equalityFn) {
|
|
5923
5706
|
const store = useContext(StoreContext);
|
|
5924
5707
|
if (store === null) {
|
|
@@ -6010,7 +5793,6 @@ function SelectionListener({ onSelectionChange }) {
|
|
|
6010
5793
|
}
|
|
6011
5794
|
return null;
|
|
6012
5795
|
}
|
|
6013
|
-
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
|
|
6014
5796
|
var defaultNodeOrigin = [0, 0];
|
|
6015
5797
|
var defaultViewport = { x: 0, y: 0, zoom: 1 };
|
|
6016
5798
|
var reactFlowFieldsToTrack = [
|
|
@@ -6101,7 +5883,7 @@ var initPrevValues2 = {
|
|
|
6101
5883
|
function StoreUpdater(props) {
|
|
6102
5884
|
const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges } = useStore(selector$l, shallow$1);
|
|
6103
5885
|
const store = useStoreApi();
|
|
6104
|
-
|
|
5886
|
+
useEffect(() => {
|
|
6105
5887
|
setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges);
|
|
6106
5888
|
return () => {
|
|
6107
5889
|
previousFields.current = initPrevValues2;
|
|
@@ -6109,7 +5891,7 @@ function StoreUpdater(props) {
|
|
|
6109
5891
|
};
|
|
6110
5892
|
}, []);
|
|
6111
5893
|
const previousFields = useRef(initPrevValues2);
|
|
6112
|
-
|
|
5894
|
+
useEffect(
|
|
6113
5895
|
() => {
|
|
6114
5896
|
for (const fieldName of fieldsToTrack) {
|
|
6115
5897
|
const fieldValue = props[fieldName];
|
|
@@ -6245,30 +6027,30 @@ var useViewportHelper = () => {
|
|
|
6245
6027
|
const store = useStoreApi();
|
|
6246
6028
|
return useMemo(() => {
|
|
6247
6029
|
return {
|
|
6248
|
-
zoomIn: (options) => {
|
|
6030
|
+
zoomIn: async (options) => {
|
|
6249
6031
|
const { panZoom } = store.getState();
|
|
6250
|
-
return panZoom ? panZoom.scaleBy(1.2, options) :
|
|
6032
|
+
return panZoom ? panZoom.scaleBy(1.2, options) : false;
|
|
6251
6033
|
},
|
|
6252
|
-
zoomOut: (options) => {
|
|
6034
|
+
zoomOut: async (options) => {
|
|
6253
6035
|
const { panZoom } = store.getState();
|
|
6254
|
-
return panZoom ? panZoom.scaleBy(1 / 1.2, options) :
|
|
6036
|
+
return panZoom ? panZoom.scaleBy(1 / 1.2, options) : false;
|
|
6255
6037
|
},
|
|
6256
|
-
zoomTo: (zoomLevel, options) => {
|
|
6038
|
+
zoomTo: async (zoomLevel, options) => {
|
|
6257
6039
|
const { panZoom } = store.getState();
|
|
6258
|
-
return panZoom ? panZoom.scaleTo(zoomLevel, options) :
|
|
6040
|
+
return panZoom ? panZoom.scaleTo(zoomLevel, options) : false;
|
|
6259
6041
|
},
|
|
6260
6042
|
getZoom: () => store.getState().transform[2],
|
|
6261
6043
|
setViewport: async (viewport, options) => {
|
|
6262
6044
|
const { transform: [tX, tY, tZoom], panZoom } = store.getState();
|
|
6263
6045
|
if (!panZoom) {
|
|
6264
|
-
return
|
|
6046
|
+
return false;
|
|
6265
6047
|
}
|
|
6266
6048
|
await panZoom.setViewport({
|
|
6267
6049
|
x: viewport.x ?? tX,
|
|
6268
6050
|
y: viewport.y ?? tY,
|
|
6269
6051
|
zoom: viewport.zoom ?? tZoom
|
|
6270
6052
|
}, options);
|
|
6271
|
-
return
|
|
6053
|
+
return true;
|
|
6272
6054
|
},
|
|
6273
6055
|
getViewport: () => {
|
|
6274
6056
|
const [x, y, zoom] = store.getState().transform;
|
|
@@ -6281,14 +6063,14 @@ var useViewportHelper = () => {
|
|
|
6281
6063
|
const { width, height, minZoom, maxZoom, panZoom } = store.getState();
|
|
6282
6064
|
const viewport = getViewportForBounds(bounds, width, height, minZoom, maxZoom, options?.padding ?? 0.1);
|
|
6283
6065
|
if (!panZoom) {
|
|
6284
|
-
return
|
|
6066
|
+
return false;
|
|
6285
6067
|
}
|
|
6286
6068
|
await panZoom.setViewport(viewport, {
|
|
6287
6069
|
duration: options?.duration,
|
|
6288
6070
|
ease: options?.ease,
|
|
6289
6071
|
interpolate: options?.interpolate
|
|
6290
6072
|
});
|
|
6291
|
-
return
|
|
6073
|
+
return true;
|
|
6292
6074
|
},
|
|
6293
6075
|
screenToFlowPosition: (clientPosition, options = {}) => {
|
|
6294
6076
|
const { transform: transform2, snapGrid, snapToGrid, domNode } = store.getState();
|
|
@@ -6457,11 +6239,19 @@ function elementToRemoveChange(item) {
|
|
|
6457
6239
|
type: "remove"
|
|
6458
6240
|
};
|
|
6459
6241
|
}
|
|
6242
|
+
var defaultOnError = createDevWarn("React Flow", "https://reactflow.dev/");
|
|
6243
|
+
function addEdge2(edgeParams, edges, options = {}) {
|
|
6244
|
+
return addEdge(edgeParams, edges, {
|
|
6245
|
+
...options,
|
|
6246
|
+
onError: options.onError ?? defaultOnError
|
|
6247
|
+
});
|
|
6248
|
+
}
|
|
6460
6249
|
var isNode = (element) => isNodeBase(element);
|
|
6461
6250
|
var isEdge = (element) => isEdgeBase(element);
|
|
6462
6251
|
function fixedForwardRef(render) {
|
|
6463
6252
|
return forwardRef(render);
|
|
6464
6253
|
}
|
|
6254
|
+
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
|
|
6465
6255
|
function useQueue(runQueue) {
|
|
6466
6256
|
const [serial, setSerial] = useState(BigInt(0));
|
|
6467
6257
|
const [queue] = useState(() => createQueue(() => setSerial((n) => n + BigInt(1))));
|
|
@@ -6892,17 +6682,22 @@ var selector$h = (s) => ({
|
|
|
6892
6682
|
userSelectionActive: s.userSelectionActive,
|
|
6893
6683
|
elementsSelectable: s.elementsSelectable,
|
|
6894
6684
|
connectionInProgress: s.connection.inProgress,
|
|
6895
|
-
dragging: s.paneDragging
|
|
6685
|
+
dragging: s.paneDragging,
|
|
6686
|
+
panBy: s.panBy,
|
|
6687
|
+
autoPanSpeed: s.autoPanSpeed
|
|
6896
6688
|
});
|
|
6897
|
-
function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, paneClickDistance, selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children: children2 }) {
|
|
6689
|
+
function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, autoPanOnSelection, paneClickDistance, selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children: children2 }) {
|
|
6690
|
+
const autoPanId = useRef(0);
|
|
6898
6691
|
const store = useStoreApi();
|
|
6899
|
-
const { userSelectionActive, elementsSelectable, dragging, connectionInProgress } = useStore(selector$h, shallow$1);
|
|
6692
|
+
const { userSelectionActive, elementsSelectable, dragging, connectionInProgress, panBy: panBy2, autoPanSpeed } = useStore(selector$h, shallow$1);
|
|
6900
6693
|
const isSelectionEnabled = elementsSelectable && (isSelecting || userSelectionActive);
|
|
6901
6694
|
const container = useRef(null);
|
|
6902
6695
|
const containerBounds = useRef();
|
|
6903
6696
|
const selectedNodeIds = useRef(/* @__PURE__ */ new Set());
|
|
6904
6697
|
const selectedEdgeIds = useRef(/* @__PURE__ */ new Set());
|
|
6905
6698
|
const selectionInProgress = useRef(false);
|
|
6699
|
+
const position = useRef({ x: 0, y: 0 });
|
|
6700
|
+
const autoPanStarted = useRef(false);
|
|
6906
6701
|
const onClick = (event) => {
|
|
6907
6702
|
if (selectionInProgress.current || connectionInProgress) {
|
|
6908
6703
|
selectionInProgress.current = false;
|
|
@@ -6927,7 +6722,7 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
|
|
|
6927
6722
|
}
|
|
6928
6723
|
};
|
|
6929
6724
|
const onPointerDownCapture = (event) => {
|
|
6930
|
-
const { domNode } = store.getState();
|
|
6725
|
+
const { domNode, transform: transform2 } = store.getState();
|
|
6931
6726
|
containerBounds.current = domNode?.getBoundingClientRect();
|
|
6932
6727
|
if (!containerBounds.current)
|
|
6933
6728
|
return;
|
|
@@ -6940,12 +6735,13 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
|
|
|
6940
6735
|
event.target?.setPointerCapture?.(event.pointerId);
|
|
6941
6736
|
selectionInProgress.current = false;
|
|
6942
6737
|
const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
|
|
6738
|
+
const userSelectionStartPosition = pointToRendererPoint({ x, y }, transform2);
|
|
6943
6739
|
store.setState({
|
|
6944
6740
|
userSelectionRect: {
|
|
6945
6741
|
width: 0,
|
|
6946
6742
|
height: 0,
|
|
6947
|
-
startX: x,
|
|
6948
|
-
startY: y,
|
|
6743
|
+
startX: userSelectionStartPosition.x,
|
|
6744
|
+
startY: userSelectionStartPosition.y,
|
|
6949
6745
|
x,
|
|
6950
6746
|
y
|
|
6951
6747
|
}
|
|
@@ -6955,30 +6751,21 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
|
|
|
6955
6751
|
event.preventDefault();
|
|
6956
6752
|
}
|
|
6957
6753
|
};
|
|
6958
|
-
|
|
6959
|
-
const { userSelectionRect
|
|
6960
|
-
if (!
|
|
6754
|
+
function commitUserSelectionRect(mouseX, mouseY) {
|
|
6755
|
+
const { userSelectionRect } = store.getState();
|
|
6756
|
+
if (!userSelectionRect) {
|
|
6961
6757
|
return;
|
|
6962
6758
|
}
|
|
6963
|
-
const {
|
|
6964
|
-
const { startX, startY }
|
|
6965
|
-
|
|
6966
|
-
const requiredDistance = selectionKeyPressed ? 0 : paneClickDistance;
|
|
6967
|
-
const distance2 = Math.hypot(mouseX - startX, mouseY - startY);
|
|
6968
|
-
if (distance2 <= requiredDistance) {
|
|
6969
|
-
return;
|
|
6970
|
-
}
|
|
6971
|
-
resetSelectedElements();
|
|
6972
|
-
onSelectionStart?.(event);
|
|
6973
|
-
}
|
|
6974
|
-
selectionInProgress.current = true;
|
|
6759
|
+
const { transform: transform2, nodeLookup, edgeLookup, connectionLookup, triggerNodeChanges, triggerEdgeChanges, defaultEdgeOptions } = store.getState();
|
|
6760
|
+
const userStartPosition = { x: userSelectionRect.startX, y: userSelectionRect.startY };
|
|
6761
|
+
const { x: screenStartX, y: screenStartY } = rendererPointToPoint(userStartPosition, transform2);
|
|
6975
6762
|
const nextUserSelectRect = {
|
|
6976
|
-
startX,
|
|
6977
|
-
startY,
|
|
6978
|
-
x: mouseX <
|
|
6979
|
-
y: mouseY <
|
|
6980
|
-
width: Math.abs(mouseX -
|
|
6981
|
-
height: Math.abs(mouseY -
|
|
6763
|
+
startX: userStartPosition.x,
|
|
6764
|
+
startY: userStartPosition.y,
|
|
6765
|
+
x: mouseX < screenStartX ? mouseX : screenStartX,
|
|
6766
|
+
y: mouseY < screenStartY ? mouseY : screenStartY,
|
|
6767
|
+
width: Math.abs(mouseX - screenStartX),
|
|
6768
|
+
height: Math.abs(mouseY - screenStartY)
|
|
6982
6769
|
};
|
|
6983
6770
|
const prevSelectedNodeIds = selectedNodeIds.current;
|
|
6984
6771
|
const prevSelectedEdgeIds = selectedEdgeIds.current;
|
|
@@ -7009,6 +6796,53 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
|
|
|
7009
6796
|
userSelectionActive: true,
|
|
7010
6797
|
nodesSelectionActive: false
|
|
7011
6798
|
});
|
|
6799
|
+
}
|
|
6800
|
+
function autoPan() {
|
|
6801
|
+
if (!autoPanOnSelection || !containerBounds.current) {
|
|
6802
|
+
return;
|
|
6803
|
+
}
|
|
6804
|
+
const [x, y] = calcAutoPan(position.current, containerBounds.current, autoPanSpeed);
|
|
6805
|
+
panBy2({ x, y }).then((panned) => {
|
|
6806
|
+
if (!selectionInProgress.current || !panned) {
|
|
6807
|
+
autoPanId.current = requestAnimationFrame(autoPan);
|
|
6808
|
+
return;
|
|
6809
|
+
}
|
|
6810
|
+
const { x: mx, y: my } = position.current;
|
|
6811
|
+
commitUserSelectionRect(mx, my);
|
|
6812
|
+
autoPanId.current = requestAnimationFrame(autoPan);
|
|
6813
|
+
});
|
|
6814
|
+
}
|
|
6815
|
+
const cleanupAutoPan = () => {
|
|
6816
|
+
cancelAnimationFrame(autoPanId.current);
|
|
6817
|
+
autoPanId.current = 0;
|
|
6818
|
+
autoPanStarted.current = false;
|
|
6819
|
+
};
|
|
6820
|
+
useEffect(() => {
|
|
6821
|
+
return () => cleanupAutoPan();
|
|
6822
|
+
}, []);
|
|
6823
|
+
const onPointerMove = (event) => {
|
|
6824
|
+
const { userSelectionRect, transform: transform2, resetSelectedElements } = store.getState();
|
|
6825
|
+
if (!containerBounds.current || !userSelectionRect) {
|
|
6826
|
+
return;
|
|
6827
|
+
}
|
|
6828
|
+
const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current);
|
|
6829
|
+
position.current = { x: mouseX, y: mouseY };
|
|
6830
|
+
const screenStart = rendererPointToPoint({ x: userSelectionRect.startX, y: userSelectionRect.startY }, transform2);
|
|
6831
|
+
if (!selectionInProgress.current) {
|
|
6832
|
+
const requiredDistance = selectionKeyPressed ? 0 : paneClickDistance;
|
|
6833
|
+
const distance2 = Math.hypot(mouseX - screenStart.x, mouseY - screenStart.y);
|
|
6834
|
+
if (distance2 <= requiredDistance) {
|
|
6835
|
+
return;
|
|
6836
|
+
}
|
|
6837
|
+
resetSelectedElements();
|
|
6838
|
+
onSelectionStart?.(event);
|
|
6839
|
+
}
|
|
6840
|
+
selectionInProgress.current = true;
|
|
6841
|
+
if (!autoPanStarted.current) {
|
|
6842
|
+
autoPan();
|
|
6843
|
+
autoPanStarted.current = true;
|
|
6844
|
+
}
|
|
6845
|
+
commitUserSelectionRect(mouseX, mouseY);
|
|
7012
6846
|
};
|
|
7013
6847
|
const onPointerUp = (event) => {
|
|
7014
6848
|
if (event.button !== 0) {
|
|
@@ -7028,9 +6862,14 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
|
|
|
7028
6862
|
nodesSelectionActive: selectedNodeIds.current.size > 0
|
|
7029
6863
|
});
|
|
7030
6864
|
}
|
|
6865
|
+
cleanupAutoPan();
|
|
6866
|
+
};
|
|
6867
|
+
const onPointerCancel = (event) => {
|
|
6868
|
+
event.target?.releasePointerCapture?.(event.pointerId);
|
|
6869
|
+
cleanupAutoPan();
|
|
7031
6870
|
};
|
|
7032
6871
|
const draggable = panOnDrag === true || Array.isArray(panOnDrag) && panOnDrag.includes(0);
|
|
7033
|
-
return jsxs("div", { className: cc(["react-flow__pane", { draggable, dragging, selection: isSelecting }]), onClick: isSelectionEnabled ? void 0 : wrapHandler(onClick, container), onContextMenu: wrapHandler(onContextMenu, container), onWheel: wrapHandler(onWheel, container), onPointerEnter: isSelectionEnabled ? void 0 : onPaneMouseEnter, onPointerMove: isSelectionEnabled ? onPointerMove : onPaneMouseMove, onPointerUp: isSelectionEnabled ? onPointerUp : void 0, onPointerDownCapture: isSelectionEnabled ? onPointerDownCapture : void 0, onClickCapture: isSelectionEnabled ? onClickCapture : void 0, onPointerLeave: onPaneMouseLeave, ref: container, style: containerStyle, children: [children2, jsx(UserSelection, {})] });
|
|
6872
|
+
return jsxs("div", { className: cc(["react-flow__pane", { draggable, dragging, selection: isSelecting }]), onClick: isSelectionEnabled ? void 0 : wrapHandler(onClick, container), onContextMenu: wrapHandler(onContextMenu, container), onWheel: wrapHandler(onWheel, container), onPointerEnter: isSelectionEnabled ? void 0 : onPaneMouseEnter, onPointerMove: isSelectionEnabled ? onPointerMove : onPaneMouseMove, onPointerUp: isSelectionEnabled ? onPointerUp : void 0, onPointerCancel: isSelectionEnabled ? onPointerCancel : void 0, onPointerDownCapture: isSelectionEnabled ? onPointerDownCapture : void 0, onClickCapture: isSelectionEnabled ? onClickCapture : void 0, onPointerLeave: onPaneMouseLeave, ref: container, style: containerStyle, children: [children2, jsx(UserSelection, {})] });
|
|
7034
6873
|
}
|
|
7035
6874
|
function handleNodeClick({ id: id2, store, unselect = false, nodeRef }) {
|
|
7036
6875
|
const { addSelectedNodes, unselectNodesAndEdges, multiSelectionActive, nodeLookup, onError } = store.getState();
|
|
@@ -7168,8 +7007,8 @@ function HandleComponent({ type = "source", position = Position.Top, isValidConn
|
|
|
7168
7007
|
...params
|
|
7169
7008
|
};
|
|
7170
7009
|
if (hasDefaultEdges) {
|
|
7171
|
-
const { edges, setEdges } = store.getState();
|
|
7172
|
-
setEdges(
|
|
7010
|
+
const { edges, setEdges, onError } = store.getState();
|
|
7011
|
+
setEdges(addEdge2(edgeParams, edges, { onError }));
|
|
7173
7012
|
}
|
|
7174
7013
|
onConnectAction?.(edgeParams);
|
|
7175
7014
|
onConnect?.(edgeParams);
|
|
@@ -7365,7 +7204,7 @@ var win = typeof window !== "undefined" ? window : void 0;
|
|
|
7365
7204
|
var selector$e = (s) => {
|
|
7366
7205
|
return { nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive };
|
|
7367
7206
|
};
|
|
7368
|
-
function FlowRendererComponent({ children: children2, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, paneClickDistance, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll: _panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: _panOnDrag, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, preventScrolling, onSelectionContextMenu, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport }) {
|
|
7207
|
+
function FlowRendererComponent({ children: children2, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, paneClickDistance, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll: _panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: _panOnDrag, autoPanOnSelection, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, preventScrolling, onSelectionContextMenu, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport }) {
|
|
7369
7208
|
const { nodesSelectionActive, userSelectionActive } = useStore(selector$e, shallow$1);
|
|
7370
7209
|
const selectionKeyPressed = useKeyPress(selectionKeyCode, { target: win });
|
|
7371
7210
|
const panActivationKeyPressed = useKeyPress(panActivationKeyCode, { target: win });
|
|
@@ -7374,7 +7213,7 @@ function FlowRendererComponent({ children: children2, onPaneClick, onPaneMouseEn
|
|
|
7374
7213
|
const _selectionOnDrag = selectionOnDrag && panOnDrag !== true;
|
|
7375
7214
|
const isSelecting = selectionKeyPressed || userSelectionActive || _selectionOnDrag;
|
|
7376
7215
|
useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode });
|
|
7377
|
-
return jsx(ZoomPane, { onPaneContextMenu, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: !selectionKeyPressed && panOnDrag, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance, selectionOnDrag: _selectionOnDrag, children: jsxs(Pane, { onSelectionStart, onSelectionEnd, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, panOnDrag, isSelecting: !!isSelecting, selectionMode, selectionKeyPressed, paneClickDistance, selectionOnDrag: _selectionOnDrag, children: [children2, nodesSelectionActive && jsx(NodesSelection, { onSelectionContextMenu, noPanClassName, disableKeyboardA11y })] }) });
|
|
7216
|
+
return jsx(ZoomPane, { onPaneContextMenu, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: !selectionKeyPressed && panOnDrag, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance, selectionOnDrag: _selectionOnDrag, children: jsxs(Pane, { onSelectionStart, onSelectionEnd, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, panOnDrag, autoPanOnSelection, isSelecting: !!isSelecting, selectionMode, selectionKeyPressed, paneClickDistance, selectionOnDrag: _selectionOnDrag, children: [children2, nodesSelectionActive && jsx(NodesSelection, { onSelectionContextMenu, noPanClassName, disableKeyboardA11y })] }) });
|
|
7378
7217
|
}
|
|
7379
7218
|
FlowRendererComponent.displayName = "FlowRenderer";
|
|
7380
7219
|
var FlowRenderer = memo(FlowRendererComponent);
|
|
@@ -8179,16 +8018,17 @@ function useStylesLoadedWarning() {
|
|
|
8179
8018
|
}
|
|
8180
8019
|
}, []);
|
|
8181
8020
|
}
|
|
8182
|
-
function GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeClick, onNodeDoubleClick, onEdgeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onSelectionContextMenu, onSelectionStart, onSelectionEnd, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, deleteKeyCode, onlyRenderVisibleElements, elementsSelectable, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, preventScrolling, defaultMarkerColor, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance, nodeClickDistance, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, onReconnect, onReconnectStart, onReconnectEnd, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, nodeExtent, rfId, viewport, onViewportChange }) {
|
|
8021
|
+
function GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeClick, onNodeDoubleClick, onEdgeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onSelectionContextMenu, onSelectionStart, onSelectionEnd, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, deleteKeyCode, onlyRenderVisibleElements, elementsSelectable, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, preventScrolling, defaultMarkerColor, zoomOnScroll, zoomOnPinch, panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag, autoPanOnSelection, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance, nodeClickDistance, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, onReconnect, onReconnectStart, onReconnectEnd, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, nodeExtent, rfId, viewport, onViewportChange }) {
|
|
8183
8022
|
useNodeOrEdgeTypesWarning(nodeTypes);
|
|
8184
8023
|
useNodeOrEdgeTypesWarning(edgeTypes);
|
|
8185
8024
|
useStylesLoadedWarning();
|
|
8186
8025
|
useOnInitHandler(onInit);
|
|
8187
8026
|
useViewportSync(viewport);
|
|
8188
|
-
return jsx(FlowRenderer, { onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, paneClickDistance, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, onSelectionContextMenu, preventScrolling, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport: !!viewport, children: jsxs(Viewport, { children: [jsx(EdgeRenderer, { edgeTypes, onEdgeClick, onEdgeDoubleClick, onReconnect, onReconnectStart, onReconnectEnd, onlyRenderVisibleElements, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, defaultMarkerColor, noPanClassName, disableKeyboardA11y, rfId }), jsx(ConnectionLineWrapper, { style: connectionLineStyle, type: connectionLineType, component: connectionLineComponent, containerStyle: connectionLineContainerStyle }), jsx("div", { className: "react-flow__edgelabel-renderer" }), jsx(NodeRenderer, { nodeTypes, onNodeClick, onNodeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, nodeClickDistance, onlyRenderVisibleElements, noPanClassName, noDragClassName, disableKeyboardA11y, nodeExtent, rfId }), jsx("div", { className: "react-flow__viewport-portal" })] }) });
|
|
8027
|
+
return jsx(FlowRenderer, { onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, paneClickDistance, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, autoPanOnSelection, defaultViewport: defaultViewport2, translateExtent, minZoom, maxZoom, onSelectionContextMenu, preventScrolling, noDragClassName, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport: !!viewport, children: jsxs(Viewport, { children: [jsx(EdgeRenderer, { edgeTypes, onEdgeClick, onEdgeDoubleClick, onReconnect, onReconnectStart, onReconnectEnd, onlyRenderVisibleElements, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, defaultMarkerColor, noPanClassName, disableKeyboardA11y, rfId }), jsx(ConnectionLineWrapper, { style: connectionLineStyle, type: connectionLineType, component: connectionLineComponent, containerStyle: connectionLineContainerStyle }), jsx("div", { className: "react-flow__edgelabel-renderer" }), jsx(NodeRenderer, { nodeTypes, onNodeClick, onNodeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, nodeClickDistance, onlyRenderVisibleElements, noPanClassName, noDragClassName, disableKeyboardA11y, nodeExtent, rfId }), jsx("div", { className: "react-flow__viewport-portal" })] }) });
|
|
8189
8028
|
}
|
|
8190
8029
|
GraphViewComponent.displayName = "GraphView";
|
|
8191
8030
|
var GraphView = memo(GraphViewComponent);
|
|
8031
|
+
var devWarn = createDevWarn("React Flow", "https://reactflow.dev/");
|
|
8192
8032
|
var getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom = 0.5, maxZoom = 2, nodeOrigin, nodeExtent, zIndexMode = "basic" } = {}) => {
|
|
8193
8033
|
const nodeLookup = /* @__PURE__ */ new Map();
|
|
8194
8034
|
const parentLookup = /* @__PURE__ */ new Map();
|
|
@@ -8535,7 +8375,7 @@ var createStore2 = ({ nodes, edges, defaultNodes, defaultEdges, width, height, f
|
|
|
8535
8375
|
setCenter: async (x, y, options) => {
|
|
8536
8376
|
const { width: width2, height: height2, maxZoom: maxZoom2, panZoom } = get3();
|
|
8537
8377
|
if (!panZoom) {
|
|
8538
|
-
return
|
|
8378
|
+
return false;
|
|
8539
8379
|
}
|
|
8540
8380
|
const nextZoom = typeof options?.zoom !== "undefined" ? options.zoom : maxZoom2;
|
|
8541
8381
|
await panZoom.setViewport({
|
|
@@ -8543,7 +8383,7 @@ var createStore2 = ({ nodes, edges, defaultNodes, defaultEdges, width, height, f
|
|
|
8543
8383
|
y: height2 / 2 - y * nextZoom,
|
|
8544
8384
|
zoom: nextZoom
|
|
8545
8385
|
}, { duration: options?.duration, ease: options?.ease, interpolate: options?.interpolate });
|
|
8546
|
-
return
|
|
8386
|
+
return true;
|
|
8547
8387
|
},
|
|
8548
8388
|
cancelConnection: () => {
|
|
8549
8389
|
set3({
|
|
@@ -8588,14 +8428,14 @@ var wrapperStyle = {
|
|
|
8588
8428
|
position: "relative",
|
|
8589
8429
|
zIndex: 0
|
|
8590
8430
|
};
|
|
8591
|
-
function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes, edgeTypes, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = "Backspace", selectionKeyCode = "Shift", selectionOnDrag = false, selectionMode = SelectionMode.Full, panActivationKeyCode = "Space", multiSelectionKeyCode = isMacOs() ? "Meta" : "Control", zoomActivationKeyCode = isMacOs() ? "Meta" : "Control", snapToGrid, snapGrid, onlyRenderVisibleElements = false, selectNodesOnDrag, nodesDraggable, autoPanOnNodeFocus, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesReconnectable, elementsSelectable = true, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = true, nodeExtent, defaultMarkerColor = "#b1b1b7", zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance = 1, nodeClickDistance = 0, children: children2, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius = 10, onNodesChange, onEdgesChange, noDragClassName = "nodrag", noWheelClassName = "nowheel", noPanClassName = "nopan", fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect = true, elevateEdgesOnSelect = false, disableKeyboardA11y = false, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, connectionRadius, isValidConnection, onError, style: style2, id: id2, nodeDragThreshold, connectionDragThreshold, viewport, onViewportChange, width, height, colorMode = "light", debug, onScroll, ariaLabelConfig, zIndexMode = "basic", ...rest }, ref) {
|
|
8431
|
+
function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes, edgeTypes, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = "Backspace", selectionKeyCode = "Shift", selectionOnDrag = false, selectionMode = SelectionMode.Full, panActivationKeyCode = "Space", multiSelectionKeyCode = isMacOs() ? "Meta" : "Control", zoomActivationKeyCode = isMacOs() ? "Meta" : "Control", snapToGrid, snapGrid, onlyRenderVisibleElements = false, selectNodesOnDrag, nodesDraggable, autoPanOnNodeFocus, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesReconnectable, elementsSelectable = true, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = true, nodeExtent, defaultMarkerColor = "#b1b1b7", zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance = 1, nodeClickDistance = 0, children: children2, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius = 10, onNodesChange, onEdgesChange, noDragClassName = "nodrag", noWheelClassName = "nowheel", noPanClassName = "nopan", fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect = true, elevateEdgesOnSelect = false, disableKeyboardA11y = false, autoPanOnConnect, autoPanOnNodeDrag, autoPanOnSelection = true, autoPanSpeed, connectionRadius, isValidConnection, onError, style: style2, id: id2, nodeDragThreshold, connectionDragThreshold, viewport, onViewportChange, width, height, colorMode = "light", debug, onScroll, ariaLabelConfig, zIndexMode = "basic", ...rest }, ref) {
|
|
8592
8432
|
const rfId = id2 || "1";
|
|
8593
8433
|
const colorModeClassName = useColorModeClass(colorMode);
|
|
8594
8434
|
const wrapperOnScroll = useCallback((e) => {
|
|
8595
8435
|
e.currentTarget.scrollTo({ top: 0, left: 0, behavior: "instant" });
|
|
8596
8436
|
onScroll?.(e);
|
|
8597
8437
|
}, [onScroll]);
|
|
8598
|
-
return jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style2, ...wrapperStyle }, ref, className: cc(["react-flow", className, colorModeClassName]), id: id2, role: "application", children: jsxs(Wrapper, { nodes, edges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, zIndexMode, children: [jsx(StoreUpdater, { nodes, edges, defaultNodes, defaultEdges, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, nodesDraggable, autoPanOnNodeFocus, nodesConnectable, nodesFocusable, edgesFocusable, edgesReconnectable, elementsSelectable, elevateNodesOnSelect, elevateEdgesOnSelect, minZoom, maxZoom, nodeExtent, onNodesChange, onEdgesChange, snapToGrid, snapGrid, connectionMode, translateExtent, connectOnClick, defaultEdgeOptions, fitView, fitViewOptions, onNodesDelete, onEdgesDelete, onDelete, onNodeDragStart, onNodeDrag, onNodeDragStop, onSelectionDrag, onSelectionDragStart, onSelectionDragStop, onMove, onMoveStart, onMoveEnd, noPanClassName, nodeOrigin, rfId, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, onError, connectionRadius, isValidConnection, selectNodesOnDrag, nodeDragThreshold, connectionDragThreshold, onBeforeDelete, debug, ariaLabelConfig, zIndexMode }), jsx(GraphView, { onInit, onNodeClick, onEdgeClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, nodeTypes, edgeTypes, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, deleteKeyCode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent, minZoom, maxZoom, preventScrolling, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance, nodeClickDistance, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, defaultMarkerColor, noDragClassName, noWheelClassName, noPanClassName, rfId, disableKeyboardA11y, nodeExtent, viewport, onViewportChange }), jsx(SelectionListener, { onSelectionChange }), children2, jsx(Attribution, { proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId, disableKeyboardA11y })] }) });
|
|
8438
|
+
return jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style2, ...wrapperStyle }, ref, className: cc(["react-flow", className, colorModeClassName]), id: id2, role: "application", children: jsxs(Wrapper, { nodes, edges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, zIndexMode, children: [jsx(StoreUpdater, { nodes, edges, defaultNodes, defaultEdges, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, nodesDraggable, autoPanOnNodeFocus, nodesConnectable, nodesFocusable, edgesFocusable, edgesReconnectable, elementsSelectable, elevateNodesOnSelect, elevateEdgesOnSelect, minZoom, maxZoom, nodeExtent, onNodesChange, onEdgesChange, snapToGrid, snapGrid, connectionMode, translateExtent, connectOnClick, defaultEdgeOptions, fitView, fitViewOptions, onNodesDelete, onEdgesDelete, onDelete, onNodeDragStart, onNodeDrag, onNodeDragStop, onSelectionDrag, onSelectionDragStart, onSelectionDragStop, onMove, onMoveStart, onMoveEnd, noPanClassName, nodeOrigin, rfId, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, onError, connectionRadius, isValidConnection, selectNodesOnDrag, nodeDragThreshold, connectionDragThreshold, onBeforeDelete, debug, ariaLabelConfig, zIndexMode }), jsx(GraphView, { onInit, onNodeClick, onEdgeClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, nodeTypes, edgeTypes, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, deleteKeyCode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent, minZoom, maxZoom, preventScrolling, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, autoPanOnSelection, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance, nodeClickDistance, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, defaultMarkerColor, noDragClassName, noWheelClassName, noPanClassName, rfId, disableKeyboardA11y, nodeExtent, viewport, onViewportChange }), jsx(SelectionListener, { onSelectionChange }), children2, jsx(Attribution, { proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId, disableKeyboardA11y })] }) });
|
|
8599
8439
|
}
|
|
8600
8440
|
var index = fixedForwardRef(ReactFlow);
|
|
8601
8441
|
function LinePattern({ dimensions, lineWidth, variant, className }) {
|
|
@@ -9030,53 +8870,7 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
|
|
|
9030
8870
|
}, children: children2 });
|
|
9031
8871
|
}
|
|
9032
8872
|
memo(ResizeControl);
|
|
9033
|
-
/*! Bundled license information:
|
|
9034
|
-
|
|
9035
|
-
use-sync-external-store/cjs/use-sync-external-store-shim.production.js:
|
|
9036
|
-
(**
|
|
9037
|
-
* @license React
|
|
9038
|
-
* use-sync-external-store-shim.production.js
|
|
9039
|
-
*
|
|
9040
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
9041
|
-
*
|
|
9042
|
-
* This source code is licensed under the MIT license found in the
|
|
9043
|
-
* LICENSE file in the root directory of this source tree.
|
|
9044
|
-
*)
|
|
9045
|
-
|
|
9046
|
-
use-sync-external-store/cjs/use-sync-external-store-shim.development.js:
|
|
9047
|
-
(**
|
|
9048
|
-
* @license React
|
|
9049
|
-
* use-sync-external-store-shim.development.js
|
|
9050
|
-
*
|
|
9051
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
9052
|
-
*
|
|
9053
|
-
* This source code is licensed under the MIT license found in the
|
|
9054
|
-
* LICENSE file in the root directory of this source tree.
|
|
9055
|
-
*)
|
|
9056
|
-
|
|
9057
|
-
use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.js:
|
|
9058
|
-
(**
|
|
9059
|
-
* @license React
|
|
9060
|
-
* use-sync-external-store-shim/with-selector.production.js
|
|
9061
|
-
*
|
|
9062
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
9063
|
-
*
|
|
9064
|
-
* This source code is licensed under the MIT license found in the
|
|
9065
|
-
* LICENSE file in the root directory of this source tree.
|
|
9066
|
-
*)
|
|
9067
|
-
|
|
9068
|
-
use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js:
|
|
9069
|
-
(**
|
|
9070
|
-
* @license React
|
|
9071
|
-
* use-sync-external-store-shim/with-selector.development.js
|
|
9072
|
-
*
|
|
9073
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
9074
|
-
*
|
|
9075
|
-
* This source code is licensed under the MIT license found in the
|
|
9076
|
-
* LICENSE file in the root directory of this source tree.
|
|
9077
|
-
*)
|
|
9078
|
-
*/
|
|
9079
8873
|
|
|
9080
|
-
export { Background, BackgroundVariant, Controls, Handle, MiniMap, Position, ReactFlowProvider, addEdge, applyEdgeChanges, applyNodeChanges, index, useReactFlow };
|
|
9081
|
-
//# sourceMappingURL=chunk-
|
|
9082
|
-
//# sourceMappingURL=chunk-
|
|
8874
|
+
export { Background, BackgroundVariant, Controls, Handle, MiniMap, Position, ReactFlowProvider, addEdge2 as addEdge, applyEdgeChanges, applyNodeChanges, index, useReactFlow };
|
|
8875
|
+
//# sourceMappingURL=chunk-2BZ6OE5H.js.map
|
|
8876
|
+
//# sourceMappingURL=chunk-2BZ6OE5H.js.map
|