Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-04 18:59:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix nodeRefs dependency, since map is not a reliable dependency (#31)

Browse Source
This commit is contained in:
Evan Simkowitz 2024-06-10 15:16:29 -07:00 committed by GitHub
parent 4f878eb681
commit 45a9a95e38
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/faraday/lib/TileLayout.tsx
View File

@ -45,6 +45,7 @@ export const TileLayout = <T,>({ layoutTreeStateAtom, className, renderContent,
const [layoutTreeState, dispatch] = useLayoutTreeStateReducerAtom(layoutTreeStateAtom); const [layoutTreeState, dispatch] = useLayoutTreeStateReducerAtom(layoutTreeStateAtom);
const [nodeRefs, setNodeRefs] = useState<Map<string, RefObject<HTMLDivElement>>>(new Map()); const [nodeRefs, setNodeRefs] = useState<Map<string, RefObject<HTMLDivElement>>>(new Map());
const [nodeRefsGen, setNodeRefsGen] = useState<number>(0);
useEffect(() => { useEffect(() => {
console.log("layoutTreeState changed", layoutTreeState); console.log("layoutTreeState changed", layoutTreeState);
@ -56,6 +57,7 @@ export const TileLayout = <T,>({ layoutTreeStateAtom, className, renderContent,
prev.set(id, ref); prev.set(id, ref);
return prev; return prev;
}); });
setNodeRefsGen((prev) => prev + 1);
}, },
[setNodeRefs] [setNodeRefs]
); );
@ -67,6 +69,7 @@ export const TileLayout = <T,>({ layoutTreeStateAtom, className, renderContent,
prev.delete(id); prev.delete(id);
return prev; return prev;
}); });
setNodeRefsGen((prev) => prev + 1);
} else { } else {
console.log("deleteRef id not found", id); console.log("deleteRef id not found", id);
} }
@ -133,13 +136,13 @@ export const TileLayout = <T,>({ layoutTreeStateAtom, className, renderContent,
); );
} }
}, 30), }, 30),
[activeDrag, overlayContainerRef, displayContainerRef, layoutTreeState.leafs, nodeRefs] [activeDrag, overlayContainerRef, displayContainerRef, layoutTreeState.leafs, nodeRefsGen]
); );
// Update the transforms whenever we drag something and whenever the layout updates. // Update the transforms whenever we drag something and whenever the layout updates.
useLayoutEffect(() => { useLayoutEffect(() => {
updateTransforms(); updateTransforms();
}, [activeDrag, layoutTreeState, updateTransforms]); }, [updateTransforms]);
useResizeObserver(overlayContainerRef, () => updateTransforms()); useResizeObserver(overlayContainerRef, () => updateTransforms());