@xyflow/react 12.5.5 → 12.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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/hooks/useNodesInitialized.d.ts.map +1 -1
- package/dist/esm/hooks/useReactFlow.d.ts.map +1 -1
- package/dist/esm/index.js +54 -27
- package/dist/esm/index.mjs +54 -27
- 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/types/store.d.ts +3 -2
- package/dist/esm/types/store.d.ts.map +1 -1
- package/dist/esm/utils/changes.d.ts.map +1 -1
- package/dist/style.css +11 -0
- 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/hooks/useNodesInitialized.d.ts.map +1 -1
- package/dist/umd/hooks/useReactFlow.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/types/store.d.ts +3 -2
- package/dist/umd/types/store.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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useNodesInitialized.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodesInitialized.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,0BAA0B,GAAG;IACvC,qBAAqB;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;
|
|
1
|
+
{"version":3,"file":"useNodesInitialized.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodesInitialized.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,0BAA0B,GAAG;IACvC,qBAAqB;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAoBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,0BAER,GACA,OAAO,CAIT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useReactFlow.d.ts","sourceRoot":"","sources":["../../src/hooks/useReactFlow.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useReactFlow.d.ts","sourceRoot":"","sources":["../../src/hooks/useReactFlow.ts"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EACV,iBAAiB,EACjB,IAAI,EACJ,IAAI,EAKL,MAAM,UAAU,CAAC;AAIlB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,KAAK,iBAAiB,CAC3G,QAAQ,EACR,QAAQ,CACT,CAiPA"}
|
package/dist/esm/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { createContext, useContext, useMemo, forwardRef, useEffect, useRef, useState, useLayoutEffect, useCallback, memo } from 'react';
|
|
4
4
|
import cc from 'classcat';
|
|
5
|
-
import { errorMessages, infiniteExtent, isInputDOMNode, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, getNodesBounds, evaluateAbsolutePosition, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, areSetsEqual, XYDrag, snapPosition, calculateNodePosition, Position, ConnectionMode, isMouseEvent, XYHandle, getHostForElement, addEdge, getInternalNodesBounds, isNumeric, nodeHasDimensions, getNodeDimensions, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, getConnectionStatus, ConnectionLineType, updateConnectionLookup, adoptUserNodes, initialConnection, devWarn, updateNodeInternals, updateAbsolutePositions, handleExpandParent, panBy, fitViewport, isMacOs, areConnectionMapsEqual, handleConnectionChange, shallowNodeData, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform } from '@xyflow/system';
|
|
5
|
+
import { errorMessages, infiniteExtent, isInputDOMNode, getViewportForBounds, pointToRendererPoint, rendererPointToPoint, isNodeBase, isEdgeBase, getElementsToRemove, isRectObject, nodeToRect, getOverlappingArea, getNodesBounds, withResolvers, evaluateAbsolutePosition, getDimensions, XYPanZoom, PanOnScrollMode, SelectionMode, getEventPosition, getNodesInside, areSetsEqual, XYDrag, snapPosition, calculateNodePosition, Position, ConnectionMode, isMouseEvent, XYHandle, getHostForElement, addEdge, getInternalNodesBounds, isNumeric, nodeHasDimensions, getNodeDimensions, elementSelectionKeys, isEdgeVisible, MarkerType, createMarkerIds, getBezierEdgeCenter, getSmoothStepPath, getStraightPath, getBezierPath, getEdgePosition, getElevatedEdgeZIndex, getMarkerId, getConnectionStatus, ConnectionLineType, updateConnectionLookup, adoptUserNodes, initialConnection, devWarn, updateNodeInternals, updateAbsolutePositions, handleExpandParent, panBy, fitViewport, isMacOs, areConnectionMapsEqual, handleConnectionChange, shallowNodeData, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform } from '@xyflow/system';
|
|
6
6
|
export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, addEdge, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, reconnectEdge } from '@xyflow/system';
|
|
7
7
|
import { useStoreWithEqualityFn, createWithEqualityFn } from 'zustand/traditional';
|
|
8
8
|
import { shallow } from 'zustand/shallow';
|
|
@@ -685,8 +685,12 @@ function applyChange(change, element) {
|
|
|
685
685
|
element.measured.width = change.dimensions.width;
|
|
686
686
|
element.measured.height = change.dimensions.height;
|
|
687
687
|
if (change.setAttributes) {
|
|
688
|
-
|
|
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') {
|
|
@@ -1184,7 +1188,7 @@ function useReactFlow() {
|
|
|
1184
1188
|
fitView: async (options) => {
|
|
1185
1189
|
// We either create a new Promise or reuse the existing one
|
|
1186
1190
|
// Even if fitView is called multiple times in a row, we only end up with a single Promise
|
|
1187
|
-
const fitViewResolver = store.getState().fitViewResolver ??
|
|
1191
|
+
const fitViewResolver = store.getState().fitViewResolver ?? withResolvers();
|
|
1188
1192
|
// We schedule a fitView by setting fitViewQueued and triggering a setNodes
|
|
1189
1193
|
store.setState({ fitViewQueued: true, fitViewOptions: options, fitViewResolver });
|
|
1190
1194
|
batchContext.nodeQueue.push((nodes) => [...nodes]);
|
|
@@ -2323,7 +2327,7 @@ const MarkerDefinitions = ({ defaultColor, rfId }) => {
|
|
|
2323
2327
|
if (!markers.length) {
|
|
2324
2328
|
return null;
|
|
2325
2329
|
}
|
|
2326
|
-
return (jsx("svg", { className: "react-flow__marker", children: jsx("defs", { children: markers.map((marker) => (jsx(Marker, { id: marker.id, type: marker.type, color: marker.color, width: marker.width, height: marker.height, markerUnits: marker.markerUnits, strokeWidth: marker.strokeWidth, orient: marker.orient }, marker.id))) }) }));
|
|
2330
|
+
return (jsx("svg", { className: "react-flow__marker", "aria-hidden": "true", children: jsx("defs", { children: markers.map((marker) => (jsx(Marker, { id: marker.id, type: marker.type, color: marker.color, width: marker.width, height: marker.height, markerUnits: marker.markerUnits, strokeWidth: marker.strokeWidth, orient: marker.orient }, marker.id))) }) }));
|
|
2327
2331
|
};
|
|
2328
2332
|
MarkerDefinitions.displayName = 'MarkerDefinitions';
|
|
2329
2333
|
var MarkerDefinitions$1 = memo(MarkerDefinitions);
|
|
@@ -3066,7 +3070,7 @@ function GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeC
|
|
|
3066
3070
|
GraphViewComponent.displayName = 'GraphView';
|
|
3067
3071
|
const GraphView = memo(GraphViewComponent);
|
|
3068
3072
|
|
|
3069
|
-
const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, nodeOrigin, nodeExtent, } = {}) => {
|
|
3073
|
+
const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom = 0.5, maxZoom = 2, nodeOrigin, nodeExtent, } = {}) => {
|
|
3070
3074
|
const nodeLookup = new Map();
|
|
3071
3075
|
const parentLookup = new Map();
|
|
3072
3076
|
const connectionLookup = new Map();
|
|
@@ -3076,7 +3080,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
|
|
|
3076
3080
|
const storeNodeOrigin = nodeOrigin ?? [0, 0];
|
|
3077
3081
|
const storeNodeExtent = nodeExtent ?? infiniteExtent;
|
|
3078
3082
|
updateConnectionLookup(connectionLookup, edgeLookup, storeEdges);
|
|
3079
|
-
adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
|
|
3083
|
+
const nodesInitialized = adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
|
|
3080
3084
|
nodeOrigin: storeNodeOrigin,
|
|
3081
3085
|
nodeExtent: storeNodeExtent,
|
|
3082
3086
|
elevateNodesOnSelect: false,
|
|
@@ -3086,7 +3090,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
|
|
|
3086
3090
|
const bounds = getInternalNodesBounds(nodeLookup, {
|
|
3087
3091
|
filter: (node) => !!((node.width || node.initialWidth) && (node.height || node.initialHeight)),
|
|
3088
3092
|
});
|
|
3089
|
-
const { x, y, zoom } = getViewportForBounds(bounds, width, height,
|
|
3093
|
+
const { x, y, zoom } = getViewportForBounds(bounds, width, height, minZoom, maxZoom, fitViewOptions?.padding ?? 0.1);
|
|
3090
3094
|
transform = [x, y, zoom];
|
|
3091
3095
|
}
|
|
3092
3096
|
return {
|
|
@@ -3095,6 +3099,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
|
|
|
3095
3099
|
height: 0,
|
|
3096
3100
|
transform,
|
|
3097
3101
|
nodes: storeNodes,
|
|
3102
|
+
nodesInitialized,
|
|
3098
3103
|
nodeLookup,
|
|
3099
3104
|
parentLookup,
|
|
3100
3105
|
edges: storeEdges,
|
|
@@ -3105,8 +3110,8 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
|
|
|
3105
3110
|
hasDefaultNodes: defaultNodes !== undefined,
|
|
3106
3111
|
hasDefaultEdges: defaultEdges !== undefined,
|
|
3107
3112
|
panZoom: null,
|
|
3108
|
-
minZoom
|
|
3109
|
-
maxZoom
|
|
3113
|
+
minZoom,
|
|
3114
|
+
maxZoom,
|
|
3110
3115
|
translateExtent: infiniteExtent,
|
|
3111
3116
|
nodeExtent: storeNodeExtent,
|
|
3112
3117
|
nodesSelectionActive: false,
|
|
@@ -3131,7 +3136,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
|
|
|
3131
3136
|
selectNodesOnDrag: true,
|
|
3132
3137
|
multiSelectionActive: false,
|
|
3133
3138
|
fitViewQueued: fitView ?? false,
|
|
3134
|
-
fitViewOptions
|
|
3139
|
+
fitViewOptions,
|
|
3135
3140
|
fitViewResolver: null,
|
|
3136
3141
|
connection: { ...initialConnection },
|
|
3137
3142
|
connectionClickStartHandle: null,
|
|
@@ -3149,7 +3154,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
|
|
|
3149
3154
|
};
|
|
3150
3155
|
};
|
|
3151
3156
|
|
|
3152
|
-
const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, nodeOrigin, nodeExtent, }) => createWithEqualityFn((set, get) => {
|
|
3157
|
+
const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, }) => createWithEqualityFn((set, get) => {
|
|
3153
3158
|
async function resolveFitView() {
|
|
3154
3159
|
const { nodeLookup, panZoom, fitViewOptions, fitViewResolver, width, height, minZoom, maxZoom } = get();
|
|
3155
3160
|
if (!panZoom) {
|
|
@@ -3171,7 +3176,20 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
|
|
|
3171
3176
|
set({ fitViewResolver: null });
|
|
3172
3177
|
}
|
|
3173
3178
|
return {
|
|
3174
|
-
...getInitialState({
|
|
3179
|
+
...getInitialState({
|
|
3180
|
+
nodes,
|
|
3181
|
+
edges,
|
|
3182
|
+
width,
|
|
3183
|
+
height,
|
|
3184
|
+
fitView,
|
|
3185
|
+
fitViewOptions,
|
|
3186
|
+
minZoom,
|
|
3187
|
+
maxZoom,
|
|
3188
|
+
nodeOrigin,
|
|
3189
|
+
nodeExtent,
|
|
3190
|
+
defaultNodes,
|
|
3191
|
+
defaultEdges,
|
|
3192
|
+
}),
|
|
3175
3193
|
setNodes: (nodes) => {
|
|
3176
3194
|
const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, fitViewQueued } = get();
|
|
3177
3195
|
/*
|
|
@@ -3190,10 +3208,10 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
|
|
|
3190
3208
|
});
|
|
3191
3209
|
if (fitViewQueued && nodesInitialized) {
|
|
3192
3210
|
resolveFitView();
|
|
3193
|
-
set({ nodes, fitViewQueued: false, fitViewOptions: undefined });
|
|
3211
|
+
set({ nodes, nodesInitialized, fitViewQueued: false, fitViewOptions: undefined });
|
|
3194
3212
|
}
|
|
3195
3213
|
else {
|
|
3196
|
-
set({ nodes });
|
|
3214
|
+
set({ nodes, nodesInitialized });
|
|
3197
3215
|
}
|
|
3198
3216
|
},
|
|
3199
3217
|
setEdges: (edges) => {
|
|
@@ -3362,7 +3380,10 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
|
|
|
3362
3380
|
get().panZoom?.setClickDistance(clickDistance);
|
|
3363
3381
|
},
|
|
3364
3382
|
resetSelectedElements: () => {
|
|
3365
|
-
const { edges, nodes, triggerNodeChanges, triggerEdgeChanges } = get();
|
|
3383
|
+
const { edges, nodes, triggerNodeChanges, triggerEdgeChanges, elementsSelectable } = get();
|
|
3384
|
+
if (!elementsSelectable) {
|
|
3385
|
+
return;
|
|
3386
|
+
}
|
|
3366
3387
|
const nodeChanges = nodes.reduce((res, node) => (node.selected ? [...res, createSelectionChange(node.id, false)] : res), []);
|
|
3367
3388
|
const edgeChanges = edges.reduce((res, edge) => (edge.selected ? [...res, createSelectionChange(edge.id, false)] : res), []);
|
|
3368
3389
|
triggerNodeChanges(nodeChanges);
|
|
@@ -3434,7 +3455,7 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
|
|
|
3434
3455
|
* your router. If you have multiple flows on the same page you will need to use a separate
|
|
3435
3456
|
* `<ReactFlowProvider />` for each flow.
|
|
3436
3457
|
*/
|
|
3437
|
-
function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, fitView, nodeOrigin, nodeExtent, children, }) {
|
|
3458
|
+
function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, initialMinZoom: minZoom, initialMaxZoom: maxZoom, initialFitViewOptions: fitViewOptions, fitView, nodeOrigin, nodeExtent, children, }) {
|
|
3438
3459
|
const [store] = useState(() => createStore({
|
|
3439
3460
|
nodes,
|
|
3440
3461
|
edges,
|
|
@@ -3443,13 +3464,16 @@ function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNo
|
|
|
3443
3464
|
width,
|
|
3444
3465
|
height,
|
|
3445
3466
|
fitView,
|
|
3467
|
+
minZoom,
|
|
3468
|
+
maxZoom,
|
|
3469
|
+
fitViewOptions,
|
|
3446
3470
|
nodeOrigin,
|
|
3447
3471
|
nodeExtent,
|
|
3448
3472
|
}));
|
|
3449
3473
|
return (jsx(Provider$1, { value: store, children: jsx(BatchProvider, { children: children }) }));
|
|
3450
3474
|
}
|
|
3451
3475
|
|
|
3452
|
-
function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, nodeOrigin, nodeExtent, }) {
|
|
3476
|
+
function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, }) {
|
|
3453
3477
|
const isWrapped = useContext(StoreContext);
|
|
3454
3478
|
if (isWrapped) {
|
|
3455
3479
|
/*
|
|
@@ -3458,7 +3482,7 @@ function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, he
|
|
|
3458
3482
|
*/
|
|
3459
3483
|
return jsx(Fragment, { children: children });
|
|
3460
3484
|
}
|
|
3461
|
-
return (jsx(ReactFlowProvider, { initialNodes: nodes, initialEdges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, initialWidth: width, initialHeight: height, fitView: fitView, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, children: children }));
|
|
3485
|
+
return (jsx(ReactFlowProvider, { initialNodes: nodes, initialEdges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, initialWidth: width, initialHeight: height, fitView: fitView, initialFitViewOptions: fitViewOptions, initialMinZoom: minZoom, initialMaxZoom: maxZoom, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, children: children }));
|
|
3462
3486
|
}
|
|
3463
3487
|
|
|
3464
3488
|
const wrapperStyle = {
|
|
@@ -3476,7 +3500,7 @@ function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTy
|
|
|
3476
3500
|
e.currentTarget.scrollTo({ top: 0, left: 0, behavior: 'instant' });
|
|
3477
3501
|
onScroll?.(e);
|
|
3478
3502
|
}, [onScroll]);
|
|
3479
|
-
return (jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), id: id, children: jsxs(Wrapper, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, children: [jsx(GraphView, { onInit: onInit, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onNodeDoubleClick: onNodeDoubleClick, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, connectionLineComponent: connectionLineComponent, connectionLineContainerStyle: connectionLineContainerStyle, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, deleteKeyCode: deleteKeyCode, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, preventScrolling: preventScrolling, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneScroll: onPaneScroll, onPaneContextMenu: onPaneContextMenu, paneClickDistance: paneClickDistance, nodeClickDistance: nodeClickDistance, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, reconnectRadius: reconnectRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeExtent: nodeExtent, viewport: viewport, onViewportChange: onViewportChange }), jsx(StoreUpdater, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onClickConnectStart: onClickConnectStart, onClickConnectEnd: onClickConnectEnd, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesReconnectable: edgesReconnectable, elementsSelectable: elementsSelectable, elevateNodesOnSelect: elevateNodesOnSelect, elevateEdgesOnSelect: elevateEdgesOnSelect, minZoom: minZoom, maxZoom: maxZoom, nodeExtent: nodeExtent, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, snapToGrid: snapToGrid, snapGrid: snapGrid, connectionMode: connectionMode, translateExtent: translateExtent, connectOnClick: connectOnClick, defaultEdgeOptions: defaultEdgeOptions, fitView: fitView, fitViewOptions: fitViewOptions, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onDelete: onDelete, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onSelectionDrag: onSelectionDrag, onSelectionDragStart: onSelectionDragStart, onSelectionDragStop: onSelectionDragStop, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, rfId: rfId, autoPanOnConnect: autoPanOnConnect, autoPanOnNodeDrag: autoPanOnNodeDrag, autoPanSpeed: autoPanSpeed, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, onBeforeDelete: onBeforeDelete, paneClickDistance: paneClickDistance, debug: debug }), jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
|
|
3503
|
+
return (jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), id: id, children: jsxs(Wrapper, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, fitViewOptions: fitViewOptions, minZoom: minZoom, maxZoom: maxZoom, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, children: [jsx(GraphView, { onInit: onInit, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onNodeContextMenu: onNodeContextMenu, onNodeDoubleClick: onNodeDoubleClick, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineType: connectionLineType, connectionLineStyle: connectionLineStyle, connectionLineComponent: connectionLineComponent, connectionLineContainerStyle: connectionLineContainerStyle, selectionKeyCode: selectionKeyCode, selectionOnDrag: selectionOnDrag, selectionMode: selectionMode, deleteKeyCode: deleteKeyCode, multiSelectionKeyCode: multiSelectionKeyCode, panActivationKeyCode: panActivationKeyCode, zoomActivationKeyCode: zoomActivationKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, preventScrolling: preventScrolling, zoomOnScroll: zoomOnScroll, zoomOnPinch: zoomOnPinch, zoomOnDoubleClick: zoomOnDoubleClick, panOnScroll: panOnScroll, panOnScrollSpeed: panOnScrollSpeed, panOnScrollMode: panOnScrollMode, panOnDrag: panOnDrag, onPaneClick: onPaneClick, onPaneMouseEnter: onPaneMouseEnter, onPaneMouseMove: onPaneMouseMove, onPaneMouseLeave: onPaneMouseLeave, onPaneScroll: onPaneScroll, onPaneContextMenu: onPaneContextMenu, paneClickDistance: paneClickDistance, nodeClickDistance: nodeClickDistance, onSelectionContextMenu: onSelectionContextMenu, onSelectionStart: onSelectionStart, onSelectionEnd: onSelectionEnd, onReconnect: onReconnect, onReconnectStart: onReconnectStart, onReconnectEnd: onReconnectEnd, onEdgeContextMenu: onEdgeContextMenu, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, reconnectRadius: reconnectRadius, defaultMarkerColor: defaultMarkerColor, noDragClassName: noDragClassName, noWheelClassName: noWheelClassName, noPanClassName: noPanClassName, rfId: rfId, disableKeyboardA11y: disableKeyboardA11y, nodeExtent: nodeExtent, viewport: viewport, onViewportChange: onViewportChange }), jsx(StoreUpdater, { nodes: nodes, edges: edges, defaultNodes: defaultNodes, defaultEdges: defaultEdges, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onClickConnectStart: onClickConnectStart, onClickConnectEnd: onClickConnectEnd, nodesDraggable: nodesDraggable, nodesConnectable: nodesConnectable, nodesFocusable: nodesFocusable, edgesFocusable: edgesFocusable, edgesReconnectable: edgesReconnectable, elementsSelectable: elementsSelectable, elevateNodesOnSelect: elevateNodesOnSelect, elevateEdgesOnSelect: elevateEdgesOnSelect, minZoom: minZoom, maxZoom: maxZoom, nodeExtent: nodeExtent, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, snapToGrid: snapToGrid, snapGrid: snapGrid, connectionMode: connectionMode, translateExtent: translateExtent, connectOnClick: connectOnClick, defaultEdgeOptions: defaultEdgeOptions, fitView: fitView, fitViewOptions: fitViewOptions, onNodesDelete: onNodesDelete, onEdgesDelete: onEdgesDelete, onDelete: onDelete, onNodeDragStart: onNodeDragStart, onNodeDrag: onNodeDrag, onNodeDragStop: onNodeDragStop, onSelectionDrag: onSelectionDrag, onSelectionDragStart: onSelectionDragStart, onSelectionDragStop: onSelectionDragStop, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, rfId: rfId, autoPanOnConnect: autoPanOnConnect, autoPanOnNodeDrag: autoPanOnNodeDrag, autoPanSpeed: autoPanSpeed, onError: onError, connectionRadius: connectionRadius, isValidConnection: isValidConnection, selectNodesOnDrag: selectNodesOnDrag, nodeDragThreshold: nodeDragThreshold, onBeforeDelete: onBeforeDelete, paneClickDistance: paneClickDistance, debug: debug }), jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
|
|
3480
3504
|
}
|
|
3481
3505
|
/**
|
|
3482
3506
|
* The `<ReactFlow />` component is the heart of your React Flow application.
|
|
@@ -3920,14 +3944,15 @@ function useOnSelectionChange({ onChange, }) {
|
|
|
3920
3944
|
}
|
|
3921
3945
|
|
|
3922
3946
|
const selector$4 = (options) => (s) => {
|
|
3947
|
+
if (!options.includeHiddenNodes) {
|
|
3948
|
+
return s.nodesInitialized;
|
|
3949
|
+
}
|
|
3923
3950
|
if (s.nodeLookup.size === 0) {
|
|
3924
3951
|
return false;
|
|
3925
3952
|
}
|
|
3926
|
-
for (const [, {
|
|
3927
|
-
if (
|
|
3928
|
-
|
|
3929
|
-
return false;
|
|
3930
|
-
}
|
|
3953
|
+
for (const [, { internals }] of s.nodeLookup) {
|
|
3954
|
+
if (internals.handleBounds === undefined || !nodeHasDimensions(internals.userNode)) {
|
|
3955
|
+
return false;
|
|
3931
3956
|
}
|
|
3932
3957
|
}
|
|
3933
3958
|
return true;
|
|
@@ -4480,7 +4505,7 @@ MiniMapComponent.displayName = 'MiniMap';
|
|
|
4480
4505
|
*/
|
|
4481
4506
|
const MiniMap = memo(MiniMapComponent);
|
|
4482
4507
|
|
|
4483
|
-
function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle, className, style = {}, children, color, minWidth = 10, minHeight = 10, maxWidth = Number.MAX_VALUE, maxHeight = Number.MAX_VALUE, keepAspectRatio = false, shouldResize, onResizeStart, onResize, onResizeEnd, }) {
|
|
4508
|
+
function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle, className, style = {}, children, color, minWidth = 10, minHeight = 10, maxWidth = Number.MAX_VALUE, maxHeight = Number.MAX_VALUE, keepAspectRatio = false, resizeDirection, shouldResize, onResizeStart, onResize, onResizeEnd, }) {
|
|
4484
4509
|
const contextNodeId = useNodeId();
|
|
4485
4510
|
const id = typeof nodeId === 'string' ? nodeId : contextNodeId;
|
|
4486
4511
|
const store = useStoreApi();
|
|
@@ -4546,11 +4571,12 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
|
|
|
4546
4571
|
changes.push(positionChange);
|
|
4547
4572
|
}
|
|
4548
4573
|
if (change.width !== undefined && change.height !== undefined) {
|
|
4574
|
+
const setAttributes = !resizeDirection ? true : resizeDirection === 'horizontal' ? 'width' : 'height';
|
|
4549
4575
|
const dimensionChange = {
|
|
4550
4576
|
id,
|
|
4551
4577
|
type: 'dimensions',
|
|
4552
4578
|
resizing: true,
|
|
4553
|
-
setAttributes
|
|
4579
|
+
setAttributes,
|
|
4554
4580
|
dimensions: {
|
|
4555
4581
|
width: change.width,
|
|
4556
4582
|
height: change.height,
|
|
@@ -4590,6 +4616,7 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
|
|
|
4590
4616
|
maxHeight,
|
|
4591
4617
|
},
|
|
4592
4618
|
keepAspectRatio,
|
|
4619
|
+
resizeDirection,
|
|
4593
4620
|
onResizeStart,
|
|
4594
4621
|
onResize,
|
|
4595
4622
|
onResizeEnd,
|