venue-js 1.3.0 → 1.4.0-next.1

package/dist/index.d.mts

@@ -8,7 +8,7 @@ import { Map, Coordinate as Coordinate$1 } from 'maptalks-gl';
 import { BaseObject, ThreeLayer } from 'maptalks.three';
 import * as maptalks from 'maptalks';
 import { Coordinate, Extent, Marker, ui, LineString as LineString$1, Polygon as Polygon$1, MultiPolygon as MultiPolygon$1, MultiLineString } from 'maptalks';
-import { BaseObjectOptionType, ExtrudePolygonOptionType, ExtrudeLineOptionType } from 'maptalks.three/dist/type';
+import { BaseObjectOptionType, BarOptionType, ExtrudePolygonOptionType, ExtrudeLineOptionType } from 'maptalks.three/dist/type';
 import { PolygonOptionsType } from 'maptalks/dist/geometry/Polygon';
 import { LineStringOptionsType } from 'maptalks/dist/geometry/LineString';
 import { MapViewType, MapAnimationOptionsType, MapPaddingType } from 'maptalks/dist/map/Map';
@@ -827,6 +827,15 @@ declare class TextSpriteMarker extends BaseObject {
     setAltitude(altitude: number): this;
 }
 
+type ImageMarkerOptions = BaseObjectOptionType & {
+    src: string;
+    bottomHeight?: number;
+    leg?: Omit<BarOptionType, 'height'> & {
+        color: string;
+    };
+};
+type AnyMarkerOptions = TextMarkerOptions | ImageMarkerOptions;
+
 type Stop = [zoom: number, value: number];
 type MapElement = maptalks.Geometry | BaseObject;
 /** 2D */
@@ -868,17 +877,15 @@ type BaseRenderManagerOptions = {
 };
 type RendererManagerOptions = BaseRenderManagerOptions & {
     type: "2D";
-    elements: Element2DRendererOptions;
+    elements?: Element2DRendererOptions;
 } | BaseRenderManagerOptions & {
     type: "3D";
-    elements: Element3DRendererOptions;
+    elements?: Element3DRendererOptions;
 };
 type HighlightElementOptions = {
     reset: boolean;
 };
 
-type AnyMarkerOptions = TextMarkerOptions;
-
 declare class RendererManager extends EventTarget {
     #private;
     map: maptalks$1.Map;
@@ -906,7 +913,7 @@ declare class RendererManager extends EventTarget {
      * ======================================================================== */
     _getMarkersByOrdinal: (ordinal: number) => BaseObject[] | maptalks$1.ui.UIMarker[];
     _addMarkersToManager: (id: any, markers: any, ordinal: any) => void;
-    createMarker(coordinate: Position, ordinal: number, text: string, options: AnyMarkerOptions): void;
+    createMarker(type: 'text' | 'image', coordinate: Position, ordinal: number, textOrPath: string, options: AnyMarkerOptions): void;
     clearMarkers(): void;
 }
 

package/dist/index.d.ts

@@ -8,7 +8,7 @@ import { Map, Coordinate as Coordinate$1 } from 'maptalks-gl';
 import { BaseObject, ThreeLayer } from 'maptalks.three';
 import * as maptalks from 'maptalks';
 import { Coordinate, Extent, Marker, ui, LineString as LineString$1, Polygon as Polygon$1, MultiPolygon as MultiPolygon$1, MultiLineString } from 'maptalks';
-import { BaseObjectOptionType, ExtrudePolygonOptionType, ExtrudeLineOptionType } from 'maptalks.three/dist/type';
+import { BaseObjectOptionType, BarOptionType, ExtrudePolygonOptionType, ExtrudeLineOptionType } from 'maptalks.three/dist/type';
 import { PolygonOptionsType } from 'maptalks/dist/geometry/Polygon';
 import { LineStringOptionsType } from 'maptalks/dist/geometry/LineString';
 import { MapViewType, MapAnimationOptionsType, MapPaddingType } from 'maptalks/dist/map/Map';
@@ -827,6 +827,15 @@ declare class TextSpriteMarker extends BaseObject {
     setAltitude(altitude: number): this;
 }
 
+type ImageMarkerOptions = BaseObjectOptionType & {
+    src: string;
+    bottomHeight?: number;
+    leg?: Omit<BarOptionType, 'height'> & {
+        color: string;
+    };
+};
+type AnyMarkerOptions = TextMarkerOptions | ImageMarkerOptions;
+
 type Stop = [zoom: number, value: number];
 type MapElement = maptalks.Geometry | BaseObject;
 /** 2D */
@@ -868,17 +877,15 @@ type BaseRenderManagerOptions = {
 };
 type RendererManagerOptions = BaseRenderManagerOptions & {
     type: "2D";
-    elements: Element2DRendererOptions;
+    elements?: Element2DRendererOptions;
 } | BaseRenderManagerOptions & {
     type: "3D";
-    elements: Element3DRendererOptions;
+    elements?: Element3DRendererOptions;
 };
 type HighlightElementOptions = {
     reset: boolean;
 };
 
-type AnyMarkerOptions = TextMarkerOptions;
-
 declare class RendererManager extends EventTarget {
     #private;
     map: maptalks$1.Map;
@@ -906,7 +913,7 @@ declare class RendererManager extends EventTarget {
      * ======================================================================== */
     _getMarkersByOrdinal: (ordinal: number) => BaseObject[] | maptalks$1.ui.UIMarker[];
     _addMarkersToManager: (id: any, markers: any, ordinal: any) => void;
-    createMarker(coordinate: Position, ordinal: number, text: string, options: AnyMarkerOptions): void;
+    createMarker(type: 'text' | 'image', coordinate: Position, ordinal: number, textOrPath: string, options: AnyMarkerOptions): void;
     clearMarkers(): void;
 }
 

package/dist/index.js

@@ -405,6 +405,7 @@ var getOccupantMarkerLocations = (occupant, options) => {
 var import_query_core = require("@tanstack/query-core");
 
 // src/data/populator/index.ts
+var import_lodash_es2 = require("lodash-es");
 var import_boolean_within = require("@turf/boolean-within");
 var createPopulator = ({
   internalFindById,
@@ -488,7 +489,14 @@ var createPopulator = ({
     const anchor = await internalFindById(kiosk.properties.anchor_id);
     const units = await internalFilterByType("unit");
     const unit = units.find(
-      (unit2) => unit2.properties.category === "walkway" && unit2.properties.level_id === kiosk.properties.level_id && (0, import_boolean_within.booleanWithin)(kiosk, unit2)
+      (unit2) => {
+        try {
+          return unit2.properties.category === "walkway" && unit2.properties.level_id === kiosk.properties.level_id && (0, import_boolean_within.booleanWithin)(kiosk, unit2);
+        } catch (e) {
+          console.log(`Cannot find kiosk(${kiosk.id})'s units:`, e.message);
+          return false;
+        }
+      }
     );
     let section = null;
     if (anchor) {
@@ -551,7 +559,7 @@ var createPopulator = ({
         ...occupant.properties,
         anchor: anchor ? await populateAnchor(anchor) : null,
         local_categories: await Promise.all(
-          localCategories.map(populateTaxonomy)
+          (0, import_lodash_es2.compact)(localCategories).map(populateTaxonomy)
         ),
         venue,
         promotions,
@@ -2729,9 +2737,9 @@ var CameraManager = class {
 };
 
 // src/IndoorMap/renderer/RendererManager.ts
-var import_lodash_es3 = require("lodash-es");
+var import_lodash_es4 = require("lodash-es");
 var import_center3 = require("@turf/center");
-var THREE3 = __toESM(require("three"));
+var THREE4 = __toESM(require("three"));
 
 // src/IndoorMap/renderer/3d/Element3DRenderer.ts
 var maptalks4 = __toESM(require("maptalks-gl"));
@@ -2750,7 +2758,7 @@ var maptalks3 = __toESM(require("maptalks-gl"));
 var import_maptalks6 = require("maptalks.three");
 var import_three5 = require("three");
 var import_d3plus_shape = require("d3plus-shape");
-var import_lodash_es2 = require("lodash-es");
+var import_lodash_es3 = require("lodash-es");
 var OPTIONS3 = {
   // Allowing click through and prevent interaction
   interactive: false,
@@ -2768,9 +2776,9 @@ var defaultFlatLabelOptions = {
   textBaseline: "middle",
   fillStyle: "#000"
 };
-var defaultRectAngleToCalc = (0, import_lodash_es2.range)(-90, 92, 2);
+var defaultRectAngleToCalc = (0, import_lodash_es3.range)(-90, 92, 2);
 var getMaterial = (text, flatLabelOptions) => {
-  const options = (0, import_lodash_es2.merge)({}, defaultFlatLabelOptions, flatLabelOptions);
+  const options = (0, import_lodash_es3.merge)({}, defaultFlatLabelOptions, flatLabelOptions);
   const {
     fontSize: initialFontSize,
     fontFamily,
@@ -2823,12 +2831,12 @@ var getMaterial = (text, flatLabelOptions) => {
     const maxWidth = SIZE - 2 * margin;
     texts = wrapText(ctx, text, maxWidth);
   }
-  let textWidth = (0, import_lodash_es2.max)(texts.map((text2) => ctx.measureText(text2).width));
+  let textWidth = (0, import_lodash_es3.max)(texts.map((text2) => ctx.measureText(text2).width));
   let scale3 = 1;
   while (scale3 > 0 && textWidth + 2 * margin > SIZE) {
     scale3 -= scaleStep;
     ctx.font = `${fontWeight} ${scale3 * fontSize}px "${fontFamily}", Arial`;
-    textWidth = (0, import_lodash_es2.max)(texts.map((text2) => ctx.measureText(text2).width));
+    textWidth = (0, import_lodash_es3.max)(texts.map((text2) => ctx.measureText(text2).width));
   }
   const center2 = { x: 0.5 * SIZE, y: 0.5 * SIZE };
   if (scale3 > scaleMin) {
@@ -2896,7 +2904,7 @@ var GroundLabel = class extends import_maptalks6.BaseObject {
       strokeStyle,
       lineWidth
     });
-    const rectAngles = (0, import_lodash_es2.isArray)(angle) ? angle : [angle];
+    const rectAngles = (0, import_lodash_es3.isArray)(angle) ? angle : [angle];
     material.needsUpdate = true;
     const rect = (0, import_d3plus_shape.largestRect)(bound, {
       cache: true,
@@ -2969,32 +2977,32 @@ var GroundLabel = class extends import_maptalks6.BaseObject {
     return { x: this.#offsetX, y: this.#offsetY };
   }
   set offsetX(value) {
-    if ((0, import_lodash_es2.isNumber)(value)) {
+    if ((0, import_lodash_es3.isNumber)(value)) {
       this.#offsetX = value;
       this.#updatePosition();
     }
   }
   set offsetY(value) {
-    if ((0, import_lodash_es2.isNumber)(value)) {
+    if ((0, import_lodash_es3.isNumber)(value)) {
       this.#offsetY = value;
       this.#updatePosition();
     }
   }
   set angle(newAngle) {
-    if ((0, import_lodash_es2.isNumber)(newAngle)) {
+    if ((0, import_lodash_es3.isNumber)(newAngle)) {
       this.#angle = newAngle;
       this.getObject3d().rotation.z = Math.PI / 180 * this.#angle;
     }
   }
   setOffset(offsetX, offsetY) {
-    if ((0, import_lodash_es2.isNumber)(offsetX) && (0, import_lodash_es2.isNumber)(offsetY)) {
+    if ((0, import_lodash_es3.isNumber)(offsetX) && (0, import_lodash_es3.isNumber)(offsetY)) {
       this.#offsetX = offsetX;
       this.#offsetY = offsetY;
       this.#updatePosition();
     }
   }
   addOffset(deltaX, deltaY) {
-    if ((0, import_lodash_es2.isNumber)(deltaX) && (0, import_lodash_es2.isNumber)(deltaY)) {
+    if ((0, import_lodash_es3.isNumber)(deltaX) && (0, import_lodash_es3.isNumber)(deltaY)) {
       this.#offsetX += deltaX;
       this.#offsetY += deltaY;
       this.#updatePosition();
@@ -3076,7 +3084,7 @@ var DEFAULT_POLYGON_OPTION = {
   offset: 0,
   altitude: 0
 };
-var get3DRendererOption = (featureType, category, options) => {
+var get3DRendererOption = (featureType, category, options = {}) => {
   try {
     const option = options[featureType] ?? element3DRendererOptions[featureType];
     return (category && option.byCategory?.[category]) ?? option?.default ?? DEFAULT_POLYGON_OPTION;
@@ -3537,6 +3545,12 @@ var Marker2DRenderer = class extends EventTarget {
     marker.addTo(this.map);
     return marker;
   };
+  createTextMarker = (position, label, options) => {
+    return null;
+  };
+  createImageMarker = (position, src, options) => {
+    return null;
+  };
   removeMarker = (marker) => {
     marker.remove();
   };
@@ -3548,6 +3562,7 @@ var Marker2DRenderer = class extends EventTarget {
 
 // src/IndoorMap/renderer/3d/Marker3DRenderer.ts
 var maptalks7 = __toESM(require("maptalks-gl"));
+var THREE3 = __toESM(require("three"));
 
 // src/IndoorMap/renderer/3d/objects/TextSpriteMarker.ts
 var import_maptalks8 = require("maptalks");
@@ -3747,21 +3762,35 @@ var TextSpriteMarker = class extends import_maptalks9.BaseObject {
 };
 
 // src/IndoorMap/renderer/3d/Marker3DRenderer.ts
-var HEIGHT_METER2 = 4;
-var MULTIORDINAL_HEIGHT_METER3 = 9;
 var Marker3DRenderer = class extends EventTarget {
   isReady = false;
   threeLayer;
   map;
-  materialByKey;
   constructor(map, options, layer) {
     super();
     this.map = map;
     this.threeLayer = layer;
   }
-  createTextMarker = (position, ordinal, label, options) => {
+  createPointMaterialFromSvg(svgPath, size = 40) {
+    return new THREE3.PointsMaterial({
+      size,
+      sizeAttenuation: false,
+      // Always same size in screen pixels (Screen pixel)
+      // color: fillStyle, 
+      alphaTest: 0.5,
+      // vertexColors: THREE.VertexColors,
+      // color: 0xffffff,
+      transparent: true,
+      blending: THREE3.NormalBlending,
+      depthTest: true,
+      // POI is hidden behind building
+      depthWrite: true,
+      map: new THREE3.TextureLoader().load(svgPath)
+    });
+  }
+  createTextMarker = (position, label, options) => {
     const combinedOptions = {
-      altitude: ordinal * HEIGHT_METER2,
+      altitude: 0,
       text: label,
       ...options ?? {}
     };
@@ -3770,17 +3799,37 @@ var Marker3DRenderer = class extends EventTarget {
     this.threeLayer.addMesh([marker]);
     return marker;
   };
-  createImageMarker = () => {
-  };
-  createMarker = (coordinates, ordinal, label, options) => {
-    return this.createTextMarker(coordinates, ordinal, label, options);
+  createImageMarker = (position, src, options) => {
+    const [lng, lat] = position;
+    let meshes = [];
+    const height = options.height ?? 0;
+    const { leg, ...markerOptions } = options;
+    const { color: legColor = "#000000", ...legOptions } = leg ?? {};
+    const material = this.createPointMaterialFromSvg(src, 40);
+    const marker = this.threeLayer.toPoint(new maptalks7.Coordinate(lng, lat), { height, ...markerOptions }, material);
+    marker.getObject3d().renderOrder = 10;
+    meshes.push(marker);
+    if (options.leg) {
+      const legMaterial = new THREE3.MeshLambertMaterial({ color: legColor, transparent: true });
+      const leg2 = this.threeLayer.toBar(new maptalks7.Coordinate(lng, lat), { ...legOptions, height }, legMaterial);
+      const legObj = leg2.getObject3d();
+      legObj.traverse((o) => {
+        if (o.isMesh && o.material) {
+          o.material.depthWrite = false;
+          o.material.depthTest = true;
+          o.renderOrder = 0;
+        }
+      });
+      meshes = [leg2, ...meshes];
+    }
+    this.threeLayer.addMesh(meshes);
+    return meshes;
   };
   removeMarker = (marker) => {
     marker.remove();
   };
   showMarkers(elements, ordinalDiff = 0) {
     elements.forEach((element) => {
-      element.setAltitude(ordinalDiff * MULTIORDINAL_HEIGHT_METER3);
       element.show();
     });
   }
@@ -4319,7 +4368,11 @@ function inBBox(pt, bbox2) {
 
 // src/IndoorMap/renderer/utils/findUnitOnPoint.ts
 var findUnitOnPoint = (units, point2) => {
-  return units.find((unit) => booleanPointInPolygon(point2, polygon(unit.geometry.coordinates)));
+  try {
+    return units.find((unit) => booleanPointInPolygon(point2, polygon(unit.geometry.coordinates)));
+  } catch (err) {
+    return null;
+  }
 };
 
 // src/IndoorMap/renderer/RendererManager.ts
@@ -4389,13 +4442,13 @@ var RendererManager = class extends EventTarget {
           }
           return bad;
         }
-        const ambientLight = new THREE3.AmbientLight(16777215, 0.3);
+        const ambientLight = new THREE4.AmbientLight(16777215, 0.3);
         scene.add(ambientLight);
         const dirColor = 16777215;
-        const dllight = new THREE3.DirectionalLight(dirColor, 0.8);
+        const dllight = new THREE4.DirectionalLight(dirColor, 0.8);
         dllight.position.set(0, -10, 20).normalize();
         scene.add(dllight);
-        const hemi = new THREE3.HemisphereLight(16777215, 4473924, 0.4);
+        const hemi = new THREE4.HemisphereLight(16777215, 4473924, 0.4);
         scene.add(hemi);
         _this.elementRenderer = new Element3DRenderer(map, options.elements);
         _this.markerRenderer = new Marker3DRenderer(map, {}, threeLayer);
@@ -4420,7 +4473,7 @@ var RendererManager = class extends EventTarget {
     if (this.#isClicked) return;
     this.#isClicked = true;
     const onClickElement = this.#onClickElement;
-    if (!(0, import_lodash_es3.isFunction)(onClickElement)) return;
+    if (!(0, import_lodash_es4.isFunction)(onClickElement)) return;
     this.#onClickElement(e);
     this.#isClicked = false;
   };
@@ -4473,12 +4526,12 @@ var RendererManager = class extends EventTarget {
     });
     units.filter((u4) => u4.properties.category === "room").forEach((unit) => {
       const openingRelationships = relationships.filter((r) => r.properties.origin?.id === unit.id || r.properties.destination?.id === unit.id);
-      const roomOpenings = (0, import_lodash_es3.compact)(openingRelationships.map((rel) => {
+      const roomOpenings = (0, import_lodash_es4.compact)(openingRelationships.map((rel) => {
         const openingId = rel?.properties.intermediary[0].id;
         return openings.find((o) => o.id === openingId);
       }));
       const innerElements = this.elementRenderer.createGeometry(unit);
-      const wallElements = this.elementRenderer.createRoomWall(unit, roomOpenings);
+      const wallElements = [];
       if (innerElements || wallElements) {
         const _innerElements = Array.isArray(innerElements) ? innerElements : [innerElements];
         const _wallElements = Array.isArray(wallElements) ? wallElements : [wallElements];
@@ -4533,10 +4586,12 @@ var RendererManager = class extends EventTarget {
     for (const label of groundLabels) {
       const center2 = (0, import_center3.center)(polygon(label.geometry.coordinates)).geometry.coordinates;
       const unit = findUnitOnPoint(units, center2);
-      const element = this.elementRenderer.createGroundLabel(label, unit);
-      if (element) {
-        const _elements = Array.isArray(element) ? element : [element];
-        this.addElementsToManager(label.id, _elements, label.properties.ordinal);
+      if (unit) {
+        const element = this.elementRenderer.createGroundLabel(label, unit);
+        if (element) {
+          const _elements = Array.isArray(element) ? element : [element];
+          this.addElementsToManager(label.id, _elements, label.properties.ordinal);
+        }
       }
     }
     if (this.options.type === "3D") {
@@ -4559,7 +4614,7 @@ var RendererManager = class extends EventTarget {
         this.markerRenderer.showMarkers(markers, ordinal - baseOrdinal);
       }
     } else {
-      const baseOrdinal = Array.isArray(targetOrdinal) ? (0, import_lodash_es3.min)(targetOrdinal) : targetOrdinal;
+      const baseOrdinal = Array.isArray(targetOrdinal) ? (0, import_lodash_es4.min)(targetOrdinal) : targetOrdinal;
       for (const [ordinal, elements] of this.elementsByOrdinal) {
         const inOrdinal = Array.isArray(targetOrdinal) ? targetOrdinal.includes(ordinal) : ordinal === targetOrdinal;
         if (inOrdinal) {
@@ -4586,7 +4641,7 @@ var RendererManager = class extends EventTarget {
     const elements = elemIds.map((id) => this.elementsMap.get(id)).flat();
     elements.forEach((element) => {
       const controller = this.elementRenderer.createHighlightController(element);
-      if (controller && (0, import_lodash_es3.isFunction)(controller.start)) {
+      if (controller && (0, import_lodash_es4.isFunction)(controller.start)) {
         controller.start();
         this.highlightControllers.push(controller);
       }
@@ -4594,7 +4649,7 @@ var RendererManager = class extends EventTarget {
   };
   clearHighlightElements = () => {
     this.highlightControllers.forEach((controller) => {
-      if ((0, import_lodash_es3.isFunction)(controller?.clear)) controller.clear();
+      if ((0, import_lodash_es4.isFunction)(controller?.clear)) controller.clear();
     });
   };
   /** 
@@ -4618,10 +4673,11 @@ var RendererManager = class extends EventTarget {
       this.markerRenderer.hideMarkers(markers, ordinal);
     }
   };
-  createMarker(coordinate, ordinal, text, options) {
-    const marker = this.markerRenderer.createMarker(coordinate, ordinal, text, options);
+  createMarker(type, coordinate, ordinal, textOrPath, options) {
+    const meshes = type === "text" ? this.markerRenderer.createTextMarker(coordinate, textOrPath, options) : this.markerRenderer.createImageMarker(coordinate, textOrPath, options);
     const markerId = `${this.markersMap.size + 1}`;
-    this._addMarkersToManager(markerId, [marker], ordinal);
+    const markerMeshes = Array.isArray(meshes) ? meshes : [meshes];
+    this._addMarkersToManager(markerId, markerMeshes, ordinal);
   }
   clearMarkers() {
     for (const [markerId, marker] of this.markersMap) {
@@ -4761,6 +4817,7 @@ var IndoorMap = class extends EventTarget {
     this.#dataClient = value;
     if (!this.options.camera?.defaultView?.center) {
       this.#dataClient.filterByType("venue").then((venues) => {
+        this.#venues = venues;
         const venueCenters = (0, import_center4.default)(featureCollection(venues));
         const [x, y] = venueCenters.geometry.coordinates;
         const center2 = new import_maptalks_gl.Coordinate(x, y);