diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js b/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js index 970371414a1dd..54a3b05c1a9cf 100644 --- a/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js +++ b/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js @@ -45,6 +45,11 @@ const RESIZE_BAR_DOT_SPACING = 4; const RESIZE_BAR_HEIGHT = 8; const RESIZE_BAR_WITH_LABEL_HEIGHT = 16; +const HIDDEN_RECT = { + origin: {x: 0, y: 0}, + size: {width: 0, height: 0}, +}; + class ResizeBar extends View { _interactionState: ResizeBarState = 'normal'; _label: string; @@ -238,8 +243,6 @@ export class ResizableView extends View { this.addSubview(this._subview); this.addSubview(this._resizeBar); - // TODO (ResizableView) Allow subviews to specify default sizes. - // Maybe that or set some % based default so all panels are visible to begin with. const subviewDesiredSize = subview.desiredSize(); this._updateLayoutStateAndResizeBar( subviewDesiredSize.maxInitialHeight != null @@ -253,14 +256,9 @@ export class ResizableView extends View { desiredSize() { const resizeBarDesiredSize = this._resizeBar.desiredSize(); - const subviewDesiredSize = this._subview.desiredSize(); - - const subviewDesiredWidth = subviewDesiredSize - ? subviewDesiredSize.width - : 0; return { - width: Math.max(subviewDesiredWidth, resizeBarDesiredSize.width), + width: this.frame.size.width, height: this._layoutState.barOffsetY + resizeBarDesiredSize.height, }; } @@ -315,19 +313,19 @@ export class ResizableView extends View { const resizeBarDesiredSize = this._resizeBar.desiredSize(); - let currentY = y; - - this._subview.setFrame({ - origin: {x, y: currentY}, - size: {width, height: barOffsetY}, - }); - currentY += this._subview.frame.size.height; + if (barOffsetY === 0) { + this._subview.setFrame(HIDDEN_RECT); + } else { + this._subview.setFrame({ + origin: {x, y}, + size: {width, height: barOffsetY}, + }); + } this._resizeBar.setFrame({ - origin: {x, y: currentY}, + origin: {x, y: y + barOffsetY}, size: {width, height: resizeBarDesiredSize.height}, }); - currentY += this._resizeBar.frame.size.height; } _handleClick(interaction: ClickInteraction) { @@ -388,8 +386,6 @@ export class ResizableView extends View { } } - _didGrab: boolean = false; - getCursorActiveSubView(interaction: Interaction): View | null { const cursorLocation = interaction.payload.location; const resizeBarFrame = this._resizeBar.frame; diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/View.js b/packages/react-devtools-scheduling-profiler/src/view-base/View.js index bd0cd64b03739..a43a733fd4762 100644 --- a/packages/react-devtools-scheduling-profiler/src/view-base/View.js +++ b/packages/react-devtools-scheduling-profiler/src/view-base/View.js @@ -271,9 +271,18 @@ export class View { interaction: Interaction, viewRefs: ViewRefs, ) { + const {subviews, visibleArea} = this; + + if (visibleArea.size.height === 0) { + return; + } + this.handleInteraction(interaction, viewRefs); - this.subviews.forEach(subview => - subview.handleInteractionAndPropagateToSubviews(interaction, viewRefs), - ); + + subviews.forEach(subview => { + if (rectIntersectsRect(visibleArea, subview.visibleArea)) { + subview.handleInteractionAndPropagateToSubviews(interaction, viewRefs); + } + }); } } diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/geometry.js b/packages/react-devtools-scheduling-profiler/src/view-base/geometry.js index df15c934738f1..0c2de40109501 100644 --- a/packages/react-devtools-scheduling-profiler/src/view-base/geometry.js +++ b/packages/react-devtools-scheduling-profiler/src/view-base/geometry.js @@ -74,6 +74,15 @@ function boxToRect(box: Box): Rect { } export function rectIntersectsRect(rect1: Rect, rect2: Rect): boolean { + if ( + rect1.width === 0 || + rect1.height === 0 || + rect2.width === 0 || + rect2.height === 0 + ) { + return false; + } + const [top1, right1, bottom1, left1] = rectToBox(rect1); const [top2, right2, bottom2, left2] = rectToBox(rect2); return !( diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/layouter.js b/packages/react-devtools-scheduling-profiler/src/view-base/layouter.js index 2cad9659be066..58adb026c2907 100644 --- a/packages/react-devtools-scheduling-profiler/src/view-base/layouter.js +++ b/packages/react-devtools-scheduling-profiler/src/view-base/layouter.js @@ -51,8 +51,9 @@ export const noopLayout: Layouter = layout => layout; * - `containerWidthLayout`, and * - `containerHeightLayout`. */ -export const layeredLayout: Layouter = (layout, containerFrame) => - layout.map(layoutInfo => ({...layoutInfo, frame: containerFrame})); +export const layeredLayout: Layouter = (layout, containerFrame) => { + return layout.map(layoutInfo => ({...layoutInfo, frame: containerFrame})); +}; /** * Stacks `views` vertically in `frame`.