@mapvx/web-components 0.0.26 → 0.0.27

package/dist/es/assets/{utils-EeRdvb4i.js → utils-DM-AJZn2.js}

@@ -1,5 +1,5 @@
-import { i, s as sdkContext } from './components-B6oTyj0x.js';
-import { R as RollbarController } from './route-view-totems-BWtwjegR.js';
+import { i, s as sdkContext } from './components-BT9NDTry.js';
+import { R as RollbarController } from './route-view-totems-CdM6PRGO.js';
 
 var dist = {exports: {}};
 
@@ -12356,8 +12356,75 @@ class SDKController {
       initialValue: { enabledFloors: [], markers: [], cameraInitialized: false }
     });
   }
+  /**
+   * Prewarm SDK and fetch critical data in parallel to reduce first render time.
+   * If origin/destination are provided, their details will also be prefetched and markers/floor set accordingly.
+   */
+  async prewarm(apiKey, locale, parentPlaceId, options) {
+    if (!this.connected) return;
+    const sdk = distExports.initializeSDK(apiKey, { lang: locale });
+    this.contextProvider.setValue({
+      ...this.contextProvider.value,
+      sdk,
+      locale,
+      parentPlaceId,
+      originId: options?.originId ?? this.contextProvider.value.originId,
+      destinationId: options?.destinationId ?? this.contextProvider.value.destinationId
+    });
+    try {
+      const [config, parentPlace, origin, destination] = await Promise.all([
+        sdk.getConfiguration(parentPlaceId).catch(() => void 0),
+        sdk.getPlaceDetail(parentPlaceId).catch(() => void 0),
+        options?.originId ? sdk.getPlaceDetail(options.originId).catch(() => void 0) : Promise.resolve(void 0),
+        options?.destinationId ? sdk.getPlaceDetail(options.destinationId).catch(() => void 0) : Promise.resolve(void 0)
+      ]);
+      const parentFloors = parentPlace?.innerFloors || [];
+      let enabledFloors = parentFloors;
+      let currentFloor = void 0;
+      if (origin || destination) {
+        const floors = [origin, destination].map((place) => place?.inFloor(parentFloors)).filter((floor) => floor !== void 0);
+        if (floors.length > 0) {
+          enabledFloors = floors;
+        }
+        currentFloor = destination?.inFloors?.[0] ? parentFloors.find((f) => f.key === destination.inFloors[0]) : origin?.inFloors?.[0] ? parentFloors.find((f) => f.key === origin.inFloors[0]) : void 0;
+      }
+      this.enabledFloors = enabledFloors;
+      this.contextProvider.setValue({
+        ...this.contextProvider.value,
+        generalConfig: config ?? this.contextProvider.value.generalConfig,
+        parentPlace: parentPlace ?? this.contextProvider.value.parentPlace,
+        origin: origin ?? this.contextProvider.value.origin,
+        destination: destination ?? this.contextProvider.value.destination,
+        enabledFloors,
+        currentFloor: currentFloor ?? this.contextProvider.value.currentFloor,
+        // Pre-create markers if we have origin/destination
+        markers: [
+          ...origin ? [
+            {
+              id: origin.lazarilloId,
+              data: origin,
+              style: MarkerStyle.youAreHere
+            }
+          ] : [],
+          ...destination ? [
+            {
+              id: destination.lazarilloId,
+              data: destination,
+              style: MarkerStyle.placePopup
+            }
+          ] : []
+        ]
+      });
+    } catch (error) {
+      RollbarController.getInstance().warning("Error prewarming SDK", { error, parentPlaceId });
+    }
+  }
   initialize(apiKey, locale, parentPlaceId) {
     if (!this.connected) return;
+    const current = this.contextProvider.value;
+    if (current.sdk && current.locale === locale && current.parentPlaceId === parentPlaceId) {
+      return;
+    }
     this.initializeSDK(apiKey, locale, parentPlaceId);
     const { originId, destinationId } = this.contextProvider.value;
     if (originId && destinationId) {
@@ -12390,9 +12457,9 @@ class SDKController {
         destination
       });
       this.createOriginDestinationMarkers(origin, destination);
-      const currentFloor = destination ? destination.inFloors?.[0] : origin ? origin.inFloors?.[0] : void 0;
-      if (currentFloor) {
-        this.setFloor(currentFloor);
+      const currentFloorId = destination?.inFloors?.[0] || origin?.inFloors?.[0];
+      if (currentFloorId) {
+        this.setFloor(currentFloorId);
       }
       const parentFloors = this.contextProvider.value.parentPlace?.innerFloors || [];
       const enabledFloors = [origin, destination].filter((p) => !!p).map((place) => place.inFloor(parentFloors)).filter((floor) => floor !== void 0);
@@ -12463,14 +12530,12 @@ class SDKController {
       parentPlaceId
     });
     try {
-      await this.loadConfig(parentPlaceId);
-    } catch (error) {
-      RollbarController.getInstance().warning("Error loading config", { error, parentPlaceId });
-    }
-    try {
-      const parentPlace = await sdk.getPlaceDetail(parentPlaceId);
+      const [config, parentPlace] = await Promise.all([
+        sdk.getConfiguration(parentPlaceId).catch(() => void 0),
+        sdk.getPlaceDetail(parentPlaceId).catch(() => void 0)
+      ]);
       const { origin, destination } = this.contextProvider.value;
-      let enabledFloors = parentPlace.innerFloors || [];
+      let enabledFloors = parentPlace?.innerFloors || [];
       const currentFloor = origin?.inFloor(enabledFloors) || destination?.inFloor(enabledFloors);
       if (origin || destination) {
         enabledFloors = [origin, destination].map((place) => place?.inFloor(enabledFloors)).filter((floor) => floor !== void 0);
@@ -12478,7 +12543,8 @@ class SDKController {
       }
       this.contextProvider.setValue({
         ...this.contextProvider.value,
-        parentPlace,
+        generalConfig: config ?? this.contextProvider.value.generalConfig,
+        parentPlace: parentPlace ?? this.contextProvider.value.parentPlace,
         enabledFloors,
         currentFloor
       });
@@ -12648,9 +12714,11 @@ class MarkerController {
   setParentPlace(place) {
     this.parentPlace = place;
   }
+  setConfig(config) {
+    this.config = config;
+  }
   updateMarkers(markers) {
     if (!this.connected || !this.map || !this.mapReady || !this.parentPlace) return;
-    const floors = this.parentPlace.innerFloors ?? [];
     this.markersIds.forEach((m) => {
       try {
         this.map?.removeMarker(m.id);
@@ -12667,7 +12735,7 @@ class MarkerController {
         case MarkerStyle.youAreHere: {
           const markerIcon = document.createElement("img");
           const place = data;
-          floorId = place.inFloor(floors)?.key;
+          floorId = place.inFloors?.[0];
           markerIcon.src = this.accessibleRoute ? accessibleMarker : walkingMarker;
           markerElement = markerIcon;
           coordinate = place.position;
@@ -12721,8 +12789,9 @@ class MarkerController {
               content.category = "";
             }
             content.position = data.position;
-            floorId = data.inFloor(floors)?.key;
+            content.floorId = data.inFloors?.[0];
           }
+          floorId = content.floorId;
           markerElement = PopupFactory.create({
             name: content.name,
             category: content.category,
@@ -12754,16 +12823,33 @@ class MarkerController {
     );
     const currentFloor = this.map?.getCurrentFloor();
     const coordinates = this.markersIds.filter((m) => m.floorId === currentFloor).map((m) => m.coordinate);
-    if (coordinates.length > 0) {
+    if (coordinates.length === 1) {
+      setTimeout(() => {
+        this.map?.updateCamera({
+          center: coordinates[0],
+          bearing: this.config?.mapRotations?.[this.parentPlace?.lazarilloId ?? ""]?.angle ?? 0,
+          pitch: this.config?.pitch ?? 0,
+          zoom: this.config?.initialZoom ?? 18,
+          animate: true
+        });
+      }, 200);
+    } else if (coordinates.length > 0) {
       setTimeout(() => {
         this.map?.fitCoordinates(coordinates, {
           padding: {
-            top: 350,
-            bottom: 50,
-            left: 50,
-            right: 100
+            top: 200,
+            bottom: 200,
+            left: 200,
+            right: 200
           }
         });
+        this.map?.updateCamera({
+          bearing: this.config?.mapRotations?.[this.parentPlace?.lazarilloId ?? ""]?.angle ?? 0,
+          pitch: this.config?.pitch ?? 0,
+          // @ts-expect-error TODO: need sdk to get zoom
+          zoom: Math.min(this.config?.initialZoom ?? 18, this.map?.map.getZoom() ?? 18),
+          animate: true
+        });
       }, 200);
     }
   }
@@ -12808,10 +12894,30 @@ class RouteAnimationController {
     if (coordinates.length > 0) {
       this.lzMap?.fitCoordinates(coordinates, {
         padding: {
-          bottom: 150,
-          left: 150,
-          right: 150,
-          top: 150
+          bottom: 250,
+          left: 250,
+          right: 250,
+          top: 250
+        }
+      });
+      const routeSteps = [
+        {
+          floorId: this.route?.legs?.at(0)?.steps?.at(0)?.startInsideFloor,
+          coordinates: this.route?.legs?.at(0)?.steps?.at(0)?.startLocation
+        },
+        {
+          floorId: this.route?.legs?.at(-1)?.steps?.at(-1)?.endInsideFloor,
+          coordinates: this.route?.legs?.at(-1)?.steps?.at(-1)?.endLocation
+        }
+      ];
+      routeSteps.forEach((step) => {
+        if (floorId === step.floorId && step.coordinates) {
+          this.lzMap?.updateCamera({
+            animate: false,
+            center: step.coordinates,
+            // @ts-expect-error TODO: need sdk to get zoom
+            zoom: Math.min(this.lzMap?.map.getZoom() ?? 18, this.config?.initialZoom ?? 18)
+          });
         }
       });
     }
@@ -12823,14 +12929,17 @@ class RouteAnimationController {
   setLocale(locale) {
     this.locale = locale;
   }
+  setConfig(config) {
+    this.config = config;
+  }
   startRouteAnimation(route) {
     if (!this.connected || !this.lzMap || this.isAnimatingRoute) return;
     this.isAnimatingRoute = true;
     this.stepAnimationDate = /* @__PURE__ */ new Date();
+    this.route = route;
     const animationConfig = {
       minimumSpeed: 20,
       callBack: (status) => {
-        this.stepAnimationDate = /* @__PURE__ */ new Date();
         if (status.isFinished) {
           this.stopAnimatedRoute();
           this.handlers.onRouteAnimationFinished();
@@ -12886,7 +12995,6 @@ class RouteAnimationController {
       this.setCurrentFloor(firstFloor);
     }
     this.lzMap.startAnimateRouteV2(route, drawingConfig, animationConfig);
-    this.route = route;
     this.handlers.onStartRouteAnimation();
   }
   removeRoute() {
@@ -12950,4 +13058,4 @@ class RouteAnimationController {
 }
 
 export { MarkerController as M, RouteAnimationController as R, SDKController as S };
-//# sourceMappingURL=utils-EeRdvb4i.js.map
+//# sourceMappingURL=utils-DM-AJZn2.js.map

package/dist/es/index.js

@@ -1,3 +1,3 @@
-export { c as RouteViewTotems } from './assets/route-view-totems-BWtwjegR.js';
-export { M as MapViewWithModal } from './assets/map-view-with-modal-DfkRlpPp.js';
+export { c as RouteViewTotems } from './assets/route-view-totems-CdM6PRGO.js';
+export { M as MapViewWithModal } from './assets/map-view-with-modal-DiR8q30Q.js';
 //# sourceMappingURL=index.js.map

package/dist/es/route-view-totems.js

@@ -1,3 +1,3 @@
-export { c as RouteViewTotems } from './assets/route-view-totems-BWtwjegR.js';
-import './assets/utils-EeRdvb4i.js';
+export { c as RouteViewTotems } from './assets/route-view-totems-CdM6PRGO.js';
+import './assets/utils-DM-AJZn2.js';
 //# sourceMappingURL=route-view-totems.js.map