@mapvx/web-js 1.4.0-dev.0 → 1.4.0-dev.2

package/dist/es/map/map.js

@@ -135,17 +135,18 @@ import { userLocationDataUrl } from "../assets/icons";
 import { RouteController } from "../controllers/routeController";
 import { rtlLanguages } from "../domain/models/_rtl";
 import { InternalAnimationConfig, InternalAnimationDrawingConfig, } from "../domain/models/animation";
+import { CIRCLE_RENDER_ORDERS, circleRing, cloneCircleRecord, MAPVX_BRAND_COLOR, resolveCircleConfig, } from "../domain/models/circle";
 import { Loggeable } from "../domain/models/loggeable";
 import { DEFAULT_TILE_CACHE_CONFIG, MAPLIBRE_MAX_TILE_CACHE_HARD_CAP, } from "../domain/models/mapConfig";
-import { CIRCLE_RENDER_ORDERS, circleRing, cloneCircleRecord, MAPVX_BRAND_COLOR, resolveCircleConfig, } from "../domain/models/circle";
 import { MarkerAttribute } from "../domain/models/marker";
 import { MVXRoute } from "../domain/models/route";
 import { InternalDrawRouteConfiguration, InternalGetRouteConfiguration, } from "../domain/models/routeConfiguration";
 import { Repository } from "../repository/repository";
-import { hexToRgb, isPlacementVisibleOnFloor, mergeGlbScale, mergeRotation3D, opacityForZoom, resolveModels3DLights, resolveZoomTransparency, } from "../utils/3d";
+import { effectiveModelOpacity, hexToRgb, isPlacementVisibleOnFloor, mergeGlbScale, mergeRotation3D, pointInFootprint, resolveModels3DLights, resolveRouteTransparency, resolveZoomTransparency, } from "../utils/3d";
 import { addScene3DLights, computeGlbBottomAnchor, loadGlbRoot } from "../utils/loadGlb";
 import { extractStepCoordinates } from "../utils/route-utils";
 import { getBoundingBox } from "../utils/utils";
+import { computeOrientedCamera, refineCameraForPitch } from "./fitCamera";
 import { buildInteractionOptions, shouldDisableTouchRotation } from "./mapInteractionOptions";
 /**
  * Class to interact with the map.
@@ -188,6 +189,13 @@ export class InternalMapVXMap extends Loggeable {
         this.scene3DGlbLightCount = 0;
         /** Container group holding all placed GLB pivots; rebuilt on each floor change. */
         this.scene3DModelsGroup = undefined;
+        /**
+         * Route points currently used for GLB route-transparency collision, tagged with the floor on
+         * which each point's route segment is visible. Stored as coordinates (not pivot references) so
+         * they survive `placeScene3DModels` rebuilds on floor change. Only points matching the current
+         * floor participate, so a model only fades when a route is visibly crossing it on that floor.
+         */
+        this.scene3DRouteCollisionPoints = [];
         this.spriteIconMapping = {};
         this.spriteAtlasImage = new Image();
         if (rtlLanguages.includes((_a = mapConfig.lang) !== null && _a !== void 0 ? _a : "")) {
@@ -345,7 +353,7 @@ export class InternalMapVXMap extends Loggeable {
                 // Hide MapLibre icon layers — replaced by deck.gl IconLayer
                 this.hideLayers((_a = this.scene3DConfig) === null || _a === void 0 ? void 0 : _a.hideLayers);
                 const models = (_b = this.scene3DConfig) === null || _b === void 0 ? void 0 : _b.models;
-                const glbModelsActive = models !== undefined && models.enabled !== false && models.assets.length > 0;
+                const glbModelsActive = models !== undefined && models.assets.length > 0;
                 if (glbModelsActive) {
                     this.map.addLayer(this.createGlbCustomLayer());
                 }
@@ -365,7 +373,7 @@ export class InternalMapVXMap extends Loggeable {
         });
         this.map.on("zoom", () => {
             if (this.is3DSceneActive()) {
-                this.applyModelZoomOpacity();
+                this.applyModelOpacity();
             }
         });
         this.map.on("zoomend", () => {
@@ -525,7 +533,7 @@ export class InternalMapVXMap extends Loggeable {
             .multiply(new THREE.Matrix4().makeRotationX(Math.PI / 2));
         this.scene3DGlbScene = new THREE.Scene();
         const models = (_a = this.scene3DConfig) === null || _a === void 0 ? void 0 : _a.models;
-        if (models && models.enabled !== false && models.assets.length > 0) {
+        if (models && models.assets.length > 0) {
             const lights = resolveModels3DLights(models);
             this.scene3DGlbLightCount = addScene3DLights(this.scene3DGlbScene, lights);
         }
@@ -588,7 +596,7 @@ export class InternalMapVXMap extends Loggeable {
     async loadScene3DGlbTemplates() {
         var _a;
         const models = (_a = this.scene3DConfig) === null || _a === void 0 ? void 0 : _a.models;
-        if (!models || models.enabled === false || models.assets.length === 0) {
+        if (!models || models.assets.length === 0) {
             return;
         }
         this.scene3DGlbRootByUrl.clear();
@@ -609,12 +617,12 @@ export class InternalMapVXMap extends Loggeable {
         }
     }
     placeScene3DModels() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
         if (!this.scene3DGlbScene) {
             return;
         }
         const models = (_a = this.scene3DConfig) === null || _a === void 0 ? void 0 : _a.models;
-        if (!models || models.enabled === false) {
+        if (!models) {
             return;
         }
         if (this.scene3DModelsGroup) {
@@ -656,15 +664,18 @@ export class InternalMapVXMap extends Loggeable {
                 this.logWarning(new Error(`Invalid scene3D placement position (assetId=${placement.assetId}, floorKey=${floorKey})`));
                 continue;
             }
-            const target = maplibregl.MercatorCoordinate.fromLngLat([placement.position.lng, placement.position.lat], (_j = placement.position.altitude) !== null && _j !== void 0 ? _j : 0);
+            const target = maplibregl.MercatorCoordinate.fromLngLat([
+                placement.position.lng,
+                placement.position.lat,
+            ]);
             const sx = (target.x - refMercator.x) / meterScale;
             const sz = (target.y - refMercator.y) / meterScale;
-            const ax = (_l = (_k = asset.defaultModelOffset) === null || _k === void 0 ? void 0 : _k.x) !== null && _l !== void 0 ? _l : 0;
-            const ay = (_o = (_m = asset.defaultModelOffset) === null || _m === void 0 ? void 0 : _m.y) !== null && _o !== void 0 ? _o : 0;
-            const az = (_q = (_p = asset.defaultModelOffset) === null || _p === void 0 ? void 0 : _p.z) !== null && _q !== void 0 ? _q : 0;
-            const px = (_s = (_r = placement.offset) === null || _r === void 0 ? void 0 : _r.x) !== null && _s !== void 0 ? _s : 0;
-            const py = (_u = (_t = placement.offset) === null || _t === void 0 ? void 0 : _t.y) !== null && _u !== void 0 ? _u : 0;
-            const pz = (_w = (_v = placement.offset) === null || _v === void 0 ? void 0 : _v.z) !== null && _w !== void 0 ? _w : 0;
+            const ax = (_k = (_j = asset.defaultModelOffset) === null || _j === void 0 ? void 0 : _j.x) !== null && _k !== void 0 ? _k : 0;
+            const ay = (_m = (_l = asset.defaultModelOffset) === null || _l === void 0 ? void 0 : _l.y) !== null && _m !== void 0 ? _m : 0;
+            const az = (_p = (_o = asset.defaultModelOffset) === null || _o === void 0 ? void 0 : _o.z) !== null && _p !== void 0 ? _p : 0;
+            const px = (_r = (_q = placement.offset) === null || _q === void 0 ? void 0 : _q.x) !== null && _r !== void 0 ? _r : 0;
+            const py = (_t = (_s = placement.offset) === null || _s === void 0 ? void 0 : _s.y) !== null && _t !== void 0 ? _t : 0;
+            const pz = (_v = (_u = placement.offset) === null || _u === void 0 ? void 0 : _u.z) !== null && _v !== void 0 ? _v : 0;
             const pivot = new THREE.Group();
             pivot.position.set(sx + ax + px, ay + py, sz + az + pz);
             const mergedRot = mergeRotation3D(asset.defaultRotation, placement.rotation);
@@ -686,29 +697,109 @@ export class InternalMapVXMap extends Loggeable {
             model.position.set(-template.center.x, -template.center.y, -template.center.z);
             // Stash the resolved zoom-transparency config so it can be re-applied on every zoom change.
             pivot.userData.zoomTransparency = resolveZoomTransparency(models, asset, placement);
+            // Stash route-transparency config (may be undefined => feature off for this model) so a
+            // route crossing this model can fade it independently of zoom.
+            pivot.userData.routeTransparency = resolveRouteTransparency(models, asset, placement);
+            // Precompute the model footprint in the pivot's local x/z frame while `model` has no parent
+            // (its world matrix equals its local matrix), for cheap point-in-building collision tests.
+            // After `pivot.add(model)` the world matrix would fold in the pivot transform, giving a loose
+            // world-axis box instead; `pivot.worldToLocal` at test time undoes the pivot transform.
+            const localBox = new THREE.Box3().setFromObject(model);
+            pivot.userData.footprint = {
+                minX: localBox.min.x,
+                maxX: localBox.max.x,
+                minZ: localBox.min.z,
+                maxZ: localBox.max.z,
+            };
             pivot.add(model);
             modelsGroup.add(pivot);
         }
         this.scene3DModelsGroup = modelsGroup;
         this.scene3DGlbScene.add(modelsGroup);
-        this.applyModelZoomOpacity();
+        // Recompute route collision against the freshly rebuilt pivots (footprints/floor changed),
+        // then apply the combined opacity.
+        this.recomputeRouteAffectedModels();
+        this.applyModelOpacity();
         this.map.triggerRepaint();
     }
     /**
-     * Applies zoom-based transparency to placed GLB models, using each placement's resolved
-     * {@link ZoomTransparencyConfig} stored in `pivot.userData.zoomTransparency`. Hard threshold:
-     * fully opaque below the configured zoom, configured opacity at/above it. Only triggers a
-     * repaint when at least one material actually changed.
+     * Sets the route path used for GLB route-transparency collision and re-evaluates which models a
+     * route currently crosses. Points are tagged with the floor on which their route segment is
+     * visible; only points on the current floor participate, so a model never fades unless a route is
+     * visibly crossing it on the displayed floor. Pass an empty array to clear.
+     *
+     * No-op unless the 3D scene is active.
+     */
+    setRouteCollisionPath(points) {
+        if (!this.is3DSceneActive()) {
+            return;
+        }
+        this.scene3DRouteCollisionPoints = points;
+        this.recomputeRouteAffectedModels();
+        this.applyModelOpacity();
+    }
+    /**
+     * Recomputes `pivot.userData.routeAffected` for every placed model by testing the current-floor
+     * route collision points against each model's precomputed footprint. Cheap point-in-box tests in
+     * the pivot's local x/z frame; runs only when the route path or the placed models change, never
+     * per zoom frame.
+     */
+    recomputeRouteAffectedModels() {
+        var _a;
+        if (!this.scene3DModelsGroup) {
+            return;
+        }
+        const floorKey = (_a = this.currentFloor) !== null && _a !== void 0 ? _a : "";
+        const points = this.scene3DRouteCollisionPoints.filter((p) => p.floorKey === floorKey);
+        // Convert each route point into the models group's local frame (metres relative to
+        // initialCenter), exactly as placements are positioned in `placeScene3DModels`. The group's
+        // own transform (globalOffset) is applied via `localToWorld` at test time, so route points and
+        // model pivots share one frame regardless of the collective offset.
+        const refMercator = MercatorCoordinate.fromLngLat(this.initialCenter, 0);
+        const meterScale = refMercator.meterInMercatorCoordinateUnits();
+        const groupLocalPoints = points.map((p) => {
+            const target = MercatorCoordinate.fromLngLat([p.lng, p.lat], 0);
+            const x = (target.x - refMercator.x) / meterScale;
+            const z = (target.y - refMercator.y) / meterScale;
+            return new THREE.Vector3(x, 0, z);
+        });
+        this.scene3DModelsGroup.updateMatrixWorld(true);
+        const local = new THREE.Vector3();
+        for (const pivot of this.scene3DModelsGroup.children) {
+            const routeCfg = pivot.userData.routeTransparency;
+            const footprint = pivot.userData.footprint;
+            // Only models with a route-transparency config participate (feature activation gate).
+            if (!routeCfg || !footprint || groupLocalPoints.length === 0) {
+                pivot.userData.routeAffected = false;
+                continue;
+            }
+            pivot.userData.routeAffected = groupLocalPoints.some((gp) => {
+                // group-local -> world (applies globalOffset) -> pivot-local (undoes position/rotation/
+                // scale), then test its x/z against the footprint. y is ignored (floor-level footprint).
+                local.copy(gp);
+                this.scene3DModelsGroup.localToWorld(local);
+                pivot.worldToLocal(local);
+                return pointInFootprint(footprint, local.x, local.z);
+            });
+        }
+    }
+    /**
+     * Applies transparency to placed GLB models, combining zoom-based transparency
+     * ({@link ZoomTransparencyConfig}) with route-based transparency ({@link RouteTransparencyConfig})
+     * for models a route currently crosses (`pivot.userData.routeAffected`). The more transparent of
+     * the two wins. Only triggers a repaint when at least one material actually changed.
      */
-    applyModelZoomOpacity() {
+    applyModelOpacity() {
         if (!this.scene3DModelsGroup) {
             return;
         }
         const zoom = this.getZoomLevel();
         let changed = false;
         for (const pivot of this.scene3DModelsGroup.children) {
-            const cfg = pivot.userData.zoomTransparency;
-            const opacity = opacityForZoom(cfg, zoom);
+            const zoomCfg = pivot.userData.zoomTransparency;
+            const routeCfg = pivot.userData.routeTransparency;
+            const routeAffected = pivot.userData.routeAffected === true;
+            const opacity = effectiveModelOpacity(zoomCfg, routeCfg, zoom, routeAffected);
             pivot.traverse((obj) => {
                 const mesh = obj;
                 if (!mesh.isMesh) {
@@ -1745,6 +1836,52 @@ export class InternalMapVXMap extends Loggeable {
             this.map.fitBounds(bounds, fitOptions);
         }
     }
+    easeToCoordinates(coordinates, options) {
+        var _a;
+        if (coordinates.length === 0) {
+            return;
+        }
+        const onComplete = options === null || options === void 0 ? void 0 : options.onComplete;
+        // Get container dimensions for percentage-based padding calculations
+        const container = this.map.getContainer();
+        const containerWidth = container.clientWidth;
+        const containerHeight = container.clientHeight;
+        // Convert padding values with units to pixels
+        const padding = convertPaddingToPixels(options === null || options === void 0 ? void 0 : options.padding, containerWidth, containerHeight);
+        if (coordinates.length === 1) {
+            const [coord] = coordinates;
+            if (onComplete) {
+                void this.map.once("moveend", onComplete);
+            }
+            this.map.easeTo(Object.assign(Object.assign({}, options), { center: { lat: coord.lat, lng: coord.lng }, padding }));
+            return;
+        }
+        const bearing = (options === null || options === void 0 ? void 0 : options.bearing) !== undefined ? options.bearing : this.map.getBearing();
+        const pitch = (options === null || options === void 0 ? void 0 : options.pitch) !== undefined ? options.pitch : this.map.getPitch();
+        const cameraParams = {
+            bearing,
+            padding,
+            containerWidth,
+            containerHeight,
+            maxZoom: (_a = options === null || options === void 0 ? void 0 : options.maxZoom) !== null && _a !== void 0 ? _a : this.map.getMaxZoom(),
+            minZoom: this.map.getMinZoom(),
+        };
+        // Orthographic oriented fit (exact for pitch 0). maplibre's fitBounds only
+        // fits a north-up LngLatBounds, which wastes viewport space for diagonal
+        // geometries under a bearing.
+        let camera = computeOrientedCamera(coordinates, cameraParams);
+        // With a tilted camera the orthographic zoom is off due to perspective, so
+        // refine it against maplibre's real projection on a cloned transform.
+        if (pitch > 0) {
+            camera = refineCameraForPitch(this.map.transform.clone(), coordinates, camera, Object.assign(Object.assign({}, cameraParams), { pitch }));
+        }
+        if (onComplete) {
+            void this.map.once("moveend", onComplete);
+        }
+        this.map.easeTo(Object.assign(Object.assign({}, options), { center: camera.center, zoom: camera.zoom, bearing,
+            pitch,
+            padding }));
+    }
     fitRouteByPlace(route, placeId, options) {
         // Filter steps that belong to the specified place
         const stepsInPlace = route.steps.filter((step) => step.startInsidePlace === placeId || step.endInsidePlace === placeId);
@@ -1798,7 +1935,7 @@ export class InternalMapVXMap extends Loggeable {
             throw new Error("Error: Failed to add route");
         }
     }
-    updateRouteProgress(routeId, position, behindStyle = { type: "Solid", color: "#757575" }) {
+    updateRouteProgress(routeId, position, behindStyle = { type: "Solid", color: "#276EF1" }) {
         try {
             const behindConfig = new InternalDrawRouteConfiguration({
                 routeStyle: behindStyle,
@@ -1854,7 +1991,6 @@ export class InternalMapVXMap extends Loggeable {
         }
         return "";
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     removePopOver(id) {
         throw Error("Not implemented");
     }