Add wireframe mode control

Summary:
This allows you to control how the wire frames are drawn, useful when there are lots of overalpping wireframes

Changelog: UIDebugger - Added wireframe mode control, useful when lots of overlapping wireframes

Reviewed By: aigoncharov

Differential Revision: D47949841

fbshipit-source-id: 72de7d085ca433557107ab0cc6e4399220836d9f

desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx

@@ -9,7 +9,7 @@
 
 import React, {useEffect, useMemo, useRef, useState} from 'react';
 import {Bounds, Coordinate, Id, ClientNode} from '../../ClientTypes';
-import {NestedNode, OnSelectNode} from '../../DesktopTypes';
+import {NestedNode, OnSelectNode, WireFrameMode} from '../../DesktopTypes';
 
 import {
   produce,
@@ -42,6 +42,7 @@ export const Visualization2D: React.FC<
   const selectedNodeId = useValue(instance.uiState.selectedNode);
   const hoveredNodes = useValue(instance.uiState.hoveredNodes);
   const hoveredNodeId = head(hoveredNodes);
+  const wireFrameMode = useValue(instance.uiState.wireFrameMode);
 
   const [targetMode, setTargetMode] = useState<TargetModeState>({
     state: 'disabled',
@@ -141,6 +142,8 @@ export const Visualization2D: React.FC<
   return (
     <Layout.Container>
       <VisualiserControls
+        onSetWireFrameMode={instance.uiActions.onSetWireFrameMode}
+        wireFrameMode={wireFrameMode}
         focusedNode={focusedNodeId}
         selectedNode={selectedNodeId?.id}
         setTargetMode={setTargetMode}
@@ -226,6 +229,9 @@ export const Visualization2D: React.FC<
             />
           )}
           <MemoedVisualizationNode2D
+            wireframeMode={wireFrameMode}
+            isSelectedOrChildOrSelected={false}
+            selectedNode={selectedNodeId?.id}
             node={focusState.focusedRoot}
             onSelectNode={onSelectNode}
           />
@@ -238,19 +244,30 @@ export const Visualization2D: React.FC<
 const MemoedVisualizationNode2D = React.memo(
   Visualization2DNode,
   (prev, next) => {
-    return prev.node === next.node;
+    return (
+      prev.node === next.node &&
+      prev.selectedNode === next.selectedNode &&
+      prev.wireframeMode === next.wireframeMode
+    );
   },
 );
 
 function Visualization2DNode({
+  wireframeMode,
+  isSelectedOrChildOrSelected,
+  selectedNode,
   node,
   onSelectNode,
 }: {
+  wireframeMode: WireFrameMode;
+  isSelectedOrChildOrSelected: boolean;
+  selectedNode?: Id;
   node: NestedNode;
   onSelectNode: OnSelectNode;
 }) {
   const instance = usePlugin(plugin);
 
+  const isSelected = node.id === selectedNode;
   const ref = useRef<HTMLDivElement>(null);
   let nestedChildren: NestedNode[];
 
@@ -268,6 +285,9 @@ function Visualization2DNode({
 
   const children = nestedChildren.map((child) => (
     <MemoedVisualizationNode2D
+      wireframeMode={wireframeMode}
+      selectedNode={selectedNode}
+      isSelectedOrChildOrSelected={isSelected || isSelectedOrChildOrSelected}
       key={child.id}
       node={child}
       onSelectNode={onSelectNode}
@@ -278,6 +298,11 @@ function Visualization2DNode({
     node.id,
   );
 
+  const showBorder =
+    wireframeMode === 'All' ||
+    (wireframeMode === 'SelectedAndChildren' && isSelectedOrChildOrSelected) ||
+    (wireframeMode === 'SelectedOnly' && isSelected);
+
   return (
     <div
       role="button"
@@ -293,7 +318,7 @@ function Visualization2DNode({
         opacity: isHighlighted ? 0.3 : 1,
         backgroundColor: isHighlighted ? 'red' : 'transparent',
       }}>
-      <NodeBorder />
+      {showBorder && <NodeBorder />}
 
       {children}
     </div>