venue-js 1.2.0-next.10 → 1.2.0-next.12

package/dist/index.mjs

@@ -685,18 +685,16 @@ var getDataClient = (options) => {
 
 // src/IndoorMap/IndoorMap.ts
 import {
-  ui as ui3,
   Map as Map2,
   TileLayer,
   LineString as LineString3,
-  Marker as Marker2,
   Coordinate as Coordinate4,
   GroupGLLayer,
   GLTFLayer
 } from "maptalks-gl";
 import "@maptalks/transcoders.draco";
-import TWEEN2 from "@tweenjs/tween.js";
-import _6 from "lodash";
+import TWEEN from "@tweenjs/tween.js";
+import _5 from "lodash";
 
 // ../../node_modules/@turf/helpers/dist/esm/index.js
 var earthRadius = 63710088e-1;
@@ -795,7 +793,6 @@ var GEOLOCATION = "geolocation";
 var ORIGIN_MARKER = "origin-marker";
 var DESTINATION_MARKER = "destination-marker";
 var DECORATION = "decoration";
-var ALWAYS_VISIBLE_FEATURE_TYPES = [VENUE, FOOTPRINT];
 var BASE_LAYER_NAME = "base";
 var POI_MARKER_LAYER_NAME = "poi";
 var MARKER_LAYER_NAME = "marker";
@@ -807,13 +804,6 @@ var USER_LOCATION_ELEMENT_ID = "user_location";
 var LAST_USER_LOCATION_ELEMENT_ID_PREFIX = "last_user_location-";
 var LOCALE_SYMBOL_KEY = "locale_symbol";
 var DEFAULT_LOCALE = "en";
-var DEFAULT_HIGHLIGHT_OPTIONS = {
-  symbolSet: null
-};
-var DEFAULT_SET_HIGHLIGHT_2DELEMENT_IDS_OPTIONS = {
-  symbolSet: null,
-  defaultMarker: false
-};
 var LAYERS = [
   BASE_LAYER_NAME,
   POI_MARKER_LAYER_NAME,
@@ -2874,45 +2864,6 @@ var getSuitablyValueBetweenBearings = (newBearing, currentBearing) => {
   return newBearing;
 };
 
-// src/IndoorMap/utils/createHighlightElement.ts
-import { Color as Color2 } from "three";
-import _5 from "lodash";
-import TWEEN from "@tweenjs/tween.js";
-var DEFAULT_ALTITUDE_FACTOR = 0.5;
-var createHighlighBillboardController = (obj, { altitudeFactor = DEFAULT_ALTITUDE_FACTOR } = {}) => {
-  const controller = { start: () => {
-  }, clear: () => {
-  } };
-  if (!(obj instanceof Billboard)) return controller;
-  const altitude = obj.properties.default.altitude;
-  const newAltitude = _5.clamp(altitude * altitudeFactor, 0, altitude);
-  const tween = new TWEEN.Tween({ altitude }).to({ altitude: newAltitude }, 800).easing(TWEEN.Easing.Quartic.Out).onUpdate((newUpdate) => {
-    obj.setLineHeight(newUpdate.altitude);
-  });
-  controller.start = () => {
-    tween.start();
-  };
-  controller.clear = () => {
-    tween.stop().to({ altitude }, 1600).startFromCurrentValues();
-  };
-  return controller;
-};
-var createHighlighExtrudeObjectController = (obj, { color }) => {
-  const controller = { start: () => {
-  }, clear: () => {
-  } };
-  if (obj?.type !== "ExtrudePolygon" || _5.isNil(obj?.object3d?.material?.color) || _5.isNil(color))
-    return controller;
-  controller.start = () => {
-    obj.object3d.material.color = new Color2(color);
-  };
-  controller.clear = () => {
-    const objectDefaultColor = _5.get(obj, "properties.defaultColor");
-    obj.object3d.material.color = new Color2(objectDefaultColor);
-  };
-  return controller;
-};
-
 // src/IndoorMap/camera/CameraManager.ts
 import { Extent } from "maptalks";
 
@@ -3135,7 +3086,8 @@ var element3DRendererOptions = {
     default: { color: "#ffffff", height: 0.5 },
     byCategory: {
       water: { color: "#ACD7EC", height: 0.1 },
-      vegetation: { color: "#91C499", height: 0.5 }
+      vegetation: { color: "#91C499", height: 0.5 },
+      wall: { color: "#787878", topColor: "#ffffff", height: 4.2, width: 1 }
     }
   }
 };
@@ -3242,6 +3194,20 @@ var Element3DRenderer = class extends EventTarget {
         return [];
       }
     };
+    const createLineString = (geometry, feature3) => {
+      try {
+        const color = feature3.properties.style.polygonFill ?? colorOptions ?? "#000000";
+        const material = this.getOrCreateMaterialByColor(color);
+        const extrudedLine = this.threeLayer.toExtrudeLine(
+          new maptalks4.LineString(geometry.coordinates),
+          { height: heightOptions, ...options },
+          material
+        );
+        return [extrudedLine];
+      } catch (err) {
+        return [];
+      }
+    };
     try {
       switch (feature2.geometry.type) {
         case "MultiPolygon": {
@@ -3261,6 +3227,13 @@ var Element3DRenderer = class extends EventTarget {
           this.threeLayer.addMesh(meshes);
           return meshes;
         }
+        case "LineString": {
+          const { coordinates } = feature2.geometry;
+          if (!coordinates) return [];
+          const meshes = createLineString(feature2.geometry, feature2);
+          this.threeLayer.addMesh(meshes);
+          return meshes;
+        }
       }
     } catch (err) {
       console.log(`error createGeometry`, err, { feature: feature2, options });
@@ -3323,7 +3296,8 @@ var Element3DRenderer = class extends EventTarget {
       return null;
     }
     switch (element.type) {
-      case "ExtrudePolygon": {
+      case "ExtrudePolygon":
+      case "ExtrudeLine": {
         const mesh = element.getObject3d();
         const originalMaterial = mesh.material;
         const highlightMaterial = this.getOrCreateMaterialByColor("#ff0000");
@@ -4061,6 +4035,7 @@ var INITIAL_ZOOM = 18.5;
 var CLICK_TOLERANCE = 20;
 var defaultOptions = {
   pixelRatio: 1,
+  interactions: true,
   locale: DEFAULT_LOCALE
 };
 var IndoorMap = class extends EventTarget {
@@ -4116,7 +4091,7 @@ var IndoorMap = class extends EventTarget {
   };
   constructor(elementId, options) {
     super();
-    const combinedOptions = _6.merge({}, defaultOptions, options);
+    const combinedOptions = _5.merge({}, defaultOptions, options);
     this.options = options;
     const {
       onMapReady,
@@ -4132,6 +4107,15 @@ var IndoorMap = class extends EventTarget {
       zoom: INITIAL_ZOOM,
       clickTimeThreshold: 600,
       centerCross: options.centerCross ?? false,
+      ...options.interactions === false ? {
+        draggable: false,
+        dragPan: false,
+        dragRotate: false,
+        dragPitch: false,
+        scrollWheelZoom: false,
+        touchZoom: false,
+        doubleClickZoom: false
+      } : {},
       baseLayer: new TileLayer("base", {
         urlTemplate: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
         subdomains: ["a", "b", "c", "d"],
@@ -4181,7 +4165,7 @@ var IndoorMap = class extends EventTarget {
   handleMapClick = ({ coordinate }) => {
     const { x, y } = coordinate;
     console.log(
-      `[Coordinates]: x: ${_6.round(x, 8)} y: ${_6.round(
+      `[Coordinates]: x: ${_5.round(x, 8)} y: ${_5.round(
         y,
         8
       )}, [Bearing]: ${this.map.getBearing()}, [Pitch]: ${this.map.getPitch()}`
@@ -4270,7 +4254,7 @@ var IndoorMap = class extends EventTarget {
     if (this.#isClicked) return;
     this.#isClicked = true;
     const onClickElement = this.#onClickElement;
-    if (!_6.isFunction(onClickElement)) return;
+    if (!_5.isFunction(onClickElement)) return;
     this.#onClickElement(e);
     this.#isClicked = false;
   };
@@ -4298,16 +4282,16 @@ var IndoorMap = class extends EventTarget {
     for (const feature2 of this.#features) {
       try {
         const { feature_type: featureType, properties, id } = feature2;
-        const layerName = _6.get(
+        const layerName = _5.get(
           LAYER_FEATURE_TYPE_OBJ,
           featureType,
           featureType
         );
         const layer = this.map.getLayer(layerName);
         let geometry;
-        const category = _6.get(feature2, "properties.category");
-        const extrudeConfig = _6.get(this.#mapConfig, "extrude");
-        const textMarkerType = _6.get(
+        const category = _5.get(feature2, "properties.category");
+        const extrudeConfig = _5.get(this.#mapConfig, "extrude");
+        const textMarkerType = _5.get(
           this.#mapConfig,
           "text_marker_type",
           "ui-marker"
@@ -4460,186 +4444,6 @@ var IndoorMap = class extends EventTarget {
   clearAnimations() {
     this.#animationsToRun = [];
   }
-  /**
-   * Hilighting Elements
-   * ========================================= */
-  // TODO: To consider if we should use setter `set hilightElementIds` instead?
-  setHighlightElementIds(targetElementIds, options = {}) {
-    const highlight3DOptions = _6.merge(
-      {},
-      DEFAULT_HIGHLIGHT_OPTIONS,
-      _6.get(options, "highlight3DOptions", {})
-    );
-    const highlight2DOptions = _6.merge(
-      {},
-      DEFAULT_SET_HIGHLIGHT_2DELEMENT_IDS_OPTIONS,
-      _6.get(options, "highlight2DOptions", {})
-    );
-    this.setHighlightedObject(targetElementIds, highlight3DOptions);
-    return this.setHighlight2DElementIds(targetElementIds, highlight2DOptions);
-  }
-  setHighlight2DElementIds(targetElementIds, options = {}) {
-    const { defaultMarker, symbolSet } = _6.merge(
-      {},
-      DEFAULT_SET_HIGHLIGHT_2DELEMENT_IDS_OPTIONS,
-      options
-    );
-    const {
-      createMarker,
-      createHighlightOccupantMarker,
-      getElementSymbol,
-      getHilighPolygonalSymbol,
-      getHighlightMarkerSymbol
-    } = this.#styler;
-    const extrudeConfig = _6.get(this.#mapConfig, "extrude");
-    const elementToHilights = targetElementIds.map(
-      (elemId) => this.#elements[elemId] || this.#elements[`${LAST_USER_LOCATION_ELEMENT_ID_PREFIX}${elemId}`]
-    ).filter((elem) => elem);
-    elementToHilights.forEach((elem) => {
-      const { feature: feature2, geometry } = elem;
-      if (!geometry || !feature2) return;
-      const hilightLayer = this.map.getLayer(HIGHLIGHT_LAYER_NAME);
-      if (!hilightLayer) return;
-      const defaultSymbol = getHilighPolygonalSymbol(geometry.type);
-      const definedSymbol = symbolSet ? getElementSymbol(symbolSet) : null;
-      const symbol = _6.isEmpty(definedSymbol) ? defaultSymbol : definedSymbol;
-      switch (geometry.type) {
-        case "MultiPolygon":
-        case "Polygon": {
-          geometry?.updateSymbol(symbol);
-          break;
-        }
-        default:
-          break;
-      }
-      switch (feature2.feature_type) {
-        case "amenity":
-          const highlightedAmenityMarker = definedSymbol || getHighlightMarkerSymbol();
-          geometry?.updateSymbol(highlightedAmenityMarker);
-          break;
-        case "occupant": {
-          switch (feature2.properties.category) {
-            case "currencyexchange":
-            case "donationcenter":
-            case "postoffice":
-              const highlightedAmenityMarker2 = definedSymbol || getHighlightMarkerSymbol();
-              geometry?.updateSymbol(highlightedAmenityMarker2);
-              break;
-            default:
-              if (feature2.properties.render_type === "Logo") {
-                this.hideGeometryByElementId(feature2.id);
-              }
-              createHighlightOccupantMarker(feature2, {
-                extrudeConfig,
-                symbol: definedSymbol
-              }).on("click", this.handleClickElement).addTo(hilightLayer);
-              break;
-          }
-          break;
-        }
-        case "opening":
-          break;
-        default:
-          if (defaultMarker) createMarker(feature2).addTo(hilightLayer);
-          break;
-      }
-    });
-    this.#highlightElementIds = targetElementIds;
-    if (elementToHilights.length === 0) return;
-    return featureCollection(
-      elementToHilights.map(({ feature: feature2 }) => {
-        const { geometry } = feature2;
-        if (feature2.feature_type === "occupant")
-          return feature(feature2?.properties?.anchor?.geometry);
-        return feature(geometry);
-      })
-    );
-  }
-  clearHighlightElements() {
-    this.#clearAllElementOnLayerByName(HIGHLIGHT_LAYER_NAME);
-    _6(this.#highlightElementIds).map((elemId) => this.#elements[elemId]?.geometry).compact().forEach((geometry) => {
-      if (geometry instanceof ui3.UIMarker) return;
-      if (geometry instanceof Marker2) {
-        this.showGeometryByElementId(geometry.properties.id);
-        return;
-      }
-      try {
-        const defaultSymbol = geometry.options.defaultSymbol;
-        geometry.updateSymbol(defaultSymbol);
-      } catch (err) {
-        console.log(
-          `error cannot return to defaultSymbol, check if "defaultSymbol" exists in element creation function`
-        );
-      }
-    });
-    this.#highlightElementIds = [];
-  }
-  setHighlightedObject(targetObjectIds, options = {}) {
-    const { symbolSet } = _6.merge({}, DEFAULT_HIGHLIGHT_OPTIONS, options);
-    const {
-      getElementSymbol,
-      getHilighPolygonalSymbol,
-      createHighlight2DAmenityMarkerFrom3DMarker
-    } = this.#styler;
-    const objects = this.threeLayer?.getBaseObjects();
-    const objectsToHighlight = objects.filter(
-      ({ properties }) => targetObjectIds.includes(properties?.id)
-    );
-    const defaultSymbol = getHilighPolygonalSymbol("Polygon");
-    const targetSymbol = symbolSet ? getElementSymbol(symbolSet) : null;
-    const { polygonFill: color } = _6.isEmpty(targetSymbol) ? defaultSymbol : targetSymbol;
-    const amenityHighlightMode = _6.get(
-      this.#mapConfig,
-      "amenity_highlight_mode",
-      ""
-    );
-    objectsToHighlight.forEach((obj) => {
-      if (obj.type === "ExtrudePolygon") {
-        const newController = createHighlighExtrudeObjectController(obj, {
-          color
-        });
-        newController.start();
-        this.#highlightObjectControllers.push(newController);
-      }
-      if (obj instanceof SpriteMarker) {
-        if (amenityHighlightMode === "2DMarker") {
-          const hilight2DLayer = this.map.getLayer(HIGHLIGHT_LAYER_NAME);
-          const extrudeConfig = _6.get(this.#mapConfig, "extrude");
-          obj.hide();
-          const { properties: featureProperties } = obj;
-          createHighlight2DAmenityMarkerFrom3DMarker(
-            featureProperties,
-            extrudeConfig
-          ).on("click", this.handleClickElement).addTo(hilight2DLayer);
-        } else {
-          obj.highlight();
-        }
-      }
-      if (obj instanceof Billboard) {
-        const newController = createHighlighBillboardController(obj);
-        newController.start();
-        this.#highlightObjectControllers.push(newController);
-      }
-    });
-    this.#highlightObjectIds = targetObjectIds;
-  }
-  clearHighlightObject() {
-    this.#highlightObjectControllers.forEach((controller) => {
-      if (_6.isFunction(controller?.clear)) controller.clear();
-    });
-    this.#highlightObjectIds.forEach((objIds) => {
-      const objects = this.threeLayer?.getBaseObjects();
-      const objectToResetHighlight = objects.find(
-        ({ properties }) => objIds.includes(properties?.id)
-      );
-      if (objectToResetHighlight instanceof SpriteMarker) {
-        objectToResetHighlight.show();
-        objectToResetHighlight.removeHighlight();
-      }
-    });
-    this.#highlightObjectControllers = [];
-    this.#highlightObjectIds = [];
-  }
   /**
    * User Location
    ****************************/
@@ -4664,15 +4468,15 @@ var IndoorMap = class extends EventTarget {
     }
   }
   updateUserLocationSymbolByLocale(locale) {
-    const userLocationGeometry = _6.get(
+    const userLocationGeometry = _5.get(
       this.#elements,
       `${USER_LOCATION_ELEMENT_ID}.geometry`
     );
     if (!userLocationGeometry) return;
     const currentSymbol = userLocationGeometry.getSymbol();
     const localeSymbolToUpdate = currentSymbol.map((symbol) => {
-      const localeSymbol = _6.get(symbol, `${LOCALE_SYMBOL_KEY}.${locale}`) || _6.get(symbol, `${LOCALE_SYMBOL_KEY}.default`);
-      if (!_6.isPlainObject(localeSymbol)) return symbol;
+      const localeSymbol = _5.get(symbol, `${LOCALE_SYMBOL_KEY}.${locale}`) || _5.get(symbol, `${LOCALE_SYMBOL_KEY}.default`);
+      if (!_5.isPlainObject(localeSymbol)) return symbol;
       return {
         ...symbol,
         ...localeSymbol
@@ -4746,14 +4550,14 @@ var IndoorMap = class extends EventTarget {
    * END of User Location
    ****************************/
   showGeometryByElementId = (elementId) => {
-    const geometry = _6.get(
+    const geometry = _5.get(
       this.#elements,
       `${elementId}.geometry`
     );
     if (geometry) geometry.show();
   };
   hideGeometryByElementId = (elementId) => {
-    const geometry = _6.get(this.#elements, `${elementId}.geometry`);
+    const geometry = _5.get(this.#elements, `${elementId}.geometry`);
     if (geometry) geometry.hide();
   };
   setSpriteMarkersOpacity = (opacity = 1) => {
@@ -4800,13 +4604,13 @@ var IndoorMap = class extends EventTarget {
       const line = lineStrings[i];
       const coords = line.geometry.coordinates;
       const prevLine = lineStrings[i - 1];
-      const firstCoord = _6.first(coords);
+      const firstCoord = _5.first(coords);
       const isFirstLine = i === 0;
       if (isFirstLine) {
         accLine.push(...coords);
         continue;
       }
-      const prevLastCoord = _6.last(prevLine.geometry.coordinates);
+      const prevLastCoord = _5.last(prevLine.geometry.coordinates);
       const isNearby = turfDistance(point(firstCoord), point(prevLastCoord)) < distance;
       if (!isNearby) {
         const remainingLines = lineStrings.slice(i);
@@ -4827,8 +4631,8 @@ var IndoorMap = class extends EventTarget {
       create3DStepPath
     } = this.#styler;
     const routeMarkerLayer = this.map.getLayer(HIGHLIGHT_LAYER_NAME);
-    const linesByOrdinal = _6(stepGeometries).filter(({ geometry }) => geometry.type === "LineString").groupBy("properties.ordinal").value();
-    const joinedLines = _6(linesByOrdinal).reduce((acc, lines, key) => {
+    const linesByOrdinal = _5(stepGeometries).filter(({ geometry }) => geometry.type === "LineString").groupBy("properties.ordinal").value();
+    const joinedLines = _5(linesByOrdinal).reduce((acc, lines, key) => {
       const joined = this.combineNearbyLineStrings(lines, {
         properties: { ordinal: +key }
       });
@@ -4856,14 +4660,14 @@ var IndoorMap = class extends EventTarget {
                 stepElement = createOriginMarker(stepGeometry).addTo(routeMarkerLayer);
                 break;
               case "destination-marker":
-                const extrudeConfig = _6.get(this.#mapConfig, "extrude");
+                const extrudeConfig = _5.get(this.#mapConfig, "extrude");
                 if (destinationFeature.feature_type === "occupant") {
-                  const stepId = _6.get(stepGeometry, "id");
+                  const stepId = _5.get(stepGeometry, "id");
                   const normalizedDestinationFeature = {
                     ...destinationFeature,
                     id: stepId
                   };
-                  const logoUrl = _6.get(
+                  const logoUrl = _5.get(
                     normalizedDestinationFeature,
                     "properties.logo.url"
                   );
@@ -4908,15 +4712,15 @@ var IndoorMap = class extends EventTarget {
     const routeMarkerLayer = this.map.getLayer(
       HIGHLIGHT_LAYER_NAME
     );
-    const originMarkerGeometry = _6.get(
+    const originMarkerGeometry = _5.get(
       this.#elements,
       `${ORIGIN_MARKER_ID}.geometry`
     );
-    const destinationMarkerGeometry = _6.get(
+    const destinationMarkerGeometry = _5.get(
       this.#elements,
       `${DESTINATION_MARKER_ID}.geometry`
     );
-    const geometriesToRemove = _6.compact([
+    const geometriesToRemove = _5.compact([
       originMarkerGeometry,
       destinationMarkerGeometry
     ]);
@@ -4927,7 +4731,7 @@ var IndoorMap = class extends EventTarget {
       (obj) => !(obj instanceof NavigationPath)
     );
     const objects = this.#navigationGeometries || {};
-    _6.forEach(objects, (obj) => {
+    _5.forEach(objects, (obj) => {
       if (!obj) return;
       this.#navigationGeometries[obj.properties.id] = null;
       obj.remove();
@@ -4964,7 +4768,7 @@ var IndoorMap = class extends EventTarget {
     }
     if (this.threeLayer) {
       const currentView = this.camera.getView();
-      const objectOpacity = _6.clamp(38 - 2 * currentView.zoom, 0, 1);
+      const objectOpacity = _5.clamp(38 - 2 * currentView.zoom, 0, 1);
       this.#objects.forEach((object) => {
         object.getObject3d().traverse((child) => {
           if (child.isMesh) child.material.opacity = objectOpacity;
@@ -4974,7 +4778,7 @@ var IndoorMap = class extends EventTarget {
       });
       if (this.#billboardObjects) {
         this.#billboardObjects.forEach((object) => {
-          const objectScale = _6.clamp(
+          const objectScale = _5.clamp(
             20 - 1 * currentView.zoom,
             1,
             1.05
@@ -4983,7 +4787,7 @@ var IndoorMap = class extends EventTarget {
         });
       }
       if (this.#isLayersFadingOnZoom) {
-        const layerOpacity = _6.clamp(1 - objectOpacity, 0, 1);
+        const layerOpacity = _5.clamp(1 - objectOpacity, 0, 1);
         LAYERS.forEach((layerKey) => {
           const layer = this.map.getLayer(layerKey);
           if (layer) layer.setOpacity(layerOpacity);
@@ -5002,18 +4806,15 @@ var IndoorMap = class extends EventTarget {
       });
     }
     this.#animationsToRun.forEach(({ callback }) => callback(this));
-    TWEEN2.update();
+    TWEEN.update();
     requestAnimationFrame(this.render.bind(this));
   }
 };
 export {
   ALL_FEATURE_TYPES,
-  ALWAYS_VISIBLE_FEATURE_TYPES,
   BASE_LAYER_NAME,
   DEFAULT_BASE_URL,
-  DEFAULT_HIGHLIGHT_OPTIONS,
   DEFAULT_LOCALE,
-  DEFAULT_SET_HIGHLIGHT_2DELEMENT_IDS_OPTIONS,
   DESTINATION_MARKER_ID,
   GEOJSON_FEATURE_TYPES,
   HIGHLIGHT_LAYER_NAME,