@xyflow/react 12.5.6 → 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 (32) 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/index.js +43 -18
  11. package/dist/esm/index.mjs +43 -18
  12. package/dist/esm/store/index.d.ts +5 -2
  13. package/dist/esm/store/index.d.ts.map +1 -1
  14. package/dist/esm/store/initialState.d.ts +5 -2
  15. package/dist/esm/store/initialState.d.ts.map +1 -1
  16. package/dist/esm/utils/changes.d.ts.map +1 -1
  17. package/dist/umd/additional-components/NodeResizer/NodeResizeControl.d.ts +1 -1
  18. package/dist/umd/additional-components/NodeResizer/NodeResizeControl.d.ts.map +1 -1
  19. package/dist/umd/additional-components/NodeResizer/types.d.ts +7 -2
  20. package/dist/umd/additional-components/NodeResizer/types.d.ts.map +1 -1
  21. package/dist/umd/components/ReactFlowProvider/index.d.ts +33 -2
  22. package/dist/umd/components/ReactFlowProvider/index.d.ts.map +1 -1
  23. package/dist/umd/container/ReactFlow/Wrapper.d.ts +5 -2
  24. package/dist/umd/container/ReactFlow/Wrapper.d.ts.map +1 -1
  25. package/dist/umd/container/ReactFlow/index.d.ts.map +1 -1
  26. package/dist/umd/index.js +2 -2
  27. package/dist/umd/store/index.d.ts +5 -2
  28. package/dist/umd/store/index.d.ts.map +1 -1
  29. package/dist/umd/store/initialState.d.ts +5 -2
  30. package/dist/umd/store/initialState.d.ts.map +1 -1
  31. package/dist/umd/utils/changes.d.ts.map +1 -1
  32. 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"}
package/dist/esm/index.js CHANGED
@@ -135,12 +135,12 @@ const selector$m = (s) => {
135
135
  const selectedNodes = [];
136
136
  const selectedEdges = [];
137
137
  for (const [, node] of s.nodeLookup) {
138
- if (node.selected && (s.elementsSelectable || node.selectable)) {
138
+ if (node.selected) {
139
139
  selectedNodes.push(node.internals.userNode);
140
140
  }
141
141
  }
142
142
  for (const [, edge] of s.edgeLookup) {
143
- if (edge.selected && (s.elementsSelectable || edge.selectable)) {
143
+ if (edge.selected) {
144
144
  selectedEdges.push(edge);
145
145
  }
146
146
  }
@@ -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') {
@@ -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();
@@ -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 {
@@ -3106,8 +3110,8 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
3106
3110
  hasDefaultNodes: defaultNodes !== undefined,
3107
3111
  hasDefaultEdges: defaultEdges !== undefined,
3108
3112
  panZoom: null,
3109
- minZoom: 0.5,
3110
- maxZoom: 2,
3113
+ minZoom,
3114
+ maxZoom,
3111
3115
  translateExtent: infiniteExtent,
3112
3116
  nodeExtent: storeNodeExtent,
3113
3117
  nodesSelectionActive: false,
@@ -3132,7 +3136,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
3132
3136
  selectNodesOnDrag: true,
3133
3137
  multiSelectionActive: false,
3134
3138
  fitViewQueued: fitView ?? false,
3135
- fitViewOptions: undefined,
3139
+ fitViewOptions,
3136
3140
  fitViewResolver: null,
3137
3141
  connection: { ...initialConnection },
3138
3142
  connectionClickStartHandle: null,
@@ -3150,7 +3154,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
3150
3154
  };
3151
3155
  };
3152
3156
 
3153
- 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) => {
3154
3158
  async function resolveFitView() {
3155
3159
  const { nodeLookup, panZoom, fitViewOptions, fitViewResolver, width, height, minZoom, maxZoom } = get();
3156
3160
  if (!panZoom) {
@@ -3172,7 +3176,20 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
3172
3176
  set({ fitViewResolver: null });
3173
3177
  }
3174
3178
  return {
3175
- ...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
+ }),
3176
3193
  setNodes: (nodes) => {
3177
3194
  const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, fitViewQueued } = get();
3178
3195
  /*
@@ -3363,7 +3380,10 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
3363
3380
  get().panZoom?.setClickDistance(clickDistance);
3364
3381
  },
3365
3382
  resetSelectedElements: () => {
3366
- const { edges, nodes, triggerNodeChanges, triggerEdgeChanges } = get();
3383
+ const { edges, nodes, triggerNodeChanges, triggerEdgeChanges, elementsSelectable } = get();
3384
+ if (!elementsSelectable) {
3385
+ return;
3386
+ }
3367
3387
  const nodeChanges = nodes.reduce((res, node) => (node.selected ? [...res, createSelectionChange(node.id, false)] : res), []);
3368
3388
  const edgeChanges = edges.reduce((res, edge) => (edge.selected ? [...res, createSelectionChange(edge.id, false)] : res), []);
3369
3389
  triggerNodeChanges(nodeChanges);
@@ -3435,7 +3455,7 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
3435
3455
  * your router. If you have multiple flows on the same page you will need to use a separate
3436
3456
  * `<ReactFlowProvider />` for each flow.
3437
3457
  */
3438
- 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, }) {
3439
3459
  const [store] = useState(() => createStore({
3440
3460
  nodes,
3441
3461
  edges,
@@ -3444,13 +3464,16 @@ function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNo
3444
3464
  width,
3445
3465
  height,
3446
3466
  fitView,
3467
+ minZoom,
3468
+ maxZoom,
3469
+ fitViewOptions,
3447
3470
  nodeOrigin,
3448
3471
  nodeExtent,
3449
3472
  }));
3450
3473
  return (jsx(Provider$1, { value: store, children: jsx(BatchProvider, { children: children }) }));
3451
3474
  }
3452
3475
 
3453
- 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, }) {
3454
3477
  const isWrapped = useContext(StoreContext);
3455
3478
  if (isWrapped) {
3456
3479
  /*
@@ -3459,7 +3482,7 @@ function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, he
3459
3482
  */
3460
3483
  return jsx(Fragment, { children: children });
3461
3484
  }
3462
- 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 }));
3463
3486
  }
3464
3487
 
3465
3488
  const wrapperStyle = {
@@ -3477,7 +3500,7 @@ function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTy
3477
3500
  e.currentTarget.scrollTo({ top: 0, left: 0, behavior: 'instant' });
3478
3501
  onScroll?.(e);
3479
3502
  }, [onScroll]);
3480
- 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 })] }) }));
3481
3504
  }
3482
3505
  /**
3483
3506
  * The `<ReactFlow />` component is the heart of your React Flow application.
@@ -4482,7 +4505,7 @@ MiniMapComponent.displayName = 'MiniMap';
4482
4505
  */
4483
4506
  const MiniMap = memo(MiniMapComponent);
4484
4507
 
4485
- 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, }) {
4486
4509
  const contextNodeId = useNodeId();
4487
4510
  const id = typeof nodeId === 'string' ? nodeId : contextNodeId;
4488
4511
  const store = useStoreApi();
@@ -4548,11 +4571,12 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
4548
4571
  changes.push(positionChange);
4549
4572
  }
4550
4573
  if (change.width !== undefined && change.height !== undefined) {
4574
+ const setAttributes = !resizeDirection ? true : resizeDirection === 'horizontal' ? 'width' : 'height';
4551
4575
  const dimensionChange = {
4552
4576
  id,
4553
4577
  type: 'dimensions',
4554
4578
  resizing: true,
4555
- setAttributes: true,
4579
+ setAttributes,
4556
4580
  dimensions: {
4557
4581
  width: change.width,
4558
4582
  height: change.height,
@@ -4592,6 +4616,7 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
4592
4616
  maxHeight,
4593
4617
  },
4594
4618
  keepAspectRatio,
4619
+ resizeDirection,
4595
4620
  onResizeStart,
4596
4621
  onResize,
4597
4622
  onResizeEnd,
@@ -135,12 +135,12 @@ const selector$m = (s) => {
135
135
  const selectedNodes = [];
136
136
  const selectedEdges = [];
137
137
  for (const [, node] of s.nodeLookup) {
138
- if (node.selected && (s.elementsSelectable || node.selectable)) {
138
+ if (node.selected) {
139
139
  selectedNodes.push(node.internals.userNode);
140
140
  }
141
141
  }
142
142
  for (const [, edge] of s.edgeLookup) {
143
- if (edge.selected && (s.elementsSelectable || edge.selectable)) {
143
+ if (edge.selected) {
144
144
  selectedEdges.push(edge);
145
145
  }
146
146
  }
@@ -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') {
@@ -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();
@@ -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 {
@@ -3106,8 +3110,8 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
3106
3110
  hasDefaultNodes: defaultNodes !== undefined,
3107
3111
  hasDefaultEdges: defaultEdges !== undefined,
3108
3112
  panZoom: null,
3109
- minZoom: 0.5,
3110
- maxZoom: 2,
3113
+ minZoom,
3114
+ maxZoom,
3111
3115
  translateExtent: infiniteExtent,
3112
3116
  nodeExtent: storeNodeExtent,
3113
3117
  nodesSelectionActive: false,
@@ -3132,7 +3136,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
3132
3136
  selectNodesOnDrag: true,
3133
3137
  multiSelectionActive: false,
3134
3138
  fitViewQueued: fitView ?? false,
3135
- fitViewOptions: undefined,
3139
+ fitViewOptions,
3136
3140
  fitViewResolver: null,
3137
3141
  connection: { ...initialConnection },
3138
3142
  connectionClickStartHandle: null,
@@ -3150,7 +3154,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
3150
3154
  };
3151
3155
  };
3152
3156
 
3153
- 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) => {
3154
3158
  async function resolveFitView() {
3155
3159
  const { nodeLookup, panZoom, fitViewOptions, fitViewResolver, width, height, minZoom, maxZoom } = get();
3156
3160
  if (!panZoom) {
@@ -3172,7 +3176,20 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
3172
3176
  set({ fitViewResolver: null });
3173
3177
  }
3174
3178
  return {
3175
- ...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
+ }),
3176
3193
  setNodes: (nodes) => {
3177
3194
  const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, fitViewQueued } = get();
3178
3195
  /*
@@ -3363,7 +3380,10 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
3363
3380
  get().panZoom?.setClickDistance(clickDistance);
3364
3381
  },
3365
3382
  resetSelectedElements: () => {
3366
- const { edges, nodes, triggerNodeChanges, triggerEdgeChanges } = get();
3383
+ const { edges, nodes, triggerNodeChanges, triggerEdgeChanges, elementsSelectable } = get();
3384
+ if (!elementsSelectable) {
3385
+ return;
3386
+ }
3367
3387
  const nodeChanges = nodes.reduce((res, node) => (node.selected ? [...res, createSelectionChange(node.id, false)] : res), []);
3368
3388
  const edgeChanges = edges.reduce((res, edge) => (edge.selected ? [...res, createSelectionChange(edge.id, false)] : res), []);
3369
3389
  triggerNodeChanges(nodeChanges);
@@ -3435,7 +3455,7 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
3435
3455
  * your router. If you have multiple flows on the same page you will need to use a separate
3436
3456
  * `<ReactFlowProvider />` for each flow.
3437
3457
  */
3438
- 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, }) {
3439
3459
  const [store] = useState(() => createStore({
3440
3460
  nodes,
3441
3461
  edges,
@@ -3444,13 +3464,16 @@ function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNo
3444
3464
  width,
3445
3465
  height,
3446
3466
  fitView,
3467
+ minZoom,
3468
+ maxZoom,
3469
+ fitViewOptions,
3447
3470
  nodeOrigin,
3448
3471
  nodeExtent,
3449
3472
  }));
3450
3473
  return (jsx(Provider$1, { value: store, children: jsx(BatchProvider, { children: children }) }));
3451
3474
  }
3452
3475
 
3453
- 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, }) {
3454
3477
  const isWrapped = useContext(StoreContext);
3455
3478
  if (isWrapped) {
3456
3479
  /*
@@ -3459,7 +3482,7 @@ function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, he
3459
3482
  */
3460
3483
  return jsx(Fragment, { children: children });
3461
3484
  }
3462
- 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 }));
3463
3486
  }
3464
3487
 
3465
3488
  const wrapperStyle = {
@@ -3477,7 +3500,7 @@ function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTy
3477
3500
  e.currentTarget.scrollTo({ top: 0, left: 0, behavior: 'instant' });
3478
3501
  onScroll?.(e);
3479
3502
  }, [onScroll]);
3480
- 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 })] }) }));
3481
3504
  }
3482
3505
  /**
3483
3506
  * The `<ReactFlow />` component is the heart of your React Flow application.
@@ -4482,7 +4505,7 @@ MiniMapComponent.displayName = 'MiniMap';
4482
4505
  */
4483
4506
  const MiniMap = memo(MiniMapComponent);
4484
4507
 
4485
- 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, }) {
4486
4509
  const contextNodeId = useNodeId();
4487
4510
  const id = typeof nodeId === 'string' ? nodeId : contextNodeId;
4488
4511
  const store = useStoreApi();
@@ -4548,11 +4571,12 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
4548
4571
  changes.push(positionChange);
4549
4572
  }
4550
4573
  if (change.width !== undefined && change.height !== undefined) {
4574
+ const setAttributes = !resizeDirection ? true : resizeDirection === 'horizontal' ? 'width' : 'height';
4551
4575
  const dimensionChange = {
4552
4576
  id,
4553
4577
  type: 'dimensions',
4554
4578
  resizing: true,
4555
- setAttributes: true,
4579
+ setAttributes,
4556
4580
  dimensions: {
4557
4581
  width: change.width,
4558
4582
  height: change.height,
@@ -4592,6 +4616,7 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
4592
4616
  maxHeight,
4593
4617
  },
4594
4618
  keepAspectRatio,
4619
+ resizeDirection,
4595
4620
  onResizeStart,
4596
4621
  onResize,
4597
4622
  onResizeEnd,
@@ -1,6 +1,6 @@
1
1
  import { NodeOrigin, CoordinateExtent } from '@xyflow/system';
2
- import type { ReactFlowState, Node, Edge } from '../types';
3
- declare const createStore: ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, nodeOrigin, nodeExtent, }: {
2
+ import type { ReactFlowState, Node, Edge, FitViewOptions } from '../types';
3
+ declare const createStore: ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, }: {
4
4
  nodes?: Node[];
5
5
  edges?: Edge[];
6
6
  defaultNodes?: Node[];
@@ -8,6 +8,9 @@ declare const createStore: ({ nodes, edges, defaultNodes, defaultEdges, width, h
8
8
  width?: number;
9
9
  height?: number;
10
10
  fitView?: boolean;
11
+ fitViewOptions?: FitViewOptions;
12
+ minZoom?: number;
13
+ maxZoom?: number;
11
14
  nodeOrigin?: NodeOrigin;
12
15
  nodeExtent?: CoordinateExtent;
13
16
  }) => import("zustand/traditional").UseBoundStoreWithEqualityFn<import("zustand").StoreApi<ReactFlowState>>;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/store/index.ts"],"names":[],"mappings":"AACA,OAAO,EAYL,UAAU,EACV,gBAAgB,EAEjB,MAAM,gBAAgB,CAAC;AAIxB,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAA+B,MAAM,UAAU,CAAC;AAExF,QAAA,MAAM,WAAW,kGAUd;IACD,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,0GAoTc,CAAC;AAEhB,OAAO,EAAE,WAAW,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/store/index.ts"],"names":[],"mappings":"AACA,OAAO,EAYL,UAAU,EACV,gBAAgB,EAEjB,MAAM,gBAAgB,CAAC;AAIxB,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAA+B,cAAc,EAAE,MAAM,UAAU,CAAC;AAExG,QAAA,MAAM,WAAW,oIAad;IACD,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,0GAqUc,CAAC;AAEhB,OAAO,EAAE,WAAW,EAAE,CAAC"}
@@ -1,6 +1,6 @@
1
1
  import { NodeOrigin, CoordinateExtent } from '@xyflow/system';
2
- import type { Edge, Node, ReactFlowStore } from '../types';
3
- declare const getInitialState: ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, nodeOrigin, nodeExtent, }?: {
2
+ import type { Edge, FitViewOptions, Node, ReactFlowStore } from '../types';
3
+ declare const getInitialState: ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, }?: {
4
4
  nodes?: Node[];
5
5
  edges?: Edge[];
6
6
  defaultNodes?: Node[];
@@ -8,6 +8,9 @@ declare const getInitialState: ({ nodes, edges, defaultNodes, defaultEdges, widt
8
8
  width?: number;
9
9
  height?: number;
10
10
  fitView?: boolean;
11
+ fitViewOptions?: FitViewOptions;
12
+ minZoom?: number;
13
+ maxZoom?: number;
11
14
  nodeOrigin?: NodeOrigin;
12
15
  nodeExtent?: CoordinateExtent;
13
16
  }) => ReactFlowStore;
@@ -1 +1 @@
1
- {"version":3,"file":"initialState.d.ts","sourceRoot":"","sources":["../../src/store/initialState.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,UAAU,EAEV,gBAAgB,EACjB,MAAM,gBAAgB,CAAC;AAExB,OAAO,KAAK,EAAE,IAAI,EAAgB,IAAI,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAEzE,QAAA,MAAM,eAAe,mGAUlB;IACD,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,KAAQ,cA+FR,CAAC;AAEF,eAAe,eAAe,CAAC"}
1
+ {"version":3,"file":"initialState.d.ts","sourceRoot":"","sources":["../../src/store/initialState.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,UAAU,EAEV,gBAAgB,EACjB,MAAM,gBAAgB,CAAC;AAExB,OAAO,KAAK,EAAE,IAAI,EAAE,cAAc,EAAgB,IAAI,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAEzF,QAAA,MAAM,eAAe,qIAalB;IACD,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,KAAQ,cAsGR,CAAC;AAEF,eAAe,eAAe,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"changes.d.ts","sourceRoot":"","sources":["../../src/utils/changes.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EACV,UAAU,EACV,UAAU,EACV,UAAU,EACV,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,EAChB,gBAAgB,EACjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAuIzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAC3D,OAAO,EAAE,UAAU,CAAC,QAAQ,CAAC,EAAE,EAC/B,KAAK,EAAE,QAAQ,EAAE,GAChB,QAAQ,EAAE,CAEZ;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAC3D,OAAO,EAAE,UAAU,CAAC,QAAQ,CAAC,EAAE,EAC/B,KAAK,EAAE,QAAQ,EAAE,GAChB,QAAQ,EAAE,CAEZ;AAED,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,mBAAmB,GAAG,mBAAmB,CAM9G;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,EACvB,WAAW,GAAE,GAAG,CAAC,MAAM,CAAa,EACpC,UAAU,UAAQ,GACjB,mBAAmB,EAAE,GAAG,mBAAmB,EAAE,CAqB/C;AAED;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,MAAM,GACP,EAAE;IACD,KAAK,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC;IAC1B,MAAM,EAAE,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;CACxC,GAAG,UAAU,EAAE,CAAC;AACjB,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,MAAM,GACP,EAAE;IACD,KAAK,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC;IAC1B,MAAM,EAAE,UAAU,CAAC;CACpB,GAAG,UAAU,EAAE,CAAC;AAmCjB,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,IAAI,GAAG,IAAI,EAAE,IAAI,EAAE,CAAC,GAAG,gBAAgB,GAAG,gBAAgB,CAKzG"}
1
+ {"version":3,"file":"changes.d.ts","sourceRoot":"","sources":["../../src/utils/changes.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EACV,UAAU,EACV,UAAU,EACV,UAAU,EACV,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,EAChB,gBAAgB,EACjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AA2IzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAC3D,OAAO,EAAE,UAAU,CAAC,QAAQ,CAAC,EAAE,EAC/B,KAAK,EAAE,QAAQ,EAAE,GAChB,QAAQ,EAAE,CAEZ;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAC3D,OAAO,EAAE,UAAU,CAAC,QAAQ,CAAC,EAAE,EAC/B,KAAK,EAAE,QAAQ,EAAE,GAChB,QAAQ,EAAE,CAEZ;AAED,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,mBAAmB,GAAG,mBAAmB,CAM9G;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,EACvB,WAAW,GAAE,GAAG,CAAC,MAAM,CAAa,EACpC,UAAU,UAAQ,GACjB,mBAAmB,EAAE,GAAG,mBAAmB,EAAE,CAqB/C;AAED;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,MAAM,GACP,EAAE;IACD,KAAK,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC;IAC1B,MAAM,EAAE,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;CACxC,GAAG,UAAU,EAAE,CAAC;AACjB,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,MAAM,GACP,EAAE;IACD,KAAK,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC;IAC1B,MAAM,EAAE,UAAU,CAAC;CACpB,GAAG,UAAU,EAAE,CAAC;AAmCjB,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,IAAI,GAAG,IAAI,EAAE,IAAI,EAAE,CAAC,GAAG,gBAAgB,GAAG,gBAAgB,CAKzG"}
@@ -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).