draw() — react Function Reference

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

Function javascript BabelCompiler Validation calls 1

Entity Profile

BabelCompiler→ Validation→ draw() — react Function Reference

Dependency Diagram

graph TD
  45da1002_daee_6aef_1de9_74eac3a50c0e["draw()"]
  15e8ee71_cd71_e6f6_40e5_59e8feb4985d["VerticalScrollView"]
  45da1002_daee_6aef_1de9_74eac3a50c0e -->|defined in| 15e8ee71_cd71_e6f6_40e5_59e8feb4985d
  6bb2400d_04ee_af63_1d65_f8d70d7f4857["desiredSize()"]
  45da1002_daee_6aef_1de9_74eac3a50c0e -->|calls| 6bb2400d_04ee_af63_1d65_f8d70d7f4857
  style 45da1002_daee_6aef_1de9_74eac3a50c0e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/view-base/VerticalScrollView.js lines 85–131

  draw(context: CanvasRenderingContext2D, viewRefs: ViewRefs) {
    super.draw(context, viewRefs);

    // Show carets if there's scroll overflow above or below the viewable area.
    if (this.frame.size.height > CARET_HEIGHT * 2 + CARET_MARGIN * 3) {
      const offset = this._scrollState.offset;
      const desiredSize = this._contentView.desiredSize();

      const above = offset;
      const below = this.frame.size.height - desiredSize.height - offset;

      if (above < 0 || below < 0) {
        const {visibleArea} = this;
        const {x, y} = visibleArea.origin;
        const {width, height} = visibleArea.size;
        const horizontalCenter = x + width / 2;

        const halfWidth = CARET_WIDTH;
        const left = horizontalCenter + halfWidth;
        const right = horizontalCenter - halfWidth;

        if (above < 0) {
          const topY = y + CARET_MARGIN;

          context.beginPath();
          context.moveTo(horizontalCenter, topY);
          context.lineTo(left, topY + CARET_HEIGHT);
          context.lineTo(right, topY + CARET_HEIGHT);
          context.closePath();
          context.fillStyle = COLORS.SCROLL_CARET;
          context.fill();
        }

        if (below < 0) {
          const bottomY = y + height - CARET_MARGIN;

          context.beginPath();
          context.moveTo(horizontalCenter, bottomY);
          context.lineTo(left, bottomY - CARET_HEIGHT);
          context.lineTo(right, bottomY - CARET_HEIGHT);
          context.closePath();
          context.fillStyle = COLORS.SCROLL_CARET;
          context.fill();
        }
      }
    }
  }