From 7da669bcc4a1920d5eb73d4e3cc24293eea890d7 Mon Sep 17 00:00:00 2001 From: Dmitry Gozman Date: Thu, 5 Aug 2021 14:59:45 -0700 Subject: [PATCH] fix(trace viewer): split view resizer should work (#8021) --- src/web/components/splitView.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/web/components/splitView.tsx b/src/web/components/splitView.tsx index a976d152c7..14ef771599 100644 --- a/src/web/components/splitView.tsx +++ b/src/web/components/splitView.tsx @@ -24,7 +24,7 @@ export interface SplitViewProps { orientation?: 'vertical' | 'horizontal', } -const kMinSidebarSize = 50; +const kMinSize = 50; export const SplitView: React.FC = ({ sidebarSize, @@ -33,7 +33,7 @@ export const SplitView: React.FC = ({ orientation = 'vertical', children }) => { - const [size, setSize] = React.useState(Math.max(kMinSidebarSize, sidebarSize)); + const [size, setSize] = React.useState(Math.max(kMinSize, sidebarSize)); const [resizing, setResizing] = React.useState<{ offset: number, size: number } | null>(null); const childrenArray = React.Children.toArray(children); @@ -63,11 +63,13 @@ export const SplitView: React.FC = ({ if (!event.buttons) { setResizing(null); } else if (resizing) { + const offset = orientation === 'vertical' ? event.clientY : event.clientX; + const delta = offset - resizing.offset; + const newSize = sidebarIsFirst ? resizing.size + delta : resizing.size - delta; + const splitView = (event.target as HTMLElement).parentElement!; const rect = splitView.getBoundingClientRect(); - const clientOffset = orientation === 'vertical' ? event.clientY - rect.y : event.clientX - rect.x; - const resizingPosition = sidebarIsFirst ? clientOffset : resizing.size - clientOffset + resizing.offset; - const size = Math.min(Math.max(kMinSidebarSize, resizingPosition), (orientation === 'vertical' ? rect.height : rect.width) - kMinSidebarSize); + const size = Math.min(Math.max(kMinSize, newSize), (orientation === 'vertical' ? rect.height : rect.width) - kMinSize); setSize(size); } }}