jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ensure hover state of visualiser doesnt go off when modal open

Browse Source 
Summary: I was experiencing some odd behaviour and locks ups from deep within Ant d. It seems to be related to the fact that tooltips for the visualiser were showing up when there was a modal on top.

Reviewed By: lblasa

Differential Revision: D47519848

fbshipit-source-id: d67edaedba2910069ba1eb424548de55c2badff3
This commit is contained in:
Luke De Feo
2023-07-19 08:58:20 -07:00
committed by Facebook GitHub Bot
parent a6bc8933cc
commit b17c1be12f
1 changed files with 10 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
View File

@@ -46,6 +46,9 @@ export const Visualization2D: React.FC<
return rootNode && caclulateFocusState(rootNode, focusedNodeId); return rootNode && caclulateFocusState(rootNode, focusedNodeId);
}, [snapshot, nodes, focusedNodeId]); }, [snapshot, nodes, focusedNodeId]);
//this ref is to ensure the mouse has entered the visualiser, otherwise when you have overlapping modals
//the hover state / tooltips all fire
const mouseInVisualiserRef = useRef(false);
useEffect(() => { useEffect(() => {
const mouseListener = throttle((ev: MouseEvent) => { const mouseListener = throttle((ev: MouseEvent) => {
const domRect = rootNodeRef.current?.getBoundingClientRect(); const domRect = rootNodeRef.current?.getBoundingClientRect();
@@ -54,7 +57,8 @@ export const Visualization2D: React.FC<
!focusState || !focusState ||
!domRect || !domRect ||
instance.uiState.isContextMenuOpen.get() || instance.uiState.isContextMenuOpen.get() ||
!snapshotNode !snapshotNode ||
!mouseInVisualiserRef.current
) { ) {
return; return;
} }
@@ -114,6 +118,11 @@ export const Visualization2D: React.FC<
if (!instance.uiState.isContextMenuOpen.get()) { if (!instance.uiState.isContextMenuOpen.get()) {
instance.uiState.hoveredNodes.set([]); instance.uiState.hoveredNodes.set([]);
} }
mouseInVisualiserRef.current = false;
}}
onMouseEnter={() => {
mouseInVisualiserRef.current = true;
}} }}
//this div is to ensure that the size of the visualiser doesnt change when focusings on a subtree //this div is to ensure that the size of the visualiser doesnt change when focusings on a subtree
style={ style={