For example:
<img width="1904" alt="Screen Shot 2021-11-05 at 11 59 05 AM" src="https://user-images.githubusercontent.com/29597/140540816-25d6d47b-7aea-4121-aeaa-565accc65b1f.png">

import type {ViewRefs} from './Surface';
import {Surface} from './Surface';
import {
  rectEqualToRect,
  intersectionOfRects,
  rectIntersectsRect,
  sizeIsEmpty,
  sizeIsValid,
  unionOfRects,
  zeroRect,
} from './geometry';
import {noopLayout, viewsToLayout, collapseLayoutIntoViews} from './layouter';
/**
 * Base view class that can be subclassed to draw custom content or manage
 * subclasses.
 */
export class View {
  _backgroundColor: string | null;
  currentCursor: string | null = null;
  surface: Surface;
  frame: Rect;
  visibleArea: Rect;
  superview: ?View;
  subviews: View[] = [];
  /**
   * An injected function that lays out our subviews.
   * @private
   */
  _layouter: Layouter;
  /**