componentDidMount()

in src/components/graph-view.js [192:243]


  componentDidMount() {
    const { initialBBox, zoomDelay, minZoom, maxZoom } = this.props;

    document.addEventListener('keydown', this.handleKeyDown);
    document.addEventListener('mousedown', this.handleDocumentClick, {
      capture: true,
      passive: true,
    });

    this.zoom = d3
      .zoom()
      .filter(this.zoomFilter.bind(this))
      .scaleExtent([minZoom || 0, maxZoom || 0])
      .on('start', () => {
        this.handleZoomStart(d3.event);
      })
      .on('zoom', () => {
        this.handleZoom(d3.event);
      })
      .on('end', this.handleZoomEnd);

    d3.select(this.viewWrapper.current)
      .on('touchstart', this.containZoom)
      .on('touchmove', this.containZoom)
      .on('click', this.handleSvgClicked) // handle element click in the element components
      .on('contextmenu', this.handleContextmenu)
      .select('svg')
      .call(this.zoom);

    d3.select(this.graphSvg.current)
      .on('mousedown', this.handleDocumentMouseDown)
      .on('mousemove', this.handleDocumentMouseMove);

    this.selectedView = d3.select(this.view);

    if (initialBBox) {
      // If initialBBox is set, we don't compute the zoom and don't do any transition.
      this.handleZoomToFitImpl(initialBBox, 0);
      this.renderView();

      return;
    }

    // On the initial load, the 'view' <g> doesn't exist until componentDidMount.
    // Manually render the first view.
    this.renderView();
    setTimeout(() => {
      if (this.viewWrapper.current != null) {
        this.handleZoomToFit();
      }
    }, zoomDelay);
  }