venue-js 1.2.0-next.2 → 1.2.0-next.4

package/dist/index.mjs

@@ -595,8 +595,11 @@ import {
   TileLayer,
   LineString as LineString3,
   Marker as Marker2,
-  Coordinate as Coordinate4
+  Coordinate as Coordinate4,
+  GroupGLLayer,
+  GLTFLayer
 } from "maptalks-gl";
+import "@maptalks/transcoders.draco";
 import TWEEN2 from "@tweenjs/tween.js";
 import _6 from "lodash";
 
@@ -679,6 +682,7 @@ function isNumber(num) {
 import turfDistance from "@turf/distance";
 import turfCenter3 from "@turf/center";
 import { PerspectiveCamera } from "three";
+import { ThreeLayer as ThreeLayer3 } from "maptalks.three";
 
 // src/IndoorMap/constants.ts
 var defaultLayerOption = { enableAltitude: true };
@@ -3023,7 +3027,9 @@ var CameraManager = class {
     return this.map.getView();
   };
   setView = (value) => {
-    this.map.setView(value);
+    if (this.map) {
+      this.map.setView(value);
+    }
   };
   animateTo = (view, options = {}, step) => {
     this.map.animateTo(view, options, step);
@@ -3072,14 +3078,11 @@ var CameraManager = class {
 // src/IndoorMap/renderer/RendererManager.ts
 import _min from "lodash/min";
 import { center as turfCenter2 } from "@turf/center";
-import { ThreeLayer as ThreeLayer3 } from "maptalks.three";
 import * as THREE3 from "three";
 
 // src/IndoorMap/renderer/3d/Element3DRenderer.ts
-import * as maptalks4 from "maptalks";
+import * as maptalks4 from "maptalks-gl";
 import * as THREE2 from "three";
-import { GLTFLoader as GLTFLoader2 } from "three/examples/jsm/loaders/GLTFLoader";
-import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
 import turfBuffer2 from "@turf/buffer";
 
 // src/IndoorMap/renderer/3d/element3DRendererOptions.ts
@@ -3324,21 +3327,22 @@ var getGeometryOption = (feature2, options) => {
 var Element3DRenderer = class extends EventTarget {
   options;
   map;
+  gltfLayer;
   threeLayer;
-  dracoLoader;
+  // private dracoLoader: DRACOLoader
   lineMaterial;
   materialByColorMap;
   markerRenderer;
   // Renderer is Ready
   isReady = false;
-  constructor(map, options, layer) {
+  constructor(map, options) {
     super();
     this.options = options;
     this.map = map;
-    this.dracoLoader = new DRACOLoader();
-    this.dracoLoader.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.5.7/");
+    const groupLayer = this.map.getLayer("group");
+    this.threeLayer = groupLayer.getLayer("three");
+    this.gltfLayer = groupLayer.getLayer("gltf");
     this.lineMaterial = new THREE2.LineBasicMaterial({ color: "#000" });
-    this.threeLayer = layer;
     this.render();
   }
   animation() {
@@ -3374,7 +3378,7 @@ var Element3DRenderer = class extends EventTarget {
         const color = feature3.properties.style.polygonFill ?? colorOptions ?? "#ffffff";
         if (color === "transparent") return;
         const material = this.getOrCreateMaterialByColor(color);
-        const altitude = feature3.properties.ordinal * HEIGHT_METER;
+        const altitude = 0;
         const height = feature3.properties.height ?? heightOptions ?? HEIGHT_METER;
         const bottomHeight = feature3.properties.bottomHeight ?? bottomHeightOptions ?? 0;
         const extrudedPolygon = this.threeLayer.toExtrudePolygon(
@@ -3382,9 +3386,6 @@ var Element3DRenderer = class extends EventTarget {
           { asynchronous: true, ...options, height, bottomHeight, altitude },
           material
         );
-        extrudedPolygon.on("click", (e) => {
-          console.log(e.target.options.polygon.id);
-        });
         const topLineStrings = [
           new maptalks4.LineString(outerRing),
           ...innerRings.map((innerRing) => new maptalks4.LineString(innerRing))
@@ -3405,7 +3406,7 @@ var Element3DRenderer = class extends EventTarget {
         );
         return [extrudedPolygon, topLines, bottomLines];
       } catch (err) {
-        throw new Error(`Cannot create polygon, ${err.message}`);
+        return [];
       }
     };
     try {
@@ -3430,60 +3431,32 @@ var Element3DRenderer = class extends EventTarget {
     }
   };
   async createEscalator(f, coordinate, options) {
+    const model = {
+      url: "https://cdn.venue.in.th/static/glb/escalator.glb",
+      size: 4.4
+    };
     const { direction: dir, angle } = options;
-    const model = await this.loadModel3d({
-      url: "https://dashboard.situm.com/uploads/3dmodels/demoaccount/new_escalator.glb",
-      properties: {
-        rotation: {
-          x: 0.5 * Math.PI,
-          // Rotate the model up (new_escalator.glb)
-          y: 0,
-          z: 0
-        },
-        position: { x: 0, y: 0, z: 0 },
-        scale: 0.01
+    const rotationZ = dir === "up" ? 180 + angle : angle;
+    var escalatorMarker = new maptalks4.GLTFMarker(coordinate, {
+      symbol: {
+        url: model.url,
+        rotationZ,
+        translationX: dir === "up" ? 0 : model.size * Math.cos(Math.PI * rotationZ / 180),
+        translationY: dir === "up" ? 0 : model.size * Math.sin(Math.PI * rotationZ / 180),
+        translationZ: dir === "up" ? -0.05 * model.size : -0.5 * model.size
       }
     });
-    model.rotation.y += dir === "up" ? Math.PI + angle : angle;
-    const box = new THREE2.Box3().setFromObject(model);
-    const pivotPoint = dir === "up" ? new THREE2.Vector3(0, 0, 0) : new THREE2.Vector3(
-      1 * (box.min.x + box.max.x),
-      1 * (box.min.y + box.max.y),
-      0.6 * box.max.z
-    );
-    const pivot = new THREE2.Group();
-    pivot.add(model);
-    model.position.sub(pivotPoint);
-    model.updateMatrixWorld(true);
-    const altitude = f.properties.ordinal * HEIGHT_METER;
-    const baseObjectModel = this.threeLayer.toModel(pivot, {
-      coordinate,
-      altitude
-    });
-    this.threeLayer.addMesh(baseObjectModel);
-    return baseObjectModel;
+    escalatorMarker.addTo(this.gltfLayer);
+    return escalatorMarker;
   }
   async createTree(coordinate, ordinal) {
-    const model = await this.loadModel3d({
-      url: "https://dashboard.situm.com/uploads/3dmodels/demoaccount/arbol.glb",
-      properties: {
-        rotation: {
-          x: 0.5 * Math.PI,
-          // Rotate the model up (new_escalator.glb)
-          y: 0,
-          z: 0
-        },
-        position: { x: 0, y: 0, z: 0 },
-        scale: 0.01
+    const treeMarker = new maptalks4.GLTFMarker(coordinate, {
+      symbol: {
+        url: "https://dashboard.situm.com/uploads/3dmodels/demoaccount/new_escalator.glb"
       }
     });
-    const altitude = ordinal * HEIGHT_METER;
-    const baseObjectModel = this.threeLayer.toModel(model, {
-      coordinate,
-      altitude
-    });
-    this.threeLayer.addMesh(baseObjectModel);
-    return baseObjectModel;
+    treeMarker.addTo(this.gltfLayer);
+    return treeMarker;
   }
   createElement(f) {
     switch (f.feature_type) {
@@ -3506,21 +3479,6 @@ var Element3DRenderer = class extends EventTarget {
       }
     });
   }
-  async loadModel3d(model3d) {
-    const loader = new GLTFLoader2();
-    loader.setDRACOLoader(this.dracoLoader);
-    const { url, properties: modelProperties } = model3d;
-    const gltf = await loader.loadAsync(url);
-    const model = gltf.scene;
-    model.rotation.x = modelProperties.rotation.x;
-    model.rotation.y = modelProperties.rotation.y;
-    model.position.x = modelProperties.position.x;
-    model.position.y = modelProperties.position.y;
-    model.position.z = modelProperties.position.z;
-    const scale2 = modelProperties.scale;
-    model.scale.set(scale2, scale2, scale2);
-    return model;
-  }
   createMarker = (coordinates, ordinal, text) => {
     const options = {
       // scale: 0.05,
@@ -3886,12 +3844,10 @@ var RendererManager = class extends EventTarget {
     this.markersMap = /* @__PURE__ */ new Map();
     this.markersByOrdinal = /* @__PURE__ */ new Map();
     this.#dataClient = dataClient;
+    const _this = this;
     if (options.type === "3D") {
-      const threeLayer = new ThreeLayer3("elements", {
-        forceRenderOnMoving: true,
-        forceRenderOnRotating: true
-      });
-      const _this = this;
+      const groupLayer = this.map.getLayer("group");
+      const threeLayer = groupLayer.getLayer("three");
       threeLayer.prepareToDraw = function(gl, scene, camera) {
         const ambientLight = new THREE3.AmbientLight(16777215, 0.3);
         scene.add(ambientLight);
@@ -3901,14 +3857,13 @@ var RendererManager = class extends EventTarget {
         scene.add(dllight);
         const hemi = new THREE3.HemisphereLight(16777215, 4473924, 0.4);
         scene.add(hemi);
-        _this.elementRenderer = new Element3DRenderer(map, options.elements, threeLayer);
+        _this.elementRenderer = new Element3DRenderer(map, options.elements);
         _this.markerRenderer = new Marker3DRenderer(map, {}, threeLayer);
         if (typeof options.onRendererReady === "function") {
           options.onRendererReady();
         }
         _this.#createElements();
       };
-      threeLayer.addTo(this.map);
     } else {
       this.elementRenderer = new Element2DRenderer(map, options.elements);
       this.markerRenderer = new Marker2DRenderer(map);
@@ -4004,7 +3959,7 @@ var RendererManager = class extends EventTarget {
         );
         const thisLevelOpening = bothOpenings.find((opening) => opening.properties.ordinal === thisOrdinal);
         const thatLevelOpening = bothOpenings.find((opening) => opening.properties.ordinal !== thisOrdinal);
-        const angle = angleBetweenLineStrings(thisLevelOpening.geometry.coordinates, thatLevelOpening.geometry.coordinates);
+        const angle = 180 * (1 / Math.PI) * angleBetweenLineStrings(thisLevelOpening.geometry.coordinates, thatLevelOpening.geometry.coordinates);
         const direction = thisOrdinal < thatLevelOpening.properties.ordinal ? "up" : "down";
         const escalatorEntryPoint = turfCenter2(thisLevelOpening).geometry.coordinates;
         const element = await this.elementRenderer.createEscalator(escalator, escalatorEntryPoint, { direction, angle });
@@ -4013,7 +3968,7 @@ var RendererManager = class extends EventTarget {
           this.addElementsToManager(escalator.id, _elements, escalator.properties.ordinal);
         }
       } catch (err) {
-        console.log(`cannot create escalator`, err.message);
+        console.warn(`cannot create escalator`, err.message);
       }
     }
     this.changeLevelByOrdinal(this.currentOrdinals);
@@ -4074,6 +4029,7 @@ var defaultOptions = {
   locale: DEFAULT_LOCALE
 };
 var IndoorMap = class extends EventTarget {
+  options;
   //TODO: refac functions; let them do only 1 thing in a function
   /** Note: "#" means private variables */
   #styler = null;
@@ -4125,14 +4081,18 @@ var IndoorMap = class extends EventTarget {
   };
   constructor(elementId, options) {
     super();
+    const combinedOptions = _6.merge({}, defaultOptions, options);
+    this.options = options;
     const {
       onMapReady,
       onMapLoading,
       pixelRatio,
       locale
-    } = _6.merge({}, defaultOptions, options);
+    } = combinedOptions;
     this.map = new Map2(elementId, {
       attribution: false,
+      // Temporart set, not really default view
+      // Default view is set in camera manager
       center: INITIAL_CENTER,
       zoom: INITIAL_ZOOM,
       clickTimeThreshold: 600,
@@ -4148,6 +4108,14 @@ var IndoorMap = class extends EventTarget {
       }),
       layers: []
     });
+    const groupLayer = new GroupGLLayer("group", [], {}).addTo(this.map);
+    const threeLayer = new ThreeLayer3("three", {
+      forceRenderOnMoving: true,
+      forceRenderOnRotating: true
+    });
+    groupLayer.addLayer(threeLayer);
+    const gltfLayer = new GLTFLayer("gltf");
+    groupLayer.addLayer(gltfLayer);
     this.rendererManager = new RendererManager(this.map, options.dataClient, options.renderer);
     this.camera = new CameraManager(this.map, options.camera);
     this.locale = locale;
@@ -4160,12 +4128,14 @@ var IndoorMap = class extends EventTarget {
   }
   set dataClient(value) {
     this.#dataClient = value;
-    this.#dataClient.filterByType("venue").then((venues) => {
-      const venueCenters = turfCenter3(featureCollection(venues));
-      const [x, y] = venueCenters.geometry.coordinates;
-      const center2 = new Coordinate4(x, y);
-      this.camera.setView({ center: center2, pitch: 60, zoom: 19 });
-    });
+    if (!this.options.camera.defaultView.center) {
+      this.#dataClient.filterByType("venue").then((venues) => {
+        const venueCenters = turfCenter3(featureCollection(venues));
+        const [x, y] = venueCenters.geometry.coordinates;
+        const center2 = new Coordinate4(x, y);
+        this.camera.setView({ center: center2, pitch: 60, zoom: 19 });
+      });
+    }
   }
   /**
    * Events