diff --git a/example/src/CustomNode/index.js b/example/src/CustomNode/index.js index 6716a9e3..3a2e77c1 100644 --- a/example/src/CustomNode/index.js +++ b/example/src/CustomNode/index.js @@ -65,8 +65,6 @@ const CustomNodeFlow = () => { const onConnect = (params) => setElements((els) => addEdge({ ...params, animated: true, style: { stroke: '#fff' } }, els)); - console.log('example', elements); - return ( ) => { useEffect(() => { if (nodeElement.current && !isHidden) { - updateNodeDimensions({ id, nodeElement: nodeElement.current }); + updateNodeDimensions([{ id, nodeElement: nodeElement.current }]); } }, [id, isHidden, sourcePosition, targetPosition]); diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx index 6173ad00..8b22d32b 100644 --- a/src/container/NodeRenderer/index.tsx +++ b/src/container/NodeRenderer/index.tsx @@ -28,7 +28,7 @@ const NodeRenderer = (props: NodeRendererProps) => { const width = useStoreState((state) => state.width); const height = useStoreState((state) => state.height); const nodes = useStoreState((state) => state.nodes); - const batchUpdateNodeDimensions = useStoreActions((actions) => actions.batchUpdateNodeDimensions); + const updateNodeDimensions = useStoreActions((actions) => actions.updateNodeDimensions); const viewportBox = useMemo(() => ({ x: 0, y: 0, width, height }), [width, height]); const visibleNodes = props.onlyRenderVisibleElements ? getNodesInside(nodes, viewportBox, transform, true) : nodes; @@ -51,7 +51,7 @@ const NodeRenderer = (props: NodeRendererProps) => { nodeElement: entry.target as HTMLDivElement, })); - batchUpdateNodeDimensions(updates); + updateNodeDimensions(updates); }); }, []); diff --git a/src/store/actions.ts b/src/store/actions.ts index 5cb3a9ca..2297d4bf 100644 --- a/src/store/actions.ts +++ b/src/store/actions.ts @@ -44,11 +44,8 @@ export const setOnConnectEnd = (onConnectEnd: OnConnectEndFunc) => export const setElements = (elements: Elements) => createAction(constants.SET_ELEMENTS, elements); -export const batchUpdateNodeDimensions = (updates: NodeDimensionUpdate[]) => - createAction(constants.BATCH_UPDATE_NODE_DIMENSIONS, updates); - -export const updateNodeDimensions = (payload: NodeDimensionUpdate) => - createAction(constants.UPDATE_NODE_DIMENSIONS, payload); +export const updateNodeDimensions = (updates: NodeDimensionUpdate[]) => + createAction(constants.UPDATE_NODE_DIMENSIONS, updates); export const updateNodePos = (payload: NodePosUpdate) => createAction(constants.UPDATE_NODE_POS, payload); @@ -135,7 +132,6 @@ export type ReactFlowAction = ReturnType< | typeof setOnConnectStop | typeof setOnConnectEnd | typeof setElements - | typeof batchUpdateNodeDimensions | typeof updateNodeDimensions | typeof updateNodePos | typeof updateNodePosDiff diff --git a/src/store/contants.ts b/src/store/contants.ts index b20c0621..389432df 100644 --- a/src/store/contants.ts +++ b/src/store/contants.ts @@ -3,7 +3,6 @@ export const SET_ON_CONNECT_START = 'SET_ON_CONNECT_START'; export const SET_ON_CONNECT_STOP = 'SET_ON_CONNECT_STOP'; export const SET_ON_CONNECT_END = 'SET_ON_CONNECT_END'; export const SET_ELEMENTS = 'SET_ELEMENTS'; -export const BATCH_UPDATE_NODE_DIMENSIONS = 'BATCH_UPDATE_NODE_DIMENSIONS'; export const UPDATE_NODE_DIMENSIONS = 'UPDATE_NODE_DIMENSIONS'; export const UPDATE_NODE_POS = 'UPDATE_NODE_POS'; export const UPDATE_NODE_POS_DIFF = 'UPDATE_NODE_POS_DIFF'; diff --git a/src/store/reducer.ts b/src/store/reducer.ts index bc60d45c..a8a44742 100644 --- a/src/store/reducer.ts +++ b/src/store/reducer.ts @@ -87,7 +87,7 @@ export default function reactFlowReducer(state = initialState, action: ReactFlow return { ...state, nodes: nextNodes, edges: nextEdges }; } - case constants.BATCH_UPDATE_NODE_DIMENSIONS: { + case constants.UPDATE_NODE_DIMENSIONS: { const updatedNodes = state.nodes.map((node) => { const update = action.payload.find((u) => u.id === node.id); if (update) { @@ -119,34 +119,6 @@ export default function reactFlowReducer(state = initialState, action: ReactFlow nodes: updatedNodes, }; } - case constants.UPDATE_NODE_DIMENSIONS: { - const { nodeElement, id } = action.payload; - const dimensions = getDimensions(nodeElement); - - if (!dimensions.width || !dimensions.height) { - return state; - } - - const nextNodes = state.nodes.map((node) => { - if (node.id === id) { - const handleBounds = getHandleBounds(nodeElement, state.transform[2]); - - return { - ...node, - __rf: { - ...node.__rf, - width: dimensions.width, - height: dimensions.height, - handleBounds, - }, - }; - } - - return node; - }); - - return { ...state, nodes: nextNodes }; - } case constants.UPDATE_NODE_POS: { const { id, pos } = action.payload;