venue-js 1.2.0-next.8 → 1.2.0-next.9

package/dist/index.d.mts

@@ -3,9 +3,10 @@ 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 * as maptalks$1 from 'maptalks-gl';
 import { Map } from 'maptalks-gl';
 import { BaseObject, ThreeLayer } from 'maptalks.three';
+import * as maptalks from 'maptalks';
 import { Extent, Coordinate, Marker, ui, LineString as LineString$1, Polygon as Polygon$1, MultiPolygon as MultiPolygon$1, MultiLineString } from 'maptalks';
 import { BaseObjectOptionType, ExtrudePolygonOptionType } from 'maptalks.three/dist/type';
 import { PolygonOptionsType } from 'maptalks/dist/geometry/Polygon';
@@ -796,6 +797,7 @@ type TextMarkerOptions = BaseObjectOptionType & {
 };
 
 type Stop = [zoom: number, value: number];
+type MapElement = maptalks.Geometry | BaseObject;
 /** 2D */
 type TypeRenderOptions<TOptionsType> = {
     default: TOptionsType;
@@ -829,12 +831,15 @@ type RendererManagerOptions = BaseRenderManagerOptions & {
     type: "3D";
     elements: Element3DRendererOptions;
 };
+type HighlightElementOptions = {
+    reset: boolean;
+};
 
 type AnyMarkerOptions = TextMarkerOptions;
 
 declare class RendererManager extends EventTarget {
     #private;
-    map: maptalks.Map;
+    map: maptalks$1.Map;
     options: RendererManagerOptions;
     /** Elements: Responsible for converting feature info elements and add to map */
     private elementRenderer;
@@ -844,16 +849,21 @@ declare class RendererManager extends EventTarget {
     private currentOrdinals;
     private markersMap;
     private markersByOrdinal;
-    constructor(map: maptalks.Map, dataClient: VenueDataClient, options: RendererManagerOptions);
-    getElementsByOrdinal: (ordinal: number) => BaseObject[] | maptalks.Geometry[];
-    getMarkersByOrdinal: (ordinal: number) => BaseObject[] | maptalks.ui.UIMarker[];
+    private highlightControllers;
+    constructor(map: maptalks$1.Map, dataClient: VenueDataClient, options: RendererManagerOptions);
+    set onClickElement(func: any);
+    handleClickElement: (e: any) => void;
+    getElementsByOrdinal: (ordinal: number) => MapElement[];
     addElementsToManager: (id: any, elements: any, ordinal: any) => void;
-    addMarkersToManager: (id: any, markers: any, ordinal: any) => void;
     changeLevelByOrdinal(targetOrdinal: null | number | number[]): void;
+    highlightElements: (elemIds: string[], options?: HighlightElementOptions) => void;
+    clearHighlightElements: () => void;
     /**
      * ========================================================================
      * Markers
      * ======================================================================== */
+    _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;
     clearMarkers(): void;
 }

package/dist/index.d.ts

@@ -3,9 +3,10 @@ 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 * as maptalks$1 from 'maptalks-gl';
 import { Map } from 'maptalks-gl';
 import { BaseObject, ThreeLayer } from 'maptalks.three';
+import * as maptalks from 'maptalks';
 import { Extent, Coordinate, Marker, ui, LineString as LineString$1, Polygon as Polygon$1, MultiPolygon as MultiPolygon$1, MultiLineString } from 'maptalks';
 import { BaseObjectOptionType, ExtrudePolygonOptionType } from 'maptalks.three/dist/type';
 import { PolygonOptionsType } from 'maptalks/dist/geometry/Polygon';
@@ -796,6 +797,7 @@ type TextMarkerOptions = BaseObjectOptionType & {
 };
 
 type Stop = [zoom: number, value: number];
+type MapElement = maptalks.Geometry | BaseObject;
 /** 2D */
 type TypeRenderOptions<TOptionsType> = {
     default: TOptionsType;
@@ -829,12 +831,15 @@ type RendererManagerOptions = BaseRenderManagerOptions & {
     type: "3D";
     elements: Element3DRendererOptions;
 };
+type HighlightElementOptions = {
+    reset: boolean;
+};
 
 type AnyMarkerOptions = TextMarkerOptions;
 
 declare class RendererManager extends EventTarget {
     #private;
-    map: maptalks.Map;
+    map: maptalks$1.Map;
     options: RendererManagerOptions;
     /** Elements: Responsible for converting feature info elements and add to map */
     private elementRenderer;
@@ -844,16 +849,21 @@ declare class RendererManager extends EventTarget {
     private currentOrdinals;
     private markersMap;
     private markersByOrdinal;
-    constructor(map: maptalks.Map, dataClient: VenueDataClient, options: RendererManagerOptions);
-    getElementsByOrdinal: (ordinal: number) => BaseObject[] | maptalks.Geometry[];
-    getMarkersByOrdinal: (ordinal: number) => BaseObject[] | maptalks.ui.UIMarker[];
+    private highlightControllers;
+    constructor(map: maptalks$1.Map, dataClient: VenueDataClient, options: RendererManagerOptions);
+    set onClickElement(func: any);
+    handleClickElement: (e: any) => void;
+    getElementsByOrdinal: (ordinal: number) => MapElement[];
     addElementsToManager: (id: any, elements: any, ordinal: any) => void;
-    addMarkersToManager: (id: any, markers: any, ordinal: any) => void;
     changeLevelByOrdinal(targetOrdinal: null | number | number[]): void;
+    highlightElements: (elemIds: string[], options?: HighlightElementOptions) => void;
+    clearHighlightElements: () => void;
     /**
      * ========================================================================
      * Markers
      * ======================================================================== */
+    _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;
     clearMarkers(): void;
 }

package/dist/index.js

@@ -853,7 +853,7 @@ function isNumber(num) {
 var import_distance = __toESM(require("@turf/distance"));
 var import_center4 = __toESM(require("@turf/center"));
 var import_three7 = require("three");
-var import_maptalks9 = require("maptalks.three");
+var import_maptalks10 = require("maptalks.three");
 
 // src/IndoorMap/constants.ts
 var defaultLayerOption = { enableAltitude: true };
@@ -3153,6 +3153,7 @@ var CameraManager = class {
 };
 
 // src/IndoorMap/renderer/RendererManager.ts
+var import_isFunction = __toESM(require("lodash/isFunction"));
 var import_min = __toESM(require("lodash/min"));
 var import_center3 = require("@turf/center");
 var THREE3 = __toESM(require("three"));
@@ -3160,6 +3161,7 @@ var THREE3 = __toESM(require("three"));
 // src/IndoorMap/renderer/3d/Element3DRenderer.ts
 var maptalks4 = __toESM(require("maptalks-gl"));
 var THREE = __toESM(require("three"));
+var import_maptalks7 = require("maptalks.three");
 var import_buffer2 = __toESM(require("@turf/buffer"));
 
 // src/IndoorMap/renderer/3d/element3DRendererOptions.ts
@@ -3210,6 +3212,7 @@ var Element3DRenderer = class extends EventTarget {
   map;
   gltfLayer;
   threeLayer;
+  scene;
   // private dracoLoader: DRACOLoader
   lineMaterial;
   materialByColorMap;
@@ -3341,6 +3344,9 @@ var Element3DRenderer = class extends EventTarget {
     treeMarker.addTo(this.gltfLayer);
     return treeMarker;
   }
+  async createBuilding(coordinate, ordinal) {
+    return Promise.resolve(null);
+  }
   createElement(f) {
     switch (f.feature_type) {
       default:
@@ -3362,6 +3368,34 @@ var Element3DRenderer = class extends EventTarget {
       }
     });
   }
+  createHighlightController(element) {
+    if (!(element instanceof import_maptalks7.BaseObject)) {
+      return null;
+    }
+    switch (element.type) {
+      case "ExtrudePolygon": {
+        const mesh = element.getObject3d();
+        const originalMaterial = mesh.material;
+        const highlightMaterial = this.getOrCreateMaterialByColor("#ff0000");
+        return {
+          start: () => {
+            mesh.material = highlightMaterial;
+          },
+          clear: () => {
+            mesh.material = originalMaterial;
+          }
+        };
+      }
+      default: {
+        return {
+          start() {
+          },
+          clear() {
+          }
+        };
+      }
+    }
+  }
   render() {
     this.threeLayer._needsUpdate = !this.threeLayer._needsUpdate;
     if (this.threeLayer._needsUpdate) {
@@ -3469,7 +3503,10 @@ var Element2DRenderer = class extends EventTarget {
   async createEscalator(f, coordinates) {
     return Promise.resolve(null);
   }
-  async createTree(f, coordinates) {
+  async createTree(coordinates) {
+    return Promise.resolve(null);
+  }
+  async createBuilding(coordinate, ordinal) {
     return Promise.resolve(null);
   }
   createElement = (imdfFeature) => {
@@ -3489,6 +3526,15 @@ var Element2DRenderer = class extends EventTarget {
       element.hide();
     });
   }
+  createHighlightController(element) {
+    if (!(element instanceof maptalks5.Geometry)) return null;
+    return {
+      start() {
+      },
+      clear() {
+      }
+    };
+  }
 };
 
 // src/IndoorMap/renderer/2d/Marker2DRenderer.ts
@@ -3524,9 +3570,9 @@ var Marker2DRenderer = class extends EventTarget {
 var maptalks7 = __toESM(require("maptalks-gl"));
 
 // src/IndoorMap/renderer/3d/objects/TextSpriteMarker.ts
-var import_maptalks7 = require("maptalks");
+var import_maptalks8 = require("maptalks");
 var THREE2 = __toESM(require("three"));
-var import_maptalks8 = require("maptalks.three");
+var import_maptalks9 = require("maptalks.three");
 var import_lodash6 = require("lodash");
 
 // src/IndoorMap/renderer/utils/interpolateStops.ts
@@ -3564,12 +3610,12 @@ var OPTIONS4 = {
   altitude: 0,
   opacity: 1
 };
-var TextSpriteMarker = class extends import_maptalks8.BaseObject {
+var TextSpriteMarker = class extends import_maptalks9.BaseObject {
   #altitudeOffset = 0;
   constructor(coordinate, options, layer, properties = {}) {
-    options = import_maptalks7.Util.extend({}, OPTIONS4, options, { layer });
+    options = import_maptalks8.Util.extend({}, OPTIONS4, options, { layer });
     super();
-    this._coordinate = new import_maptalks7.Coordinate(coordinate);
+    this._coordinate = new import_maptalks8.Coordinate(coordinate);
     this._initOptions(options);
     this._createGroup();
     this.properties = { ...properties };
@@ -3832,6 +3878,9 @@ var RendererManager = class extends EventTarget {
   options;
   // Client for fetching data
   #dataClient;
+  #isClicked = false;
+  #onClickElement = (e) => {
+  };
   /** Elements: Responsible for converting feature info elements and add to map */
   elementRenderer;
   markerRenderer;
@@ -3840,6 +3889,7 @@ var RendererManager = class extends EventTarget {
   currentOrdinals;
   markersMap;
   markersByOrdinal;
+  highlightControllers = [];
   constructor(map, dataClient, options) {
     super();
     this.map = map;
@@ -3858,7 +3908,7 @@ var RendererManager = class extends EventTarget {
         scene.add(ambientLight);
         const dirColor = 16777215;
         const dllight = new THREE3.DirectionalLight(dirColor, 0.8);
-        dllight.position.set(0, -10, 10).normalize();
+        dllight.position.set(0, -10, 20).normalize();
         scene.add(dllight);
         const hemi = new THREE3.HemisphereLight(16777215, 4473924, 0.4);
         scene.add(hemi);
@@ -3875,19 +3925,27 @@ var RendererManager = class extends EventTarget {
       this.#createElements();
     }
   }
+  set onClickElement(func) {
+    this.#onClickElement = func;
+  }
+  handleClickElement = (e) => {
+    console.log(`handleClickElement`, this.#isClicked);
+    if (this.#isClicked) return;
+    this.#isClicked = true;
+    const onClickElement = this.#onClickElement;
+    if (!(0, import_isFunction.default)(onClickElement)) return;
+    this.#onClickElement(e);
+    this.#isClicked = false;
+  };
   getElementsByOrdinal = (ordinal) => {
     const exist = this.elementsByOrdinal.get(ordinal);
     if (!exist) this.elementsByOrdinal.set(ordinal, []);
     return this.elementsByOrdinal.get(ordinal);
   };
-  getMarkersByOrdinal = (ordinal) => {
-    const exist = this.markersByOrdinal.get(ordinal);
-    if (!exist) this.markersByOrdinal.set(ordinal, []);
-    return this.markersByOrdinal.get(ordinal);
-  };
   addElementsToManager = (id, elements, ordinal) => {
     this.elementsMap.set(id, elements);
     elements.forEach((el) => {
+      el.on("click", (e) => this.handleClickElement(id));
       this.getElementsByOrdinal(ordinal).push(el);
     });
     const inOrdinal = Array.isArray(this.currentOrdinals) ? this.currentOrdinals.includes(ordinal) : ordinal === this.currentOrdinals;
@@ -3897,18 +3955,6 @@ var RendererManager = class extends EventTarget {
       this.elementRenderer.hideElements(elements, ordinal);
     }
   };
-  addMarkersToManager = (id, markers, ordinal) => {
-    this.markersMap.set(id, markers);
-    markers.forEach((el) => {
-      this.getMarkersByOrdinal(ordinal).push(el);
-    });
-    const inOrdinal = Array.isArray(this.currentOrdinals) ? this.currentOrdinals.includes(ordinal) : ordinal === this.currentOrdinals;
-    if (inOrdinal) {
-      this.markerRenderer.showMarkers(markers, ordinal);
-    } else {
-      this.markerRenderer.hideMarkers(markers, ordinal);
-    }
-  };
   async #createElements() {
     await delay(this.options.delayBeforeCreateElements ?? 0);
     const levels = await this.#dataClient.filterByType("level", {
@@ -4010,14 +4056,48 @@ var RendererManager = class extends EventTarget {
       }
     }
   }
+  highlightElements = (elemIds, options) => {
+    const { reset = true } = options ?? {};
+    if (reset) {
+      this.clearHighlightElements();
+    }
+    const elements = elemIds.map((id) => this.elementsMap.get(id)).flat();
+    elements.forEach((element) => {
+      const controller = this.elementRenderer.createHighlightController(element);
+      controller.start();
+      this.highlightControllers.push(controller);
+    });
+  };
+  clearHighlightElements = () => {
+    this.highlightControllers.forEach((controller) => {
+      if ((0, import_isFunction.default)(controller?.clear)) controller.clear();
+    });
+  };
   /** 
    * ========================================================================
    * Markers
    * ======================================================================== */
+  _getMarkersByOrdinal = (ordinal) => {
+    const exist = this.markersByOrdinal.get(ordinal);
+    if (!exist) this.markersByOrdinal.set(ordinal, []);
+    return this.markersByOrdinal.get(ordinal);
+  };
+  _addMarkersToManager = (id, markers, ordinal) => {
+    this.markersMap.set(id, markers);
+    markers.forEach((el) => {
+      this._getMarkersByOrdinal(ordinal).push(el);
+    });
+    const inOrdinal = Array.isArray(this.currentOrdinals) ? this.currentOrdinals.includes(ordinal) : ordinal === this.currentOrdinals;
+    if (inOrdinal) {
+      this.markerRenderer.showMarkers(markers, ordinal);
+    } else {
+      this.markerRenderer.hideMarkers(markers, ordinal);
+    }
+  };
   createMarker(coordinate, ordinal, text, options) {
     const marker = this.markerRenderer.createMarker(coordinate, ordinal, text, options);
     const markerId = `${this.markersMap.size + 1}`;
-    this.addMarkersToManager(markerId, [marker], ordinal);
+    this._addMarkersToManager(markerId, [marker], ordinal);
   }
   clearMarkers() {
     for (const [markerId, marker] of this.markersMap) {
@@ -4115,7 +4195,7 @@ var IndoorMap = class extends EventTarget {
       layers: []
     });
     const groupLayer = new import_maptalks_gl.GroupGLLayer("group", [], {}).addTo(this.map);
-    const threeLayer = new import_maptalks9.ThreeLayer("three", {
+    const threeLayer = new import_maptalks10.ThreeLayer("three", {
       forceRenderOnMoving: true,
       forceRenderOnRotating: true
     });
@@ -4217,7 +4297,7 @@ var IndoorMap = class extends EventTarget {
     this.map.setDevicePixelRatio(value);
   }
   set onClickElement(func) {
-    this.#onClickElement = func;
+    this.rendererManager.onClickElement = func;
   }
   set locale(value) {
     this.#locale = value || defaultOptions.locale;
@@ -4266,7 +4346,6 @@ var IndoorMap = class extends EventTarget {
     } = this.#styler;
     let elements = {};
     let object3ds = [];
-    const scene = this.threeLayer.getScene();
     for (const feature2 of this.#features) {
       try {
         const { feature_type: featureType, properties, id } = feature2;