mobility-toolbox-js 2.0.0 → 2.1.0

package/common/styles/trackerDefaultStyle.js

@@ -1,333 +0,0 @@
-import {
-  getRadius,
-  getBgColor,
-  getDelayColor,
-  getDelayText,
-  getTextColor,
-  getTextSize,
-} from '../trackerConfig';
-
-const createCanvas = (width, height) => {
-  const canvas = document.createElement('canvas');
-  canvas.width = width;
-  canvas.height = height;
-  return canvas;
-};
-
-// Draw circle delay background
-const cacheDelayBg = {};
-export const getDelayBgCanvas = (origin, radius, color) => {
-  const key = `${origin}, ${radius}, ${color}`;
-  if (!cacheDelayBg[key]) {
-    const canvas = createCanvas(origin * 2, origin * 2);
-    const ctx = canvas.getContext('2d');
-    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];
-};
-
-// Draw delay text
-const cacheDelayText = {};
-export const getDelayTextCanvas = (
-  width,
-  text,
-  fontSize,
-  font,
-  delayColor,
-  delayOutlineColor,
-  pixelRatio,
-) => {
-  const key = `${width}, ${text}, ${font}, ${delayColor}, ${delayOutlineColor}, ${pixelRatio}`;
-  if (!cacheDelayText[key]) {
-    const canvas = createCanvas(width, fontSize + 8 * pixelRatio);
-    const ctx = canvas.getContext('2d');
-    ctx.textAlign = 'left';
-    ctx.textBaseline = 'middle';
-    ctx.font = font;
-    ctx.fillStyle = delayColor;
-    ctx.strokeStyle = delayOutlineColor;
-    ctx.lineWidth = 1.5 * pixelRatio;
-    const delayText = text;
-    ctx.strokeText(delayText, 0, fontSize);
-    ctx.fillText(delayText, 0, fontSize);
-    cacheDelayText[key] = canvas;
-  }
-  return cacheDelayText[key];
-};
-
-// Draw colored circle with black border
-const cacheCircle = {};
-export const getCircleCanvas = (
-  origin,
-  radius,
-  color,
-  hasStroke,
-  hasDash,
-  pixelRatio,
-) => {
-  const key = `${origin}, ${radius}, ${color}, ${hasStroke},  ${hasDash}, ${pixelRatio}`;
-  if (!cacheCircle[key]) {
-    const canvas = createCanvas(origin * 2, origin * 2);
-    const ctx = canvas.getContext('2d');
-    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];
-};
-
-// Draw text in the circle
-const cacheText = {};
-export const getTextCanvas = (
-  text,
-  origin,
-  textSize,
-  fillColor,
-  strokeColor,
-  hasStroke,
-  pixelRatio,
-) => {
-  const key = `${text}, ${origin}, ${textSize}, ${fillColor},${strokeColor}, ${hasStroke}, ${pixelRatio}`;
-  if (!cacheText[key]) {
-    const canvas = createCanvas(origin * 2, origin * 2);
-    const ctx = canvas.getContext('2d');
-
-    // 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 = `bold ${textSize + 2}px Arial`;
-      ctx.strokeStyle = strokeColor;
-      ctx.strokeText(text, origin, origin);
-      ctx.restore();
-    }
-
-    // Draw a text
-    ctx.textBaseline = 'middle';
-    ctx.textAlign = 'center';
-    ctx.fillStyle = fillColor;
-    ctx.font = `bold ${textSize}px Arial`;
-    ctx.strokeStyle = strokeColor;
-    ctx.strokeText(text, origin, origin);
-    ctx.fillText(text, origin, origin);
-
-    cacheText[key] = canvas;
-  }
-  return cacheText[key];
-};
-
-/**
- * A tracker style that take in account the delay.
- *
- * @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 styleCache = {};
-const style = (trajectory, viewState, options) => {
-  const {
-    hoverVehicleId,
-    selectedVehicleId,
-    useDelayStyle,
-    delayOutlineColor,
-    delayDisplay,
-  } = options;
-
-  const { zoom, pixelRatio } = viewState;
-  let { type, cancelled } = trajectory.properties;
-  const {
-    train_id: id,
-    line,
-    delay,
-    state,
-    operator_provides_realtime_journey: operatorProvidesRealtime,
-  } = trajectory.properties;
-  let { name, text_color: textColor, color } = line || {};
-
-  // In the future, the cancelled property will be removed we still managed it
-  // until the backend change is on prod.
-  cancelled = cancelled === true || 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 >= 7 * pixelRatio;
-  if (hover || selected) {
-    radius = isDisplayStrokeAndDelay
-      ? radius + 5 * pixelRatio
-      : 14 * pixelRatio;
-  }
-  const mustDrawText = radius > 10 * pixelRatio;
-
-  // Optimize the cache key, very important in high zoom level
-  let key = `${radius}${type}${color}${hover}${selected}${cancelled}${delay}`;
-
-  if (useDelayStyle) {
-    key += `${operatorProvidesRealtime}`;
-  }
-
-  if (mustDrawText) {
-    key += `${name}${textColor}`;
-  }
-
-  if (!styleCache[key]) {
-    if (radius === 0) {
-      styleCache[key] = null;
-      return null;
-    }
-
-    const margin = 1 * pixelRatio;
-    const radiusDelay = radius + 2;
-    const markerSize = radius * 2;
-    const size = radiusDelay * 2 + margin * 2 + 100 * pixelRatio; // add space for delay information
-    const origin = size / 2;
-
-    // Create the canvas
-    const canvas = createCanvas(size, size);
-    const ctx = canvas.getContext('2d');
-
-    if (isDisplayStrokeAndDelay && delay !== null) {
-      // Draw circle delay background
-      const delayBg = getDelayBgCanvas(
-        origin,
-        radiusDelay,
-        getDelayColor(delay, cancelled),
-      );
-      ctx.drawImage(delayBg, 0, 0);
-    }
-
-    // Show delay if feature is hovered or if delay is above 5mins.
-    if (
-      isDisplayStrokeAndDelay &&
-      (hover || delay >= delayDisplay || cancelled)
-    ) {
-      // Draw delay text
-      const fontSize =
-        Math.max(
-          cancelled ? 19 : 14,
-          Math.min(cancelled ? 19 : 17, radius * 1.2),
-        ) * pixelRatio;
-      const text = getDelayText(delay, cancelled);
-
-      if (text) {
-        const textWidth = text.length * fontSize;
-        const delayText = getDelayTextCanvas(
-          textWidth,
-          text,
-          fontSize,
-          `bold ${fontSize}px arial, sans-serif`,
-          getDelayColor(delay, cancelled, true),
-          delayOutlineColor,
-          pixelRatio,
-        );
-        ctx.drawImage(
-          delayText,
-          origin + radiusDelay + margin,
-          origin - fontSize,
-        );
-      }
-    }
-
-    // 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,
-    );
-
-    ctx.drawImage(circle, 0, 0);
-
-    // Draw text in the circle
-    if (mustDrawText) {
-      const fontSize = Math.max(radius, 10);
-      const textSize = getTextSize(ctx, markerSize, name, fontSize);
-      const textColor2 = !useDelayStyle
-        ? textColor || getTextColor(type)
-        : '#000000';
-      const hasStroke2 =
-        useDelayStyle && delay === null && operatorProvidesRealtime === 'yes';
-
-      const text = getTextCanvas(
-        name,
-        origin,
-        textSize,
-        textColor2,
-        circleFillColor,
-        hasStroke2,
-        pixelRatio,
-      );
-
-      ctx.drawImage(text, 0, 0);
-    }
-
-    styleCache[key] = canvas;
-  }
-
-  return styleCache[key];
-};
-export default style;

package/common/styles/trackerSimpleStyle.js

@@ -1,22 +0,0 @@
-/**
- * A very simple tracker style.
- * Display blue point for each train.
- */
-let canvas;
-const style = () => {
-  if (!canvas) {
-    document.createElement('canvas');
-    canvas.width = 15;
-    canvas.height = 15;
-    const ctx = canvas.getContext('2d');
-    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 style;

package/common/trackerConfig.js

@@ -1,190 +0,0 @@
-const trackerRadiusMapping = {
-  0: [0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
-  1: [0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
-  2: [0, 0, 0, 0, 0, 2, 2, 3, 7, 7, 7, 12, 15, 15, 15, 15, 15],
-  3: [0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
-  4: [0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
-  5: [0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
-  6: [0, 0, 0, 0, 0, 7, 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],
-  8: [0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
-  9: [0, 0, 0, 0, 0, 2, 2, 3, 7, 7, 7, 12, 15, 15, 15, 15, 15],
-};
-
-/**
- * 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".
- *
- * @ignore
- */
-export const types = [
-  /^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.
-];
-
-/**
- * @ignore
- */
-export const bgColors = [
-  '#ffb400',
-  '#ff5400',
-  '#ff8080',
-  '#ea0000',
-  '#3000ff',
-  '#ffb400',
-  '#41a27b',
-  '#00d237',
-  '#b5b5b5',
-  '#ff8080',
-];
-
-/**
- * @ignore
- */
-export const textColors = [
-  '#000000',
-  '#ffffff',
-  '#000000',
-  '#ffffff',
-  '#ffffff',
-  '#000000',
-  '#ffffff',
-  '#000000',
-  '#000000',
-  '#000000',
-];
-
-/**
- * @ignore
- */
-export const timeSteps = [
-  100000, 50000, 40000, 30000, 20000, 15000, 10000, 5000, 2000, 1000, 400, 300,
-  250, 180, 90, 60, 50, 50, 50, 50, 50,
-];
-
-/**
- * @ignore
- */
-export const getTypeIndex = (type) => {
-  if (typeof type === 'string') {
-    return types.findIndex((t) => t.test(type));
-  }
-  return type;
-};
-
-/**
- * @ignore
- */
-export const getRadius = (type, zoom) => {
-  try {
-    const typeIdx = getTypeIndex(type || 0);
-    return trackerRadiusMapping[typeIdx][zoom];
-  } catch (e) {
-    return 1;
-  }
-};
-
-/**
- * @ignore
- */
-export const getBgColor = (type = 0) => {
-  try {
-    const typeIdx = getTypeIndex(type);
-    return bgColors[typeIdx];
-  } catch (e) {
-    return 1;
-  }
-};
-
-/**
- * @ignore
- */
-export const getTextColor = (type = 0) => {
-  try {
-    const typeIdx = getTypeIndex(type);
-    return textColors[typeIdx];
-  } catch (e) {
-    return 1;
-  }
-};
-
-/**
- * @ignore
- */
-export const getTextSize = (ctx, markerSize, text, fontSize) => {
-  ctx.font = `bold ${fontSize}px Arial`;
-  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 = `bold ${fontSize}px arial, sans-serif`;
-    newText = ctx.measureText(text);
-    i += 1;
-  }
-  return fontSize;
-};
-
-/**
- * @ignore
- * @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, cancelled, isDelayText) => {
-  if (cancelled) {
-    return isDelayText ? '#ff0000' : '#a0a0a0'; // red or gray
-  }
-  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' };
-  }
-  if (delayInMs === null) {
-    return '#a0a0a0'; // grey { r: 160, g: 160, b: 160, s: '160,160,160' };
-  }
-  return '#00a00c'; // green { r: 0, g: 160, b: 12, s: '0,160,12' };
-};
-
-/**
- * @ignore
- */
-export const getDelayText = (delayInMs, cancelled) => {
-  if (cancelled) {
-    return String.fromCodePoint(0x00d7);
-  }
-  if (delayInMs > 3600000) {
-    const rounded = Math.round(delayInMs / 3600000);
-    return `+${rounded}h`;
-  }
-
-  if (delayInMs > 59000) {
-    const rounded = Math.round(delayInMs / 60000);
-    return `+${rounded}m`;
-  }
-
-  if (delayInMs > 0) {
-    return `+${delayInMs}s`;
-  }
-
-  return '';
-};

package/common/trackerConfig.test.js

@@ -1,25 +0,0 @@
-import { getTypeIndex } from './trackerConfig';
-
-describe('trackerConfig', () => {
-  describe('#getTypeIndex()', () => {
-    test("retrurn 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);
-    });
-  });
-});

package/common/utils/createTrackerFilters.js

@@ -1,87 +0,0 @@
-/**
- * Return a filter functions based on some parameters of a vehicle.
- *
- * @param {string|Array<string>} line - A list of vehicle's name to filter. Names can be separated by a comma. Ex: 'S1,S2,S3'
- * @param {string|Array<string} route - A list of vehicle's route (contained in routeIdentifier property) to filter. Indentifiers can be separated by a comma. Ex: 'id1,id2,id3'
- * @param {string|Array<string} operator  A list of vehicle's operator to filter. Operators can be separated by a comma. Ex: 'SBB,DB'
- * @param {Regexp} regexLine - A regex aplly of vehcile's name.
- * @private
- */
-const createFilters = (line, route, operator, regexLine) => {
-  const filterList = [];
-
-  if (!line && !route && !operator && !regexLine) {
-    return null;
-  }
-
-  if (regexLine) {
-    const regexLineList =
-      typeof regexLine === 'string' ? [regexLine] : regexLine;
-    const lineFilter = (item) => {
-      const name =
-        item.properties.name ||
-        (item.properties.line && item.properties.line.name) ||
-        '';
-      if (!name) {
-        return false;
-      }
-      return regexLineList.some((regexStr) =>
-        new RegExp(regexStr, 'i').test(name),
-      );
-    };
-    filterList.push(lineFilter);
-  }
-
-  if (line) {
-    const lineFiltersList = typeof line === 'string' ? line.split(',') : line;
-    const lineList = lineFiltersList.map((l) =>
-      l.replace(/\s+/g, '').toUpperCase(),
-    );
-    const lineFilter = (item) => {
-      const { line: linee, name } = item.properties;
-      const lineName = (name || (linee && linee.name) || '').toUpperCase();
-      if (!lineName) {
-        return false;
-      }
-      return lineList.includes(lineName);
-    };
-    filterList.push(lineFilter);
-  }
-
-  if (route) {
-    const routes = typeof route === 'string' ? route.split(',') : route;
-    const routeList = routes.map((item) => parseInt(item, 10));
-    const routeFilter = (item) => {
-      const routeId = parseInt(
-        item.properties.routeIdentifier.split('.')[0],
-        10,
-      );
-      return routeList.includes(routeId);
-    };
-    filterList.push(routeFilter);
-  }
-
-  if (operator) {
-    const operatorList = typeof operator === 'string' ? [operator] : operator;
-    const operatorFilter = (item) =>
-      operatorList.some((op) =>
-        new RegExp(op, 'i').test(item.properties.operator),
-      );
-    filterList.push(operatorFilter);
-  }
-
-  if (!filterList.length) {
-    return null;
-  }
-
-  return (t) => {
-    for (let i = 0; i < filterList.length; i += 1) {
-      if (!filterList[i](t)) {
-        return false;
-      }
-    }
-    return true;
-  };
-};
-
-export default createFilters;