venue-js 1.0.0-next.2 → 1.0.0-next.3

package/dist/index.mjs

@@ -3238,12 +3238,15 @@ var CameraManager = class {
   };
 };
 
+// src/IndoorMap/renderer/RendererManager.ts
+import _min from "lodash/min";
+import _partition from "lodash/partition";
+
 // src/IndoorMap/renderer/Element3DRenderer.ts
 import * as maptalks5 from "maptalks";
 import * as THREE2 from "three";
 import { ThreeLayer as ThreeLayer3 } from "maptalks.three";
 import turfBuffer2 from "@turf/buffer";
-import { MeshLambertMaterial as MeshLambertMaterial3 } from "three";
 
 // src/IndoorMap/object3d/Escalator.ts
 import * as maptalks4 from "maptalks";
@@ -3330,6 +3333,31 @@ var Escalator = class extends BaseObject5 {
   }
 };
 
+// src/IndoorMap/renderer/default/element3DRendererOptions.ts
+var element3DRendererOptions = {
+  unit: {
+    default: { color: "#ffffff", height: 4 },
+    byCategory: {
+      walkway: { color: "#cccccc", height: 0.1 },
+      terrace: { color: "#cccccc", height: 0.1 },
+      unenclosedarea: { color: "#cccccc", height: 0.2 },
+      nonpublic: { color: "#999999", height: 0.3 },
+      escalator: { height: 0.2 },
+      room: { color: "#ffffff", height: 4, bottomHeight: 0.12 }
+    }
+  },
+  kiosk: {
+    default: { color: "#666666", height: 0.6, bottomHeight: 0.12 }
+  },
+  fixture: {
+    default: { color: "#ffffff", height: 0.5 },
+    byCategory: {
+      water: { color: "#ACD7EC", height: 0.5 },
+      vegetation: { color: "#91C499", height: 0.5 }
+    }
+  }
+};
+
 // src/IndoorMap/renderer/Element3DRenderer/utils/svg2material.ts
 import { SpriteMaterial as SpriteMaterial4, TextureLoader as TextureLoader3 } from "three";
 var svgToDataURL = (svgString, scaleFactor = 1) => {
@@ -3404,9 +3432,10 @@ var DEFAULT_POLYGON_OPTION = {
   altitude: 0
 };
 var HEIGHT_METER = 4;
+var MULTIORDINAL_HEIGHT_METER = 10;
 var getGeometryOption = (feature2, options) => {
   try {
-    const option = options[feature2.feature_type];
+    const option = options[feature2.feature_type] ?? element3DRendererOptions[feature2.feature_type];
     const category = feature2.properties.category;
     return (category && option.byCategory?.[category]) ?? option?.default ?? DEFAULT_POLYGON_OPTION;
   } catch (err) {
@@ -3459,45 +3488,11 @@ var Element3DRenderer = class extends EventTarget {
     if (!this.materialByColorMap) this.materialByColorMap = /* @__PURE__ */ new Map();
     const existingMaterial = this.materialByColorMap.get(color);
     if (existingMaterial) return existingMaterial;
-    const created = new MeshLambertMaterial3({ color, transparent: true });
+    const created = new THREE2.MeshLambertMaterial({ color, transparent: true });
     created.toneMapped = false;
     this.materialByColorMap.set(color, created);
     return created;
   }
-  getOrCreateIconMaterial(key) {
-    if (!this.materialByKey) this.materialByKey = /* @__PURE__ */ new Map();
-    const existingMaterial = this.materialByKey.get(key);
-    if (existingMaterial) return existingMaterial;
-    const baseSymbol = {
-      markerType: "path",
-      markerPath: [
-        {
-          path: "M20.775 1.2H1.225V20.35H8.215L11.3 22.8L14.385 20.35H20.775V1.2Z",
-          fill: "#ff0000"
-        }
-      ],
-      markerPathWidth: 24,
-      markerPathHeight: 24
-    };
-    const markerSymbol = {
-      markerType: "path",
-      markerPath: [],
-      // TODO: Get Path by featureType.category
-      // markerPath: [{ fill: "#FFFFFF", path: "M 19 3 H 5 c -1.1 0 -2 0.9 -2 2 v 14 c 0 1.1 0.9 2 2 2 h 14 c 1.1 0 2 -0.9 2 -2 V 5 c 0 -1.1 -0.9 -2 -2 -2 Z m -2 6 h -1.7 l -5 9 H 7 c -0.83 0 -1.5 -0.67 -1.5 -1.5 S 6.17 15 7 15 h 1.7 l 5 -9 H 17 c 0.83 0 1.5 0.67 1.5 1.5 S 17.83 9 17 9 Z" }],
-      markerPathWidth: 24,
-      markerPathHeight: 24,
-      markerWidth: 24,
-      markerHeight: 24,
-      markerDy: 1.5,
-      markerDx: 1.5
-    };
-    const created = createSpriteMaterialByLabelSymbol2([
-      baseSymbol,
-      markerSymbol
-    ]);
-    this.materialByKey.set(key, created);
-    return created;
-  }
   createGeometry = (feature2) => {
     const options = getGeometryOption(feature2, this.options);
     const offset = options?.offset ?? 0;
@@ -3520,7 +3515,7 @@ var Element3DRenderer = class extends EventTarget {
       ];
       const topLines = this.threeLayer.toLines(
         topLineStrings,
-        { altitude: altitude + options.height + 1e-3, bottomHeight, interactive: false },
+        { altitude, bottomHeight: bottomHeight + options.height + 1e-3, interactive: false },
         this.lineMaterial
       );
       const bottomLineStrings = [
@@ -3555,6 +3550,41 @@ var Element3DRenderer = class extends EventTarget {
       console.log(`error createGeometry`, { feature: feature2, options });
     }
   };
+  /** Marker */
+  getOrCreateIconMaterial(key) {
+    if (!this.materialByKey) this.materialByKey = /* @__PURE__ */ new Map();
+    const existingMaterial = this.materialByKey.get(key);
+    if (existingMaterial) return existingMaterial;
+    const baseSymbol = {
+      markerType: "path",
+      markerPath: [
+        {
+          path: "M20.775 1.2H1.225V20.35H8.215L11.3 22.8L14.385 20.35H20.775V1.2Z",
+          fill: "#ff0000"
+        }
+      ],
+      markerPathWidth: 24,
+      markerPathHeight: 24
+    };
+    const markerSymbol = {
+      markerType: "path",
+      markerPath: [],
+      // TODO: Get Path by featureType.category
+      // markerPath: [{ fill: "#FFFFFF", path: "M 19 3 H 5 c -1.1 0 -2 0.9 -2 2 v 14 c 0 1.1 0.9 2 2 2 h 14 c 1.1 0 2 -0.9 2 -2 V 5 c 0 -1.1 -0.9 -2 -2 -2 Z m -2 6 h -1.7 l -5 9 H 7 c -0.83 0 -1.5 -0.67 -1.5 -1.5 S 6.17 15 7 15 h 1.7 l 5 -9 H 17 c 0.83 0 1.5 0.67 1.5 1.5 S 17.83 9 17 9 Z" }],
+      markerPathWidth: 24,
+      markerPathHeight: 24,
+      markerWidth: 24,
+      markerHeight: 24,
+      markerDy: 1.5,
+      markerDx: 1.5
+    };
+    const created = createSpriteMaterialByLabelSymbol2([
+      baseSymbol,
+      markerSymbol
+    ]);
+    this.materialByKey.set(key, created);
+    return created;
+  }
   createMarker = (coordinates, ordinal, label) => {
     const options = {
       scale: 0.05,
@@ -3598,6 +3628,17 @@ var Element3DRenderer = class extends EventTarget {
         return null;
     }
   }
+  showElements(elements, ordinalDiff = 0) {
+    elements.forEach((element) => {
+      element.setAltitude(ordinalDiff * MULTIORDINAL_HEIGHT_METER);
+      element.show();
+    });
+  }
+  hideElements(elements, ordinalDiff = 0) {
+    elements.forEach((element) => {
+      element.hide();
+    });
+  }
   render() {
     this.threeLayer._needsUpdate = !this.threeLayer._needsUpdate;
     if (this.threeLayer._needsUpdate) {
@@ -3609,7 +3650,32 @@ var Element3DRenderer = class extends EventTarget {
 
 // src/IndoorMap/renderer/Element2DRenderer.ts
 import * as maptalks6 from "maptalks";
-var OCCUPANT_TEXT_MARKER_CLASSNAME2 = "mtk-occupant-text-marker";
+
+// src/IndoorMap/renderer/default/element2DRendererOptions.ts
+var element2DRendererOptions = {
+  unit: {
+    default: { symbol: { polygonFill: "#cccccc" } },
+    byCategory: {
+      room: { symbol: { polygonFill: "#fff" } },
+      walkway: { symbol: { polygonFill: "#efefef", lineColor: "#dadada", lineWidth: 2 } },
+      terrace: { symbol: { polygonFill: "#efefef" } },
+      unenclosedarea: { symbol: { polygonFill: "#fff" } },
+      nonpublic: { symbol: { polygonFill: "#999999" } }
+    }
+  },
+  kiosk: {
+    default: {}
+  },
+  fixture: {
+    default: { symbol: { polygonFill: "#ffffff" } },
+    byCategory: {
+      water: { symbol: { polygonFill: "#ACD7EC" } },
+      vegetation: { symbol: { polygonFill: "#91C499" } }
+    }
+  }
+};
+
+// src/IndoorMap/renderer/Element2DRenderer.ts
 var DEFAULT_POLYGON_OPTION2 = {
   zIndex: 0,
   symbol: {
@@ -3619,6 +3685,7 @@ var DEFAULT_POLYGON_OPTION2 = {
     lineWidth: 2
   }
 };
+var MULTIORDINAL_HEIGHT_METER2 = 10;
 var getGeometryProperties = (feature2) => ({
   // Core
   type: "Feature",
@@ -3628,11 +3695,11 @@ var getGeometryProperties = (feature2) => ({
   // Extra
   feature_type: feature2.feature_type,
   category: feature2.properties.category,
-  name: feature2.properties.name.en
+  name: feature2.properties.name?.en
 });
 var getGeometryOption2 = (feature2, options) => {
   try {
-    const option = options[feature2.feature_type];
+    const option = options[feature2.feature_type] ?? element2DRendererOptions[feature2.feature_type];
     const category = feature2.properties.category;
     return (category && option.byCategory?.[category]) ?? option?.default ?? DEFAULT_POLYGON_OPTION2;
   } catch (err) {
@@ -3677,36 +3744,63 @@ var Element2DRenderer = class extends EventTarget {
       return geometry;
     }
   };
-  createMarker = (coordinates, ordinal, label) => {
-    const createStyledUIMarkerElement2 = ({ style: style2, textContent, className }) => {
-      const element = document.createElement("div");
-      for (const key in style2) {
-        element.style[key] = style2[key];
-      }
-      element.className = className;
-      element.textContent = textContent;
-      return element.outerHTML;
-    };
-    const style = {};
-    const marker = new maptalks6.ui.UIMarker(coordinates, {
-      content: createStyledUIMarkerElement2({
-        style,
-        textContent: label,
-        className: OCCUPANT_TEXT_MARKER_CLASSNAME2
-      }),
-      collision: true,
-      collisionFadeIn: true
-      // altitude: getAltitude(f.properties) + markerHeight,
-    });
-    marker.addTo(this.map);
-    return marker;
-  };
   createElement = (imdfFeature) => {
     switch (imdfFeature.feature_type) {
       default:
         return null;
     }
   };
+  showElements(elements, ordinalDiff = 0) {
+    elements.forEach((element) => {
+      element.setAltitude(ordinalDiff * MULTIORDINAL_HEIGHT_METER2);
+      element.show();
+    });
+  }
+  hideElements(elements, ordinalDiff = 0) {
+    elements.forEach((element) => {
+      element.hide();
+    });
+  }
+  // createMarker = (
+  //   coordinates: Position,
+  //   ordinal: number,
+  //   label: string
+  // ): maptalks.ui.UIMarker => {
+  //   const createStyledUIMarkerElement = ({ style, textContent, className }) => {
+  //     const element = document.createElement("div")
+  //     for (const key in style) {
+  //       element.style[key] = style[key]
+  //     }
+  //     element.className = className
+  //     element.textContent = textContent
+  //     //! Use outerHTML to return HTML string instead of element object to avoid DOM event warnings from Maptalks.js.
+  //     return element.outerHTML
+  //   }
+  //   const style = {}
+  //   // const markerHeight = 0
+  //   const marker = new maptalks.ui.UIMarker(coordinates, {
+  //     content: createStyledUIMarkerElement({
+  //       style,
+  //       textContent: label,
+  //       className: OCCUPANT_TEXT_MARKER_CLASSNAME,
+  //     }),
+  //     collision: true,
+  //     collisionFadeIn: true,
+  //     altitude: MULTIORDINAL_HEIGHT_METER * ordinal,
+  //   })
+  //   marker.addTo(this.map)
+  //   return marker
+  // }
+  createMarker = (coordinates, ordinal, content) => {
+    const marker = new maptalks6.ui.UIMarker(coordinates, {
+      content,
+      collision: true,
+      collisionFadeIn: true,
+      altitude: MULTIORDINAL_HEIGHT_METER2 * ordinal
+    });
+    marker.addTo(this.map);
+    return marker;
+  };
 };
 
 // src/IndoorMap/renderer/RendererManager.ts
@@ -3730,6 +3824,7 @@ var RendererManager = class extends EventTarget {
   set dataClient(value) {
     this.#dataClient = value;
     if (this.elementRenderer.isReady) {
+      this.dispatchEvent(new CustomEvent("renderermanager:ready"));
       this.#createElements();
     } else {
       this.elementRenderer.addEventListener("threelayer:ready", (e) => {
@@ -3761,7 +3856,18 @@ var RendererManager = class extends EventTarget {
     const units = await this.#dataClient.filterByType("unit", {
       populate: true
     });
-    units.filter(
+    const [walkways, otherUnits] = _partition(units, (u) => ["walkway"].includes(u.properties.category));
+    walkways.forEach((unit) => {
+      const element = this.elementRenderer.createGeometry(unit);
+      if (element) {
+        const _elements = Array.isArray(element) ? element : [element];
+        _elements.forEach((el) => {
+          this.elementsMap.set(unit.id, el);
+          this.getElementsByOrdinal(unit.properties.level.properties.ordinal).push(el);
+        });
+      }
+    });
+    otherUnits.filter(
       (u) => !["opentobelow", "escalator"].includes(u.properties.category)
     ).forEach((unit) => {
       const element = this.elementRenderer.createGeometry(unit);
@@ -3789,22 +3895,30 @@ var RendererManager = class extends EventTarget {
     this.dispatchEvent(new CustomEvent("renderermanager:elements_created"));
   }
   changeLevelByOrdinal(targetOrdinal) {
-    for (const [ordinal, elements] of this.elementsByOrdinal) {
-      const inOrdinal = targetOrdinal === null ? true : Array.isArray(targetOrdinal) ? targetOrdinal.includes(ordinal) : ordinal === targetOrdinal;
-      if (inOrdinal) {
-        elements.forEach((element, i) => {
-          element.show();
-        });
-      } else {
-        elements.forEach((element) => {
-          element.hide();
-        });
+    if (targetOrdinal === null) {
+      const baseOrdinal = 0;
+      for (const [ordinal, elements] of this.elementsByOrdinal) {
+        this.elementRenderer.showElements(elements, ordinal - baseOrdinal);
+      }
+    } else {
+      const baseOrdinal = Array.isArray(targetOrdinal) ? _min(targetOrdinal) : targetOrdinal;
+      for (const [ordinal, elements] of this.elementsByOrdinal) {
+        const inOrdinal = Array.isArray(targetOrdinal) ? targetOrdinal.includes(ordinal) : ordinal === targetOrdinal;
+        if (inOrdinal) {
+          this.elementRenderer.showElements(elements, ordinal - baseOrdinal);
+        } else {
+          this.elementRenderer.hideElements(elements, ordinal - baseOrdinal);
+        }
       }
     }
   }
-  createMarker(coordinate, ordinal, label) {
-    const marker = this.elementRenderer.createMarker(coordinate, ordinal, label);
-    this.elementsMap.set(label, marker);
+  /** 
+   * ========================================================================
+   * Markers
+   * ======================================================================== */
+  createMarker(coordinate, ordinal, markerSymbol) {
+    console.log(`createMarker`, { coordinate, ordinal, markerSymbol });
+    const marker = this.elementRenderer.createMarker(coordinate, ordinal, markerSymbol);
     this.getElementsByOrdinal(ordinal).push(marker);
   }
 };