Prevent hidden views from triggering cursor/tooltip interactions

Author: Brian Vaughn

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;

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);
+      }
+    });
   }
 }

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 !(

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`.