67ff09563c
Summary: Improved the 2 way relationship between tree and vizualiser. There are 3 states. 1. Select, this is when you click on either tree node or view. View is highlighted darker colour, sidebar shows up for that node and select is persisted when you mouse away 2. Hover, this is when you hover over a tree node or in the vizualizer, the node is highlighted a lighter colur 3. Hover while holding control - same as hover but we dont draw any children, this lets you see how parent nodes appear without their children Reviewed By: lblasa Differential Revision: D39695661 fbshipit-source-id: 623e479fb03567e9f15a4a4f9201b2c7884cabe4
30 lines
766 B
TypeScript
30 lines
766 B
TypeScript
/**
|
|
* 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;
|
|
}
|