mobility-toolbox-js 2.0.0-beta.8 → 2.0.1-beta.13

package/{src/common → common}/styles/trackerDefaultStyle.js

@@ -4,50 +4,37 @@ import {
   getDelayColor,
   getDelayText,
   getTextColor,
-  getTextSize,
-} from '../trackerConfig';
-
+  getTextSize
+} from "../trackerConfig";
 const createCanvas = (width, height) => {
-  const canvas = document.createElement('canvas');
+  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');
+    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.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,
-) => {
+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';
+    const ctx = canvas.getContext("2d");
+    ctx.textAlign = "left";
+    ctx.textBaseline = "middle";
     ctx.font = font;
     ctx.fillStyle = delayColor;
     ctx.strokeStyle = delayOutlineColor;
@@ -59,94 +46,56 @@ export const getDelayTextCanvas = (
   }
   return cacheDelayText[key];
 };
-
-// Draw colored circle with black border
 const cacheCircle = {};
-export const getCircleCanvas = (
-  origin,
-  radius,
-  color,
-  hasStroke,
-  hasDash,
-  pixelRatio,
-) => {
+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');
+    const ctx = canvas.getContext("2d");
     ctx.fillStyle = color;
-
     if (hasStroke) {
       ctx.lineWidth = 1 * pixelRatio;
-      ctx.strokeStyle = '#000000';
+      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,
-) => {
+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.
+    const ctx = canvas.getContext("2d");
     if (hasStroke) {
       ctx.save();
-      ctx.textBaseline = 'middle';
-      ctx.textAlign = 'center';
+      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.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 {
@@ -154,9 +103,8 @@ const style = (trajectory, viewState, options) => {
     selectedVehicleId,
     useDelayStyle,
     delayOutlineColor,
-    delayDisplay,
+    delayDisplay
   } = options;
-
   const { zoom, pixelRatio } = viewState;
   let { type, cancelled } = trajectory.properties;
   const {
@@ -164,170 +112,86 @@ const style = (trajectory, viewState, options) => {
     line,
     delay,
     state,
-    operator_provides_realtime_journey: operatorProvidesRealtime,
+    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';
-
+  cancelled = cancelled === true || state === "JOURNEY_CANCELLED";
   if (!type) {
-    type = 'Rail';
+    type = "Rail";
   }
-
   if (!name) {
-    name = 'I';
+    name = "I";
   }
-
   if (!textColor) {
-    textColor = '#000000';
+    textColor = "#000000";
   }
-
-  if (color && color[0] !== '#') {
+  if (color && color[0] !== "#") {
     color = `#${color}`;
   }
-
-  if (textColor[0] !== '#') {
+  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;
+    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 size = radiusDelay * 2 + margin * 2 + 100 * pixelRatio;
     const origin = size / 2;
-
-    // Create the canvas
     const canvas = createCanvas(size, size);
-    const ctx = canvas.getContext('2d');
-
+    const ctx = canvas.getContext("2d");
     if (isDisplayStrokeAndDelay && delay !== null) {
-      // Draw circle delay background
-      const delayBg = getDelayBgCanvas(
-        origin,
-        radiusDelay,
-        getDelayColor(delay, cancelled),
-      );
+      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;
+    if (isDisplayStrokeAndDelay && (hover || delay >= delayDisplay || cancelled)) {
+      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,
-        );
+        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,
-    );
-
+    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,
-      );
-
+      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/trackerDelayStyle.js

@@ -0,0 +1,8 @@
+import trackerDefaultStyle from "./trackerDefaultStyle";
+const style = (trajectory, viewState, options) => {
+  return trackerDefaultStyle(trajectory, viewState, {
+    ...options,
+    useDelayStyle: true
+  });
+};
+export default style;

package/{src/common → common}/styles/trackerSimpleStyle.js

@@ -1,19 +1,15 @@
-/**
- * A very simple tracker style.
- * Display blue point for each train.
- */
 let canvas;
 const style = () => {
   if (!canvas) {
-    document.createElement('canvas');
+    document.createElement("canvas");
     canvas.width = 15;
     canvas.height = 15;
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext("2d");
     ctx.arc(8, 8, 5, 0, 2 * Math.PI, false);
-    ctx.fillStyle = '#8ED6FF';
+    ctx.fillStyle = "#8ED6FF";
     ctx.fill();
     ctx.lineWidth = 3;
-    ctx.strokeStyle = 'black';
+    ctx.strokeStyle = "black";
     ctx.stroke();
     ctx.lineWidth = 3;
   }

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

@@ -8,16 +8,8 @@ const trackerRadiusMapping = {
   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],
+  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,
@@ -28,62 +20,61 @@ export const types = [
   /^Gondola/i,
   /^Funicular/i,
   /^(Long distance bus|coach)/i,
-  /^Rail/i, // New endpoint use Rail instead of Train.
+  /^Rail/i
 ];
-
-/**
- * @ignore
- */
 export const bgColors = [
-  '#ffb400',
-  '#ff5400',
-  '#ff8080',
-  '#ea0000',
-  '#3000ff',
-  '#ffb400',
-  '#41a27b',
-  '#00d237',
-  '#b5b5b5',
-  '#ff8080',
+  "#ffb400",
+  "#ff5400",
+  "#ff8080",
+  "#ea0000",
+  "#3000ff",
+  "#ffb400",
+  "#41a27b",
+  "#00d237",
+  "#b5b5b5",
+  "#ff8080"
 ];
-
-/**
- * @ignore
- */
 export const textColors = [
-  '#000000',
-  '#ffffff',
-  '#000000',
-  '#ffffff',
-  '#ffffff',
-  '#000000',
-  '#ffffff',
-  '#000000',
-  '#000000',
-  '#000000',
+  "#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,
+  1e5,
+  5e4,
+  4e4,
+  3e4,
+  2e4,
+  15e3,
+  1e4,
+  5e3,
+  2e3,
+  1e3,
+  400,
+  300,
+  250,
+  180,
+  90,
+  60,
+  50,
+  50,
+  50,
+  50,
+  50
 ];
-
-/**
- * @ignore
- */
 export const getTypeIndex = (type) => {
-  if (typeof type === 'string') {
+  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);
@@ -92,10 +83,6 @@ export const getRadius = (type, zoom) => {
     return 1;
   }
 };
-
-/**
- * @ignore
- */
 export const getBgColor = (type = 0) => {
   try {
     const typeIdx = getTypeIndex(type);
@@ -104,10 +91,6 @@ export const getBgColor = (type = 0) => {
     return 1;
   }
 };
-
-/**
- * @ignore
- */
 export const getTextColor = (type = 0) => {
   try {
     const typeIdx = getTypeIndex(type);
@@ -116,19 +99,12 @@ export const getTextColor = (type = 0) => {
     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);
@@ -136,55 +112,41 @@ export const getTextSize = (ctx, markerSize, text, fontSize) => {
   }
   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
+    return isDelayText ? "#ff0000" : "#a0a0a0";
   }
-  if (delayInMs >= 3600000) {
-    return '#ed004c'; // pink { r: 237, g: 0, b: 76, s: '237,0,76' };
+  if (delayInMs >= 36e5) {
+    return "#ed004c";
   }
-  if (delayInMs >= 500000) {
-    return '#e80000'; // red { r: 232, g: 0, b: 0, s: '232,0,0' };
+  if (delayInMs >= 5e5) {
+    return "#e80000";
   }
-  if (delayInMs >= 300000) {
-    return '#ff4a00'; // orange { r: 255, g: 74, b: 0, s: '255,74,0' };
+  if (delayInMs >= 3e5) {
+    return "#ff4a00";
   }
-  if (delayInMs >= 180000) {
-    return '#f7bf00'; // yellow { r: 247, g: 191, b: 0, s: '247,191,0' };
+  if (delayInMs >= 18e4) {
+    return "#f7bf00";
   }
   if (delayInMs === null) {
-    return '#a0a0a0'; // grey { r: 160, g: 160, b: 160, s: '160,160,160' };
+    return "#a0a0a0";
   }
-  return '#00a00c'; // green { r: 0, g: 160, b: 12, s: '0,160,12' };
+  return "#00a00c";
 };
-
-/**
- * @ignore
- */
 export const getDelayText = (delayInMs, cancelled) => {
   if (cancelled) {
-    return String.fromCodePoint(0x00d7);
+    return String.fromCodePoint(215);
   }
-  if (delayInMs > 3600000) {
-    const rounded = Math.round(delayInMs / 3600000);
+  if (delayInMs > 36e5) {
+    const rounded = Math.round(delayInMs / 36e5);
     return `+${rounded}h`;
   }
-
-  if (delayInMs > 59000) {
-    const rounded = Math.round(delayInMs / 60000);
+  if (delayInMs > 59e3) {
+    const rounded = Math.round(delayInMs / 6e4);
     return `+${rounded}m`;
   }
-
   if (delayInMs > 0) {
     return `+${delayInMs}s`;
   }
-
-  return '';
+  return "";
 };

package/common/trackerConfig.test.js

@@ -0,0 +1,23 @@
+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(void 0)).toBe(void 0);
+    });
+    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);
+    });
+  });
+});