@xyflow/react 12.5.5 → 12.6.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/esm/additional-components/NodeResizer/NodeResizeControl.d.ts +1 -1
  2. package/dist/esm/additional-components/NodeResizer/NodeResizeControl.d.ts.map +1 -1
  3. package/dist/esm/additional-components/NodeResizer/types.d.ts +7 -2
  4. package/dist/esm/additional-components/NodeResizer/types.d.ts.map +1 -1
  5. package/dist/esm/components/ReactFlowProvider/index.d.ts +33 -2
  6. package/dist/esm/components/ReactFlowProvider/index.d.ts.map +1 -1
  7. package/dist/esm/container/ReactFlow/Wrapper.d.ts +5 -2
  8. package/dist/esm/container/ReactFlow/Wrapper.d.ts.map +1 -1
  9. package/dist/esm/container/ReactFlow/index.d.ts.map +1 -1
  10. package/dist/esm/hooks/useNodesInitialized.d.ts.map +1 -1
  11. package/dist/esm/hooks/useReactFlow.d.ts.map +1 -1
  12. package/dist/esm/index.js +54 -27
  13. package/dist/esm/index.mjs +54 -27
  14. package/dist/esm/store/index.d.ts +5 -2
  15. package/dist/esm/store/index.d.ts.map +1 -1
  16. package/dist/esm/store/initialState.d.ts +5 -2
  17. package/dist/esm/store/initialState.d.ts.map +1 -1
  18. package/dist/esm/types/store.d.ts +3 -2
  19. package/dist/esm/types/store.d.ts.map +1 -1
  20. package/dist/esm/utils/changes.d.ts.map +1 -1
  21. package/dist/style.css +11 -0
  22. package/dist/umd/additional-components/NodeResizer/NodeResizeControl.d.ts +1 -1
  23. package/dist/umd/additional-components/NodeResizer/NodeResizeControl.d.ts.map +1 -1
  24. package/dist/umd/additional-components/NodeResizer/types.d.ts +7 -2
  25. package/dist/umd/additional-components/NodeResizer/types.d.ts.map +1 -1
  26. package/dist/umd/components/ReactFlowProvider/index.d.ts +33 -2
  27. package/dist/umd/components/ReactFlowProvider/index.d.ts.map +1 -1
  28. package/dist/umd/container/ReactFlow/Wrapper.d.ts +5 -2
  29. package/dist/umd/container/ReactFlow/Wrapper.d.ts.map +1 -1
  30. package/dist/umd/container/ReactFlow/index.d.ts.map +1 -1
  31. package/dist/umd/hooks/useNodesInitialized.d.ts.map +1 -1
  32. package/dist/umd/hooks/useReactFlow.d.ts.map +1 -1
  33. package/dist/umd/index.js +2 -2
  34. package/dist/umd/store/index.d.ts +5 -2
  35. package/dist/umd/store/index.d.ts.map +1 -1
  36. package/dist/umd/store/initialState.d.ts +5 -2
  37. package/dist/umd/store/initialState.d.ts.map +1 -1
  38. package/dist/umd/types/store.d.ts +3 -2
  39. package/dist/umd/types/store.d.ts.map +1 -1
  40. package/dist/umd/utils/changes.d.ts.map +1 -1
  41. package/package.json +2 -2
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import type { ResizeControlProps, ResizeControlLineProps } from './types';
3
- declare function ResizeControl({ nodeId, position, variant, className, style, children, color, minWidth, minHeight, maxWidth, maxHeight, keepAspectRatio, shouldResize, onResizeStart, onResize, onResizeEnd, }: ResizeControlProps): import("react/jsx-runtime").JSX.Element;
3
+ declare function ResizeControl({ nodeId, position, variant, className, style, children, color, minWidth, minHeight, maxWidth, maxHeight, keepAspectRatio, resizeDirection, shouldResize, onResizeStart, onResize, onResizeEnd, }: ResizeControlProps): import("react/jsx-runtime").JSX.Element;
4
4
  export declare function ResizeControlLine(props: ResizeControlLineProps): import("react/jsx-runtime").JSX.Element;
5
5
  /**
6
6
  * To create your own resizing UI, you can use the `NodeResizeControl` component where you can pass children (such as icons).
@@ -1 +1 @@
1
- {"version":3,"file":"NodeResizeControl.d.ts","sourceRoot":"","sources":["../../../src/additional-components/NodeResizer/NodeResizeControl.tsx"],"names":[],"mappings":";AAmBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAE1E,iBAAS,aAAa,CAAC,EACrB,MAAM,EACN,QAAQ,EACR,OAAqC,EACrC,SAAS,EACT,KAAU,EACV,QAAQ,EACR,KAAK,EACL,QAAa,EACb,SAAc,EACd,QAA2B,EAC3B,SAA4B,EAC5B,eAAuB,EACvB,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,WAAW,GACZ,EAAE,kBAAkB,2CAqKpB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAE9D;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,2DAAsB,CAAC"}
1
+ {"version":3,"file":"NodeResizeControl.d.ts","sourceRoot":"","sources":["../../../src/additional-components/NodeResizer/NodeResizeControl.tsx"],"names":[],"mappings":";AAmBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAE1E,iBAAS,aAAa,CAAC,EACrB,MAAM,EACN,QAAQ,EACR,OAAqC,EACrC,SAAS,EACT,KAAU,EACV,QAAQ,EACR,KAAK,EACL,QAAa,EACb,SAAc,EACd,QAA2B,EAC3B,SAA4B,EAC5B,eAAuB,EACvB,eAAe,EACf,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,WAAW,GACZ,EAAE,kBAAkB,2CAuKpB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAE9D;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,2DAAsB,CAAC"}
@@ -1,5 +1,5 @@
1
1
  import type { CSSProperties, ReactNode } from 'react';
2
- import type { ControlPosition, ControlLinePosition, ResizeControlVariant, ShouldResize, OnResizeStart, OnResize, OnResizeEnd } from '@xyflow/system';
2
+ import type { ControlPosition, ControlLinePosition, ResizeControlVariant, ResizeControlDirection, ShouldResize, OnResizeStart, OnResize, OnResizeEnd } from '@xyflow/system';
3
3
  /**
4
4
  * @expand
5
5
  */
@@ -74,6 +74,11 @@ export type ResizeControlProps = Pick<NodeResizerProps, 'nodeId' | 'color' | 'mi
74
74
  * @example ResizeControlVariant.Handle, ResizeControlVariant.Line
75
75
  */
76
76
  variant?: ResizeControlVariant;
77
+ /**
78
+ * The direction the user can resize the node.
79
+ * If not provided, the user can resize in any direction.
80
+ */
81
+ resizeDirection?: ResizeControlDirection;
77
82
  className?: string;
78
83
  style?: CSSProperties;
79
84
  children?: ReactNode;
@@ -81,7 +86,7 @@ export type ResizeControlProps = Pick<NodeResizerProps, 'nodeId' | 'color' | 'mi
81
86
  /**
82
87
  * @expand
83
88
  */
84
- export type ResizeControlLineProps = ResizeControlProps & {
89
+ export type ResizeControlLineProps = Omit<ResizeControlProps, 'resizeDirection'> & {
85
90
  position?: ControlLinePosition;
86
91
  };
87
92
  //# sourceMappingURL=types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/additional-components/NodeResizer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EACpB,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,WAAW,EACZ,MAAM,gBAAgB,CAAC;AAExB;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mDAAmD;IACnD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,4CAA4C;IAC5C,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,gBAAgB,EACd,QAAQ,GACR,OAAO,GACP,UAAU,GACV,WAAW,GACX,UAAU,GACV,WAAW,GACX,iBAAiB,GACjB,cAAc,GACd,eAAe,GACf,UAAU,GACV,aAAa,CAChB,GAAG;IACF;;;;OAIG;IACH,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B;;;;OAIG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,kBAAkB,GAAG;IACxD,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAChC,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/additional-components/NodeResizer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EACpB,sBAAsB,EACtB,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,WAAW,EACZ,MAAM,gBAAgB,CAAC;AAExB;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mDAAmD;IACnD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,4CAA4C;IAC5C,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,gBAAgB,EACd,QAAQ,GACR,OAAO,GACP,UAAU,GACV,WAAW,GACX,UAAU,GACV,WAAW,GACX,iBAAiB,GACjB,cAAc,GACd,eAAe,GACf,UAAU,GACV,aAAa,CAChB,GAAG;IACF;;;;OAIG;IACH,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B;;;;OAIG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B;;;OAGG;IACH,eAAe,CAAC,EAAE,sBAAsB,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,GAAG;IACjF,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAChC,CAAC"}
@@ -1,15 +1,46 @@
1
1
  import { type ReactNode } from 'react';
2
- import type { Node, Edge } from '../../types';
2
+ import type { Node, Edge, FitViewOptions } from '../../types';
3
3
  import { CoordinateExtent, NodeOrigin } from '@xyflow/system';
4
4
  export type ReactFlowProviderProps = {
5
+ /** These nodes are used to initialize the flow. They are not dynamic. */
5
6
  initialNodes?: Node[];
7
+ /** These edges are used to initialize the flow. They are not dynamic. */
6
8
  initialEdges?: Edge[];
9
+ /** These nodes are used to initialize the flow. They are not dynamic. */
7
10
  defaultNodes?: Node[];
11
+ /** These edges are used to initialize the flow. They are not dynamic. */
8
12
  defaultEdges?: Edge[];
13
+ /** The initial width is necessary to be able to use fitView on the server */
9
14
  initialWidth?: number;
15
+ /** The initial height is necessary to be able to use fitView on the server */
10
16
  initialHeight?: number;
17
+ /** When `true`, the flow will be zoomed and panned to fit all the nodes initially provided. */
11
18
  fitView?: boolean;
19
+ /**
20
+ * You can provide an object of options to customize the initial fitView behavior.
21
+ */
22
+ initialFitViewOptions?: FitViewOptions;
23
+ /** Initial minimum zoom level */
24
+ initialMinZoom?: number;
25
+ /** Initial maximum zoom level */
26
+ initialMaxZoom?: number;
27
+ /**
28
+ * The origin of the node to use when placing it in the flow or looking up its `x` and `y`
29
+ * position. An origin of `[0, 0]` means that a node's top left corner will be placed at the `x`
30
+ * and `y` position.
31
+ * @default [0, 0]
32
+ * @example
33
+ * [0, 0] // default, top left
34
+ * [0.5, 0.5] // center
35
+ * [1, 1] // bottom right
36
+ */
12
37
  nodeOrigin?: NodeOrigin;
38
+ /**
39
+ * By default, nodes can be placed on an infinite flow. You can use this prop to set a boundary.
40
+ *
41
+ * The first pair of coordinates is the top left boundary and the second pair is the bottom right.
42
+ * @example [[-1000, -10000], [1000, 1000]]
43
+ */
13
44
  nodeExtent?: CoordinateExtent;
14
45
  children: ReactNode;
15
46
  };
@@ -47,5 +78,5 @@ export type ReactFlowProviderProps = {
47
78
  * your router. If you have multiple flows on the same page you will need to use a separate
48
79
  * `<ReactFlowProvider />` for each flow.
49
80
  */
50
- export declare function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, fitView, nodeOrigin, nodeExtent, children, }: ReactFlowProviderProps): import("react/jsx-runtime").JSX.Element;
81
+ export declare function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, initialMinZoom: minZoom, initialMaxZoom: maxZoom, initialFitViewOptions: fitViewOptions, fitView, nodeOrigin, nodeExtent, children, }: ReactFlowProviderProps): import("react/jsx-runtime").JSX.Element;
51
82
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ReactFlowProvider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKjD,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE9D,MAAM,MAAM,sBAAsB,GAAG;IACnC,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EAAE,KAAK,EACnB,YAAY,EAAE,KAAK,EACnB,YAAY,EACZ,YAAY,EACZ,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,EACrB,OAAO,EACP,UAAU,EACV,UAAU,EACV,QAAQ,GACT,EAAE,sBAAsB,2CAoBxB"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ReactFlowProvider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKjD,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE9D,MAAM,MAAM,sBAAsB,GAAG;IACnC,yEAAyE;IACzE,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,yEAAyE;IACzE,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,yEAAyE;IACzE,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,yEAAyE;IACzE,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8EAA8E;IAC9E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+FAA+F;IAC/F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,qBAAqB,CAAC,EAAE,cAAc,CAAC;IACvC,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EAAE,KAAK,EACnB,YAAY,EAAE,KAAK,EACnB,YAAY,EACZ,YAAY,EACZ,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,OAAO,EACvB,cAAc,EAAE,OAAO,EACvB,qBAAqB,EAAE,cAAc,EACrC,OAAO,EACP,UAAU,EACV,UAAU,EACV,QAAQ,GACT,EAAE,sBAAsB,2CAuBxB"}
@@ -1,7 +1,7 @@
1
1
  import { type ReactNode } from 'react';
2
- import type { Node, Edge } from '../../types';
2
+ import type { Node, Edge, FitViewOptions } from '../../types';
3
3
  import { CoordinateExtent, NodeOrigin } from '@xyflow/system';
4
- export declare function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, nodeOrigin, nodeExtent, }: {
4
+ export declare function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, }: {
5
5
  children: ReactNode;
6
6
  nodes?: Node[];
7
7
  edges?: Edge[];
@@ -10,6 +10,9 @@ export declare function Wrapper({ children, nodes, edges, defaultNodes, defaultE
10
10
  width?: number;
11
11
  height?: number;
12
12
  fitView?: boolean;
13
+ fitViewOptions?: FitViewOptions;
14
+ minZoom?: number;
15
+ maxZoom?: number;
13
16
  nodeOrigin?: NodeOrigin;
14
17
  nodeExtent?: CoordinateExtent;
15
18
  }): import("react/jsx-runtime").JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"Wrapper.d.ts","sourceRoot":"","sources":["../../../src/container/ReactFlow/Wrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAInD,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE9D,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAU,EACV,UAAU,GACX,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B,2CA0BA"}
1
+ {"version":3,"file":"Wrapper.d.ts","sourceRoot":"","sources":["../../../src/container/ReactFlow/Wrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAInD,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE9D,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,MAAM,EACN,OAAO,EACP,cAAc,EACd,OAAO,EACP,OAAO,EACP,UAAU,EACV,UAAU,GACX,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B,2CA6BA"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/ReactFlow/index.tsx"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AA+S9D;;;;;;;;;;;;;;;;;;;GAmBG;;AACH,wBAA0C"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/ReactFlow/index.tsx"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAkT9D;;;;;;;;;;;;;;;;;;;GAmBG;;AACH,wBAA0C"}
@@ -1 +1 @@
1
- {"version":3,"file":"useNodesInitialized.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodesInitialized.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,0BAA0B,GAAG;IACvC,qBAAqB;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAkBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,0BAER,GACA,OAAO,CAIT"}
1
+ {"version":3,"file":"useNodesInitialized.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodesInitialized.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,0BAA0B,GAAG;IACvC,qBAAqB;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAoBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,0BAER,GACA,OAAO,CAIT"}
@@ -1 +1 @@
1
- {"version":3,"file":"useReactFlow.d.ts","sourceRoot":"","sources":["../../src/hooks/useReactFlow.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EACV,iBAAiB,EACjB,IAAI,EACJ,IAAI,EAKL,MAAM,UAAU,CAAC;AAIlB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,KAAK,iBAAiB,CAC3G,QAAQ,EACR,QAAQ,CACT,CAiPA"}
1
+ {"version":3,"file":"useReactFlow.d.ts","sourceRoot":"","sources":["../../src/hooks/useReactFlow.ts"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EACV,iBAAiB,EACjB,IAAI,EACJ,IAAI,EAKL,MAAM,UAAU,CAAC;AAIlB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,KAAK,iBAAiB,CAC3G,QAAQ,EACR,QAAQ,CACT,CAiPA"}
package/dist/esm/index.js CHANGED
@@ -2,7 +2,7 @@
2
2
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
3
3
  import { createContext, useContext, useMemo, forwardRef, useEffect, useRef, useState, useLayoutEffect, useCallback, memo } from 'react';
4
4
  import cc from 'classcat';
5
- import { errorMessages, infiniteExtent, isInputDOMNode, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, getNodesBounds, evaluateAbsolutePosition, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, areSetsEqual, XYDrag, snapPosition, calculateNodePosition, Position, ConnectionMode, isMouseEvent, XYHandle, getHostForElement, addEdge, getInternalNodesBounds, isNumeric, nodeHasDimensions, getNodeDimensions, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, getConnectionStatus, ConnectionLineType, updateConnectionLookup, adoptUserNodes, initialConnection, devWarn, updateNodeInternals, updateAbsolutePositions, handleExpandParent, panBy, fitViewport, isMacOs, areConnectionMapsEqual, handleConnectionChange, shallowNodeData, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform } from '@xyflow/system';
5
+ import { errorMessages, infiniteExtent, isInputDOMNode, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, getNodesBounds, withResolvers, evaluateAbsolutePosition, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, areSetsEqual, XYDrag, snapPosition, calculateNodePosition, Position, ConnectionMode, isMouseEvent, XYHandle, getHostForElement, addEdge, getInternalNodesBounds, isNumeric, nodeHasDimensions, getNodeDimensions, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, getConnectionStatus, ConnectionLineType, updateConnectionLookup, adoptUserNodes, initialConnection, devWarn, updateNodeInternals, updateAbsolutePositions, handleExpandParent, panBy, fitViewport, isMacOs, areConnectionMapsEqual, handleConnectionChange, shallowNodeData, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform } from '@xyflow/system';
6
6
  export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, addEdge, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, reconnectEdge } from '@xyflow/system';
7
7
  import { useStoreWithEqualityFn, createWithEqualityFn } from 'zustand/traditional';
8
8
  import { shallow } from 'zustand/shallow';
@@ -685,8 +685,12 @@ function applyChange(change, element) {
685
685
  element.measured.width = change.dimensions.width;
686
686
  element.measured.height = change.dimensions.height;
687
687
  if (change.setAttributes) {
688
- element.width = change.dimensions.width;
689
- element.height = change.dimensions.height;
688
+ if (change.setAttributes === true || change.setAttributes === 'width') {
689
+ element.width = change.dimensions.width;
690
+ }
691
+ if (change.setAttributes === true || change.setAttributes === 'height') {
692
+ element.height = change.dimensions.height;
693
+ }
690
694
  }
691
695
  }
692
696
  if (typeof change.resizing === 'boolean') {
@@ -1184,7 +1188,7 @@ function useReactFlow() {
1184
1188
  fitView: async (options) => {
1185
1189
  // We either create a new Promise or reuse the existing one
1186
1190
  // Even if fitView is called multiple times in a row, we only end up with a single Promise
1187
- const fitViewResolver = store.getState().fitViewResolver ?? Promise.withResolvers();
1191
+ const fitViewResolver = store.getState().fitViewResolver ?? withResolvers();
1188
1192
  // We schedule a fitView by setting fitViewQueued and triggering a setNodes
1189
1193
  store.setState({ fitViewQueued: true, fitViewOptions: options, fitViewResolver });
1190
1194
  batchContext.nodeQueue.push((nodes) => [...nodes]);
@@ -2323,7 +2327,7 @@ const MarkerDefinitions = ({ defaultColor, rfId }) => {
2323
2327
  if (!markers.length) {
2324
2328
  return null;
2325
2329
  }
2326
- return (jsx("svg", { className: "react-flow__marker", children: jsx("defs", { children: markers.map((marker) => (jsx(Marker, { id: marker.id, type: marker.type, color: marker.color, width: marker.width, height: marker.height, markerUnits: marker.markerUnits, strokeWidth: marker.strokeWidth, orient: marker.orient }, marker.id))) }) }));
2330
+ return (jsx("svg", { className: "react-flow__marker", "aria-hidden": "true", children: jsx("defs", { children: markers.map((marker) => (jsx(Marker, { id: marker.id, type: marker.type, color: marker.color, width: marker.width, height: marker.height, markerUnits: marker.markerUnits, strokeWidth: marker.strokeWidth, orient: marker.orient }, marker.id))) }) }));
2327
2331
  };
2328
2332
  MarkerDefinitions.displayName = 'MarkerDefinitions';
2329
2333
  var MarkerDefinitions$1 = memo(MarkerDefinitions);
@@ -3066,7 +3070,7 @@ function GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeC
3066
3070
  GraphViewComponent.displayName = 'GraphView';
3067
3071
  const GraphView = memo(GraphViewComponent);
3068
3072
 
3069
- const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, nodeOrigin, nodeExtent, } = {}) => {
3073
+ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom = 0.5, maxZoom = 2, nodeOrigin, nodeExtent, } = {}) => {
3070
3074
  const nodeLookup = new Map();
3071
3075
  const parentLookup = new Map();
3072
3076
  const connectionLookup = new Map();
@@ -3076,7 +3080,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
3076
3080
  const storeNodeOrigin = nodeOrigin ?? [0, 0];
3077
3081
  const storeNodeExtent = nodeExtent ?? infiniteExtent;
3078
3082
  updateConnectionLookup(connectionLookup, edgeLookup, storeEdges);
3079
- adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
3083
+ const nodesInitialized = adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
3080
3084
  nodeOrigin: storeNodeOrigin,
3081
3085
  nodeExtent: storeNodeExtent,
3082
3086
  elevateNodesOnSelect: false,
@@ -3086,7 +3090,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
3086
3090
  const bounds = getInternalNodesBounds(nodeLookup, {
3087
3091
  filter: (node) => !!((node.width || node.initialWidth) && (node.height || node.initialHeight)),
3088
3092
  });
3089
- const { x, y, zoom } = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
3093
+ const { x, y, zoom } = getViewportForBounds(bounds, width, height, minZoom, maxZoom, fitViewOptions?.padding ?? 0.1);
3090
3094
  transform = [x, y, zoom];
3091
3095
  }
3092
3096
  return {
@@ -3095,6 +3099,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
3095
3099
  height: 0,
3096
3100
  transform,
3097
3101
  nodes: storeNodes,
3102
+ nodesInitialized,
3098
3103
  nodeLookup,
3099
3104
  parentLookup,
3100
3105
  edges: storeEdges,
@@ -3105,8 +3110,8 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
3105
3110
  hasDefaultNodes: defaultNodes !== undefined,
3106
3111
  hasDefaultEdges: defaultEdges !== undefined,
3107
3112
  panZoom: null,
3108
- minZoom: 0.5,
3109
- maxZoom: 2,
3113
+ minZoom,
3114
+ maxZoom,
3110
3115
  translateExtent: infiniteExtent,
3111
3116
  nodeExtent: storeNodeExtent,
3112
3117
  nodesSelectionActive: false,
@@ -3131,7 +3136,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
3131
3136
  selectNodesOnDrag: true,
3132
3137
  multiSelectionActive: false,
3133
3138
  fitViewQueued: fitView ?? false,
3134
- fitViewOptions: undefined,
3139
+ fitViewOptions,
3135
3140
  fitViewResolver: null,
3136
3141
  connection: { ...initialConnection },
3137
3142
  connectionClickStartHandle: null,
@@ -3149,7 +3154,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
3149
3154
  };
3150
3155
  };
3151
3156
 
3152
- const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, nodeOrigin, nodeExtent, }) => createWithEqualityFn((set, get) => {
3157
+ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, }) => createWithEqualityFn((set, get) => {
3153
3158
  async function resolveFitView() {
3154
3159
  const { nodeLookup, panZoom, fitViewOptions, fitViewResolver, width, height, minZoom, maxZoom } = get();
3155
3160
  if (!panZoom) {
@@ -3171,7 +3176,20 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
3171
3176
  set({ fitViewResolver: null });
3172
3177
  }
3173
3178
  return {
3174
- ...getInitialState({ nodes, edges, width, height, fitView, nodeOrigin, nodeExtent, defaultNodes, defaultEdges }),
3179
+ ...getInitialState({
3180
+ nodes,
3181
+ edges,
3182
+ width,
3183
+ height,
3184
+ fitView,
3185
+ fitViewOptions,
3186
+ minZoom,
3187
+ maxZoom,
3188
+ nodeOrigin,
3189
+ nodeExtent,
3190
+ defaultNodes,
3191
+ defaultEdges,
3192
+ }),
3175
3193
  setNodes: (nodes) => {
3176
3194
  const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, fitViewQueued } = get();
3177
3195
  /*
@@ -3190,10 +3208,10 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
3190
3208
  });
3191
3209
  if (fitViewQueued && nodesInitialized) {
3192
3210
  resolveFitView();
3193
- set({ nodes, fitViewQueued: false, fitViewOptions: undefined });
3211
+ set({ nodes, nodesInitialized, fitViewQueued: false, fitViewOptions: undefined });
3194
3212
  }
3195
3213
  else {
3196
- set({ nodes });
3214
+ set({ nodes, nodesInitialized });
3197
3215
  }
3198
3216
  },
3199
3217
  setEdges: (edges) => {
@@ -3362,7 +3380,10 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
3362
3380
  get().panZoom?.setClickDistance(clickDistance);
3363
3381
  },
3364
3382
  resetSelectedElements: () => {
3365
- const { edges, nodes, triggerNodeChanges, triggerEdgeChanges } = get();
3383
+ const { edges, nodes, triggerNodeChanges, triggerEdgeChanges, elementsSelectable } = get();
3384
+ if (!elementsSelectable) {
3385
+ return;
3386
+ }
3366
3387
  const nodeChanges = nodes.reduce((res, node) => (node.selected ? [...res, createSelectionChange(node.id, false)] : res), []);
3367
3388
  const edgeChanges = edges.reduce((res, edge) => (edge.selected ? [...res, createSelectionChange(edge.id, false)] : res), []);
3368
3389
  triggerNodeChanges(nodeChanges);
@@ -3434,7 +3455,7 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
3434
3455
  * your router. If you have multiple flows on the same page you will need to use a separate
3435
3456
  * `<ReactFlowProvider />` for each flow.
3436
3457
  */
3437
- function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, fitView, nodeOrigin, nodeExtent, children, }) {
3458
+ function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, initialMinZoom: minZoom, initialMaxZoom: maxZoom, initialFitViewOptions: fitViewOptions, fitView, nodeOrigin, nodeExtent, children, }) {
3438
3459
  const [store] = useState(() => createStore({
3439
3460
  nodes,
3440
3461
  edges,
@@ -3443,13 +3464,16 @@ function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNo
3443
3464
  width,
3444
3465
  height,
3445
3466
  fitView,
3467
+ minZoom,
3468
+ maxZoom,
3469
+ fitViewOptions,
3446
3470
  nodeOrigin,
3447
3471
  nodeExtent,
3448
3472
  }));
3449
3473
  return (jsx(Provider$1, { value: store, children: jsx(BatchProvider, { children: children }) }));
3450
3474
  }
3451
3475
 
3452
- function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, nodeOrigin, nodeExtent, }) {
3476
+ function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, }) {
3453
3477
  const isWrapped = useContext(StoreContext);
3454
3478
  if (isWrapped) {
3455
3479
  /*
@@ -3458,7 +3482,7 @@ function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, he
3458
3482
  */
3459
3483
  return jsx(Fragment, { children: children });
3460
3484
  }
3461
- return (jsx(ReactFlowProvider, { initialNodes: nodes, initialEdges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, initialWidth: width, initialHeight: height, fitView: fitView, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, children: children }));
3485
+ return (jsx(ReactFlowProvider, { initialNodes: nodes, initialEdges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, initialWidth: width, initialHeight: height, fitView: fitView, initialFitViewOptions: fitViewOptions, initialMinZoom: minZoom, initialMaxZoom: maxZoom, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, children: children }));
3462
3486
  }
3463
3487
 
3464
3488
  const wrapperStyle = {
@@ -3476,7 +3500,7 @@ function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTy
3476
3500
  e.currentTarget.scrollTo({ top: 0, left: 0, behavior: 'instant' });
3477
3501
  onScroll?.(e);
3478
3502
  }, [onScroll]);
3479
- return (jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), id: id, children: jsxs(Wrapper, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, children: [jsx(GraphView, { onInit: onInit, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onNodeDoubleClick: onNodeDoubleClick, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, connectionLineComponent: connectionLineComponent, connectionLineContainerStyle: connectionLineContainerStyle, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, deleteKeyCode: deleteKeyCode, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, preventScrolling: preventScrolling, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneScroll: onPaneScroll, onPaneContextMenu: onPaneContextMenu, paneClickDistance: paneClickDistance, nodeClickDistance: nodeClickDistance, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, reconnectRadius: reconnectRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeExtent: nodeExtent, viewport: viewport, onViewportChange: onViewportChange }), jsx(StoreUpdater, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onClickConnectStart: onClickConnectStart, onClickConnectEnd: onClickConnectEnd, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesReconnectable: edgesReconnectable, elementsSelectable: elementsSelectable, elevateNodesOnSelect: elevateNodesOnSelect, elevateEdgesOnSelect: elevateEdgesOnSelect, minZoom: minZoom, maxZoom: maxZoom, nodeExtent: nodeExtent, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, snapToGrid: snapToGrid, snapGrid: snapGrid, connectionMode: connectionMode, translateExtent: translateExtent, connectOnClick: connectOnClick, defaultEdgeOptions: defaultEdgeOptions, fitView: fitView, fitViewOptions: fitViewOptions, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onDelete: onDelete, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onSelectionDrag: onSelectionDrag, onSelectionDragStart: onSelectionDragStart, onSelectionDragStop: onSelectionDragStop, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, rfId: rfId, autoPanOnConnect: autoPanOnConnect, autoPanOnNodeDrag: autoPanOnNodeDrag, autoPanSpeed: autoPanSpeed, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, onBeforeDelete: onBeforeDelete, paneClickDistance: paneClickDistance, debug: debug }), jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
3503
+ return (jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), id: id, children: jsxs(Wrapper, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, fitViewOptions: fitViewOptions, minZoom: minZoom, maxZoom: maxZoom, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, children: [jsx(GraphView, { onInit: onInit, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onNodeDoubleClick: onNodeDoubleClick, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, connectionLineComponent: connectionLineComponent, connectionLineContainerStyle: connectionLineContainerStyle, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, deleteKeyCode: deleteKeyCode, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, preventScrolling: preventScrolling, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneScroll: onPaneScroll, onPaneContextMenu: onPaneContextMenu, paneClickDistance: paneClickDistance, nodeClickDistance: nodeClickDistance, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, reconnectRadius: reconnectRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeExtent: nodeExtent, viewport: viewport, onViewportChange: onViewportChange }), jsx(StoreUpdater, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onClickConnectStart: onClickConnectStart, onClickConnectEnd: onClickConnectEnd, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesReconnectable: edgesReconnectable, elementsSelectable: elementsSelectable, elevateNodesOnSelect: elevateNodesOnSelect, elevateEdgesOnSelect: elevateEdgesOnSelect, minZoom: minZoom, maxZoom: maxZoom, nodeExtent: nodeExtent, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, snapToGrid: snapToGrid, snapGrid: snapGrid, connectionMode: connectionMode, translateExtent: translateExtent, connectOnClick: connectOnClick, defaultEdgeOptions: defaultEdgeOptions, fitView: fitView, fitViewOptions: fitViewOptions, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onDelete: onDelete, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onSelectionDrag: onSelectionDrag, onSelectionDragStart: onSelectionDragStart, onSelectionDragStop: onSelectionDragStop, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, rfId: rfId, autoPanOnConnect: autoPanOnConnect, autoPanOnNodeDrag: autoPanOnNodeDrag, autoPanSpeed: autoPanSpeed, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, onBeforeDelete: onBeforeDelete, paneClickDistance: paneClickDistance, debug: debug }), jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
3480
3504
  }
3481
3505
  /**
3482
3506
  * The `<ReactFlow />` component is the heart of your React Flow application.
@@ -3920,14 +3944,15 @@ function useOnSelectionChange({ onChange, }) {
3920
3944
  }
3921
3945
 
3922
3946
  const selector$4 = (options) => (s) => {
3947
+ if (!options.includeHiddenNodes) {
3948
+ return s.nodesInitialized;
3949
+ }
3923
3950
  if (s.nodeLookup.size === 0) {
3924
3951
  return false;
3925
3952
  }
3926
- for (const [, { hidden, internals }] of s.nodeLookup) {
3927
- if (options.includeHiddenNodes || !hidden) {
3928
- if (internals.handleBounds === undefined || !nodeHasDimensions(internals.userNode)) {
3929
- return false;
3930
- }
3953
+ for (const [, { internals }] of s.nodeLookup) {
3954
+ if (internals.handleBounds === undefined || !nodeHasDimensions(internals.userNode)) {
3955
+ return false;
3931
3956
  }
3932
3957
  }
3933
3958
  return true;
@@ -4480,7 +4505,7 @@ MiniMapComponent.displayName = 'MiniMap';
4480
4505
  */
4481
4506
  const MiniMap = memo(MiniMapComponent);
4482
4507
 
4483
- function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle, className, style = {}, children, color, minWidth = 10, minHeight = 10, maxWidth = Number.MAX_VALUE, maxHeight = Number.MAX_VALUE, keepAspectRatio = false, shouldResize, onResizeStart, onResize, onResizeEnd, }) {
4508
+ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle, className, style = {}, children, color, minWidth = 10, minHeight = 10, maxWidth = Number.MAX_VALUE, maxHeight = Number.MAX_VALUE, keepAspectRatio = false, resizeDirection, shouldResize, onResizeStart, onResize, onResizeEnd, }) {
4484
4509
  const contextNodeId = useNodeId();
4485
4510
  const id = typeof nodeId === 'string' ? nodeId : contextNodeId;
4486
4511
  const store = useStoreApi();
@@ -4546,11 +4571,12 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
4546
4571
  changes.push(positionChange);
4547
4572
  }
4548
4573
  if (change.width !== undefined && change.height !== undefined) {
4574
+ const setAttributes = !resizeDirection ? true : resizeDirection === 'horizontal' ? 'width' : 'height';
4549
4575
  const dimensionChange = {
4550
4576
  id,
4551
4577
  type: 'dimensions',
4552
4578
  resizing: true,
4553
- setAttributes: true,
4579
+ setAttributes,
4554
4580
  dimensions: {
4555
4581
  width: change.width,
4556
4582
  height: change.height,
@@ -4590,6 +4616,7 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
4590
4616
  maxHeight,
4591
4617
  },
4592
4618
  keepAspectRatio,
4619
+ resizeDirection,
4593
4620
  onResizeStart,
4594
4621
  onResize,
4595
4622
  onResizeEnd,