AutoSizedCanvas() — react Function Reference

Architecture documentation for the AutoSizedCanvas() function in CanvasPage.js from the react codebase.

Function javascript BabelCompiler Validation calls 2

Entity Profile

BabelCompiler→ Validation→ AutoSizedCanvas() — react Function Reference

Dependency Diagram

graph TD
  4ebde1c0_8d0a_f0b3_0dcd_03c2a6a016e2["AutoSizedCanvas()"]
  d5e5a241_0d88_22ae_6561_9211ad78e796["CanvasPage.js"]
  4ebde1c0_8d0a_f0b3_0dcd_03c2a6a016e2 -->|defined in| d5e5a241_0d88_22ae_6561_9211ad78e796
  73b69eb1_1def_ae18_854c_a93b29fe5e7d["moveStateToRange()"]
  4ebde1c0_8d0a_f0b3_0dcd_03c2a6a016e2 -->|calls| 73b69eb1_1def_ae18_854c_a93b29fe5e7d
  f077803e_adfb_e522_43d4_7b720fa272fa["clampState()"]
  4ebde1c0_8d0a_f0b3_0dcd_03c2a6a016e2 -->|calls| f077803e_adfb_e522_43d4_7b720fa272fa
  style 4ebde1c0_8d0a_f0b3_0dcd_03c2a6a016e2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/CanvasPage.js lines 105–726

function AutoSizedCanvas({
  data,
  height,
  viewState,
  width,
}: AutoSizedCanvasProps) {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);

  const [mouseLocation, setMouseLocation] = useState<Point>(zeroPoint); // DOM coordinates
  const [hoveredEvent, setHoveredEvent] = useState<ReactEventInfo | null>(null);
  const [lastHoveredEvent, setLastHoveredEvent] =
    useState<ReactEventInfo | null>(null);

  const contextMenuRef: ContextMenuRef = useRef(null);

  const resetHoveredEvent = useCallback(
    () => setHoveredEvent(EMPTY_CONTEXT_INFO),
    [],
  );
  const updateHoveredEvent = useCallback(
    (event: ReactEventInfo) => {
      setHoveredEvent(event);

      // If menu is already open, don't update the hovered event data
      // So the same set of menu items is preserved until the current context menu is closed
      if (contextMenuRef.current?.isShown()) {
        return;
      }

      const {
        componentMeasure,
        flamechartStackFrame,
        measure,
        networkMeasure,
        schedulingEvent,
        suspenseEvent,
      } = event;

      // We have to keep track of last non-empty hovered event, since this will be the input for context menu items
      // We can't just pass hoveredEvent to ContextMenuContainer,
      // since it will be reset each time user moves mouse away from event object on the canvas
      if (
        componentMeasure != null ||
        flamechartStackFrame != null ||
        measure != null ||
        networkMeasure != null ||
        schedulingEvent != null ||
        suspenseEvent != null
      ) {
        setLastHoveredEvent(event);
      }
    },
    [contextMenuRef],
  );

  const {searchIndex, searchRegExp, searchResults} = useContext(
    TimelineSearchContext,
  );

  // This effect searches timeline data and scrolls to the next match wen search criteria change.
  useLayoutEffect(() => {
    viewState.updateSearchRegExpState(searchRegExp);

    const componentMeasureSearchResult =
      searchResults.length > 0 ? searchResults[searchIndex] : null;
    if (componentMeasureSearchResult != null) {
      const scrollState = moveStateToRange({
        state: viewState.horizontalScrollState,
        rangeStart: componentMeasureSearchResult.timestamp,
        rangeEnd:
          componentMeasureSearchResult.timestamp +
          componentMeasureSearchResult.duration,
        contentLength: data.duration,
        minContentLength: data.duration * MIN_ZOOM_LEVEL,
        maxContentLength: data.duration * MAX_ZOOM_LEVEL,
        containerLength: width,
      });

      viewState.updateHorizontalScrollState(scrollState);
    }