@xyflow/react 12.10.1 → 12.10.2
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/StoreUpdater/index.d.ts.map +1 -1
- package/dist/esm/index.js +29 -17
- package/dist/esm/index.mjs +29 -17
- package/dist/esm/store/index.d.ts.map +1 -1
- package/dist/esm/types/general.d.ts +3 -2
- package/dist/esm/types/general.d.ts.map +1 -1
- package/dist/esm/types/nodes.d.ts +2 -2
- package/dist/esm/types/nodes.d.ts.map +1 -1
- package/dist/umd/components/StoreUpdater/index.d.ts.map +1 -1
- package/dist/umd/index.js +2 -2
- package/dist/umd/store/index.d.ts.map +1 -1
- package/dist/umd/types/general.d.ts +3 -2
- package/dist/umd/types/general.d.ts.map +1 -1
- package/dist/umd/types/nodes.d.ts +2 -2
- package/dist/umd/types/nodes.d.ts.map +1 -1
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StoreUpdater/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StoreUpdater/index.tsx"],"names":[],"mappings":"AAWA,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,QA8D7C"}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { createContext, useContext, useMemo, forwardRef, useEffect, useRef, useState,
|
|
3
|
+
import { createContext, useContext, useMemo, forwardRef, useEffect, useLayoutEffect, useRef, useState, useCallback, memo } from 'react';
|
|
4
4
|
import cc from 'classcat';
|
|
5
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';
|
|
@@ -172,6 +172,9 @@ function SelectionListener({ onSelectionChange, }) {
|
|
|
172
172
|
return null;
|
|
173
173
|
}
|
|
174
174
|
|
|
175
|
+
// we need this hook to prevent a warning when using react-flow in SSR
|
|
176
|
+
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
|
|
177
|
+
|
|
175
178
|
const defaultNodeOrigin = [0, 0];
|
|
176
179
|
const defaultViewport = { x: 0, y: 0, zoom: 1 };
|
|
177
180
|
|
|
@@ -270,7 +273,12 @@ const initPrevValues = {
|
|
|
270
273
|
function StoreUpdater(props) {
|
|
271
274
|
const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges, } = useStore(selector$l, shallow);
|
|
272
275
|
const store = useStoreApi();
|
|
273
|
-
|
|
276
|
+
// We use layout effects here so that the store is always populated before
|
|
277
|
+
// any child useEffect or useLayoutEffect fires. With regular useEffect, the
|
|
278
|
+
// cleanup calls reset() which empties the store, and child effects can run
|
|
279
|
+
// before the new mount effect repopulates it — causing children to read
|
|
280
|
+
// empty nodeLookup/nodes/edges during a <ReactFlow> remount.
|
|
281
|
+
useIsomorphicLayoutEffect(() => {
|
|
274
282
|
setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges);
|
|
275
283
|
return () => {
|
|
276
284
|
// when we reset the store we also need to reset the previous fields
|
|
@@ -279,7 +287,7 @@ function StoreUpdater(props) {
|
|
|
279
287
|
};
|
|
280
288
|
}, []);
|
|
281
289
|
const previousFields = useRef(initPrevValues);
|
|
282
|
-
|
|
290
|
+
useIsomorphicLayoutEffect(() => {
|
|
283
291
|
for (const fieldName of fieldsToTrack) {
|
|
284
292
|
const fieldValue = props[fieldName];
|
|
285
293
|
const previousFieldValue = previousFields.current[fieldName];
|
|
@@ -502,15 +510,15 @@ const useViewportHelper = () => {
|
|
|
502
510
|
return {
|
|
503
511
|
zoomIn: (options) => {
|
|
504
512
|
const { panZoom } = store.getState();
|
|
505
|
-
return panZoom ? panZoom.scaleBy(1.2,
|
|
513
|
+
return panZoom ? panZoom.scaleBy(1.2, options) : Promise.resolve(false);
|
|
506
514
|
},
|
|
507
515
|
zoomOut: (options) => {
|
|
508
516
|
const { panZoom } = store.getState();
|
|
509
|
-
return panZoom ? panZoom.scaleBy(1 / 1.2,
|
|
517
|
+
return panZoom ? panZoom.scaleBy(1 / 1.2, options) : Promise.resolve(false);
|
|
510
518
|
},
|
|
511
519
|
zoomTo: (zoomLevel, options) => {
|
|
512
520
|
const { panZoom } = store.getState();
|
|
513
|
-
return panZoom ? panZoom.scaleTo(zoomLevel,
|
|
521
|
+
return panZoom ? panZoom.scaleTo(zoomLevel, options) : Promise.resolve(false);
|
|
514
522
|
},
|
|
515
523
|
getZoom: () => store.getState().transform[2],
|
|
516
524
|
setViewport: async (viewport, options) => {
|
|
@@ -868,9 +876,6 @@ function fixedForwardRef(render) {
|
|
|
868
876
|
return forwardRef(render);
|
|
869
877
|
}
|
|
870
878
|
|
|
871
|
-
// we need this hook to prevent a warning when using react-flow in SSR
|
|
872
|
-
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
|
|
873
|
-
|
|
874
879
|
/**
|
|
875
880
|
* This hook returns a queue that can be used to batch updates.
|
|
876
881
|
*
|
|
@@ -3134,7 +3139,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
|
|
|
3134
3139
|
const storeNodeOrigin = nodeOrigin ?? [0, 0];
|
|
3135
3140
|
const storeNodeExtent = nodeExtent ?? infiniteExtent;
|
|
3136
3141
|
updateConnectionLookup(connectionLookup, edgeLookup, storeEdges);
|
|
3137
|
-
const nodesInitialized = adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
|
|
3142
|
+
const { nodesInitialized } = adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
|
|
3138
3143
|
nodeOrigin: storeNodeOrigin,
|
|
3139
3144
|
nodeExtent: storeNodeExtent,
|
|
3140
3145
|
zIndexMode,
|
|
@@ -3252,7 +3257,7 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
|
|
|
3252
3257
|
zIndexMode,
|
|
3253
3258
|
}),
|
|
3254
3259
|
setNodes: (nodes) => {
|
|
3255
|
-
const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, fitViewQueued, zIndexMode } = get();
|
|
3260
|
+
const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, fitViewQueued, zIndexMode, nodesSelectionActive, } = get();
|
|
3256
3261
|
/*
|
|
3257
3262
|
* setNodes() is called exclusively in response to user actions:
|
|
3258
3263
|
* - either when the `<ReactFlow nodes>` prop is updated in the controlled ReactFlow setup,
|
|
@@ -3261,19 +3266,26 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
|
|
|
3261
3266
|
* When this happens, we take the note objects passed by the user and extend them with fields
|
|
3262
3267
|
* relevant for internal React Flow operations.
|
|
3263
3268
|
*/
|
|
3264
|
-
const nodesInitialized = adoptUserNodes(nodes, nodeLookup, parentLookup, {
|
|
3269
|
+
const { nodesInitialized, hasSelectedNodes } = adoptUserNodes(nodes, nodeLookup, parentLookup, {
|
|
3265
3270
|
nodeOrigin,
|
|
3266
3271
|
nodeExtent,
|
|
3267
3272
|
elevateNodesOnSelect,
|
|
3268
3273
|
checkEquality: true,
|
|
3269
3274
|
zIndexMode,
|
|
3270
3275
|
});
|
|
3276
|
+
const nextNodesSelectionActive = nodesSelectionActive && hasSelectedNodes;
|
|
3271
3277
|
if (fitViewQueued && nodesInitialized) {
|
|
3272
3278
|
resolveFitView();
|
|
3273
|
-
set({
|
|
3279
|
+
set({
|
|
3280
|
+
nodes,
|
|
3281
|
+
nodesInitialized,
|
|
3282
|
+
fitViewQueued: false,
|
|
3283
|
+
fitViewOptions: undefined,
|
|
3284
|
+
nodesSelectionActive: nextNodesSelectionActive
|
|
3285
|
+
});
|
|
3274
3286
|
}
|
|
3275
3287
|
else {
|
|
3276
|
-
set({ nodes, nodesInitialized });
|
|
3288
|
+
set({ nodes, nodesInitialized, nodesSelectionActive: nextNodesSelectionActive });
|
|
3277
3289
|
}
|
|
3278
3290
|
},
|
|
3279
3291
|
setEdges: (edges) => {
|
|
@@ -3294,7 +3306,7 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
|
|
|
3294
3306
|
}
|
|
3295
3307
|
},
|
|
3296
3308
|
/*
|
|
3297
|
-
* Every node gets
|
|
3309
|
+
* Every node gets registered at a ResizeObserver. Whenever a node
|
|
3298
3310
|
* changes its dimensions, this function is called to measure the
|
|
3299
3311
|
* new dimensions and update the nodes.
|
|
3300
3312
|
*/
|
|
@@ -3591,7 +3603,7 @@ function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTy
|
|
|
3591
3603
|
e.currentTarget.scrollTo({ top: 0, left: 0, behavior: 'instant' });
|
|
3592
3604
|
onScroll?.(e);
|
|
3593
3605
|
}, [onScroll]);
|
|
3594
|
-
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(
|
|
3606
|
+
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(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(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(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
|
|
3595
3607
|
}
|
|
3596
3608
|
/**
|
|
3597
3609
|
* The `<ReactFlow />` component is the heart of your React Flow application.
|
|
@@ -4102,7 +4114,7 @@ function useHandleConnections({ type, id, nodeId, onConnect, onDisconnect, }) {
|
|
|
4102
4114
|
const prevConnections = useRef(null);
|
|
4103
4115
|
const connections = useStore((state) => state.connectionLookup.get(`${currentNodeId}-${type}${id ? `-${id}` : ''}`), areConnectionMapsEqual);
|
|
4104
4116
|
useEffect(() => {
|
|
4105
|
-
// @todo
|
|
4117
|
+
// @todo discuss if onConnect/onDisconnect should be called when the component mounts/unmounts
|
|
4106
4118
|
if (prevConnections.current && prevConnections.current !== connections) {
|
|
4107
4119
|
const _connections = connections ?? new Map();
|
|
4108
4120
|
handleConnectionChange(prevConnections.current, _connections, onDisconnect);
|
package/dist/esm/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { createContext, useContext, useMemo, forwardRef, useEffect, useRef, useState,
|
|
3
|
+
import { createContext, useContext, useMemo, forwardRef, useEffect, useLayoutEffect, useRef, useState, useCallback, memo } from 'react';
|
|
4
4
|
import cc from 'classcat';
|
|
5
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';
|
|
@@ -172,6 +172,9 @@ function SelectionListener({ onSelectionChange, }) {
|
|
|
172
172
|
return null;
|
|
173
173
|
}
|
|
174
174
|
|
|
175
|
+
// we need this hook to prevent a warning when using react-flow in SSR
|
|
176
|
+
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
|
|
177
|
+
|
|
175
178
|
const defaultNodeOrigin = [0, 0];
|
|
176
179
|
const defaultViewport = { x: 0, y: 0, zoom: 1 };
|
|
177
180
|
|
|
@@ -270,7 +273,12 @@ const initPrevValues = {
|
|
|
270
273
|
function StoreUpdater(props) {
|
|
271
274
|
const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges, } = useStore(selector$l, shallow);
|
|
272
275
|
const store = useStoreApi();
|
|
273
|
-
|
|
276
|
+
// We use layout effects here so that the store is always populated before
|
|
277
|
+
// any child useEffect or useLayoutEffect fires. With regular useEffect, the
|
|
278
|
+
// cleanup calls reset() which empties the store, and child effects can run
|
|
279
|
+
// before the new mount effect repopulates it — causing children to read
|
|
280
|
+
// empty nodeLookup/nodes/edges during a <ReactFlow> remount.
|
|
281
|
+
useIsomorphicLayoutEffect(() => {
|
|
274
282
|
setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges);
|
|
275
283
|
return () => {
|
|
276
284
|
// when we reset the store we also need to reset the previous fields
|
|
@@ -279,7 +287,7 @@ function StoreUpdater(props) {
|
|
|
279
287
|
};
|
|
280
288
|
}, []);
|
|
281
289
|
const previousFields = useRef(initPrevValues);
|
|
282
|
-
|
|
290
|
+
useIsomorphicLayoutEffect(() => {
|
|
283
291
|
for (const fieldName of fieldsToTrack) {
|
|
284
292
|
const fieldValue = props[fieldName];
|
|
285
293
|
const previousFieldValue = previousFields.current[fieldName];
|
|
@@ -502,15 +510,15 @@ const useViewportHelper = () => {
|
|
|
502
510
|
return {
|
|
503
511
|
zoomIn: (options) => {
|
|
504
512
|
const { panZoom } = store.getState();
|
|
505
|
-
return panZoom ? panZoom.scaleBy(1.2,
|
|
513
|
+
return panZoom ? panZoom.scaleBy(1.2, options) : Promise.resolve(false);
|
|
506
514
|
},
|
|
507
515
|
zoomOut: (options) => {
|
|
508
516
|
const { panZoom } = store.getState();
|
|
509
|
-
return panZoom ? panZoom.scaleBy(1 / 1.2,
|
|
517
|
+
return panZoom ? panZoom.scaleBy(1 / 1.2, options) : Promise.resolve(false);
|
|
510
518
|
},
|
|
511
519
|
zoomTo: (zoomLevel, options) => {
|
|
512
520
|
const { panZoom } = store.getState();
|
|
513
|
-
return panZoom ? panZoom.scaleTo(zoomLevel,
|
|
521
|
+
return panZoom ? panZoom.scaleTo(zoomLevel, options) : Promise.resolve(false);
|
|
514
522
|
},
|
|
515
523
|
getZoom: () => store.getState().transform[2],
|
|
516
524
|
setViewport: async (viewport, options) => {
|
|
@@ -868,9 +876,6 @@ function fixedForwardRef(render) {
|
|
|
868
876
|
return forwardRef(render);
|
|
869
877
|
}
|
|
870
878
|
|
|
871
|
-
// we need this hook to prevent a warning when using react-flow in SSR
|
|
872
|
-
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
|
|
873
|
-
|
|
874
879
|
/**
|
|
875
880
|
* This hook returns a queue that can be used to batch updates.
|
|
876
881
|
*
|
|
@@ -3134,7 +3139,7 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
|
|
|
3134
3139
|
const storeNodeOrigin = nodeOrigin ?? [0, 0];
|
|
3135
3140
|
const storeNodeExtent = nodeExtent ?? infiniteExtent;
|
|
3136
3141
|
updateConnectionLookup(connectionLookup, edgeLookup, storeEdges);
|
|
3137
|
-
const nodesInitialized = adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
|
|
3142
|
+
const { nodesInitialized } = adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
|
|
3138
3143
|
nodeOrigin: storeNodeOrigin,
|
|
3139
3144
|
nodeExtent: storeNodeExtent,
|
|
3140
3145
|
zIndexMode,
|
|
@@ -3252,7 +3257,7 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
|
|
|
3252
3257
|
zIndexMode,
|
|
3253
3258
|
}),
|
|
3254
3259
|
setNodes: (nodes) => {
|
|
3255
|
-
const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, fitViewQueued, zIndexMode } = get();
|
|
3260
|
+
const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, fitViewQueued, zIndexMode, nodesSelectionActive, } = get();
|
|
3256
3261
|
/*
|
|
3257
3262
|
* setNodes() is called exclusively in response to user actions:
|
|
3258
3263
|
* - either when the `<ReactFlow nodes>` prop is updated in the controlled ReactFlow setup,
|
|
@@ -3261,19 +3266,26 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
|
|
|
3261
3266
|
* When this happens, we take the note objects passed by the user and extend them with fields
|
|
3262
3267
|
* relevant for internal React Flow operations.
|
|
3263
3268
|
*/
|
|
3264
|
-
const nodesInitialized = adoptUserNodes(nodes, nodeLookup, parentLookup, {
|
|
3269
|
+
const { nodesInitialized, hasSelectedNodes } = adoptUserNodes(nodes, nodeLookup, parentLookup, {
|
|
3265
3270
|
nodeOrigin,
|
|
3266
3271
|
nodeExtent,
|
|
3267
3272
|
elevateNodesOnSelect,
|
|
3268
3273
|
checkEquality: true,
|
|
3269
3274
|
zIndexMode,
|
|
3270
3275
|
});
|
|
3276
|
+
const nextNodesSelectionActive = nodesSelectionActive && hasSelectedNodes;
|
|
3271
3277
|
if (fitViewQueued && nodesInitialized) {
|
|
3272
3278
|
resolveFitView();
|
|
3273
|
-
set({
|
|
3279
|
+
set({
|
|
3280
|
+
nodes,
|
|
3281
|
+
nodesInitialized,
|
|
3282
|
+
fitViewQueued: false,
|
|
3283
|
+
fitViewOptions: undefined,
|
|
3284
|
+
nodesSelectionActive: nextNodesSelectionActive
|
|
3285
|
+
});
|
|
3274
3286
|
}
|
|
3275
3287
|
else {
|
|
3276
|
-
set({ nodes, nodesInitialized });
|
|
3288
|
+
set({ nodes, nodesInitialized, nodesSelectionActive: nextNodesSelectionActive });
|
|
3277
3289
|
}
|
|
3278
3290
|
},
|
|
3279
3291
|
setEdges: (edges) => {
|
|
@@ -3294,7 +3306,7 @@ const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height,
|
|
|
3294
3306
|
}
|
|
3295
3307
|
},
|
|
3296
3308
|
/*
|
|
3297
|
-
* Every node gets
|
|
3309
|
+
* Every node gets registered at a ResizeObserver. Whenever a node
|
|
3298
3310
|
* changes its dimensions, this function is called to measure the
|
|
3299
3311
|
* new dimensions and update the nodes.
|
|
3300
3312
|
*/
|
|
@@ -3591,7 +3603,7 @@ function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTy
|
|
|
3591
3603
|
e.currentTarget.scrollTo({ top: 0, left: 0, behavior: 'instant' });
|
|
3592
3604
|
onScroll?.(e);
|
|
3593
3605
|
}, [onScroll]);
|
|
3594
|
-
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(
|
|
3606
|
+
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(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(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(SelectionListener, { onSelectionChange: onSelectionChange }), children, jsx(Attribution, { proOptions: proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId: rfId, disableKeyboardA11y: disableKeyboardA11y })] }) }));
|
|
3595
3607
|
}
|
|
3596
3608
|
/**
|
|
3597
3609
|
* The `<ReactFlow />` component is the heart of your React Flow application.
|
|
@@ -4102,7 +4114,7 @@ function useHandleConnections({ type, id, nodeId, onConnect, onDisconnect, }) {
|
|
|
4102
4114
|
const prevConnections = useRef(null);
|
|
4103
4115
|
const connections = useStore((state) => state.connectionLookup.get(`${currentNodeId}-${type}${id ? `-${id}` : ''}`), areConnectionMapsEqual);
|
|
4104
4116
|
useEffect(() => {
|
|
4105
|
-
// @todo
|
|
4117
|
+
// @todo discuss if onConnect/onDisconnect should be called when the component mounts/unmounts
|
|
4106
4118
|
if (prevConnections.current && prevConnections.current !== connections) {
|
|
4107
4119
|
const _connections = connections ?? new Map();
|
|
4108
4120
|
handleConnectionChange(prevConnections.current, _connections, onDisconnect);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/store/index.ts"],"names":[],"mappings":"AACA,OAAO,EAYL,UAAU,EACV,gBAAgB,EAIhB,UAAU,EACX,MAAM,gBAAgB,CAAC;AAIxB,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAA+B,cAAc,EAAE,MAAM,UAAU,CAAC;AAExG,QAAA,MAAM,WAAW,gJAcd;IACD,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/store/index.ts"],"names":[],"mappings":"AACA,OAAO,EAYL,UAAU,EACV,gBAAgB,EAIhB,UAAU,EACX,MAAM,gBAAgB,CAAC;AAIxB,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAA+B,cAAc,EAAE,MAAM,UAAU,CAAC;AAExG,QAAA,MAAM,WAAW,gJAcd;IACD,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,0GA8Yc,CAAC;AAEhB,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ComponentType } from 'react';
|
|
2
|
-
import { FitViewParamsBase, FitViewOptionsBase, ZoomInOut, ZoomTo, SetViewport, GetZoom, GetViewport, SetCenter, FitBounds, XYPosition, OnBeforeDeleteBase, Connection, NodeChange, EdgeChange } from '@xyflow/system';
|
|
2
|
+
import { FitViewParamsBase, FitViewOptionsBase, ZoomInOut, ZoomTo, SetViewport, GetZoom, GetViewport, SetCenter, FitBounds, XYPosition, OnBeforeDeleteBase, Connection, NodeChange, EdgeChange, SnapGrid } from '@xyflow/system';
|
|
3
3
|
import type { Node, Edge, ReactFlowInstance, EdgeProps, NodeProps } from '.';
|
|
4
4
|
/**
|
|
5
5
|
* This type can be used to type the `onNodesChange` function with a custom node type.
|
|
@@ -156,7 +156,8 @@ export type ViewportHelperFunctions = {
|
|
|
156
156
|
* const flowPosition = screenToFlowPosition({ x: event.clientX, y: event.clientY })
|
|
157
157
|
*/
|
|
158
158
|
screenToFlowPosition: (clientPosition: XYPosition, options?: {
|
|
159
|
-
snapToGrid
|
|
159
|
+
snapToGrid?: boolean;
|
|
160
|
+
snapGrid?: SnapGrid;
|
|
160
161
|
}) => XYPosition;
|
|
161
162
|
/**
|
|
162
163
|
* Translate a position inside the flow's canvas to a screen pixel position.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"general.d.ts","sourceRoot":"","sources":["../../src/types/general.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EACL,iBAAiB,EACjB,kBAAkB,EAClB,SAAS,EACT,MAAM,EACN,WAAW,EACX,OAAO,EACP,WAAW,EACX,SAAS,EACT,SAAS,EACT,UAAU,EACV,kBAAkB,EAClB,UAAU,EACV,UAAU,EACV,UAAU,
|
|
1
|
+
{"version":3,"file":"general.d.ts","sourceRoot":"","sources":["../../src/types/general.ts"],"names":[],"mappings":"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"}
|
|
@@ -58,7 +58,7 @@ export type NodeWrapperProps<NodeType extends Node> = {
|
|
|
58
58
|
};
|
|
59
59
|
/**
|
|
60
60
|
* The `BuiltInNode` type represents the built-in node types that are available in React Flow.
|
|
61
|
-
* You can use this type to extend your custom node type if you still want
|
|
61
|
+
* You can use this type to extend your custom node type if you still want to use the built-in ones.
|
|
62
62
|
*
|
|
63
63
|
* @public
|
|
64
64
|
* @example
|
|
@@ -69,7 +69,7 @@ export type NodeWrapperProps<NodeType extends Node> = {
|
|
|
69
69
|
*/
|
|
70
70
|
export type BuiltInNode = Node<{
|
|
71
71
|
label: string;
|
|
72
|
-
}, 'input' | 'output' | 'default'> | Node<Record<string, never>, 'group'>;
|
|
72
|
+
}, 'input' | 'output' | 'default' | undefined> | Node<Record<string, never>, 'group'>;
|
|
73
73
|
/**
|
|
74
74
|
* When you implement a [custom node](/learn/customization/custom-nodes) it is
|
|
75
75
|
* wrapped in a component that enables basic functionality like selection and
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nodes.d.ts","sourceRoot":"","sources":["../../src/types/nodes.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"nodes.d.ts","sourceRoot":"","sources":["../../src/types/nodes.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StoreUpdater/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StoreUpdater/index.tsx"],"names":[],"mappings":"AAWA,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,QA8D7C"}
|