From 32fe3948d957f238b6c16744313bbbb817fe3737 Mon Sep 17 00:00:00 2001 From: Luke De Feo Date: Thu, 24 Nov 2022 09:23:16 -0800 Subject: [PATCH] Fix issue with visualizer hovering offscreen nodes Summary: If a node has a global negative offset (e.g from a view pager) its position will be outside of the visualizors bounds and could potentially be where the tree is. The user doesnt see the wireframes since overflow hidden is on the parent node. A situation can arise where when the mouse is over the tree the hit test returns an offscreen node and causes us to hover a random node rather than the tree node hover effect taking place. We are just adding a guard to say if the mouse is outside the dom rect for the root visualization node than dont run the hit test Reviewed By: lblasa Differential Revision: D41493001 fbshipit-source-id: ea7974de7f2b80126d52490526a21e2a3b487d3d --- .../public/ui-debugger/components/Visualization2D.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx b/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx index c630a617c..e7e942d12 100644 --- a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx +++ b/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx @@ -40,12 +40,15 @@ export const Visualization2D: React.FC< if (!focusState || !domRect) { return; } + const rawMouse = {x: ev.clientX, y: ev.clientY}; + + if (!boundsContainsCoordinate(domRect, rawMouse)) { + return; + } //make the mouse coord relative to the dom rect of the visualizer - const offsetMouse = offsetCoordinate( - {x: ev.clientX, y: ev.clientY}, - domRect, - ); + + const offsetMouse = offsetCoordinate(rawMouse, domRect); const scaledMouse = { x: offsetMouse.x * pxScaleFactor, y: offsetMouse.y * pxScaleFactor,