mobility-toolbox-js 2.0.0-beta.32 → 2.0.0-beta.33

package/common/mixins/RealtimeLayerMixin.js

@@ -1,436 +0,0 @@
-import { buffer, containsCoordinate, intersects } from "ol/extent";
-import { unByKey } from "ol/Observable";
-import GeoJSON from "ol/format/GeoJSON";
-import debounce from "lodash.debounce";
-import throttle from "lodash.throttle";
-import { fromLonLat } from "ol/proj";
-import realtimeDefaultStyle from "../styles/realtimeDefaultStyle";
-import { RealtimeAPI, RealtimeModes } from "../../api";
-import renderTrajectories from "../utils/renderTrajectories";
-import * as trackerConfig from "../utils/trackerConfig";
-export class RealtimeLayerInterface {
-  constructor(options = {}) {
-  }
-  attachToMap(map) {
-  }
-  detachFromMap() {
-  }
-  start() {
-  }
-  stop() {
-  }
-  setBbox(extent, zoom) {
-  }
-  setMode(mode) {
-  }
-  getTrajectoryInfos(id, mode) {
-  }
-}
-const RealtimeLayerMixin = (Base) => class extends Base {
-  constructor(options = {}) {
-    super({
-      hitTolerance: 10,
-      ...options
-    });
-    this.debug = options.debug;
-    this.mode = options.mode || RealtimeModes.TOPOGRAPHIC;
-    this.api = options.api || new RealtimeAPI(options);
-    this.tenant = options.tenant || "";
-    this.minZoomNonTrain = options.minZoomNonTrain || 9;
-    this.minZoomInterpolation = options.minZoomInterpolation || 8;
-    this.format = new GeoJSON();
-    this.generalizationLevelByZoom = options.generalizationLevelByZoom || [
-      5,
-      5,
-      5,
-      5,
-      5,
-      5,
-      5,
-      5,
-      10,
-      30,
-      30,
-      100,
-      100,
-      100
-    ];
-    this.getGeneralizationLevelByZoom = (zoom) => {
-      return options.getGeneralizationLevelByZoom && options.getGeneralizationLevelByZoom(zoom, this.generalizationLevelByZoom) || this.generalizationLevelByZoom[zoom];
-    };
-    this.renderTimeIntervalByZoom = options.renderTimeIntervalByZoom || [
-      1e5,
-      5e4,
-      4e4,
-      3e4,
-      2e4,
-      15e3,
-      1e4,
-      5e3,
-      2e3,
-      1e3,
-      400,
-      300,
-      250,
-      180,
-      90,
-      60,
-      50,
-      50,
-      50,
-      50,
-      50
-    ];
-    this.getRenderTimeIntervalByZoom = (zoom) => {
-      return options.getRenderTimeIntervalByZoom && options.getRenderTimeIntervalByZoom(zoom, this.renderTimeIntervalByZoom) || this.renderTimeIntervalByZoom[zoom];
-    };
-    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) {
-    const {
-      style,
-      speed,
-      pixelRatio,
-      hoverVehicleId,
-      selectedVehicleId,
-      filter,
-      sort,
-      time,
-      live,
-      canvas,
-      styleOptions
-    } = options;
-    let currSpeed = speed || 1;
-    let currTime = time || new Date();
-    super.defineProperties(options);
-    Object.defineProperties(this, {
-      isTrackerLayer: { value: true },
-      canvas: {
-        value: canvas || document.createElement("canvas")
-      },
-      style: {
-        value: style || realtimeDefaultStyle
-      },
-      styleOptions: {
-        value: { ...trackerConfig, ...styleOptions || {} }
-      },
-      speed: {
-        get: () => currSpeed,
-        set: (newSpeed) => {
-          currSpeed = newSpeed;
-          this.start();
-        }
-      },
-      filter: {
-        value: filter,
-        writable: true
-      },
-      sort: {
-        value: sort,
-        writable: true
-      },
-      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
-      },
-      hoverVehicleId: {
-        value: hoverVehicleId,
-        writable: true
-      },
-      selectedVehicleId: {
-        value: selectedVehicleId,
-        writable: true
-      },
-      pixelRatio: {
-        value: pixelRatio || (typeof window !== "undefined" ? window.devicePixelRatio : 1),
-        writable: true
-      },
-      useRequestAnimationFrame: {
-        value: options.useRequestAnimationFrame || false,
-        writable: true
-      },
-      useThrottle: {
-        value: options.useThrottle !== false,
-        writable: true
-      },
-      useDebounce: {
-        value: options.useDebounce || false,
-        writable: true
-      }
-    });
-  }
-  attachToMap(map) {
-    super.attachToMap(map);
-    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);
-    const context = this.canvas.getContext("2d");
-    context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-    super.detachFromMap();
-  }
-  start() {
-    this.stop();
-    this.renderTrajectories();
-    this.startUpdateTime();
-    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.map) {
-      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 = renderTrajectories(this.canvas, trajectories, this.style, { ...viewState, pixelRatio: this.pixelRatio, time }, {
-      noInterpolate: viewState.zoom < this.minZoomInterpolation ? true : noInterpolate,
-      hoverVehicleId: this.hoverVehicleId,
-      selectedVehicleId: this.selectedVehicleId,
-      ...this.styleOptions
-    });
-    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.getGeneralizationLevelByZoom(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 = this.getRenderTimeIntervalByZoom(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 === RealtimeModes.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);
-    }
-  }
-};
-export default RealtimeLayerMixin;

package/common/mixins/StopFinderMixin.js

@@ -1,110 +0,0 @@
-import { StopsAPI } from "../../api";
-export class StopFinderInterface {
-  constructor(options = {}) {
-  }
-  search(query, abortController) {
-  }
-}
-const StopFinderMixin = (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 StopFinderMixin;

package/common/mixins/UserInteractionsLayerMixin.js

@@ -1,124 +0,0 @@
-import { fromLonLat } from "ol/proj";
-import { unByKey } from "ol/Observable";
-export class UserInteractionsLayerInterface {
-  constructor(options = {}) {
-  }
-  attachToMap(map) {
-  }
-  detachFromMap() {
-  }
-  activateUserInteractions() {
-  }
-  deactivateUserInteractions() {
-  }
-  onClick(callback) {
-  }
-  onHover(callback) {
-  }
-}
-const UserInteractionsLayerMixin = (Base) => class extends Base {
-  constructor(options = {}) {
-    super(options);
-    const {
-      userInteractions = true,
-      userClickInteractions = true,
-      userHoverInteractions = true,
-      defaultUserInteractions = true
-    } = options;
-    this.userInteractions = userInteractions;
-    this.userClickInteractions = userClickInteractions;
-    this.userHoverInteractions = userHoverInteractions;
-    this.defaultUserInteractions = defaultUserInteractions;
-    this.userClickCallbacks = [];
-    this.userHoverCallbacks = [];
-    this.userClickEventsKeys = [];
-    this.userHoverEventsKeys = [];
-    this.onUserClickCallback = this.onUserClickCallback.bind(this);
-    this.onUserMoveCallback = this.onUserMoveCallback.bind(this);
-    const { onClick, onHover } = options;
-    if (this.userInteractions && this.userClickInteractions && onClick) {
-      this.onClick(onClick);
-    }
-    if (this.userInteractions && this.userHoverInteractions && onHover) {
-      this.onHover(onHover);
-    }
-  }
-  attachToMap(map, options) {
-    super.attachToMap(map, options);
-    if (this.userInteractions && this.defaultUserInteractions && this.userClickInteractions && this.onFeatureClick) {
-      this.onClick(this.onFeatureClick);
-    }
-    if (this.userInteractions && this.defaultUserInteractions && this.userHoverInteractions && this.onFeatureHover) {
-      this.onHover(this.onFeatureHover);
-    }
-    this.listenEvents();
-  }
-  detachFromMap() {
-    this.unlistenEvents();
-    super.detachFromMap();
-  }
-  listenEvents() {
-    this.unlistenEvents();
-    this.userClickCallbacks.forEach((callback) => {
-      this.userClickEventsKeys.push(this.on("user:click", ({ target: { features, layer, coordinate } }) => {
-        callback(features, layer, coordinate);
-      }));
-    });
-    this.userHoverCallbacks.forEach((callback) => {
-      this.userHoverEventsKeys.push([
-        this.on("user:hover", ({ target: { features, layer, coordinate, event } }) => {
-          callback(features, layer, coordinate, event);
-        })
-      ]);
-    });
-  }
-  unlistenEvents() {
-    unByKey(this.userClickEventsKeys);
-    unByKey(this.userHoverEventsKeys);
-    this.userClickEventsKeys = [];
-    this.userHoverEventsKeys = [];
-  }
-  onClick(callback) {
-    this.userClickCallbacks.push(callback);
-    this.activateUserInteractions();
-  }
-  onHover(callback) {
-    this.userHoverCallbacks.push(callback);
-    this.activateUserInteractions();
-  }
-  onUserClickCallback(evt) {
-    const emptyFeatureInfo = {
-      features: [],
-      layer: this,
-      coordinate: evt.coordinate || fromLonLat(evt.lngLat.toArray()),
-      event: evt
-    };
-    return this.getFeatureInfoAtCoordinate(evt.coordinate).then((featureInfo) => {
-      this.dispatchEvent({
-        type: "user:click",
-        target: featureInfo
-      });
-      return featureInfo;
-    }).catch(() => emptyFeatureInfo);
-  }
-  onUserMoveCallback(evt) {
-    const emptyFeatureInfo = {
-      features: [],
-      layer: this,
-      coordinate: evt.coordinate || fromLonLat(evt.lngLat.toArray()),
-      event: evt
-    };
-    return this.getFeatureInfoAtCoordinate(evt.coordinate).then((featureInfo) => {
-      this.dispatchEvent({
-        type: "user:hover",
-        target: featureInfo
-      });
-      return featureInfo;
-    }).catch(() => emptyFeatureInfo);
-  }
-  activateUserInteractions() {
-  }
-  deactivateUserInteractions() {
-  }
-};
-export default UserInteractionsLayerMixin;