[Improve base View][1/n] Add subview handling to View

Summary

This PR begins a stack of PRs that improves the base `View` class
implemented in #80.

This PR adds subview management to `View`, as there was a lot of
duplicated subview handling code present in almost all our `View`
subclasses. This also brings us closer to UIKit's `UIView`, which
also handles its own subviews.

Implements #95.

Test Plan

* `yarn start`: nothing broken
* `yarn lint`
* `yarn flow`: no errors in affected code
* `yarn test`

Author: taneliang

src/canvas/views/FlamechartView.js

@@ -244,7 +244,7 @@ class FlamechartStackLayerView extends View {
     onHover(null);
   }
 
-  handleInteractionAndPropagateToSubviews(interaction: Interaction) {
+  handleInteraction(interaction: Interaction) {
     switch (interaction.type) {
       case 'hover':
         this.handleHover(interaction);
@@ -295,7 +295,7 @@ export class FlamechartView extends View {
       colorView,
       this.verticalStackView,
     ]);
-    this.layerStackView.superview = this;
+    this.addSubview(this.layerStackView);
   }
 
   desiredSize() {
@@ -316,11 +316,6 @@ export class FlamechartView extends View {
     this.flamechartRowViews.forEach(rowView => (rowView.onHover = onHover));
   }
 
-  setNeedsDisplay() {
-    super.setNeedsDisplay();
-    this.layerStackView.setNeedsDisplay();
-  }
-
   layoutSubviews() {
     if (this.flamechartRowViews.length !== this.flamechart.length) {
       // TODO: Remove existing row views from verticalStackView
@@ -344,10 +339,6 @@ export class FlamechartView extends View {
     layerStackView.setVisibleArea(this.visibleArea);
   }
 
-  draw(context: CanvasRenderingContext2D) {
-    this.layerStackView.displayIfNeeded(context);
-  }
-
   /**
    * @private
    */
@@ -364,12 +355,11 @@ export class FlamechartView extends View {
     }
   }
 
-  handleInteractionAndPropagateToSubviews(interaction: Interaction) {
+  handleInteraction(interaction: Interaction) {
     switch (interaction.type) {
       case 'hover':
         this.handleHover(interaction);
         break;
     }
-    this.layerStackView.handleInteractionAndPropagateToSubviews(interaction);
   }
 }

src/canvas/views/ReactEventsView.js

@@ -236,7 +236,7 @@ export class ReactEventsView extends View {
     onHover(null);
   }
 
-  handleInteractionAndPropagateToSubviews(interaction: Interaction) {
+  handleInteraction(interaction: Interaction) {
     switch (interaction.type) {
       case 'hover':
         this.handleHover(interaction);

src/canvas/views/ReactMeasuresView.js

@@ -294,7 +294,7 @@ export class ReactMeasuresView extends View {
     onHover(null);
   }
 
-  handleInteractionAndPropagateToSubviews(interaction: Interaction) {
+  handleInteraction(interaction: Interaction) {
     switch (interaction.type) {
       case 'hover':
         this.handleHover(interaction);

src/layout/HorizontalPanAndZoomView.js

@@ -53,6 +53,10 @@ function zoomLevelAndIntrinsicWidthToFrameWidth(
 }
 
 export class HorizontalPanAndZoomView extends View {
+  /**
+   * Reference to the content view. This view is also the only view in
+   * `this.subviews`.
+   */
   contentView: View;
   intrinsicContentWidth: number;
 
@@ -79,17 +83,12 @@ export class HorizontalPanAndZoomView extends View {
   ) {
     super(surface, frame);
     this.contentView = contentView;
-    contentView.superview = this;
+    this.addSubview(this.contentView);
     this.intrinsicContentWidth = intrinsicContentWidth;
     if (stateDeriver) this.stateDeriver = stateDeriver;
     if (onStateChange) this.onStateChange = onStateChange;
   }
 
-  setNeedsDisplay() {
-    super.setNeedsDisplay();
-    this.contentView.setNeedsDisplay();
-  }
-
   setFrame(newFrame: Rect) {
     super.setFrame(newFrame);
 
@@ -116,10 +115,6 @@ export class HorizontalPanAndZoomView extends View {
     this.contentView.setVisibleArea(this.visibleArea);
   }
 
-  draw(context: CanvasRenderingContext2D) {
-    this.contentView.displayIfNeeded(context);
-  }
-
   isPanning = false;
 
   handleHorizontalPanStart(interaction: HorizontalPanStartInteraction) {
@@ -214,7 +209,7 @@ export class HorizontalPanAndZoomView extends View {
     this.updateState(offsetAdjustedState);
   }
 
-  handleInteractionAndPropagateToSubviews(interaction: Interaction) {
+  handleInteraction(interaction: Interaction) {
     switch (interaction.type) {
       case 'horizontal-pan-start':
         this.handleHorizontalPanStart(interaction);
@@ -234,7 +229,6 @@ export class HorizontalPanAndZoomView extends View {
         this.handleWheelZoom(interaction);
         break;
     }
-    this.contentView.handleInteractionAndPropagateToSubviews(interaction);
   }
 
   /**

src/layout/StaticLayoutView.js

@@ -1,6 +1,5 @@
 // @flow
 
-import type {Interaction} from '../useCanvasInteraction';
 import type {Rect} from './geometry';
 
 import {Surface} from './Surface';
@@ -39,28 +38,17 @@ export const verticallyStackedLayout: Layouter = (views, frame) => {
 };
 
 export class StaticLayoutView extends View {
-  subviews: View[] = [];
   layouter: Layouter;
 
   constructor(
     surface: Surface,
     frame: Rect,
     layouter: Layouter,
-    subviews: View[],
+    initialSubviews: View[],
   ) {
     super(surface, frame);
     this.layouter = layouter;
-    subviews.forEach(subview => this.addSubview(subview));
-  }
-
-  setNeedsDisplay() {
-    super.setNeedsDisplay();
-    this.subviews.forEach(subview => subview.setNeedsDisplay());
-  }
-
-  addSubview(view: View) {
-    this.subviews.push(view);
-    view.superview = this;
+    initialSubviews.forEach(subview => this.addSubview(subview));
   }
 
   layoutSubviews() {
@@ -76,19 +64,4 @@ export class StaticLayoutView extends View {
       }
     });
   }
-
-  draw(context: CanvasRenderingContext2D) {
-    const {subviews, visibleArea} = this;
-    subviews.forEach(subview => {
-      if (rectIntersectsRect(visibleArea, subview.visibleArea)) {
-        subview.displayIfNeeded(context);
-      }
-    });
-  }
-
-  handleInteractionAndPropagateToSubviews(interaction: Interaction) {
-    this.subviews.forEach(subview =>
-      subview.handleInteractionAndPropagateToSubviews(interaction),
-    );
-  }
 }

src/layout/Surface.js

@@ -8,6 +8,10 @@ import {getCanvasContext} from '../canvas/canvasUtils';
 import {View} from './View';
 import {zeroPoint} from './geometry';
 
+/**
+ * Represents the canvas surface and a view heirarchy. A surface is also the
+ * place where all interactions enter the view heirarchy.
+ */
 export class Surface {
   rootView: ?View;
   context: ?CanvasRenderingContext2D;

src/layout/VerticalScrollView.js

@@ -36,6 +36,10 @@ function clamp(min: number, max: number, value: number): number {
 }
 
 export class VerticalScrollView extends View {
+  /**
+   * Reference to the content view. This view is also the only view in
+   * `this.subviews`.
+   */
   contentView: View;
 
   scrollState: VerticalScrollState = {
@@ -56,16 +60,11 @@ export class VerticalScrollView extends View {
   ) {
     super(surface, frame);
     this.contentView = contentView;
-    contentView.superview = this;
+    this.addSubview(this.contentView);
     if (stateDeriver) this.stateDeriver = stateDeriver;
     if (onStateChange) this.onStateChange = onStateChange;
   }
 
-  setNeedsDisplay() {
-    super.setNeedsDisplay();
-    this.contentView.setNeedsDisplay();
-  }
-
   setFrame(newFrame: Rect) {
     super.setFrame(newFrame);
 
@@ -96,10 +95,6 @@ export class VerticalScrollView extends View {
     this.contentView.setVisibleArea(this.visibleArea);
   }
 
-  draw(context: CanvasRenderingContext2D) {
-    this.contentView.displayIfNeeded(context);
-  }
-
   isPanning = false;
 
   handleVerticalPanStart(interaction: VerticalPanStartInteraction) {
@@ -151,7 +146,7 @@ export class VerticalScrollView extends View {
     });
   }
 
-  handleInteractionAndPropagateToSubviews(interaction: Interaction) {
+  handleInteraction(interaction: Interaction) {
     switch (interaction.type) {
       case 'vertical-pan-start':
         this.handleVerticalPanStart(interaction);
@@ -166,7 +161,6 @@ export class VerticalScrollView extends View {
         this.handleWheelPlain(interaction);
         break;
     }
-    this.contentView.handleInteractionAndPropagateToSubviews(interaction);
   }
 
   /**