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

Improve selection in vizualizer

Browse Source 
Summary:
Clicking on a node a second time will unselect which was impossible before.

The behaviour of the on click handler doesnt always line up what is currently hovered, this is a temporary work around. There are deeper issues with this in that on exit we hover the parent, but in some situations the parent is too small to propagate. In future we will use the mouse position and do a hit test and drive selection / hover from that

Reviewed By: lblasa

Differential Revision: D40637356

fbshipit-source-id: 9df19dbf619845891bb46624730d7cf74f73cf25
This commit is contained in:
Luke De Feo
2022-10-25 07:10:38 -07:00
committed by Facebook GitHub Bot
parent b1bee28f08
commit 0c52ad307e
1 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,7 +19,7 @@ export const Visualization2D: React.FC<
snapshots: Map<Id, Snapshot>; snapshots: Map<Id, Snapshot>;
hoveredNode?: Id; hoveredNode?: Id;
selectedNode?: Id; selectedNode?: Id;
onSelectNode: (id: Id) => void; onSelectNode: (id?: Id) => void;
onHoverNode: (id?: Id) => void; onHoverNode: (id?: Id) => void;
modifierPressed: boolean; modifierPressed: boolean;
} & React.HTMLAttributes<HTMLDivElement> } & React.HTMLAttributes<HTMLDivElement>
@@ -102,7 +102,7 @@ function Visualization2DNode({
modifierPressed: boolean; modifierPressed: boolean;
hoveredNode?: Id; hoveredNode?: Id;
selectedNode?: Id; selectedNode?: Id;
onSelectNode: (id: Id) => void; onSelectNode: (id?: Id) => void;
onHoverNode: (id?: Id) => void; onHoverNode: (id?: Id) => void;
}) { }) {
const node = nodes.get(nodeId); const node = nodes.get(nodeId);
@@ -124,6 +124,7 @@ function Visualization2DNode({
} else { } else {
childrenIds = node.children; childrenIds = node.children;
} }
// stop drawing children if hovered with the modifier so you // stop drawing children if hovered with the modifier so you
// can see parent views without their children getting in the way // can see parent views without their children getting in the way
if (isHovered && modifierPressed) { if (isHovered && modifierPressed) {
@@ -175,7 +176,13 @@ function Visualization2DNode({
}} }}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
onSelectNode(nodeId);
if (hoveredNode === selectedNode) {
onSelectNode(undefined);
} else {
//the way click is resolved doesn't always match what is hovered, this is a way to ensure what is hovered is selected
onSelectNode(hoveredNode);
}
}}> }}>
<NodeBorder tags={node.tags}></NodeBorder> <NodeBorder tags={node.tags}></NodeBorder>
{snapshot && ( {snapshot && (