diff --git a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx b/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx index 9bfb4c2d5..9d95a741b 100644 --- a/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx +++ b/desktop/plugins/public/ui-debugger/components/Visualization2D.tsx @@ -22,9 +22,8 @@ export const Visualization2D: React.FC< width: number; nodes: Map; onSelectNode: (id?: Id) => void; - modifierPressed: boolean; } & React.HTMLAttributes -> = ({width, nodes, onSelectNode, modifierPressed}) => { +> = ({width, nodes, onSelectNode}) => { const rootNodeRef = useRef(); const instance = usePlugin(plugin); @@ -148,7 +147,6 @@ export const Visualization2D: React.FC< @@ -159,19 +157,15 @@ export const Visualization2D: React.FC< const MemoedVisualizationNode2D = React.memo( Visualization2DNode, (prev, next) => { - return ( - prev.node === next.node && prev.modifierPressed === next.modifierPressed - ); + return prev.node === next.node; }, ); function Visualization2DNode({ node, onSelectNode, - modifierPressed, }: { node: NestedNode; - modifierPressed: boolean; onSelectNode: (id?: Id) => void; }) { const instance = usePlugin(plugin); @@ -200,18 +194,11 @@ function Visualization2DNode({ nestedChildren = node.children; } - // stop drawing children if hovered with the modifier so you - // can see parent views without their children getting in the way - if (isHovered && modifierPressed) { - nestedChildren = []; - } - const children = nestedChildren.map((child) => ( )); diff --git a/desktop/plugins/public/ui-debugger/components/main.tsx b/desktop/plugins/public/ui-debugger/components/main.tsx index 35509c646..ae0c75a0d 100644 --- a/desktop/plugins/public/ui-debugger/components/main.tsx +++ b/desktop/plugins/public/ui-debugger/components/main.tsx @@ -21,7 +21,6 @@ import {useHotkeys} from 'react-hotkeys-hook'; import {Id, Metadata, MetadataId, UINode} from '../types'; import {PerfStats} from './PerfStats'; import {Visualization2D} from './Visualization2D'; -import {useKeyboardModifiers} from '../hooks/useKeyboardModifiers'; import {Inspector} from './sidebar/Inspector'; import {Controls} from './Controls'; import {Button, Spin} from 'antd'; @@ -41,8 +40,6 @@ export function Component() { useHotkeys('ctrl+i', () => setShowPerfStats((show) => !show)); - const {ctrlPressed} = useKeyboardModifiers(); - const [bottomPanelComponent, setBottomPanelComponent] = useState< ReactNode | undefined >(); @@ -104,7 +101,6 @@ export function Component() { width={visualiserWidth} nodes={nodes} onSelectNode={instance.uiActions.onSelectNode} - modifierPressed={ctrlPressed} /> diff --git a/desktop/plugins/public/ui-debugger/hooks/useKeyboardModifiers.tsx b/desktop/plugins/public/ui-debugger/hooks/useKeyboardModifiers.tsx deleted file mode 100644 index cfbbdcdf9..000000000 --- a/desktop/plugins/public/ui-debugger/hooks/useKeyboardModifiers.tsx +++ /dev/null @@ -1,29 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - */ - -import {useEffect, useState} from 'react'; - -export function useKeyboardModifiers() { - const [state, setState] = useState({altPressed: false, ctrlPressed: false}); - - function handler(event: KeyboardEvent) { - setState({altPressed: event.altKey, ctrlPressed: event.ctrlKey}); - } - - useEffect(() => { - window.addEventListener('keydown', handler); - window.addEventListener('keyup', handler); - return () => { - window.removeEventListener('keydown', handler); - window.removeEventListener('keyup', handler); - }; - }, []); - - return state; -}