draw() — react Function Reference

Architecture documentation for the draw() function in ResizeBarView.js from the react codebase.

Function javascript BabelCompiler Validation calls 1

Entity Profile

BabelCompiler→ Validation→ draw() — react Function Reference

Dependency Diagram

graph TD
  a6f49775_80b0_82ed_3ce3_ec36aa443d4e["draw()"]
  bc0823a6_6e22_c24e_dcae_a58df082924b["ResizeBarView"]
  a6f49775_80b0_82ed_3ce3_ec36aa443d4e -->|defined in| bc0823a6_6e22_c24e_dcae_a58df082924b
  1d4e7b93_85d0_def6_42c9_e20824e49731["drawText()"]
  a6f49775_80b0_82ed_3ce3_ec36aa443d4e -->|calls| 1d4e7b93_85d0_def6_42c9_e20824e49731
  style a6f49775_80b0_82ed_3ce3_ec36aa443d4e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/view-base/resizable/ResizeBarView.js lines 51–117

  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,
      );
      context.fill();
    }
  }