mobility-toolbox-js 2.0.1-beta.13 → 2.1.0

package/common/mixins/TralisLayerMixin.js

@@ -1,479 +0,0 @@
-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/trackerDefaultStyle.js

@@ -1,197 +0,0 @@
-import {
-  getRadius,
-  getBgColor,
-  getDelayColor,
-  getDelayText,
-  getTextColor,
-  getTextSize
-} from "../trackerConfig";
-const createCanvas = (width, height) => {
-  const canvas = document.createElement("canvas");
-  canvas.width = width;
-  canvas.height = height;
-  return canvas;
-};
-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");
-    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 = {};
-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";
-    ctx.font = font;
-    ctx.fillStyle = delayColor;
-    ctx.strokeStyle = delayOutlineColor;
-    ctx.lineWidth = 1.5 * pixelRatio;
-    const delayText = text;
-    ctx.strokeText(delayText, 0, fontSize);
-    ctx.fillText(delayText, 0, fontSize);
-    cacheDelayText[key] = canvas;
-  }
-  return cacheDelayText[key];
-};
-const cacheCircle = {};
-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");
-    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 = {};
-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");
-    if (hasStroke) {
-      ctx.save();
-      ctx.textBaseline = "middle";
-      ctx.textAlign = "center";
-      ctx.font = `bold ${textSize + 2}px Arial`;
-      ctx.strokeStyle = strokeColor;
-      ctx.strokeText(text, origin, origin);
-      ctx.restore();
-    }
-    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];
-};
-const styleCache = {};
-const style = (trajectory, viewState, options) => {
-  const {
-    hoverVehicleId,
-    selectedVehicleId,
-    useDelayStyle,
-    delayOutlineColor,
-    delayDisplay
-  } = options;
-  const { zoom, pixelRatio } = viewState;
-  let { type, cancelled } = trajectory.properties;
-  const {
-    train_id: id,
-    line,
-    delay,
-    state,
-    operator_provides_realtime_journey: operatorProvidesRealtime
-  } = trajectory.properties;
-  let { name, text_color: textColor, color } = line || {};
-  cancelled = cancelled === true || state === "JOURNEY_CANCELLED";
-  if (!type) {
-    type = "Rail";
-  }
-  if (!name) {
-    name = "I";
-  }
-  if (!textColor) {
-    textColor = "#000000";
-  }
-  if (color && color[0] !== "#") {
-    color = `#${color}`;
-  }
-  if (textColor[0] !== "#") {
-    textColor = `#${textColor}`;
-  }
-  const z = Math.min(Math.floor(zoom || 1), 16);
-  const hover = hoverVehicleId && hoverVehicleId === id;
-  const selected = selectedVehicleId && selectedVehicleId === id;
-  let radius = getRadius(type, z) * pixelRatio;
-  const isDisplayStrokeAndDelay = radius >= 7 * pixelRatio;
-  if (hover || selected) {
-    radius = isDisplayStrokeAndDelay ? radius + 5 * pixelRatio : 14 * pixelRatio;
-  }
-  const mustDrawText = radius > 10 * pixelRatio;
-  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;
-    const origin = size / 2;
-    const canvas = createCanvas(size, size);
-    const ctx = canvas.getContext("2d");
-    if (isDisplayStrokeAndDelay && delay !== null) {
-      const delayBg = getDelayBgCanvas(origin, radiusDelay, getDelayColor(delay, cancelled));
-      ctx.drawImage(delayBg, 0, 0);
-    }
-    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);
-      }
-    }
-    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);
-    ctx.drawImage(circle, 0, 0);
-    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);
-      ctx.drawImage(text, 0, 0);
-    }
-    styleCache[key] = canvas;
-  }
-  return styleCache[key];
-};
-export default style;

package/common/styles/trackerDelayStyle.js

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

package/common/styles/trackerSimpleStyle.js

@@ -1,18 +0,0 @@
-let canvas;
-const style = () => {
-  if (!canvas) {
-    document.createElement("canvas");
-    canvas.width = 15;
-    canvas.height = 15;
-    const ctx = canvas.getContext("2d");
-    ctx.arc(8, 8, 5, 0, 2 * Math.PI, false);
-    ctx.fillStyle = "#8ED6FF";
-    ctx.fill();
-    ctx.lineWidth = 3;
-    ctx.strokeStyle = "black";
-    ctx.stroke();
-    ctx.lineWidth = 3;
-  }
-  return canvas;
-};
-export default style;