mobility-toolbox-js 2.0.0-beta.71 → 2.0.0-beta.73

package/common/styles/index.d.ts

@@ -1,5 +1,6 @@
 export { default as realtimeDefaultStyle } from "./realtimeDefaultStyle";
 export { default as realtimeDelayStyle } from "./realtimeDelayStyle";
 export { default as realtimeSimpleStyle } from "./realtimeSimpleStyle";
+export { default as realtimeHeadingStyle } from "./realtimeHeadingStyle";
 export * from "./realtimeDefaultStyle";
 //# sourceMappingURL=index.d.ts.map

package/common/styles/index.js

@@ -1,4 +1,5 @@
 export { default as realtimeDefaultStyle } from './realtimeDefaultStyle';
 export { default as realtimeDelayStyle } from './realtimeDelayStyle';
 export { default as realtimeSimpleStyle } from './realtimeSimpleStyle';
+export { default as realtimeHeadingStyle } from './realtimeHeadingStyle';
 export * from './realtimeDefaultStyle';

package/common/styles/realtimeHeadingStyle.d.ts

@@ -0,0 +1,12 @@
+import type { RealtimeStyleFunction } from '../../types';
+/**
+ * A tracker style that take in account the delay.
+ *
+ * @param {RealtimeTrajectory} trajectory The trajectory to render.
+ * @param {ViewState} viewState The view state of the map.
+ * @param {RealtimeStyleOptions} options Some options to change the rendering
+ * @return a canvas
+ */
+declare const realtimeHeadingStyle: RealtimeStyleFunction;
+export default realtimeHeadingStyle;
+//# sourceMappingURL=realtimeHeadingStyle.d.ts.map

package/common/styles/realtimeHeadingStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"realtimeHeadingStyle.d.ts","sourceRoot":"","sources":["../../../src/common/styles/realtimeHeadingStyle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAIV,qBAAqB,EAEtB,MAAM,aAAa,CAAC;AAoFrB;;;;;;;GAOG;AACH,QAAA,MAAM,oBAAoB,EAAE,qBAoC3B,CAAC;AACF,eAAe,oBAAoB,CAAC"}

package/common/styles/realtimeHeadingStyle.js

@@ -0,0 +1,85 @@
+import createCanvas from '../utils/createCanvas';
+import { getBgColor } from '../utils/realtimeConfig';
+import realtimeDefaultStyle from './realtimeDefaultStyle';
+/** @private */
+const rotateCanvas = (canvas, rotation) => {
+    const ctx = canvas.getContext('2d');
+    ctx === null || ctx === void 0 ? void 0 : ctx.translate(canvas.width / 2, canvas.height / 2);
+    ctx === null || ctx === void 0 ? void 0 : ctx.rotate(rotation);
+    ctx === null || ctx === void 0 ? void 0 : ctx.translate(-canvas.width / 2, -canvas.height / 2);
+};
+const arrowCache = {};
+/** @private */
+const getArrowCanvas = (fillColor) => {
+    const key = `${fillColor}`;
+    if (!arrowCache[key]) {
+        // Create the arrow canvas
+        const arrowCanvas = createCanvas(20, 20);
+        const ctx = arrowCanvas === null || arrowCanvas === void 0 ? void 0 : arrowCanvas.getContext('2d');
+        if (ctx) {
+            ctx.fillStyle = fillColor;
+            ctx.beginPath();
+            ctx.moveTo(5, 5);
+            ctx.lineTo(10, 10);
+            ctx.lineTo(5, 15);
+            ctx.fill();
+            ctx.beginPath();
+            ctx.moveTo(5, 5);
+            ctx.lineTo(10, 10);
+            ctx.lineTo(5, 15);
+            ctx.lineTo(5, 5);
+            ctx.stroke();
+        }
+        arrowCache[key] = arrowCanvas;
+    }
+    return arrowCache[key];
+};
+const bufferArrowCache = {};
+/** @private */
+const getBufferArrowCanvas = (canvas, fillColor, rotation) => {
+    const margin = 20;
+    const bufferKey = `${fillColor},${canvas.width},${canvas.height},${rotation}`;
+    if (!bufferArrowCache[bufferKey]) {
+        // Create a buffer canvas around the current vehicle to display properly the arrow
+        const buffer = createCanvas(canvas.width + margin * 2, canvas.height + margin * 2);
+        const arrowCanvas = getArrowCanvas(fillColor);
+        if (arrowCanvas && buffer) {
+            const bufferCtx = buffer.getContext('2d');
+            bufferCtx === null || bufferCtx === void 0 ? void 0 : bufferCtx.drawImage(arrowCanvas, buffer.width - margin, buffer.height / 2 - arrowCanvas.height / 2, arrowCanvas.width, arrowCanvas.height);
+            bufferCtx === null || bufferCtx === void 0 ? void 0 : bufferCtx.save();
+            const rot = rotation + (90 * Math.PI) / 180;
+            rotateCanvas(buffer, -rot);
+            bufferCtx === null || bufferCtx === void 0 ? void 0 : bufferCtx.restore();
+        }
+        bufferArrowCache[bufferKey] = buffer;
+    }
+    return bufferArrowCache[bufferKey];
+};
+/**
+ * A tracker style that take in account the delay.
+ *
+ * @param {RealtimeTrajectory} trajectory The trajectory to render.
+ * @param {ViewState} viewState The view state of the map.
+ * @param {RealtimeStyleOptions} options Some options to change the rendering
+ * @return a canvas
+ */
+const realtimeHeadingStyle = (trajectory, viewState, options) => {
+    var _a, _b;
+    // @ts-ignore
+    const { rotation, type, line } = trajectory.properties;
+    const { color } = line || {};
+    const canvas = realtimeDefaultStyle(trajectory, viewState, options);
+    if (canvas && rotation !== null) {
+        const circleFillColor = color || getBgColor(type);
+        const bufferArrow = getBufferArrowCanvas(canvas, circleFillColor, rotation);
+        if (bufferArrow) {
+            const bufferSize = (bufferArrow.width - canvas.width) / 2;
+            const vehicleWithArrow = createCanvas(bufferArrow.width, bufferArrow.height);
+            (_a = vehicleWithArrow === null || vehicleWithArrow === void 0 ? void 0 : vehicleWithArrow.getContext('2d')) === null || _a === void 0 ? void 0 : _a.drawImage(bufferArrow, 0, 0, bufferArrow.width, bufferArrow.height);
+            (_b = vehicleWithArrow === null || vehicleWithArrow === void 0 ? void 0 : vehicleWithArrow.getContext('2d')) === null || _b === void 0 ? void 0 : _b.drawImage(canvas, bufferSize, bufferSize, canvas.width, canvas.height);
+            return vehicleWithArrow;
+        }
+    }
+    return canvas;
+};
+export default realtimeHeadingStyle;

package/common/utils/getVehiclePosition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getVehiclePosition.d.ts","sourceRoot":"","sources":["../../../src/common/utils/getVehiclePosition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAI3C,oBAAY,eAAe,GAAG;IAC5B,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;GAOG;AACH,QAAA,MAAM,kBAAkB,QACjB,MAAM,6CAEI,OAAO,KACrB,eA+DF,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"getVehiclePosition.d.ts","sourceRoot":"","sources":["../../../src/common/utils/getVehiclePosition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAI3C,oBAAY,eAAe,GAAG;IAC5B,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;GAOG;AACH,QAAA,MAAM,kBAAkB,QACjB,MAAM,6CAEI,OAAO,KACrB,eAoEF,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/common/utils/getVehiclePosition.js

@@ -9,10 +9,14 @@ import { LineString } from 'ol/geom';
  */
 const getVehiclePosition = (now, trajectory, noInterpolate) => {
     const { time_intervals: timeIntervals, olGeometry, coordinate, } = trajectory.properties;
-    const { type, coordinates } = trajectory.geometry;
+    const { coordinates } = trajectory.geometry;
+    let { type } = trajectory.geometry;
     let geometry = olGeometry;
     let coord;
     let rotation;
+    if (olGeometry) {
+        type = geometry.getType();
+    }
     if (noInterpolate && coordinate) {
         coord = coordinate;
     }

package/common/utils/index.d.ts

@@ -12,5 +12,6 @@ export { default as debounceDeparturesMessages } from "./debounceDeparturesMessa
 export { default as debounceWebsocketMessages } from "./debounceWebsocketMessages";
 export { default as sortAndFilterDepartures } from "./sortAndFilterDepartures";
 export { default as compareDepartures } from "./compareDepartures";
+export { default as createCanvas } from "./createCanvas";
 export * as realtimeConfig from "./realtimeConfig";
 //# sourceMappingURL=index.d.ts.map

package/common/utils/index.js

@@ -12,5 +12,6 @@ export { default as debounceDeparturesMessages } from './debounceDeparturesMessa
 export { default as debounceWebsocketMessages } from './debounceWebsocketMessages';
 export { default as sortAndFilterDepartures } from './sortAndFilterDepartures';
 export { default as compareDepartures } from './compareDepartures';
+export { default as createCanvas } from './createCanvas';
 import * as realtimeConfig_1 from './realtimeConfig';
 export { realtimeConfig_1 as realtimeConfig };

package/common/utils/renderTrajectories.js

@@ -52,10 +52,11 @@ const renderTrajectories = (canvas, trajectories, style, viewState, options) =>
         const { train_id: id, timeOffset } = trajectory.properties;
         // We set the rotation and the timeFraction of the trajectory (used by tralis).
         // if rotation === null that seems there is no rotation available.
-        const { coord, rotation: rotationIcon } = getVehiclePosition(time - (timeOffset || 0), trajectory, noInterpolate);
+        const { coord, rotation: heading } = getVehiclePosition(time - (timeOffset || 0), trajectory, noInterpolate);
+        // console.log(heading);
         // We store  the current vehicle position to the trajectory.
         trajectories[i].properties.coordinate = coord;
-        trajectories[i].properties.rotation = rotationIcon;
+        trajectories[i].properties.rotation = heading;
         if (!coord) {
             // eslint-disable-next-line no-continue
             continue;

package/mbt.js

@@ -33297,6 +33297,7 @@ uniform ${i3} ${o3} u_${a3};
     VectorLayer: () => VectorLayer_default2,
     WMSLayer: () => WMSLayer_default,
     compareDepartures: () => compareDepartures_default,
+    createCanvas: () => createCanvas_default,
     createRealtimeFilters: () => createRealtimeFilters_default,
     debounceDeparturesMessages: () => debounceDeparturesMessages_default,
     debounceWebsocketMessages: () => debounceWebsocketMessages_default,
@@ -33318,6 +33319,7 @@ uniform ${i3} ${o3} u_${a3};
     realtimeConfig: () => realtimeConfig_exports,
     realtimeDefaultStyle: () => realtimeDefaultStyle_default,
     realtimeDelayStyle: () => realtimeDelayStyle_default,
+    realtimeHeadingStyle: () => realtimeHeadingStyle_default,
     realtimeSimpleStyle: () => realtimeSimpleStyle_default,
     removeDuplicate: () => removeDuplicate_default,
     renderTrajectories: () => renderTrajectories_default,
@@ -37985,10 +37987,14 @@ uniform ${i3} ${o3} u_${a3};
       olGeometry,
       coordinate
     } = trajectory.properties;
-    const { type, coordinates: coordinates2 } = trajectory.geometry;
+    const { coordinates: coordinates2 } = trajectory.geometry;
+    let { type } = trajectory.geometry;
     let geometry = olGeometry;
     let coord;
     let rotation;
+    if (olGeometry) {
+      type = geometry.getType();
+    }
     if (noInterpolate && coordinate) {
       coord = coordinate;
     } else if (type === "Point") {
@@ -38083,13 +38089,13 @@ uniform ${i3} ${o3} u_${a3};
         continue;
       }
       const { train_id: id, timeOffset } = trajectory.properties;
-      const { coord, rotation: rotationIcon } = getVehiclePosition_default(
+      const { coord, rotation: heading } = getVehiclePosition_default(
         time - (timeOffset || 0),
         trajectory,
         noInterpolate
       );
       trajectories[i].properties.coordinate = coord;
-      trajectories[i].properties.rotation = rotationIcon;
+      trajectories[i].properties.rotation = heading;
       if (!coord) {
         continue;
       }
@@ -38324,6 +38330,27 @@ uniform ${i3} ${o3} u_${a3};
   };
   var debounceDeparturesMessages_default = debounceDeparturesMessages;
 
+  // src/common/utils/createCanvas.ts
+  var createCanvas = (width, height) => {
+    let canvas2 = null;
+    if (typeof window === "undefined") {
+      return null;
+    }
+    if (typeof document !== "undefined" && document?.createElement) {
+      canvas2 = document.createElement("canvas");
+      canvas2.width = width;
+      canvas2.height = height;
+    } else if (OffscreenCanvas) {
+      canvas2 = new OffscreenCanvas(width, height);
+    } else {
+      console.error(
+        "We didn't find a way to create a canvas element, document.createElement('canvas') and new OffscrenCanvas() are not supported"
+      );
+    }
+    return canvas2;
+  };
+  var createCanvas_default = createCanvas;
+
   // src/common/utils/realtimeConfig.ts
   var realtimeConfig_exports = {};
   __export(realtimeConfig_exports, {
@@ -38471,27 +38498,6 @@ uniform ${i3} ${o3} u_${a3};
     return "";
   };
 
-  // src/common/utils/createCanvas.ts
-  var createCanvas = (width, height) => {
-    let canvas2 = null;
-    if (typeof window === "undefined") {
-      return null;
-    }
-    if (typeof document !== "undefined" && document?.createElement) {
-      canvas2 = document.createElement("canvas");
-      canvas2.width = width;
-      canvas2.height = height;
-    } else if (OffscreenCanvas) {
-      canvas2 = new OffscreenCanvas(width, height);
-    } else {
-      console.error(
-        "We didn't find a way to create a canvas element, document.createElement('canvas') and new OffscrenCanvas() are not supported"
-      );
-    }
-    return canvas2;
-  };
-  var createCanvas_default = createCanvas;
-
   // src/common/styles/realtimeDefaultStyle.ts
   var cacheDelayBg = {};
   var getDelayBgCanvas = (origin, radius, color) => {
@@ -38796,6 +38802,93 @@ uniform ${i3} ${o3} u_${a3};
   };
   var realtimeSimpleStyle_default = realtimeSimpleStyle;
 
+  // src/common/styles/realtimeHeadingStyle.ts
+  var rotateCanvas = (canvas2, rotation) => {
+    const ctx = canvas2.getContext("2d");
+    ctx?.translate(canvas2.width / 2, canvas2.height / 2);
+    ctx?.rotate(rotation);
+    ctx?.translate(-canvas2.width / 2, -canvas2.height / 2);
+  };
+  var arrowCache = {};
+  var getArrowCanvas = (fillColor) => {
+    const key = `${fillColor}`;
+    if (!arrowCache[key]) {
+      const arrowCanvas = createCanvas_default(20, 20);
+      const ctx = arrowCanvas?.getContext("2d");
+      if (ctx) {
+        ctx.fillStyle = fillColor;
+        ctx.beginPath();
+        ctx.moveTo(5, 5);
+        ctx.lineTo(10, 10);
+        ctx.lineTo(5, 15);
+        ctx.fill();
+        ctx.beginPath();
+        ctx.moveTo(5, 5);
+        ctx.lineTo(10, 10);
+        ctx.lineTo(5, 15);
+        ctx.lineTo(5, 5);
+        ctx.stroke();
+      }
+      arrowCache[key] = arrowCanvas;
+    }
+    return arrowCache[key];
+  };
+  var bufferArrowCache = {};
+  var getBufferArrowCanvas = (canvas2, fillColor, rotation) => {
+    const margin = 20;
+    const bufferKey = `${fillColor},${canvas2.width},${canvas2.height},${rotation}`;
+    if (!bufferArrowCache[bufferKey]) {
+      const buffer2 = createCanvas_default(
+        canvas2.width + margin * 2,
+        canvas2.height + margin * 2
+      );
+      const arrowCanvas = getArrowCanvas(fillColor);
+      if (arrowCanvas && buffer2) {
+        const bufferCtx = buffer2.getContext("2d");
+        bufferCtx?.drawImage(
+          arrowCanvas,
+          buffer2.width - margin,
+          buffer2.height / 2 - arrowCanvas.height / 2,
+          arrowCanvas.width,
+          arrowCanvas.height
+        );
+        bufferCtx?.save();
+        const rot = rotation + 90 * Math.PI / 180;
+        rotateCanvas(buffer2, -rot);
+        bufferCtx?.restore();
+      }
+      bufferArrowCache[bufferKey] = buffer2;
+    }
+    return bufferArrowCache[bufferKey];
+  };
+  var realtimeHeadingStyle = (trajectory, viewState, options) => {
+    const { rotation, type, line } = trajectory.properties;
+    const { color } = line || {};
+    const canvas2 = realtimeDefaultStyle_default(trajectory, viewState, options);
+    if (canvas2 && rotation !== null) {
+      const circleFillColor = color || getBgColor(type);
+      const bufferArrow = getBufferArrowCanvas(canvas2, circleFillColor, rotation);
+      if (bufferArrow) {
+        const bufferSize = (bufferArrow.width - canvas2.width) / 2;
+        const vehicleWithArrow = createCanvas_default(
+          bufferArrow.width,
+          bufferArrow.height
+        );
+        vehicleWithArrow?.getContext("2d")?.drawImage(bufferArrow, 0, 0, bufferArrow.width, bufferArrow.height);
+        vehicleWithArrow?.getContext("2d")?.drawImage(
+          canvas2,
+          bufferSize,
+          bufferSize,
+          canvas2.width,
+          canvas2.height
+        );
+        return vehicleWithArrow;
+      }
+    }
+    return canvas2;
+  };
+  var realtimeHeadingStyle_default = realtimeHeadingStyle;
+
   // node_modules/ol/layer/Property.js
   var Property_default = {
     OPACITY: "opacity",
@@ -50506,14 +50599,15 @@ uniform ${i3} ${o3} u_${a3};
       super.setBbox(newExtent, newZoom);
     }
     highlightTrajectory(id) {
-      this.api.getFullTrajectory(id, this.mode, this.generalizationLevel).then((data) => {
+      return this.api.getFullTrajectory(id, this.mode, this.generalizationLevel).then((data) => {
         const fullTrajectory = data.content;
         this.vectorLayer.getSource().clear();
         if (!fullTrajectory || !fullTrajectory.features || !fullTrajectory.features.length) {
-          return;
+          return void 0;
         }
         const features = format.readFeatures(fullTrajectory);
         this.vectorLayer.getSource().addFeatures(features);
+        return features;
       });
     }
     clone(newOptions) {
@@ -50607,6 +50701,7 @@ uniform ${i3} ${o3} u_${a3};
     RoutingAPI: () => RoutingAPI_default,
     StopsAPI: () => StopsAPI_default,
     compareDepartures: () => compareDepartures_default,
+    createCanvas: () => createCanvas_default,
     createRealtimeFilters: () => createRealtimeFilters_default,
     debounceDeparturesMessages: () => debounceDeparturesMessages_default,
     debounceWebsocketMessages: () => debounceWebsocketMessages_default,
@@ -50628,6 +50723,7 @@ uniform ${i3} ${o3} u_${a3};
     realtimeConfig: () => realtimeConfig_exports,
     realtimeDefaultStyle: () => realtimeDefaultStyle_default,
     realtimeDelayStyle: () => realtimeDelayStyle_default,
+    realtimeHeadingStyle: () => realtimeHeadingStyle_default,
     realtimeSimpleStyle: () => realtimeSimpleStyle_default,
     removeDuplicate: () => removeDuplicate_default,
     renderTrajectories: () => renderTrajectories_default,