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

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);
 }
@@ -2726,6 +2742,7 @@ var CameraManager = class {
 };
 
 // src/IndoorMap/renderer/RendererManager.ts
+import _compact2 from "lodash/compact";
 import _isFunction from "lodash/isFunction";
 import _min from "lodash/min";
 import { center as turfCenter2 } from "@turf/center";
@@ -2736,6 +2753,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 +3065,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 +3105,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 +3237,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 +3328,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 +3494,9 @@ var Element2DRenderer = class extends EventTarget {
       return geometry;
     }
   };
+  createRoomWall(unit, openings) {
+    return null;
+  }
   async createEscalator(f, coordinates) {
     return Promise.resolve(null);
   }
@@ -3416,9 +3505,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 +4376,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 +4422,9 @@ var RendererManager = class extends EventTarget {
           options.onRendererReady();
         }
         _this.#createElements();
+        setTimeout(() => {
+          findBadMeshes(scene);
+        }, 3e3);
       };
     } else {
       this.elementRenderer = new Element2DRenderer(map, options.elements);
@@ -4345,6 +4466,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 +4482,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 +4490,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 = _compact2(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 +4553,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"));
   }