@geops/rvf-mobility-web-component 0.1.127 → 0.1.129

package/src/utils/mergePublications.test.ts

@@ -1,91 +0,0 @@
-import mergePublications from "./mergePublications";
-
-import type { PublicationType } from "mobility-toolbox-js/types";
-
-describe("mergePublications", () => {
-  it("should merge publications with same publication windows and textual contents", () => {
-    const publications = [
-      {
-        publicationLines: [
-          {
-            category: "DISRUPTION",
-            hasIcon: true,
-            lines: [
-              {
-                name: "510",
-                operatorRef: "SBG",
-              },
-              {
-                name: "510",
-                operatorRef: "SBG",
-              },
-              {
-                name: "510",
-                operatorRef: "SBG",
-              },
-            ],
-            mot: "BUS",
-          },
-        ],
-        publicationStops: [],
-        publicationWindows: [],
-        serviceCondition: "DIVERTED",
-        serviceConditionGroup: "CHANGES",
-        severity: "NORMAL",
-        severityGroup: "NORMAL",
-        textualContentLarge: null,
-        textualContentMedium: {
-          de: {
-            consequence: "",
-            description:
-              "Zwischen <b>Denzlingen Mattenbühl</b> und <b>Denzlingen Bahnhof</b> kommt es vom <b>26. Februar 2026 ab 08:00 Uhr bis auf Weiteres</b> zu <b>einer Umleitung und Haltausfällen</b> wegen einer Baumaßnahme. Betroffen <b>sind die Linien 510 und 512</b>. Es kommt zu folgenden Änderungen:<br>\n                <b>Umleitung Linie 510</b>: Die Haltestellen Denzlingen Gewerbegebiet bis Denzlingen Mattenbühl werden nicht bedient.  <br><br>Die Änderungen sind in der elektronischen Fahrplanauskunft EFA hinterlegt.",
-            durationText: "",
-            reason: "",
-            recommendation: "",
-            summary:
-              "Linien 510 und 512: Umleitung und Haltentfall wegen einer Baumaßnahme",
-          },
-        },
-      },
-      {
-        publicationLines: [
-          {
-            category: "DISRUPTION",
-            hasIcon: true,
-            lines: [
-              {
-                name: "512",
-                operatorRef: "SBG",
-              },
-            ],
-            mot: "BUS",
-          },
-        ],
-        publicationStops: [],
-        publicationWindows: [],
-        serviceCondition: "DIVERTED",
-        serviceConditionGroup: "CHANGES",
-        severity: "NORMAL",
-        severityGroup: "NORMAL",
-        textualContentLarge: null,
-        textualContentMedium: {
-          de: {
-            consequence: "",
-            description:
-              "Zwischen <b>Denzlingen Mattenbühl</b> und <b>Denzlingen Bahnhof</b> kommt es vom <b>26. Februar 2026 ab 08:00 Uhr bis auf Weiteres</b> zu <b>einer Umleitung und Haltausfällen</b> wegen einer Baumaßnahme. Betroffen <b>sind die Linien 510 und 512</b>. Es kommt zu folgenden Änderungen:<br>\n                <b>Umleitung Linie 510</b>: Die Haltestellen Denzlingen Gewerbegebiet bis Denzlingen Mattenbühl werden nicht bedient.  <br><br>Die Änderungen sind in der elektronischen Fahrplanauskunft EFA hinterlegt.",
-            durationText: "",
-            reason: "",
-            recommendation: "",
-            summary:
-              "Linien 510 und 512: Umleitung und Haltentfall wegen einer Baumaßnahme",
-          },
-        },
-      },
-    ] as PublicationType[];
-    const merged = mergePublications(publications);
-    expect(merged).toHaveLength(1);
-    expect(merged[0].publicationLines).toHaveLength(2);
-    expect(merged[0].publicationLines?.[0].lines[0].name).toBe("510");
-    expect(merged[0].publicationLines?.[1].lines[0].name).toBe("512");
-  });
-});

package/src/utils/mergePublications.ts

@@ -1,52 +0,0 @@
-import type { PublicationType } from "mobility-toolbox-js/types";
-
-/**
- * When imported from external source, some publication have the same publication
- * windows and the same textualContents but only differs the lines or stations.
- * In that case we merge them (lines and stops) to avoid duplicates in the display.
- * TODO fixes this in backend oder import
- */
-const mergePublications = (
-  publications: PublicationType[] = [],
-): PublicationType[] => {
-  const mergedPublications: PublicationType[] = [];
-  try {
-    publications.forEach((publication) => {
-      const publicationsWindowsStr = JSON.stringify(
-        publication.publicationWindows,
-      );
-      const textualContentStr = JSON.stringify(publication.textualContents);
-
-      // Find a previous identical publication
-      const identicalPublication = mergedPublications.find((p) => {
-        return (
-          p.severity === publication.severity &&
-          p.serviceCondition === publication.serviceCondition &&
-          JSON.stringify(p.publicationWindows) === publicationsWindowsStr &&
-          JSON.stringify(p.textualContents) === textualContentStr
-        );
-      });
-
-      if (identicalPublication) {
-        // We move the lines and stops on the same publication to display them together and avoid duplicates
-        identicalPublication.publicationLines = [
-          ...(identicalPublication.publicationLines || []),
-          ...(publication.publicationLines || []),
-        ];
-        identicalPublication.publicationStops = [
-          ...(identicalPublication.publicationStops || []),
-          ...(publication.publicationStops || []),
-        ];
-        return false;
-      }
-      mergedPublications.push(publication);
-    });
-  } catch (error) {
-    // JSON parsing could failed, we log the error and return the non merged
-    // publications to avoid breaking the display
-    console.error("Error merging publications", error);
-    return publications;
-  }
-  return mergedPublications;
-};
-export default mergePublications;

package/src/utils/realtimeRVFStyle.ts

@@ -1,523 +0,0 @@
-import { createCanvas } from "mobility-toolbox-js/ol";
-
-import noRealtime from "../icons/NoRealtime/norealtime.svg";
-
-import type {
-  AnyCanvasContext,
-  RealtimeStyleFunction,
-  RealtimeStyleOptions,
-  RealtimeTrajectory,
-  StyleCache,
-  ViewState,
-} from "mobility-toolbox-js/types";
-const cacheNoRealtime: StyleCache = {};
-
-const image = new Image(42, 42); // Using optional size for image
-// image.onload = () => {
-//   [1, 2, 3].forEach((pixelRatio) => {
-//     const canvas = createCanvas(42, 42);
-//     const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
-//     if (!ctx) {
-//       return null;
-//     }
-//     ctx.drawImage(image, 0, 0, 16 * pixelRatio, 16 * pixelRatio);
-//     cacheNoRealtime[`${pixelRatio}`] = canvas;
-//   });
-// };
-// Draw when image has loaded
-image.src = noRealtime;
-
-export const getNoRealtimeCanvas = (radius, pixelRatio) => {
-  let size = 16;
-  if (radius > size) {
-    size = 22;
-  }
-  const key = `${size},${pixelRatio}`;
-  if (!cacheNoRealtime[key]) {
-    const canvas = createCanvas(size * pixelRatio, size * pixelRatio);
-    const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
-    if (!ctx) {
-      return null;
-    }
-    ctx.drawImage(image, 0, 0, size * pixelRatio, size * pixelRatio);
-    cacheNoRealtime[key] = canvas;
-  }
-  return cacheNoRealtime[key];
-};
-
-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") as AnyCanvasContext;
-      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];
-};
-
-const cacheDelayText: StyleCache = {};
-
-/**
- * Draw delay text
- *
- * @private
- */
-export const getDelayTextCanvas = (
-  text: string,
-  fontSize: number,
-  font: string,
-  delayColor: string,
-  delayOutlineColor = "#000",
-  pixelRatio = 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];
-};
-
-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") as AnyCanvasContext;
-      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];
-};
-
-const cacheText: StyleCache = {};
-
-/**
- * Draw text in the circle
- *
- * @private
- */
-export const getTextCanvas = (
-  trajectory: RealtimeTrajectory,
-  viewState: ViewState,
-  text: string,
-  origin: number,
-  textSize: number,
-  fillColor: string,
-  strokeColor: string,
-  hasStroke: boolean,
-  pixelRatio: number,
-  getTextFont: (
-    trajectory: RealtimeTrajectory,
-    viewState: ViewState,
-    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") as AnyCanvasContext;
-      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(trajectory, viewState, 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(trajectory, viewState, textSize, text);
-      ctx.strokeStyle = strokeColor;
-      ctx.strokeText(text, origin, origin);
-      ctx.fillText(text, origin, origin);
-
-      cacheText[key] = canvas;
-    }
-  }
-  return cacheText[key];
-};
-
-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
- * @private
- */
-const realtimeRVFStyle: RealtimeStyleFunction = (
-  trajectory: RealtimeTrajectory,
-  viewState: ViewState,
-  options: RealtimeStyleOptions,
-) => {
-  const {
-    delayDisplay = 300000,
-    delayOutlineColor = "#000",
-    getColor = () => {
-      return "#000";
-    },
-    getDelayColor = () => {
-      return "#000";
-    },
-    getDelayFont = (traj, viewStat, fontSize: number) => {
-      return `bold ${fontSize}px arial, sans-serif`;
-    },
-    getDelayText = () => {
-      return null;
-    },
-    getMaxRadiusForStrokeAndDelay = () => {
-      return 7;
-    },
-    getMaxRadiusForText = () => {
-      return 10;
-    },
-    getRadius = () => {
-      return 0;
-    },
-    getText = (traj: RealtimeTrajectory) => {
-      return traj?.properties?.line?.name || "I";
-    },
-    getTextColor = () => {
-      return "#000";
-    },
-    getTextFont = (traj, viewStat, fontSize: number) => {
-      return `bold ${fontSize}px arial, sans-serif`;
-    },
-    getTextSize = () => {
-      return 14;
-    },
-    hoverVehicleId,
-    selectedVehicleId,
-    useDelayStyle,
-  } = options;
-
-  const { pixelRatio = 1 } = viewState;
-  const { type } = trajectory.properties;
-  const {
-    delay,
-    has_realtime_journey: hasRealtimeJourney,
-    line,
-    operator_provides_realtime_journey: operatorProvidesRealtime,
-    state,
-    train_id: id,
-  } = trajectory.properties;
-  let { color, name, text_color: textColor } = line || {};
-
-  name = getText(trajectory, viewState);
-
-  const cancelled = state === "JOURNEY_CANCELLED";
-
-  if (!name) {
-    name = "I";
-  }
-
-  textColor = getTextColor(trajectory, viewState);
-  color = getColor(trajectory, viewState);
-
-  if (color && !color.startsWith("#")) {
-    color = `#${color}`;
-  }
-
-  if (!textColor.startsWith("#")) {
-    textColor = `#${textColor}`;
-  }
-
-  const hover = !!(hoverVehicleId && hoverVehicleId === id);
-  const selected = !!(selectedVehicleId && selectedVehicleId === id);
-
-  // Calcul the radius of the circle
-  let radius = getRadius(trajectory, viewState) * 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}${hasRealtimeJourney}`;
-
-  if (useDelayStyle) {
-    key += `${operatorProvidesRealtime}${delay}${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(trajectory, viewState, 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(trajectory, viewState, delay, cancelled);
-
-      if (text) {
-        delayText = getDelayTextCanvas(
-          text,
-          fontSize,
-          getDelayFont(
-            trajectory,
-            viewState,
-            hover || viewState.zoom >= 13 ? fontSize : 0,
-            text,
-          ), // Only display delay labels on zoom 13+
-          getDelayColor(trajectory, viewState, delay, cancelled, true),
-          delayOutlineColor,
-          pixelRatio,
-        );
-      }
-    }
-
-    let realtimeIconCanvas = null;
-
-    // Draw colored circle with black border
-    let circleFillColor;
-    if (useDelayStyle) {
-      circleFillColor = getDelayColor(trajectory, viewState, delay, cancelled);
-    } else {
-      circleFillColor = color || getColor(trajectory, viewState);
-    }
-
-    const hasStroke = isDisplayStrokeAndDelay || hover || selected;
-
-    const hasDash =
-      !!isDisplayStrokeAndDelay &&
-      !!useDelayStyle &&
-      delay === null &&
-      operatorProvidesRealtime === "yes";
-
-    const hasNoRealtimeIcon =
-      !!hasStroke && isDisplayText && !hasRealtimeJourney && !cancelled;
-
-    if (hasNoRealtimeIcon) {
-      realtimeIconCanvas = getNoRealtimeCanvas(radius, pixelRatio);
-    }
-
-    const circle = getCircleCanvas(
-      origin,
-      radius,
-      circleFillColor,
-      hasStroke,
-      hasDash,
-      pixelRatio,
-    );
-
-    // Create the canvas
-    const extraWidth =
-      delayText?.width ||
-      (hasNoRealtimeIcon && realtimeIconCanvas.width / 2) ||
-      0;
-    const extraHeight =
-      (hasNoRealtimeIcon && realtimeIconCanvas.height / 2) || 0;
-    const width = size + extraWidth * 2;
-    const height = size + extraHeight * 2;
-    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 = extraWidth;
-      const originY = extraHeight;
-
-      if (delayBg) {
-        ctx.drawImage(delayBg, originX, originY);
-      }
-
-      if (circle) {
-        ctx.drawImage(circle, originX, originY);
-      }
-
-      // Draw text in the circle
-      let circleText = null;
-      if (isDisplayText) {
-        const fontSize2 = Math.max(radius, 10);
-        const textSize = getTextSize(
-          trajectory,
-          viewState,
-          ctx,
-          markerSize,
-          name,
-          fontSize2,
-          getTextFont(trajectory, viewState, fontSize2, name),
-        );
-        const textColor2 = !useDelayStyle
-          ? textColor || getTextColor(trajectory, viewState)
-          : "#000000";
-        const hasStroke2 =
-          !!useDelayStyle &&
-          delay === null &&
-          operatorProvidesRealtime === "yes";
-
-        circleText = getTextCanvas(
-          trajectory,
-          viewState,
-          name,
-          origin,
-          textSize,
-          textColor2,
-          circleFillColor,
-          hasStroke2,
-          pixelRatio,
-          getTextFont,
-        );
-      }
-
-      if (circleText) {
-        ctx.drawImage(circleText, originX, originY);
-      }
-
-      if (delayText) {
-        ctx.drawImage(
-          delayText,
-          originX + Math.ceil(origin + radiusDelay) + margin,
-          originY + Math.ceil(origin - fontSize),
-        );
-      }
-
-      if (hasNoRealtimeIcon) {
-        ctx.drawImage(
-          realtimeIconCanvas,
-          originX - realtimeIconCanvas.width / 4,
-          originY - realtimeIconCanvas.height / 4,
-        );
-      }
-
-      cache[key] = canvas;
-    }
-  }
-
-  return cache[key];
-};
-export default realtimeRVFStyle;