mobility-toolbox-js 3.0.0-beta.8 → 3.0.0

package/common/controls/StopFinderControlCommon.js

@@ -13,12 +13,12 @@ class StopFinderControlCommon {
      * @param {Object} options Options
      * @param {HTMLElement} options.element HTML element where to attach input and suggestions.
      * @param {string} options.apiKey Access key for [geOps services](https://developer.geops.io/). See StopsAPI.
-     * @param {string} [options.url='https://api.geops.io/tracker/v1'] Stops service url. See StopsAPI.
+     * @param {string} [options.url='https://api.geops.io/stops/v1/'] Stops service url. See StopsAPI.
      * @param {string} [options.placeholder='Search for a stop...'] Input field placeholder.
      * @param {StopsSearchParams} [options.apiParams={ limit: 20 }] Request parameters. See [Stops service documentation](https://developer.geops.io/apis/5dcbd702a256d90001cf1361/).
      */
     constructor(options) {
-        const { apiParams, apiKey, url, placeholder } = options || {};
+        const { apiKey, apiParams, placeholder, url } = options || {};
         this.apiParams = Object.assign({ limit: 20 }, (apiParams || {}));
         this.placeholder = placeholder || 'Search for a stop...';
         const apiOptions = { apiKey };
@@ -30,26 +30,16 @@ class StopFinderControlCommon {
         this.createElement(options);
         this.options = options;
     }
-    render(featureCollection) {
-        const suggestions = (featureCollection === null || featureCollection === void 0 ? void 0 : featureCollection.features) || [];
-        if (!this.suggestionsElt) {
+    /**
+     * Clear the search field and close the control.
+     */
+    clear() {
+        if (!this.suggestionsElt || !this.inputElt || !this.clearElt) {
             return;
         }
-        this.suggestionsElt.style.display = suggestions.length ? 'block' : 'none';
+        this.inputElt.value = '';
         this.suggestionsElt.innerHTML = '';
-        suggestions.forEach((suggestion) => {
-            var _a, _b;
-            const suggElt = document.createElement('div');
-            suggElt.innerHTML = (_a = suggestion === null || suggestion === void 0 ? void 0 : suggestion.properties) === null || _a === void 0 ? void 0 : _a.name;
-            suggElt.onclick = (evt) => {
-                var _a, _b;
-                (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.onSuggestionClick) === null || _b === void 0 ? void 0 : _b.call(_a, suggestion, evt);
-            };
-            Object.assign(suggElt.style, {
-                padding: '5px 12px',
-            });
-            (_b = this.suggestionsElt) === null || _b === void 0 ? void 0 : _b.appendChild(suggElt);
-        });
+        this.clearElt.style.display = 'none';
     }
     createElement({ element }) {
         // Create input element
@@ -61,7 +51,7 @@ class StopFinderControlCommon {
             var _a;
             (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
             this.abortController = new AbortController();
-            // @ts-ignore
+            // @ts-expect-error - Improve ts
             this.search(evt.target.value, this.abortController);
         };
         Object.assign(this.inputElt.style, {
@@ -72,38 +62,48 @@ class StopFinderControlCommon {
         this.suggestionsElt = document.createElement('div');
         Object.assign(this.suggestionsElt.style, {
             backgroundColor: 'white',
-            overflowY: 'auto',
             cursor: 'pointer',
+            overflowY: 'auto',
         });
         element.appendChild(this.suggestionsElt);
         this.clearElt = document.createElement('div');
         Object.assign(this.clearElt.style, {
+            cursor: 'pointer',
             display: 'none',
+            fontSize: '200%',
+            padding: '0 10px',
             position: 'absolute',
             right: '0',
-            padding: '0 10px',
-            fontSize: '200%',
-            cursor: 'pointer',
         });
         this.clearElt.innerHTML = '×';
         this.clearElt.onclick = () => this.clear();
         element.appendChild(this.clearElt);
     }
-    /**
-     * Clear the search field and close the control.
-     */
-    clear() {
-        if (!this.suggestionsElt || !this.inputElt || !this.clearElt) {
+    render(featureCollection) {
+        const suggestions = (featureCollection === null || featureCollection === void 0 ? void 0 : featureCollection.features) || [];
+        if (!this.suggestionsElt) {
             return;
         }
-        this.inputElt.value = '';
+        this.suggestionsElt.style.display = suggestions.length ? 'block' : 'none';
         this.suggestionsElt.innerHTML = '';
-        this.clearElt.style.display = 'none';
+        suggestions.forEach((suggestion) => {
+            var _a, _b;
+            const suggElt = document.createElement('div');
+            suggElt.innerHTML = (_a = suggestion === null || suggestion === void 0 ? void 0 : suggestion.properties) === null || _a === void 0 ? void 0 : _a.name;
+            suggElt.onclick = (evt) => {
+                var _a, _b;
+                (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.onSuggestionClick) === null || _b === void 0 ? void 0 : _b.call(_a, suggestion, evt);
+            };
+            Object.assign(suggElt.style, {
+                padding: '5px 12px',
+            });
+            (_b = this.suggestionsElt) === null || _b === void 0 ? void 0 : _b.appendChild(suggElt);
+        });
     }
     /**
      * Launch a search.
      *
-     * @param {String} query The query to search for.
+     * @param {String} q The query to search for.
      * @param {AbortController} abortController Abort controller used to cancel the request.
      * @return {Promise<Array<GeoJSONFeature>>} An array of GeoJSON features with coordinates in [EPSG:4326](http://epsg.io/4326).
      */

package/common/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./styles";
+export * from "./utils";

package/common/index.js

@@ -1,2 +1,2 @@
-export * from './utils';
 export * from './styles';
+export * from './utils';

package/common/styles/index.d.ts

@@ -0,0 +1,4 @@
+export { default as realtimeDefaultStyle } from "./realtimeDefaultStyle";
+export { default as realtimeDelayStyle } from "./realtimeDelayStyle";
+export { default as realtimeSimpleStyle } from "./realtimeSimpleStyle";
+export * from "./realtimeDefaultStyle";

package/common/styles/realtimeDefaultStyle.d.ts

@@ -0,0 +1,36 @@
+import type { RealtimeStyleFunction } from '../../types';
+/**
+ * Draw circle delay background
+ *
+ * @private
+ */
+export declare const getDelayBgCanvas: (origin: number, radius: number, color: string) => import("../../types").AnyCanvas | null;
+/**
+ * Draw delay text
+ *
+ * @private
+ */
+export declare const getDelayTextCanvas: (text: string, fontSize: number, font: string, delayColor: string, delayOutlineColor?: string, pixelRatio?: number) => import("../../types").AnyCanvas | null;
+/**
+ * Draw colored circle with black border
+ *
+ * @private
+ */
+export declare const getCircleCanvas: (origin: number, radius: number, color: string, hasStroke: boolean, hasDash: boolean, pixelRatio: number) => import("../../types").AnyCanvas | null;
+/**
+ * Draw text in the circle
+ *
+ * @private
+ */
+export declare const getTextCanvas: (text: string, origin: number, textSize: number, fillColor: string, strokeColor: string, hasStroke: boolean, pixelRatio: number, getTextFont: (fontSize: number, text?: string) => string) => import("../../types").AnyCanvas | null;
+/**
+ * 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
+ */
+declare const realtimeDefaultStyle: RealtimeStyleFunction;
+export default realtimeDefaultStyle;

package/common/styles/realtimeDefaultStyle.js

@@ -1,5 +1,4 @@
 import createCanvas from '../utils/createCanvas';
-/** @private */
 const cacheDelayBg = {};
 /**
  * Draw circle delay background
@@ -25,7 +24,6 @@ export const getDelayBgCanvas = (origin, radius, color) => {
     }
     return cacheDelayBg[key];
 };
-/** @private */
 const cacheDelayText = {};
 /**
  * Draw delay text
@@ -55,7 +53,6 @@ export const getDelayTextCanvas = (text, fontSize, font, delayColor, delayOutlin
     }
     return cacheDelayText[key];
 };
-/** @private */
 const cacheCircle = {};
 /**
  * Draw colored circle with black border
@@ -90,7 +87,6 @@ export const getCircleCanvas = (origin, radius, color, hasStroke, hasDash, pixel
     }
     return cacheCircle[key];
 };
-/** @private */
 const cacheText = {};
 /**
  * Draw text in the circle
@@ -129,7 +125,6 @@ export const getTextCanvas = (text, origin, textSize, fillColor, strokeColor, ha
     }
     return cacheText[key];
 };
-/** @private */
 const cache = {};
 /**
  * A tracker style that take in account the delay.
@@ -141,11 +136,11 @@ const cache = {};
  * @private
  */
 const realtimeDefaultStyle = (trajectory, viewState, options) => {
-    const { hoverVehicleId, selectedVehicleId, useDelayStyle, delayOutlineColor = '#000', delayDisplay = 300000, getRadius = () => 0, getBgColor = () => '#000', getDelayColor = () => '#000', getDelayText = () => null, getDelayFont = (fontSize) => `bold ${fontSize}px arial, sans-serif`, getText = (text) => text, getTextFont = (fontSize) => `bold ${fontSize}px arial, sans-serif`, getTextColor = () => '#000', getTextSize = () => 14, getMaxRadiusForText = () => 10, getMaxRadiusForStrokeAndDelay = () => 7, } = options;
-    const { zoom, pixelRatio = 1 } = viewState;
+    const { delayDisplay = 300000, delayOutlineColor = '#000', getBgColor = () => '#000', getDelayColor = () => '#000', getDelayFont = (fontSize) => `bold ${fontSize}px arial, sans-serif`, getDelayText = () => null, getMaxRadiusForStrokeAndDelay = () => 7, getMaxRadiusForText = () => 10, getRadius = () => 0, getText = (text) => text, getTextColor = () => '#000', getTextFont = (fontSize) => `bold ${fontSize}px arial, sans-serif`, getTextSize = () => 14, hoverVehicleId, selectedVehicleId, useDelayStyle, } = options;
+    const { pixelRatio = 1, zoom } = 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 || {};
+    const { delay, line, operator_provides_realtime_journey: operatorProvidesRealtime, state, train_id: id, } = trajectory.properties;
+    let { color, name, text_color: textColor } = line || {};
     name = getText(name);
     const cancelled = state === 'JOURNEY_CANCELLED';
     if (!type) {
@@ -157,10 +152,10 @@ const realtimeDefaultStyle = (trajectory, viewState, options) => {
     if (!textColor) {
         textColor = '#000000';
     }
-    if (color && color[0] !== '#') {
+    if (color && !color.startsWith('#')) {
         color = `#${color}`;
     }
-    if (textColor[0] !== '#') {
+    if (!textColor.startsWith('#')) {
         textColor = `#${textColor}`;
     }
     const z = Math.min(Math.floor(zoom || 1), 16);

package/common/styles/realtimeDelayStyle.d.ts

@@ -0,0 +1,12 @@
+import type { 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
+ * @private
+ */
+declare const realtimeDelayStyle: RealtimeStyleFunction;
+export default realtimeDelayStyle;

package/common/styles/realtimeHeadingStyle.d.ts

@@ -0,0 +1,12 @@
+import type { RealtimeStyleFunction } from '../../types';
+/**
+ * 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
+ */
+declare const realtimeHeadingStyle: RealtimeStyleFunction;
+export default realtimeHeadingStyle;

package/common/styles/realtimeHeadingStyle.js

@@ -1,16 +1,13 @@
 import createCanvas from '../utils/createCanvas';
 import { getBgColor } from '../utils/realtimeConfig';
 import realtimeDefaultStyle from './realtimeDefaultStyle';
-/** @private */
 const rotateCanvas = (canvas, rotation) => {
     const ctx = canvas.getContext('2d');
     ctx === null || ctx === void 0 ? void 0 : ctx.translate(canvas.width / 2, canvas.height / 2);
     ctx === null || ctx === void 0 ? void 0 : ctx.rotate(rotation);
     ctx === null || ctx === void 0 ? void 0 : ctx.translate(-canvas.width / 2, -canvas.height / 2);
 };
-/** @private */
 const arrowCache = {};
-/** @private */
 const getArrowCanvas = (fillColor) => {
     const key = `${fillColor}`;
     if (!arrowCache[key]) {
@@ -35,9 +32,7 @@ const getArrowCanvas = (fillColor) => {
     }
     return arrowCache[key];
 };
-/** @private */
 const bufferArrowCache = {};
-/** @private */
 const getBufferArrowCanvas = (canvas, fillColor, rotation) => {
     const margin = 20;
     const bufferKey = `${fillColor},${canvas.width},${canvas.height},${rotation}`;
@@ -67,9 +62,8 @@ const getBufferArrowCanvas = (canvas, fillColor, rotation) => {
  * @private
  */
 const realtimeHeadingStyle = (trajectory, viewState, options) => {
-    var _a, _b;
-    // @ts-ignore
-    const { rotation, type, line } = trajectory.properties;
+    // @ts-expect-error improve types
+    const { line, rotation, type } = trajectory.properties;
     const { color } = line || {};
     const canvas = realtimeDefaultStyle(trajectory, viewState, options);
     if (canvas && rotation !== null) {
@@ -78,8 +72,9 @@ const realtimeHeadingStyle = (trajectory, viewState, options) => {
         if (bufferArrow) {
             const bufferSize = (bufferArrow.width - canvas.width) / 2;
             const vehicleWithArrow = createCanvas(bufferArrow.width, bufferArrow.height);
-            (_a = vehicleWithArrow === null || vehicleWithArrow === void 0 ? void 0 : vehicleWithArrow.getContext('2d')) === null || _a === void 0 ? void 0 : _a.drawImage(bufferArrow, 0, 0, bufferArrow.width, bufferArrow.height);
-            (_b = vehicleWithArrow === null || vehicleWithArrow === void 0 ? void 0 : vehicleWithArrow.getContext('2d')) === null || _b === void 0 ? void 0 : _b.drawImage(canvas, bufferSize, bufferSize, canvas.width, canvas.height);
+            const context = vehicleWithArrow === null || vehicleWithArrow === void 0 ? void 0 : vehicleWithArrow.getContext('2d');
+            context === null || context === void 0 ? void 0 : context.drawImage(bufferArrow, 0, 0, bufferArrow.width, bufferArrow.height);
+            context === null || context === void 0 ? void 0 : context.drawImage(canvas, bufferSize, bufferSize, canvas.width, canvas.height);
             return vehicleWithArrow;
         }
     }

package/common/styles/realtimeSimpleStyle.d.ts

@@ -0,0 +1,3 @@
+import type { RealtimeStyleFunction } from '../../types';
+declare const realtimeSimpleStyle: RealtimeStyleFunction;
+export default realtimeSimpleStyle;

package/common/styles/realtimeSimpleStyle.js

@@ -4,7 +4,6 @@ import createCanvas from '../utils/createCanvas';
  * Display blue point for each train.
  */
 let canvas;
-/** @private */
 const realtimeSimpleStyle = () => {
     if (!canvas) {
         canvas = createCanvas(15, 15);

package/common/typedefs.d.ts

@@ -0,0 +1,102 @@
+export default dummy;
+export type FilterFunction = Function;
+export type SortFunction = Function;
+export type getMotsByZoomFunction = Function;
+export type ViewState = {
+    /**
+     * A time in ms.
+     */
+    time: number | undefined;
+    /**
+     * A center in mercator coordinate.
+     */
+    center: number[2] | undefined;
+    /**
+     * An Extent in mercator coordinates.
+     */
+    extent: number[4];
+    /**
+     * A size ([width, height]).
+     */
+    size: number[2];
+    /**
+     * A rotation in radians.
+     */
+    rotation: number;
+    /**
+     * A resolution.
+     */
+    resolution: number;
+    /**
+     * A zoom level.
+     */
+    zoom: number;
+    /**
+     * A pixel ratio.
+     */
+    pixelRatio: number | undefined;
+};
+export type FeatureInfo = {
+    /**
+     * A layer.
+     */
+    layer: Layer;
+    /**
+     * An array of features.
+     */
+    features: Feature[];
+    /**
+     * The coordinate where to find the featue.
+     */
+    coordinate: number[2];
+};
+export type VehiclePosition = {
+    /**
+     * Coordinate of the vehicle position in Mercator .
+     */
+    coord: number[2];
+    /**
+     * An angle in radians representing the direction (from the true north) towards which the vehicle is facing.
+     */
+    rotation: number;
+};
+/**
+ * @typedef {function} FilterFunction
+ * @param {Vehicle} vehicle Vehicle to filter.
+ * @returns boolean
+ */
+/**
+ * @typedef {function} SortFunction
+ * @param {any} a Object a to compare.
+ * @param {any} b Object b to compare.
+ * @returns number
+ */
+/**
+ * @typedef {function} getMotsByZoomFunction
+ * @param {number} zoom Curent zoom level.
+ * @param {RealtimeMot[][]} motsByZoom Default array of mots by zoom.
+ * @returns number
+ */
+/**
+ * @typedef {Object} ViewState
+ * @property {number|undefined} time A time in ms.
+ * @property {number[2]|undefined} center A center in mercator coordinate.
+ * @property {number[4]} extent An Extent in mercator coordinates.
+ * @property {number[2]} size A size ([width, height]).
+ * @property {number} rotation A rotation in radians.
+ * @property {number} resolution A resolution.
+ * @property {number} zoom A zoom level.
+ * @property {number|undefined} pixelRatio A pixel ratio.
+ */
+/**
+ * @typedef {Object} FeatureInfo
+ * @property {Layer} layer A layer.
+ * @property {Feature[]} features  An array of features.
+ * @property {number[2]} coordinate The coordinate where to find the featue.
+ */
+/**
+ * @typedef {Object} VehiclePosition
+ * @property {number[2]} coord Coordinate of the vehicle position in Mercator .
+ * @property {number!} rotation  An angle in radians representing the direction (from the true north) towards which the vehicle is facing.
+ */
+declare function dummy(): void;

package/common/typedefs.js

@@ -9,6 +9,12 @@
  * @param {any} b Object b to compare.
  * @returns number
  */
+/**
+ * @typedef {function} getMotsByZoomFunction
+ * @param {number} zoom Curent zoom level.
+ * @param {RealtimeMot[][]} motsByZoom Default array of mots by zoom.
+ * @returns number
+ */
 /**
  * @typedef {Object} ViewState
  * @property {number|undefined} time A time in ms.
@@ -26,37 +32,6 @@
  * @property {Feature[]} features  An array of features.
  * @property {number[2]} coordinate The coordinate where to find the featue.
  */
-/**
- * @typedef {ol/Map~Map|maplibregl.Map} AnyMap
- */
-/**
- * @typedef {Object} MaplibreLayerOptions
- * @property {string} apiKey Access key for [geOps apis](https://developer.geops.io/).
- * @property {string} apiKeyName geOps Maps api key name.
- * @property {maplibregl.MapOptions} options.mapOptions Maplibre map options.
- * @property {string} style geOps Maps api style.
- * @property {string} url geOps Maps api url.
- */
-/**
- * @typedef {Object} ControlCommonOptions
- * @property {boolean} [active = true] Whether the control is active or not.
- * @property {HTMLElement} element The HTML element used to render the control.
- * @property {HTMLElement} target The HTML element where to render the element property. Default is the map's element.
- * @property {function} render Render function called whenever the control needs to be rerendered.
- */
-/**
- * @typedef {Object} LayerCommonOptions
- * @property {string!} key Identifier of the layer. Must be unique.
- * @property {string!} name  Name of the layer.
- * @property {string!} group Group of the layer.
- * @property {string[]!} copyrights List of copyrights.
- * @property {Layer[]!} children List of children layers.
- * @property {boolean!} visible  Define if the layer is currently display on the map.
- * @property {boolean!} disabled Define if the layer is currently display on the map but can't be seen (extent, zoom ,data restrictions).
- * @property {number!} hittolerance Hit-detection tolerance in css pixels. Pixels inside the radius around the given position will be checked for features.
- * @property {Object!} properties - Custom properties.
- * @property {AnyMap!} map - The map used to display the layer.
- */
 /**
  * @typedef {Object} VehiclePosition
  * @property {number[2]} coord Coordinate of the vehicle position in Mercator .