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

Fix visualiser after virtualisation

Browse Source 
Summary: There was an issue with cropping introduce by virtualisation and the position of the scroll view in the hierachy. Its a bit fragile but it works now.

Reviewed By: lblasa

Differential Revision: D46761831

fbshipit-source-id: ce001c6f4fe7ddc111edf0098f75a1273c84472d
This commit is contained in:
Luke De Feo
2023-06-19 05:06:52 -07:00
committed by Facebook GitHub Bot
parent f72514f238
commit f9bbc967ea
3 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -111,6 +111,9 @@ export const Visualization2D: React.FC<
//this div is to ensure that the size of the visualiser doesnt change when focusings on a subtree //this div is to ensure that the size of the visualiser doesnt change when focusings on a subtree
style={ style={
{ {
overflowY: 'auto',
overflowX: 'hidden',
position: 'relative', //this is for the absolutely positioned overlays
[pxScaleFactorCssVar]: pxScaleFactor, [pxScaleFactorCssVar]: pxScaleFactor,
width: toPx(focusState.actualRoot.bounds.width), width: toPx(focusState.actualRoot.bounds.width),
height: toPx(focusState.actualRoot.bounds.height), height: toPx(focusState.actualRoot.bounds.height),

12
desktop/plugins/public/ui-debugger/components/main.tsx
View File

@@ -96,13 +96,11 @@ export function Component() {
instance.uiActions.setVisualiserWidth(width); instance.uiActions.setVisualiserWidth(width);
}} }}
gutter> gutter>
<Layout.ScrollContainer vertical> <Visualization2D
<Visualization2D width={visualiserWidth}
width={visualiserWidth} nodes={nodes}
nodes={nodes} onSelectNode={instance.uiActions.onSelectNode}
onSelectNode={instance.uiActions.onSelectNode} />
/>
</Layout.ScrollContainer>
</ResizablePanel> </ResizablePanel>
<DetailSidebar width={350}> <DetailSidebar width={350}>
<Inspector <Inspector

1
desktop/plugins/public/ui-debugger/index.tsx
View File

@@ -429,7 +429,6 @@ function uiActions(uiState: UIState, nodes: Atom<Map<Id, UINode>>): UIActions {
}; };
const setVisualiserWidth = (width: number) => { const setVisualiserWidth = (width: number) => {
console.log('w', width);
uiState.visualiserWidth.set(width); uiState.visualiserWidth.set(width);
}; };