ResizeBarView Class — react Architecture

Source Code

packages/react-devtools-timeline/src/view-base/resizable/ResizeBarView.js lines 33–193

export class ResizeBarView extends View {
  _interactionState: ResizeBarState = 'normal';
  _label: string;

  showLabel: boolean = false;

  constructor(surface: Surface, frame: Rect, label: string) {
    super(surface, frame, noopLayout);

    this._label = label;
  }

  desiredSize(): Size {
    return this.showLabel
      ? {height: RESIZE_BAR_WITH_LABEL_HEIGHT, width: 0}
      : {height: RESIZE_BAR_HEIGHT, width: 0};
  }

  draw(context: CanvasRenderingContext2D, viewRefs: ViewRefs) {
    const {frame} = this;
    const {x, y} = frame.origin;
    const {width, height} = frame.size;

    const isActive =
      this._interactionState === 'dragging' ||
      (this._interactionState === 'hovered' && viewRefs.activeView === null);

    context.fillStyle = isActive
      ? COLORS.REACT_RESIZE_BAR_ACTIVE
      : COLORS.REACT_RESIZE_BAR;
    context.fillRect(x, y, width, height);

    context.fillStyle = COLORS.REACT_RESIZE_BAR_BORDER;
    context.fillRect(x, y, width, BORDER_SIZE);
    context.fillRect(x, y + height - BORDER_SIZE, width, BORDER_SIZE);

    const horizontalCenter = x + width / 2;
    const verticalCenter = y + height / 2;

    if (this.showLabel) {
      // When the resize view is collapsed entirely,
      // rather than showing a resize bar– this view displays a label.
      const labelRect: Rect = {
        origin: {
          x: 0,
          y: y + height - RESIZE_BAR_WITH_LABEL_HEIGHT,
        },
        size: {
          width: frame.size.width,
          height: RESIZE_BAR_WITH_LABEL_HEIGHT,
        },
      };

      drawText(this._label, context, labelRect, frame, {
        fillStyle: COLORS.REACT_RESIZE_BAR_DOT,
        textAlign: 'center',
      });
    } else {
      // Otherwise draw horizontally centered resize bar dots
      context.beginPath();
      context.fillStyle = COLORS.REACT_RESIZE_BAR_DOT;
      context.arc(
        horizontalCenter,
        verticalCenter,
        RESIZE_BAR_DOT_RADIUS,
        0,
        2 * Math.PI,
      );
      context.arc(
        horizontalCenter + RESIZE_BAR_DOT_SPACING,
        verticalCenter,
        RESIZE_BAR_DOT_RADIUS,
        0,
        2 * Math.PI,
      );
      context.arc(
        horizontalCenter - RESIZE_BAR_DOT_SPACING,
        verticalCenter,
        RESIZE_BAR_DOT_RADIUS,
        0,
        2 * Math.PI,