yujunjun/playwright
1
0
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-06-26 21:40:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(trace viewer): split view resizer should work (#8021)

Browse Source
This commit is contained in:
Dmitry Gozman 2021-08-05 14:59:45 -07:00 committed by GitHub
parent a8d404cd29
commit 7da669bcc4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/web/components/splitView.tsx
View File

@ -24,7 +24,7 @@ export interface SplitViewProps {
orientation?: 'vertical' | 'horizontal', orientation?: 'vertical' | 'horizontal',
} }
const kMinSidebarSize = 50; const kMinSize = 50;
export const SplitView: React.FC<SplitViewProps> = ({ export const SplitView: React.FC<SplitViewProps> = ({
sidebarSize, sidebarSize,
@ -33,7 +33,7 @@ export const SplitView: React.FC<SplitViewProps> = ({
orientation = 'vertical', orientation = 'vertical',
children children
}) => { }) => {
const [size, setSize] = React.useState<number>(Math.max(kMinSidebarSize, sidebarSize)); const [size, setSize] = React.useState<number>(Math.max(kMinSize, sidebarSize));
const [resizing, setResizing] = React.useState<{ offset: number, size: number } | null>(null); const [resizing, setResizing] = React.useState<{ offset: number, size: number } | null>(null);
const childrenArray = React.Children.toArray(children); const childrenArray = React.Children.toArray(children);
@ -63,11 +63,13 @@ export const SplitView: React.FC<SplitViewProps> = ({
if (!event.buttons) { if (!event.buttons) {
setResizing(null); setResizing(null);
} else if (resizing) { } 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 splitView = (event.target as HTMLElement).parentElement!;
const rect = splitView.getBoundingClientRect(); const rect = splitView.getBoundingClientRect();
const clientOffset = orientation === 'vertical' ? event.clientY - rect.y : event.clientX - rect.x; const size = Math.min(Math.max(kMinSize, newSize), (orientation === 'vertical' ? rect.height : rect.width) - kMinSize);
const resizingPosition = sidebarIsFirst ? clientOffset : resizing.size - clientOffset + resizing.offset;
const size = Math.min(Math.max(kMinSidebarSize, resizingPosition), (orientation === 'vertical' ? rect.height : rect.width) - kMinSidebarSize);
setSize(size); setSize(size);
} }
}} }}