@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.
- package/dist/esm/additional-components/NodeResizer/NodeResizeControl.d.ts +1 -1
- package/dist/esm/additional-components/NodeResizer/NodeResizeControl.d.ts.map +1 -1
- package/dist/esm/additional-components/NodeResizer/types.d.ts +7 -2
- package/dist/esm/additional-components/NodeResizer/types.d.ts.map +1 -1
- package/dist/esm/components/ReactFlowProvider/index.d.ts +33 -2
- package/dist/esm/components/ReactFlowProvider/index.d.ts.map +1 -1
- package/dist/esm/container/ReactFlow/Wrapper.d.ts +5 -2
- package/dist/esm/container/ReactFlow/Wrapper.d.ts.map +1 -1
- package/dist/esm/container/ReactFlow/index.d.ts.map +1 -1
- package/dist/esm/index.js +43 -18
- package/dist/esm/index.mjs +43 -18
- package/dist/esm/store/index.d.ts +5 -2
- package/dist/esm/store/index.d.ts.map +1 -1
- package/dist/esm/store/initialState.d.ts +5 -2
- package/dist/esm/store/initialState.d.ts.map +1 -1
- package/dist/esm/utils/changes.d.ts.map +1 -1
- package/dist/umd/additional-components/NodeResizer/NodeResizeControl.d.ts +1 -1
- package/dist/umd/additional-components/NodeResizer/NodeResizeControl.d.ts.map +1 -1
- package/dist/umd/additional-components/NodeResizer/types.d.ts +7 -2
- package/dist/umd/additional-components/NodeResizer/types.d.ts.map +1 -1
- package/dist/umd/components/ReactFlowProvider/index.d.ts +33 -2
- package/dist/umd/components/ReactFlowProvider/index.d.ts.map +1 -1
- package/dist/umd/container/ReactFlow/Wrapper.d.ts +5 -2
- package/dist/umd/container/ReactFlow/Wrapper.d.ts.map +1 -1
- package/dist/umd/container/ReactFlow/index.d.ts.map +1 -1
- package/dist/umd/index.js +2 -2
- package/dist/umd/store/index.d.ts +5 -2
- package/dist/umd/store/index.d.ts.map +1 -1
- package/dist/umd/store/initialState.d.ts +5 -2
- package/dist/umd/store/initialState.d.ts.map +1 -1
- package/dist/umd/utils/changes.d.ts.map +1 -1
- 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,
|
|
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;
|
|
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;
|
|
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;
|
|
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;
|
|
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
|
|
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
|
|
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
|
-
|
|
689
|
-
|
|
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,
|
|
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
|
|
3110
|
-
maxZoom
|
|
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
|
|
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({
|
|
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
|
|
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,
|
package/dist/esm/index.mjs
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
|
|
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
|
|
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
|
-
|
|
689
|
-
|
|
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,
|
|
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
|
|
3110
|
-
maxZoom
|
|
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
|
|
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({
|
|
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
|
|
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;
|
|
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;
|
|
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;
|
|
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).
|