venue-js 1.2.0-next.14 → 1.2.0-next.16

package/dist/index.mjs

@@ -81,7 +81,8 @@ var defaultFeatureQueryOptionsMap = {
     // refresh every 5 min
   },
   element: {},
-  page: {}
+  page: {},
+  model3d: {}
 };
 
 // src/data/api/delivery-project.ts
@@ -97,6 +98,14 @@ async function fetchDeliveryApi(projectId, apiKey, featureType, baseUrl = DEFAUL
       const items = await res.json();
       return items;
     }
+    case "model3d": {
+      const res = await fetch(
+        `${baseUrl}/delivery/projects/${projectId}/${featureType}.geojson?api-key=${apiKey}`
+      );
+      if (res.status !== 200) return [];
+      const items = await res.json();
+      return items.features;
+    }
     case "sponsored-content": {
       const res = await fetch(
         `${baseUrl}/delivery/projects/${projectId}/sponsored-content.json?api-key=${apiKey}`
@@ -789,6 +798,13 @@ function featureCollection(features, options = {}) {
   fc.features = features;
   return fc;
 }
+function multiPoint(coordinates, properties, options = {}) {
+  const geom = {
+    type: "MultiPoint",
+    coordinates
+  };
+  return feature(geom, properties, options);
+}
 function isNumber(num) {
   return !isNaN(num) && num !== null && !Array.isArray(num);
 }
@@ -889,11 +905,8 @@ import turfBuffer from "@turf/buffer";
 import {
   TextureLoader as TextureLoader2,
   SpriteMaterial as SpriteMaterial3,
-  MeshLambertMaterial,
-  AmbientLight,
-  DirectionalLight
+  MeshLambertMaterial
 } from "three";
-import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 
 // src/IndoorMap/object3d/Billboard.js
 import * as maptalks from "maptalks";
@@ -1487,36 +1500,6 @@ var createPedestrianOpening = (feature2, style, options = {}) => {
     console.log(`error creating pedestrian opening:`, feature2);
   }
 };
-var loadModel3d = (model3d, coordinate, threeLayer) => {
-  return new Promise((resolve, reject) => {
-    const loader = new GLTFLoader();
-    const { url, properties: modelProperties } = model3d;
-    loader.load(
-      url,
-      (gltf) => {
-        const object3d = gltf.scene;
-        object3d.rotation.x = _4.get(modelProperties, "rotation.x");
-        object3d.rotation.y = _4.get(modelProperties, "rotation.y");
-        object3d.scale.set(..._4.get(modelProperties, "scale") || []);
-        const object = threeLayer.toModel(object3d, {
-          coordinate
-        });
-        object.getObject3d().traverse((child) => {
-          if (child.isMesh === true) {
-            child.material.transparent = true;
-            child.material.metalness = 0.1;
-          }
-        });
-        resolve(object);
-      },
-      (xhr) => {
-      },
-      (error) => {
-        reject(error);
-      }
-    );
-  });
-};
 var createExtrudePolygon = (geometry, threeLayer, material, height, properties = {}, options) => {
   const { offset = 0, altitude = 0 } = options;
   const offsetGeometry = turfBuffer(geometry, offset, { units: "meters" });
@@ -2190,42 +2173,6 @@ var styledFeatureGenerator = (mapTheme) => {
           return null;
       }
     },
-    /** Three JS */
-    create3DFootprint: async (feature2, threeLayer, options) => {
-      const objects = [];
-      const extrudeHeight = _4.get(options, "height");
-      if (!extrudeHeight) return objects;
-      const { properties } = feature2;
-      const footprintProperties = getFeatureProperties(feature2);
-      const hasModel3ds = Array.isArray(properties.model3d) && properties.model3d.length > 0;
-      if (hasModel3ds) {
-        const models = properties.model3d;
-        const center2 = turfCenter(feature2);
-        const coordinate = _4.get(center2, "geometry.coordinates");
-        for (const model of models) {
-          const object = await loadModel3d(model, coordinate, threeLayer);
-          object.properties = footprintProperties;
-          objects.push(object);
-        }
-      } else {
-        const color = footprintProperties.defaultColor;
-        if (color === "transparent") return;
-        const material = new MeshLambertMaterial({
-          color,
-          transparent: true
-        });
-        const object = createExtrudePolygon(
-          feature2.geometry,
-          threeLayer,
-          material,
-          extrudeHeight,
-          footprintProperties,
-          {}
-        );
-        objects.push(object);
-      }
-      return objects;
-    },
     create3DBillboard: (billboard, threeLayer) => {
       const { id, feature_type, properties } = billboard;
       const {
@@ -2726,8 +2673,7 @@ var CameraManager = class {
 };
 
 // src/IndoorMap/renderer/RendererManager.ts
-import _isFunction from "lodash/isFunction";
-import _min from "lodash/min";
+import { min, compact, isFunction } from "lodash-es";
 import { center as turfCenter2 } from "@turf/center";
 import * as THREE3 from "three";
 
@@ -2736,6 +2682,12 @@ import * as maptalks4 from "maptalks-gl";
 import * as THREE from "three";
 import { BaseObject as BaseObject5 } from "maptalks.three";
 import turfBuffer2 from "@turf/buffer";
+import { cleanCoords } from "@turf/clean-coords";
+import { polygonToLine } from "@turf/polygon-to-line";
+import { nearestPointOnLine } from "@turf/nearest-point-on-line";
+import { length } from "@turf/length";
+import { along } from "@turf/along";
+import { pointToLineDistance } from "@turf/point-to-line-distance";
 
 // src/IndoorMap/renderer/3d/objects/GroundLabel.ts
 import * as maptalks3 from "maptalks-gl";
@@ -3042,15 +2994,15 @@ var GroundLabel = class extends BaseObject4 {
 // src/IndoorMap/renderer/3d/element3DRendererOptions.ts
 var element3DRendererOptions = {
   unit: {
-    default: { color: "#ffffff", height: 4 },
+    default: { color: "#ffffff", height: 0.2 },
     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 },
-      parking: { height: 0.1 },
-      room: { color: "#ffffff", height: 2, bottomHeight: 0.12 }
+      parking: { color: "#999999", height: 0.1 },
+      room: { color: "#ffffff", height: 0.5, bottomHeight: 0.12 }
     }
   },
   kiosk: {
@@ -3082,6 +3034,7 @@ var get3DRendererOption = (featureType, category, options) => {
 };
 
 // src/IndoorMap/renderer/3d/Element3DRenderer.ts
+import lineSplit from "@turf/line-split";
 var HEIGHT_METER = 4;
 var MULTIORDINAL_HEIGHT_METER = 9;
 var Element3DRenderer = class extends EventTarget {
@@ -3213,6 +3166,68 @@ var Element3DRenderer = class extends EventTarget {
       console.log(`error createGeometry`, err, { feature: feature2, options });
     }
   };
+  createRoomWall(unit, openings = []) {
+    const polygons = unit.geometry.type === "Polygon" ? [unit.geometry.coordinates] : unit.geometry.coordinates;
+    return polygons.map((plg) => {
+      return plg.map((ring) => {
+        const roomWall = cleanCoords(polygonToLine(polygon([ring])));
+        if (openings.length === 0) {
+          const color = "#ababab";
+          const material = this.getOrCreateMaterialByColor(color);
+          const extrudedWall = this.threeLayer.toExtrudeLine(
+            new maptalks4.LineString(roomWall.geometry.coordinates),
+            { height: 4, width: 1 },
+            material
+          );
+          return extrudedWall;
+        }
+        let openingPoints = [];
+        openings.forEach((opening) => {
+          const doorCoords = opening?.geometry?.coordinates;
+          const p0 = point(doorCoords[0]);
+          const p1 = point(doorCoords[doorCoords.length - 1]);
+          const s0 = nearestPointOnLine(roomWall, p0, { units: "meters" });
+          const s1 = nearestPointOnLine(roomWall, p1, { units: "meters" });
+          const d0 = s0.properties.dist;
+          const d1 = s1.properties.dist;
+          if (d0 > 1 || d1 > 1) {
+          } else {
+            openingPoints = openingPoints.concat([s0.geometry.coordinates, s1.geometry.coordinates]);
+          }
+        });
+        try {
+          const split = lineSplit(roomWall, multiPoint(openingPoints));
+          const wallsOnly = split.features.filter((seg) => {
+            const mid = along(seg, length(seg, { units: "meters" }) / 2, { units: "meters" });
+            for (const opening of openings) {
+              const dist = pointToLineDistance(mid, opening, { units: "meters" });
+              if (dist < 0.05) return false;
+            }
+            return true;
+          });
+          const wallMeshes = wallsOnly.map((feature2, i) => {
+            const color = "#ababab";
+            const material = this.getOrCreateMaterialByColor(color);
+            const extrudedLine = this.threeLayer.toExtrudeLine(
+              new maptalks4.LineString(feature2.geometry.coordinates),
+              { height: 3, width: 0.4, id: unit.id },
+              material
+            );
+            extrudedLine.getObject3d().userData = {
+              unitId: unit.id,
+              coords: feature2.geometry.coordinates
+            };
+            return extrudedLine;
+          }).flat();
+          this.threeLayer.addMesh(wallMeshes);
+          return wallMeshes;
+        } catch (e) {
+          console.log(e.message, { unit, roomWall });
+          return [];
+        }
+      }).flat();
+    }).flat();
+  }
   async createEscalator(f, coordinate, options) {
     const model = {
       url: "https://cdn.venue.in.th/static/glb/escalator.glb",
@@ -3242,14 +3257,14 @@ var Element3DRenderer = class extends EventTarget {
     this.threeLayer.addMesh(groundLabel);
     return groundLabel;
   }
-  async createTree(coordinate, ordinal) {
-    const treeMarker = new maptalks4.GLTFMarker(coordinate, {
+  async createModel3d(f) {
+    const marker = new maptalks4.GLTFMarker(f.properties.center, {
       symbol: {
-        url: "https://dashboard.situm.com/uploads/3dmodels/demoaccount/new_escalator.glb"
+        url: f.properties.model
       }
     });
-    treeMarker.addTo(this.gltfLayer);
-    return treeMarker;
+    marker.addTo(this.gltfLayer);
+    return marker;
   }
   async createBuilding(coordinate, ordinal) {
     return Promise.resolve(null);
@@ -3408,6 +3423,9 @@ var Element2DRenderer = class extends EventTarget {
       return geometry;
     }
   };
+  createRoomWall(unit, openings) {
+    return null;
+  }
   async createEscalator(f, coordinates) {
     return Promise.resolve(null);
   }
@@ -3416,9 +3434,6 @@ var Element2DRenderer = class extends EventTarget {
     const bound = f.geometry.coordinates[0];
     return null;
   }
-  async createTree(coordinates) {
-    return Promise.resolve(null);
-  }
   async createBuilding(coordinate, ordinal) {
     return Promise.resolve(null);
   }
@@ -4290,6 +4305,38 @@ var RendererManager = class extends EventTarget {
       const groupLayer = this.map.getLayer("group");
       const threeLayer = groupLayer.getLayer("three");
       threeLayer.prepareToDraw = function(gl, scene, camera) {
+        function findBadMeshes(scene2) {
+          const bad = [];
+          scene2.traverse((obj) => {
+            if (!obj?.isMesh) return;
+            const geom = obj.geometry;
+            const pos = geom?.attributes?.position?.array;
+            if (!pos || pos.length === 0) return;
+            for (let i = 0; i < pos.length; i++) {
+              const v2 = pos[i];
+              if (!Number.isFinite(v2)) {
+                bad.push({ mesh: obj, index: i, value: v2 });
+                break;
+              }
+            }
+          });
+          if (bad.length) {
+            console.group(`\u274C Found ${bad.length} meshes with invalid positions`);
+            for (const b of bad) {
+              console.log({
+                name: b.mesh.name,
+                userData: b.mesh.userData,
+                uuid: b.mesh.uuid,
+                badIndex: b.index,
+                badValue: b.value
+              });
+            }
+            console.groupEnd();
+          } else {
+            console.log("\u2705 No invalid meshes found");
+          }
+          return bad;
+        }
         const ambientLight = new THREE3.AmbientLight(16777215, 0.3);
         scene.add(ambientLight);
         const dirColor = 16777215;
@@ -4304,6 +4351,9 @@ var RendererManager = class extends EventTarget {
           options.onRendererReady();
         }
         _this.#createElements();
+        setTimeout(() => {
+          findBadMeshes(scene);
+        }, 3e3);
       };
     } else {
       this.elementRenderer = new Element2DRenderer(map, options.elements);
@@ -4318,7 +4368,7 @@ var RendererManager = class extends EventTarget {
     if (this.#isClicked) return;
     this.#isClicked = true;
     const onClickElement = this.#onClickElement;
-    if (!_isFunction(onClickElement)) return;
+    if (!isFunction(onClickElement)) return;
     this.#onClickElement(e);
     this.#isClicked = false;
   };
@@ -4345,6 +4395,9 @@ var RendererManager = class extends EventTarget {
     const levels = await this.#dataClient.filterByType("level", {
       populate: true
     });
+    const openings = await this.#dataClient.filterByType("opening", {
+      populate: true
+    });
     const relationships = await this.#dataClient.filterByType("relationship");
     const fixtures = await this.#dataClient.filterByType("fixture", { populate: true });
     fixtures.forEach((fixture) => {
@@ -4358,7 +4411,7 @@ var RendererManager = class extends EventTarget {
       populate: true
     });
     units.filter(
-      (u4) => !["opentobelow", "escalator"].includes(u4.properties.category)
+      (u4) => !["opentobelow", "escalator", "room"].includes(u4.properties.category)
     ).forEach((unit) => {
       const element = this.elementRenderer.createGeometry(unit);
       if (element) {
@@ -4366,6 +4419,22 @@ var RendererManager = class extends EventTarget {
         this.addElementsToManager(unit.id, _elements, unit.properties.level.properties.ordinal);
       }
     });
+    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 = 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);
+      if (innerElements || wallElements) {
+        const _innerElements = Array.isArray(innerElements) ? innerElements : [innerElements];
+        const _wallElements = Array.isArray(wallElements) ? wallElements : [wallElements];
+        const _elements = [..._innerElements, ..._wallElements];
+        const ordinal = unit.properties.level.properties.ordinal;
+        this.addElementsToManager(unit.id, _elements, ordinal);
+      }
+    });
     const kiosks = await this.#dataClient.filterByType("kiosk", {
       populate: true
     });
@@ -4413,12 +4482,17 @@ var RendererManager = class extends EventTarget {
       const center2 = turfCenter2(polygon(label.geometry.coordinates)).geometry.coordinates;
       const unit = findUnitOnPoint(units, center2);
       const element = this.elementRenderer.createGroundLabel(label, unit);
-      console.log({ element });
       if (element) {
         const _elements = Array.isArray(element) ? element : [element];
         this.addElementsToManager(label.id, _elements, label.properties.ordinal);
       }
     }
+    if (this.options.type === "3D") {
+      const model3ds = await this.#dataClient.filterByType("model3d");
+      for (const model3d of model3ds) {
+        this.elementRenderer.createModel3d(model3d);
+      }
+    }
     this.changeLevelByOrdinal(this.currentOrdinals);
     this.dispatchEvent(new CustomEvent("renderermanager:elements_created"));
   }
@@ -4433,7 +4507,7 @@ var RendererManager = class extends EventTarget {
         this.markerRenderer.showMarkers(markers, ordinal - baseOrdinal);
       }
     } else {
-      const baseOrdinal = Array.isArray(targetOrdinal) ? _min(targetOrdinal) : targetOrdinal;
+      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) {
@@ -4460,7 +4534,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 && _isFunction(controller.start)) {
+      if (controller && isFunction(controller.start)) {
         controller.start();
         this.highlightControllers.push(controller);
       }
@@ -4468,7 +4542,7 @@ var RendererManager = class extends EventTarget {
   };
   clearHighlightElements = () => {
     this.highlightControllers.forEach((controller) => {
-      if (_isFunction(controller?.clear)) controller.clear();
+      if (isFunction(controller?.clear)) controller.clear();
     });
   };
   /** 
@@ -4744,18 +4818,12 @@ var IndoorMap = class extends EventTarget {
   async #legacy_createElements() {
     const {
       // 2D
-      createVenue,
       createOpening,
       createSection,
-      createFixture,
-      createOccupant,
       createDecoration,
       // 3D
-      create3DFootprint,
       create3DBillboard,
-      createExtrudedUnit,
       create3DAmenityMarker,
-      create3DOccupantAmenityMarker,
       create3DOpeningMarker
     } = this.#styler;
     let elements = {};