@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.
Files changed (41) hide show
  1. package/dist/{chunk-DDHKYIH2.js → chunk-2BZ6OE5H.js} +229 -435
  2. package/dist/chunk-2BZ6OE5H.js.map +1 -0
  3. package/dist/{chunk-FGUJNX65.js → chunk-35OXF6W3.js} +3 -3
  4. package/dist/{chunk-FGUJNX65.js.map → chunk-35OXF6W3.js.map} +1 -1
  5. package/dist/chunk-4PZQRN5Y.js +114 -0
  6. package/dist/chunk-4PZQRN5Y.js.map +1 -0
  7. package/dist/chunk-DW66NGU5.js +138 -0
  8. package/dist/chunk-DW66NGU5.js.map +1 -0
  9. package/dist/{chunk-YPINKH2D.js → engine.cjs} +4 -111
  10. package/dist/engine.cjs.map +1 -0
  11. package/dist/engine.d.cts +35 -0
  12. package/dist/engine.d.ts +35 -0
  13. package/dist/engine.js +3 -0
  14. package/dist/engine.js.map +1 -0
  15. package/dist/index.cjs +227 -464
  16. package/dist/index.cjs.map +1 -1
  17. package/dist/index.css +1 -0
  18. package/dist/index.css.map +1 -1
  19. package/dist/index.d.cts +19 -19
  20. package/dist/index.d.ts +19 -19
  21. package/dist/index.js +6 -6
  22. package/dist/registry/index.d.cts +2 -3
  23. package/dist/registry/index.d.ts +2 -3
  24. package/dist/registry.cjs +225 -462
  25. package/dist/registry.cjs.map +1 -1
  26. package/dist/registry.js +2 -3
  27. package/dist/runtime/index.d.cts +4 -32
  28. package/dist/runtime/index.d.ts +4 -32
  29. package/dist/runtime.cjs +226 -463
  30. package/dist/runtime.cjs.map +1 -1
  31. package/dist/runtime.js +3 -3
  32. package/dist/schema/index.d.cts +1 -1
  33. package/dist/schema/index.d.ts +1 -1
  34. package/dist/schema.js +0 -1
  35. package/dist/{types-Ch4sAvum.d.cts → types-TemTtb04.d.cts} +1 -1
  36. package/dist/{types-Ch4sAvum.d.ts → types-TemTtb04.d.ts} +1 -1
  37. package/package.json +46 -9
  38. package/dist/chunk-7D4SUZUM.js +0 -35
  39. package/dist/chunk-7D4SUZUM.js.map +0 -1
  40. package/dist/chunk-DDHKYIH2.js.map +0 -1
  41. package/dist/chunk-YPINKH2D.js.map +0 -1
package/dist/index.cjs CHANGED
@@ -8,309 +8,6 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
8
8
 
9
9
  var ReactExports__default = /*#__PURE__*/_interopDefault(ReactExports);
10
10
 
11
- var __create = Object.create;
12
- var __defProp = Object.defineProperty;
13
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
14
- var __getOwnPropNames = Object.getOwnPropertyNames;
15
- var __getProtoOf = Object.getPrototypeOf;
16
- var __hasOwnProp = Object.prototype.hasOwnProperty;
17
- var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
18
- get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
19
- }) : x)(function(x) {
20
- if (typeof require !== "undefined") return require.apply(this, arguments);
21
- throw Error('Dynamic require of "' + x + '" is not supported');
22
- });
23
- var __commonJS = (cb, mod) => function __require2() {
24
- return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
25
- };
26
- var __copyProps = (to, from, except, desc) => {
27
- if (from && typeof from === "object" || typeof from === "function") {
28
- for (let key of __getOwnPropNames(from))
29
- if (!__hasOwnProp.call(to, key) && key !== except)
30
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
31
- }
32
- return to;
33
- };
34
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
35
- // If the importer is in node compatibility mode or this is not an ESM
36
- // file that has been converted to a CommonJS file using a Babel-
37
- // compatible transform (i.e. "__esModule" has not been set), then set
38
- // "default" to the CommonJS "module.exports" for node compatibility.
39
- __defProp(target, "default", { value: mod, enumerable: true }) ,
40
- mod
41
- ));
42
-
43
- // node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js
44
- var require_use_sync_external_store_shim_production = __commonJS({
45
- "node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js"(exports) {
46
- var React = __require("react");
47
- function is(x, y) {
48
- return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
49
- }
50
- var objectIs = "function" === typeof Object.is ? Object.is : is;
51
- var useState6 = React.useState;
52
- var useEffect5 = React.useEffect;
53
- var useLayoutEffect2 = React.useLayoutEffect;
54
- var useDebugValue2 = React.useDebugValue;
55
- function useSyncExternalStore$2(subscribe, getSnapshot) {
56
- var value = getSnapshot(), _useState = useState6({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
57
- useLayoutEffect2(
58
- function() {
59
- inst.value = value;
60
- inst.getSnapshot = getSnapshot;
61
- checkIfSnapshotChanged(inst) && forceUpdate({ inst });
62
- },
63
- [subscribe, value, getSnapshot]
64
- );
65
- useEffect5(
66
- function() {
67
- checkIfSnapshotChanged(inst) && forceUpdate({ inst });
68
- return subscribe(function() {
69
- checkIfSnapshotChanged(inst) && forceUpdate({ inst });
70
- });
71
- },
72
- [subscribe]
73
- );
74
- useDebugValue2(value);
75
- return value;
76
- }
77
- function checkIfSnapshotChanged(inst) {
78
- var latestGetSnapshot = inst.getSnapshot;
79
- inst = inst.value;
80
- try {
81
- var nextValue = latestGetSnapshot();
82
- return !objectIs(inst, nextValue);
83
- } catch (error) {
84
- return true;
85
- }
86
- }
87
- function useSyncExternalStore$1(subscribe, getSnapshot) {
88
- return getSnapshot();
89
- }
90
- var shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
91
- exports.useSyncExternalStore = void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim;
92
- }
93
- });
94
-
95
- // node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js
96
- var require_use_sync_external_store_shim_development = __commonJS({
97
- "node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js"(exports) {
98
- "production" !== process.env.NODE_ENV && (function() {
99
- function is(x, y) {
100
- return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
101
- }
102
- function useSyncExternalStore$2(subscribe, getSnapshot) {
103
- didWarnOld18Alpha || void 0 === React.startTransition || (didWarnOld18Alpha = true, console.error(
104
- "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."
105
- ));
106
- var value = getSnapshot();
107
- if (!didWarnUncachedGetSnapshot) {
108
- var cachedValue = getSnapshot();
109
- objectIs(value, cachedValue) || (console.error(
110
- "The result of getSnapshot should be cached to avoid an infinite loop"
111
- ), didWarnUncachedGetSnapshot = true);
112
- }
113
- cachedValue = useState6({
114
- inst: { value, getSnapshot }
115
- });
116
- var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
117
- useLayoutEffect2(
118
- function() {
119
- inst.value = value;
120
- inst.getSnapshot = getSnapshot;
121
- checkIfSnapshotChanged(inst) && forceUpdate({ inst });
122
- },
123
- [subscribe, value, getSnapshot]
124
- );
125
- useEffect5(
126
- function() {
127
- checkIfSnapshotChanged(inst) && forceUpdate({ inst });
128
- return subscribe(function() {
129
- checkIfSnapshotChanged(inst) && forceUpdate({ inst });
130
- });
131
- },
132
- [subscribe]
133
- );
134
- useDebugValue2(value);
135
- return value;
136
- }
137
- function checkIfSnapshotChanged(inst) {
138
- var latestGetSnapshot = inst.getSnapshot;
139
- inst = inst.value;
140
- try {
141
- var nextValue = latestGetSnapshot();
142
- return !objectIs(inst, nextValue);
143
- } catch (error) {
144
- return true;
145
- }
146
- }
147
- function useSyncExternalStore$1(subscribe, getSnapshot) {
148
- return getSnapshot();
149
- }
150
- "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
151
- var React = __require("react"), objectIs = "function" === typeof Object.is ? Object.is : is, useState6 = React.useState, useEffect5 = 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;
152
- exports.useSyncExternalStore = void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim;
153
- "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
154
- })();
155
- }
156
- });
157
-
158
- // node_modules/use-sync-external-store/shim/index.js
159
- var require_shim = __commonJS({
160
- "node_modules/use-sync-external-store/shim/index.js"(exports, module) {
161
- if (process.env.NODE_ENV === "production") {
162
- module.exports = require_use_sync_external_store_shim_production();
163
- } else {
164
- module.exports = require_use_sync_external_store_shim_development();
165
- }
166
- }
167
- });
168
-
169
- // node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.js
170
- var require_with_selector_production = __commonJS({
171
- "node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.js"(exports) {
172
- var React = __require("react");
173
- var shim = require_shim();
174
- function is(x, y) {
175
- return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
176
- }
177
- var objectIs = "function" === typeof Object.is ? Object.is : is;
178
- var useSyncExternalStore = shim.useSyncExternalStore;
179
- var useRef4 = React.useRef;
180
- var useEffect5 = React.useEffect;
181
- var useMemo8 = React.useMemo;
182
- var useDebugValue2 = React.useDebugValue;
183
- exports.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
184
- var instRef = useRef4(null);
185
- if (null === instRef.current) {
186
- var inst = { hasValue: false, value: null };
187
- instRef.current = inst;
188
- } else inst = instRef.current;
189
- instRef = useMemo8(
190
- function() {
191
- function memoizedSelector(nextSnapshot) {
192
- if (!hasMemo) {
193
- hasMemo = true;
194
- memoizedSnapshot = nextSnapshot;
195
- nextSnapshot = selector(nextSnapshot);
196
- if (void 0 !== isEqual && inst.hasValue) {
197
- var currentSelection = inst.value;
198
- if (isEqual(currentSelection, nextSnapshot))
199
- return memoizedSelection = currentSelection;
200
- }
201
- return memoizedSelection = nextSnapshot;
202
- }
203
- currentSelection = memoizedSelection;
204
- if (objectIs(memoizedSnapshot, nextSnapshot)) return currentSelection;
205
- var nextSelection = selector(nextSnapshot);
206
- if (void 0 !== isEqual && isEqual(currentSelection, nextSelection))
207
- return memoizedSnapshot = nextSnapshot, currentSelection;
208
- memoizedSnapshot = nextSnapshot;
209
- return memoizedSelection = nextSelection;
210
- }
211
- var hasMemo = false, memoizedSnapshot, memoizedSelection, maybeGetServerSnapshot = void 0 === getServerSnapshot ? null : getServerSnapshot;
212
- return [
213
- function() {
214
- return memoizedSelector(getSnapshot());
215
- },
216
- null === maybeGetServerSnapshot ? void 0 : function() {
217
- return memoizedSelector(maybeGetServerSnapshot());
218
- }
219
- ];
220
- },
221
- [getSnapshot, getServerSnapshot, selector, isEqual]
222
- );
223
- var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
224
- useEffect5(
225
- function() {
226
- inst.hasValue = true;
227
- inst.value = value;
228
- },
229
- [value]
230
- );
231
- useDebugValue2(value);
232
- return value;
233
- };
234
- }
235
- });
236
-
237
- // node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js
238
- var require_with_selector_development = __commonJS({
239
- "node_modules/use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js"(exports) {
240
- "production" !== process.env.NODE_ENV && (function() {
241
- function is(x, y) {
242
- return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
243
- }
244
- "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
245
- var React = __require("react"), shim = require_shim(), objectIs = "function" === typeof Object.is ? Object.is : is, useSyncExternalStore = shim.useSyncExternalStore, useRef4 = React.useRef, useEffect5 = React.useEffect, useMemo8 = React.useMemo, useDebugValue2 = React.useDebugValue;
246
- exports.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
247
- var instRef = useRef4(null);
248
- if (null === instRef.current) {
249
- var inst = { hasValue: false, value: null };
250
- instRef.current = inst;
251
- } else inst = instRef.current;
252
- instRef = useMemo8(
253
- function() {
254
- function memoizedSelector(nextSnapshot) {
255
- if (!hasMemo) {
256
- hasMemo = true;
257
- memoizedSnapshot = nextSnapshot;
258
- nextSnapshot = selector(nextSnapshot);
259
- if (void 0 !== isEqual && inst.hasValue) {
260
- var currentSelection = inst.value;
261
- if (isEqual(currentSelection, nextSnapshot))
262
- return memoizedSelection = currentSelection;
263
- }
264
- return memoizedSelection = nextSnapshot;
265
- }
266
- currentSelection = memoizedSelection;
267
- if (objectIs(memoizedSnapshot, nextSnapshot))
268
- return currentSelection;
269
- var nextSelection = selector(nextSnapshot);
270
- if (void 0 !== isEqual && isEqual(currentSelection, nextSelection))
271
- return memoizedSnapshot = nextSnapshot, currentSelection;
272
- memoizedSnapshot = nextSnapshot;
273
- return memoizedSelection = nextSelection;
274
- }
275
- var hasMemo = false, memoizedSnapshot, memoizedSelection, maybeGetServerSnapshot = void 0 === getServerSnapshot ? null : getServerSnapshot;
276
- return [
277
- function() {
278
- return memoizedSelector(getSnapshot());
279
- },
280
- null === maybeGetServerSnapshot ? void 0 : function() {
281
- return memoizedSelector(maybeGetServerSnapshot());
282
- }
283
- ];
284
- },
285
- [getSnapshot, getServerSnapshot, selector, isEqual]
286
- );
287
- var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
288
- useEffect5(
289
- function() {
290
- inst.hasValue = true;
291
- inst.value = value;
292
- },
293
- [value]
294
- );
295
- useDebugValue2(value);
296
- return value;
297
- };
298
- "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
299
- })();
300
- }
301
- });
302
-
303
- // node_modules/use-sync-external-store/shim/with-selector.js
304
- var require_with_selector = __commonJS({
305
- "node_modules/use-sync-external-store/shim/with-selector.js"(exports, module) {
306
- if (process.env.NODE_ENV === "production") {
307
- module.exports = require_with_selector_production();
308
- } else {
309
- module.exports = require_with_selector_development();
310
- }
311
- }
312
- });
313
-
314
11
  // src/registry/registry.ts
315
12
  var kinds = /* @__PURE__ */ new Map();
316
13
  var listeners = /* @__PURE__ */ new Set();
@@ -3737,10 +3434,10 @@ function zoom_default2() {
3737
3434
 
3738
3435
  // node_modules/@xyflow/system/dist/esm/index.js
3739
3436
  var errorMessages = {
3740
- error001: () => "[React Flow]: Seems like you have not used zustand provider as an ancestor. Help: https://reactflow.dev/error#001",
3437
+ error001: (lib = "react") => `Seems like you have not used zustand provider as an ancestor. Help: https://${lib}flow.dev/error#001`,
3741
3438
  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.",
3742
3439
  error003: (nodeType) => `Node type "${nodeType}" not found. Using fallback type "default".`,
3743
- error004: () => "The React Flow parent container needs a width and a height to render the graph.",
3440
+ error004: () => "The parent container needs a width and a height to render the graph.",
3744
3441
  error005: () => "Only child nodes can use a parent extent.",
3745
3442
  error006: () => "Can't create edge. An edge needs a source and a target.",
3746
3443
  error007: (id2) => `The old edge with id=${id2} does not exist.`,
@@ -3751,7 +3448,8 @@ var errorMessages = {
3751
3448
  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.`,
3752
3449
  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.`,
3753
3450
  error014: () => "useNodeConnections: No node ID found. Call useNodeConnections inside a custom Node or provide a node ID.",
3754
- error015: () => "It seems that you are trying to drag a node that is not initialized. Please use onNodesChange as explained in the docs."
3451
+ error015: () => "It seems that you are trying to drag a node that is not initialized. Please use onNodesChange as explained in the docs.",
3452
+ 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.`
3755
3453
  };
3756
3454
  var infiniteExtent = [
3757
3455
  [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
@@ -3919,7 +3617,7 @@ function getFitViewNodes(nodeLookup, options) {
3919
3617
  }
3920
3618
  async function fitViewport({ nodes, width, height, panZoom, minZoom, maxZoom }, options) {
3921
3619
  if (nodes.size === 0) {
3922
- return Promise.resolve(true);
3620
+ return true;
3923
3621
  }
3924
3622
  const nodesToFit = getFitViewNodes(nodes, options);
3925
3623
  const bounds = getInternalNodesBounds(nodesToFit);
@@ -3929,7 +3627,7 @@ async function fitViewport({ nodes, width, height, panZoom, minZoom, maxZoom },
3929
3627
  ease: options?.ease,
3930
3628
  interpolate: options?.interpolate
3931
3629
  });
3932
- return Promise.resolve(true);
3630
+ return true;
3933
3631
  }
3934
3632
  function calculateNodePosition({ nodeId, nextPosition, nodeLookup, nodeOrigin = [0, 0], nodeExtent, onError }) {
3935
3633
  const node = nodeLookup.get(nodeId);
@@ -4076,9 +3774,9 @@ var getOverlappingArea = (rectA, rectB) => {
4076
3774
  };
4077
3775
  var isRectObject = (obj) => isNumeric(obj.width) && isNumeric(obj.height) && isNumeric(obj.x) && isNumeric(obj.y);
4078
3776
  var isNumeric = (n) => !isNaN(n) && isFinite(n);
4079
- var devWarn = (id2, message) => {
3777
+ var createDevWarn = (lib, helpUrl) => (id2, message) => {
4080
3778
  if (process.env.NODE_ENV === "development") {
4081
- console.warn(`[React Flow]: ${message} Help: https://reactflow.dev/error#${id2}`);
3779
+ console.warn(`[${lib}]: ${message} Help: ${helpUrl}error#${id2}`);
4082
3780
  }
4083
3781
  };
4084
3782
  var snapPosition = (position, snapGrid = [1, 1]) => {
@@ -4116,7 +3814,7 @@ function parsePadding(padding, viewport) {
4116
3814
  return Math.floor(viewport * paddingValue * 0.01);
4117
3815
  }
4118
3816
  }
4119
- console.error(`[React Flow] The padding value "${padding}" is invalid. Please provide a number or a string with a valid unit (px or %).`);
3817
+ console.error(`The padding value "${padding}" is invalid. Please provide a number or a string with a valid unit (px or %).`);
4120
3818
  return 0;
4121
3819
  }
4122
3820
  function parsePaddings(padding, width, height) {
@@ -4370,7 +4068,7 @@ var connectionExists = (edge, edges) => {
4370
4068
  };
4371
4069
  var addEdge = (edgeParams, edges, options = {}) => {
4372
4070
  if (!edgeParams.source || !edgeParams.target) {
4373
- devWarn("006", errorMessages["error006"]());
4071
+ options.onError?.("006", errorMessages["error006"]());
4374
4072
  return edges;
4375
4073
  }
4376
4074
  const edgeIdGenerator = options.getEdgeId || getEdgeId;
@@ -4966,7 +4664,7 @@ function updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOri
4966
4664
  }
4967
4665
  async function panBy({ delta, panZoom, transform: transform2, translateExtent, width, height }) {
4968
4666
  if (!panZoom || !delta.x && !delta.y) {
4969
- return Promise.resolve(false);
4667
+ return false;
4970
4668
  }
4971
4669
  const nextViewport = await panZoom.setViewportConstrained({
4972
4670
  x: transform2[0] + delta.x,
@@ -4977,7 +4675,7 @@ async function panBy({ delta, panZoom, transform: transform2, translateExtent, w
4977
4675
  [width, height]
4978
4676
  ], translateExtent);
4979
4677
  const transformChanged = !!nextViewport && (nextViewport.x !== transform2[0] || nextViewport.y !== transform2[1] || nextViewport.k !== transform2[2]);
4980
- return Promise.resolve(transformChanged);
4678
+ return transformChanged;
4981
4679
  }
4982
4680
  function addConnectionToLookup(type, connection, connectionKey, connectionLookup, nodeId, handleId) {
4983
4681
  let key = nodeId;
@@ -5267,6 +4965,9 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
5267
4965
  }
5268
4966
  }).on("end", (event) => {
5269
4967
  if (!dragStarted || abortDrag) {
4968
+ if (abortDrag && dragItems.size > 0) {
4969
+ getStoreItems().updateNodePositions(dragItems, false);
4970
+ }
5270
4971
  return;
5271
4972
  }
5272
4973
  autoPanStarted = false;
@@ -5808,7 +5509,7 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
5808
5509
  const zoomPanValues = {
5809
5510
  isZoomingOrPanning: false,
5810
5511
  usedRightMouseButton: false,
5811
- prevViewport: { },
5512
+ prevViewport: {},
5812
5513
  mouseButton: 0,
5813
5514
  timerId: void 0,
5814
5515
  panScrollTimeout: void 0,
@@ -5828,13 +5529,13 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
5828
5529
  const d3ZoomHandler = d3Selection.on("wheel.zoom");
5829
5530
  const d3DblClickZoomHandler = d3Selection.on("dblclick.zoom");
5830
5531
  d3ZoomInstance.wheelDelta(wheelDelta);
5831
- function setTransform(transform2, options) {
5532
+ async function setTransform(transform2, options) {
5832
5533
  if (d3Selection) {
5833
5534
  return new Promise((resolve) => {
5834
5535
  d3ZoomInstance?.interpolate(options?.interpolate === "linear" ? value_default : zoom_default).transform(getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)), transform2);
5835
5536
  });
5836
5537
  }
5837
- return Promise.resolve(false);
5538
+ return false;
5838
5539
  }
5839
5540
  function update({ noWheelClassName, noPanClassName, onPaneContextMenu, userSelectionActive, panOnScroll, panOnDrag, panOnScrollMode, panOnScrollSpeed, preventScrolling, zoomOnPinch, zoomOnScroll, zoomOnDoubleClick, zoomActivationKeyPressed, lib, onTransformChange, connectionInProgress, paneClickDistance, selectionOnDrag }) {
5840
5541
  if (userSelectionActive && !zoomPanValues.isZoomingOrPanning) {
@@ -5859,31 +5560,29 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
5859
5560
  d3ZoomHandler
5860
5561
  });
5861
5562
  d3Selection.on("wheel.zoom", wheelHandler, { passive: false });
5862
- if (!userSelectionActive) {
5863
- const startHandler = createPanZoomStartHandler({
5864
- zoomPanValues,
5865
- onDraggingChange,
5866
- onPanZoomStart
5867
- });
5868
- d3ZoomInstance.on("start", startHandler);
5869
- const panZoomHandler = createPanZoomHandler({
5870
- zoomPanValues,
5871
- panOnDrag,
5872
- onPaneContextMenu: !!onPaneContextMenu,
5873
- onPanZoom,
5874
- onTransformChange
5875
- });
5876
- d3ZoomInstance.on("zoom", panZoomHandler);
5877
- const panZoomEndHandler = createPanZoomEndHandler({
5878
- zoomPanValues,
5879
- panOnDrag,
5880
- panOnScroll,
5881
- onPaneContextMenu,
5882
- onPanZoomEnd,
5883
- onDraggingChange
5884
- });
5885
- d3ZoomInstance.on("end", panZoomEndHandler);
5886
- }
5563
+ const startHandler = createPanZoomStartHandler({
5564
+ zoomPanValues,
5565
+ onDraggingChange,
5566
+ onPanZoomStart
5567
+ });
5568
+ d3ZoomInstance.on("start", startHandler);
5569
+ const panZoomHandler = createPanZoomHandler({
5570
+ zoomPanValues,
5571
+ panOnDrag,
5572
+ onPaneContextMenu: !!onPaneContextMenu,
5573
+ onPanZoom,
5574
+ onTransformChange
5575
+ });
5576
+ d3ZoomInstance.on("zoom", panZoomHandler);
5577
+ const panZoomEndHandler = createPanZoomEndHandler({
5578
+ zoomPanValues,
5579
+ panOnDrag,
5580
+ panOnScroll,
5581
+ onPaneContextMenu,
5582
+ onPanZoomEnd,
5583
+ onDraggingChange
5584
+ });
5585
+ d3ZoomInstance.on("end", panZoomEndHandler);
5887
5586
  const filter2 = createFilter({
5888
5587
  zoomActivationKeyPressed,
5889
5588
  panOnDrag,
@@ -5913,12 +5612,12 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
5913
5612
  if (contrainedTransform) {
5914
5613
  await setTransform(contrainedTransform);
5915
5614
  }
5916
- return new Promise((resolve) => resolve(contrainedTransform));
5615
+ return contrainedTransform;
5917
5616
  }
5918
5617
  async function setViewport(viewport2, options) {
5919
5618
  const nextTransform = viewportToTransform(viewport2);
5920
5619
  await setTransform(nextTransform, options);
5921
- return new Promise((resolve) => resolve(nextTransform));
5620
+ return nextTransform;
5922
5621
  }
5923
5622
  function syncViewport(viewport2) {
5924
5623
  if (d3Selection) {
@@ -5933,21 +5632,21 @@ function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPan
5933
5632
  const transform2 = d3Selection ? transform(d3Selection.node()) : { x: 0, y: 0, k: 1 };
5934
5633
  return { x: transform2.x, y: transform2.y, zoom: transform2.k };
5935
5634
  }
5936
- function scaleTo(zoom, options) {
5635
+ async function scaleTo(zoom, options) {
5937
5636
  if (d3Selection) {
5938
5637
  return new Promise((resolve) => {
5939
5638
  d3ZoomInstance?.interpolate(options?.interpolate === "linear" ? value_default : zoom_default).scaleTo(getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)), zoom);
5940
5639
  });
5941
5640
  }
5942
- return Promise.resolve(false);
5641
+ return false;
5943
5642
  }
5944
- function scaleBy(factor, options) {
5643
+ async function scaleBy(factor, options) {
5945
5644
  if (d3Selection) {
5946
5645
  return new Promise((resolve) => {
5947
5646
  d3ZoomInstance?.interpolate(options?.interpolate === "linear" ? value_default : zoom_default).scaleBy(getD3Transition(d3Selection, options?.duration, options?.ease, () => resolve(true)), factor);
5948
5647
  });
5949
5648
  }
5950
- return Promise.resolve(false);
5649
+ return false;
5951
5650
  }
5952
5651
  function setScaleExtent(scaleExtent) {
5953
5652
  d3ZoomInstance?.scaleExtent(scaleExtent);
@@ -6142,12 +5841,6 @@ var initStartValues = {
6142
5841
  pointerY: 0,
6143
5842
  aspectRatio: 1
6144
5843
  };
6145
- function nodeToParentExtent(node) {
6146
- return [
6147
- [0, 0],
6148
- [node.measured.width, node.measured.height]
6149
- ];
6150
- }
6151
5844
  function nodeToChildExtent(child, parent, nodeOrigin) {
6152
5845
  const x = parent.position.x + child.position.x;
6153
5846
  const y = parent.position.y + child.position.y;
@@ -6186,7 +5879,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
6186
5879
  let containerBounds = null;
6187
5880
  let childNodes = [];
6188
5881
  let parentNode = void 0;
6189
- let parentExtent = void 0;
5882
+ let nodeExtent = void 0;
6190
5883
  let childExtent = void 0;
6191
5884
  let resizeDetected = false;
6192
5885
  const dragHandler = drag_default().on("start", (event) => {
@@ -6215,9 +5908,15 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
6215
5908
  aspectRatio: prevValues.width / prevValues.height
6216
5909
  };
6217
5910
  parentNode = void 0;
5911
+ nodeExtent = isCoordinateExtent(node.extent) ? node.extent : void 0;
6218
5912
  if (node.parentId && (node.extent === "parent" || node.expandParent)) {
6219
5913
  parentNode = nodeLookup.get(node.parentId);
6220
- parentExtent = parentNode && node.extent === "parent" ? nodeToParentExtent(parentNode) : void 0;
5914
+ }
5915
+ if (parentNode && node.extent === "parent") {
5916
+ nodeExtent = [
5917
+ [0, 0],
5918
+ [parentNode.measured.width, parentNode.measured.height]
5919
+ ];
6221
5920
  }
6222
5921
  childNodes = [];
6223
5922
  childExtent = void 0;
@@ -6257,7 +5956,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
6257
5956
  const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;
6258
5957
  const change = {};
6259
5958
  const nodeOrigin = node.origin ?? storeNodeOrigin;
6260
- const { width, height, x, y } = getDimensionsAfterResize(startValues, params.controlDirection, pointerPosition, params.boundaries, params.keepAspectRatio, nodeOrigin, parentExtent, childExtent);
5959
+ const { width, height, x, y } = getDimensionsAfterResize(startValues, params.controlDirection, pointerPosition, params.boundaries, params.keepAspectRatio, nodeOrigin, nodeExtent, childExtent);
6261
5960
  const isWidthChange = width !== prevWidth;
6262
5961
  const isHeightChange = height !== prevHeight;
6263
5962
  const isXPosChange = x !== prevX && isWidthChange;
@@ -6334,9 +6033,62 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
6334
6033
  destroy
6335
6034
  };
6336
6035
  }
6337
-
6338
- // node_modules/zustand/esm/traditional.mjs
6339
- var import_with_selector = __toESM(require_with_selector());
6036
+ function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
6037
+ const instRef = ReactExports.useRef(null);
6038
+ let inst;
6039
+ if (instRef.current === null) {
6040
+ inst = { hasValue: false, value: null };
6041
+ instRef.current = inst;
6042
+ } else {
6043
+ inst = instRef.current;
6044
+ }
6045
+ const [getSelection, getServerSelection] = ReactExports.useMemo(() => {
6046
+ let hasMemo = false;
6047
+ let memoizedSnapshot;
6048
+ let memoizedSelection;
6049
+ const memoizedSelector = (nextSnapshot) => {
6050
+ if (!hasMemo) {
6051
+ hasMemo = true;
6052
+ memoizedSnapshot = nextSnapshot;
6053
+ const nextSelection2 = selector(nextSnapshot);
6054
+ if (isEqual !== void 0 && inst.hasValue) {
6055
+ const currentSelection = inst.value;
6056
+ if (isEqual(currentSelection, nextSelection2)) {
6057
+ memoizedSelection = currentSelection;
6058
+ return currentSelection;
6059
+ }
6060
+ }
6061
+ memoizedSelection = nextSelection2;
6062
+ return nextSelection2;
6063
+ }
6064
+ const prevSnapshot = memoizedSnapshot;
6065
+ const prevSelection = memoizedSelection;
6066
+ if (Object.is(prevSnapshot, nextSnapshot)) {
6067
+ return prevSelection;
6068
+ }
6069
+ const nextSelection = selector(nextSnapshot);
6070
+ if (isEqual !== void 0 && isEqual(prevSelection, nextSelection)) {
6071
+ memoizedSnapshot = nextSnapshot;
6072
+ return prevSelection;
6073
+ }
6074
+ memoizedSnapshot = nextSnapshot;
6075
+ memoizedSelection = nextSelection;
6076
+ return nextSelection;
6077
+ };
6078
+ const maybeGetServerSnapshot = getServerSnapshot === void 0 || getServerSnapshot === null ? null : getServerSnapshot;
6079
+ const getSnapshotWithSelector = () => memoizedSelector(getSnapshot());
6080
+ const getServerSnapshotWithSelector = maybeGetServerSnapshot === null ? void 0 : () => memoizedSelector(maybeGetServerSnapshot());
6081
+ return [getSnapshotWithSelector, getServerSnapshotWithSelector];
6082
+ }, [getSnapshot, getServerSnapshot, selector, isEqual]);
6083
+ const value = ReactExports.useSyncExternalStore(subscribe, getSelection, getServerSelection);
6084
+ ReactExports.useEffect(() => {
6085
+ inst.hasValue = true;
6086
+ inst.value = value;
6087
+ }, [value]);
6088
+ ReactExports.useDebugValue(value);
6089
+ return value;
6090
+ }
6091
+ var use_sync_external_store_with_selector_default = { useSyncExternalStoreWithSelector };
6340
6092
 
6341
6093
  // node_modules/zustand/esm/vanilla.mjs
6342
6094
  var createStoreImpl = (createState) => {
@@ -6371,18 +6123,18 @@ var createStoreImpl = (createState) => {
6371
6123
  var createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
6372
6124
 
6373
6125
  // node_modules/zustand/esm/traditional.mjs
6374
- var { useDebugValue } = ReactExports__default.default;
6375
- var { useSyncExternalStoreWithSelector } = import_with_selector.default;
6126
+ var { useDebugValue: useDebugValue2 } = ReactExports__default.default;
6127
+ var { useSyncExternalStoreWithSelector: useSyncExternalStoreWithSelector2 } = use_sync_external_store_with_selector_default;
6376
6128
  var identity3 = (arg) => arg;
6377
6129
  function useStoreWithEqualityFn(api, selector = identity3, equalityFn) {
6378
- const slice = useSyncExternalStoreWithSelector(
6130
+ const slice = useSyncExternalStoreWithSelector2(
6379
6131
  api.subscribe,
6380
6132
  api.getState,
6381
6133
  api.getServerState || api.getInitialState,
6382
6134
  selector,
6383
6135
  equalityFn
6384
6136
  );
6385
- useDebugValue(slice);
6137
+ useDebugValue2(slice);
6386
6138
  return slice;
6387
6139
  }
6388
6140
  var createWithEqualityFnImpl = (createState, defaultEqualityFn) => {
@@ -6432,7 +6184,7 @@ function shallow$1(objA, objB) {
6432
6184
  }
6433
6185
  var StoreContext = ReactExports.createContext(null);
6434
6186
  var Provider$1 = StoreContext.Provider;
6435
- var zustandErrorMessage = errorMessages["error001"]();
6187
+ var zustandErrorMessage = errorMessages["error001"]("react");
6436
6188
  function useStore(selector, equalityFn) {
6437
6189
  const store = ReactExports.useContext(StoreContext);
6438
6190
  if (store === null) {
@@ -6524,7 +6276,6 @@ function SelectionListener({ onSelectionChange }) {
6524
6276
  }
6525
6277
  return null;
6526
6278
  }
6527
- var useIsomorphicLayoutEffect = typeof window !== "undefined" ? ReactExports.useLayoutEffect : ReactExports.useEffect;
6528
6279
  var defaultNodeOrigin = [0, 0];
6529
6280
  var defaultViewport = { x: 0, y: 0, zoom: 1 };
6530
6281
  var reactFlowFieldsToTrack = [
@@ -6615,7 +6366,7 @@ var initPrevValues2 = {
6615
6366
  function StoreUpdater(props) {
6616
6367
  const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges } = useStore(selector$l, shallow$1);
6617
6368
  const store = useStoreApi();
6618
- useIsomorphicLayoutEffect(() => {
6369
+ ReactExports.useEffect(() => {
6619
6370
  setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges);
6620
6371
  return () => {
6621
6372
  previousFields.current = initPrevValues2;
@@ -6623,7 +6374,7 @@ function StoreUpdater(props) {
6623
6374
  };
6624
6375
  }, []);
6625
6376
  const previousFields = ReactExports.useRef(initPrevValues2);
6626
- useIsomorphicLayoutEffect(
6377
+ ReactExports.useEffect(
6627
6378
  () => {
6628
6379
  for (const fieldName of fieldsToTrack) {
6629
6380
  const fieldValue = props[fieldName];
@@ -6759,30 +6510,30 @@ var useViewportHelper = () => {
6759
6510
  const store = useStoreApi();
6760
6511
  return ReactExports.useMemo(() => {
6761
6512
  return {
6762
- zoomIn: (options) => {
6513
+ zoomIn: async (options) => {
6763
6514
  const { panZoom } = store.getState();
6764
- return panZoom ? panZoom.scaleBy(1.2, options) : Promise.resolve(false);
6515
+ return panZoom ? panZoom.scaleBy(1.2, options) : false;
6765
6516
  },
6766
- zoomOut: (options) => {
6517
+ zoomOut: async (options) => {
6767
6518
  const { panZoom } = store.getState();
6768
- return panZoom ? panZoom.scaleBy(1 / 1.2, options) : Promise.resolve(false);
6519
+ return panZoom ? panZoom.scaleBy(1 / 1.2, options) : false;
6769
6520
  },
6770
- zoomTo: (zoomLevel, options) => {
6521
+ zoomTo: async (zoomLevel, options) => {
6771
6522
  const { panZoom } = store.getState();
6772
- return panZoom ? panZoom.scaleTo(zoomLevel, options) : Promise.resolve(false);
6523
+ return panZoom ? panZoom.scaleTo(zoomLevel, options) : false;
6773
6524
  },
6774
6525
  getZoom: () => store.getState().transform[2],
6775
6526
  setViewport: async (viewport, options) => {
6776
6527
  const { transform: [tX, tY, tZoom], panZoom } = store.getState();
6777
6528
  if (!panZoom) {
6778
- return Promise.resolve(false);
6529
+ return false;
6779
6530
  }
6780
6531
  await panZoom.setViewport({
6781
6532
  x: viewport.x ?? tX,
6782
6533
  y: viewport.y ?? tY,
6783
6534
  zoom: viewport.zoom ?? tZoom
6784
6535
  }, options);
6785
- return Promise.resolve(true);
6536
+ return true;
6786
6537
  },
6787
6538
  getViewport: () => {
6788
6539
  const [x, y, zoom] = store.getState().transform;
@@ -6795,14 +6546,14 @@ var useViewportHelper = () => {
6795
6546
  const { width, height, minZoom, maxZoom, panZoom } = store.getState();
6796
6547
  const viewport = getViewportForBounds(bounds, width, height, minZoom, maxZoom, options?.padding ?? 0.1);
6797
6548
  if (!panZoom) {
6798
- return Promise.resolve(false);
6549
+ return false;
6799
6550
  }
6800
6551
  await panZoom.setViewport(viewport, {
6801
6552
  duration: options?.duration,
6802
6553
  ease: options?.ease,
6803
6554
  interpolate: options?.interpolate
6804
6555
  });
6805
- return Promise.resolve(true);
6556
+ return true;
6806
6557
  },
6807
6558
  screenToFlowPosition: (clientPosition, options = {}) => {
6808
6559
  const { transform: transform2, snapGrid, snapToGrid, domNode } = store.getState();
@@ -6971,11 +6722,19 @@ function elementToRemoveChange(item) {
6971
6722
  type: "remove"
6972
6723
  };
6973
6724
  }
6725
+ var defaultOnError = createDevWarn("React Flow", "https://reactflow.dev/");
6726
+ function addEdge2(edgeParams, edges, options = {}) {
6727
+ return addEdge(edgeParams, edges, {
6728
+ ...options,
6729
+ onError: options.onError ?? defaultOnError
6730
+ });
6731
+ }
6974
6732
  var isNode = (element) => isNodeBase(element);
6975
6733
  var isEdge = (element) => isEdgeBase(element);
6976
6734
  function fixedForwardRef(render) {
6977
6735
  return ReactExports.forwardRef(render);
6978
6736
  }
6737
+ var useIsomorphicLayoutEffect = typeof window !== "undefined" ? ReactExports.useLayoutEffect : ReactExports.useEffect;
6979
6738
  function useQueue(runQueue) {
6980
6739
  const [serial, setSerial] = ReactExports.useState(BigInt(0));
6981
6740
  const [queue] = ReactExports.useState(() => createQueue(() => setSerial((n) => n + BigInt(1))));
@@ -7406,17 +7165,22 @@ var selector$h = (s) => ({
7406
7165
  userSelectionActive: s.userSelectionActive,
7407
7166
  elementsSelectable: s.elementsSelectable,
7408
7167
  connectionInProgress: s.connection.inProgress,
7409
- dragging: s.paneDragging
7168
+ dragging: s.paneDragging,
7169
+ panBy: s.panBy,
7170
+ autoPanSpeed: s.autoPanSpeed
7410
7171
  });
7411
- function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, paneClickDistance, selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children: children2 }) {
7172
+ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, autoPanOnSelection, paneClickDistance, selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children: children2 }) {
7173
+ const autoPanId = ReactExports.useRef(0);
7412
7174
  const store = useStoreApi();
7413
- const { userSelectionActive, elementsSelectable, dragging, connectionInProgress } = useStore(selector$h, shallow$1);
7175
+ const { userSelectionActive, elementsSelectable, dragging, connectionInProgress, panBy: panBy2, autoPanSpeed } = useStore(selector$h, shallow$1);
7414
7176
  const isSelectionEnabled = elementsSelectable && (isSelecting || userSelectionActive);
7415
7177
  const container = ReactExports.useRef(null);
7416
7178
  const containerBounds = ReactExports.useRef();
7417
7179
  const selectedNodeIds = ReactExports.useRef(/* @__PURE__ */ new Set());
7418
7180
  const selectedEdgeIds = ReactExports.useRef(/* @__PURE__ */ new Set());
7419
7181
  const selectionInProgress = ReactExports.useRef(false);
7182
+ const position = ReactExports.useRef({ x: 0, y: 0 });
7183
+ const autoPanStarted = ReactExports.useRef(false);
7420
7184
  const onClick = (event) => {
7421
7185
  if (selectionInProgress.current || connectionInProgress) {
7422
7186
  selectionInProgress.current = false;
@@ -7441,7 +7205,7 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
7441
7205
  }
7442
7206
  };
7443
7207
  const onPointerDownCapture = (event) => {
7444
- const { domNode } = store.getState();
7208
+ const { domNode, transform: transform2 } = store.getState();
7445
7209
  containerBounds.current = domNode?.getBoundingClientRect();
7446
7210
  if (!containerBounds.current)
7447
7211
  return;
@@ -7454,12 +7218,13 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
7454
7218
  event.target?.setPointerCapture?.(event.pointerId);
7455
7219
  selectionInProgress.current = false;
7456
7220
  const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
7221
+ const userSelectionStartPosition = pointToRendererPoint({ x, y }, transform2);
7457
7222
  store.setState({
7458
7223
  userSelectionRect: {
7459
7224
  width: 0,
7460
7225
  height: 0,
7461
- startX: x,
7462
- startY: y,
7226
+ startX: userSelectionStartPosition.x,
7227
+ startY: userSelectionStartPosition.y,
7463
7228
  x,
7464
7229
  y
7465
7230
  }
@@ -7469,30 +7234,21 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
7469
7234
  event.preventDefault();
7470
7235
  }
7471
7236
  };
7472
- const onPointerMove = (event) => {
7473
- const { userSelectionRect, transform: transform2, nodeLookup, edgeLookup, connectionLookup, triggerNodeChanges, triggerEdgeChanges, defaultEdgeOptions, resetSelectedElements } = store.getState();
7474
- if (!containerBounds.current || !userSelectionRect) {
7237
+ function commitUserSelectionRect(mouseX, mouseY) {
7238
+ const { userSelectionRect } = store.getState();
7239
+ if (!userSelectionRect) {
7475
7240
  return;
7476
7241
  }
7477
- const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current);
7478
- const { startX, startY } = userSelectionRect;
7479
- if (!selectionInProgress.current) {
7480
- const requiredDistance = selectionKeyPressed ? 0 : paneClickDistance;
7481
- const distance2 = Math.hypot(mouseX - startX, mouseY - startY);
7482
- if (distance2 <= requiredDistance) {
7483
- return;
7484
- }
7485
- resetSelectedElements();
7486
- onSelectionStart?.(event);
7487
- }
7488
- selectionInProgress.current = true;
7242
+ const { transform: transform2, nodeLookup, edgeLookup, connectionLookup, triggerNodeChanges, triggerEdgeChanges, defaultEdgeOptions } = store.getState();
7243
+ const userStartPosition = { x: userSelectionRect.startX, y: userSelectionRect.startY };
7244
+ const { x: screenStartX, y: screenStartY } = rendererPointToPoint(userStartPosition, transform2);
7489
7245
  const nextUserSelectRect = {
7490
- startX,
7491
- startY,
7492
- x: mouseX < startX ? mouseX : startX,
7493
- y: mouseY < startY ? mouseY : startY,
7494
- width: Math.abs(mouseX - startX),
7495
- height: Math.abs(mouseY - startY)
7246
+ startX: userStartPosition.x,
7247
+ startY: userStartPosition.y,
7248
+ x: mouseX < screenStartX ? mouseX : screenStartX,
7249
+ y: mouseY < screenStartY ? mouseY : screenStartY,
7250
+ width: Math.abs(mouseX - screenStartX),
7251
+ height: Math.abs(mouseY - screenStartY)
7496
7252
  };
7497
7253
  const prevSelectedNodeIds = selectedNodeIds.current;
7498
7254
  const prevSelectedEdgeIds = selectedEdgeIds.current;
@@ -7523,6 +7279,53 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
7523
7279
  userSelectionActive: true,
7524
7280
  nodesSelectionActive: false
7525
7281
  });
7282
+ }
7283
+ function autoPan() {
7284
+ if (!autoPanOnSelection || !containerBounds.current) {
7285
+ return;
7286
+ }
7287
+ const [x, y] = calcAutoPan(position.current, containerBounds.current, autoPanSpeed);
7288
+ panBy2({ x, y }).then((panned) => {
7289
+ if (!selectionInProgress.current || !panned) {
7290
+ autoPanId.current = requestAnimationFrame(autoPan);
7291
+ return;
7292
+ }
7293
+ const { x: mx, y: my } = position.current;
7294
+ commitUserSelectionRect(mx, my);
7295
+ autoPanId.current = requestAnimationFrame(autoPan);
7296
+ });
7297
+ }
7298
+ const cleanupAutoPan = () => {
7299
+ cancelAnimationFrame(autoPanId.current);
7300
+ autoPanId.current = 0;
7301
+ autoPanStarted.current = false;
7302
+ };
7303
+ ReactExports.useEffect(() => {
7304
+ return () => cleanupAutoPan();
7305
+ }, []);
7306
+ const onPointerMove = (event) => {
7307
+ const { userSelectionRect, transform: transform2, resetSelectedElements } = store.getState();
7308
+ if (!containerBounds.current || !userSelectionRect) {
7309
+ return;
7310
+ }
7311
+ const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current);
7312
+ position.current = { x: mouseX, y: mouseY };
7313
+ const screenStart = rendererPointToPoint({ x: userSelectionRect.startX, y: userSelectionRect.startY }, transform2);
7314
+ if (!selectionInProgress.current) {
7315
+ const requiredDistance = selectionKeyPressed ? 0 : paneClickDistance;
7316
+ const distance2 = Math.hypot(mouseX - screenStart.x, mouseY - screenStart.y);
7317
+ if (distance2 <= requiredDistance) {
7318
+ return;
7319
+ }
7320
+ resetSelectedElements();
7321
+ onSelectionStart?.(event);
7322
+ }
7323
+ selectionInProgress.current = true;
7324
+ if (!autoPanStarted.current) {
7325
+ autoPan();
7326
+ autoPanStarted.current = true;
7327
+ }
7328
+ commitUserSelectionRect(mouseX, mouseY);
7526
7329
  };
7527
7330
  const onPointerUp = (event) => {
7528
7331
  if (event.button !== 0) {
@@ -7542,9 +7345,14 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
7542
7345
  nodesSelectionActive: selectedNodeIds.current.size > 0
7543
7346
  });
7544
7347
  }
7348
+ cleanupAutoPan();
7349
+ };
7350
+ const onPointerCancel = (event) => {
7351
+ event.target?.releasePointerCapture?.(event.pointerId);
7352
+ cleanupAutoPan();
7545
7353
  };
7546
7354
  const draggable = panOnDrag === true || Array.isArray(panOnDrag) && panOnDrag.includes(0);
7547
- return jsxRuntime.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, jsxRuntime.jsx(UserSelection, {})] });
7355
+ return jsxRuntime.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, jsxRuntime.jsx(UserSelection, {})] });
7548
7356
  }
7549
7357
  function handleNodeClick({ id: id2, store, unselect = false, nodeRef }) {
7550
7358
  const { addSelectedNodes, unselectNodesAndEdges, multiSelectionActive, nodeLookup, onError } = store.getState();
@@ -7682,8 +7490,8 @@ function HandleComponent({ type = "source", position = Position.Top, isValidConn
7682
7490
  ...params
7683
7491
  };
7684
7492
  if (hasDefaultEdges) {
7685
- const { edges, setEdges } = store.getState();
7686
- setEdges(addEdge(edgeParams, edges));
7493
+ const { edges, setEdges, onError } = store.getState();
7494
+ setEdges(addEdge2(edgeParams, edges, { onError }));
7687
7495
  }
7688
7496
  onConnectAction?.(edgeParams);
7689
7497
  onConnect?.(edgeParams);
@@ -7879,7 +7687,7 @@ var win = typeof window !== "undefined" ? window : void 0;
7879
7687
  var selector$e = (s) => {
7880
7688
  return { nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive };
7881
7689
  };
7882
- 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 }) {
7690
+ 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 }) {
7883
7691
  const { nodesSelectionActive, userSelectionActive } = useStore(selector$e, shallow$1);
7884
7692
  const selectionKeyPressed = useKeyPress(selectionKeyCode, { target: win });
7885
7693
  const panActivationKeyPressed = useKeyPress(panActivationKeyCode, { target: win });
@@ -7888,7 +7696,7 @@ function FlowRendererComponent({ children: children2, onPaneClick, onPaneMouseEn
7888
7696
  const _selectionOnDrag = selectionOnDrag && panOnDrag !== true;
7889
7697
  const isSelecting = selectionKeyPressed || userSelectionActive || _selectionOnDrag;
7890
7698
  useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode });
7891
- return jsxRuntime.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: jsxRuntime.jsxs(Pane, { onSelectionStart, onSelectionEnd, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, panOnDrag, isSelecting: !!isSelecting, selectionMode, selectionKeyPressed, paneClickDistance, selectionOnDrag: _selectionOnDrag, children: [children2, nodesSelectionActive && jsxRuntime.jsx(NodesSelection, { onSelectionContextMenu, noPanClassName, disableKeyboardA11y })] }) });
7699
+ return jsxRuntime.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: jsxRuntime.jsxs(Pane, { onSelectionStart, onSelectionEnd, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, panOnDrag, autoPanOnSelection, isSelecting: !!isSelecting, selectionMode, selectionKeyPressed, paneClickDistance, selectionOnDrag: _selectionOnDrag, children: [children2, nodesSelectionActive && jsxRuntime.jsx(NodesSelection, { onSelectionContextMenu, noPanClassName, disableKeyboardA11y })] }) });
7892
7700
  }
7893
7701
  FlowRendererComponent.displayName = "FlowRenderer";
7894
7702
  var FlowRenderer = ReactExports.memo(FlowRendererComponent);
@@ -8693,16 +8501,17 @@ function useStylesLoadedWarning() {
8693
8501
  }
8694
8502
  }, []);
8695
8503
  }
8696
- 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 }) {
8504
+ 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 }) {
8697
8505
  useNodeOrEdgeTypesWarning(nodeTypes);
8698
8506
  useNodeOrEdgeTypesWarning(edgeTypes);
8699
8507
  useStylesLoadedWarning();
8700
8508
  useOnInitHandler(onInit);
8701
8509
  useViewportSync(viewport);
8702
- return jsxRuntime.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: jsxRuntime.jsxs(Viewport, { children: [jsxRuntime.jsx(EdgeRenderer, { edgeTypes, onEdgeClick, onEdgeDoubleClick, onReconnect, onReconnectStart, onReconnectEnd, onlyRenderVisibleElements, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, defaultMarkerColor, noPanClassName, disableKeyboardA11y, rfId }), jsxRuntime.jsx(ConnectionLineWrapper, { style: connectionLineStyle, type: connectionLineType, component: connectionLineComponent, containerStyle: connectionLineContainerStyle }), jsxRuntime.jsx("div", { className: "react-flow__edgelabel-renderer" }), jsxRuntime.jsx(NodeRenderer, { nodeTypes, onNodeClick, onNodeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, nodeClickDistance, onlyRenderVisibleElements, noPanClassName, noDragClassName, disableKeyboardA11y, nodeExtent, rfId }), jsxRuntime.jsx("div", { className: "react-flow__viewport-portal" })] }) });
8510
+ return jsxRuntime.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: jsxRuntime.jsxs(Viewport, { children: [jsxRuntime.jsx(EdgeRenderer, { edgeTypes, onEdgeClick, onEdgeDoubleClick, onReconnect, onReconnectStart, onReconnectEnd, onlyRenderVisibleElements, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, defaultMarkerColor, noPanClassName, disableKeyboardA11y, rfId }), jsxRuntime.jsx(ConnectionLineWrapper, { style: connectionLineStyle, type: connectionLineType, component: connectionLineComponent, containerStyle: connectionLineContainerStyle }), jsxRuntime.jsx("div", { className: "react-flow__edgelabel-renderer" }), jsxRuntime.jsx(NodeRenderer, { nodeTypes, onNodeClick, onNodeDoubleClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, nodeClickDistance, onlyRenderVisibleElements, noPanClassName, noDragClassName, disableKeyboardA11y, nodeExtent, rfId }), jsxRuntime.jsx("div", { className: "react-flow__viewport-portal" })] }) });
8703
8511
  }
8704
8512
  GraphViewComponent.displayName = "GraphView";
8705
8513
  var GraphView = ReactExports.memo(GraphViewComponent);
8514
+ var devWarn = createDevWarn("React Flow", "https://reactflow.dev/");
8706
8515
  var getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom = 0.5, maxZoom = 2, nodeOrigin, nodeExtent, zIndexMode = "basic" } = {}) => {
8707
8516
  const nodeLookup = /* @__PURE__ */ new Map();
8708
8517
  const parentLookup = /* @__PURE__ */ new Map();
@@ -9049,7 +8858,7 @@ var createStore2 = ({ nodes, edges, defaultNodes, defaultEdges, width, height, f
9049
8858
  setCenter: async (x, y, options) => {
9050
8859
  const { width: width2, height: height2, maxZoom: maxZoom2, panZoom } = get3();
9051
8860
  if (!panZoom) {
9052
- return Promise.resolve(false);
8861
+ return false;
9053
8862
  }
9054
8863
  const nextZoom = typeof options?.zoom !== "undefined" ? options.zoom : maxZoom2;
9055
8864
  await panZoom.setViewport({
@@ -9057,7 +8866,7 @@ var createStore2 = ({ nodes, edges, defaultNodes, defaultEdges, width, height, f
9057
8866
  y: height2 / 2 - y * nextZoom,
9058
8867
  zoom: nextZoom
9059
8868
  }, { duration: options?.duration, ease: options?.ease, interpolate: options?.interpolate });
9060
- return Promise.resolve(true);
8869
+ return true;
9061
8870
  },
9062
8871
  cancelConnection: () => {
9063
8872
  set3({
@@ -9102,14 +8911,14 @@ var wrapperStyle = {
9102
8911
  position: "relative",
9103
8912
  zIndex: 0
9104
8913
  };
9105
- 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) {
8914
+ 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) {
9106
8915
  const rfId = id2 || "1";
9107
8916
  const colorModeClassName = useColorModeClass(colorMode);
9108
8917
  const wrapperOnScroll = ReactExports.useCallback((e) => {
9109
8918
  e.currentTarget.scrollTo({ top: 0, left: 0, behavior: "instant" });
9110
8919
  onScroll?.(e);
9111
8920
  }, [onScroll]);
9112
- return jsxRuntime.jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style2, ...wrapperStyle }, ref, className: cc(["react-flow", className, colorModeClassName]), id: id2, role: "application", children: jsxRuntime.jsxs(Wrapper, { nodes, edges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, zIndexMode, children: [jsxRuntime.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 }), jsxRuntime.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 }), jsxRuntime.jsx(SelectionListener, { onSelectionChange }), children2, jsxRuntime.jsx(Attribution, { proOptions, position: attributionPosition }), jsxRuntime.jsx(A11yDescriptions, { rfId, disableKeyboardA11y })] }) });
8921
+ return jsxRuntime.jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style2, ...wrapperStyle }, ref, className: cc(["react-flow", className, colorModeClassName]), id: id2, role: "application", children: jsxRuntime.jsxs(Wrapper, { nodes, edges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, zIndexMode, children: [jsxRuntime.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 }), jsxRuntime.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 }), jsxRuntime.jsx(SelectionListener, { onSelectionChange }), children2, jsxRuntime.jsx(Attribution, { proOptions, position: attributionPosition }), jsxRuntime.jsx(A11yDescriptions, { rfId, disableKeyboardA11y })] }) });
9113
8922
  }
9114
8923
  var index = fixedForwardRef(ReactFlow);
9115
8924
  function LinePattern({ dimensions, lineWidth, variant, className }) {
@@ -10049,7 +9858,7 @@ function useFlowState(initial) {
10049
9858
  setEdges((es) => applyEdgeChanges(changes, es));
10050
9859
  }, []);
10051
9860
  const onConnect = ReactExports.useCallback((connection) => {
10052
- setEdges((es) => addEdge(connection, es));
9861
+ setEdges((es) => addEdge2(connection, es));
10053
9862
  }, []);
10054
9863
  const toGraph = ReactExports.useCallback(() => ({ nodes, edges }), [nodes, edges]);
10055
9864
  return { nodes, edges, setNodes, setEdges, onNodesChange, onEdgesChange, onConnect, toGraph };
@@ -10583,7 +10392,7 @@ function makeControlledFlowAdapter(value, onChange) {
10583
10392
  apply({ nodes: value.nodes, edges: applyEdgeChanges(changes, value.edges) });
10584
10393
  },
10585
10394
  onConnect: (connection) => {
10586
- apply({ nodes: value.nodes, edges: addEdge(connection, value.edges) });
10395
+ apply({ nodes: value.nodes, edges: addEdge2(connection, value.edges) });
10587
10396
  },
10588
10397
  toGraph: () => value
10589
10398
  };
@@ -10729,52 +10538,6 @@ function NodePort({ side, type, id: id2, style: style2, title, className }) {
10729
10538
 
10730
10539
  // src/index.ts
10731
10540
  registerBuiltinKinds();
10732
- /*! Bundled license information:
10733
-
10734
- use-sync-external-store/cjs/use-sync-external-store-shim.production.js:
10735
- (**
10736
- * @license React
10737
- * use-sync-external-store-shim.production.js
10738
- *
10739
- * Copyright (c) Meta Platforms, Inc. and affiliates.
10740
- *
10741
- * This source code is licensed under the MIT license found in the
10742
- * LICENSE file in the root directory of this source tree.
10743
- *)
10744
-
10745
- use-sync-external-store/cjs/use-sync-external-store-shim.development.js:
10746
- (**
10747
- * @license React
10748
- * use-sync-external-store-shim.development.js
10749
- *
10750
- * Copyright (c) Meta Platforms, Inc. and affiliates.
10751
- *
10752
- * This source code is licensed under the MIT license found in the
10753
- * LICENSE file in the root directory of this source tree.
10754
- *)
10755
-
10756
- use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.production.js:
10757
- (**
10758
- * @license React
10759
- * use-sync-external-store-shim/with-selector.production.js
10760
- *
10761
- * Copyright (c) Meta Platforms, Inc. and affiliates.
10762
- *
10763
- * This source code is licensed under the MIT license found in the
10764
- * LICENSE file in the root directory of this source tree.
10765
- *)
10766
-
10767
- use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.development.js:
10768
- (**
10769
- * @license React
10770
- * use-sync-external-store-shim/with-selector.development.js
10771
- *
10772
- * Copyright (c) Meta Platforms, Inc. and affiliates.
10773
- *
10774
- * This source code is licensed under the MIT license found in the
10775
- * LICENSE file in the root directory of this source tree.
10776
- *)
10777
- */
10778
10541
 
10779
10542
  exports.ActionNode = ActionNode;
10780
10543
  exports.BUILTIN_KINDS = BUILTIN_KINDS;