@xyflow/react 12.9.3 → 12.10.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/components/BatchProvider/index.d.ts.map +1 -1
- package/dist/esm/components/EdgeWrapper/index.d.ts.map +1 -1
- package/dist/esm/components/ReactFlowProvider/index.d.ts +3 -2
- package/dist/esm/components/ReactFlowProvider/index.d.ts.map +1 -1
- package/dist/esm/components/StoreUpdater/index.d.ts +1 -1
- package/dist/esm/components/StoreUpdater/index.d.ts.map +1 -1
- package/dist/esm/container/FlowRenderer/index.d.ts.map +1 -1
- package/dist/esm/container/ReactFlow/Wrapper.d.ts +3 -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/useOnEdgesChangeMiddleware.d.ts +10 -0
- package/dist/esm/hooks/useOnEdgesChangeMiddleware.d.ts.map +1 -0
- package/dist/esm/hooks/useOnNodesChangeMiddleware.d.ts +10 -0
- package/dist/esm/hooks/useOnNodesChangeMiddleware.d.ts.map +1 -0
- package/dist/esm/index.d.ts +3 -1
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +85 -24
- package/dist/esm/index.mjs +85 -24
- package/dist/esm/store/index.d.ts +3 -2
- package/dist/esm/store/index.d.ts.map +1 -1
- package/dist/esm/store/initialState.d.ts +3 -2
- package/dist/esm/store/initialState.d.ts.map +1 -1
- package/dist/esm/types/component-props.d.ts +8 -1
- package/dist/esm/types/component-props.d.ts.map +1 -1
- package/dist/esm/types/store.d.ts +4 -1
- package/dist/esm/types/store.d.ts.map +1 -1
- package/dist/umd/components/BatchProvider/index.d.ts.map +1 -1
- package/dist/umd/components/EdgeWrapper/index.d.ts.map +1 -1
- package/dist/umd/components/ReactFlowProvider/index.d.ts +3 -2
- package/dist/umd/components/ReactFlowProvider/index.d.ts.map +1 -1
- package/dist/umd/components/StoreUpdater/index.d.ts +1 -1
- package/dist/umd/components/StoreUpdater/index.d.ts.map +1 -1
- package/dist/umd/container/FlowRenderer/index.d.ts.map +1 -1
- package/dist/umd/container/ReactFlow/Wrapper.d.ts +3 -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/useOnEdgesChangeMiddleware.d.ts +10 -0
- package/dist/umd/hooks/useOnEdgesChangeMiddleware.d.ts.map +1 -0
- package/dist/umd/hooks/useOnNodesChangeMiddleware.d.ts +10 -0
- package/dist/umd/hooks/useOnNodesChangeMiddleware.d.ts.map +1 -0
- package/dist/umd/index.d.ts +3 -1
- package/dist/umd/index.d.ts.map +1 -1
- package/dist/umd/index.js +2 -2
- package/dist/umd/store/index.d.ts +3 -2
- package/dist/umd/store/index.d.ts.map +1 -1
- package/dist/umd/store/initialState.d.ts +3 -2
- package/dist/umd/store/initialState.d.ts.map +1 -1
- package/dist/umd/types/component-props.d.ts +8 -1
- package/dist/umd/types/component-props.d.ts.map +1 -1
- package/dist/umd/types/store.d.ts +4 -1
- package/dist/umd/types/store.d.ts.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BatchProvider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAoC,MAAM,OAAO,CAAC;AAKnF,OAAO,EAAE,KAAK,EAAa,MAAM,SAAS,CAAC;AAC3C,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAU9C;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EACxF,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;CACrB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BatchProvider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAoC,MAAM,OAAO,CAAC;AAKnF,OAAO,EAAE,KAAK,EAAa,MAAM,SAAS,CAAC;AAC3C,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAU9C;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EACxF,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;CACrB,2CA8EA;AAED,wBAAgB,eAAe;eA/FlB,KAAK,CAAC,GAAG,CAAC;eAEV,KAAK,CAAC,GAAG,CAAC;EAqGtB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EdgeWrapper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8D,GAAG,EAAQ,MAAM,OAAO,CAAC;AAe9F,OAAO,KAAK,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,iBAAS,WAAW,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EACjD,EAAE,EACF,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,OAAO,EACP,aAAa,EACb,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,eAAe,EACf,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,IAAI,EACJ,SAAS,EACT,cAAc,EACd,OAAO,EACP,mBAAmB,GACpB,EAAE,gBAAgB,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EdgeWrapper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8D,GAAG,EAAQ,MAAM,OAAO,CAAC;AAe9F,OAAO,KAAK,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,iBAAS,WAAW,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EACjD,EAAE,EACF,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,OAAO,EACP,aAAa,EACb,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,eAAe,EACf,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,IAAI,EACJ,SAAS,EACT,cAAc,EACd,OAAO,EACP,mBAAmB,GACpB,EAAE,gBAAgB,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAoOjD;wBAEmC,OAAO,WAAW;AAAtD,wBAAuD"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
2
|
import type { Node, Edge, FitViewOptions } from '../../types';
|
|
3
|
-
import { CoordinateExtent, NodeOrigin } from '@xyflow/system';
|
|
3
|
+
import { CoordinateExtent, NodeOrigin, ZIndexMode } from '@xyflow/system';
|
|
4
4
|
export type ReactFlowProviderProps = {
|
|
5
5
|
/** These nodes are used to initialize the flow. They are not dynamic. */
|
|
6
6
|
initialNodes?: Node[];
|
|
@@ -43,6 +43,7 @@ export type ReactFlowProviderProps = {
|
|
|
43
43
|
*/
|
|
44
44
|
nodeExtent?: CoordinateExtent;
|
|
45
45
|
children: ReactNode;
|
|
46
|
+
zIndexMode?: ZIndexMode;
|
|
46
47
|
};
|
|
47
48
|
/**
|
|
48
49
|
* The `<ReactFlowProvider />` component is a [context provider](https://react.dev/learn/passing-data-deeply-with-context#)
|
|
@@ -78,5 +79,5 @@ export type ReactFlowProviderProps = {
|
|
|
78
79
|
* your router. If you have multiple flows on the same page you will need to use a separate
|
|
79
80
|
* `<ReactFlowProvider />` for each flow.
|
|
80
81
|
*/
|
|
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;
|
|
82
|
+
export declare function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, initialMinZoom: minZoom, initialMaxZoom: maxZoom, initialFitViewOptions: fitViewOptions, fitView, nodeOrigin, nodeExtent, zIndexMode, children, }: ReactFlowProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
82
83
|
//# 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,cAAc,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,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,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE1E,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;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,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,UAAU,EACV,QAAQ,GACT,EAAE,sBAAsB,2CAwBxB"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Node, Edge, ReactFlowProps } from '../../types';
|
|
2
|
-
declare const reactFlowFieldsToTrack: readonly ["nodes", "edges", "defaultNodes", "defaultEdges", "onConnect", "onConnectStart", "onConnectEnd", "onClickConnectStart", "onClickConnectEnd", "nodesDraggable", "autoPanOnNodeFocus", "nodesConnectable", "nodesFocusable", "edgesFocusable", "edgesReconnectable", "elevateNodesOnSelect", "elevateEdgesOnSelect", "minZoom", "maxZoom", "nodeExtent", "onNodesChange", "onEdgesChange", "elementsSelectable", "connectionMode", "snapGrid", "snapToGrid", "translateExtent", "connectOnClick", "defaultEdgeOptions", "fitView", "fitViewOptions", "onNodesDelete", "onEdgesDelete", "onDelete", "onNodeDrag", "onNodeDragStart", "onNodeDragStop", "onSelectionDrag", "onSelectionDragStart", "onSelectionDragStop", "onMoveStart", "onMove", "onMoveEnd", "noPanClassName", "nodeOrigin", "autoPanOnConnect", "autoPanOnNodeDrag", "onError", "connectionRadius", "isValidConnection", "selectNodesOnDrag", "nodeDragThreshold", "connectionDragThreshold", "onBeforeDelete", "debug", "autoPanSpeed", "ariaLabelConfig"];
|
|
2
|
+
declare const reactFlowFieldsToTrack: readonly ["nodes", "edges", "defaultNodes", "defaultEdges", "onConnect", "onConnectStart", "onConnectEnd", "onClickConnectStart", "onClickConnectEnd", "nodesDraggable", "autoPanOnNodeFocus", "nodesConnectable", "nodesFocusable", "edgesFocusable", "edgesReconnectable", "elevateNodesOnSelect", "elevateEdgesOnSelect", "minZoom", "maxZoom", "nodeExtent", "onNodesChange", "onEdgesChange", "elementsSelectable", "connectionMode", "snapGrid", "snapToGrid", "translateExtent", "connectOnClick", "defaultEdgeOptions", "fitView", "fitViewOptions", "onNodesDelete", "onEdgesDelete", "onDelete", "onNodeDrag", "onNodeDragStart", "onNodeDragStop", "onSelectionDrag", "onSelectionDragStart", "onSelectionDragStop", "onMoveStart", "onMove", "onMoveEnd", "noPanClassName", "nodeOrigin", "autoPanOnConnect", "autoPanOnNodeDrag", "onError", "connectionRadius", "isValidConnection", "selectNodesOnDrag", "nodeDragThreshold", "connectionDragThreshold", "onBeforeDelete", "debug", "autoPanSpeed", "ariaLabelConfig", "zIndexMode"];
|
|
3
3
|
type ReactFlowFieldsToTrack = (typeof reactFlowFieldsToTrack)[number];
|
|
4
4
|
type StoreUpdaterProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = Pick<ReactFlowProps<NodeType, EdgeType>, ReactFlowFieldsToTrack> & {
|
|
5
5
|
rfId: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StoreUpdater/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAkB,cAAc,EAAkB,MAAM,aAAa,CAAC;AAI9F,QAAA,MAAM,sBAAsB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StoreUpdater/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAkB,cAAc,EAAkB,MAAM,aAAa,CAAC;AAI9F,QAAA,MAAM,sBAAsB,q/BA2DlB,CAAC;AAEX,KAAK,sBAAsB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;AACtE,KAAK,iBAAiB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI,IAAI,CACvF,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAClC,sBAAsB,CACvB,GAAG;IACF,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AA+BF,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,EACrF,KAAK,EAAE,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,CAAC,QAyD7C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/FlowRenderer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/FlowRenderer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAM7C,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAI9C,OAAO,KAAK,EAAkB,IAAI,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,MAAM,iBAAiB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,IAAI,IAAI,CAChE,cAAc,CAAC,QAAQ,CAAC,EACtB,YAAY,GACZ,WAAW,GACX,WAAW,GACX,UAAU,GACV,oBAAoB,GACpB,8BAA8B,GAC9B,gBAAgB,GAChB,2BAA2B,GAC3B,mBAAmB,GACnB,oBAAoB,GACpB,MAAM,GACN,mBAAmB,CACtB,GAAG;IACF,oBAAoB,EAAE,OAAO,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAQF,iBAAS,qBAAqB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EAC3D,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,qBAAqB,EACrB,oBAAoB,EACpB,qBAAqB,EACrB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,WAAW,EAAE,YAAY,EACzB,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,SAAS,EAAE,UAAU,EACrB,eAAe,EACf,eAAe,EACf,OAAO,EACP,OAAO,EACP,gBAAgB,EAChB,sBAAsB,EACtB,gBAAgB,EAChB,cAAc,EACd,mBAAmB,EACnB,gBAAgB,EAChB,oBAAoB,GACrB,EAAE,iBAAiB,CAAC,QAAQ,CAAC,2CA+D7B;kBApGQ,qBAAqB;;;AAwG9B,eAAO,MAAM,YAAY,EAAkC,OAAO,qBAAqB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
2
|
import type { Node, Edge, FitViewOptions } from '../../types';
|
|
3
|
-
import { CoordinateExtent, NodeOrigin } from '@xyflow/system';
|
|
4
|
-
export declare function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, }: {
|
|
3
|
+
import { CoordinateExtent, NodeOrigin, ZIndexMode } from '@xyflow/system';
|
|
4
|
+
export declare function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, zIndexMode, }: {
|
|
5
5
|
children: ReactNode;
|
|
6
6
|
nodes?: Node[];
|
|
7
7
|
edges?: Edge[];
|
|
@@ -15,5 +15,6 @@ export declare function Wrapper({ children, nodes, edges, defaultNodes, defaultE
|
|
|
15
15
|
maxZoom?: number;
|
|
16
16
|
nodeOrigin?: NodeOrigin;
|
|
17
17
|
nodeExtent?: CoordinateExtent;
|
|
18
|
+
zIndexMode?: ZIndexMode;
|
|
18
19
|
}): import("react/jsx-runtime").JSX.Element;
|
|
19
20
|
//# sourceMappingURL=Wrapper.d.ts.map
|
|
@@ -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,cAAc,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,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,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE1E,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,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;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,2CA8BA"}
|
|
@@ -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;AA2T9D;;;;;;;;;;;;;;;;;;;GAmBG;yBAlUgB,QAAQ,SAAS,IAAI,SAAS,QAAQ,SAAS,IAAI;AAmUtE,wBAA0C"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { EdgeChange } from '@xyflow/system';
|
|
2
|
+
import type { Edge } from '../types';
|
|
3
|
+
/**
|
|
4
|
+
* Registers a middleware function to transform edge changes.
|
|
5
|
+
*
|
|
6
|
+
* @public
|
|
7
|
+
* @param fn - Middleware function. Should be memoized with useCallback to avoid re-registration.
|
|
8
|
+
*/
|
|
9
|
+
export declare function experimental_useOnEdgesChangeMiddleware<EdgeType extends Edge = Edge>(fn: (changes: EdgeChange<EdgeType>[]) => EdgeChange<EdgeType>[]): void;
|
|
10
|
+
//# sourceMappingURL=useOnEdgesChangeMiddleware.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useOnEdgesChangeMiddleware.d.ts","sourceRoot":"","sources":["../../src/hooks/useOnEdgesChangeMiddleware.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGjD,OAAO,KAAK,EAAE,IAAI,EAAQ,MAAM,UAAU,CAAC;AAE3C;;;;;GAKG;AACH,wBAAgB,uCAAuC,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAClF,EAAE,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,QAAQ,CAAC,EAAE,KAAK,UAAU,CAAC,QAAQ,CAAC,EAAE,QAgBhE"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { NodeChange } from '@xyflow/system';
|
|
2
|
+
import type { Node } from '../types';
|
|
3
|
+
/**
|
|
4
|
+
* Registers a middleware function to transform node changes.
|
|
5
|
+
*
|
|
6
|
+
* @public
|
|
7
|
+
* @param fn - Middleware function. Should be memoized with useCallback to avoid re-registration.
|
|
8
|
+
*/
|
|
9
|
+
export declare function experimental_useOnNodesChangeMiddleware<NodeType extends Node = Node>(fn: (changes: NodeChange<NodeType>[]) => NodeChange<NodeType>[]): void;
|
|
10
|
+
//# sourceMappingURL=useOnNodesChangeMiddleware.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useOnNodesChangeMiddleware.d.ts","sourceRoot":"","sources":["../../src/hooks/useOnNodesChangeMiddleware.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGjD,OAAO,KAAK,EAAQ,IAAI,EAAE,MAAM,UAAU,CAAC;AAE3C;;;;;GAKG;AACH,wBAAgB,uCAAuC,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAClF,EAAE,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,QAAQ,CAAC,EAAE,KAAK,UAAU,CAAC,QAAQ,CAAC,EAAE,QAgBhE"}
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -28,11 +28,13 @@ export { useNodesData } from './hooks/useNodesData';
|
|
|
28
28
|
export { useConnection } from './hooks/useConnection';
|
|
29
29
|
export { useInternalNode } from './hooks/useInternalNode';
|
|
30
30
|
export { useNodeId } from './contexts/NodeIdContext';
|
|
31
|
+
export { experimental_useOnNodesChangeMiddleware } from './hooks/useOnNodesChangeMiddleware';
|
|
32
|
+
export { experimental_useOnEdgesChangeMiddleware } from './hooks/useOnEdgesChangeMiddleware';
|
|
31
33
|
export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
|
|
32
34
|
export { isNode, isEdge } from './utils/general';
|
|
33
35
|
export * from './additional-components';
|
|
34
36
|
export * from './types';
|
|
35
|
-
export { type Align, type SmoothStepPathOptions, type BezierPathOptions, ConnectionLineType, type EdgeMarker, type EdgeMarkerType, MarkerType, type OnMove, type OnMoveStart, type OnMoveEnd, type Connection, ConnectionMode, type OnConnectStartParams, type OnConnectStart, type OnConnect, type OnConnectEnd, type Viewport, type SnapGrid, PanOnScrollMode, type ViewportHelperFunctionOptions, type SetCenterOptions, type FitBoundsOptions, type PanelPosition, type ProOptions, SelectionMode, type SelectionRect, type OnError, type NodeOrigin, type OnSelectionDrag, Position, type XYPosition, type XYZPosition, type Dimensions, type Rect, type Box, type Transform, type CoordinateExtent, type ColorMode, type ColorModeClass, type HandleType, type ShouldResize, type OnResizeStart, type OnResize, type OnResizeEnd, type ControlPosition, type ControlLinePosition, ResizeControlVariant, type ResizeParams, type ResizeParamsWithDirection, type ResizeDragEvent, type NodeChange, type NodeDimensionChange, type NodePositionChange, type NodeSelectionChange, type NodeRemoveChange, type NodeAddChange, type NodeReplaceChange, type EdgeChange, type EdgeSelectionChange, type EdgeRemoveChange, type EdgeAddChange, type EdgeReplaceChange, type KeyCode, type ConnectionState, type FinalConnectionState, type ConnectionInProgress, type NoConnection, type NodeConnection, type OnReconnect, type AriaLabelConfig, type SetCenter, type SetViewport, type FitBounds, type HandleConnection, } from '@xyflow/system';
|
|
37
|
+
export { type Align, type SmoothStepPathOptions, type BezierPathOptions, ConnectionLineType, type EdgeMarker, type EdgeMarkerType, MarkerType, type OnMove, type OnMoveStart, type OnMoveEnd, type Connection, ConnectionMode, type OnConnectStartParams, type OnConnectStart, type OnConnect, type OnConnectEnd, type Viewport, type SnapGrid, PanOnScrollMode, type ViewportHelperFunctionOptions, type SetCenterOptions, type FitBoundsOptions, type PanelPosition, type ProOptions, SelectionMode, type SelectionRect, type OnError, type NodeOrigin, type OnSelectionDrag, Position, type XYPosition, type XYZPosition, type Dimensions, type Rect, type Box, type Transform, type CoordinateExtent, type ColorMode, type ColorModeClass, type HandleType, type ShouldResize, type OnResizeStart, type OnResize, type OnResizeEnd, type ControlPosition, type ControlLinePosition, ResizeControlVariant, type ResizeParams, type ResizeParamsWithDirection, type ResizeDragEvent, type NodeChange, type NodeDimensionChange, type NodePositionChange, type NodeSelectionChange, type NodeRemoveChange, type NodeAddChange, type NodeReplaceChange, type EdgeChange, type EdgeSelectionChange, type EdgeRemoveChange, type EdgeAddChange, type EdgeReplaceChange, type KeyCode, type ConnectionState, type FinalConnectionState, type ConnectionInProgress, type NoConnection, type NodeConnection, type OnReconnect, type AriaLabelConfig, type SetCenter, type SetViewport, type FitBounds, type HandleConnection, type ZIndexMode, } from '@xyflow/system';
|
|
36
38
|
import { type Handle as HandleBound } from '@xyflow/system';
|
|
37
39
|
export type Handle = HandleBound;
|
|
38
40
|
export { type GetBezierPathParams, getBezierEdgeCenter, getBezierPath, getEdgeCenter, type GetSmoothStepPathParams, getSmoothStepPath, type GetStraightPathParams, getStraightPath, getViewportForBounds, getNodesBounds, getIncomers, getOutgoers, addEdge, reconnectEdge, getConnectedEdges, } from '@xyflow/system';
|
package/dist/esm/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC5F,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAChG,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,KAAK,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AACnG,OAAO,EAAE,oBAAoB,EAAE,KAAK,2BAA2B,EAAE,MAAM,8BAA8B,CAAC;AACtG,OAAO,EAAE,mBAAmB,EAAE,KAAK,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AACnG,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAErD,OAAO,EAAE,uCAAuC,EAAE,MAAM,oCAAoC,CAAC;AAC7F,OAAO,EAAE,uCAAuC,EAAE,MAAM,oCAAoC,CAAC;AAE7F,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEjD,cAAc,yBAAyB,CAAC;AAExC,cAAc,SAAS,CAAC;AAGxB,OAAO,EACL,KAAK,KAAK,EACV,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB,EACtB,kBAAkB,EAClB,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,UAAU,EACV,KAAK,MAAM,EACX,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,KAAK,UAAU,EACf,cAAc,EACd,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,KAAK,QAAQ,EACb,KAAK,QAAQ,EACb,eAAe,EACf,KAAK,6BAA6B,EAClC,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,aAAa,EACb,KAAK,aAAa,EAClB,KAAK,OAAO,EACZ,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,QAAQ,EACR,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,IAAI,EACT,KAAK,GAAG,EACR,KAAK,SAAS,EACd,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,aAAa,EAClB,KAAK,QAAQ,EACb,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,oBAAoB,EACpB,KAAK,YAAY,EACjB,KAAK,yBAAyB,EAC9B,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,UAAU,EACf,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,OAAO,EACZ,KAAK,eAAe,EACpB,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,KAAK,gBAAgB,EACrB,KAAK,UAAU,GAChB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAAE,KAAK,MAAM,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC5D,MAAM,MAAM,MAAM,GAAG,WAAW,CAAC;AAGjC,OAAO,EACL,KAAK,mBAAmB,EACxB,mBAAmB,EACnB,aAAa,EACb,aAAa,EACb,KAAK,uBAAuB,EAC5B,iBAAiB,EACjB,KAAK,qBAAqB,EAC1B,eAAe,EACf,oBAAoB,EACpB,cAAc,EACd,WAAW,EACX,WAAW,EACX,OAAO,EACP,aAAa,EACb,iBAAiB,GAClB,MAAM,gBAAgB,CAAC"}
|
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, mergeAriaLabelConfig, 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, defaultAriaLabelConfig, updateNodeInternals, updateAbsolutePositions, handleExpandParent, panBy, fitViewport, isMacOs, areConnectionMapsEqual, handleConnectionChange, shallowNodeData, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform, getEdgeToolbarTransform } from '@xyflow/system';
|
|
5
|
+
import { errorMessages, mergeAriaLabelConfig, 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, defaultAriaLabelConfig, updateNodeInternals, updateAbsolutePositions, getHandlePosition, handleExpandParent, panBy, fitViewport, isMacOs, areConnectionMapsEqual, handleConnectionChange, shallowNodeData, XYMinimap, getBoundsOfRects, ResizeControlVariant, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, getNodeToolbarTransform, getEdgeToolbarTransform } 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';
|
|
@@ -239,6 +239,7 @@ const reactFlowFieldsToTrack = [
|
|
|
239
239
|
'debug',
|
|
240
240
|
'autoPanSpeed',
|
|
241
241
|
'ariaLabelConfig',
|
|
242
|
+
'zIndexMode',
|
|
242
243
|
];
|
|
243
244
|
// rfId doesn't exist in ReactFlowProps, but it's one of the fields we want to update
|
|
244
245
|
const fieldsToTrack = [...reactFlowFieldsToTrack, 'rfId'];
|
|
@@ -676,9 +677,9 @@ function applyChange(change, element) {
|
|
|
676
677
|
}
|
|
677
678
|
case 'dimensions': {
|
|
678
679
|
if (typeof change.dimensions !== 'undefined') {
|
|
679
|
-
element.measured
|
|
680
|
-
|
|
681
|
-
|
|
680
|
+
element.measured = {
|
|
681
|
+
...change.dimensions,
|
|
682
|
+
};
|
|
682
683
|
if (change.setAttributes) {
|
|
683
684
|
if (change.setAttributes === true || change.setAttributes === 'width') {
|
|
684
685
|
element.width = change.dimensions.width;
|
|
@@ -931,7 +932,7 @@ const BatchContext = createContext(null);
|
|
|
931
932
|
function BatchProvider({ children, }) {
|
|
932
933
|
const store = useStoreApi();
|
|
933
934
|
const nodeQueueHandler = useCallback((queueItems) => {
|
|
934
|
-
const { nodes = [], setNodes, hasDefaultNodes, onNodesChange, nodeLookup, fitViewQueued } = store.getState();
|
|
935
|
+
const { nodes = [], setNodes, hasDefaultNodes, onNodesChange, nodeLookup, fitViewQueued, onNodesChangeMiddlewareMap, } = store.getState();
|
|
935
936
|
/*
|
|
936
937
|
* This is essentially an `Array.reduce` in imperative clothing. Processing
|
|
937
938
|
* this queue is a relatively hot path so we'd like to avoid the overhead of
|
|
@@ -941,10 +942,13 @@ function BatchProvider({ children, }) {
|
|
|
941
942
|
for (const payload of queueItems) {
|
|
942
943
|
next = typeof payload === 'function' ? payload(next) : payload;
|
|
943
944
|
}
|
|
944
|
-
|
|
945
|
+
let changes = getElementsDiffChanges({
|
|
945
946
|
items: next,
|
|
946
947
|
lookup: nodeLookup,
|
|
947
948
|
});
|
|
949
|
+
for (const middleware of onNodesChangeMiddlewareMap.values()) {
|
|
950
|
+
changes = middleware(changes);
|
|
951
|
+
}
|
|
948
952
|
if (hasDefaultNodes) {
|
|
949
953
|
setNodes(next);
|
|
950
954
|
}
|
|
@@ -1978,7 +1982,7 @@ const selector$e = (s) => {
|
|
|
1978
1982
|
return { nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive };
|
|
1979
1983
|
};
|
|
1980
1984
|
function FlowRendererComponent({ children, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, paneClickDistance, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll: _panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: _panOnDrag, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, onSelectionContextMenu, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport, }) {
|
|
1981
|
-
const { nodesSelectionActive, userSelectionActive } = useStore(selector$e);
|
|
1985
|
+
const { nodesSelectionActive, userSelectionActive } = useStore(selector$e, shallow);
|
|
1982
1986
|
const selectionKeyPressed = useKeyPress(selectionKeyCode, { target: win });
|
|
1983
1987
|
const panActivationKeyPressed = useKeyPress(panActivationKeyCode, { target: win });
|
|
1984
1988
|
const panOnDrag = panActivationKeyPressed || _panOnDrag;
|
|
@@ -2830,6 +2834,7 @@ function EdgeWrapper({ id, edgesFocusable, edgesReconnectable, elementsSelectabl
|
|
|
2830
2834
|
sourceNode,
|
|
2831
2835
|
targetNode,
|
|
2832
2836
|
elevateOnSelect: store.elevateEdgesOnSelect,
|
|
2837
|
+
zIndexMode: store.zIndexMode,
|
|
2833
2838
|
});
|
|
2834
2839
|
return {
|
|
2835
2840
|
zIndex,
|
|
@@ -3119,7 +3124,7 @@ function GraphViewComponent({ nodeTypes, edgeTypes, onInit, onNodeClick, onEdgeC
|
|
|
3119
3124
|
GraphViewComponent.displayName = 'GraphView';
|
|
3120
3125
|
const GraphView = memo(GraphViewComponent);
|
|
3121
3126
|
|
|
3122
|
-
const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom = 0.5, maxZoom = 2, nodeOrigin, nodeExtent, } = {}) => {
|
|
3127
|
+
const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom = 0.5, maxZoom = 2, nodeOrigin, nodeExtent, zIndexMode = 'basic', } = {}) => {
|
|
3123
3128
|
const nodeLookup = new Map();
|
|
3124
3129
|
const parentLookup = new Map();
|
|
3125
3130
|
const connectionLookup = new Map();
|
|
@@ -3132,7 +3137,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
|
|
|
3132
3137
|
const nodesInitialized = adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
|
|
3133
3138
|
nodeOrigin: storeNodeOrigin,
|
|
3134
3139
|
nodeExtent: storeNodeExtent,
|
|
3135
|
-
|
|
3140
|
+
zIndexMode,
|
|
3136
3141
|
});
|
|
3137
3142
|
let transform = [0, 0, 1];
|
|
3138
3143
|
if (fitView && width && height) {
|
|
@@ -3182,7 +3187,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
|
|
|
3182
3187
|
edgesReconnectable: true,
|
|
3183
3188
|
elementsSelectable: true,
|
|
3184
3189
|
elevateNodesOnSelect: true,
|
|
3185
|
-
elevateEdgesOnSelect:
|
|
3190
|
+
elevateEdgesOnSelect: true,
|
|
3186
3191
|
selectNodesOnDrag: true,
|
|
3187
3192
|
multiSelectionActive: false,
|
|
3188
3193
|
fitViewQueued: fitView ?? false,
|
|
@@ -3203,10 +3208,13 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
|
|
|
3203
3208
|
lib: 'react',
|
|
3204
3209
|
debug: false,
|
|
3205
3210
|
ariaLabelConfig: defaultAriaLabelConfig,
|
|
3211
|
+
zIndexMode,
|
|
3212
|
+
onNodesChangeMiddlewareMap: new Map(),
|
|
3213
|
+
onEdgesChangeMiddlewareMap: new Map(),
|
|
3206
3214
|
};
|
|
3207
3215
|
};
|
|
3208
3216
|
|
|
3209
|
-
const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, }) => createWithEqualityFn((set, get) => {
|
|
3217
|
+
const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, zIndexMode, }) => createWithEqualityFn((set, get) => {
|
|
3210
3218
|
async function resolveFitView() {
|
|
3211
3219
|
const { nodeLookup, panZoom, fitViewOptions, fitViewResolver, width, height, minZoom, maxZoom } = get();
|
|
3212
3220
|
if (!panZoom) {
|
|
@@ -3241,9 +3249,10 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
|
|
|
3241
3249
|
nodeExtent,
|
|
3242
3250
|
defaultNodes,
|
|
3243
3251
|
defaultEdges,
|
|
3252
|
+
zIndexMode,
|
|
3244
3253
|
}),
|
|
3245
3254
|
setNodes: (nodes) => {
|
|
3246
|
-
const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, fitViewQueued } = get();
|
|
3255
|
+
const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, fitViewQueued, zIndexMode } = get();
|
|
3247
3256
|
/*
|
|
3248
3257
|
* setNodes() is called exclusively in response to user actions:
|
|
3249
3258
|
* - either when the `<ReactFlow nodes>` prop is updated in the controlled ReactFlow setup,
|
|
@@ -3257,6 +3266,7 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
|
|
|
3257
3266
|
nodeExtent,
|
|
3258
3267
|
elevateNodesOnSelect,
|
|
3259
3268
|
checkEquality: true,
|
|
3269
|
+
zIndexMode,
|
|
3260
3270
|
});
|
|
3261
3271
|
if (fitViewQueued && nodesInitialized) {
|
|
3262
3272
|
resolveFitView();
|
|
@@ -3289,12 +3299,12 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
|
|
|
3289
3299
|
* new dimensions and update the nodes.
|
|
3290
3300
|
*/
|
|
3291
3301
|
updateNodeInternals: (updates) => {
|
|
3292
|
-
const { triggerNodeChanges, nodeLookup, parentLookup, domNode, nodeOrigin, nodeExtent, debug, fitViewQueued } = get();
|
|
3293
|
-
const { changes, updatedInternals } = updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOrigin, nodeExtent);
|
|
3302
|
+
const { triggerNodeChanges, nodeLookup, parentLookup, domNode, nodeOrigin, nodeExtent, debug, fitViewQueued, zIndexMode, } = get();
|
|
3303
|
+
const { changes, updatedInternals } = updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOrigin, nodeExtent, zIndexMode);
|
|
3294
3304
|
if (!updatedInternals) {
|
|
3295
3305
|
return;
|
|
3296
3306
|
}
|
|
3297
|
-
updateAbsolutePositions(nodeLookup, parentLookup, { nodeOrigin, nodeExtent });
|
|
3307
|
+
updateAbsolutePositions(nodeLookup, parentLookup, { nodeOrigin, nodeExtent, zIndexMode });
|
|
3298
3308
|
if (fitViewQueued) {
|
|
3299
3309
|
resolveFitView();
|
|
3300
3310
|
set({ fitViewQueued: false, fitViewOptions: undefined });
|
|
@@ -3312,8 +3322,8 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
|
|
|
3312
3322
|
},
|
|
3313
3323
|
updateNodePositions: (nodeDragItems, dragging = false) => {
|
|
3314
3324
|
const parentExpandChildren = [];
|
|
3315
|
-
|
|
3316
|
-
const { nodeLookup, triggerNodeChanges } = get();
|
|
3325
|
+
let changes = [];
|
|
3326
|
+
const { nodeLookup, triggerNodeChanges, connection, updateConnection, onNodesChangeMiddlewareMap } = get();
|
|
3317
3327
|
for (const [id, dragItem] of nodeDragItems) {
|
|
3318
3328
|
// we are using the nodelookup to be sure to use the current expandParent and parentId value
|
|
3319
3329
|
const node = nodeLookup.get(id);
|
|
@@ -3329,6 +3339,10 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
|
|
|
3329
3339
|
: dragItem.position,
|
|
3330
3340
|
dragging,
|
|
3331
3341
|
};
|
|
3342
|
+
if (node && connection.inProgress && connection.fromNode.id === node.id) {
|
|
3343
|
+
const updatedFrom = getHandlePosition(node, connection.fromHandle, Position.Left, true);
|
|
3344
|
+
updateConnection({ ...connection, from: updatedFrom });
|
|
3345
|
+
}
|
|
3332
3346
|
if (expandParent && node.parentId) {
|
|
3333
3347
|
parentExpandChildren.push({
|
|
3334
3348
|
id,
|
|
@@ -3347,6 +3361,9 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
|
|
|
3347
3361
|
const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin);
|
|
3348
3362
|
changes.push(...parentExpandChanges);
|
|
3349
3363
|
}
|
|
3364
|
+
for (const middleware of onNodesChangeMiddlewareMap.values()) {
|
|
3365
|
+
changes = middleware(changes);
|
|
3366
|
+
}
|
|
3350
3367
|
triggerNodeChanges(changes);
|
|
3351
3368
|
},
|
|
3352
3369
|
triggerNodeChanges: (changes) => {
|
|
@@ -3439,7 +3456,7 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
|
|
|
3439
3456
|
triggerEdgeChanges(edgeChanges);
|
|
3440
3457
|
},
|
|
3441
3458
|
setNodeExtent: (nextNodeExtent) => {
|
|
3442
|
-
const { nodes, nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, nodeExtent } = get();
|
|
3459
|
+
const { nodes, nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, nodeExtent, zIndexMode } = get();
|
|
3443
3460
|
if (nextNodeExtent[0][0] === nodeExtent[0][0] &&
|
|
3444
3461
|
nextNodeExtent[0][1] === nodeExtent[0][1] &&
|
|
3445
3462
|
nextNodeExtent[1][0] === nodeExtent[1][0] &&
|
|
@@ -3451,6 +3468,7 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
|
|
|
3451
3468
|
nodeExtent: nextNodeExtent,
|
|
3452
3469
|
elevateNodesOnSelect,
|
|
3453
3470
|
checkEquality: false,
|
|
3471
|
+
zIndexMode,
|
|
3454
3472
|
});
|
|
3455
3473
|
set({ nodeExtent: nextNodeExtent });
|
|
3456
3474
|
},
|
|
@@ -3517,7 +3535,7 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
|
|
|
3517
3535
|
* your router. If you have multiple flows on the same page you will need to use a separate
|
|
3518
3536
|
* `<ReactFlowProvider />` for each flow.
|
|
3519
3537
|
*/
|
|
3520
|
-
function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, initialMinZoom: minZoom, initialMaxZoom: maxZoom, initialFitViewOptions: fitViewOptions, fitView, nodeOrigin, nodeExtent, children, }) {
|
|
3538
|
+
function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNodes, defaultEdges, initialWidth: width, initialHeight: height, initialMinZoom: minZoom, initialMaxZoom: maxZoom, initialFitViewOptions: fitViewOptions, fitView, nodeOrigin, nodeExtent, zIndexMode, children, }) {
|
|
3521
3539
|
const [store] = useState(() => createStore({
|
|
3522
3540
|
nodes,
|
|
3523
3541
|
edges,
|
|
@@ -3531,11 +3549,12 @@ function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNo
|
|
|
3531
3549
|
fitViewOptions,
|
|
3532
3550
|
nodeOrigin,
|
|
3533
3551
|
nodeExtent,
|
|
3552
|
+
zIndexMode,
|
|
3534
3553
|
}));
|
|
3535
3554
|
return (jsx(Provider$1, { value: store, children: jsx(BatchProvider, { children: children }) }));
|
|
3536
3555
|
}
|
|
3537
3556
|
|
|
3538
|
-
function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, }) {
|
|
3557
|
+
function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, zIndexMode, }) {
|
|
3539
3558
|
const isWrapped = useContext(StoreContext);
|
|
3540
3559
|
if (isWrapped) {
|
|
3541
3560
|
/*
|
|
@@ -3544,7 +3563,7 @@ function Wrapper({ children, nodes, edges, defaultNodes, defaultEdges, width, he
|
|
|
3544
3563
|
*/
|
|
3545
3564
|
return jsx(Fragment, { children: children });
|
|
3546
3565
|
}
|
|
3547
|
-
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 }));
|
|
3566
|
+
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, zIndexMode: zIndexMode, children: children }));
|
|
3548
3567
|
}
|
|
3549
3568
|
|
|
3550
3569
|
const wrapperStyle = {
|
|
@@ -3554,7 +3573,7 @@ const wrapperStyle = {
|
|
|
3554
3573
|
position: 'relative',
|
|
3555
3574
|
zIndex: 0,
|
|
3556
3575
|
};
|
|
3557
|
-
function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes, edgeTypes, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = 'Backspace', selectionKeyCode = 'Shift', selectionOnDrag = false, selectionMode = SelectionMode.Full, panActivationKeyCode = 'Space', multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control', zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control', snapToGrid, snapGrid, onlyRenderVisibleElements = false, selectNodesOnDrag, nodesDraggable, autoPanOnNodeFocus, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesReconnectable, elementsSelectable = true, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = true, nodeExtent, defaultMarkerColor = '#b1b1b7', zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance = 1, nodeClickDistance = 0, children, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius = 10, onNodesChange, onEdgesChange, noDragClassName = 'nodrag', noWheelClassName = 'nowheel', noPanClassName = 'nopan', fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = false, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, connectionRadius, isValidConnection, onError, style, id, nodeDragThreshold, connectionDragThreshold, viewport, onViewportChange, width, height, colorMode = 'light', debug, onScroll, ariaLabelConfig, ...rest }, ref) {
|
|
3576
|
+
function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes, edgeTypes, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = 'Backspace', selectionKeyCode = 'Shift', selectionOnDrag = false, selectionMode = SelectionMode.Full, panActivationKeyCode = 'Space', multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control', zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control', snapToGrid, snapGrid, onlyRenderVisibleElements = false, selectNodesOnDrag, nodesDraggable, autoPanOnNodeFocus, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesReconnectable, elementsSelectable = true, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = true, nodeExtent, defaultMarkerColor = '#b1b1b7', zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance = 1, nodeClickDistance = 0, children, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius = 10, onNodesChange, onEdgesChange, noDragClassName = 'nodrag', noWheelClassName = 'nowheel', noPanClassName = 'nopan', fitView, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect = true, elevateEdgesOnSelect = false, disableKeyboardA11y = false, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, connectionRadius, isValidConnection, onError, style, id, nodeDragThreshold, connectionDragThreshold, viewport, onViewportChange, width, height, colorMode = 'light', debug, onScroll, ariaLabelConfig, zIndexMode = 'basic', ...rest }, ref) {
|
|
3558
3577
|
const rfId = id || '1';
|
|
3559
3578
|
const colorModeClassName = useColorModeClass(colorMode);
|
|
3560
3579
|
// Undo scroll events, preventing viewport from shifting when nodes outside of it are focused
|
|
@@ -3562,7 +3581,7 @@ function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTy
|
|
|
3562
3581
|
e.currentTarget.scrollTo({ top: 0, left: 0, behavior: 'instant' });
|
|
3563
3582
|
onScroll?.(e);
|
|
3564
3583
|
}, [onScroll]);
|
|
3565
|
-
return (jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), id: id, role: "application", 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, autoPanOnNodeFocus: autoPanOnNodeFocus, 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, connectionDragThreshold: connectionDragThreshold, onBeforeDelete: onBeforeDelete, debug: debug, ariaLabelConfig: ariaLabelConfig }), jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
|
|
3584
|
+
return (jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style, ...wrapperStyle }, ref: ref, className: cc(['react-flow', className, colorModeClassName]), id: id, role: "application", children: jsxs(Wrapper, { nodes: nodes, edges: edges, width: width, height: height, fitView: fitView, fitViewOptions: fitViewOptions, minZoom: minZoom, maxZoom: maxZoom, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, zIndexMode: zIndexMode, 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, autoPanOnNodeFocus: autoPanOnNodeFocus, 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, connectionDragThreshold: connectionDragThreshold, onBeforeDelete: onBeforeDelete, debug: debug, ariaLabelConfig: ariaLabelConfig, zIndexMode: zIndexMode }), jsx(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
|
|
3566
3585
|
}
|
|
3567
3586
|
/**
|
|
3568
3587
|
* The `<ReactFlow />` component is the heart of your React Flow application.
|
|
@@ -4180,6 +4199,48 @@ function useInternalNode(id) {
|
|
|
4180
4199
|
return node;
|
|
4181
4200
|
}
|
|
4182
4201
|
|
|
4202
|
+
/**
|
|
4203
|
+
* Registers a middleware function to transform node changes.
|
|
4204
|
+
*
|
|
4205
|
+
* @public
|
|
4206
|
+
* @param fn - Middleware function. Should be memoized with useCallback to avoid re-registration.
|
|
4207
|
+
*/
|
|
4208
|
+
function experimental_useOnNodesChangeMiddleware(fn) {
|
|
4209
|
+
const store = useStoreApi();
|
|
4210
|
+
const [symbol] = useState(() => Symbol());
|
|
4211
|
+
useEffect(() => {
|
|
4212
|
+
const { onNodesChangeMiddlewareMap } = store.getState();
|
|
4213
|
+
onNodesChangeMiddlewareMap.set(symbol, fn);
|
|
4214
|
+
}, [fn]);
|
|
4215
|
+
useEffect(() => {
|
|
4216
|
+
const { onNodesChangeMiddlewareMap } = store.getState();
|
|
4217
|
+
return () => {
|
|
4218
|
+
onNodesChangeMiddlewareMap.delete(symbol);
|
|
4219
|
+
};
|
|
4220
|
+
}, []);
|
|
4221
|
+
}
|
|
4222
|
+
|
|
4223
|
+
/**
|
|
4224
|
+
* Registers a middleware function to transform edge changes.
|
|
4225
|
+
*
|
|
4226
|
+
* @public
|
|
4227
|
+
* @param fn - Middleware function. Should be memoized with useCallback to avoid re-registration.
|
|
4228
|
+
*/
|
|
4229
|
+
function experimental_useOnEdgesChangeMiddleware(fn) {
|
|
4230
|
+
const store = useStoreApi();
|
|
4231
|
+
const [symbol] = useState(() => Symbol());
|
|
4232
|
+
useEffect(() => {
|
|
4233
|
+
const { onEdgesChangeMiddlewareMap } = store.getState();
|
|
4234
|
+
onEdgesChangeMiddlewareMap.set(symbol, fn);
|
|
4235
|
+
}, [fn]);
|
|
4236
|
+
useEffect(() => {
|
|
4237
|
+
const { onEdgesChangeMiddlewareMap } = store.getState();
|
|
4238
|
+
return () => {
|
|
4239
|
+
onEdgesChangeMiddlewareMap.delete(symbol);
|
|
4240
|
+
};
|
|
4241
|
+
}, []);
|
|
4242
|
+
}
|
|
4243
|
+
|
|
4183
4244
|
function LinePattern({ dimensions, lineWidth, variant, className }) {
|
|
4184
4245
|
return (jsx("path", { strokeWidth: lineWidth, d: `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`, className: cc(['react-flow__background-pattern', variant, className]) }));
|
|
4185
4246
|
}
|
|
@@ -4898,4 +4959,4 @@ function EdgeToolbar({ edgeId, x, y, children, className, style, isVisible, alig
|
|
|
4898
4959
|
}, className: cc(['react-flow__edge-toolbar', className]), "data-id": edge?.id ?? '', ...rest, children: children }) }));
|
|
4899
4960
|
}
|
|
4900
4961
|
|
|
4901
|
-
export { Background, BackgroundVariant, BaseEdge, BezierEdge, ControlButton, Controls, EdgeLabelRenderer, EdgeText, EdgeToolbar, Handle, MiniMap, MiniMapNode, NodeResizeControl, NodeResizer, NodeToolbar, Panel, index as ReactFlow, ReactFlowProvider, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge, ViewportPortal, applyEdgeChanges, applyNodeChanges, getSimpleBezierPath, isEdge, isNode, useConnection, useEdges, useEdgesState, useHandleConnections, useInternalNode, useKeyPress, useNodeConnections, useNodeId, useNodes, useNodesData, useNodesInitialized, useNodesState, useOnSelectionChange, useOnViewportChange, useReactFlow, useStore, useStoreApi, useUpdateNodeInternals, useViewport };
|
|
4962
|
+
export { Background, BackgroundVariant, BaseEdge, BezierEdge, ControlButton, Controls, EdgeLabelRenderer, EdgeText, EdgeToolbar, Handle, MiniMap, MiniMapNode, NodeResizeControl, NodeResizer, NodeToolbar, Panel, index as ReactFlow, ReactFlowProvider, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge, ViewportPortal, applyEdgeChanges, applyNodeChanges, experimental_useOnEdgesChangeMiddleware, experimental_useOnNodesChangeMiddleware, getSimpleBezierPath, isEdge, isNode, useConnection, useEdges, useEdgesState, useHandleConnections, useInternalNode, useKeyPress, useNodeConnections, useNodeId, useNodes, useNodesData, useNodesInitialized, useNodesState, useOnSelectionChange, useOnViewportChange, useReactFlow, useStore, useStoreApi, useUpdateNodeInternals, useViewport };
|