react Architecture Docs
Home / Function/ desiredSize() — react Function Reference

desiredSize() — react Function Reference

Architecture documentation for the desiredSize() function in VerticalScrollBarView.js from the react codebase.

Function javascript BabelCompiler Validation calls 4

Entity Profile

Dependency Diagram

graph TD
  78ba298b_e950_e359_1bc4_641a17c0f775["desiredSize()"]
  61a52b70_028c_d7b7_0542_1547d92cd850["VerticalScrollBarView"]
  78ba298b_e950_e359_1bc4_641a17c0f775 -->|defined in| 61a52b70_028c_d7b7_0542_1547d92cd850
  fded0f25_5cd2_d798_b8aa_4355c4344173["rectEqualToRect()"]
  78ba298b_e950_e359_1bc4_641a17c0f775 -->|calls| fded0f25_5cd2_d798_b8aa_4355c4344173
  b6d7e0eb_672c_2250_5ec1_56607b5e9daa["setScrollOffset()"]
  78ba298b_e950_e359_1bc4_641a17c0f775 -->|calls| b6d7e0eb_672c_2250_5ec1_56607b5e9daa
  a955e197_8406_3a9f_70b7_bd2bc137a188["handleInteraction()"]
  78ba298b_e950_e359_1bc4_641a17c0f775 -->|calls| a955e197_8406_3a9f_70b7_bd2bc137a188
  5cadbad4_62d2_f23e_1bf4_225db867ed8b["rectContainsPoint()"]
  78ba298b_e950_e359_1bc4_641a17c0f775 -->|calls| 5cadbad4_62d2_f23e_1bf4_225db867ed8b
  style 78ba298b_e950_e359_1bc4_641a17c0f775 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js lines 55–219

  desiredSize(): {+height: number, +width: number} {
    return {
      width: SCROLL_BAR_SIZE,
      height: 0, // No desired height
    };
  }

  getMaxScrollThumbY(): number {
    const {height} = this.frame.size;

    const maxScrollThumbY = height - this._scrollThumbRect.size.height;

    return maxScrollThumbY;
  }

  setContentHeight(contentHeight: number) {
    this._contentHeight = contentHeight;

    const {height, width} = this.frame.size;

    const proposedScrollThumbRect = {
      origin: {
        x: this.frame.origin.x,
        y: this._scrollThumbRect.origin.y,
      },
      size: {
        width,
        height: height * (height / contentHeight),
      },
    };

    if (!rectEqualToRect(this._scrollThumbRect, proposedScrollThumbRect)) {
      this._scrollThumbRect = proposedScrollThumbRect;
      this.setNeedsDisplay();
    }
  }

  setScrollThumbY(value: number) {
    const {height} = this.frame.size;

    const maxScrollThumbY = this.getMaxScrollThumbY();
    const newScrollThumbY = Math.max(0, Math.min(maxScrollThumbY, value));

    this._scrollThumbRect = {
      ...this._scrollThumbRect,
      origin: {
        x: this.frame.origin.x,
        y: newScrollThumbY,
      },
    };

    const maxContentOffset = this._contentHeight - height;
    const contentScrollOffset =
      (newScrollThumbY / maxScrollThumbY) * maxContentOffset * -1;

    this._verticalScrollOverflowView.setScrollOffset(
      contentScrollOffset,
      maxScrollThumbY,
    );
  }

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

    // TODO Use real color
    context.fillStyle = COLORS.REACT_RESIZE_BAR;
    context.fillRect(x, y, width, height);

    // TODO Use real color
    context.fillStyle = COLORS.SCROLL_CARET;
    context.fillRect(
      this._scrollThumbRect.origin.x,
      this._scrollThumbRect.origin.y,
      this._scrollThumbRect.size.width,
      this._scrollThumbRect.size.height,
    );

    // TODO Use real color
    context.fillStyle = COLORS.REACT_RESIZE_BAR_BORDER;
    context.fillRect(x, y, BORDER_SIZE, height);

Domain

Subdomains

Defined In

Calls

Source

Frequently Asked Questions

What does desiredSize() do?
desiredSize() is a function in the react codebase, defined in packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js.
Where is desiredSize() defined?
desiredSize() is defined in packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js at line 55.
What does desiredSize() call?
desiredSize() calls 4 function(s): handleInteraction, rectContainsPoint, rectEqualToRect, setScrollOffset.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free