mobility-toolbox-js 2.3.10 → 2.4.0

package/src/common/styles/realtimeDefaultStyle.ts

@@ -1,436 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,138 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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/src/common/utils/compareDepartures.ts

@@ -1,46 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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;