mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-25 02:56:41 +07:00
cleanup
This commit is contained in:
Fedor Katurov
parent
cb07aa9fb0
commit
8adf64acb9
6 changed files with 94 additions and 355 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -34,12 +34,10 @@ type IProps = React.HTMLAttributes<HTMLDivElement> &
|
|||
|
||||
const MapUnconnected: React.FC<IProps> = ({
|
||||
provider,
|
||||
route,
|
||||
stickers,
|
||||
editing,
|
||||
|
||||
mapClicked,
|
||||
mapSetRoute,
|
||||
mapSetSticker,
|
||||
mapDropSticker,
|
||||
}) => {
|
||||
|
|
@ -63,7 +61,7 @@ const MapUnconnected: React.FC<IProps> = ({
|
|||
return createPortal(
|
||||
<div>
|
||||
<TileLayer provider={provider} map={MainMap} />
|
||||
<Route />
|
||||
|
||||
<Stickers
|
||||
stickers={stickers}
|
||||
map={MainMap}
|
||||
|
|
@ -71,6 +69,9 @@ const MapUnconnected: React.FC<IProps> = ({
|
|||
mapDropSticker={mapDropSticker}
|
||||
is_editing={editing}
|
||||
/>
|
||||
|
||||
<Route />
|
||||
|
||||
<Router />
|
||||
</div>,
|
||||
document.getElementById('canvas')
|
||||
|
|
|
|||
|
|
@ -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<Props> = memo(
|
|||
const interactive = new InteractivePoly([], {
|
||||
color: 'url(#activePathGradient)',
|
||||
weight: 6,
|
||||
maxMarkers: isMobile() ? 50 : 200,
|
||||
maxMarkers: isMobile() ? 50 : 150,
|
||||
smoothFactor: 3,
|
||||
})
|
||||
.addTo(MainMap)
|
||||
|
|
|
|||
|
|
@ -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<IProps> = ({
|
|||
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,
|
||||
|
|
|
|||
|
|
@ -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<typeof ActionCreators.setMode>) {
|
||||
// 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<typeof selectMap> = yield select(selectMap);
|
||||
|
||||
// const canvas = <HTMLCanvasElement>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 = <HTMLCanvasElement>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<typeof ActionCreators.locationChanged>) {
|
||||
// const {
|
||||
// address,
|
||||
// ready,
|
||||
// user: { id, random_url },
|
||||
// } = yield select(selectUser);
|
||||
|
||||
// const { owner }: ReturnType<typeof selectMap> = 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<typeof ActionCreators.gotVkUser>) {
|
||||
const {
|
||||
data: { user, random_url },
|
||||
|
|
@ -315,38 +128,6 @@ function* gotVkUserSaga({ user: u }: ReturnType<typeof ActionCreators.gotVkUser>
|
|||
yield put(setUser({ ...user, random_url }));
|
||||
}
|
||||
|
||||
// function* keyPressedSaga({ key, target }: ReturnType<typeof ActionCreators.keyPressed>): 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<typeof selectUserUser> = yield select(selectUserUser);
|
||||
|
||||
|
|
@ -425,7 +206,6 @@ function* openMapDialogSaga({ tab }: ReturnType<typeof ActionCreators.openMapDia
|
|||
}
|
||||
|
||||
if (tab !== current) {
|
||||
// if tab wasnt changed just update data
|
||||
yield put(searchSetTab(tab));
|
||||
}
|
||||
|
||||
|
|
@ -455,17 +235,6 @@ function* setUserSaga() {
|
|||
return true;
|
||||
}
|
||||
|
||||
// function* getGPXTrackSaga(): SagaIterator {
|
||||
// const { route, stickers }: ReturnType<typeof selectMap> = 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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue