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

package/common/mixins/CopyrightMixin.js

@@ -0,0 +1,24 @@
+export class CopyrightInterface {
+  getCopyrights() {
+  }
+}
+const CopyrightMixin = (Base) => class extends Base {
+  render() {
+    if (!this.element) {
+      return;
+    }
+    this.element.innerHTML = this.active ? this.getCopyrights().join(" | ") : "";
+  }
+  createDefaultElement() {
+    this.element = document.createElement("div");
+    this.element.id = "mbt-copyright";
+    Object.assign(this.element.style, {
+      position: "absolute",
+      bottom: 0,
+      right: 0,
+      fontSize: ".8rem",
+      padding: "0 10px"
+    });
+  }
+};
+export default CopyrightMixin;

package/common/mixins/SearchMixin.js

@@ -0,0 +1,110 @@
+import { StopsAPI } from "../../api";
+export class SearchInterface {
+  constructor(options = {}) {
+  }
+  search(query, abortController) {
+  }
+}
+const SearchMixin = (Base) => class extends Base {
+  constructor(options = {}) {
+    super(options);
+    const { apiParams, apiKey, url } = options;
+    this.apiParams = { limit: 20, ...apiParams || {} };
+    this.placeholder = options.placeholder || "Search for a stop...";
+    const apiOptions = { apiKey };
+    if (url) {
+      apiOptions.url = url;
+    }
+    this.api = new StopsAPI(apiOptions);
+    this.abortController = new AbortController();
+  }
+  render(featureCollection) {
+    const suggestions = featureCollection?.features || [];
+    if (!this.suggestionsElt) {
+      return;
+    }
+    this.suggestionsElt.style.display = suggestions.length ? "block" : "none";
+    this.suggestionsElt.innerHTML = "";
+    suggestions.forEach((suggestion) => {
+      const { properties } = suggestion;
+      const suggElt = document.createElement("div");
+      suggElt.innerHTML = properties.name;
+      suggElt.onclick = () => {
+        this.onSuggestionClick(suggestion);
+      };
+      Object.assign(suggElt.style, {
+        padding: "5px 12px"
+      });
+      this.suggestionsElt.appendChild(suggElt);
+    });
+  }
+  createDefaultElement() {
+    this.element = document.createElement("div");
+    this.element.id = "mbt-search";
+    Object.assign(this.element.style, {
+      position: "absolute",
+      top: 0,
+      left: "50px",
+      margin: "10px",
+      display: "flex",
+      flexDirection: "column",
+      width: "320px"
+    });
+    this.inputElt = document.createElement("input");
+    this.inputElt.type = "text";
+    this.inputElt.placeholder = this.placeholder;
+    this.inputElt.autoComplete = "off";
+    this.inputElt.onkeyup = (evt) => {
+      this.abortController.abort();
+      this.abortController = new AbortController();
+      this.search(evt.target.value, this.abortController);
+    };
+    Object.assign(this.inputElt.style, {
+      padding: "10px 30px 10px 10px"
+    });
+    this.element.appendChild(this.inputElt);
+    this.suggestionsElt = document.createElement("div");
+    Object.assign(this.suggestionsElt.style, {
+      backgroundColor: "white",
+      overflowY: "auto",
+      cursor: "pointer"
+    });
+    this.element.appendChild(this.suggestionsElt);
+    this.clearElt = document.createElement("div");
+    Object.assign(this.clearElt.style, {
+      display: "none",
+      position: "absolute",
+      right: "0",
+      padding: "0 10px",
+      fontSize: "200%",
+      cursor: "pointer"
+    });
+    this.clearElt.innerHTML = "\xD7";
+    this.clearElt.onclick = () => this.clear();
+    this.element.appendChild(this.clearElt);
+  }
+  search(q, abortController) {
+    if (q !== void 0 || q !== null) {
+      this.apiParams.q = q;
+    }
+    if (this.clearElt) {
+      this.clearElt.style.display = "block";
+    }
+    return this.api.search(this.apiParams, abortController).then((data) => {
+      this.render(data);
+    }).catch(() => {
+      this.render();
+    });
+  }
+  onSuggestionClick(suggestion) {
+  }
+  clear() {
+    if (!this.suggestionsElt) {
+      return;
+    }
+    this.inputElt.value = "";
+    this.suggestionsElt.innerHTML = "";
+    this.clearElt.style.display = "none";
+  }
+};
+export default SearchMixin;

package/common/mixins/TralisLayerMixin.js

@@ -0,0 +1,479 @@
+import qs from "query-string";
+import { buffer, containsCoordinate, intersects } from "ol/extent";
+import { unByKey } from "ol/Observable";
+import GeoJSON from "ol/format/GeoJSON";
+import Point from "ol/geom/Point";
+import debounce from "lodash.debounce";
+import throttle from "lodash.throttle";
+import { fromLonLat } from "ol/proj";
+import Tracker from "../Tracker";
+import { timeSteps } from "../trackerConfig";
+import createFilters from "../utils/createTrackerFilters";
+import trackerDefaultStyle from "../styles/trackerDefaultStyle";
+import { TralisAPI, TralisModes } from "../../api";
+const LINE_FILTER = "publishedlinename";
+const ROUTE_FILTER = "tripnumber";
+const OPERATOR_FILTER = "operator";
+export class TralisLayerInterface {
+  constructor(options = {}) {
+  }
+  attachToMap(map) {
+  }
+  detachFromMap() {
+  }
+  start() {
+  }
+  stop() {
+  }
+  setBbox(extent, zoom) {
+  }
+  setMode(mode) {
+  }
+  getTrajectoryInfos(id, mode) {
+  }
+}
+const TralisLayerMixin = (Base) => class extends Base {
+  constructor(options = {}) {
+    super({ hitTolerance: 10, ...options });
+    this.debug = options.debug;
+    this.mode = options.mode || TralisModes.TOPOGRAPHIC;
+    this.api = options.api || new TralisAPI(options);
+    this.tenant = options.tenant || "";
+    this.minZoomNonTrain = options.minZoomNonTrain || 9;
+    this.minZoomInterpolation = options.minZoomInterpolation || 8;
+    this.format = new GeoJSON();
+    this.generalizationLevelByZoom = options.generalizationLevelByZoom || {
+      0: 5,
+      1: 5,
+      2: 5,
+      3: 5,
+      4: 5,
+      5: 5,
+      6: 5,
+      7: 5,
+      8: 10,
+      9: 30,
+      10: 30,
+      11: 100,
+      12: 100,
+      13: 100
+    };
+    this.isUpdateBboxOnMoveEnd = options.isUpdateBboxOnMoveEnd !== false;
+    this.throttleRenderTrajectories = throttle(this.renderTrajectoriesInternal, 50, { leading: false, trailing: true });
+    this.debounceRenderTrajectories = debounce(this.renderTrajectoriesInternal, 50, { leading: true, trailing: true, maxWait: 5e3 });
+    this.onFeatureHover = this.onFeatureHover.bind(this);
+    this.onFeatureClick = this.onFeatureClick.bind(this);
+    this.renderTrajectoriesInternal = this.renderTrajectoriesInternal.bind(this);
+    this.onTrajectoryMessage = this.onTrajectoryMessage.bind(this);
+    this.onDeleteTrajectoryMessage = this.onDeleteTrajectoryMessage.bind(this);
+    this.onDocumentVisibilityChange = this.onDocumentVisibilityChange.bind(this);
+  }
+  defineProperties(options) {
+    let { regexPublishedLineName, publishedLineName, tripNumber, operator } = options;
+    const {
+      style,
+      speed,
+      pixelRatio,
+      hoverVehicleId,
+      selectedVehicleId,
+      filter,
+      sort,
+      time,
+      live
+    } = options;
+    const initTrackerOptions = {
+      style
+    };
+    Object.keys(initTrackerOptions).forEach((key) => initTrackerOptions[key] === void 0 && delete initTrackerOptions[key]);
+    let currSpeed = speed || 1;
+    let currTime = time || new Date();
+    super.defineProperties(options);
+    Object.defineProperties(this, {
+      isTrackerLayer: { value: true },
+      style: {
+        value: (trajectory, viewState) => (style || trackerDefaultStyle)(trajectory, viewState, this)
+      },
+      speed: {
+        get: () => currSpeed,
+        set: (newSpeed) => {
+          currSpeed = newSpeed;
+          this.start();
+        }
+      },
+      filter: {
+        value: filter,
+        writable: true
+      },
+      sort: {
+        value: sort,
+        writable: true
+      },
+      tracker: { value: null, writable: true },
+      styleCache: { value: {} },
+      live: {
+        value: live === false ? live : true,
+        writable: true
+      },
+      time: {
+        get: () => currTime,
+        set: (newTime) => {
+          currTime = newTime && newTime.getTime ? newTime : new Date(newTime);
+          this.renderTrajectories();
+        }
+      },
+      trajectories: {
+        value: {},
+        writable: true
+      },
+      renderedTrajectories: {
+        get: () => this.tracker && this.tracker.renderedTrajectories || []
+      },
+      hoverVehicleId: {
+        value: hoverVehicleId,
+        writable: true
+      },
+      selectedVehicleId: {
+        value: selectedVehicleId,
+        writable: true
+      },
+      pixelRatio: {
+        value: pixelRatio || (typeof window !== "undefined" ? window.devicePixelRatio : 1),
+        writable: true
+      },
+      initTrackerOptions: {
+        value: initTrackerOptions,
+        writable: false
+      },
+      useRequestAnimationFrame: {
+        value: options.useRequestAnimationFrame || false,
+        writable: true
+      },
+      useThrottle: {
+        value: options.useThrottle || true,
+        writable: true
+      },
+      useDebounce: {
+        value: options.useDebounce || false,
+        writable: true
+      },
+      publishedLineName: {
+        get: () => publishedLineName,
+        set: (newPublishedLineName) => {
+          publishedLineName = newPublishedLineName;
+          this.updateFilters();
+        }
+      },
+      tripNumber: {
+        get: () => tripNumber,
+        set: (newTripNumber) => {
+          tripNumber = newTripNumber;
+          this.updateFilters();
+        }
+      },
+      operator: {
+        get: () => operator,
+        set: (newOperator) => {
+          operator = newOperator;
+          this.updateFilters();
+        }
+      },
+      regexPublishedLineName: {
+        get: () => regexPublishedLineName,
+        set: (newRegex) => {
+          regexPublishedLineName = newRegex;
+          this.updateFilters();
+        }
+      },
+      delayDisplay: {
+        value: options.delayDisplay || 3e5,
+        writable: true
+      },
+      delayOutlineColor: {
+        value: options.delayOutlineColor || "#000000",
+        writable: true
+      }
+    });
+    this.updateFilters();
+  }
+  attachToMap(map) {
+    super.attachToMap(map);
+    this.tracker = new Tracker({
+      style: (...args) => this.style(...args),
+      ...this.initTrackerOptions
+    });
+    if (this.visible) {
+      this.start();
+    }
+    this.visibilityRef = this.on("change:visible", (evt) => {
+      if (evt.target.visible) {
+        this.start();
+      } else {
+        this.stop();
+      }
+    });
+    document.addEventListener("visibilitychange", this.onDocumentVisibilityChange);
+  }
+  detachFromMap() {
+    document.removeEventListener("visibilitychange", this.onDocumentVisibilityChange);
+    this.stop();
+    unByKey(this.visibilityRef);
+    if (this.tracker) {
+      const { canvas } = this.tracker;
+      const context = canvas.getContext("2d");
+      context.clearRect(0, 0, canvas.width, canvas.height);
+      this.tracker = null;
+    }
+    super.detachFromMap();
+  }
+  start() {
+    this.stop();
+    this.renderTrajectories();
+    this.startUpdateTime();
+    if (this.isClickActive) {
+      this.onClick(this.onFeatureClick);
+    }
+    if (this.isHoverActive) {
+      this.onHover(this.onFeatureHover);
+    }
+    this.api.open();
+    this.api.subscribeTrajectory(this.mode, this.onTrajectoryMessage, this.isUpdateBboxOnMoveEnd);
+    this.api.subscribeDeletedVehicles(this.mode, this.onDeleteTrajectoryMessage, this.isUpdateBboxOnMoveEnd);
+    if (this.isUpdateBboxOnMoveEnd) {
+      this.setBbox();
+    }
+  }
+  startUpdateTime() {
+    this.stopUpdateTime();
+    this.updateTimeDelay = this.getRefreshTimeInMs();
+    this.updateTimeInterval = setInterval(() => {
+      this.time = this.live ? new Date() : this.time.getTime() + this.updateTimeDelay * this.speed;
+    }, this.updateTimeDelay);
+  }
+  stop() {
+    this.api.unsubscribeTrajectory(this.onTrajectoryMessage);
+    this.api.unsubscribeDeletedVehicles(this.onDeleteTrajectoryMessage);
+    this.api.close();
+  }
+  stopUpdateTime() {
+    if (this.updateTimeInterval) {
+      clearInterval(this.updateTimeInterval);
+    }
+  }
+  renderTrajectoriesInternal(viewState, noInterpolate) {
+    if (!this.tracker) {
+      return false;
+    }
+    const time = this.live ? Date.now() : this.time;
+    const trajectories = Object.values(this.trajectories);
+    if (this.sort) {
+      trajectories.sort(this.sort);
+    }
+    this.renderState = this.tracker.renderTrajectories(trajectories, { ...viewState, pixelRatio: this.pixelRatio, time }, {
+      noInterpolate: viewState.zoom < this.minZoomInterpolation ? true : noInterpolate,
+      hoverVehicleId: this.hoverVehicleId,
+      selectedVehicleId: this.selectedVehicleId,
+      iconScale: this.iconScale,
+      delayDisplay: this.delayDisplay,
+      delayOutlineColor: this.delayOutlineColor
+    });
+    return true;
+  }
+  renderTrajectories(viewState, noInterpolate) {
+    if (this.requestId) {
+      cancelAnimationFrame(this.requestId);
+      this.requestId = null;
+    }
+    if (!noInterpolate && this.useRequestAnimationFrame) {
+      this.requestId = requestAnimationFrame(() => {
+        this.renderTrajectoriesInternal(viewState, noInterpolate);
+      });
+    } else if (!noInterpolate && this.useDebounce) {
+      this.debounceRenderTrajectories(viewState, noInterpolate);
+    } else if (!noInterpolate && this.useThrottle) {
+      this.throttleRenderTrajectories(viewState, noInterpolate);
+    } else {
+      this.renderTrajectoriesInternal(viewState, noInterpolate);
+    }
+  }
+  setBbox(extent, zoom) {
+    const keys = Object.keys(this.trajectories);
+    for (let i = keys.length - 1; i >= 0; i -= 1) {
+      this.purgeTrajectory(this.trajectories[keys[i]], extent, zoom);
+    }
+    const bbox = [...extent];
+    if (this.isUpdateBboxOnMoveEnd) {
+      bbox.push(zoom);
+      if (this.tenant) {
+        bbox.push(`tenant=${this.tenant}`);
+      }
+      this.generalizationLevel = this.generalizationLevelByZoom[zoom];
+      if (this.generalizationLevel) {
+        bbox.push(`gen=${this.generalizationLevel}`);
+      }
+    }
+    this.api.bbox = bbox;
+  }
+  setMode(mode) {
+    if (this.mode === mode) {
+      return;
+    }
+    this.mode = mode;
+    this.api.subscribeTrajectory(this.mode, this.onTrajectoryMessage, this.isUpdateBboxOnMoveEnd);
+    this.api.subscribeDeletedVehicles(this.mode, this.onDeleteTrajectoryMessage, this.isUpdateBboxOnMoveEnd);
+  }
+  getRefreshTimeInMs(zoom) {
+    const roundedZoom = Math.round(zoom);
+    const timeStep = timeSteps[roundedZoom] || 25;
+    const nextTick = Math.max(25, timeStep / this.speed);
+    const nextThrottleTick = Math.min(nextTick, 500);
+    if (this.useThrottle) {
+      this.throttleRenderTrajectories = throttle(this.renderTrajectoriesInternal, nextThrottleTick, { leading: true, trailing: true });
+    } else if (this.useDebounce) {
+      this.debounceRenderTrajectories = debounce(this.renderTrajectoriesInternal, nextThrottleTick, { leading: true, trailing: true, maxWait: 5e3 });
+    }
+    if (this.api?.buffer) {
+      const [, size] = this.api.buffer;
+      this.api.buffer = [nextThrottleTick, size];
+    }
+    return nextTick;
+  }
+  getVehicle(filterFc) {
+    return Object.values(this.trajectories).filter(filterFc);
+  }
+  getFeatureInfoAtCoordinate(coordinate, options = {}) {
+    const { resolution, nb } = options;
+    const ext = buffer([...coordinate, ...coordinate], this.hitTolerance * resolution);
+    let trajectories = Object.values(this.trajectories);
+    if (this.sort) {
+      trajectories = trajectories.sort(this.sort);
+    }
+    const vehicles = [];
+    for (let i = 0; i < trajectories.length; i += 1) {
+      if (trajectories[i].properties.coordinate && containsCoordinate(ext, trajectories[i].properties.coordinate)) {
+        vehicles.push(trajectories[i]);
+      }
+      if (vehicles.length === nb) {
+        break;
+      }
+    }
+    return Promise.resolve({
+      layer: this,
+      features: vehicles.map((vehicle) => this.format.readFeature(vehicle)),
+      coordinate
+    });
+  }
+  getTrajectoryInfos(id) {
+    const promises = [
+      this.api.getStopSequence(id, this.mode),
+      this.api.getFullTrajectory(id, this.mode, this.generalizationLevel)
+    ];
+    return Promise.all(promises).then(([stopSequence, fullTrajectory]) => {
+      const response = {
+        stopSequence,
+        fullTrajectory
+      };
+      return response;
+    });
+  }
+  purgeTrajectory(trajectory, extent, zoom) {
+    const { type, bounds, train_id: id } = trajectory.properties;
+    if (!intersects(extent, bounds) || type !== "rail" && zoom < (this.minZoomNonTrain || 9)) {
+      this.removeTrajectory(id);
+      return true;
+    }
+    return false;
+  }
+  addTrajectory(trajectory) {
+    if (this.filter && !this.filter(trajectory)) {
+      return;
+    }
+    this.trajectories[trajectory.properties.train_id] = trajectory;
+    this.renderTrajectories();
+  }
+  removeTrajectory(id) {
+    delete this.trajectories[id];
+  }
+  onZoomEnd(evt) {
+    this.startUpdateTime();
+  }
+  onDocumentVisibilityChange() {
+    if (!this.visible) {
+      return;
+    }
+    if (document.hidden) {
+      this.stop();
+    } else {
+      this.start();
+    }
+  }
+  onTrajectoryMessage(data) {
+    if (!data.content) {
+      return;
+    }
+    const trajectory = data.content;
+    const {
+      geometry,
+      properties: {
+        train_id: id,
+        time_since_update: timeSinceUpdate,
+        raw_coordinates: rawCoordinates
+      }
+    } = trajectory;
+    if (timeSinceUpdate < 0) {
+      return;
+    }
+    if (this.purgeTrajectory(trajectory)) {
+      return;
+    }
+    if (this.debug && this.mode === TralisModes.TOPOGRAPHIC && rawCoordinates) {
+      trajectory.properties.olGeometry = {
+        type: "Point",
+        coordinates: fromLonLat(rawCoordinates, this.map.getView().getProjection())
+      };
+    } else {
+      trajectory.properties.olGeometry = this.format.readGeometry(geometry);
+    }
+    trajectory.properties.timeOffset = Date.now() - data.timestamp;
+    this.addTrajectory(trajectory);
+  }
+  onDeleteTrajectoryMessage(data) {
+    if (!data.content) {
+      return;
+    }
+    this.removeTrajectory(data.content);
+  }
+  onFeatureHover(features, layer, coordinate) {
+    const [feature] = features;
+    let id = null;
+    if (feature) {
+      id = feature.get("train_id");
+    }
+    if (this.hoverVehicleId !== id) {
+      this.hoverVehicleId = id;
+      this.renderTrajectories(true);
+    }
+  }
+  onFeatureClick(features, layer, coordinate) {
+    const [feature] = features;
+    let id = null;
+    if (feature) {
+      id = feature.get("train_id");
+    }
+    if (this.selectedVehicleId !== id) {
+      this.selectedVehicleId = id;
+      this.selectedVehicle = feature;
+      this.renderTrajectories(true);
+    }
+  }
+  updateFilters() {
+    const parameters = qs.parse(window.location.search.toLowerCase());
+    const publishedName = this.publishedLineName || parameters[LINE_FILTER];
+    const tripNumber = this.tripNumber || parameters[ROUTE_FILTER];
+    const operator = this.operator || parameters[OPERATOR_FILTER];
+    const { regexPublishedLineName } = this;
+    if (publishedName || tripNumber || operator || regexPublishedLineName) {
+      this.filter = createFilters(publishedName, tripNumber, operator, regexPublishedLineName);
+    }
+  }
+};
+export default TralisLayerMixin;

package/common/styles/index.js

@@ -0,0 +1,4 @@
+export { default as trackerDefaultStyle } from "./trackerDefaultStyle";
+export { default as trackerDelayStyle } from "./trackerDelayStyle";
+export { default as trackerSimpleStyle } from "./trackerSimpleStyle";
+export * from "./trackerDefaultStyle";