Method _app

modules/core/GraphicsSystem.js:468–527

* _app * The "Rapid" part of the drawing. * Where we set up the scene graph and tell Pixi what needs to be drawn.

()

   * Where we set up the scene graph and tell Pixi what needs to be drawn.
   */
  _app() {
    // Wait for textures to be loaded before attempting rendering.
    if (!this.textures?.loaded) return;
    if (!this._started || this._paused) return;

    const context = this.context;
    const map = context.systems.map;

    // If the user is currently resizing, skip rendering until the size has settled
    if (context.container().classed('resizing')) return;

    const mapViewport = context.viewport;
    const pixiViewport = this._pixiViewport;

    // At this point, the map transform is settled
    // (`_tform` is called immediately before `_app`)
    const mapTransform = mapViewport.transform;
    const pixiTransform = pixiViewport.transform;

    // Determine "offset"
    // We try to avoid reprojecting the pixi geometries unless zoom has changed, or map has translated very far.
    // If the user is just panning, we can leave the geometries alone and add an offset translation to the origin.
    const pixiXY = pixiTransform.translation;
    const mapXY = mapTransform.translation;
    const dist = vecLength(pixiXY, mapXY);
    let offset;

    if (pixiTransform.k !== mapTransform.k || dist > 100000) {
      offset = [0,0];
      pixiViewport.transform = mapTransform;   // reset (sync pixi = map)
      this.scene.dirtyScene();                 // all geometry must be reprojected
    } else {
      offset = vecSubtract(pixiXY, mapXY);
    }

    if (pixiTransform.r !== mapTransform.r) {
      pixiTransform.rotation = mapTransform.r;
      this.scene.dirtyScene();               // only really needs restyle
    }

    // The `stage` should be positioned so that `[0,0]` is at the center of the viewport,
    // and this is the pivot point for map rotation.
    const mapCenter = pixiViewport.center();
    this.stage.pivot.set(0, 0);
    this.stage.position.set(mapCenter[0], mapCenter[1]);
    this.stage.rotation = mapTransform.r;

    // The `origin` returns `[0,0]` back to the `[top,left]` coordinate of the viewport,
    // so `project/unproject` continues to work.
    // This also includes the `offset`, which includes any panning that the user has done.
    this.origin.position.set(-offset[0] - mapCenter[0], -offset[1] - mapCenter[1]);

    // Let's go!
    const effectiveZoom = map.effectiveZoom();
    this.scene.render(this._frame, pixiViewport, effectiveZoom);
    // this._renderDebug();

    this._appPending = false;