diff --git a/src/index.tsx b/src/index.tsx index 37f897c..d2aaefb 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,6 +1,7 @@ /* ## BUGS + todo fix arrows (can't reproduce now :-( ) todo adding route, applying it and adding again and deleting it makes ghost points on the map diff --git a/src/modules/InteractivePoly.ts b/src/modules/InteractivePoly.ts index 5b07d5f..2e67f19 100644 --- a/src/modules/InteractivePoly.ts +++ b/src/modules/InteractivePoly.ts @@ -1,3 +1,7 @@ +/* + todo IMPORTANT: select closest point on drag instead of first +*/ + import { LatLngExpression, Marker, @@ -14,6 +18,8 @@ import { distKm, getPolyLength, pointBetweenPoints, pointInArea } from "$utils/g interface InteractivePolylineOptions extends PolylineOptions { maxMarkers?: number, constraintsStyle?: PolylineOptions, + kmMarksEnabled?: boolean, + kmMarksStep?: number, } export class Component extends Polyline { @@ -22,6 +28,8 @@ export class Component extends Polyline { this.constraintsStyle = { ...this.constraintsStyle, ...options.constraintsStyle }; this.maxMarkers = options.maxMarkers || this.maxMarkers; + this.kmMarksEnabled = options.kmMarksEnabled || this.kmMarksEnabled; + this.kmMarksStep = options.kmMarksStep || this.kmMarksStep; this.constrLine = new Polyline([], this.constraintsStyle); @@ -32,6 +40,7 @@ export class Component extends Polyline { this.setLatLngs(latlngs); this.recreateMarkers(); this.recalcDistance(); + this.recalcKmMarks(); }; createHintMarker = (latlng: LatLng): Marker => marker(latlng, { @@ -361,6 +370,13 @@ export class Component extends Polyline { 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]; @@ -424,6 +440,38 @@ export class Component extends Polyline { this.fire('distancechange', { distance: this.distance }); }; + recalcKmMarks = () => { + if (!this.kmMarksEnabled) return; + + const latlngs = this.getLatLngs() as LatLngLiteral[]; + + this.kmMarks = { }; + + let last_km_mark = 0; + + latlngs.reduce((dist, latlng, index) => { + if (index >= latlngs.length - 1) return; + + const next = latlngs[index + 1]; + const sum = dist + distKm(latlng, next); + const rounded = Math.floor(dist / this.kmMarksStep) * this.kmMarksStep; + + if (rounded > last_km_mark) { + last_km_mark = rounded; + this.kmMarks[rounded] = latlng; + } + + return sum; + }, 0); + + console.log('counting km marks', this.kmMarks); + }; + + kmMarksEnabled?: InteractivePolylineOptions['kmMarksEnabled'] = true; + kmMarksStep?: InteractivePolylineOptions['kmMarksStep'] = 5; + kmMarks?: { [x: number]: LatLngLiteral }; + // kmMarksLayer?: LayerGroup = new LayerGroup(); + markers: Marker[] = []; maxMarkers: InteractivePolylineOptions['maxMarkers'] = 2; markerLayer: LayerGroup = new LayerGroup(); @@ -455,6 +503,7 @@ Component.addInitHook(function () { if (event.target instanceof InteractivePoly) { this.map = event.target._map; this.markerLayer.addTo(event.target._map); + // this.kmMarksLayer.addTo(event.target._map); this.hintMarker.addTo(event.target._map); this.constrLine.addTo(event.target._map); @@ -465,6 +514,7 @@ Component.addInitHook(function () { this.once('remove', (event) => { if (event.target instanceof InteractivePoly) { this.markerLayer.removeFrom(this._map); + // this.kmMarksLayer.removeFrom(this._map); this.hintMarker.removeFrom(this._map); this.constrLine.removeFrom(this._map); diff --git a/src/redux/user/sagas.ts b/src/redux/user/sagas.ts index b518b09..8ea03a7 100644 --- a/src/redux/user/sagas.ts +++ b/src/redux/user/sagas.ts @@ -32,7 +32,7 @@ import { setProvider, changeProvider, setSaveLoading, - mapsSetShift, searchChangeDistance, + mapsSetShift, searchChangeDistance, clearAll, } from '$redux/user/actions'; import { getUrlData, parseQuery, pushLoaderState, pushNetworkInitError, pushPath, replacePath } from '$utils/history'; import { editor } from '$modules/Editor'; @@ -467,7 +467,14 @@ function* keyPressedSaga({ key, target }: ReturnType