mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-05-06 08:26:40 +07:00
InteractivePoly: working marker dragging
This commit is contained in:
parent
4dfba4839d
commit
edbd911de6
6 changed files with 277 additions and 370 deletions
src/modules
|
@ -358,7 +358,8 @@ export class Editor {
|
|||
this.setInitialData();
|
||||
this.owner = { id };
|
||||
|
||||
if (this.poly.latlngs && this.poly.latlngs.length > 1) this.poly.poly.editor.enable();
|
||||
// todo: implement
|
||||
// if (this.poly.latlngs && this.poly.latlngs.length > 1) this.poly.poly.editor.enable();
|
||||
this.stickers.startEditing();
|
||||
};
|
||||
|
||||
|
|
191
src/modules/InteractivePoly.ts
Normal file
191
src/modules/InteractivePoly.ts
Normal file
|
@ -0,0 +1,191 @@
|
|||
import { LatLngExpression, Marker, Polyline, PolylineOptions, marker, divIcon, LayerGroup, LatLng } from 'leaflet';
|
||||
|
||||
interface InteractivePolylineOptions extends PolylineOptions {
|
||||
maxMarkers?: number,
|
||||
constraintsStyle?: PolylineOptions,
|
||||
}
|
||||
|
||||
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.constr1 = new Polyline([], this.constraintsStyle).addTo(this.constraintsLayer);
|
||||
this.constr2 = new Polyline([], this.constraintsStyle).addTo(this.constraintsLayer);
|
||||
}
|
||||
|
||||
setPoints = (latlngs: LatLng[]) => {
|
||||
this.setLatLngs(latlngs);
|
||||
this.recreateMarkers();
|
||||
};
|
||||
|
||||
createMarker = (latlng: LatLng): Marker => marker(latlng, {
|
||||
draggable: true,
|
||||
icon: divIcon({
|
||||
className: 'leaflet-vertex-icon',
|
||||
iconSize: [11, 11],
|
||||
iconAnchor: [6, 6]
|
||||
})
|
||||
})
|
||||
.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._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 => {
|
||||
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 = {
|
||||
|
||||
};
|
||||
|
||||
onMarkerDrag = ({ target }: { target: Marker}) => {
|
||||
console.log(this.vertex_index, this.markers.length);
|
||||
|
||||
this.setConstraints(
|
||||
this.vertex_index > 0 && this.markers[this.vertex_index - 1].getLatLng(),
|
||||
target.getLatLng(),
|
||||
this.vertex_index < (this.markers.length - 1) && this.markers[this.vertex_index + 1].getLatLng(),
|
||||
);
|
||||
|
||||
this.fire('vertexdrag', { index: this.vertex_index, vertex: target });
|
||||
};
|
||||
|
||||
onMarkerDragStart = ({ target }: { target: Marker}) => {
|
||||
this.vertex_index = this.markers.indexOf(target);
|
||||
|
||||
this.is_dragging = true;
|
||||
this.constraintsLayer.addTo(this._map);
|
||||
|
||||
this.fire('vertexdragstart', { index: this.vertex_index, vertex: target });
|
||||
};
|
||||
|
||||
onMarkerDragEnd = ({ target }: { target: Marker}): void => {
|
||||
this.replaceLatlng(target.getLatLng(), this.vertex_index);
|
||||
|
||||
this.is_dragging = false;
|
||||
this.constraintsLayer.removeFrom(this._map);
|
||||
|
||||
this.fire('vertexdragend', { index: this.vertex_index, vertex: target });
|
||||
this.vertex_index = null;
|
||||
};
|
||||
|
||||
replaceLatlng = (latlng: LatLng, index: number): void => {
|
||||
const latlngs = this.getLatLngs();
|
||||
latlngs.splice(index, 1, latlng);
|
||||
this.setLatLngs(latlngs);
|
||||
};
|
||||
|
||||
setConstraints = (prev?: LatLng, marker?: LatLng, next?: LatLng) => {
|
||||
if (prev) this.constr1.setLatLngs([prev, marker]);
|
||||
if (next) this.constr2.setLatLngs([next, marker]);
|
||||
};
|
||||
|
||||
markers: Marker[] = [];
|
||||
maxMarkers: InteractivePolylineOptions['maxMarkers'] = 2;
|
||||
markerLayer: LayerGroup = new LayerGroup();
|
||||
constraintsLayer: LayerGroup = new LayerGroup();
|
||||
constraintsStyle: InteractivePolylineOptions['constraintsStyle'] = {
|
||||
weight: 6,
|
||||
color: 'red',
|
||||
dashArray: '2, 10',
|
||||
opacity: 0.5,
|
||||
};
|
||||
|
||||
constr1: Polyline;
|
||||
constr2: Polyline;
|
||||
|
||||
is_dragging: boolean = false;
|
||||
vertex_index?: number = null;
|
||||
markers_visible: boolean = true;
|
||||
}
|
||||
|
||||
InteractivePoly.addInitHook(function () {
|
||||
this.once('add', (event) => {
|
||||
if (event.target instanceof InteractivePoly) {
|
||||
this.map = event.target._map;
|
||||
this.markerLayer.addTo(event.target._map);
|
||||
|
||||
this.map.on('moveend', this.updateMarkers);
|
||||
}
|
||||
});
|
||||
|
||||
this.once('remove', () => {
|
||||
if (event.target instanceof InteractivePoly) {
|
||||
this.markerLayer.removeFrom(this.map);
|
||||
this.map.off('moveend', this.updateMarkers);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/*
|
||||
events:
|
||||
vertexdragstart,
|
||||
vertexdragend,
|
||||
vertexdrag,
|
||||
|
||||
allvertexhide
|
||||
allvertexshow
|
||||
*/
|
|
@ -1,12 +1,12 @@
|
|||
import { Map, LayerGroup } from 'leaflet';
|
||||
import 'leaflet-geometryutil';
|
||||
import { Map, LayerGroup, Polyline } from 'leaflet';
|
||||
import { EditablePolyline } from '$utils/EditablePolyline';
|
||||
import { simplify } from '$utils/simplify';
|
||||
import { findDistance, middleCoord } from '$utils/geom';
|
||||
import { findDistance, getPolyLength, middleCoord } from '$utils/geom';
|
||||
import { CLIENT } from '$config/frontend';
|
||||
import { MODES } from '$constants/modes';
|
||||
import { editor, Editor } from "$modules/Editor";
|
||||
import { ILatLng } from "$modules/Stickers";
|
||||
import { InteractivePoly } from "$modules/InteractivePoly";
|
||||
|
||||
const polyStyle = {
|
||||
color: 'url(#activePathGradient)',
|
||||
|
@ -27,22 +27,28 @@ export class Poly {
|
|||
constructor({
|
||||
map, routerMoveStart, lockMapClicks, setDistance, triggerOnChange, editor,
|
||||
}: Props) {
|
||||
this.poly = new EditablePolyline([], {
|
||||
...polyStyle,
|
||||
maxMarkers: 100,
|
||||
|
||||
onPointsSet: this.updateMarks,
|
||||
onMarkerDragEnd: this.updateMarks,
|
||||
onPointAdded: this.updateMarks,
|
||||
onPointDropped: this.updateMarks,
|
||||
onContinueDrawing: this.setModeOnDrawing,
|
||||
|
||||
onMarkersHide: () => editor.setMarkersShown(false),
|
||||
onMarkersShow: () => editor.setMarkersShown(true),
|
||||
}).addTo(map);
|
||||
this.poly = new InteractivePoly([], {
|
||||
color: 'url(#activePathGradient)',
|
||||
weight: 6,
|
||||
maxMarkers: 300,
|
||||
});
|
||||
// this.poly = new EditablePolyline([], {
|
||||
// ...polyStyle,
|
||||
// maxMarkers: 100,
|
||||
//
|
||||
// onPointsSet: this.updateMarks,
|
||||
// onMarkerDragEnd: this.updateMarks,
|
||||
// onPointAdded: this.updateMarks,
|
||||
// onPointDropped: this.updateMarks,
|
||||
// onContinueDrawing: this.setModeOnDrawing,
|
||||
//
|
||||
// onMarkersHide: () => editor.setMarkersShown(false),
|
||||
// onMarkersShow: () => editor.setMarkersShown(true),
|
||||
// }).addTo(map);
|
||||
|
||||
this.poly.addTo(map);
|
||||
this.poly._reloadPolyline();
|
||||
// todo: uncomment
|
||||
// this.poly._reloadPolyline();
|
||||
this.editor = editor;
|
||||
|
||||
this.map = map;
|
||||
|
@ -61,45 +67,46 @@ export class Poly {
|
|||
|
||||
drawArrows = () => {
|
||||
// todo: fix this
|
||||
// this.arrows.clearLayers();
|
||||
// const { latlngs } = this;
|
||||
//
|
||||
// if (!latlngs || latlngs.length <= 1) return;
|
||||
//
|
||||
// latlngs.forEach((latlng, i) => {
|
||||
// if (i === 0) return;
|
||||
//
|
||||
// const mid = middleCoord(latlngs[i], latlngs[i - 1]);
|
||||
// const dist = findDistance(latlngs[i - 1].lat, latlngs[i - 1].lng, latlngs[i].lat, latlngs[i].lng);
|
||||
//
|
||||
// if (dist <= 1) return;
|
||||
//
|
||||
// const slide = new Polyline(
|
||||
// [
|
||||
// latlngs[i - 1],
|
||||
// [mid.lat, mid.lng]
|
||||
// ],
|
||||
// { color: 'none', weight: CLIENT.STROKE_WIDTH }
|
||||
// ).addTo(this.arrows);
|
||||
//
|
||||
// // todo: uncomment and fix this:
|
||||
// // slide._path.setAttribute('marker-end', 'url(#long-arrow)');
|
||||
// });
|
||||
this.arrows.clearLayers();
|
||||
const { latlngs } = this;
|
||||
|
||||
if (!latlngs || latlngs.length <= 1) return;
|
||||
|
||||
latlngs.forEach((latlng, i) => {
|
||||
if (i === 0) return;
|
||||
|
||||
const mid = middleCoord(latlngs[i], latlngs[i - 1]);
|
||||
const dist = findDistance(latlngs[i - 1].lat, latlngs[i - 1].lng, latlngs[i].lat, latlngs[i].lng);
|
||||
|
||||
if (dist <= 1) return;
|
||||
|
||||
const slide = new Polyline(
|
||||
[
|
||||
latlngs[i - 1],
|
||||
[mid.lat, mid.lng]
|
||||
],
|
||||
{ color: 'none', weight: CLIENT.STROKE_WIDTH }
|
||||
).addTo(this.arrows) as any;
|
||||
|
||||
// todo: uncomment and fix this:
|
||||
slide._path.setAttribute('marker-end', 'url(#long-arrow)');
|
||||
});
|
||||
};
|
||||
|
||||
updateMarks = () => {
|
||||
// todo: fix this
|
||||
// const coords = this.poly.toGeoJSON().geometry.coordinates;
|
||||
//
|
||||
// const meters = (this.poly && (L.GeometryUtil.length(this.poly) / 1000)) || 0;
|
||||
// const kilometers = (meters && meters.toFixed(1)) || 0;
|
||||
//
|
||||
// this.setTotalDist(kilometers);
|
||||
// this.routerMoveStart();
|
||||
//
|
||||
// this.drawArrows(); // <-- uncomment
|
||||
//
|
||||
// if (coords.length > 1) this.triggerOnChange();
|
||||
const coords = this.poly.toGeoJSON().geometry.coordinates;
|
||||
|
||||
// const meters = (this.latlngs && this.latlngs.length > 1 && getPolyLength(this.latlngs)) || 0;
|
||||
// const kilometers = (meters && Number(meters.toFixed(1))) || 0;
|
||||
|
||||
const kilometers = ((this.latlngs && this.latlngs.length > 1 && getPolyLength(this.latlngs)) || 0);
|
||||
|
||||
this.setDistance(parseFloat(kilometers.toFixed(2)));
|
||||
this.routerMoveStart();
|
||||
|
||||
this.drawArrows(); // <-- uncomment
|
||||
|
||||
if (coords.length > 1) this.triggerOnChange();
|
||||
};
|
||||
|
||||
preventMissClicks = (e): void => {
|
||||
|
@ -113,15 +120,18 @@ export class Poly {
|
|||
};
|
||||
|
||||
continue = (): void => {
|
||||
this.poly.editor.continueForward();
|
||||
// todo: implement
|
||||
// this.poly.editor.continueForward();
|
||||
};
|
||||
|
||||
stop = (): void => {
|
||||
if (this.poly) this.poly.editor.stopDrawing();
|
||||
// todo: implement
|
||||
// if (this.poly) this.poly.editor.stopDrawing();
|
||||
};
|
||||
|
||||
continueForward = (): void => {
|
||||
this.poly.continueForward();
|
||||
// todo: implement
|
||||
// this.poly.continueForward();
|
||||
};
|
||||
|
||||
lockMap = (): void => {
|
||||
|
@ -129,7 +139,10 @@ export class Poly {
|
|||
};
|
||||
|
||||
setPoints = (latlngs: Array<ILatLng>): void => {
|
||||
console.log('setP');
|
||||
|
||||
if (!latlngs || latlngs.length <= 1) return;
|
||||
// todo: implement
|
||||
this.poly.setPoints(latlngs);
|
||||
};
|
||||
|
||||
|
@ -141,15 +154,15 @@ export class Poly {
|
|||
...simplified,
|
||||
];
|
||||
|
||||
this.poly.setLatLngs(summary);
|
||||
this.poly.editor.enable();
|
||||
this.poly.editor.reset();
|
||||
this.poly.setPoints(summary);
|
||||
this.updateMarks();
|
||||
};
|
||||
|
||||
clearAll = (): void => {
|
||||
// this.poly.setLatLngs([]);
|
||||
this.poly.editor.clear();
|
||||
// todo: implement
|
||||
// this.poly.editor.clear();
|
||||
this.poly.setPoints([]);
|
||||
this.updateMarks();
|
||||
};
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue