removed all modules

src/_modules/InteractivePoly.ts

@@ -0,0 +1,608 @@
+/*
+  done IMPORTANT: select closest point on drag instead of first
+  done add touch hint poly
+  done approx radius for dragFindNearest
+*/
+
+import {
+  LatLngExpression,
+  Marker,
+  Polyline,
+  PolylineOptions,
+  marker,
+  divIcon,
+  LayerGroup,
+  LatLng,
+  LeafletMouseEvent,
+  latLng,
+  LatLngLiteral
+} from "leaflet";
+
+import { distKm, distToSegment, getPolyLength, pointInArea } from "$utils/geom";
+
+interface InteractivePolylineOptions extends PolylineOptions {
+  maxMarkers?: number;
+  constraintsStyle?: PolylineOptions;
+  kmMarksEnabled?: boolean;
+  kmMarksStep?: number;
+}
+
+export class InteractivePoly extends Polyline {
+  constructor(
+    latlngs: LatLngExpression[] | LatLngExpression[][],
+    options?: InteractivePolylineOptions
+  ) {
+    super(latlngs, options);
+
+    this.constraintsStyle = {
+      ...this.constraintsStyle,
+      ...options.constraintsStyle
+    };
+    this.maxMarkers = options.maxMarkers || this.maxMarkers;
+
+    this.constrLine = new Polyline([], this.constraintsStyle);
+
+    this.startDragHinting();
+  }
+
+  updateTouchHinter = ({ latlngs }: { latlngs: LatLngLiteral[] }): void => {
+    this.touchHinter.setLatLngs(latlngs);
+  };
+
+  setPoints = (latlngs: LatLng[], emitEvent = false) => {
+    this.setLatLngs(latlngs);
+    this.recreateMarkers();
+    this.recalcDistance();
+    this.touchHinter.setLatLngs(latlngs);
+
+    if (emitEvent) {
+      this.fire("latlngschange", { latlngs });
+    }
+  };
+
+  createHintMarker = (latlng: LatLng): Marker =>
+    marker(latlng, {
+      draggable: false,
+      icon: divIcon({
+        className: "leaflet-vertex-drag-helper",
+        iconSize: [11, 11],
+        iconAnchor: [6, 6]
+      })
+    });
+
+  createMarker = (latlng: LatLng): Marker =>
+    marker(latlng, {
+      draggable: true,
+      icon: divIcon({
+        className: "leaflet-vertex-icon",
+        iconSize: [11, 11],
+        iconAnchor: [6, 6]
+      })
+    })
+      .on("contextmenu", this.dropMarker)
+      .on("drag", this.onMarkerDrag)
+      .on("dragstart", this.onMarkerDragStart)
+      .on("dragend", this.onMarkerDragEnd)
+      .addTo(this.markerLayer);
+
+  recreateMarkers = () => {
+    this.clearAllMarkers();
+    const latlngs = this.getLatLngs();
+
+    if (!latlngs || latlngs.length === 0) return;
+
+    latlngs.forEach(latlng => this.markers.push(this.createMarker(latlng)));
+
+    this.updateMarkers();
+  };
+
+  clearAllMarkers = (): void => {
+    this.markerLayer.clearLayers();
+    this.markers = [];
+  };
+
+  updateMarkers = (): void => {
+    this.showVisibleMarkers();
+  };
+
+  showAllMarkers = (): void => {
+    if (!this.is_editing) return;
+    if (this._map.hasLayer(this.markerLayer)) return;
+
+    this._map.addLayer(this.markerLayer);
+    this.fire("allvertexshow");
+  };
+
+  hideAllMarkers = (): void => {
+    if (!this._map.hasLayer(this.markerLayer)) return;
+
+    this._map.removeLayer(this.markerLayer);
+    this.fire("allvertexhide");
+  };
+
+  showVisibleMarkers = (): void => {
+    if (!this.is_editing) return;
+
+    const northEast = this._map.getBounds().getNorthEast();
+    const southWest = this._map.getBounds().getSouthWest();
+
+    const { visible, hidden } = this.markers.reduce(
+      (obj, marker) => {
+        const { lat, lng } = marker.getLatLng();
+        const is_hidden =
+          lat > northEast.lat ||
+          lng > northEast.lng ||
+          lat < southWest.lat ||
+          lng < southWest.lng;
+
+        return is_hidden
+          ? { ...obj, hidden: [...obj.hidden, marker] }
+          : { ...obj, visible: [...obj.visible, marker] };
+      },
+      { visible: [], hidden: [] }
+    );
+
+    if (visible.length > this.maxMarkers) return this.hideAllMarkers();
+
+    this.showAllMarkers();
+
+    visible.forEach(marker => {
+      if (!this.markerLayer.hasLayer(marker)) this.markerLayer.addLayer(marker);
+    });
+
+    hidden.forEach(marker => {
+      if (this.markerLayer.hasLayer(marker))
+        this.markerLayer.removeLayer(marker);
+    });
+  };
+
+  editor = {
+    disable: () => {
+      this.hideAllMarkers();
+      this.is_editing = false;
+      this.stopDragHinting();
+      this.stopDrawing();
+      this.touchHinter.removeFrom(this._map);
+      this.fire("editordisable");
+    },
+    enable: () => {
+      this.is_editing = true;
+      this.showVisibleMarkers();
+      this.startDragHinting();
+      this.touchHinter.addTo(this._map);
+
+      this.fire("editorenable");
+    },
+    continue: () => {
+      this.is_drawing = true;
+      this.drawing_direction = "forward";
+      this.startDrawing();
+    },
+    prepend: () => {
+      this.is_drawing = true;
+      this.drawing_direction = "backward";
+      this.startDrawing();
+    }
+  };
+
+  moveDragHint = ({ latlng }: LeafletMouseEvent): void => {
+    this.hintMarker.setLatLng(latlng);
+  };
+
+  hideDragHint = (): void => {
+    if (this._map.hasLayer(this.hintMarker))
+      this._map.removeLayer(this.hintMarker);
+  };
+
+  showDragHint = (): void => {
+    this._map.addLayer(this.hintMarker);
+  };
+
+  startDragHinting = (): void => {
+    this.touchHinter.on("mousemove", this.moveDragHint);
+    this.touchHinter.on("mousedown", this.startDragHintMove);
+    this.touchHinter.on("mouseover", this.showDragHint);
+    this.touchHinter.on("mouseout", this.hideDragHint);
+  };
+
+  stopDragHinting = (): void => {
+    this.touchHinter.off("mousemove", this.moveDragHint);
+    this.touchHinter.off("mousedown", this.startDragHintMove);
+    this.touchHinter.off("mouseover", this.showDragHint);
+    this.touchHinter.off("mouseout", this.hideDragHint);
+  };
+
+  startDragHintMove = (event: LeafletMouseEvent): void => {
+    event.originalEvent.stopPropagation();
+    event.originalEvent.preventDefault();
+
+    if (this.is_drawing) {
+      this.stopDrawing();
+      this.is_drawing = true;
+    }
+
+    const prev = this.dragHintFindNearest(event.latlng);
+
+    if (prev < 0) return;
+
+    this.hint_prev_marker = prev;
+
+    this.constrLine.setLatLngs([]).addTo(this._map);
+
+    this._map.dragging.disable();
+
+    this.is_dragging = true;
+
+    this._map.on("mousemove", this.dragHintMove);
+    this._map.on("mouseup", this.dragHintAddMarker);
+    this._map.on("mouseout", this.stopDragHintMove);
+  };
+
+  stopDragHintMove = (): void => {
+    this._map.dragging.enable();
+
+    this.constrLine.removeFrom(this._map);
+
+    this._map.off("mousemove", this.dragHintMove);
+    this._map.off("mouseup", this.dragHintAddMarker);
+    this._map.off("mouseout", this.stopDragHintMove);
+
+    if (this.is_drawing) this.startDrawing();
+
+    setTimeout(() => {
+      this.is_dragging = false;
+    }, 0);
+  };
+
+  dragHintAddMarker = ({ latlng }: LeafletMouseEvent): void => {
+    this.dragHintChangeDistance(this.hint_prev_marker, latlng);
+
+    this.markers.splice(
+      this.hint_prev_marker + 1,
+      0,
+      this.createMarker(latlng)
+    );
+    this.insertLatLng(latlng, this.hint_prev_marker + 1);
+    this.hideDragHint();
+    this.stopDragHintMove();
+  };
+
+  dragHintChangeDistance = (index: number, current: LatLngLiteral): void => {
+    const prev = this.markers[index];
+    const next = this.markers[index + 1];
+
+    const initial_distance = distKm(prev.getLatLng(), next.getLatLng());
+
+    const current_distance =
+      ((prev && distKm(prev.getLatLng(), current)) || 0) +
+      ((next && distKm(next.getLatLng(), current)) || 0);
+
+    this.distance += current_distance - initial_distance;
+
+    this.fire("distancechange", { distance: this.distance });
+  };
+
+  dragHintFindNearest = (latlng: LatLng): any => {
+    const latlngs = this.getLatLngs() as LatLng[];
+
+    const neighbours = latlngs
+      .filter((current, index) => {
+        const next = latlngs[index + 1] as LatLng;
+
+        return next && pointInArea(current, next, latlng);
+      })
+      .map(el => latlngs.indexOf(el))
+      .sort(
+        (a, b) =>
+          distToSegment(latlngs[a], latlngs[a + 1], latlng) -
+          distToSegment(latlngs[b], latlngs[b + 1], latlng)
+      );
+
+    return neighbours.length > 0 ? neighbours[0] : -1;
+  };
+
+  dragHintMove = (event: LeafletMouseEvent): void => {
+    event.originalEvent.stopPropagation();
+    event.originalEvent.preventDefault();
+
+    this.setConstraints([
+      this.markers[this.hint_prev_marker].getLatLng(),
+      event.latlng,
+      this.markers[this.hint_prev_marker + 1].getLatLng()
+    ]);
+  };
+
+  onMarkerDrag = ({ target }: { target: Marker }) => {
+    const coords = new Array(0)
+      .concat(
+        (this.vertex_index > 0 &&
+          this.markers[this.vertex_index - 1].getLatLng()) ||
+          []
+      )
+      .concat(target.getLatLng())
+      .concat(
+        (this.vertex_index < this.markers.length - 1 &&
+          this.markers[this.vertex_index + 1].getLatLng()) ||
+          []
+      );
+
+    this.setConstraints(coords);
+
+    this.fire("vertexdrag", { index: this.vertex_index, vertex: target });
+  };
+
+  onMarkerDragStart = ({ target }: { target: Marker }) => {
+    if (this.is_drawing) {
+      this.stopDrawing();
+      this.is_drawing = true;
+    }
+
+    if (this.is_dragging) this.stopDragHintMove();
+
+    this.vertex_index = this.markers.indexOf(target);
+
+    this.is_dragging = true;
+    this.constrLine.addTo(this._map);
+
+    this.fire("vertexdragstart", { index: this.vertex_index, vertex: target });
+  };
+
+  onMarkerDragEnd = ({ target }: { target: Marker }): void => {
+    const latlngs = this.getLatLngs() as LatLngLiteral[];
+    this.markerDragChangeDistance(
+      this.vertex_index,
+      latlngs[this.vertex_index],
+      target.getLatLng()
+    );
+
+    this.replaceLatlng(target.getLatLng(), this.vertex_index);
+
+    this.is_dragging = false;
+    this.constrLine.removeFrom(this._map);
+
+    this.vertex_index = null;
+
+    if (this.is_drawing) this.startDrawing();
+
+    this.fire("vertexdragend", { index: this.vertex_index, vertex: target });
+  };
+
+  markerDragChangeDistance = (
+    index: number,
+    initial: LatLngLiteral,
+    current: LatLngLiteral
+  ): void => {
+    const prev = index > 0 ? this.markers[index - 1] : null;
+    const next =
+      index <= this.markers.length + 1 ? this.markers[index + 1] : null;
+
+    const initial_distance =
+      ((prev && distKm(prev.getLatLng(), initial)) || 0) +
+      ((next && distKm(next.getLatLng(), initial)) || 0);
+
+    const current_distance =
+      ((prev && distKm(prev.getLatLng(), current)) || 0) +
+      ((next && distKm(next.getLatLng(), current)) || 0);
+
+    this.distance += current_distance - initial_distance;
+
+    this.fire("distancechange", { distance: this.distance });
+  };
+
+  startDrawing = (): void => {
+    this.is_drawing = true;
+    this.setConstraints([]);
+    this.constrLine.addTo(this._map);
+    this._map.on("mousemove", this.onDrawingMove);
+    this._map.on("click", this.onDrawingClick);
+  };
+
+  stopDrawing = (): void => {
+    this.constrLine.removeFrom(this._map);
+    this._map.off("mousemove", this.onDrawingMove);
+    this._map.off("click", this.onDrawingClick);
+    this.is_drawing = false;
+  };
+
+  onDrawingMove = ({ latlng }: LeafletMouseEvent): void => {
+    if (this.markers.length === 0) {
+      this.setConstraints([]);
+      return;
+    }
+
+    if (!this._map.hasLayer(this.constrLine))
+      this._map.addLayer(this.constrLine);
+
+    const marker =
+      this.drawing_direction === "forward"
+        ? this.markers[this.markers.length - 1]
+        : this.markers[0];
+
+    this.setConstraints([latlng, marker.getLatLng()]);
+  };
+
+  onDrawingClick = (event: LeafletMouseEvent): void => {
+    if (this.is_dragging) return;
+
+    const { latlng } = event;
+
+    this.stopDrawing();
+
+    const latlngs = this.getLatLngs() as any[];
+
+    this.drawingChangeDistance(latlng);
+
+    if (this.drawing_direction === "forward") {
+      latlngs.push(latlng);
+      this.markers.push(this.createMarker(latlng));
+    } else {
+      latlngs.unshift(latlng);
+      this.markers.unshift(this.createMarker(latlng));
+    }
+
+    this.setLatLngs(latlngs);
+    this.fire("latlngschange", { latlngs });
+    this.showVisibleMarkers();
+    this.startDrawing();
+  };
+
+  drawingChangeDistance = (latlng: LatLngLiteral): void => {
+    const latlngs = this.getLatLngs() as LatLngLiteral[];
+
+    if (latlngs.length < 1) {
+      this.distance = 0;
+      this.fire("distancechange", { distance: this.distance });
+      return;
+    }
+
+    const point =
+      this.drawing_direction === "forward"
+        ? latlngs[latlngs.length - 1]
+        : latlngs[0];
+
+    this.distance += distKm(point, latlng);
+    this.fire("distancechange", { distance: this.distance });
+  };
+
+  replaceLatlng = (latlng: LatLng, index: number): void => {
+    const latlngs = this.getLatLngs() as LatLngLiteral[];
+    latlngs.splice(index, 1, latlng);
+    this.setLatLngs(latlngs);
+    this.fire("latlngschange", { latlngs });
+  };
+
+  insertLatLng = (latlng, index): void => {
+    const latlngs = this.getLatLngs();
+    latlngs.splice(index, 0, latlng);
+    this.setLatLngs(latlngs);
+    this.fire("latlngschange", { latlngs });
+  };
+
+  setConstraints = (coords: LatLng[]) => {
+    this.constrLine.setLatLngs(coords);
+  };
+
+  dropMarker = ({ target }: LeafletMouseEvent): void => {
+    const index = this.markers.indexOf(target);
+    const latlngs = this.getLatLngs();
+
+    if (typeof index === "undefined" || latlngs.length <= 2) return;
+
+    this.dropMarkerDistanceChange(index);
+    this._map.removeLayer(this.markers[index]);
+    this.markers.splice(index, 1);
+    latlngs.splice(index, 1);
+
+    this.setLatLngs(latlngs);
+    this.fire("latlngschange", { latlngs });
+  };
+
+  dropMarkerDistanceChange = (index: number): void => {
+    const latlngs = this.getLatLngs() as LatLngLiteral[];
+
+    const prev = index > 0 ? latlngs[index - 1] : null;
+    const current = latlngs[index];
+    const next = index <= latlngs.length + 1 ? latlngs[index + 1] : null;
+
+    const initial_distance =
+      ((prev && distKm(prev, current)) || 0) +
+      ((next && distKm(next, current)) || 0);
+
+    const current_distance = (prev && next && distKm(prev, next)) || 0;
+
+    this.distance += current_distance - initial_distance;
+
+    this.fire("distancechange", { distance: this.distance });
+  };
+
+  recalcDistance = () => {
+    const latlngs = this.getLatLngs() as LatLngLiteral[];
+    this.distance = getPolyLength(latlngs);
+
+    this.fire("distancechange", { distance: this.distance });
+  };
+
+  markers: Marker[] = [];
+  maxMarkers: InteractivePolylineOptions["maxMarkers"] = 2;
+  markerLayer: LayerGroup = new LayerGroup();
+
+  constraintsStyle: InteractivePolylineOptions["constraintsStyle"] = {
+    weight: 6,
+    color: "red",
+    dashArray: "10, 12",
+    opacity: 0.5,
+    interactive: false
+  };
+
+  touchHinter: Polyline = new Polyline([], {
+    weight: 24,
+    smoothFactor: 3,
+    className: "touch-hinter-poly"
+  });
+
+  hintMarker: Marker = this.createHintMarker(latLng({ lat: 0, lng: 0 }));
+
+  constrLine: Polyline;
+
+  is_editing: boolean = true;
+  is_dragging: boolean = false;
+  is_drawing: boolean = false;
+
+  drawing_direction: "forward" | "backward" = "forward";
+  vertex_index?: number = null;
+
+  hint_prev_marker: number = null;
+  distance: number = 0;
+}
+
+InteractivePoly.addInitHook(function() {
+  this.once("add", event => {
+    if (event.target instanceof InteractivePoly) {
+      this.map = event.target._map;
+
+      this.map.on("touch", console.log);
+
+      this.markerLayer.addTo(event.target._map);
+      this.hintMarker.addTo(event.target._map);
+      this.constrLine.addTo(event.target._map);
+      this.touchHinter.addTo(event.target._map);
+
+      this.map.on("moveend", this.updateMarkers);
+
+      this.on("latlngschange", this.updateTouchHinter);
+
+      if (window.innerWidth < 768) {
+        this.touchHinter.setStyle({ weight: 32 });
+      }
+    }
+  });
+
+  this.once("remove", event => {
+    if (event.target instanceof InteractivePoly) {
+      this.markerLayer.removeFrom(this._map);
+      this.hintMarker.removeFrom(this._map);
+      this.constrLine.removeFrom(this._map);
+      this.touchHinter.removeFrom(this._map);
+
+      this.map.off("moveend", this.updateMarkers);
+    }
+  });
+});
+
+// export const InteractivePoly = Component;
+/*
+  events:
+  vertexdragstart,
+  vertexdragend,
+  vertexdrag,
+
+  allvertexhide
+  allvertexshow
+
+  editordisable
+  editorenable
+
+  distancechange
+
+  latlngschange
+ */

src/containers/map/Route/index.tsx

@@ -2,12 +2,10 @@ import React, {
   FC,
   useEffect,
   memo,
-  useContext,
   useState,
   useCallback
 } from "react";
 import { IMapRoute, ILatLng } from "../../../redux/map/types";
-import { MapContext } from "$utils/context";
 import { InteractivePoly } from "$modules/InteractivePoly"; 
 import { isMobile } from "$utils/window";
 import { LatLng, Map } from "leaflet";

src/containers/map/Sticker/index.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Map, marker, Marker } from "leaflet";
-import { IStickerDump, Sticker as StickerComponent } from "$modules/Sticker";
+import { IStickerDump } from "$redux/map/types";
 import { STICKERS } from "$constants/stickers";
 import { StickerDesc } from "$components/StickerDesc";
 import classNames from "classnames";

src/containers/map/Stickers/index.tsx

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { IStickerDump } from "$modules/Sticker";
-import { FeatureGroup, Map } from "leaflet";
-import { Sticker } from "$containers/map/Sticker";
-import { mapSetSticker, mapDropSticker } from "$redux/map/actions";
+import * as React from 'react';
+import { IStickerDump } from '$redux/map/types';
+import { FeatureGroup, Map } from 'leaflet';
+import { Sticker } from '$containers/map/Sticker';
+import { mapSetSticker, mapDropSticker } from '$redux/map/actions';
 
 interface IProps {
   stickers: IStickerDump[];

src/redux/map/actions.ts

@@ -1,16 +1,16 @@
-import { MAP_ACTIONS } from "./constants";
-import { IMapReducer } from "./";
-import { IStickerDump } from "$modules/Sticker";
-import { ILatLng } from "./types";
+import { MAP_ACTIONS } from './constants';
+import { IMapReducer } from './';
+import { IStickerDump } from '$redux/map/types';
+import { ILatLng } from './types';
 
 export const mapSet = (map: Partial<IMapReducer>) => ({
   type: MAP_ACTIONS.SET_MAP,
-  map
+  map,
 });
 
 export const mapSetProvider = (provider: IMapReducer['provider']) => ({
   type: MAP_ACTIONS.SET_PROVIDER,
-  provider
+  provider,
 });
 
 export const mapSetRoute = (route: IMapReducer['route']) => ({

src/redux/map/index.ts

@@ -2,7 +2,7 @@ import { createReducer } from 'reduxsauce';
 import { MAP_HANDLERS } from './handlers';
 import { DEFAULT_PROVIDER } from '$constants/providers';
 import { IMapRoute } from './types';
-import { IStickerDump } from '$modules/Sticker';
+import { IStickerDump } from '$redux/map/types';
 import { DEFAULT_LOGO } from '$constants/logos';
 
 export interface IMapReducer {

src/redux/map/types.ts

@@ -6,3 +6,12 @@ export type ILatLng = {
 }
 
 export type IMapRoute = ILatLng[];
+
+
+export interface IStickerDump {
+  latlng: ILatLng,
+  set: string,
+  sticker: string,
+  angle?: number,
+  text?: string,
+}

src/redux/user/index.ts

@@ -6,7 +6,7 @@ import { DEFAULT_PROVIDER, PROVIDERS } from '$constants/providers';
 import { DIALOGS, IDialogs, TABS } from '$constants/dialogs';
 import { IStickers } from "$constants/stickers";
 import { IRoutePoint } from '$utils/gpx';
-import { IStickerDump } from '$modules/Sticker';
+import { IStickerDump } from '$redux/map/types';
 import { USER_HANDLERS } from './handlers';
 
 export interface IRoute {

src/utils/api.ts

@@ -1,17 +1,15 @@
-import axios, { AxiosPromise } from "axios/index";
-import { API } from "$constants/api";
-import { IRootState, IRouteListItem, IRoute } from "$redux/user";
-import { IUser } from "$constants/auth";
-import { ILatLng } from "$modules/Stickers";
-import { IStickerDump } from "$modules/Sticker";
-import { CLIENT } from "$config/frontend";
-import { LatLngLiteral } from "leaflet";
+import axios from 'axios/index';
+import { API } from '$constants/api';
+import { IRootState, IRouteListItem, IRoute } from '$redux/user';
+import { IUser } from '$constants/auth';
+import { CLIENT } from '$config/frontend';
+import { LatLngLiteral } from 'leaflet';
 import {
   resultMiddleware,
   errorMiddleware,
   IResultWithStatus,
-  configWithToken
-} from "./middleware";
+  configWithToken,
+} from './middleware';
 
 const arrayToObject = (array: any[], key: string): {} =>
   array.reduce((obj, el) => ({ ...obj, [el[key]]: el }), {});
@@ -21,26 +19,26 @@ interface IGetRouteList {
   max: number;
   tab: string;
   search: string;
-  step: IRootState["routes"]["step"];
-  shift: IRootState["routes"]["step"];
-  token: IRootState["user"]["token"];
+  step: IRootState['routes']['step'];
+  shift: IRootState['routes']['step'];
+  token: IRootState['user']['token'];
 }
 
 interface IGetRouteListResult {
-  min: IRootState["routes"]["filter"]["min"];
-  max: IRootState["routes"]["filter"]["max"];
-  limit: IRootState["routes"]["limit"];
-  step: IRootState["routes"]["step"];
-  shift: IRootState["routes"]["shift"];
-  list: IRootState["routes"]["list"];
+  min: IRootState['routes']['filter']['min'];
+  max: IRootState['routes']['filter']['max'];
+  limit: IRootState['routes']['limit'];
+  step: IRootState['routes']['step'];
+  shift: IRootState['routes']['shift'];
+  list: IRootState['routes']['list'];
 }
 
 export const checkUserToken = ({
   id,
-  token
+  token,
 }: {
-  id: IRootState["user"]["id"];
-  token: IRootState["user"]["token"];
+  id: IRootState['user']['id'];
+  token: IRootState['user']['token'];
 }): Promise<IResultWithStatus<{
   user: IUser;
   random_url: string;
@@ -48,7 +46,7 @@ export const checkUserToken = ({
 }>> =>
   axios
     .get(API.CHECK_TOKEN, {
-      params: { id, token }
+      params: { id, token },
     })
     .then(resultMiddleware)
     .catch(errorMiddleware);
@@ -63,9 +61,9 @@ export const getGuestToken = (): Promise<IResultWithStatus<{
     .catch(errorMiddleware);
 
 export const getStoredMap = ({
-  name
+  name,
 }: {
-  name: IRootState["address"];
+  name: IRootState['address'];
 }): Promise<IResultWithStatus<{
   route: IRoute;
   error?: string;
@@ -73,7 +71,7 @@ export const getStoredMap = ({
 }>> =>
   axios
     .get(API.GET_MAP, {
-      params: { name }
+      params: { name },
     })
     .then(resultMiddleware)
     .catch(errorMiddleware);
@@ -89,7 +87,7 @@ export const postMap = ({
   provider,
   is_public,
   description,
-  token
+  token,
 }: Partial<IRoute> & {
   force: boolean;
   token: string;
@@ -111,9 +109,9 @@ export const postMap = ({
           distance,
           provider,
           is_public,
-          description
+          description,
         },
-        force
+        force,
       },
       configWithToken(token)
     )
@@ -122,21 +120,18 @@ export const postMap = ({
 
 export const checkIframeToken = ({
   viewer_id,
-  auth_key
+  auth_key,
 }: {
   viewer_id: string;
   auth_key: string;
 }) =>
   axios
     .get(API.IFRAME_LOGIN_VK, {
-      params: { viewer_id, auth_key }
+      params: { viewer_id, auth_key },
     })
-    .then(
-      result => result && result.data && result.data.success && result.data.user
-    )
+    .then(result => result && result.data && result.data.success && result.data.user)
     .catch(() => false);
 
-    
 export const getRouteList = ({
   search,
   min,
@@ -144,7 +139,7 @@ export const getRouteList = ({
   tab,
   token,
   step,
-  shift
+  shift,
 }: IGetRouteList): Promise<IResultWithStatus<{
   routes: IRoute[];
   limits: {
@@ -169,8 +164,8 @@ export const getRouteList = ({
           max,
           token,
           step,
-          shift
-        }
+          shift,
+        },
       })
     )
     .then(resultMiddleware)
@@ -184,13 +179,7 @@ export const checkOSRMService = (bounds: LatLngLiteral[]): Promise<boolean> =>
     .then(() => true)
     .catch(() => false);
 
-export const dropRoute = ({
-  address,
-  token
-}: {
-  address: string;
-  token: string;
-}): Promise<any> =>
+export const dropRoute = ({ address, token }: { address: string; token: string }): Promise<any> =>
   axios
     .delete(API.DROP_ROUTE, configWithToken(token, { data: { address } }))
     .then(resultMiddleware)
@@ -200,7 +189,7 @@ export const modifyRoute = ({
   address,
   token,
   title,
-  is_public
+  is_public,
 }: {
   address: string;
   token: string;
@@ -210,18 +199,14 @@ export const modifyRoute = ({
   route: IRoute;
 }>> =>
   axios
-    .patch(
-      API.MODIFY_ROUTE,
-      { address, token, is_public, title },
-      configWithToken(token)
-    )
+    .patch(API.MODIFY_ROUTE, { address, token, is_public, title }, configWithToken(token))
     .then(resultMiddleware)
     .catch(errorMiddleware);
 
 export const sendRouteStarred = ({
   token,
   address,
-  is_published
+  is_published,
 }: {
   token: string;
   address: string;

src/utils/renderer.ts

@@ -3,8 +3,8 @@ import { COLORS, CLIENT } from '$config/frontend';
 import * as saveAs from 'file-saver';
 import { replaceProviderUrl } from '$constants/providers';
 import { STICKERS } from '$constants/stickers';
-import { ILatLng } from '$modules/Stickers';
-import { IStickerDump } from '$modules/Sticker';
+import { ILatLng } from '$redux/map/types';
+import { IStickerDump } from '$redux/map/types';
 import { IRootState } from '$redux/user';
 import {
   angleBetweenPoints,
@@ -434,8 +434,8 @@ const composeStickerImage = async (
   x: number,
   y: number,
   angle: number,
-  set: IRootState['activeSticker']['set'],
-  sticker: IRootState['activeSticker']['sticker']
+  set: string,
+  sticker: string
 ): Promise<void> => {
   const rad = 56;
   const tX = Math.cos(angle + Math.PI) * rad - 30 + (x - 8);

src/utils/simplify.ts

@@ -1,5 +1,5 @@
 import { Map, LineUtil } from 'leaflet';
-import { ILatLng } from "$modules/Stickers";
+import { ILatLng } from "$redux/map/types";
 
 export const simplify = ({ map, latlngs }: { map: Map, latlngs: ILatLng[] }): ILatLng[] => {
   const points = [];