react Architecture Docs
Home / Class/ Surface Class — react Architecture

Surface Class — react Architecture

Architecture documentation for the Surface class in Surface.js from the react codebase.

Class javascript BabelCompiler

Entity Profile

Dependency Diagram

graph TD
  c369a97c_dd8c_2e92_cdce_84e8bb9a306d["Surface"]
  2fbafaf8_32f6_4129_38fc_89470d906d24["Surface.js"]
  c369a97c_dd8c_2e92_cdce_84e8bb9a306d -->|defined in| 2fbafaf8_32f6_4129_38fc_89470d906d24
  999fea7d_fde4_a746_f8df_4b2a9c29d709["constructor()"]
  c369a97c_dd8c_2e92_cdce_84e8bb9a306d -->|method| 999fea7d_fde4_a746_f8df_4b2a9c29d709
  b1bc2a10_c67d_7d6d_42ef_565e1adf0c81["hasActiveView()"]
  c369a97c_dd8c_2e92_cdce_84e8bb9a306d -->|method| b1bc2a10_c67d_7d6d_42ef_565e1adf0c81
  ac91b97c_8a12_d69a_68bd_899304b8065f["setCanvas()"]
  c369a97c_dd8c_2e92_cdce_84e8bb9a306d -->|method| ac91b97c_8a12_d69a_68bd_899304b8065f
  1281b2ed_df72_600b_d3f7_070428aec123["displayIfNeeded()"]
  c369a97c_dd8c_2e92_cdce_84e8bb9a306d -->|method| 1281b2ed_df72_600b_d3f7_070428aec123
  630cb289_d1d3_2c2e_1733_c1db15f449cc["getCurrentCursor()"]
  c369a97c_dd8c_2e92_cdce_84e8bb9a306d -->|method| 630cb289_d1d3_2c2e_1733_c1db15f449cc
  a955e197_8406_3a9f_70b7_bd2bc137a188["handleInteraction()"]
  c369a97c_dd8c_2e92_cdce_84e8bb9a306d -->|method| a955e197_8406_3a9f_70b7_bd2bc137a188

Relationship Graph

Source Code

packages/react-devtools-timeline/src/view-base/Surface.js lines 60–154

export class Surface {
  rootView: ?View;

  _context: ?CanvasRenderingContext2D;
  _canvasSize: ?Size;

  _resetHoveredEvent: ResetHoveredEventFn;

  _viewRefs: ViewRefs = {
    activeView: null,
    hoveredView: null,
  };

  constructor(resetHoveredEvent: ResetHoveredEventFn) {
    this._resetHoveredEvent = resetHoveredEvent;
  }

  hasActiveView(): boolean {
    return this._viewRefs.activeView !== null;
  }

  setCanvas(canvas: HTMLCanvasElement, canvasSize: Size) {
    this._context = getCanvasContext(
      canvas,
      canvasSize.height,
      canvasSize.width,
    );
    this._canvasSize = canvasSize;

    if (this.rootView) {
      this.rootView.setNeedsDisplay();
    }
  }

  displayIfNeeded() {
    const {rootView, _canvasSize, _context} = this;
    if (!rootView || !_context || !_canvasSize) {
      return;
    }
    rootView.setFrame({
      origin: zeroPoint,
      size: _canvasSize,
    });
    rootView.setVisibleArea({
      origin: zeroPoint,
      size: _canvasSize,
    });
    rootView.displayIfNeeded(_context, this._viewRefs);
  }

  getCurrentCursor(): string | null {
    const {activeView, hoveredView} = this._viewRefs;
    if (activeView !== null) {
      return activeView.currentCursor;
    } else if (hoveredView !== null) {
      return hoveredView.currentCursor;
    } else {
      return null;
    }
  }

  handleInteraction(interaction: Interaction) {
    const rootView = this.rootView;
    if (rootView != null) {
      const viewRefs = this._viewRefs;
      switch (interaction.type) {
        case 'mousemove':
        case 'wheel-control':
        case 'wheel-meta':
        case 'wheel-plain':
        case 'wheel-shift':
          // Clean out the hovered view before processing this type of interaction.
          const hoveredView = viewRefs.hoveredView;
          viewRefs.hoveredView = null;

          rootView.handleInteractionAndPropagateToSubviews(
            interaction,
            viewRefs,
          );

          // If a previously hovered view is no longer hovered, update the outer state.

Domain

Defined In

Source

Frequently Asked Questions

What is the Surface class?
Surface is a class in the react codebase, defined in packages/react-devtools-timeline/src/view-base/Surface.js.
Where is Surface defined?
Surface is defined in packages/react-devtools-timeline/src/view-base/Surface.js at line 60.

Analyze Your Own Codebase

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

Try Supermodel Free