refactor(useUpdateNodeInternals): only call updateNodeDimensions once

This commit is contained in:
moklick
2023-05-17 11:00:18 +02:00
parent 8797e4da12
commit 1a3f22557c
2 changed files with 11 additions and 10 deletions
@@ -23,7 +23,7 @@ const CustomNode: FC<NodeProps> = ({ id }) => {
<button <button
onClick={() => { onClick={() => {
setHandleCount((c) => c + 1); setHandleCount((c) => c + 1);
updateNodeInternals(id); updateNodeInternals([id]);
}} }}
> >
add handle add handle
@@ -1,7 +1,7 @@
import { useCallback } from 'react'; import { useCallback } from 'react';
import { useStoreApi } from '../hooks/useStore'; import { useStoreApi } from '../hooks/useStore';
import type { UpdateNodeInternals } from '../types'; import type { NodeDimensionUpdate, UpdateNodeInternals } from '../types';
function useUpdateNodeInternals(): UpdateNodeInternals { function useUpdateNodeInternals(): UpdateNodeInternals {
const store = useStoreApi(); const store = useStoreApi();
@@ -10,16 +10,17 @@ function useUpdateNodeInternals(): UpdateNodeInternals {
const { domNode, updateNodeDimensions } = store.getState(); const { domNode, updateNodeDimensions } = store.getState();
const updateIds = Array.isArray(id) ? id : [id]; const updateIds = Array.isArray(id) ? id : [id];
const updates = updateIds.reduce<NodeDimensionUpdate[]>((res, updateId) => {
const nodeElement = domNode?.querySelector(`.react-flow__node[data-id="${updateId}"]`) as HTMLDivElement;
requestAnimationFrame(() => { if (nodeElement) {
updateIds.forEach((updateId) => { res.push({ id: updateId, nodeElement, forceUpdate: true });
const nodeElement = domNode?.querySelector(`.react-flow__node[data-id="${updateId}"]`) as HTMLDivElement; }
if (nodeElement) { return res;
updateNodeDimensions([{ id: updateId, nodeElement, forceUpdate: true }]); }, []);
}
}); requestAnimationFrame(() => updateNodeDimensions(updates));
});
}, []); }, []);
} }