From 8adf64acb9687af149740741c7784da714cdf102 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Fri, 10 Jan 2020 09:21:37 +0700 Subject: [PATCH] cleanup --- src/_modules/InteractivePoly.ts | 2 - src/containers/map/Map/index.tsx | 7 +- src/containers/map/Route/index.tsx | 4 +- src/containers/map/Sticker/index.tsx | 8 +- src/redux/user/sagas.ts | 251 +----------------- .../InteractivePoly.ts => utils/polyline.ts} | 177 ++++++------ 6 files changed, 94 insertions(+), 355 deletions(-) rename src/{modules/InteractivePoly.ts => utils/polyline.ts} (74%) diff --git a/src/_modules/InteractivePoly.ts b/src/_modules/InteractivePoly.ts index 982cbb7..632d03e 100644 --- a/src/_modules/InteractivePoly.ts +++ b/src/_modules/InteractivePoly.ts @@ -560,8 +560,6 @@ InteractivePoly.addInitHook(function() { 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); diff --git a/src/containers/map/Map/index.tsx b/src/containers/map/Map/index.tsx index fbb3897..be56cc9 100644 --- a/src/containers/map/Map/index.tsx +++ b/src/containers/map/Map/index.tsx @@ -34,12 +34,10 @@ type IProps = React.HTMLAttributes & const MapUnconnected: React.FC = ({ provider, - route, stickers, editing, mapClicked, - mapSetRoute, mapSetSticker, mapDropSticker, }) => { @@ -63,7 +61,7 @@ const MapUnconnected: React.FC = ({ return createPortal(
- + = ({ mapDropSticker={mapDropSticker} is_editing={editing} /> + + +
, document.getElementById('canvas') diff --git a/src/containers/map/Route/index.tsx b/src/containers/map/Route/index.tsx index 8b60d84..c3a4fcc 100644 --- a/src/containers/map/Route/index.tsx +++ b/src/containers/map/Route/index.tsx @@ -1,6 +1,6 @@ import React, { FC, useEffect, memo, useState, useCallback } from 'react'; import { IMapRoute } from '../../../redux/map/types'; -import { InteractivePoly } from '~/modules/InteractivePoly'; +import { InteractivePoly } from '~/utils/polyline'; import { isMobile } from '~/utils/window'; import { LatLng, Map, LeafletEvent } from 'leaflet'; import { selectEditor } from '~/redux/editor/selectors'; @@ -45,7 +45,7 @@ const RouteUnconnected: FC = memo( const interactive = new InteractivePoly([], { color: 'url(#activePathGradient)', weight: 6, - maxMarkers: isMobile() ? 50 : 200, + maxMarkers: isMobile() ? 50 : 150, smoothFactor: 3, }) .addTo(MainMap) diff --git a/src/containers/map/Sticker/index.tsx b/src/containers/map/Sticker/index.tsx index 6fc4599..b9d74e9 100644 --- a/src/containers/map/Sticker/index.tsx +++ b/src/containers/map/Sticker/index.tsx @@ -11,6 +11,7 @@ import { MapContainer } from '~/constants/map'; interface IProps { map: MapContainer; sticker: IStickerDump; + onDragStart?: () => void; index: number; is_editing: boolean; @@ -53,7 +54,12 @@ const Sticker: React.FC = ({ setDragging(true); }, [setDragging, layer, map]); - const onDragStop = React.useCallback(() => { + const onDragStop = React.useCallback(event => { + event.stopPropagation(); + event.preventDefault(); + + if (!layer) return; + setDragging(false); onChange({ ...sticker, diff --git a/src/redux/user/sagas.ts b/src/redux/user/sagas.ts index 5b067ef..2d8148c 100644 --- a/src/redux/user/sagas.ts +++ b/src/redux/user/sagas.ts @@ -50,19 +50,14 @@ import { import { USER_ACTIONS } from '~/redux/user/constants'; import { DEFAULT_USER } from '~/constants/auth'; -import { DIALOGS, TABS } from '~/constants/dialogs'; +import { DIALOGS } from '~/constants/dialogs'; import * as ActionCreators from '~/redux/user/actions'; import { Unwrap } from '~/utils/middleware'; -import { IState } from '~/redux/store'; import { selectUser, selectUserUser } from './selectors'; -import { mapInitSaga, loadMapSaga, replaceAddressIfItsBusy } from '~/redux/map/sagas'; +import { mapInitSaga } from '~/redux/map/sagas'; import { editorSetDialog, editorSetDialogActive } from '../editor/actions'; import { selectEditor } from '../editor/selectors'; -import { EDITOR_ACTIONS } from '../editor/constants'; - -// const getUser = (state: IState) => state.user.user; -// const selectUser = (state: IState) => state.user; function* generateGuestSaga() { const { @@ -74,36 +69,6 @@ function* generateGuestSaga() { return { ...user, random_url }; } -// function* stopEditingSaga() { -// const { changed, editing, mode, address_origin } = yield select(selectUser); -// const { path } = getUrlData(); - -// if (!editing) return; -// if (changed && mode !== MODES.CONFIRM_CANCEL) { -// yield put(setMode(MODES.CONFIRM_CANCEL)); -// return; -// } - -// yield put(setMode(MODES.NONE)); -// yield put(setChanged(false)); - -// yield pushPath(`/${address_origin || path}/`); -// } - -// function* checkOSRMServiceSaga() { -// const routing = yield call(checkOSRMService, [new LatLng(1,1), new LatLng(2,2)]); - -// yield put(setFeature({ routing })); -// } - -// export function* setReadySaga() { -// yield put(setReady(true)); -// hideLoader(); - -// yield call(checkOSRMServiceSaga); -// yield put(searchSetTab(TABS.MY)); -// } - function* authCheckSaga({ key }: RehydrateAction) { if (key !== 'user') return; @@ -155,158 +120,6 @@ function* authCheckSaga({ key }: RehydrateAction) { return yield call(mapInitSaga); } -// function* setModeSaga({ mode }: ReturnType) { - // return yield editor.changeMode(mode); - // console.log('change', mode); -// } - -// function* setLogoSaga({ logo }: { type: string; logo: string }) { -// const { mode } = yield select(selectUser); -// editor.logo = logo; - -// yield put(setChanged(true)); - -// if (mode === MODES.LOGO) { -// yield put(setMode(MODES.NONE)); -// } -// } - -// function* routerCancelSaga() { -// yield call(editor.router.cancelDrawing); -// yield put(setMode(MODES.NONE)); - -// return true; -// } - -// function* routerSubmitSaga() { -// yield call(editor.router.submitDrawing); -// yield put(setMode(MODES.NONE)); - -// return true; -// } - -// function* getRenderData() { -// yield put(setRenderer({ info: 'Загрузка тайлов', progress: 0.1 })); - -// const { route, stickers, provider }: ReturnType = yield select(selectMap); - -// const canvas = document.getElementById('renderer'); -// canvas.width = window.innerWidth; -// canvas.height = window.innerHeight; -// const ctx = canvas.getContext('2d'); - -// const geometry = getTilePlacement(); -// const points = getPolyPlacement(route); -// const sticker_points = getStickersPlacement(stickers); -// // TODO: get distance: -// const distance = 0; -// // const distance = editor.poly.poly.distance; - -// ctx.clearRect(0, 0, canvas.width, canvas.height); - -// const images = yield fetchImages(ctx, geometry, provider); - -// yield put(setRenderer({ info: 'Отрисовка', progress: 0.5 })); - -// yield composeImages({ geometry, images, ctx }); -// yield composePoly({ points, ctx }); -// yield composeArrows({ points, ctx }); -// yield composeDistMark({ ctx, points, distance }); -// yield composeStickers({ stickers: sticker_points, ctx }); - -// yield put(setRenderer({ info: 'Готово', progress: 1 })); - -// return yield canvas.toDataURL('image/jpeg'); -// } - -// function* takeAShotSaga() { -// const worker = call(getRenderData); - -// const { result, timeout } = yield race({ -// result: worker, -// timeout: delay(500), -// }); - -// if (timeout) yield put(setMode(MODES.SHOT_PREFETCH)); - -// const data = yield result || worker; - -// yield put(setMode(MODES.NONE)); -// yield put( -// setRenderer({ -// data, -// renderer_active: true, -// width: window.innerWidth, -// height: window.innerHeight, -// }) -// ); -// } - -// function* getCropData({ x, y, width, height }) { -// const { -// logo, -// renderer: { data }, -// } = yield select(selectUser); -// const canvas = document.getElementById('renderer'); -// canvas.width = width; -// canvas.height = height; -// const ctx = canvas.getContext('2d'); -// const image = yield imageFetcher(data); - -// ctx.drawImage(image, -x, -y); - -// if (logo && LOGOS[logo][1]) { -// const logoImage = yield imageFetcher(LOGOS[logo][1]); -// ctx.drawImage(logoImage, width - logoImage.width, height - logoImage.height); -// } - -// return yield canvas.toDataURL('image/jpeg'); -// } - -// function* cropAShotSaga(params) { -// const { title, address } = yield select(selectUser); -// yield call(getCropData, params); -// const canvas = document.getElementById('renderer') as HTMLCanvasElement; - -// downloadCanvas(canvas, (title || address).replace(/\./gi, ' ')); - -// return yield put(hideRenderer()); -// } - -// function* locationChangeSaga({ location }: ReturnType) { -// const { -// address, -// ready, -// user: { id, random_url }, -// } = yield select(selectUser); - -// const { owner }: ReturnType = yield select(selectMap) - -// if (!ready) return; - -// const { path, mode } = getUrlData(location); - -// if (address !== path) { -// const map = yield call(loadMapSaga, path); - -// if (map && map.route && map.route.owner && mode === 'edit' && map.route.owner !== id) { -// return yield call(replaceAddressIfItsBusy, map.random_url, map.address); -// } -// } else if (mode === 'edit' && owner.id !== id) { -// return yield call(replaceAddressIfItsBusy, random_url, address); -// } else { -// yield put(setAddressOrigin('')); -// } - -// if (mode !== 'edit') { -// yield put(setEditing(false)); -// // editor.stopEditing(); -// } else { -// yield put(setEditing(true)); -// // editor.startEditing(); -// } -// } - function* gotVkUserSaga({ user: u }: ReturnType) { const { data: { user, random_url }, @@ -315,38 +128,6 @@ function* gotVkUserSaga({ user: u }: ReturnType yield put(setUser({ ...user, random_url })); } -// function* keyPressedSaga({ key, target }: ReturnType): any { -// if (target === 'INPUT' || target === 'TEXTAREA') { -// return; -// } - -// if (key === 'Escape') { -// const { -// dialog_active, -// mode, -// renderer: { renderer_active }, -// } = yield select(selectUser); - -// if (renderer_active) return yield put(hideRenderer()); -// if (dialog_active) return yield put(setDialogActive(false)); -// if (mode !== MODES.NONE) return yield put(setMode(MODES.NONE)); -// } else if (key === 'Delete') { -// const { -// user: { editing }, -// } = yield select(); - -// if (!editing) return; - -// const { mode } = yield select(selectUser); - -// if (mode === MODES.TRASH) { -// yield put(clearAll()); -// } else { -// yield put(setMode(MODES.TRASH)); -// } -// } -// } - function* searchGetRoutes() { const { token }: ReturnType = yield select(selectUserUser); @@ -425,7 +206,6 @@ function* openMapDialogSaga({ tab }: ReturnType = yield select(selectMap); -// const { title, address } = yield select(selectUser); - -// if (!route || route.length <= 0) return; - -// const track = getGPXString({ route, stickers, title: title || address }); - -// return downloadGPXTrack({ track, title }); -// } - function* mapsLoadMoreSaga() { const { routes: { limit, list, shift, step, loading, filter }, @@ -596,27 +365,11 @@ function* toggleRouteStarredSaga({ } export function* userSaga() { - // yield takeEvery(USER_ACTIONS.STOP_EDITING, stopEditingSaga); - // yield takeLatest(USER_ACTIONS.TAKE_A_SHOT, takeAShotSaga); - // yield takeLatest(USER_ACTIONS.CROP_A_SHOT, cropAShotSaga); - // yield takeLatest(USER_ACTIONS.LOCATION_CHANGED, locationChangeSaga); - // yield takeLatest(USER_ACTIONS.KEY_PRESSED, keyPressedSaga); - // yield takeLatest(USER_ACTIONS.GET_GPX_TRACK, getGPXTrackSaga); - yield takeLatest(REHYDRATE, authCheckSaga); yield takeEvery(USER_ACTIONS.USER_LOGOUT, userLogoutSaga); - - // yield takeEvery(USER_ACTIONS.ROUTER_CANCEL, routerCancelSaga); - // yield takeEvery(USER_ACTIONS.ROUTER_SUBMIT, routerSubmitSaga); - - - // yield takeEvery(USER_ACTIONS.CHANGE_PROVIDER, changeProviderSaga); - yield takeLatest(USER_ACTIONS.GOT_VK_USER, gotVkUserSaga); - // yield takeLatest(USER_ACTIONS.SET_TITLE, setTitleSaga); - yield takeLatest( [USER_ACTIONS.SEARCH_SET_TITLE, USER_ACTIONS.SEARCH_SET_DISTANCE], searchSetSaga diff --git a/src/modules/InteractivePoly.ts b/src/utils/polyline.ts similarity index 74% rename from src/modules/InteractivePoly.ts rename to src/utils/polyline.ts index 7f55bf2..7c8c23c 100644 --- a/src/modules/InteractivePoly.ts +++ b/src/utils/polyline.ts @@ -15,10 +15,10 @@ import { LatLng, LeafletMouseEvent, latLng, - LatLngLiteral -} from "leaflet"; + LatLngLiteral, +} from 'leaflet'; -import { distKm, distToSegment, getPolyLength, pointInArea } from "~/utils/geom"; +import { distKm, distToSegment, getPolyLength, pointInArea } from '~/utils/geom'; interface InteractivePolylineOptions extends PolylineOptions { maxMarkers?: number; @@ -36,7 +36,7 @@ export class InteractivePoly extends Polyline { this.constraintsStyle = { ...this.constraintsStyle, - ...options.constraintsStyle + ...options.constraintsStyle, }; this.maxMarkers = options.maxMarkers || this.maxMarkers; @@ -56,7 +56,7 @@ export class InteractivePoly extends Polyline { this.touchHinter.setLatLngs(latlngs); if (emitEvent) { - this.fire("latlngschange", { latlngs }); + this.fire('latlngschange', { latlngs }); } }; @@ -64,25 +64,25 @@ export class InteractivePoly extends Polyline { marker(latlng, { draggable: false, icon: divIcon({ - className: "leaflet-vertex-drag-helper", + className: 'leaflet-vertex-drag-helper', iconSize: [11, 11], - iconAnchor: [6, 6] - }) + iconAnchor: [6, 6], + }), }); createMarker = (latlng: LatLng): Marker => marker(latlng, { draggable: true, icon: divIcon({ - className: "leaflet-vertex-icon", + className: 'leaflet-vertex-icon', iconSize: [11, 11], - iconAnchor: [6, 6] - }) + iconAnchor: [6, 6], + }), }) - .on("contextmenu", this.dropMarker) - .on("drag", this.onMarkerDrag) - .on("dragstart", this.onMarkerDragStart) - .on("dragend", this.onMarkerDragEnd) + .on('contextmenu', this.dropMarker) + .on('drag', this.onMarkerDrag) + .on('dragstart', this.onMarkerDragStart) + .on('dragend', this.onMarkerDragEnd) .addTo(this.markerLayer); recreateMarkers = () => { @@ -110,14 +110,14 @@ export class InteractivePoly extends Polyline { if (this._map.hasLayer(this.markerLayer)) return; this._map.addLayer(this.markerLayer); - this.fire("allvertexshow"); + this.fire('allvertexshow'); }; hideAllMarkers = (): void => { if (!this._map.hasLayer(this.markerLayer)) return; this._map.removeLayer(this.markerLayer); - this.fire("allvertexhide"); + this.fire('allvertexhide'); }; showVisibleMarkers = (): void => { @@ -130,10 +130,7 @@ export class InteractivePoly extends Polyline { (obj, marker) => { const { lat, lng } = marker.getLatLng(); const is_hidden = - lat > northEast.lat || - lng > northEast.lng || - lat < southWest.lat || - lng < southWest.lng; + lat > northEast.lat || lng > northEast.lng || lat < southWest.lat || lng < southWest.lng; return is_hidden ? { ...obj, hidden: [...obj.hidden, marker] } @@ -151,8 +148,7 @@ export class InteractivePoly extends Polyline { }); hidden.forEach(marker => { - if (this.markerLayer.hasLayer(marker)) - this.markerLayer.removeLayer(marker); + if (this.markerLayer.hasLayer(marker)) this.markerLayer.removeLayer(marker); }); }; @@ -163,7 +159,7 @@ export class InteractivePoly extends Polyline { this.stopDragHinting(); this.stopDrawing(); this.touchHinter.removeFrom(this._map); - this.fire("editordisable"); + this.fire('editordisable'); }, enable: () => { this.is_editing = true; @@ -171,21 +167,21 @@ export class InteractivePoly extends Polyline { this.startDragHinting(); this.touchHinter.addTo(this._map); - this.fire("editorenable"); + this.fire('editorenable'); }, continue: () => { this.is_drawing = true; - this.drawing_direction = "forward"; + this.drawing_direction = 'forward'; this.startDrawing(); }, prepend: () => { this.is_drawing = true; - this.drawing_direction = "backward"; + this.drawing_direction = 'backward'; this.startDrawing(); }, stop: () => { this.stopDrawing(); - } + }, }; moveDragHint = ({ latlng }: LeafletMouseEvent): void => { @@ -193,8 +189,7 @@ export class InteractivePoly extends Polyline { }; hideDragHint = (): void => { - if (this._map.hasLayer(this.hintMarker)) - this._map.removeLayer(this.hintMarker); + if (this._map.hasLayer(this.hintMarker)) this._map.removeLayer(this.hintMarker); }; showDragHint = (): void => { @@ -202,17 +197,17 @@ export class InteractivePoly extends Polyline { }; 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); + 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); + 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 => { @@ -236,9 +231,9 @@ export class InteractivePoly extends Polyline { this.is_dragging = true; - this._map.on("mousemove", this.dragHintMove); - this._map.on("mouseup", this.dragHintAddMarker); - this._map.on("mouseout", this.stopDragHintMove); + this._map.on('mousemove', this.dragHintMove); + this._map.on('mouseup', this.dragHintAddMarker); + this._map.on('mouseout', this.stopDragHintMove); this.fire('vertexaddstart'); }; @@ -248,9 +243,9 @@ export class InteractivePoly extends Polyline { this.constrLine.removeFrom(this._map); - this._map.off("mousemove", this.dragHintMove); - this._map.off("mouseup", this.dragHintAddMarker); - this._map.off("mouseout", this.stopDragHintMove); + this._map.off('mousemove', this.dragHintMove); + this._map.off('mouseup', this.dragHintAddMarker); + this._map.off('mouseout', this.stopDragHintMove); if (this.is_drawing) this.startDrawing(); @@ -263,11 +258,7 @@ export class InteractivePoly extends Polyline { dragHintAddMarker = ({ latlng }: LeafletMouseEvent): void => { this.dragHintChangeDistance(this.hint_prev_marker, latlng); - this.markers.splice( - this.hint_prev_marker + 1, - 0, - this.createMarker(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(); @@ -285,7 +276,7 @@ export class InteractivePoly extends Polyline { this.distance += current_distance - initial_distance; - this.fire("distancechange", { distance: this.distance }); + this.fire('distancechange', { distance: this.distance }); }; dragHintFindNearest = (latlng: LatLng): any => { @@ -314,17 +305,13 @@ export class InteractivePoly extends Polyline { this.setConstraints([ this.markers[this.hint_prev_marker].getLatLng(), event.latlng, - this.markers[this.hint_prev_marker + 1].getLatLng() + 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((this.vertex_index > 0 && this.markers[this.vertex_index - 1].getLatLng()) || []) .concat(target.getLatLng()) .concat( (this.vertex_index < this.markers.length - 1 && @@ -334,7 +321,7 @@ export class InteractivePoly extends Polyline { this.setConstraints(coords); - this.fire("vertexdrag", { index: this.vertex_index, vertex: target }); + this.fire('vertexdrag', { index: this.vertex_index, vertex: target }); }; onMarkerDragStart = ({ target }: { target: Marker }) => { @@ -350,7 +337,7 @@ export class InteractivePoly extends Polyline { this.is_dragging = true; this.constrLine.addTo(this._map); - this.fire("vertexdragstart", { index: this.vertex_index, vertex: target }); + this.fire('vertexdragstart', { index: this.vertex_index, vertex: target }); }; onMarkerDragEnd = ({ target }: { target: Marker }): void => { @@ -370,7 +357,7 @@ export class InteractivePoly extends Polyline { if (this.is_drawing) this.startDrawing(); - this.fire("vertexdragend", { index: this.vertex_index, vertex: target }); + this.fire('vertexdragend', { index: this.vertex_index, vertex: target }); }; markerDragChangeDistance = ( @@ -379,8 +366,7 @@ export class InteractivePoly extends Polyline { 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 next = index <= this.markers.length + 1 ? this.markers[index + 1] : null; const initial_distance = ((prev && distKm(prev.getLatLng(), initial)) || 0) + @@ -392,21 +378,21 @@ export class InteractivePoly extends Polyline { this.distance += current_distance - initial_distance; - this.fire("distancechange", { distance: this.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); + 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._map.off('mousemove', this.onDrawingMove); + this._map.off('click', this.onDrawingClick); this.is_drawing = false; }; @@ -416,11 +402,10 @@ export class InteractivePoly extends Polyline { return; } - if (!this._map.hasLayer(this.constrLine)) - this._map.addLayer(this.constrLine); + if (!this._map.hasLayer(this.constrLine)) this._map.addLayer(this.constrLine); const marker = - this.drawing_direction === "forward" + this.drawing_direction === 'forward' ? this.markers[this.markers.length - 1] : this.markers[0]; @@ -438,7 +423,7 @@ export class InteractivePoly extends Polyline { this.drawingChangeDistance(latlng); - if (this.drawing_direction === "forward") { + if (this.drawing_direction === 'forward') { latlngs.push(latlng); this.markers.push(this.createMarker(latlng)); } else { @@ -447,7 +432,7 @@ export class InteractivePoly extends Polyline { } this.setLatLngs(latlngs); - this.fire("latlngschange", { latlngs }); + this.fire('latlngschange', { latlngs }); this.showVisibleMarkers(); this.startDrawing(); }; @@ -457,31 +442,28 @@ export class InteractivePoly extends Polyline { if (latlngs.length < 1) { this.distance = 0; - this.fire("distancechange", { distance: this.distance }); + this.fire('distancechange', { distance: this.distance }); return; } - const point = - this.drawing_direction === "forward" - ? latlngs[latlngs.length - 1] - : latlngs[0]; + const point = this.drawing_direction === 'forward' ? latlngs[latlngs.length - 1] : latlngs[0]; this.distance += distKm(point, latlng); - this.fire("distancechange", { distance: this.distance }); + 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 }); + this.fire('latlngschange', { latlngs }); }; insertLatLng = (latlng, index): void => { const latlngs = this.getLatLngs(); latlngs.splice(index, 0, latlng); this.setLatLngs(latlngs); - this.fire("latlngschange", { latlngs }); + this.fire('latlngschange', { latlngs }); }; setConstraints = (coords: LatLng[]) => { @@ -492,7 +474,7 @@ export class InteractivePoly extends Polyline { const index = this.markers.indexOf(target); const latlngs = this.getLatLngs(); - if (typeof index === "undefined" || latlngs.length <= 2) return; + if (typeof index === 'undefined' || latlngs.length <= 2) return; this.dropMarkerDistanceChange(index); this._map.removeLayer(this.markers[index]); @@ -500,7 +482,7 @@ export class InteractivePoly extends Polyline { latlngs.splice(index, 1); this.setLatLngs(latlngs); - this.fire("latlngschange", { latlngs }); + this.fire('latlngschange', { latlngs }); }; dropMarkerDistanceChange = (index: number): void => { @@ -511,39 +493,38 @@ export class InteractivePoly extends Polyline { const next = index <= latlngs.length + 1 ? latlngs[index + 1] : null; const initial_distance = - ((prev && distKm(prev, current)) || 0) + - ((next && distKm(next, current)) || 0); + ((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 }); + this.fire('distancechange', { distance: this.distance }); }; recalcDistance = () => { const latlngs = this.getLatLngs() as LatLngLiteral[]; this.distance = getPolyLength(latlngs); - this.fire("distancechange", { distance: this.distance }); + this.fire('distancechange', { distance: this.distance }); }; markers: Marker[] = []; - maxMarkers: InteractivePolylineOptions["maxMarkers"] = 2; + maxMarkers: InteractivePolylineOptions['maxMarkers'] = 2; markerLayer: LayerGroup = new LayerGroup(); - constraintsStyle: InteractivePolylineOptions["constraintsStyle"] = { + constraintsStyle: InteractivePolylineOptions['constraintsStyle'] = { weight: 6, - color: "red", - dashArray: "10, 12", + color: 'red', + dashArray: '10, 12', opacity: 0.5, - interactive: false + interactive: false, }; touchHinter: Polyline = new Polyline([], { weight: 24, smoothFactor: 3, - className: "touch-hinter-poly" + className: 'touch-hinter-poly', }); hintMarker: Marker = this.createHintMarker(latLng({ lat: 0, lng: 0 })); @@ -554,7 +535,7 @@ export class InteractivePoly extends Polyline { is_dragging: boolean = false; is_drawing: boolean = false; - drawing_direction: "forward" | "backward" = "forward"; + drawing_direction: 'forward' | 'backward' = 'forward'; vertex_index?: number = null; hint_prev_marker: number = null; @@ -562,20 +543,20 @@ export class InteractivePoly extends Polyline { } InteractivePoly.addInitHook(function() { - this.once("add", event => { + this.once('add', event => { if (event.target instanceof InteractivePoly) { this.map = event.target._map; - this.map.on("touch", console.log); + 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.map.on('moveend', this.updateMarkers); - this.on("latlngschange", this.updateTouchHinter); + this.on('latlngschange', this.updateTouchHinter); if (window.innerWidth < 768) { this.touchHinter.setStyle({ weight: 32 }); @@ -583,14 +564,14 @@ InteractivePoly.addInitHook(function() { } }); - this.once("remove", event => { + 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); + this.map.off('moveend', this.updateMarkers); } }); });