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

package/dist/index.d.mts

@@ -3,12 +3,12 @@ export { QueryObserver } from '@tanstack/query-core';
 import * as geojson from 'geojson';
 import { Position, Geometry, GeoJsonProperties, Feature, Point, Polygon, MultiPolygon, LineString, GeometryCollection } from 'geojson';
 import * as maptalks_dist_core_Class from 'maptalks/dist/core/Class';
+import * as maptalks from 'maptalks-gl';
 import { Map } from 'maptalks-gl';
 import { BaseObject, ThreeLayer } from 'maptalks.three';
 import { ExtrudePolygonOptionType } from 'maptalks.three/dist/type';
 import { PolygonOptionsType } from 'maptalks/dist/geometry/Polygon';
 import { LineStringOptionsType } from 'maptalks/dist/geometry/LineString';
-import * as maptalks from 'maptalks';
 import { Extent, Marker, ui, LineString as LineString$1, Polygon as Polygon$1, MultiPolygon as MultiPolygon$1, MultiLineString } from 'maptalks';
 import { MapViewType, MapAnimationOptionsType, MapPaddingType } from 'maptalks/dist/map/Map';
 import { SpriteMaterial, AmbientLight, DirectionalLight } from 'three';
@@ -817,6 +817,7 @@ interface ISetHighlightElementIdsOptions {
 
 declare class IndoorMap extends EventTarget {
     #private;
+    options: IndoorMapOptions;
     map: Map | null;
     camera: CameraManager;
     rendererManager: RendererManager;

package/dist/index.d.ts

@@ -3,12 +3,12 @@ export { QueryObserver } from '@tanstack/query-core';
 import * as geojson from 'geojson';
 import { Position, Geometry, GeoJsonProperties, Feature, Point, Polygon, MultiPolygon, LineString, GeometryCollection } from 'geojson';
 import * as maptalks_dist_core_Class from 'maptalks/dist/core/Class';
+import * as maptalks from 'maptalks-gl';
 import { Map } from 'maptalks-gl';
 import { BaseObject, ThreeLayer } from 'maptalks.three';
 import { ExtrudePolygonOptionType } from 'maptalks.three/dist/type';
 import { PolygonOptionsType } from 'maptalks/dist/geometry/Polygon';
 import { LineStringOptionsType } from 'maptalks/dist/geometry/LineString';
-import * as maptalks from 'maptalks';
 import { Extent, Marker, ui, LineString as LineString$1, Polygon as Polygon$1, MultiPolygon as MultiPolygon$1, MultiLineString } from 'maptalks';
 import { MapViewType, MapAnimationOptionsType, MapPaddingType } from 'maptalks/dist/map/Map';
 import { SpriteMaterial, AmbientLight, DirectionalLight } from 'three';
@@ -817,6 +817,7 @@ interface ISetHighlightElementIdsOptions {
 
 declare class IndoorMap extends EventTarget {
     #private;
+    options: IndoorMapOptions;
     map: Map | null;
     camera: CameraManager;
     rendererManager: RendererManager;

package/dist/index.js

@@ -670,6 +670,7 @@ var getDataClient = (options) => {
 
 // src/IndoorMap/IndoorMap.ts
 var import_maptalks_gl = require("maptalks-gl");
+var import_transcoders = require("@maptalks/transcoders.draco");
 var import_tween2 = __toESM(require("@tweenjs/tween.js"));
 var import_lodash7 = __toESM(require("lodash"));
 
@@ -752,6 +753,7 @@ function isNumber(num) {
 var import_distance = __toESM(require("@turf/distance"));
 var import_center4 = __toESM(require("@turf/center"));
 var import_three8 = require("three");
+var import_maptalks9 = require("maptalks.three");
 
 // src/IndoorMap/constants.ts
 var defaultLayerOption = { enableAltitude: true };
@@ -3070,7 +3072,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);
@@ -3119,14 +3123,11 @@ var CameraManager = class {
 // src/IndoorMap/renderer/RendererManager.ts
 var import_min = __toESM(require("lodash/min"));
 var import_center3 = require("@turf/center");
-var import_maptalks9 = require("maptalks.three");
 var THREE3 = __toESM(require("three"));
 
 // src/IndoorMap/renderer/3d/Element3DRenderer.ts
-var maptalks4 = __toESM(require("maptalks"));
+var maptalks4 = __toESM(require("maptalks-gl"));
 var THREE2 = __toESM(require("three"));
-var import_GLTFLoader2 = require("three/examples/jsm/loaders/GLTFLoader");
-var import_DRACOLoader = require("three/examples/jsm/loaders/DRACOLoader");
 var import_buffer2 = __toESM(require("@turf/buffer"));
 
 // src/IndoorMap/renderer/3d/element3DRendererOptions.ts
@@ -3371,21 +3372,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 import_DRACOLoader.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() {
@@ -3421,7 +3423,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(
@@ -3429,9 +3431,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))
@@ -3452,7 +3451,7 @@ var Element3DRenderer = class extends EventTarget {
         );
         return [extrudedPolygon, topLines, bottomLines];
       } catch (err) {
-        throw new Error(`Cannot create polygon, ${err.message}`);
+        return [];
       }
     };
     try {
@@ -3477,60 +3476,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) {
@@ -3553,21 +3524,6 @@ var Element3DRenderer = class extends EventTarget {
       }
     });
   }
-  async loadModel3d(model3d) {
-    const loader = new import_GLTFLoader2.GLTFLoader();
-    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,
@@ -3933,12 +3889,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 import_maptalks9.ThreeLayer("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);
@@ -3948,14 +3902,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);
@@ -4051,7 +4004,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 = (0, import_center3.center)(thisLevelOpening).geometry.coordinates;
         const element = await this.elementRenderer.createEscalator(escalator, escalatorEntryPoint, { direction, angle });
@@ -4060,7 +4013,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);
@@ -4121,6 +4074,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;
@@ -4172,14 +4126,18 @@ var IndoorMap = class extends EventTarget {
   };
   constructor(elementId, options) {
     super();
+    const combinedOptions = import_lodash7.default.merge({}, defaultOptions, options);
+    this.options = options;
     const {
       onMapReady,
       onMapLoading,
       pixelRatio,
       locale
-    } = import_lodash7.default.merge({}, defaultOptions, options);
+    } = combinedOptions;
     this.map = new import_maptalks_gl.Map(elementId, {
       attribution: false,
+      // Temporart set, not really default view
+      // Default view is set in camera manager
       center: INITIAL_CENTER,
       zoom: INITIAL_ZOOM,
       clickTimeThreshold: 600,
@@ -4195,6 +4153,14 @@ var IndoorMap = class extends EventTarget {
       }),
       layers: []
     });
+    const groupLayer = new import_maptalks_gl.GroupGLLayer("group", [], {}).addTo(this.map);
+    const threeLayer = new import_maptalks9.ThreeLayer("three", {
+      forceRenderOnMoving: true,
+      forceRenderOnRotating: true
+    });
+    groupLayer.addLayer(threeLayer);
+    const gltfLayer = new import_maptalks_gl.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;
@@ -4207,12 +4173,14 @@ var IndoorMap = class extends EventTarget {
   }
   set dataClient(value) {
     this.#dataClient = value;
-    this.#dataClient.filterByType("venue").then((venues) => {
-      const venueCenters = (0, import_center4.default)(featureCollection(venues));
-      const [x, y] = venueCenters.geometry.coordinates;
-      const center2 = new import_maptalks_gl.Coordinate(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 = (0, import_center4.default)(featureCollection(venues));
+        const [x, y] = venueCenters.geometry.coordinates;
+        const center2 = new import_maptalks_gl.Coordinate(x, y);
+        this.camera.setView({ center: center2, pitch: 60, zoom: 19 });
+      });
+    }
   }
   /**
    * Events