mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-25 02:56:41 +07:00
new-poly: continuing poly
This commit is contained in:
muerwre
parent
2f9952e8fa
commit
fbf4c06370
2 changed files with 367 additions and 165 deletions
|
|
@ -19,27 +19,187 @@ export class NewPoly {
|
|||
}) {
|
||||
// this.poly = L.polyline([], polyStyle);
|
||||
const coordinates = [
|
||||
[54.985987, 82.921543],
|
||||
[55.03845, 82.97699],
|
||||
[55.0345, 82.67699],
|
||||
[55.0145, 82.67699],
|
||||
// { lat: 54.9859, lng: 82.92154 },
|
||||
// { lat: 55.0384, lng: 82.97699 },
|
||||
// { lat: 55.0345, lng: 82.67699 },
|
||||
// { lat: 55.0145, lng: 82.67699 },
|
||||
];
|
||||
this.poly = L.Polyline.PolylineEditor(coordinates, { ...polyStyle, maxMarkers: 300 }).addTo(map);
|
||||
|
||||
const customPointListeners = {
|
||||
mousedown: console.log,
|
||||
mouseup: console.log,
|
||||
dragstart: console.log,
|
||||
dragend: console.log,
|
||||
};
|
||||
|
||||
this.poly = L.Polyline.PolylineEditor(coordinates, {
|
||||
...polyStyle,
|
||||
maxMarkers: 300,
|
||||
customPointListeners,
|
||||
customNewPointListenets: customPointListeners,
|
||||
}).addTo(map);
|
||||
|
||||
this.latlngs = [];
|
||||
this.poly.addTo(map);
|
||||
map.fitBounds(this.poly.getBounds());
|
||||
//
|
||||
// this.latlngs = [];
|
||||
// this.poly.addTo(map);
|
||||
// this.editor = editor;
|
||||
//
|
||||
// this.map = map;
|
||||
//
|
||||
// this.routerMoveStart = routerMoveStart;
|
||||
// this.setTotalDist = setTotalDist;
|
||||
// this.triggerOnChange = triggerOnChange;
|
||||
// this.lockMapClicks = lockMapClicks;
|
||||
this.poly._reloadPolyline();
|
||||
this.editor = editor;
|
||||
|
||||
this.map = map;
|
||||
|
||||
this.routerMoveStart = routerMoveStart;
|
||||
this.setTotalDist = setTotalDist;
|
||||
this.triggerOnChange = triggerOnChange;
|
||||
this.lockMapClicks = lockMapClicks;
|
||||
// this.bindEvents();
|
||||
|
||||
this.arrows = new L.LayerGroup().addTo(map);
|
||||
}
|
||||
|
||||
|
||||
drawArrows = () => {
|
||||
this.arrows.clearLayers();
|
||||
const { latlngs } = this;
|
||||
|
||||
if (!latlngs || latlngs.length <= 1) return;
|
||||
|
||||
latlngs.map((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 L.Polyline(
|
||||
[
|
||||
latlngs[i - 1],
|
||||
[mid.lat, mid.lng]
|
||||
],
|
||||
{ color: 'none', weight: CLIENT.STROKE_WIDTH }
|
||||
).addTo(this.arrows);
|
||||
|
||||
slide._path.setAttribute('marker-end', 'url(#long-arrow)');
|
||||
});
|
||||
};
|
||||
|
||||
updateMarks = () => {
|
||||
return;
|
||||
const coords = this.poly.toGeoJSON().geometry.coordinates;
|
||||
this.latlngs = (coords && coords.length && coords.map(([lng, lat]) => ({ lng, lat }))) || [];
|
||||
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();
|
||||
};
|
||||
|
||||
preventMissClicks = e => {
|
||||
const mode = this.editor.getMode();
|
||||
|
||||
if (mode === MODES.POLY) return;
|
||||
|
||||
e.cancel();
|
||||
|
||||
if (mode === MODES.NONE) this.editor.setMode(MODES.POLY);
|
||||
};
|
||||
|
||||
bindEvents = () => {
|
||||
// Если на карте что-то меняется, пересчитать километражи
|
||||
// this.map.editTools.addEventListener('editable:drawing:mouseup', this.updateMarks);
|
||||
// this.map.editTools.addEventListener('editable:vertex:dragend', this.updateMarks);
|
||||
// this.map.editTools.addEventListener('editable:vertex:mouseup', this.updateMarks);
|
||||
// this.map.editTools.addEventListener('editable:vertex:deleted', this.updateMarks);
|
||||
// this.map.editTools.addEventListener('editable:vertex:new', this.updateMarks);
|
||||
// this.map.editTools.addEventListener('editable:vertex:click', this.preventMissClicks);
|
||||
|
||||
// this.map.editTools.addEventListener('editable:vertex:dragstart', this.lockMap);
|
||||
// this.map.editTools.addEventListener('editable:vertex:dragstart', this.clearArrows);
|
||||
|
||||
// После удаления точки - продолжить рисование
|
||||
// this.map.editTools.addEventListener('editable:vertex:deleted', this.continueForward);
|
||||
//
|
||||
// this.arrows = new L.LayerGroup().addTo(map);
|
||||
// map.editTools.addEventListener('editable:vertex:dragend', e => writeReduxData({ e, updatePolyCoords }));
|
||||
// map.editTools.addEventListener('editable:vertex:new', e => writeReduxData({ e, updatePolyCoords }));
|
||||
// map.editTools.addEventListener('editable:vertex:deleted', e => writeReduxData({ e, updatePolyCoords }));
|
||||
|
||||
// Продолжить рисование после удаления точки
|
||||
// map.editTools.addEventListener('editable:vertex:deleted', e => {
|
||||
// poly.editor.continueForward();
|
||||
// updateMarks();
|
||||
// });
|
||||
|
||||
// Добавлять точек в полилинию по щелчку
|
||||
// map.editTools.addEventListener('editable:drawing:click', e => insertVertex({ e, updatePolyCoords }));
|
||||
// map.editTools.addEventListener('editable:drawing:clicked', () => updateMarks({ updatePolyCoords }));
|
||||
|
||||
// Это для точек. При перетаскивании конца указателя тащим точку
|
||||
// map.editTools.addEventListener('editable:vertex:drag', on_vertex_drag);
|
||||
|
||||
// при перетаскивании ручек убирать все отметки километров
|
||||
// map.editTools.addEventListener('editable:vertex:dragstart', clearKmMarks);
|
||||
};
|
||||
|
||||
continue = () => {
|
||||
this.poly.continueForwards();
|
||||
// if (this.latlngs && this.latlngs.length) {
|
||||
// // this.poly.enableEdit().continueForward();
|
||||
// // this.poly.editor.reset();
|
||||
// this.poly.continueForward();
|
||||
// } else {
|
||||
// // this.poly = this.map.editTools.startPolyline();
|
||||
// // this.poly.setStyle(polyStyle);
|
||||
// }
|
||||
};
|
||||
|
||||
stop = () => {
|
||||
if (this.poly) this.poly.stopDrawing();
|
||||
};
|
||||
|
||||
continueForward = () => {
|
||||
this.poly.continueForward();
|
||||
};
|
||||
|
||||
lockMap = () => {
|
||||
this.lockMapClicks(true);
|
||||
};
|
||||
|
||||
setPoints = latlngs => {
|
||||
if (!latlngs || latlngs.length <= 1) return;
|
||||
this.poly.setPoints(latlngs);
|
||||
// this.poly._reloadPolyline();
|
||||
// this.updateMarks();
|
||||
};
|
||||
|
||||
pushPoints = latlngs => {
|
||||
const { map } = this;
|
||||
const simplified = simplify({ map, latlngs });
|
||||
const summary = [
|
||||
...this.poly.getLatLngs(),
|
||||
...simplified,
|
||||
];
|
||||
|
||||
this.poly.setLatLngs(summary);
|
||||
this.poly.enableEdit();
|
||||
this.poly.editor.reset();
|
||||
this.updateMarks();
|
||||
};
|
||||
|
||||
clearAll = () => {
|
||||
this.poly.setLatLngs([]);
|
||||
// this.poly.disableEdit();
|
||||
|
||||
// this.updateMarks();
|
||||
};
|
||||
|
||||
clearArrows = () => this.arrows.clearLayers();
|
||||
|
||||
dumpData = () => this.latlngs;
|
||||
|
||||
get isEmpty() {
|
||||
return (!this.latlngs || Object.values(this.latlngs).length <= 0);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import L from 'leaflet';
|
||||
|
||||
L.Polyline.polylineEditor = L.Polyline.extend({
|
||||
_prepareMapIfNeeded() {
|
||||
const that = this;
|
||||
|
|
@ -13,16 +15,14 @@ L.Polyline.polylineEditor = L.Polyline.extend({
|
|||
|
||||
// Click anywhere on map to add a new point-polyline:
|
||||
if (this._options.newPolylines) {
|
||||
console.log('click na map');
|
||||
that._map.on('dblclick', (event) => {
|
||||
console.log(`click, target=${event.target == that._map} type=${event.type}`);
|
||||
// console.log(`click, target=${event.target == that._map} type=${event.type}`);
|
||||
if (that._map.isEditablePolylinesBusy()) { return; }
|
||||
|
||||
const latLng = event.latlng;
|
||||
if (that._options.newPolylineConfirmMessage) {
|
||||
if (!confirm(that._options.newPolylineConfirmMessage)) { return; }
|
||||
}
|
||||
|
||||
// if (that._options.newPolylineConfirmMessage) {
|
||||
// if (!confirm(that._options.newPolylineConfirmMessage)) { return; }
|
||||
// }
|
||||
const contexts = [{ originalPolylineNo: null, originalPointNo: null }];
|
||||
L.Polyline.PolylineEditor([latLng], that._options, contexts).addTo(that._map);
|
||||
|
||||
|
|
@ -34,23 +34,25 @@ L.Polyline.polylineEditor = L.Polyline.extend({
|
|||
/**
|
||||
* Check if there is *any* busy editable polyline on this map.
|
||||
*/
|
||||
this._map.isEditablePolylinesBusy = function () {
|
||||
const map = this;
|
||||
for (let i = 0; i < map._editablePolylines.length; i++) {
|
||||
if (map._editablePolylines[i]._isBusy()) { return true; }
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
this._map.isEditablePolylinesBusy = () => this._editablePolylines.some(el => el._isBusy());
|
||||
// {
|
||||
// for (let i = 0; i < this._editablePolylines.length; i += 1) {
|
||||
// if (this._editablePolylines[i]._isBusy()) { return true; }
|
||||
// }
|
||||
//
|
||||
// return false;
|
||||
// };
|
||||
|
||||
/**
|
||||
* Enable/disable editing.
|
||||
*/
|
||||
this._map.setEditablePolylinesEnabled = function (enabled) {
|
||||
const map = this;
|
||||
map._editablePolylinesEnabled = enabled;
|
||||
for (let i = 0; i < map._editablePolylines.length; i++) {
|
||||
const polyline = map._editablePolylines[i];
|
||||
this._map.setEditablePolylinesEnabled = (enabled) => {
|
||||
// const map = this;
|
||||
this._editablePolylinesEnabled = enabled;
|
||||
|
||||
for (let i = 0; i < this._editablePolylines.length; i += 1) {
|
||||
const polyline = this._editablePolylines[i];
|
||||
|
||||
if (enabled) {
|
||||
polyline._showBoundMarkers();
|
||||
} else {
|
||||
|
|
@ -59,16 +61,20 @@ L.Polyline.polylineEditor = L.Polyline.extend({
|
|||
}
|
||||
};
|
||||
|
||||
this.enableEditing = function () {
|
||||
this.enableEditing = () => {
|
||||
this._map.setEditablePolylinesEnabled(true);
|
||||
};
|
||||
|
||||
this.disableEditing = function () {
|
||||
this.disableEditing = () => {
|
||||
this._map.setEditablePolylinesEnabled(false);
|
||||
};
|
||||
|
||||
this.continueForwards = () => {
|
||||
if (this.getLatLngs().length === 0) {
|
||||
this._map.on('click', this._addFirstPoint);
|
||||
return;
|
||||
}
|
||||
|
||||
this.continueForwards = function () {
|
||||
if (!this._editablePolylinesEnabled) {
|
||||
this._map.setEditablePolylinesEnabled(true);
|
||||
}
|
||||
|
|
@ -81,22 +87,19 @@ L.Polyline.polylineEditor = L.Polyline.extend({
|
|||
|
||||
this.stopDrawing = () => {
|
||||
this._clearDragLines();
|
||||
that._map.off('click', this._addPointForward);
|
||||
this._map.off('click', this._addPointForward);
|
||||
this._map.off('click', this._addFirstPoint);
|
||||
};
|
||||
|
||||
/*
|
||||
* Utility method added to this map to retreive editable
|
||||
* polylines.
|
||||
*/
|
||||
this._map.getEditablePolylines = function () {
|
||||
const map = this;
|
||||
return map._editablePolylines;
|
||||
};
|
||||
this._map.getEditablePolylines = () => this._editablePolylines;
|
||||
|
||||
this._map.fixAroundEditablePoint = function (marker) {
|
||||
const map = this;
|
||||
for (let i = 0; i < map._editablePolylines.length; i++) {
|
||||
const polyline = map._editablePolylines[i];
|
||||
this._map.fixAroundEditablePoint = marker => {
|
||||
for (let i = 0; i < this._editablePolylines.length; i += 1) {
|
||||
const polyline = this._editablePolylines[i];
|
||||
polyline._reloadPolyline(marker);
|
||||
}
|
||||
};
|
||||
|
|
@ -109,7 +112,7 @@ L.Polyline.polylineEditor = L.Polyline.extend({
|
|||
_addMethods() {
|
||||
const that = this;
|
||||
|
||||
this._init = function (options, contexts) {
|
||||
this._init = (options, contexts) => {
|
||||
this._prepareMapIfNeeded();
|
||||
|
||||
/**
|
||||
|
|
@ -122,9 +125,10 @@ L.Polyline.polylineEditor = L.Polyline.extend({
|
|||
|
||||
this._markers = [];
|
||||
const points = this.getLatLngs();
|
||||
const length = points.length;
|
||||
for (let i = 0; i < length; i++) {
|
||||
|
||||
for (let i = 0; i < points.length; i += 1) {
|
||||
const marker = this._addMarkers(i, points[i]);
|
||||
|
||||
if (!('context' in marker)) {
|
||||
marker.context = {};
|
||||
if (that._contexts != null) {
|
||||
|
|
@ -137,13 +141,8 @@ L.Polyline.polylineEditor = L.Polyline.extend({
|
|||
}
|
||||
|
||||
// Map move => show different editable markers:
|
||||
const map = this._map;
|
||||
this._map.on('zoomend', (e) => {
|
||||
that._showBoundMarkers();
|
||||
});
|
||||
this._map.on('moveend', (e) => {
|
||||
that._showBoundMarkers();
|
||||
});
|
||||
this._map.on('zoomend', this._showBoundMarkers);
|
||||
this._map.on('moveend', this._showBoundMarkers);
|
||||
|
||||
if (this._desiredPolylineNo && this._desiredPolylineNo != null) {
|
||||
this._map._editablePolylines.splice(this._desiredPolylineNo, 0, this);
|
||||
|
|
@ -152,6 +151,9 @@ L.Polyline.polylineEditor = L.Polyline.extend({
|
|||
}
|
||||
};
|
||||
|
||||
// this.setLatLngs = latlngs => {
|
||||
//
|
||||
// };
|
||||
/**
|
||||
* Check if is busy adding/moving new nodes. Note, there may be
|
||||
* *other* editable polylines on the same map which *are* busy.
|
||||
|
|
@ -167,20 +169,15 @@ L.Polyline.polylineEditor = L.Polyline.extend({
|
|||
/**
|
||||
* Get markers for this polyline.
|
||||
*/
|
||||
this.getPoints = function () {
|
||||
return this._markers;
|
||||
};
|
||||
this.getPoints = () => this._markers;
|
||||
|
||||
this.isChanged = function () {
|
||||
return this._changed;
|
||||
};
|
||||
|
||||
this._parseOptions = function (options) {
|
||||
if (!options) { options = {}; }
|
||||
this.isChanged = () => this._changed;
|
||||
|
||||
this._parseOptions = (original = {}) => {
|
||||
const options = { ...original };
|
||||
// Do not show edit markers if more than maxMarkers would be shown:
|
||||
if (!('maxMarkers' in options)) { options.maxMarkers = 100; }
|
||||
if (!('newPolylines' in options)) { options.newPolylines = false; }
|
||||
if (!('maxMarkers' in original)) { options.maxMarkers = 100; }
|
||||
if (!('newPolylines' in original)) { options.newPolylines = false; }
|
||||
if (!('newPolylineConfirmMessage' in options)) { options.newPolylineConfirmMessage = ''; }
|
||||
if (!('addFirstLastPointEvent' in options)) { options.addFirstLastPointEvent = 'click'; }
|
||||
if (!('customPointListeners' in options)) { options.customPointListeners = {}; }
|
||||
|
|
@ -216,32 +213,33 @@ L.Polyline.polylineEditor = L.Polyline.extend({
|
|||
* number of markers. This method is called on eventy that change map
|
||||
* bounds.
|
||||
*/
|
||||
this._showBoundMarkers = function () {
|
||||
this._showBoundMarkers = () => {
|
||||
if (!that._map) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._setBusy(false);
|
||||
|
||||
if (!that._map._editablePolylinesEnabled) {
|
||||
console.log('Do not show because editing is disabled');
|
||||
return;
|
||||
}
|
||||
if (!that._map._editablePolylinesEnabled) return;
|
||||
|
||||
const bounds = that._map.getBounds();
|
||||
let found = 0;
|
||||
for (var polylineNo in that._map._editablePolylines) {
|
||||
var polyline = that._map._editablePolylines[polylineNo];
|
||||
for (var markerNo in polyline._markers) {
|
||||
var marker = polyline._markers[markerNo];
|
||||
|
||||
for (let polylineNo in that._map._editablePolylines) {
|
||||
const polyline = that._map._editablePolylines[polylineNo];
|
||||
|
||||
for (let markerNo in polyline._markers) {
|
||||
const marker = polyline._markers[markerNo];
|
||||
if (bounds.contains(marker.getLatLng())) { found += 1; }
|
||||
}
|
||||
}
|
||||
|
||||
for (var polylineNo in that._map._editablePolylines) {
|
||||
var polyline = that._map._editablePolylines[polylineNo];
|
||||
for (var markerNo in polyline._markers) {
|
||||
var marker = polyline._markers[markerNo];
|
||||
for (let polylineNo in that._map._editablePolylines) {
|
||||
const polyline = that._map._editablePolylines[polylineNo];
|
||||
|
||||
for (let markerNo in polyline._markers) {
|
||||
const marker = polyline._markers[markerNo];
|
||||
|
||||
if (found < that._options.maxMarkers) {
|
||||
that._setMarkerVisible(marker, bounds.contains(marker.getLatLng()));
|
||||
that._setMarkerVisible(marker.newPointMarker, markerNo > 0 && bounds.contains(marker.getLatLng()));
|
||||
|
|
@ -258,15 +256,19 @@ L.Polyline.polylineEditor = L.Polyline.extend({
|
|||
* with other markers (+ easier to decide where to put the point
|
||||
* without too many markers).
|
||||
*/
|
||||
this._hideAll = function (except) {
|
||||
this._hideAll = (except) => {
|
||||
this._setBusy(true);
|
||||
for (const polylineNo in that._map._editablePolylines) {
|
||||
console.log(`hide ${polylineNo} markers`);
|
||||
const polyline = that._map._editablePolylines[polylineNo];
|
||||
|
||||
for (const markerNo in polyline._markers) {
|
||||
const marker = polyline._markers[markerNo];
|
||||
if (except == null || except != marker) { polyline._setMarkerVisible(marker, false); }
|
||||
if (except == null || except != marker.newPointMarker) { polyline._setMarkerVisible(marker.newPointMarker, false); }
|
||||
if (except == null || except !== marker) {
|
||||
polyline._setMarkerVisible(marker, false);
|
||||
}
|
||||
if (except == null || except !== marker.newPointMarker) {
|
||||
polyline._setMarkerVisible(marker.newPointMarker, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -274,7 +276,7 @@ L.Polyline.polylineEditor = L.Polyline.extend({
|
|||
/**
|
||||
* Show/hide marker.
|
||||
*/
|
||||
this._setMarkerVisible = function (marker, show) {
|
||||
this._setMarkerVisible = (marker, show) => {
|
||||
if (!marker) { return; }
|
||||
|
||||
const map = this._map;
|
||||
|
|
@ -296,15 +298,29 @@ L.Polyline.polylineEditor = L.Polyline.extend({
|
|||
}
|
||||
};
|
||||
|
||||
this.setPoints = latlngs => {
|
||||
this.setLatLngs(latlngs);
|
||||
|
||||
this._markers = [];
|
||||
|
||||
for (let i = 0; i < latlngs.length; i += 1) {
|
||||
const marker = this._addMarkers(i, latlngs[i]);
|
||||
}
|
||||
|
||||
this._reloadPolyline();
|
||||
};
|
||||
|
||||
/**
|
||||
* Reload polyline. If it is busy, then the bound markers will not be
|
||||
* shown.
|
||||
*/
|
||||
this._reloadPolyline = function (fixAroundPointNo) {
|
||||
that.setLatLngs(that._getMarkerLatLngs());
|
||||
if (fixAroundPointNo != null) { that._fixAround(fixAroundPointNo); }
|
||||
that._showBoundMarkers();
|
||||
that._changed = true;
|
||||
this._reloadPolyline = fixAroundPointNo => {
|
||||
this.setLatLngs(this._getMarkerLatLngs());
|
||||
|
||||
if (fixAroundPointNo != null) this._fixAround(fixAroundPointNo);
|
||||
|
||||
this._showBoundMarkers();
|
||||
this._changed = true;
|
||||
};
|
||||
|
||||
this._onMarkerDrag = (event) => {
|
||||
|
|
@ -337,8 +353,7 @@ L.Polyline.polylineEditor = L.Polyline.extend({
|
|||
* Markers are not added on the map here, the marker.addTo(map) is called
|
||||
* only later when needed first time because of performance issues.
|
||||
*/
|
||||
this._addMarkers = function (pointNo, latLng, fixNeighbourPositions) {
|
||||
const that = this;
|
||||
this._addMarkers = (pointNo, latLng, fixNeighbourPositions) => {
|
||||
const points = this.getLatLngs();
|
||||
const marker = L.marker(latLng, { draggable: true, icon: this._options.pointIcon });
|
||||
|
||||
|
|
@ -348,44 +363,66 @@ L.Polyline.polylineEditor = L.Polyline.extend({
|
|||
|
||||
marker.on('dragend', this._onMarkerDrop);
|
||||
|
||||
marker.on('contextmenu', (event) => {
|
||||
const marker = event.target;
|
||||
const pointNo = that._getPointNo(event.target);
|
||||
that._map.removeLayer(marker);
|
||||
that._map.removeLayer(newPointMarker);
|
||||
that._markers.splice(pointNo, 1);
|
||||
that._reloadPolyline(pointNo);
|
||||
});
|
||||
// marker.on('contextmenu', (event) => {
|
||||
// const _marker = event.target;
|
||||
// const _pointNo = that._getPointNo(event.target);
|
||||
// that._map.removeLayer(_marker);
|
||||
// // that._map.removeLayer(newPointMarker);
|
||||
//
|
||||
// that._markers.splice(_pointNo, 1);
|
||||
// that._reloadPolyline(_pointNo);
|
||||
// });
|
||||
|
||||
marker.on(that._options.addFirstLastPointEvent, (event) => {
|
||||
console.log('click on marker');
|
||||
const marker = event.target;
|
||||
const pointNo = that._getPointNo(event.target);
|
||||
console.log(`pointNo=${pointNo} that._markers.length=${that._markers.length}`);
|
||||
event.dont;
|
||||
if (pointNo == 0 || pointNo == that._markers.length - 1) {
|
||||
console.log('first or last');
|
||||
that._prepareForNewPoint(marker, pointNo == 0 ? 0 : pointNo + 1);
|
||||
} else {
|
||||
console.log('not first or last');
|
||||
// marker.on(that._options.addFirstLastPointEvent, (event) => {
|
||||
// console.log('click on marker');
|
||||
// const point = that._getPointNo(event.target);
|
||||
// console.log(`pointNo=${point} that._markers.length=${that._markers.length}`);
|
||||
//
|
||||
// if (pointNo === 0 || pointNo === that._markers.length - 1) {
|
||||
// console.log('first or last');
|
||||
// that._prepareForNewPoint(event.target, point === 0 ? 0 : point + 1);
|
||||
// } else {
|
||||
// console.log('not first or last');
|
||||
// }
|
||||
// });
|
||||
|
||||
// User-defined custom event listeners:
|
||||
if (that._options.customPointListeners) {
|
||||
for (let eventName in that._options.customPointListeners) { marker.on(eventName, that._options.customPointListeners[eventName]); }
|
||||
}
|
||||
if (that._options.customNewPointListeners) {
|
||||
for (let eventName in that._options.customNewPointListeners) { newPointMarker.on(eventName, that._options.customNewPointListeners[eventName]); }
|
||||
}
|
||||
|
||||
// exit if its first marker
|
||||
if (!this._markers || this._markers.length <= 0) {
|
||||
this._markers.push(marker);
|
||||
return marker;
|
||||
}
|
||||
|
||||
const previousPoint = points[pointNo === 0 ? pointNo : pointNo - 1];
|
||||
const newPointMarker = L.marker(
|
||||
[
|
||||
(latLng.lat + previousPoint.lat) / 2.0,
|
||||
(latLng.lng + previousPoint.lng) / 2.0
|
||||
],
|
||||
{
|
||||
draggable: true,
|
||||
icon: this._options.newPointIcon
|
||||
}
|
||||
});
|
||||
|
||||
const previousPoint = points[pointNo == 0 ? pointNo : pointNo - 1];
|
||||
var newPointMarker = L.marker(
|
||||
[(latLng.lat + previousPoint.lat) / 2.0,
|
||||
(latLng.lng + previousPoint.lng) / 2.0],
|
||||
{ draggable: true, icon: this._options.newPointIcon }
|
||||
);
|
||||
|
||||
marker.newPointMarker = newPointMarker;
|
||||
|
||||
newPointMarker.on('dragstart', (event) => {
|
||||
const pointNo = that._getPointNo(event.target);
|
||||
const previousPoint = that._markers[pointNo - 1].getLatLng();
|
||||
const nextPoint = that._markers[pointNo].getLatLng();
|
||||
that._setupDragLines(marker.newPointMarker, previousPoint, nextPoint);
|
||||
const point = that._getPointNo(event.target);
|
||||
const previous = that._markers[point - 1].getLatLng();
|
||||
const next = that._markers[point].getLatLng();
|
||||
that._setupDragLines(marker.newPointMarker, previous, next);
|
||||
|
||||
that._hideAll(marker.newPointMarker);
|
||||
});
|
||||
|
||||
newPointMarker.on('dragend', (event) => {
|
||||
const marker = event.target;
|
||||
const pointNo = that._getPointNo(event.target);
|
||||
|
|
@ -394,6 +431,7 @@ L.Polyline.polylineEditor = L.Polyline.extend({
|
|||
that._reloadPolyline();
|
||||
}, 25);
|
||||
});
|
||||
|
||||
newPointMarker.on('contextmenu', (event) => {
|
||||
// 1. Remove this polyline from map
|
||||
var marker = event.target;
|
||||
|
|
@ -429,38 +467,40 @@ L.Polyline.polylineEditor = L.Polyline.extend({
|
|||
|
||||
this._markers.splice(pointNo, 0, marker);
|
||||
|
||||
// User-defined custom event listeners:
|
||||
if (that._options.customPointListeners) {
|
||||
for (var eventName in that._options.customPointListeners) { marker.on(eventName, that._options.customPointListeners[eventName]); }
|
||||
}
|
||||
if (that._options.customNewPointListeners) {
|
||||
for (var eventName in that._options.customNewPointListeners) { newPointMarker.on(eventName, that._options.customNewPointListeners[eventName]); }
|
||||
}
|
||||
|
||||
if (fixNeighbourPositions) {
|
||||
this._fixAround(pointNo);
|
||||
}
|
||||
|
||||
return marker;
|
||||
};
|
||||
//
|
||||
// this._addNewPoint = pointNo => event => {
|
||||
// // if (that._markers.length === 1) {
|
||||
// // pointNo += 1;
|
||||
// // }
|
||||
// //
|
||||
// that._addMarkers(pointNo, event.latlng, true);
|
||||
// that._reloadPolyline();
|
||||
//
|
||||
// if (pointNo === 0) {
|
||||
// this._prepareForNewPoint(this._markers[0], 0);
|
||||
// } else {
|
||||
// this._prepareForNewPoint(this._markers[this._markers.length - 1], (this._markers.length));
|
||||
// }
|
||||
// };
|
||||
|
||||
this._addNewPoint = pointNo => event => {
|
||||
// if (that._markers.length === 1) {
|
||||
// pointNo += 1;
|
||||
// }
|
||||
//
|
||||
that._addMarkers(pointNo, event.latlng, true);
|
||||
that._reloadPolyline();
|
||||
this._addFirstPoint = event => {
|
||||
this._addMarkers(0, event.latlng, true);
|
||||
this._reloadPolyline();
|
||||
|
||||
if (pointNo === 0) {
|
||||
this._prepareForNewPoint(this._markers[0], 0);
|
||||
} else {
|
||||
this._prepareForNewPoint(this._markers[this._markers.length - 1], (this._markers.length));
|
||||
}
|
||||
console.log(this._markers);
|
||||
|
||||
this._map.off('click', this._addFirstPoint);
|
||||
this._prepareForNewPoint(this._markers[0], 0);
|
||||
};
|
||||
|
||||
this._addPointForward = event => {
|
||||
const pointNo = this._markers.length;
|
||||
const pointNo = (this._markers && this._markers.length) || 0;
|
||||
|
||||
that._addMarkers(pointNo, event.latlng, true);
|
||||
that._reloadPolyline();
|
||||
|
|
@ -477,10 +517,9 @@ L.Polyline.polylineEditor = L.Polyline.extend({
|
|||
/**
|
||||
* Event handlers for first and last point.
|
||||
*/
|
||||
this._prepareForNewPoint = (marker, pointNo) => {
|
||||
this._prepareForNewPoint = marker => {
|
||||
// This is slightly delayed to prevent the same propagated event
|
||||
// to be catched here:
|
||||
console.log('PREPARED!');
|
||||
|
||||
setTimeout(
|
||||
() => {
|
||||
|
|
@ -495,30 +534,37 @@ L.Polyline.polylineEditor = L.Polyline.extend({
|
|||
/**
|
||||
* Fix nearby new point markers when the new point is created.
|
||||
*/
|
||||
this._fixAround = function (pointNoOrMarker) {
|
||||
if ((typeof pointNoOrMarker) === 'number') { var pointNo = pointNoOrMarker; } else { var pointNo = that._markers.indexOf(pointNoOrMarker); }
|
||||
this._fixAround = pointNoOrMarker => {
|
||||
const pointNo = (typeof pointNoOrMarker) === 'number'
|
||||
? pointNoOrMarker
|
||||
: this._markers.indexOf(pointNoOrMarker);
|
||||
|
||||
if (pointNo < 0) { return; }
|
||||
|
||||
const previousMarker = pointNo == 0 ? null : that._markers[pointNo - 1];
|
||||
const marker = that._markers[pointNo];
|
||||
const nextMarker = pointNo < that._markers.length - 1 ? that._markers[pointNo + 1] : null;
|
||||
const previousMarker = pointNo === 0 ? null : this._markers[pointNo - 1];
|
||||
const marker = this._markers[pointNo];
|
||||
const nextMarker = pointNo < that._markers.length - 1 ? this._markers[pointNo + 1] : null;
|
||||
|
||||
if (marker && previousMarker) {
|
||||
marker.newPointMarker.setLatLng([(previousMarker.getLatLng().lat + marker.getLatLng().lat) / 2.0,
|
||||
(previousMarker.getLatLng().lng + marker.getLatLng().lng) / 2.0]);
|
||||
marker.newPointMarker.setLatLng([
|
||||
(previousMarker.getLatLng().lat + marker.getLatLng().lat) / 2.0,
|
||||
(previousMarker.getLatLng().lng + marker.getLatLng().lng) / 2.0
|
||||
]);
|
||||
}
|
||||
if (marker && nextMarker) {
|
||||
nextMarker.newPointMarker.setLatLng([(marker.getLatLng().lat + nextMarker.getLatLng().lat) / 2.0,
|
||||
(marker.getLatLng().lng + nextMarker.getLatLng().lng) / 2.0]);
|
||||
nextMarker.newPointMarker.setLatLng([
|
||||
(marker.getLatLng().lat + nextMarker.getLatLng().lat) / 2.0,
|
||||
(marker.getLatLng().lng + nextMarker.getLatLng().lng) / 2.0
|
||||
]);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Find the order number of the marker.
|
||||
*/
|
||||
this._getPointNo = function (marker) {
|
||||
for (let i = 0; i < this._markers.length; i++) {
|
||||
if (marker == this._markers[i] || marker == this._markers[i].newPointMarker) {
|
||||
this._getPointNo = (marker) => {
|
||||
for (let i = 0; i < this._markers.length; i += 1) {
|
||||
if (marker === this._markers[i] || marker === this._markers[i].newPointMarker) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
|
|
@ -528,11 +574,7 @@ L.Polyline.polylineEditor = L.Polyline.extend({
|
|||
/**
|
||||
* Get polyline latLngs based on marker positions.
|
||||
*/
|
||||
this._getMarkerLatLngs = function () {
|
||||
const result = [];
|
||||
for (let i = 0; i < this._markers.length; i++) { result.push(this._markers[i].getLatLng()); }
|
||||
return result;
|
||||
};
|
||||
this._getMarkerLatLngs = () => this._markers.map(marker => marker.getLatLng());
|
||||
|
||||
this._moveDragLines = event => {
|
||||
if (this.constr.line1) { this.constr.line1.setLatLngs([event.latlng, this.constr.point1]); }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue