venue-js 1.0.0-1 → 1.0.0-3

package/dist/index.mjs

@@ -142,7 +142,6 @@ var createPopulator = ({
   const populateAddress = (address) => Promise.resolve(address);
   const populateBuilding = (building) => Promise.resolve(building);
   const populateDetail = (detail) => Promise.resolve(detail);
-  const populateFixture = (fixture) => Promise.resolve(fixture);
   const populateFootprint = (footprint) => Promise.resolve(footprint);
   const populateGeofence = (geofence) => Promise.resolve(geofence);
   const populateOpening = (opening) => Promise.resolve(opening);
@@ -198,6 +197,21 @@ var createPopulator = ({
       }
     };
   };
+  const populateFixture = async (fixture) => {
+    const level = await internalFindById(fixture.properties.level_id);
+    const venue = await internalFindById(fixture.properties.venue_id);
+    const anchor = await internalFindById(fixture.properties.anchor_id);
+    return {
+      ...fixture,
+      properties: {
+        ...fixture.properties,
+        anchor: anchor ? await populateAnchor(anchor) : null,
+        level: await populateLevel(level),
+        venue: await populateVenue(venue),
+        ordinal: level.properties.ordinal
+      }
+    };
+  };
   const populateKiosk = async (kiosk) => {
     const level = await internalFindById(kiosk.properties.level_id);
     const venue = await internalFindById(kiosk.properties.venue_id);
@@ -388,23 +402,33 @@ var getDataClient = (options) => {
   };
   const populator = createPopulator({ internalFindById, internalFilterByType });
   const registerObserver = (featureType, refetchInterval) => {
-    let observer = observers.get(featureType);
-    if (!observer) {
-      const options2 = createDeliveryApiQueryOptions(featureType);
-      observer = new QueryObserver(queryClient, {
-        ...options2,
-        refetchInterval
-      });
-      observers.set(featureType, observer);
-    } else {
-      console.error(
-        `An observer for featureType ${featureType} already exists, fail to register new one`
-      );
+    if (observers.has(featureType)) {
+      console.warn(`Observer for ${featureType} already exists`);
+      const record = observers.get(featureType);
+      return record.observer;
     }
+    const options2 = createDeliveryApiQueryOptions(featureType);
+    const observer = new QueryObserver(queryClient, {
+      ...options2,
+      refetchInterval
+    });
+    const unsubscribe = observer.subscribe(() => {
+      console.log(`[venue-js] Listening to ${featureType} changes (interval = ${refetchInterval}ms)`);
+    });
+    observers.set(featureType, { observer, unsubscribe });
     return observer;
   };
+  const destroyObserver = (featureType) => {
+    const record = observers.get(featureType);
+    if (!record) return;
+    record.unsubscribe();
+    observers.delete(featureType);
+  };
   const destroyObservers = () => {
-    observers.forEach((o) => o.destroy());
+    observers.forEach(({ observer, unsubscribe }) => {
+      unsubscribe();
+      observer.destroy();
+    });
     observers.clear();
   };
   const createFilterByTypeQueryOptions = (featureType, params = {}, options2 = {}) => ({
@@ -444,6 +468,7 @@ var getDataClient = (options) => {
     projectId,
     queryClient,
     registerObserver,
+    destroyObserver,
     destroyObservers,
     createFilterByTypeQueryOptions,
     createFindByIdQueryOptions,
@@ -461,7 +486,8 @@ import {
   Extent,
   LineString as LineString3,
   animation,
-  Marker as Marker2
+  Marker as Marker2,
+  Coordinate as Coordinate3
 } from "maptalks";
 import TWEEN2 from "@tweenjs/tween.js";
 import _6 from "lodash";
@@ -3114,50 +3140,16 @@ var createHighlighExtrudeObjectController = (obj, { color }) => {
 };
 
 // src/IndoorMap/camera/CameraManager.ts
+var ZOOM_OUT_LEVEL = 21;
+var ZOOM_IN_LEVEL = 24;
 var CameraManager = class {
   map;
-  // Use for various animation view
-  #defaultCenter;
-  #defaultZoom;
-  #defaultBearing = 0;
-  #defaultPitch = 45;
-  // Store current map zoomlevel
-  constructor(map, { defaultCenter, defaultZoom }) {
+  constructor(map, options) {
     this.map = map;
-    this.#defaultCenter = defaultCenter;
-    if (defaultZoom) {
-      this.#defaultZoom = defaultZoom;
-      this.map.setZoom(defaultZoom);
+    if (options?.defaultView) {
+      this.setView(options?.defaultView);
     }
   }
-  set defaultBearing(value) {
-    this.#defaultBearing = value;
-  }
-  set defaultPitch(value) {
-    this.#defaultPitch = value;
-  }
-  set defaultCenter(value) {
-    this.#defaultCenter = value;
-  }
-  set defaultZoom(value) {
-    this.#defaultZoom = value;
-  }
-  get defaultCenter() {
-    return this.#defaultCenter;
-  }
-  get defaultZoom() {
-    return this.#defaultZoom;
-  }
-  get defaultBearing() {
-    return this.#defaultBearing;
-  }
-  get defaultPitch() {
-    return this.#defaultPitch;
-  }
-  getBearing = () => this.map.getBearing();
-  getPitch = () => this.map.getPitch();
-  getZoom = () => this.map.getZoom();
-  setBearing = (bearing) => this.map.setBearing(bearing);
   /** Private method */
   #animateflyTo(viewOptions = {}, options = {}, callbackOption = () => {
   }) {
@@ -3175,13 +3167,23 @@ var CameraManager = class {
     });
   }
   /** Public methods */
+  getView = () => {
+    return this.map.getView();
+  };
+  getZoom = () => {
+    return this.map.getView().zoom;
+  };
+  setView = (value) => {
+    this.map.setView(value);
+  };
   flyTo = (center2, options = {}) => {
+    const currentView = this.getView();
     const {
-      zoom = this.#defaultZoom,
+      zoom = ZOOM_OUT_LEVEL,
       pitch = 60,
       duration = 600,
       easing = "out",
-      bearing = this.getBearing()
+      bearing = currentView.bearing
     } = options;
     this.#animateflyTo(
       {
@@ -3195,7 +3197,7 @@ var CameraManager = class {
   };
   flyToAndZoomIn = (centerPoint, options = {}) => {
     const {
-      zoom = this.#defaultZoom + 3,
+      zoom = ZOOM_IN_LEVEL,
       pitch = 60,
       duration = 600,
       easing = "out"
@@ -3375,7 +3377,7 @@ var DEFAULT_POLYGON_OPTION = {
   offset: 0,
   altitude: 0
 };
-var HEIGHT_METER = 16;
+var HEIGHT_METER = 4;
 var getGeometryOption = (feature2, options) => {
   try {
     const option = options[feature2.feature_type];
@@ -3413,7 +3415,7 @@ var Element3DRenderer = class extends EventTarget {
       const hemi = new THREE2.HemisphereLight(16777215, 4473924, 0.4);
       scene.add(hemi);
       this.isReady = true;
-      _this.dispatchEvent(new CustomEvent("renderer:ready"));
+      _this.dispatchEvent(new CustomEvent("threelayer:ready"));
     };
     this.lineMaterial = new THREE2.LineBasicMaterial({ color: "#000" });
     this.threeLayer.addTo(this.map);
@@ -3445,7 +3447,7 @@ var Element3DRenderer = class extends EventTarget {
       markerPath: [
         {
           path: "M21.75 0H0.25V21.5H8.35L11.3 24L14.2 21.5H21.75V0Z",
-          fill: "#044B7F"
+          fill: "#ff0000"
         }
       ],
       markerPathWidth: 24,
@@ -3474,33 +3476,55 @@ var Element3DRenderer = class extends EventTarget {
   }
   createGeometry = (feature2) => {
     const options = getGeometryOption(feature2, this.options);
-    const offset = options.offset ?? 0;
+    const offset = options?.offset ?? 0;
+    const createPolygon = (geometry, feature3) => {
+      const [outerRing, ...innerRings] = geometry.coordinates;
+      const offsetFeature = offset !== 0 ? turfBuffer2(geometry, offset, { units: "meters" }) : feature3;
+      const color = options.color ?? feature3.properties.style.polygonFill ?? "#ffffff";
+      if (color === "transparent") return;
+      const material = this.getOrCreateMaterialByColor(color);
+      const altitude = feature3.properties.ordinal * HEIGHT_METER;
+      const bottomHeight = options.bottomHeight ?? 0;
+      const polygon = this.threeLayer.toExtrudePolygon(
+        offsetFeature,
+        { asynchronous: true, ...options, altitude },
+        material
+      );
+      const topLineStrings = [
+        new maptalks5.LineString(outerRing),
+        ...innerRings.map((innerRing) => new maptalks5.LineString(innerRing))
+      ];
+      const topLines = this.threeLayer.toLines(
+        topLineStrings,
+        { altitude: altitude + options.height + 1e-3, bottomHeight, interactive: false },
+        this.lineMaterial
+      );
+      const bottomLineStrings = [
+        new maptalks5.LineString(outerRing),
+        ...innerRings.map((innerRing) => new maptalks5.LineString(innerRing))
+      ];
+      const bottomLines = this.threeLayer.toLines(
+        bottomLineStrings,
+        { altitude, bottomHeight, interactive: false },
+        this.lineMaterial
+      );
+      return [polygon, topLines, bottomLines];
+    };
     try {
       switch (feature2.geometry.type) {
-        case "Polygon": {
-          const offsetFeature = offset !== 0 ? turfBuffer2(feature2.geometry, offset, { units: "meters" }) : feature2;
-          const color = options.color ?? feature2.properties.style.polygonFill ?? "#ffffff";
-          if (color === "transparent") return;
-          const material = this.getOrCreateMaterialByColor(color);
-          const altitude = feature2.properties.ordinal * HEIGHT_METER;
-          const polygon = this.threeLayer.toExtrudePolygon(
-            offsetFeature,
-            { asynchronous: true, ...options, altitude },
-            material
-          );
-          const lineString2 = new maptalks5.LineString(
-            feature2.geometry.coordinates[0]
-          );
-          const line = this.threeLayer.toLine(
-            lineString2,
-            { altitude: altitude + options.height + 1e-3, interactive: false },
-            this.lineMaterial
-          );
-          this.threeLayer.addMesh([polygon, line]);
-          return [polygon, line];
-        }
         case "MultiPolygon": {
-          throw new Error("Dost not support MultiPolygon");
+          const { coordinates } = feature2.geometry;
+          const multiMeshes = coordinates.flatMap((polygonCoordinates) => {
+            const meshes = createPolygon({ type: "Polygon", coordinates: polygonCoordinates }, feature2);
+            this.threeLayer.addMesh(meshes);
+            return meshes;
+          });
+          return multiMeshes;
+        }
+        case "Polygon": {
+          const meshes = createPolygon(feature2.geometry, feature2);
+          this.threeLayer.addMesh(meshes);
+          return meshes;
         }
       }
     } catch (err) {
@@ -3510,7 +3534,7 @@ var Element3DRenderer = class extends EventTarget {
   createMarker = (coordinates, ordinal, label) => {
     const options = {
       scale: 0.05,
-      altitude: ordinal * HEIGHT_METER + 4,
+      altitude: ordinal * HEIGHT_METER,
       // highlight: highlightOptions,
       interactive: true
     };
@@ -3662,7 +3686,8 @@ var Element2DRenderer = class extends EventTarget {
 };
 
 // src/IndoorMap/renderer/RendererManager.ts
-var RendererManager = class {
+var RendererManager = class extends EventTarget {
+  map;
   options;
   // Client for fetching data
   #dataClient;
@@ -3671,6 +3696,8 @@ var RendererManager = class {
   elementsMap;
   elementsByOrdinal;
   constructor(map, options) {
+    super();
+    this.map = map;
     this.options = options;
     this.elementsMap = /* @__PURE__ */ new Map();
     this.elementsByOrdinal = /* @__PURE__ */ new Map();
@@ -3681,17 +3708,31 @@ var RendererManager = class {
     if (this.elementRenderer.isReady) {
       this.#createElements();
     } else {
-      this.elementRenderer.addEventListener("renderer:ready", (e) => {
+      this.elementRenderer.addEventListener("threelayer:ready", (e) => {
+        this.dispatchEvent(new CustomEvent("renderermanager:ready"));
         this.#createElements();
       });
     }
   }
+  getElementsByOrdinal = (ordinal) => {
+    const exist = this.elementsByOrdinal.get(ordinal);
+    if (!exist) this.elementsByOrdinal.set(ordinal, []);
+    return this.elementsByOrdinal.get(ordinal);
+  };
   async #createElements() {
     const levels = await this.#dataClient.filterByType("level", {
       populate: true
     });
-    levels.forEach((level) => {
-      this.elementsByOrdinal.set(level.properties.ordinal, []);
+    const fixtures = await this.#dataClient.filterByType("fixture", { populate: true });
+    fixtures.forEach((fixture) => {
+      const element = this.elementRenderer.createGeometry(fixture);
+      if (element) {
+        const _elements = Array.isArray(element) ? element : [element];
+        _elements.forEach((el) => {
+          this.elementsMap.set(fixture.id, el);
+          this.getElementsByOrdinal(fixture.properties.level.properties.ordinal).push(el);
+        });
+      }
     });
     const units = await this.#dataClient.filterByType("unit", {
       populate: true
@@ -3704,7 +3745,7 @@ var RendererManager = class {
         const _elements = Array.isArray(element) ? element : [element];
         _elements.forEach((el) => {
           this.elementsMap.set(unit.id, el);
-          this.elementsByOrdinal.get(unit.properties.level.properties.ordinal).push(el);
+          this.getElementsByOrdinal(unit.properties.level.properties.ordinal).push(el);
         });
       }
     });
@@ -3717,10 +3758,11 @@ var RendererManager = class {
         const _elements = Array.isArray(element) ? element : [element];
         _elements.forEach((el) => {
           this.elementsMap.set(kiosk.id, el);
-          this.elementsByOrdinal.get(kiosk.properties.level.properties.ordinal).push(el);
+          this.getElementsByOrdinal(kiosk.properties.level.properties.ordinal).push(el);
         });
       }
     });
+    this.dispatchEvent(new CustomEvent("renderermanager:elements_created"));
   }
   changeLevelByOrdinal(targetOrdinal) {
     for (const [ordinal, elements] of this.elementsByOrdinal) {
@@ -3739,19 +3781,19 @@ var RendererManager = class {
   createMarker(coordinate, ordinal, label) {
     const marker = this.elementRenderer.createMarker(coordinate, ordinal, label);
     this.elementsMap.set(label, marker);
-    this.elementsByOrdinal.get(ordinal).push(marker);
+    this.getElementsByOrdinal(ordinal).push(marker);
   }
 };
 
 // src/IndoorMap/IndoorMap.ts
+var INITIAL_CENTER = [100.5017051, 13.7572619];
+var INITIAL_ZOOM = 18.5;
+var CLICK_TOLERANCE = 20;
 var defaultOptions = {
-  center: [100.5017051, 13.7572619],
-  defaultZoom: 18.5,
   pixelRatio: 1,
   locale: DEFAULT_LOCALE
 };
-var CLICK_TOLERANCE = 20;
-var IndoorMap = class {
+var IndoorMap = class extends EventTarget {
   //TODO: refac functions; let them do only 1 thing in a function
   /** Note: "#" means private variables */
   #styler = null;
@@ -3793,7 +3835,7 @@ var IndoorMap = class {
   #animationsToRun = [];
   map = null;
   #dataClient;
-  cameraManager;
+  camera;
   rendererManager;
   showVenueObject = false;
   threeLayer = null;
@@ -3802,9 +3844,8 @@ var IndoorMap = class {
   onMapLoading = () => {
   };
   constructor(elementId, options) {
+    super();
     const {
-      center: center2,
-      defaultZoom,
       onMapReady,
       onMapLoading,
       pixelRatio,
@@ -3812,13 +3853,13 @@ var IndoorMap = class {
     } = _6.merge({}, defaultOptions, options);
     this.map = new Map2(elementId, {
       attribution: false,
-      center: center2,
-      zoom: defaultZoom,
+      center: INITIAL_CENTER,
+      zoom: INITIAL_ZOOM,
       clickTimeThreshold: 600,
       baseLayer: new TileLayer("base", {
         urlTemplate: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
         subdomains: ["a", "b", "c", "d"],
-        opacity: 0.6,
+        opacity: 1,
         attribution: "",
         hitDetect: false,
         decodeImageInWorker: true,
@@ -3826,11 +3867,14 @@ var IndoorMap = class {
       }),
       layers: []
     });
-    this.cameraManager = new CameraManager(this.map, {
-      defaultCenter: center2,
-      defaultZoom
-    });
     this.rendererManager = new RendererManager(this.map, options.renderer);
+    this.rendererManager.addEventListener("renderermanager:ready", (e) => {
+      this.dispatchEvent(new CustomEvent("renderer:ready"));
+    });
+    this.rendererManager.addEventListener("renderermanager:elements_created", (e) => {
+      this.dispatchEvent(new CustomEvent("renderer:elements_created"));
+    });
+    this.camera = new CameraManager(this.map);
     this.locale = locale;
     this.pixelRatio = pixelRatio;
     this.onMapReady = onMapReady;
@@ -3841,7 +3885,13 @@ var IndoorMap = class {
   }
   set dataClient(value) {
     this.#dataClient = value;
-    if (this.rendererManager) this.rendererManager.dataClient = this.#dataClient;
+    this.#dataClient.filterByType("venue").then((venues) => {
+      const venueCenters = turfCenter2(featureCollection(venues));
+      const [x, y] = venueCenters.geometry.coordinates;
+      const center2 = new Coordinate3(x, y);
+      this.camera.setView({ center: center2, pitch: 60, zoom: 19 });
+    });
+    this.rendererManager.dataClient = this.#dataClient;
   }
   /**
    * Events
@@ -3870,30 +3920,6 @@ var IndoorMap = class {
   /**
    * Getters & Setters
    */
-  set defaultBearing(value) {
-    this.cameraManager.defaultBearing = value;
-  }
-  set defaultPitch(value) {
-    this.cameraManager.defaultPitch = value;
-  }
-  set defaultCenter(value) {
-    this.cameraManager.defaultCenter = value;
-  }
-  set defaultZoom(value) {
-    this.cameraManager.defaultZoom = value;
-  }
-  get defaultBearing() {
-    return this.cameraManager.defaultBearing;
-  }
-  get defaultPitch() {
-    return this.cameraManager.defaultPitch;
-  }
-  get defaultCenter() {
-    return this.cameraManager.defaultCenter;
-  }
-  get defaultZoom() {
-    return this.cameraManager.defaultZoom;
-  }
   get elementsLoaded() {
     return this.#elementsLoaded;
   }
@@ -4325,7 +4351,7 @@ var IndoorMap = class {
                 const {
                   geometry: { coordinates }
                 } = turfCenter2(feature2);
-                this.cameraManager.flyToAndZoomIn(coordinates, { pitch: 45 });
+                this.camera.flyToAndZoomIn(coordinates, { pitch: 45 });
               });
               object3ds.push(object);
               this.#objects.push(object);
@@ -4476,7 +4502,7 @@ var IndoorMap = class {
     return result;
   };
   flyTo = (center2, options) => {
-    this.cameraManager.flyTo(center2, options);
+    this.camera.flyTo(center2, options);
   };
   getLineStringBearing = (feature2) => {
     const { geometry } = feature2;
@@ -5028,7 +5054,7 @@ var IndoorMap = class {
       this.threeLayer.redraw();
     }
     if (this.threeLayer) {
-      const objectOpacity = _6.clamp(38 - 2 * this.cameraManager.getZoom(), 0, 1);
+      const objectOpacity = _6.clamp(38 - 2 * this.camera.getZoom(), 0, 1);
       this.#objects.forEach((object) => {
         object.getObject3d().traverse((child) => {
           if (child.isMesh) child.material.opacity = objectOpacity;
@@ -5039,7 +5065,7 @@ var IndoorMap = class {
       if (this.#billboardObjects) {
         this.#billboardObjects.forEach((object) => {
           const objectScale = _6.clamp(
-            20 - 1 * this.cameraManager.getZoom(),
+            20 - 1 * this.camera.getZoom(),
             1,
             1.05
           );