mobility-toolbox-js 2.3.9 → 2.3.10

package/src/common/utils/getVehiclePosition.ts

@@ -0,0 +1,92 @@
+import { Coordinate } from 'ol/coordinate';
+import { LineString } from 'ol/geom';
+import type { RealtimeTrajectory } from '../../api/typedefs';
+
+export type VehiclePosition = {
+  coord: Coordinate;
+  rotation: number;
+};
+
+/**
+ * Interpolate or not the vehicle position from a trajectory at a specific date.
+ *
+ * @param {number} now Current date to interpolate a position with. In ms.
+ * @param {RealtimeTrajectory} trajectory The trajectory to interpolate.
+ * @param {boolean} noInterpolate If true, the vehicle position is not interpolated on each render but only once.
+ * @returns {VehiclePosition}
+ */
+const getVehiclePosition = (
+  now: number,
+  trajectory: RealtimeTrajectory,
+  noInterpolate: boolean,
+): VehiclePosition => {
+  const {
+    time_intervals: timeIntervals,
+    olGeometry,
+    coordinate,
+  } = trajectory.properties;
+  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;
+  } else if (type === 'Point') {
+    coord = coordinates;
+  } else if (type === 'LineString') {
+    if (!geometry) {
+      geometry = new LineString(coordinates);
+    }
+    const intervals = timeIntervals || [[]];
+    const firstInterval = intervals[0];
+    const lastInterval = intervals[intervals.length - 1];
+
+    // Between the last time interval of a trajectory event and the beginning
+    // of the new trajectory event, there is few seconds, can be 6 to 30
+    // seconds (that's why the vehicle jumps sometimes).
+    // So we make the choice here to display the last (or the first) position
+    // of an trajectory event instead of removing them, if the current date is
+    // outside the time intervals we display the vehicle at the last (or first) position known.
+    if (now < firstInterval[0]) {
+      // Display first position known.
+      [, , rotation] = firstInterval;
+      coord = geometry.getFirstCoordinate();
+    } else if (now > lastInterval[0]) {
+      // Display last position known.
+      [, , rotation] = lastInterval;
+      coord = geometry.getLastCoordinate();
+    } else {
+      // Interpolate position using time intervals.
+      for (let j = 0; j < intervals.length - 1; j += 1) {
+        // Rotation only available in realtime layer.
+        const [start, startFrac] = intervals[j];
+        const [end, endFrac] = intervals[j + 1];
+
+        if (start <= now && now <= end) {
+          // interpolate position inside the time interval.
+          const timeFrac = Math.min((now - start) / (end - start), 1);
+          const geomFrac = timeFrac * (endFrac - startFrac) + startFrac;
+          coord = geometry.getCoordinateAt(geomFrac);
+          [, , rotation] = intervals[j];
+          break;
+        }
+      }
+    }
+  } else {
+    // eslint-disable-next-line no-console
+    console.error(
+      'This geometry type is not supported. Only Point or LineString are. Current geometry: ',
+      geometry,
+    );
+  }
+
+  return { coord, rotation };
+};
+
+export default getVehiclePosition;

package/{common → src/common}/utils/index.js

@@ -14,5 +14,4 @@ export { default as sortAndFilterDepartures } from './sortAndFilterDepartures';
 export { default as compareDepartures } from './compareDepartures';
 export { default as createCanvas } from './createCanvas';
 export { default as getVehiclePosition } from './getVehiclePosition';
-import * as realtimeConfig_1 from './realtimeConfig';
-export { realtimeConfig_1 as realtimeConfig };
+export * as realtimeConfig from './realtimeConfig';

package/src/common/utils/realtimeConfig.test.js

@@ -0,0 +1,57 @@
+import { getDelayText, getTypeIndex } from './realtimeConfig';
+
+describe('trackerConfig', () => {
+  describe('#getTypeIndex()', () => {
+    test("returns the type is it's not a string", () => {
+      const obj = { foo: 'foo' };
+      expect(getTypeIndex(obj)).toBe(obj);
+      expect(getTypeIndex(0)).toBe(0);
+      expect(getTypeIndex(null)).toBe(null);
+      expect(getTypeIndex(undefined)).toBe(undefined);
+    });
+
+    test('find good index for new tracker values', () => {
+      expect(getTypeIndex('tram')).toBe(0);
+      expect(getTypeIndex('subway')).toBe(1);
+      expect(getTypeIndex('bus')).toBe(3);
+      expect(getTypeIndex('ferry')).toBe(4);
+      expect(getTypeIndex('cablecar')).toBe(5);
+      expect(getTypeIndex('gondola')).toBe(6);
+      expect(getTypeIndex('funicular')).toBe(7);
+      expect(getTypeIndex('coach')).toBe(8);
+      expect(getTypeIndex('rail')).toBe(9);
+    });
+  });
+
+  describe('#getDelayText()', () => {
+    test('returns hours', () => {
+      expect(getDelayText(6400000)).toBe('+2h');
+      expect(getDelayText(4500000)).toBe('+1h');
+      expect(getDelayText(3600000)).toBe('+1h');
+    });
+
+    test('returns minutes', () => {
+      expect(getDelayText(100000)).toBe('+2m');
+      expect(getDelayText(68000)).toBe('+1m');
+      expect(getDelayText(60000)).toBe('+1m');
+    });
+
+    test('returns seconds', () => {
+      expect(getDelayText(1800)).toBe('+2s');
+      expect(getDelayText(1400)).toBe('+1s');
+      expect(getDelayText(1000)).toBe('+1s');
+    });
+
+    test('returns milliseconds', () => {
+      expect(getDelayText(100)).toBe('+100ms');
+      expect(getDelayText(999)).toBe('+999ms');
+    });
+
+    test('returns empty string', () => {
+      expect(getDelayText(-45)).toBe('');
+      expect(getDelayText('lalal')).toBe('');
+      expect(getDelayText(null)).toBe('');
+      expect(getDelayText()).toBe('');
+    });
+  });
+});

package/src/common/utils/realtimeConfig.ts

@@ -0,0 +1,228 @@
+import { AnyCanvasContext, RealtimeMot } from '../../types';
+
+/** @private */
+const radiusMapping: number[][] = [
+  [0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
+  [0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
+  [0, 0, 0, 0, 0, 2, 2, 3, 7, 7, 7, 12, 15, 15, 15, 15, 15],
+  [0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
+  [0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
+  [0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
+  [0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
+  [0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
+  [0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
+  [0, 0, 0, 0, 0, 2, 2, 3, 7, 7, 7, 12, 15, 15, 15, 15, 15],
+];
+
+export const MOTS_ONLY_RAIL: RealtimeMot[] = ['rail'];
+export const MOTS_WITH_CABLE: RealtimeMot[] = [
+  'cablecar',
+  'gondola',
+  'funicular',
+  'coach',
+];
+export const MOTS_WITHOUT_CABLE: RealtimeMot[] = [
+  'tram',
+  'subway',
+  'rail',
+  'bus',
+];
+export const MOTS_ALL: RealtimeMot[] = [
+  'tram',
+  'subway',
+  'rail',
+  'bus',
+  'ferry',
+  'cablecar',
+  'gondola',
+  'funicular',
+  'coach',
+];
+
+/**
+ * Trajserv value: 'Tram',  'Subway / Metro / S-Bahn',  'Train', 'Bus', 'Ferry', 'Cable Car', 'Gondola', 'Funicular', 'Long distance bus', 'Rail',
+ * New endpoint use Rail instead of Train.
+ * New tracker values:  null, "tram", "subway", "rail", "bus", "ferry", "cablecar", "gondola", "funicular", "coach".
+ *
+ * @private
+ */
+export const types: RegExp[] = [
+  /^Tram/i,
+  /^Subway( \/ Metro \/ S-Bahn)?/i,
+  /^Train/i,
+  /^Bus/i,
+  /^Ferry/i,
+  /^Cable ?Car/i,
+  /^Gondola/i,
+  /^Funicular/i,
+  /^(Long distance bus|coach)/i,
+  /^Rail/i, // New endpoint use Rail instead of Train.
+];
+
+/**
+ * @private
+ */
+export const bgColors: string[] = [
+  '#ffb400',
+  '#ff5400',
+  '#ff8080',
+  '#ea0000',
+  '#3000ff',
+  '#ffb400',
+  '#41a27b',
+  '#00d237',
+  '#b5b5b5',
+  '#ff8080',
+];
+
+/**
+ * @private
+ */
+export const textColors: string[] = [
+  '#000000',
+  '#ffffff',
+  '#000000',
+  '#ffffff',
+  '#ffffff',
+  '#000000',
+  '#ffffff',
+  '#000000',
+  '#000000',
+  '#000000',
+];
+
+/**
+ * @private
+ */
+export const getTypeIndex = (type: RealtimeMot): number => {
+  if (typeof type === 'string') {
+    return types.findIndex((t) => t.test(type));
+  }
+  return type;
+};
+
+/**
+ * @private
+ */
+export const getRadius = (type: RealtimeMot, zoom: number): number => {
+  try {
+    const typeIdx = getTypeIndex(type || 0);
+    return radiusMapping[typeIdx][zoom];
+  } catch (e) {
+    return 1;
+  }
+};
+
+/**
+ * @private
+ */
+export const getBgColor = (type: RealtimeMot): string => {
+  try {
+    const typeIdx = getTypeIndex(type);
+    return bgColors[typeIdx];
+  } catch (e) {
+    return '#ffffff';
+  }
+};
+
+/**
+ * @private
+ */
+export const getTextColor = (type: RealtimeMot): string => {
+  try {
+    const typeIdx = getTypeIndex(type);
+    return textColors[typeIdx];
+  } catch (e) {
+    return '#ffffff';
+  }
+};
+
+/**
+ * @private
+ */
+export const getTextSize = (
+  ctx: AnyCanvasContext,
+  markerSize: number,
+  text: string,
+  fontSize: number,
+  getTextFont: (fontSize: number, text?: string) => string,
+): number => {
+  if (!ctx) {
+    return 0;
+  }
+  ctx.font = getTextFont(fontSize, text);
+  let newText = ctx.measureText(text);
+
+  const maxiter = 25;
+  let i = 0;
+
+  while (newText.width > markerSize - 6 && i < maxiter) {
+    // eslint-disable-next-line no-param-reassign
+    fontSize -= 0.5;
+    ctx.font = getTextFont(fontSize, text);
+    newText = ctx.measureText(text);
+    i += 1;
+  }
+  return fontSize;
+};
+
+/**
+ * @private
+ * @param {number} delayInMs Delay in milliseconds.
+ * @param {boolean} cancelled true if the journey is cancelled.
+ * @param {boolean} isDelayText true if the color is used for delay text of the symbol.
+ */
+export const getDelayColor = (
+  delayInMs: number | null,
+  cancelled?: boolean,
+  isDelayText?: boolean,
+): string => {
+  if (cancelled) {
+    return isDelayText ? '#ff0000' : '#a0a0a0'; // red or gray
+  }
+  if (delayInMs === null) {
+    return '#a0a0a0'; // grey { r: 160, g: 160, b: 160, s: '160,160,160' };
+  }
+  if (delayInMs >= 3600000) {
+    return '#ed004c'; // pink { r: 237, g: 0, b: 76, s: '237,0,76' };
+  }
+  if (delayInMs >= 500000) {
+    return '#e80000'; // red { r: 232, g: 0, b: 0, s: '232,0,0' };
+  }
+  if (delayInMs >= 300000) {
+    return '#ff4a00'; // orange { r: 255, g: 74, b: 0, s: '255,74,0' };
+  }
+  if (delayInMs >= 180000) {
+    return '#f7bf00'; // yellow { r: 247, g: 191, b: 0, s: '247,191,0' };
+  }
+  return '#00a00c'; // green { r: 0, g: 160, b: 12, s: '0,160,12' };
+};
+
+/**
+ * @private
+ */
+export const getDelayText = (delayInMs: number, cancelled: boolean): string => {
+  if (cancelled) {
+    return String.fromCodePoint(0x00d7);
+  }
+  if (delayInMs >= 3600000) {
+    const rounded = Math.round(delayInMs / 3600000);
+    return `+${rounded}h`;
+  }
+
+  if (delayInMs >= 60000) {
+    const rounded = Math.round(delayInMs / 60000);
+    return `+${rounded}m`;
+  }
+
+  if (delayInMs >= 1000) {
+    const rounded = Math.round(delayInMs / 1000);
+    return `+${rounded}s`;
+  }
+
+  if (delayInMs > 0) {
+    return `+${delayInMs}ms`;
+  }
+
+  return '';
+};

package/src/common/utils/removeDuplicate.test.js

@@ -0,0 +1,22 @@
+import removeDuplicate from './removeDuplicate';
+
+describe('removeDuplicate()', () => {
+  test('removes duplicates', () => {
+    expect(
+      removeDuplicate([
+        'a',
+        ' ',
+        '   ',
+        'b',
+        'a',
+        undefined,
+        null,
+        'A',
+        0,
+        'c',
+        'b',
+        'B',
+      ]),
+    ).toEqual(['a', 'b', 'c']);
+  });
+});

package/src/common/utils/removeDuplicate.ts

@@ -0,0 +1,22 @@
+/**
+ * This function remove duplicates lower case string value of an array.
+ * It removes also null, undefined or non string values.
+ *
+ * @param {array} array Array of values.
+ * @private
+ */
+const removeDuplicate = (array: any[]) => {
+  const arrWithoutEmptyValues = array.filter(
+    (val) => val !== undefined && val !== null && val.trim && val.trim(),
+  );
+  const lowerCasesValues = arrWithoutEmptyValues.map((str) =>
+    str.toLowerCase(),
+  );
+  const uniqueLowerCaseValues = [...new Set(lowerCasesValues)];
+  const uniqueValues = uniqueLowerCaseValues.map((uniqueStr) =>
+    arrWithoutEmptyValues.find((str) => str.toLowerCase() === uniqueStr),
+  );
+  return uniqueValues;
+};
+
+export default removeDuplicate;

package/src/common/utils/renderTrajectories.ts

@@ -0,0 +1,194 @@
+/* eslint-disable no-param-reassign */
+import { Pixel } from 'ol/pixel';
+import { compose, apply, create } from 'ol/transform';
+import {
+  AnyCanvas,
+  RealtimeRenderState,
+  RealtimeStyleFunction,
+  RealtimeStyleOptions,
+  RealtimeTrajectories,
+  ViewState,
+} from '../../types';
+import getVehiclePosition from './getVehiclePosition';
+
+/**
+ * Draw all the trajectories available in a canvas.
+ * @param {HTMLCanvas|HTMLOffscreenCanvas} The canvas where to draw the trajectories.
+ * @param {ViewState} trajectories An array of trajectories.
+ * @param {Function} style A function that returns a canvas representing a vehicle of a specific trajectory.
+ * @param {ViewState} viewState The view state of the map.
+ * @param {boolean} options.hoverVehicleId The id of the vehicle to highlight.
+ * @param {boolean} options.selectedVehicleId The id of the vehicle to select.
+ * @param {boolean} options.noInterpolate If true trajectories are not interpolated but
+ *   drawn at the last known coordinate. Use this for performance optimization
+ *   during map navigation.
+ * @private
+ */
+const renderTrajectories = (
+  canvas: AnyCanvas,
+  trajectories: RealtimeTrajectories,
+  style: RealtimeStyleFunction,
+  viewState: ViewState,
+  options: RealtimeStyleOptions,
+): RealtimeRenderState => {
+  if (!canvas) {
+    return { renderedTrajectories: [] };
+  }
+
+  const {
+    time = Date.now(),
+    size = [],
+    center,
+    resolution,
+    rotation = 0,
+    pixelRatio = 1,
+  } = viewState;
+
+  if (!resolution || !center) {
+    return { renderedTrajectories: [] };
+  }
+
+  const {
+    noInterpolate = false,
+    hoverVehicleId,
+    selectedVehicleId,
+    filter,
+    getScreenPixel = (pixel: Pixel, viewStat: ViewState): Pixel =>
+      (viewStat.zoom || 0) < 12
+        ? pixel.map((coord) => Math.floor(coord))
+        : pixel,
+  } = options;
+  const context = canvas.getContext('2d');
+  context?.clearRect(0, 0, canvas.width, canvas.height);
+
+  const [width, height] = size;
+  if (width && height && (canvas.width !== width || canvas.height !== height)) {
+    [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],
+  );
+
+  // Offscreen canvas has not style attribute
+  if ((canvas as HTMLCanvasElement).style) {
+    (canvas as HTMLCanvasElement).style.width = `${
+      canvas.width / pixelRatio
+    }px`;
+    (canvas as HTMLCanvasElement).style.height = `${
+      canvas.height / pixelRatio
+    }px`;
+  }
+
+  let hoverVehicleImg;
+  let hoverVehiclePx;
+  let selectedVehicleImg;
+  let selectedVehiclePx;
+  const renderedTrajectories = [];
+
+  for (let i = trajectories.length - 1; i >= 0; i -= 1) {
+    const trajectory = trajectories[i];
+
+    // Filter out trajectories
+    if (filter && !filter(trajectory)) {
+      // eslint-disable-next-line no-continue
+      continue;
+    }
+
+    // We simplify the trajectory object
+    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,
+    );
+
+    // We store  the current vehicle position to the trajectory.
+    trajectories[i].properties.coordinate = coord;
+    trajectories[i].properties.rotation = rotationIcon;
+
+    if (!coord) {
+      // eslint-disable-next-line no-continue
+      continue;
+    }
+
+    let px = apply(coordinateToPixelTransform, [...coord]);
+    if (!px) {
+      // eslint-disable-next-line no-continue
+      continue;
+    }
+
+    px = px.map((p) => p * pixelRatio);
+
+    if (
+      px[0] < 0 ||
+      px[0] > canvas.width ||
+      px[1] < 0 ||
+      px[1] > canvas.height
+    ) {
+      // eslint-disable-next-line no-continue
+      continue;
+    }
+
+    const vehicleImg = style(trajectory, viewState, options);
+    if (!vehicleImg) {
+      // eslint-disable-next-line no-continue
+      continue;
+    }
+
+    if (hoverVehicleId !== id && selectedVehicleId !== id) {
+      // To optimize the performance we use integer as pixel coordinate
+      // to avoid an additional work by the browser on zoom level < 12.
+      // See https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas?retiredLocale=de#avoid_floating-point_coordinates_and_use_integers_instead
+      const [x, y] = getScreenPixel(
+        [px[0] - vehicleImg.width / 2, px[1] - vehicleImg.height / 2],
+        viewState,
+      );
+      context?.drawImage(vehicleImg, x, y);
+    }
+
+    if (hoverVehicleId && hoverVehicleId === id) {
+      // Store the canvas to draw it at the end
+      hoverVehicleImg = vehicleImg;
+      hoverVehiclePx = px;
+    }
+
+    if (selectedVehicleId && selectedVehicleId === id) {
+      // Store the canvas to draw it at the end
+      selectedVehicleImg = vehicleImg;
+      selectedVehiclePx = px;
+    }
+
+    renderedTrajectories.push(trajectory);
+  }
+
+  if (selectedVehicleImg && selectedVehiclePx) {
+    context?.drawImage(
+      selectedVehicleImg,
+      Math.floor(selectedVehiclePx[0] - selectedVehicleImg.width / 2),
+      Math.floor(selectedVehiclePx[1] - selectedVehicleImg.height / 2),
+    );
+  }
+
+  if (hoverVehicleImg && hoverVehiclePx) {
+    context?.drawImage(
+      hoverVehicleImg,
+      Math.floor(hoverVehiclePx[0] - hoverVehicleImg.width / 2),
+      Math.floor(hoverVehiclePx[1] - hoverVehicleImg.height / 2),
+    );
+  }
+  return {
+    renderedTrajectories,
+  };
+};
+
+export default renderTrajectories;

package/src/common/utils/sortAndFilterDepartures.ts

@@ -0,0 +1,78 @@
+import { RealtimeAPIDeparturesById } from '../../api/RealtimeAPI';
+import type { RealtimeDepartureExtended } from '../../types';
+import compareDepartures from './compareDepartures';
+
+/**
+ * This function sort Departures by arrival time and filter out unwanted departures:
+ *  - when dparture time is in the past
+ *  - when departure are duplicated
+ *  - when departure is not in the next 30 min
+ *
+ * @param {Object} depObject The object containing departures by id.
+ * @param {boolean} [sortByMinArrivalTime=false] If true sort departures by arrival time.
+ * @return {Array<Departure>} Return departures array.
+ * @private
+ */
+const sortAndfilterDepartures = (
+  depObject: RealtimeAPIDeparturesById,
+  sortByMinArrivalTime: boolean = false,
+  maxDepartureAge: number = 30,
+): RealtimeDepartureExtended[] => {
+  const departures = Object.keys(depObject).map((k) => depObject[k]);
+  departures.sort((a, b) => compareDepartures(a, b, sortByMinArrivalTime));
+
+  const futureDate = new Date();
+  futureDate.setMinutes(futureDate.getMinutes() + maxDepartureAge);
+  const future = futureDate.getTime();
+
+  const pastDate = new Date();
+  pastDate.setMinutes(pastDate.getMinutes() - maxDepartureAge);
+  const past = pastDate.getTime();
+
+  const departureArray = [];
+  const platformsBoarding: string[] = [];
+  let previousDeparture = null;
+
+  for (let i = departures.length - 1; i >= 0; i -= 1) {
+    const departure: RealtimeDepartureExtended = {
+      ...departures[i],
+    };
+    const time = new Date(departure.time).getTime();
+
+    // Only show departures within the next 30 minutes
+    if (time > past && time < future) {
+      // If 2 trains are boarding at the same platform,
+      // remove the older one.
+      if (departure.state === 'BOARDING') {
+        if (!platformsBoarding.includes(departure.platform)) {
+          platformsBoarding.push(departure.platform);
+        } else {
+          departure.state = 'HIDDEN';
+        }
+      }
+
+      // If two trains with the same line number and destinatin
+      // and a departure difference < 1 minute, hide the second one.
+      if (
+        previousDeparture &&
+        departure.to[0] === previousDeparture.to[0] &&
+        Math.abs(time - previousDeparture.time) < 1000 &&
+        departure.line.name === previousDeparture.line.name
+      ) {
+        departure.state = 'HIDDEN';
+      }
+
+      if (/(STOP_CANCELLED|JOURNEY_CANCELLED)/.test(departure.state)) {
+        departure.cancelled = true;
+      }
+
+      previousDeparture = departure;
+      previousDeparture.time = time;
+      departureArray.unshift(departure);
+    }
+  }
+
+  return departureArray;
+};
+
+export default sortAndfilterDepartures;