@polygonjs/plugin-mapbox/dist/src/engine/viewers/Mapbox.js

Mapbox plugin for the 3D engine https://polygonjs.com

import { Vector2 } from "three";
import mapboxgl from "mapbox-gl";
import { TypedViewer } from "@polygonjs/polygonjs/dist/src/engine/viewers/_Base";
import { MapboxViewerEventsController } from "./utils/controllers/Event";
import { MapboxViewerStylesheetController } from "./utils/controllers/Stylesheet";
import { MapboxViewerLayersController } from "./utils/controllers/Layers";
import { MapsRegister } from "../../core/mapbox/MapsRegister";
import { MapboxRaycaster } from "../../core/mapbox/MapboxRaycaster";
const CSS_CLASS = "CoreMapboxViewer";
export class MapboxViewer extends TypedViewer {
  constructor(options) {
    super(options);
    this._mapLoaded = false;
    this.layersController = new MapboxViewerLayersController(this);
    this.mapboxEventController = new MapboxViewerEventsController(this);
    this._cameraNode = options.cameraNode;
    this._canvasContainer = document.createElement("div");
    this._canvasContainer.id = `mapbox_container_id_${Math.random()}`.replace(".", "_");
    this._canvasContainer.style.height = "100%";
    MapboxViewerStylesheetController.load();
    this._map = this._cameraNode.createMap(this._canvasContainer);
  }
  cameraNode() {
    return this._cameraNode;
  }
  async mount(element) {
    var _a, _b;
    super.mount(element);
    (_a = this._domElement) == null ? void 0 : _a.appendChild(this._canvasContainer);
    (_b = this._domElement) == null ? void 0 : _b.classList.add(CSS_CLASS);
    this.mapboxEventController.init_events();
    this._map.on("load", () => {
      if (this._map) {
        this._mapLoaded = true;
        this._canvas = this._findCanvas();
        this.eventsController().init();
        MapsRegister.instance().registerMap(this._canvasContainer.id, this._map);
        this.layersController.addLayers();
        this.mapboxEventController.camera_node_move_end();
        window.dispatchEvent(new Event("resize"));
      }
    });
    this._map.on("resize", () => {
      this.onResize();
    });
  }
  mapLoaded() {
    return this._mapLoaded;
  }
  map() {
    return this._map;
  }
  canvasContainer() {
    return this._canvasContainer;
  }
  createRaycaster() {
    return new MapboxRaycaster();
  }
  onResize() {
    const rect = this._map.getCanvas().getBoundingClientRect();
    const size = new Vector2(rect.width, rect.height);
    this.layersController.resize(size);
    this.mapboxEventController.camera_node_move_end();
  }
  dispose() {
    var _a;
    MapsRegister.instance().deregisterMap(this._canvasContainer.id);
    (_a = this._cameraNode) == null ? void 0 : _a.removeMap(this._canvasContainer);
    super.dispose();
  }
  waitForMapLoaded() {
    if (this._map.loaded()) {
      return;
    } else {
      return new Promise((resolve, reject) => {
        if (this._map) {
          this._map.on("load", () => {
            resolve(void 0);
          });
        }
      });
    }
  }
  cameraLngLat() {
    var _a;
    return (_a = this._cameraNode) == null ? void 0 : _a.lngLat();
  }
  _addNavigationControls() {
    var _a;
    const nav = new mapboxgl.NavigationControl();
    (_a = this._map) == null ? void 0 : _a.addControl(nav, "bottom-right");
  }
  _findCanvas() {
    return this._canvasContainer.getElementsByTagName("canvas")[0];
  }
}