mobility-toolbox-js 2.3.9 → 2.3.10

package/src/common/styles/realtimeDefaultStyle.ts

@@ -0,0 +1,436 @@
+import type {
+  RealtimeTrajectory,
+  ViewState,
+  StyleCache,
+  RealtimeStyleOptions,
+  RealtimeStyleFunction,
+} from '../../types';
+import createCanvas from '../utils/createCanvas';
+
+/** @private */
+const cacheDelayBg: StyleCache = {};
+
+/**
+ * Draw circle delay background
+ *
+ * @private
+ */
+export const getDelayBgCanvas = (
+  origin: number,
+  radius: number,
+  color: string,
+) => {
+  const key = `${origin}, ${radius}, ${color}`;
+  if (!cacheDelayBg[key]) {
+    const canvas = createCanvas(origin * 2, origin * 2);
+    if (canvas) {
+      const ctx = canvas.getContext('2d');
+      if (!ctx) {
+        return null;
+      }
+      ctx.beginPath();
+      ctx.arc(origin, origin, radius, 0, 2 * Math.PI, false);
+      ctx.fillStyle = color;
+      ctx.filter = 'blur(1px)';
+      ctx.fill();
+      cacheDelayBg[key] = canvas;
+    }
+  }
+  return cacheDelayBg[key];
+};
+
+/** @private */
+const cacheDelayText: StyleCache = {};
+
+/**
+ * Draw delay text
+ *
+ * @private
+ */
+export const getDelayTextCanvas = (
+  text: string,
+  fontSize: number,
+  font: string,
+  delayColor: string,
+  delayOutlineColor: string = '#000',
+  pixelRatio: number = 1,
+) => {
+  const key = `${text}, ${font}, ${delayColor}, ${delayOutlineColor}, ${pixelRatio}`;
+  if (!cacheDelayText[key]) {
+    const canvas = createCanvas(
+      Math.ceil(text.length * fontSize),
+      Math.ceil(fontSize + 8 * pixelRatio),
+    );
+    if (canvas) {
+      const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+      if (!ctx) {
+        return null;
+      }
+      ctx.font = font;
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'middle';
+      ctx.font = font;
+      ctx.fillStyle = delayColor;
+      ctx.strokeStyle = delayOutlineColor;
+      ctx.lineWidth = 1.5 * pixelRatio;
+      ctx.strokeText(text, 0, fontSize);
+      ctx.fillText(text, 0, fontSize);
+      cacheDelayText[key] = canvas;
+    }
+  }
+  return cacheDelayText[key];
+};
+
+/** @private */
+const cacheCircle: StyleCache = {};
+
+/**
+ * Draw colored circle with black border
+ *
+ * @private
+ */
+export const getCircleCanvas = (
+  origin: number,
+  radius: number,
+  color: string,
+  hasStroke: boolean,
+  hasDash: boolean,
+  pixelRatio: number,
+) => {
+  const key = `${origin}, ${radius}, ${color}, ${hasStroke},  ${hasDash}, ${pixelRatio}`;
+  if (!cacheCircle[key]) {
+    const canvas = createCanvas(origin * 2, origin * 2);
+    if (canvas) {
+      const ctx = canvas.getContext('2d');
+      if (!ctx) {
+        return null;
+      }
+      ctx.fillStyle = color;
+
+      if (hasStroke) {
+        ctx.lineWidth = 1 * pixelRatio;
+        ctx.strokeStyle = '#000000';
+      }
+
+      ctx.beginPath();
+      ctx.arc(origin, origin, radius, 0, 2 * Math.PI, false);
+      ctx.fill();
+
+      if (hasDash) {
+        ctx.setLineDash([5, 3]);
+      }
+
+      if (hasStroke) {
+        ctx.stroke();
+      }
+
+      cacheCircle[key] = canvas;
+    }
+  }
+  return cacheCircle[key];
+};
+
+/** @private */
+const cacheText: StyleCache = {};
+
+/**
+ * Draw text in the circle
+ *
+ * @private
+ */
+export const getTextCanvas = (
+  text: string,
+  origin: number,
+  textSize: number,
+  fillColor: string,
+  strokeColor: string,
+  hasStroke: boolean,
+  pixelRatio: number,
+  getTextFont: (fontSize: number, text?: string) => string,
+) => {
+  const key = `${text}, ${origin}, ${textSize}, ${fillColor},${strokeColor}, ${hasStroke}, ${pixelRatio}`;
+  if (!cacheText[key]) {
+    const canvas = createCanvas(origin * 2, origin * 2);
+    if (canvas) {
+      const ctx = canvas.getContext('2d');
+      if (!ctx) {
+        return null;
+      }
+
+      // Draw a stroke to the text only if a provider provides realtime but we don't use it.
+      if (hasStroke) {
+        ctx.save();
+        ctx.textBaseline = 'middle';
+        ctx.textAlign = 'center';
+        ctx.font = getTextFont(textSize + 2, text);
+        ctx.strokeStyle = strokeColor;
+        ctx.strokeText(text, origin, origin);
+        ctx.restore();
+      }
+
+      // Draw a text
+      ctx.textBaseline = 'middle';
+      ctx.textAlign = 'center';
+      ctx.fillStyle = fillColor;
+      ctx.font = getTextFont(textSize, text);
+      ctx.strokeStyle = strokeColor;
+      ctx.strokeText(text, origin, origin);
+      ctx.fillText(text, origin, origin);
+
+      cacheText[key] = canvas;
+    }
+  }
+  return cacheText[key];
+};
+
+/** @private */
+const cache: StyleCache = {};
+
+/**
+ * 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 realtimeDefaultStyle: RealtimeStyleFunction = (
+  trajectory: RealtimeTrajectory,
+  viewState: ViewState,
+  options: RealtimeStyleOptions,
+) => {
+  const {
+    hoverVehicleId,
+    selectedVehicleId,
+    useDelayStyle,
+    delayOutlineColor = '#000',
+    delayDisplay = 300000,
+    getRadius = () => 0,
+    getBgColor = () => '#000',
+    getDelayColor = () => '#000',
+    getDelayText = () => null,
+    getDelayFont = (fontSize: number) => `bold ${fontSize}px arial, sans-serif`,
+    getText = (text?: string) => text,
+    getTextFont = (fontSize: number) => `bold ${fontSize}px arial, sans-serif`,
+    getTextColor = () => '#000',
+    getTextSize = () => 14,
+    getMaxRadiusForText = () => 10,
+    getMaxRadiusForStrokeAndDelay = () => 7,
+  } = options;
+
+  const { zoom, pixelRatio = 1 } = viewState;
+  let { type } = trajectory.properties;
+  const {
+    train_id: id,
+    line,
+    delay,
+    state,
+    operator_provides_realtime_journey: operatorProvidesRealtime,
+  } = trajectory.properties;
+  let { name, text_color: textColor, color } = line || {};
+
+  name = getText(name);
+
+  const cancelled = state === 'JOURNEY_CANCELLED';
+
+  if (!type) {
+    type = 'Rail';
+  }
+
+  if (!name) {
+    name = 'I';
+  }
+
+  if (!textColor) {
+    textColor = '#000000';
+  }
+
+  if (color && color[0] !== '#') {
+    color = `#${color}`;
+  }
+
+  if (textColor[0] !== '#') {
+    textColor = `#${textColor}`;
+  }
+
+  const z = Math.min(Math.floor(zoom || 1), 16);
+  const hover = !!(hoverVehicleId && hoverVehicleId === id);
+  const selected = !!(selectedVehicleId && selectedVehicleId === id);
+
+  // Calcul the radius of the circle
+  let radius = getRadius(type, z) * pixelRatio;
+  const isDisplayStrokeAndDelay =
+    radius >= getMaxRadiusForStrokeAndDelay() * pixelRatio;
+
+  if (hover || selected) {
+    radius = isDisplayStrokeAndDelay
+      ? radius + 5 * pixelRatio
+      : 14 * pixelRatio;
+  }
+  const isDisplayText = radius > getMaxRadiusForText() * pixelRatio;
+
+  // Optimize the cache key, very important in high zoom level
+  let key = `${radius}${hover || selected}`;
+
+  if (useDelayStyle) {
+    key += `${operatorProvidesRealtime}${delay}`;
+
+    if (isDisplayStrokeAndDelay) {
+      key += `${cancelled}`;
+    }
+  } else {
+    key += `${color || type}`;
+
+    if (isDisplayStrokeAndDelay) {
+      key += `${cancelled}${delay}`;
+    }
+  }
+
+  if (isDisplayText) {
+    key += `${name}${textColor}`;
+  }
+
+  if (!cache[key]) {
+    if (radius === 0) {
+      return null;
+    }
+
+    const margin = 1 * pixelRatio;
+    const radiusDelay = radius + 2 * pixelRatio;
+    const markerSize = radius * 2;
+    const size = radiusDelay * 2 + margin * 2;
+    const origin = size / 2;
+
+    // Draw circle delay background
+    let delayBg = null;
+    if (isDisplayStrokeAndDelay && delay !== null) {
+      delayBg = getDelayBgCanvas(
+        origin,
+        radiusDelay,
+        getDelayColor(delay, cancelled),
+      );
+    }
+
+    // Show delay if feature is hovered or if delay is above 5mins.
+    let delayText = null;
+    let fontSize = 0;
+    if (
+      isDisplayStrokeAndDelay &&
+      (hover || (delay || 0) >= delayDisplay || cancelled)
+    ) {
+      // Draw delay text
+      fontSize =
+        Math.max(
+          cancelled ? 19 : 14,
+          Math.min(cancelled ? 19 : 17, radius * 1.2),
+        ) * pixelRatio;
+      const text = getDelayText(delay, cancelled);
+
+      if (text) {
+        delayText = getDelayTextCanvas(
+          text,
+          fontSize,
+          getDelayFont(fontSize, text),
+          getDelayColor(delay, cancelled, true),
+          delayOutlineColor,
+          pixelRatio,
+        );
+      }
+    }
+
+    // Draw colored circle with black border
+    let circleFillColor;
+    if (useDelayStyle) {
+      circleFillColor = getDelayColor(delay, cancelled);
+    } else {
+      circleFillColor = color || getBgColor(type);
+    }
+
+    const hasStroke = isDisplayStrokeAndDelay || hover || selected;
+
+    const hasDash =
+      !!isDisplayStrokeAndDelay &&
+      !!useDelayStyle &&
+      delay === null &&
+      operatorProvidesRealtime === 'yes';
+
+    const circle = getCircleCanvas(
+      origin,
+      radius,
+      circleFillColor,
+      hasStroke,
+      hasDash,
+      pixelRatio,
+    );
+
+    // Create the canvas
+    const width = size + (delayText?.width || 0) * 2;
+    const height = size;
+    const canvas = createCanvas(width, height);
+    if (canvas) {
+      const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+      if (!ctx) {
+        return null;
+      }
+
+      // The renderTrajectories will center the image on the vehicle positions.
+      const originX = delayText?.width || 0;
+
+      if (delayBg) {
+        ctx.drawImage(delayBg, originX, 0);
+      }
+
+      if (circle) {
+        ctx.drawImage(circle, originX, 0);
+      }
+
+      // Draw text in the circle
+      let circleText = null;
+      if (isDisplayText) {
+        const fontSize2 = Math.max(radius, 10);
+        const textSize = getTextSize(
+          ctx,
+          markerSize,
+          name,
+          fontSize2,
+          getTextFont,
+        );
+        const textColor2 = !useDelayStyle
+          ? textColor || getTextColor(type)
+          : '#000000';
+        const hasStroke2 =
+          !!useDelayStyle &&
+          delay === null &&
+          operatorProvidesRealtime === 'yes';
+
+        circleText = getTextCanvas(
+          name,
+          origin,
+          textSize,
+          textColor2,
+          circleFillColor,
+          hasStroke2,
+          pixelRatio,
+          getTextFont,
+        );
+      }
+
+      if (circleText) {
+        ctx.drawImage(circleText, originX, 0);
+      }
+
+      if (delayText) {
+        ctx.drawImage(
+          delayText,
+          originX + Math.ceil(origin + radiusDelay) + margin,
+          Math.ceil(origin - fontSize),
+        );
+      }
+
+      cache[key] = canvas;
+    }
+  }
+
+  return cache[key];
+};
+export default realtimeDefaultStyle;

package/src/common/styles/realtimeDelayStyle.ts

@@ -0,0 +1,27 @@
+import realtimeDefaultStyle from './realtimeDefaultStyle';
+
+import type {
+  RealtimeTrajectory,
+  ViewState,
+  RealtimeStyleOptions,
+  RealtimeStyleFunction,
+} from '../../types';
+/**
+ * A tracker style that display the delay as backgroundColor.
+ *
+ * @param {*} trajectory The trajectory to render.
+ * @param {*} viewState The view state of the map.
+ * @param {*} options Some options to change the rendering
+ * @return a canvas
+ */
+const realtimeDelayStyle: RealtimeStyleFunction = (
+  trajectory: RealtimeTrajectory,
+  viewState: ViewState,
+  options: RealtimeStyleOptions,
+) => {
+  return realtimeDefaultStyle(trajectory, viewState, {
+    ...options,
+    useDelayStyle: true,
+  });
+};
+export default realtimeDelayStyle;

package/src/common/styles/realtimeHeadingStyle.ts

@@ -0,0 +1,138 @@
+import type {
+  RealtimeTrajectory,
+  ViewState,
+  RealtimeStyleOptions,
+  RealtimeStyleFunction,
+  AnyCanvas,
+} from '../../types';
+import createCanvas from '../utils/createCanvas';
+import { getBgColor } from '../utils/realtimeConfig';
+import realtimeDefaultStyle from './realtimeDefaultStyle';
+
+/** @private */
+const rotateCanvas = (canvas: AnyCanvas, rotation: number) => {
+  const ctx = canvas.getContext('2d');
+  ctx?.translate(canvas.width / 2, canvas.height / 2);
+  ctx?.rotate(rotation);
+  ctx?.translate(-canvas.width / 2, -canvas.height / 2);
+};
+
+/** @private */
+const arrowCache: {
+  [key: string]: AnyCanvas | null;
+} = {};
+
+/** @private */
+const getArrowCanvas = (fillColor: string): AnyCanvas | null => {
+  const key = `${fillColor}`;
+  if (!arrowCache[key]) {
+    // Create the arrow canvas
+    const arrowCanvas = createCanvas(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];
+};
+
+/** @private */
+const bufferArrowCache: {
+  [key: string]: AnyCanvas | null;
+} = {};
+
+/** @private */
+const getBufferArrowCanvas = (
+  canvas: AnyCanvas,
+  fillColor: string,
+  rotation: number,
+): AnyCanvas | null => {
+  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?.drawImage(
+        arrowCanvas,
+        buffer.width - margin,
+        buffer.height / 2 - arrowCanvas.height / 2,
+        arrowCanvas.width,
+        arrowCanvas.height,
+      );
+      bufferCtx?.save();
+      const rot = rotation + (90 * Math.PI) / 180;
+      rotateCanvas(buffer, -rot);
+      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: RealtimeStyleFunction = (
+  trajectory: RealtimeTrajectory,
+  viewState: ViewState,
+  options: RealtimeStyleOptions,
+) => {
+  // @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,
+      );
+      vehicleWithArrow
+        ?.getContext('2d')
+        ?.drawImage(bufferArrow, 0, 0, bufferArrow.width, bufferArrow.height);
+      vehicleWithArrow
+        ?.getContext('2d')
+        ?.drawImage(
+          canvas,
+          bufferSize,
+          bufferSize,
+          canvas.width,
+          canvas.height,
+        );
+      return vehicleWithArrow;
+    }
+  }
+  return canvas;
+};
+export default realtimeHeadingStyle;

package/src/common/styles/realtimeSimpleStyle.ts

@@ -0,0 +1,25 @@
+import type { AnyCanvas, RealtimeStyleFunction } from '../../types';
+import createCanvas from '../utils/createCanvas';
+
+/**
+ * A very simple tracker style.
+ * Display blue point for each train.
+ */
+let canvas: AnyCanvas | null;
+const realtimeSimpleStyle: RealtimeStyleFunction = () => {
+  if (!canvas) {
+    canvas = createCanvas(15, 15);
+    const ctx = canvas?.getContext('2d');
+    if (ctx) {
+      ctx.arc(8, 8, 5, 0, 2 * Math.PI, false);
+      ctx.fillStyle = '#8ED6FF';
+      ctx.fill();
+      ctx.lineWidth = 3;
+      ctx.strokeStyle = 'black';
+      ctx.stroke();
+      ctx.lineWidth = 3;
+    }
+  }
+  return canvas;
+};
+export default realtimeSimpleStyle;

package/{common → src/common}/typedefs.js

@@ -55,5 +55,5 @@
  * @property {number!} rotation  An angle in radians representing the direction (from the true north) towards which the vehicle is facing.
  */
 // These lines is to block TypeScript to add "use strict;" in the outputed file.
-const dummy = () => { };
+const dummy = () => {};
 export default dummy;

package/src/common/utils/compareDepartures.ts

@@ -0,0 +1,46 @@
+import { RealtimeDeparture } from '../../types';
+
+/**
+ * Compare two given departures for sort alogithm,
+ * @param {Departure} a First departure.
+ * @param {Departure} b Second departure.
+ * @param {boolean} [sortByMinArrivalTime=false] Sort departures by arrival time.
+ * @private
+ */
+const compareDepartures = (
+  a: RealtimeDeparture,
+  b: RealtimeDeparture,
+  sortByMinArrivalTime: boolean = false,
+): number => {
+  // First LEAVING and HIDDEN, then BOARDING and then sorted by time.
+  const topStates = ['HIDDEN', 'LEAVING', 'BOARDING'];
+  const aTop = a.has_fzo && topStates.indexOf(a.state) > -1;
+  const bTop = b.has_fzo && topStates.indexOf(b.state) > -1;
+
+  if (aTop || bTop) {
+    if (aTop !== bTop) {
+      return aTop ? -1 : 1;
+    }
+
+    if (a.state !== b.state) {
+      // one is leaving
+      return topStates.indexOf(a.state) - topStates.indexOf(b.state);
+    }
+  }
+
+  let aDuration = null;
+  let bDuration = null;
+  const now = Date.now();
+
+  if (sortByMinArrivalTime) {
+    aDuration = new Date(a.min_arrival_time || a.time).getTime() - now;
+    bDuration = new Date(b.min_arrival_time || b.time).getTime() - now;
+  } else {
+    aDuration = new Date(a.time).getTime() - now;
+    bDuration = new Date(b.time).getTime() - now;
+  }
+
+  return aDuration - bDuration;
+};
+
+export default compareDepartures;

package/src/common/utils/createCanvas.ts

@@ -0,0 +1,33 @@
+import { AnyCanvas } from '../../types';
+
+/**
+ * This function try to create a canvas element and return it.
+ * it uses document.createElement('canvas') if document is available
+ * or new OffscreenCanvas(width, height) if OffscreenCanvas is avalaible (for web worker)
+ * or it returns null if neither is available.
+ * @private
+ */
+const createCanvas = (width: number, height: number): AnyCanvas | null => {
+  let canvas = null;
+
+  // Prevent SSR errors
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  if (typeof document !== 'undefined' && document?.createElement) {
+    canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+  } else if (OffscreenCanvas) {
+    canvas = new OffscreenCanvas(width, height);
+  } else {
+    // eslint-disable-next-line no-console
+    console.error(
+      "We didn't find a way to create a canvas element, document.createElement('canvas') and new OffscrenCanvas() are not supported",
+    );
+  }
+  return canvas;
+};
+
+export default createCanvas;