mobility-toolbox-js 3.0.1-beta.9 → 3.1.0-beta.1

package/common/utils/RealtimeEngine.d.ts

@@ -25,6 +25,7 @@ export interface RealtimeEngineOptions {
     minZoomInterpolation?: number;
     mode?: RealtimeMode;
     motsByZoom?: RealtimeMot[][];
+    onIdle?: (realtimeEngine: RealtimeEngine) => void;
     onRender?: (renderState: RealtimeRenderState, viewState: ViewState) => void;
     onStart?: (realtimeEngine: RealtimeEngine) => void;
     onStop?: (realtimeEngine: RealtimeEngine) => void;
@@ -52,6 +53,7 @@ export interface RealtimeEngineOptions {
  * This class is totally agnostic from Maplibre or OpenLayers and must stay taht way.
  */
 declare class RealtimeEngine {
+    _idleTimeout?: number;
     _mode: RealtimeMode;
     _speed: number;
     _style: RealtimeStyleFunction;
@@ -69,11 +71,13 @@ declare class RealtimeEngine {
     getMotsByZoom: (zoom: number) => RealtimeMot[];
     getRenderTimeIntervalByZoom: (zoom: number) => number;
     hoverVehicleId?: RealtimeTrainId;
+    isIdle: boolean;
     isUpdateBboxOnMoveEnd: boolean;
     live?: boolean;
     minZoomInterpolation: number;
     mots?: RealtimeMot[];
     motsByZoom: RealtimeMot[][];
+    onIdle?: (realtimeLayer: RealtimeEngine) => void;
     onRender?: (renderState: RealtimeRenderState, viewState: ViewState) => void;
     onStart?: (realtimeLayer: RealtimeEngine) => void;
     onStop?: (realtimeLayer: RealtimeEngine) => void;
@@ -210,5 +214,6 @@ declare class RealtimeEngine {
      * @private
      */
     stopUpdateTime(): void;
+    updateIdleState(): void;
 }
 export default RealtimeEngine;

package/common/utils/RealtimeEngine.js

@@ -52,6 +52,7 @@ class RealtimeEngine {
         this.renderTrajectories();
     }
     constructor(options) {
+        this.isIdle = false;
         this.getViewState = () => ({});
         this.shouldRender = () => true;
         this._mode = options.mode || RealtimeModes.TOPOGRAPHIC;
@@ -88,6 +89,7 @@ class RealtimeEngine {
         this.getViewState = options.getViewState || (() => ({}));
         this.shouldRender = options.shouldRender || (() => true);
         this.onRender = options.onRender;
+        this.onIdle = options.onIdle;
         this.onStart = options.onStart;
         this.onStop = options.onStop;
         this.format = new GeoJSON();
@@ -279,6 +281,7 @@ class RealtimeEngine {
      * @private
      */
     onTrajectoryMessage(data) {
+        this.updateIdleState();
         if (!data.content) {
             return;
         }
@@ -439,6 +442,7 @@ class RealtimeEngine {
         return true;
     }
     setBbox() {
+        this.updateIdleState();
         const viewState = this.getViewState();
         const extent = viewState.extent;
         const zoom = viewState.zoom || 0;
@@ -550,5 +554,14 @@ class RealtimeEngine {
             this.updateTimeInterval = undefined;
         }
     }
+    updateIdleState() {
+        this.isIdle = false;
+        clearTimeout(this._idleTimeout);
+        this._idleTimeout = window.setTimeout(() => {
+            var _a;
+            this.isIdle = true;
+            (_a = this.onIdle) === null || _a === void 0 ? void 0 : _a.call(this, this);
+        }, 1000);
+    }
 }
 export default RealtimeEngine;

package/common/utils/renderTrajectories.js

@@ -28,7 +28,10 @@ const renderTrajectories = (canvas, trajectories, style, viewState, options) =>
     const context = canvas.getContext('2d');
     context === null || context === void 0 ? void 0 : context.clearRect(0, 0, canvas.width, canvas.height);
     const [width, height] = size;
-    if (width && height && (canvas.width !== width || canvas.height !== height)) {
+    if (width &&
+        height &&
+        (canvas.width !== width * pixelRatio ||
+            canvas.height !== height * pixelRatio)) {
         [canvas.width, canvas.height] = [width * pixelRatio, height * pixelRatio];
     }
     const coordinateToPixelTransform = compose(create(), size[0] / 2, size[1] / 2, 1 / resolution, -1 / resolution, -rotation, -center[0], -center[1]);
@@ -105,6 +108,7 @@ const renderTrajectories = (canvas, trajectories, style, viewState, options) =>
         context === null || context === void 0 ? void 0 : context.drawImage(hoverVehicleImg, Math.floor(hoverVehiclePx[0] - hoverVehicleImg.width / 2), Math.floor(hoverVehiclePx[1] - hoverVehicleImg.height / 2));
     }
     return {
+        // isReady: true,
         renderedTrajectories,
     };
 };

package/mbt.js

@@ -25318,7 +25318,7 @@ uniform ${i3} ${a3} u_${s3};
     const context = canvas2.getContext("2d");
     context?.clearRect(0, 0, canvas2.width, canvas2.height);
     const [width, height] = size;
-    if (width && height && (canvas2.width !== width || canvas2.height !== height)) {
+    if (width && height && (canvas2.width !== width * pixelRatio || canvas2.height !== height * pixelRatio)) {
       [canvas2.width, canvas2.height] = [width * pixelRatio, height * pixelRatio];
     }
     const coordinateToPixelTransform = compose(
@@ -25400,6 +25400,7 @@ uniform ${i3} ${a3} u_${s3};
       );
     }
     return {
+      // isReady: true,
       renderedTrajectories
     };
   };
@@ -46563,6 +46564,7 @@ uniform ${i3} ${a3} u_${s3};
   var import_lodash5 = __toESM(require_lodash2());
   var RealtimeEngine = class {
     constructor(options) {
+      this.isIdle = false;
       this.getViewState = () => ({});
       this.shouldRender = () => true;
       this._mode = options.mode || RealtimeModes.TOPOGRAPHIC;
@@ -46589,6 +46591,7 @@ uniform ${i3} ${a3} u_${s3};
       this.getViewState = options.getViewState || (() => ({}));
       this.shouldRender = options.shouldRender || (() => true);
       this.onRender = options.onRender;
+      this.onIdle = options.onIdle;
       this.onStart = options.onStart;
       this.onStop = options.onStop;
       this.format = new GeoJSON_default();
@@ -46850,6 +46853,7 @@ uniform ${i3} ${a3} u_${s3};
      * @private
      */
     onTrajectoryMessage(data) {
+      this.updateIdleState();
       if (!data.content) {
         return;
       }
@@ -47008,6 +47012,7 @@ uniform ${i3} ${a3} u_${s3};
       return true;
     }
     setBbox() {
+      this.updateIdleState();
       const viewState = this.getViewState();
       const extent = viewState.extent;
       const zoom = viewState.zoom || 0;
@@ -47113,6 +47118,14 @@ uniform ${i3} ${a3} u_${s3};
         this.updateTimeInterval = void 0;
       }
     }
+    updateIdleState() {
+      this.isIdle = false;
+      clearTimeout(this._idleTimeout);
+      this._idleTimeout = window.setTimeout(() => {
+        this.isIdle = true;
+        this.onIdle?.(this);
+      }, 1e3);
+    }
   };
   var RealtimeEngine_default = RealtimeEngine;
 
@@ -47165,8 +47178,9 @@ uniform ${i3} ${a3} u_${s3};
       return true;
     }
     renderFrame(frameState) {
-      const { canvas: canvas2, renderedViewState } = this.getLayer();
+      const { canvas: canvas2, engine, renderedViewState } = this.getLayer();
       this.getLayer().engine.pixelRatio = frameState.pixelRatio;
+      this.ready = !!engine.renderState?.renderedTrajectories && engine.isIdle;
       if (!this.container) {
         this.container = document.createElement("div");
         this.container.className = this.getLayer().getClassName();
@@ -47372,6 +47386,7 @@ uniform ${i3} ${a3} u_${s3};
       defineDeprecatedProperties_default(this, options);
       this.engine = new RealtimeEngine_default({
         getViewState: this.getViewState.bind(this),
+        onIdle: this.onRealtimeEngineIdle.bind(this),
         onRender: this.onRealtimeEngineRender.bind(this),
         ...options
       });
@@ -47444,6 +47459,11 @@ uniform ${i3} ${a3} u_${s3};
           this.engine.start();
         }
         this.olEventsKeys.push(
+          mapInternal.on("movestart", () => {
+            if (this.engine.isUpdateBboxOnMoveEnd) {
+              this.engine.updateIdleState();
+            }
+          }),
           ...mapInternal.on(
             ["moveend", "change:target"],
             // @ts-expect-error  - bad ol definitions
@@ -47613,6 +47633,9 @@ uniform ${i3} ${a3} u_${s3};
       }
       this.engine.setBbox();
     }
+    onRealtimeEngineIdle() {
+      this.changed();
+    }
     /**
      * Callback when the RealtimeEngine has rendered successfully.
      */