From 0c321f2bb300754966b6d93eacde10540159e152 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Wed, 8 Jan 2020 12:07:36 +0700 Subject: [PATCH] removed all modules --- src/{modules => _modules}/Arrows.ts | 0 src/{modules => _modules}/Editor.ts | 0 src/_modules/InteractivePoly.ts | 608 ++++++++++++++++++++++++++ src/{modules => _modules}/KmMarks.ts | 0 src/{modules => _modules}/Map.ts | 0 src/{modules => _modules}/Poly.ts | 0 src/{modules => _modules}/Router.ts | 0 src/{modules => _modules}/Sticker.tsx | 0 src/{modules => _modules}/Stickers.ts | 0 src/containers/map/Route/index.tsx | 4 +- src/containers/map/Sticker/index.tsx | 2 +- src/containers/map/Stickers/index.tsx | 10 +- src/modules/InteractivePoly.ts | 2 +- src/redux/map/actions.ts | 14 +- src/redux/map/index.ts | 2 +- src/redux/map/types.ts | 11 +- src/redux/types.ts | 0 src/redux/user/index.ts | 2 +- src/utils/api.ts | 89 ++-- src/utils/renderer.ts | 8 +- src/utils/simplify.ts | 2 +- 21 files changed, 677 insertions(+), 77 deletions(-) rename src/{modules => _modules}/Arrows.ts (100%) rename src/{modules => _modules}/Editor.ts (100%) create mode 100644 src/_modules/InteractivePoly.ts rename src/{modules => _modules}/KmMarks.ts (100%) rename src/{modules => _modules}/Map.ts (100%) rename src/{modules => _modules}/Poly.ts (100%) rename src/{modules => _modules}/Router.ts (100%) rename src/{modules => _modules}/Sticker.tsx (100%) rename src/{modules => _modules}/Stickers.ts (100%) create mode 100644 src/redux/types.ts diff --git a/src/modules/Arrows.ts b/src/_modules/Arrows.ts similarity index 100% rename from src/modules/Arrows.ts rename to src/_modules/Arrows.ts diff --git a/src/modules/Editor.ts b/src/_modules/Editor.ts similarity index 100% rename from src/modules/Editor.ts rename to src/_modules/Editor.ts diff --git a/src/_modules/InteractivePoly.ts b/src/_modules/InteractivePoly.ts new file mode 100644 index 0000000..33822a9 --- /dev/null +++ b/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 + */ diff --git a/src/modules/KmMarks.ts b/src/_modules/KmMarks.ts similarity index 100% rename from src/modules/KmMarks.ts rename to src/_modules/KmMarks.ts diff --git a/src/modules/Map.ts b/src/_modules/Map.ts similarity index 100% rename from src/modules/Map.ts rename to src/_modules/Map.ts diff --git a/src/modules/Poly.ts b/src/_modules/Poly.ts similarity index 100% rename from src/modules/Poly.ts rename to src/_modules/Poly.ts diff --git a/src/modules/Router.ts b/src/_modules/Router.ts similarity index 100% rename from src/modules/Router.ts rename to src/_modules/Router.ts diff --git a/src/modules/Sticker.tsx b/src/_modules/Sticker.tsx similarity index 100% rename from src/modules/Sticker.tsx rename to src/_modules/Sticker.tsx diff --git a/src/modules/Stickers.ts b/src/_modules/Stickers.ts similarity index 100% rename from src/modules/Stickers.ts rename to src/_modules/Stickers.ts diff --git a/src/containers/map/Route/index.tsx b/src/containers/map/Route/index.tsx index 48e3c2c..2660916 100644 --- a/src/containers/map/Route/index.tsx +++ b/src/containers/map/Route/index.tsx @@ -2,13 +2,11 @@ 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 { InteractivePoly } from "$modules/InteractivePoly"; import { isMobile } from "$utils/window"; import { LatLng, Map } from "leaflet"; diff --git a/src/containers/map/Sticker/index.tsx b/src/containers/map/Sticker/index.tsx index 2633e2b..6bea62e 100644 --- a/src/containers/map/Sticker/index.tsx +++ b/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"; diff --git a/src/containers/map/Stickers/index.tsx b/src/containers/map/Stickers/index.tsx index e486300..c832b6f 100644 --- a/src/containers/map/Stickers/index.tsx +++ b/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[]; diff --git a/src/modules/InteractivePoly.ts b/src/modules/InteractivePoly.ts index 33822a9..c0e15a9 100644 --- a/src/modules/InteractivePoly.ts +++ b/src/modules/InteractivePoly.ts @@ -16,7 +16,7 @@ import { LeafletMouseEvent, latLng, LatLngLiteral -} from "leaflet"; +} from "leaflet"; import { distKm, distToSegment, getPolyLength, pointInArea } from "$utils/geom"; diff --git a/src/redux/map/actions.ts b/src/redux/map/actions.ts index df2ba18..e091219 100644 --- a/src/redux/map/actions.ts +++ b/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) => ({ 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']) => ({ @@ -65,6 +65,6 @@ export const mapSetPublic = (is_public: IMapReducer['is_public']) => ({ }); export const mapSetLogo = (logo: IMapReducer['logo']) => ({ - type: MAP_ACTIONS.SET_LOGO, + type: MAP_ACTIONS.SET_LOGO, logo, }); diff --git a/src/redux/map/index.ts b/src/redux/map/index.ts index e6cb1f1..47a64f8 100644 --- a/src/redux/map/index.ts +++ b/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 { diff --git a/src/redux/map/types.ts b/src/redux/map/types.ts index 3d59e9f..d17a512 100644 --- a/src/redux/map/types.ts +++ b/src/redux/map/types.ts @@ -5,4 +5,13 @@ export type ILatLng = { lng: number, } -export type IMapRoute = ILatLng[]; \ No newline at end of file +export type IMapRoute = ILatLng[]; + + +export interface IStickerDump { + latlng: ILatLng, + set: string, + sticker: string, + angle?: number, + text?: string, +} diff --git a/src/redux/types.ts b/src/redux/types.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/redux/user/index.ts b/src/redux/user/index.ts index 1bc464f..8017093 100644 --- a/src/redux/user/index.ts +++ b/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 { diff --git a/src/utils/api.ts b/src/utils/api.ts index 9743aa0..cf9142b 100644 --- a/src/utils/api.ts +++ b/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> => axios .get(API.CHECK_TOKEN, { - params: { id, token } + params: { id, token }, }) .then(resultMiddleware) .catch(errorMiddleware); @@ -63,9 +61,9 @@ export const getGuestToken = (): Promise> => 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 & { 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 => .then(() => true) .catch(() => false); -export const dropRoute = ({ - address, - token -}: { - address: string; - token: string; -}): Promise => +export const dropRoute = ({ address, token }: { address: string; token: string }): Promise => 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; diff --git a/src/utils/renderer.ts b/src/utils/renderer.ts index aa3ad45..784f6bb 100644 --- a/src/utils/renderer.ts +++ b/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 => { const rad = 56; const tX = Math.cos(angle + Math.PI) * rad - 30 + (x - 8); diff --git a/src/utils/simplify.ts b/src/utils/simplify.ts index d9ad83d..19f60f0 100644 --- a/src/utils/simplify.ts +++ b/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 = [];