muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 02:56:41 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

new-poly: continuing poly

Browse source
This commit is contained in:
muerwre 2018-12-18 18:17:54 +07:00
parent 2f9952e8fa
commit fbf4c06370
2 changed files with 367 additions and 165 deletions
Download patch file Download diff file Expand all files Collapse all files

196
src/modules/NewPoly.js
View file

@ -19,27 +19,187 @@ export class NewPoly {
}) { }) {
// this.poly = L.polyline([], polyStyle); // this.poly = L.polyline([], polyStyle);
const coordinates = [ const coordinates = [
[54.985987, 82.921543], // { lat: 54.9859, lng: 82.92154 },
[55.03845, 82.97699], // { lat: 55.0384, lng: 82.97699 },
[55.0345, 82.67699], // { lat: 55.0345, lng: 82.67699 },
[55.0145, 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); this.poly.addTo(map);
map.fitBounds(this.poly.getBounds()); this.poly._reloadPolyline();
// this.editor = editor;
// this.latlngs = [];
// this.poly.addTo(map); this.map = map;
// this.editor = editor;
// this.routerMoveStart = routerMoveStart;
// this.map = map; this.setTotalDist = setTotalDist;
// this.triggerOnChange = triggerOnChange;
// this.routerMoveStart = routerMoveStart; this.lockMapClicks = lockMapClicks;
// this.setTotalDist = setTotalDist;
// this.triggerOnChange = triggerOnChange;
// this.lockMapClicks = lockMapClicks;
// this.bindEvents(); // 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);
} }
} }

336
src/utils/EditablePolyline.js
View file

@ -1,3 +1,5 @@
import L from 'leaflet';
L.Polyline.polylineEditor = L.Polyline.extend({ L.Polyline.polylineEditor = L.Polyline.extend({
_prepareMapIfNeeded() { _prepareMapIfNeeded() {
const that = this; const that = this;
@ -13,16 +15,14 @@ L.Polyline.polylineEditor = L.Polyline.extend({
// Click anywhere on map to add a new point-polyline: // Click anywhere on map to add a new point-polyline:
if (this._options.newPolylines) { if (this._options.newPolylines) {
console.log('click na map');
that._map.on('dblclick', (event) => { 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; } if (that._map.isEditablePolylinesBusy()) { return; }
const latLng = event.latlng; const latLng = event.latlng;
if (that._options.newPolylineConfirmMessage) { // if (that._options.newPolylineConfirmMessage) {
if (!confirm(that._options.newPolylineConfirmMessage)) { return; } // if (!confirm(that._options.newPolylineConfirmMessage)) { return; }
} // }
const contexts = [{ originalPolylineNo: null, originalPointNo: null }]; const contexts = [{ originalPolylineNo: null, originalPointNo: null }];
L.Polyline.PolylineEditor([latLng], that._options, contexts).addTo(that._map); 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. * Check if there is *any* busy editable polyline on this map.
*/ */
this._map.isEditablePolylinesBusy = function () { this._map.isEditablePolylinesBusy = () => this._editablePolylines.some(el => el._isBusy());
const map = this; // {
for (let i = 0; i < map._editablePolylines.length; i++) { // for (let i = 0; i < this._editablePolylines.length; i += 1) {
if (map._editablePolylines[i]._isBusy()) { return true; } // if (this._editablePolylines[i]._isBusy()) { return true; }
} // }
//
return false; // return false;
}; // };
/** /**
* Enable/disable editing. * Enable/disable editing.
*/ */
this._map.setEditablePolylinesEnabled = function (enabled) { this._map.setEditablePolylinesEnabled = (enabled) => {
const map = this; // const map = this;
map._editablePolylinesEnabled = enabled; this._editablePolylinesEnabled = enabled;
for (let i = 0; i < map._editablePolylines.length; i++) {
const polyline = map._editablePolylines[i]; for (let i = 0; i < this._editablePolylines.length; i += 1) {
const polyline = this._editablePolylines[i];
if (enabled) { if (enabled) {
polyline._showBoundMarkers(); polyline._showBoundMarkers();
} else { } else {
@ -59,16 +61,20 @@ L.Polyline.polylineEditor = L.Polyline.extend({
} }
}; };
this.enableEditing = function () { this.enableEditing = () => {
this._map.setEditablePolylinesEnabled(true); this._map.setEditablePolylinesEnabled(true);
}; };
this.disableEditing = function () { this.disableEditing = () => {
this._map.setEditablePolylinesEnabled(false); this._map.setEditablePolylinesEnabled(false);
}; };
this.continueForwards = () => {
if (this.getLatLngs().length === 0) {
this._map.on('click', this._addFirstPoint);
return;
}
this.continueForwards = function () {
if (!this._editablePolylinesEnabled) { if (!this._editablePolylinesEnabled) {
this._map.setEditablePolylinesEnabled(true); this._map.setEditablePolylinesEnabled(true);
} }
@ -81,22 +87,19 @@ L.Polyline.polylineEditor = L.Polyline.extend({
this.stopDrawing = () => { this.stopDrawing = () => {
this._clearDragLines(); 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 * Utility method added to this map to retreive editable
* polylines. * polylines.
*/ */
this._map.getEditablePolylines = function () { this._map.getEditablePolylines = () => this._editablePolylines;
const map = this;
return map._editablePolylines;
};
this._map.fixAroundEditablePoint = function (marker) { this._map.fixAroundEditablePoint = marker => {
const map = this; for (let i = 0; i < this._editablePolylines.length; i += 1) {
for (let i = 0; i < map._editablePolylines.length; i++) { const polyline = this._editablePolylines[i];
const polyline = map._editablePolylines[i];
polyline._reloadPolyline(marker); polyline._reloadPolyline(marker);
} }
}; };
@ -109,7 +112,7 @@ L.Polyline.polylineEditor = L.Polyline.extend({
_addMethods() { _addMethods() {
const that = this; const that = this;
this._init = function (options, contexts) { this._init = (options, contexts) => {
this._prepareMapIfNeeded(); this._prepareMapIfNeeded();
/** /**
@ -122,9 +125,10 @@ L.Polyline.polylineEditor = L.Polyline.extend({
this._markers = []; this._markers = [];
const points = this.getLatLngs(); 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]); const marker = this._addMarkers(i, points[i]);
if (!('context' in marker)) { if (!('context' in marker)) {
marker.context = {}; marker.context = {};
if (that._contexts != null) { if (that._contexts != null) {
@ -137,13 +141,8 @@ L.Polyline.polylineEditor = L.Polyline.extend({
} }
// Map move => show different editable markers: // Map move => show different editable markers:
const map = this._map; this._map.on('zoomend', this._showBoundMarkers);
this._map.on('zoomend', (e) => { this._map.on('moveend', this._showBoundMarkers);
that._showBoundMarkers();
});
this._map.on('moveend', (e) => {
that._showBoundMarkers();
});
if (this._desiredPolylineNo && this._desiredPolylineNo != null) { if (this._desiredPolylineNo && this._desiredPolylineNo != null) {
this._map._editablePolylines.splice(this._desiredPolylineNo, 0, this); 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 * Check if is busy adding/moving new nodes. Note, there may be
* *other* editable polylines on the same map which *are* busy. * *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. * Get markers for this polyline.
*/ */
this.getPoints = function () { this.getPoints = () => this._markers;
return this._markers;
};
this.isChanged = function () { this.isChanged = () => this._changed;
return this._changed;
};
this._parseOptions = function (options) {
if (!options) { options = {}; }
this._parseOptions = (original = {}) => {
const options = { ...original };
// Do not show edit markers if more than maxMarkers would be shown: // Do not show edit markers if more than maxMarkers would be shown:
if (!('maxMarkers' in options)) { options.maxMarkers = 100; } if (!('maxMarkers' in original)) { options.maxMarkers = 100; }
if (!('newPolylines' in options)) { options.newPolylines = false; } if (!('newPolylines' in original)) { options.newPolylines = false; }
if (!('newPolylineConfirmMessage' in options)) { options.newPolylineConfirmMessage = ''; } if (!('newPolylineConfirmMessage' in options)) { options.newPolylineConfirmMessage = ''; }
if (!('addFirstLastPointEvent' in options)) { options.addFirstLastPointEvent = 'click'; } if (!('addFirstLastPointEvent' in options)) { options.addFirstLastPointEvent = 'click'; }
if (!('customPointListeners' in options)) { options.customPointListeners = {}; } 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 * number of markers. This method is called on eventy that change map
* bounds. * bounds.
*/ */
this._showBoundMarkers = function () { this._showBoundMarkers = () => {
if (!that._map) { if (!that._map) {
return; return;
} }
this._setBusy(false); this._setBusy(false);
if (!that._map._editablePolylinesEnabled) { if (!that._map._editablePolylinesEnabled) return;
console.log('Do not show because editing is disabled');
return;
}
const bounds = that._map.getBounds(); const bounds = that._map.getBounds();
let found = 0; let found = 0;
for (var polylineNo in that._map._editablePolylines) {
var polyline = that._map._editablePolylines[polylineNo]; for (let polylineNo in that._map._editablePolylines) {
for (var markerNo in polyline._markers) { const polyline = that._map._editablePolylines[polylineNo];
var marker = polyline._markers[markerNo];
for (let markerNo in polyline._markers) {
const marker = polyline._markers[markerNo];
if (bounds.contains(marker.getLatLng())) { found += 1; } if (bounds.contains(marker.getLatLng())) { found += 1; }
} }
} }
for (var polylineNo in that._map._editablePolylines) { for (let polylineNo in that._map._editablePolylines) {
var polyline = that._map._editablePolylines[polylineNo]; const polyline = that._map._editablePolylines[polylineNo];
for (var markerNo in polyline._markers) {
var marker = polyline._markers[markerNo]; for (let markerNo in polyline._markers) {
const marker = polyline._markers[markerNo];
if (found < that._options.maxMarkers) { if (found < that._options.maxMarkers) {
that._setMarkerVisible(marker, bounds.contains(marker.getLatLng())); that._setMarkerVisible(marker, bounds.contains(marker.getLatLng()));
that._setMarkerVisible(marker.newPointMarker, markerNo > 0 && 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 * with other markers (+ easier to decide where to put the point
* without too many markers). * without too many markers).
*/ */
this._hideAll = function (except) { this._hideAll = (except) => {
this._setBusy(true); this._setBusy(true);
for (const polylineNo in that._map._editablePolylines) { for (const polylineNo in that._map._editablePolylines) {
console.log(`hide ${polylineNo} markers`);
const polyline = that._map._editablePolylines[polylineNo]; const polyline = that._map._editablePolylines[polylineNo];
for (const markerNo in polyline._markers) { for (const markerNo in polyline._markers) {
const marker = polyline._markers[markerNo]; const marker = polyline._markers[markerNo];
if (except == null || except != marker) { polyline._setMarkerVisible(marker, false); } if (except == null || except !== marker) {
if (except == null || except != marker.newPointMarker) { polyline._setMarkerVisible(marker.newPointMarker, false); } 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. * Show/hide marker.
*/ */
this._setMarkerVisible = function (marker, show) { this._setMarkerVisible = (marker, show) => {
if (!marker) { return; } if (!marker) { return; }
const map = this._map; 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 * Reload polyline. If it is busy, then the bound markers will not be
* shown. * shown.
*/ */
this._reloadPolyline = function (fixAroundPointNo) { this._reloadPolyline = fixAroundPointNo => {
that.setLatLngs(that._getMarkerLatLngs()); this.setLatLngs(this._getMarkerLatLngs());
if (fixAroundPointNo != null) { that._fixAround(fixAroundPointNo); }
that._showBoundMarkers(); if (fixAroundPointNo != null) this._fixAround(fixAroundPointNo);
that._changed = true;
this._showBoundMarkers();
this._changed = true;
}; };
this._onMarkerDrag = (event) => { 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 * Markers are not added on the map here, the marker.addTo(map) is called
* only later when needed first time because of performance issues. * only later when needed first time because of performance issues.
*/ */
this._addMarkers = function (pointNo, latLng, fixNeighbourPositions) { this._addMarkers = (pointNo, latLng, fixNeighbourPositions) => {
const that = this;
const points = this.getLatLngs(); const points = this.getLatLngs();
const marker = L.marker(latLng, { draggable: true, icon: this._options.pointIcon }); 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('dragend', this._onMarkerDrop);
marker.on('contextmenu', (event) => { // marker.on('contextmenu', (event) => {
const marker = event.target; // const _marker = event.target;
const pointNo = that._getPointNo(event.target); // const _pointNo = that._getPointNo(event.target);
that._map.removeLayer(marker); // that._map.removeLayer(_marker);
that._map.removeLayer(newPointMarker); // // that._map.removeLayer(newPointMarker);
that._markers.splice(pointNo, 1); //
that._reloadPolyline(pointNo); // that._markers.splice(_pointNo, 1);
}); // that._reloadPolyline(_pointNo);
// });
marker.on(that._options.addFirstLastPointEvent, (event) => { // marker.on(that._options.addFirstLastPointEvent, (event) => {
console.log('click on marker'); // console.log('click on marker');
const marker = event.target; // const point = that._getPointNo(event.target);
const pointNo = that._getPointNo(event.target); // console.log(`pointNo=${point} that._markers.length=${that._markers.length}`);
console.log(`pointNo=${pointNo} that._markers.length=${that._markers.length}`); //
event.dont; // if (pointNo === 0 || pointNo === that._markers.length - 1) {
if (pointNo == 0 || pointNo == that._markers.length - 1) { // console.log('first or last');
console.log('first or last'); // that._prepareForNewPoint(event.target, point === 0 ? 0 : point + 1);
that._prepareForNewPoint(marker, pointNo == 0 ? 0 : pointNo + 1); // } else {
} else { // console.log('not first or last');
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; marker.newPointMarker = newPointMarker;
newPointMarker.on('dragstart', (event) => { newPointMarker.on('dragstart', (event) => {
const pointNo = that._getPointNo(event.target); const point = that._getPointNo(event.target);
const previousPoint = that._markers[pointNo - 1].getLatLng(); const previous = that._markers[point - 1].getLatLng();
const nextPoint = that._markers[pointNo].getLatLng(); const next = that._markers[point].getLatLng();
that._setupDragLines(marker.newPointMarker, previousPoint, nextPoint); that._setupDragLines(marker.newPointMarker, previous, next);
that._hideAll(marker.newPointMarker); that._hideAll(marker.newPointMarker);
}); });
newPointMarker.on('dragend', (event) => { newPointMarker.on('dragend', (event) => {
const marker = event.target; const marker = event.target;
const pointNo = that._getPointNo(event.target); const pointNo = that._getPointNo(event.target);
@ -394,6 +431,7 @@ L.Polyline.polylineEditor = L.Polyline.extend({
that._reloadPolyline(); that._reloadPolyline();
}, 25); }, 25);
}); });
newPointMarker.on('contextmenu', (event) => { newPointMarker.on('contextmenu', (event) => {
// 1. Remove this polyline from map // 1. Remove this polyline from map
var marker = event.target; var marker = event.target;
@ -429,38 +467,40 @@ L.Polyline.polylineEditor = L.Polyline.extend({
this._markers.splice(pointNo, 0, marker); 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) { if (fixNeighbourPositions) {
this._fixAround(pointNo); this._fixAround(pointNo);
} }
return marker; 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 => { this._addFirstPoint = event => {
// if (that._markers.length === 1) { this._addMarkers(0, event.latlng, true);
// pointNo += 1; this._reloadPolyline();
// }
//
that._addMarkers(pointNo, event.latlng, true);
that._reloadPolyline();
if (pointNo === 0) { console.log(this._markers);
this._prepareForNewPoint(this._markers[0], 0);
} else { this._map.off('click', this._addFirstPoint);
this._prepareForNewPoint(this._markers[this._markers.length - 1], (this._markers.length)); this._prepareForNewPoint(this._markers[0], 0);
}
}; };
this._addPointForward = event => { this._addPointForward = event => {
const pointNo = this._markers.length; const pointNo = (this._markers && this._markers.length) || 0;
that._addMarkers(pointNo, event.latlng, true); that._addMarkers(pointNo, event.latlng, true);
that._reloadPolyline(); that._reloadPolyline();
@ -477,10 +517,9 @@ L.Polyline.polylineEditor = L.Polyline.extend({
/** /**
* Event handlers for first and last point. * Event handlers for first and last point.
*/ */
this._prepareForNewPoint = (marker, pointNo) => { this._prepareForNewPoint = marker => {
// This is slightly delayed to prevent the same propagated event // This is slightly delayed to prevent the same propagated event
// to be catched here: // to be catched here:
console.log('PREPARED!');
setTimeout( setTimeout(
() => { () => {
@ -495,30 +534,37 @@ L.Polyline.polylineEditor = L.Polyline.extend({
/** /**
* Fix nearby new point markers when the new point is created. * Fix nearby new point markers when the new point is created.
*/ */
this._fixAround = function (pointNoOrMarker) { this._fixAround = pointNoOrMarker => {
if ((typeof pointNoOrMarker) === 'number') { var pointNo = pointNoOrMarker; } else { var pointNo = that._markers.indexOf(pointNoOrMarker); } const pointNo = (typeof pointNoOrMarker) === 'number'
? pointNoOrMarker
: this._markers.indexOf(pointNoOrMarker);
if (pointNo < 0) { return; } if (pointNo < 0) { return; }
const previousMarker = pointNo == 0 ? null : that._markers[pointNo - 1]; const previousMarker = pointNo === 0 ? null : this._markers[pointNo - 1];
const marker = that._markers[pointNo]; const marker = this._markers[pointNo];
const nextMarker = pointNo < that._markers.length - 1 ? that._markers[pointNo + 1] : null; const nextMarker = pointNo < that._markers.length - 1 ? this._markers[pointNo + 1] : null;
if (marker && previousMarker) { if (marker && previousMarker) {
marker.newPointMarker.setLatLng([(previousMarker.getLatLng().lat + marker.getLatLng().lat) / 2.0, marker.newPointMarker.setLatLng([
(previousMarker.getLatLng().lng + marker.getLatLng().lng) / 2.0]); (previousMarker.getLatLng().lat + marker.getLatLng().lat) / 2.0,
(previousMarker.getLatLng().lng + marker.getLatLng().lng) / 2.0
]);
} }
if (marker && nextMarker) { if (marker && nextMarker) {
nextMarker.newPointMarker.setLatLng([(marker.getLatLng().lat + nextMarker.getLatLng().lat) / 2.0, nextMarker.newPointMarker.setLatLng([
(marker.getLatLng().lng + nextMarker.getLatLng().lng) / 2.0]); (marker.getLatLng().lat + nextMarker.getLatLng().lat) / 2.0,
(marker.getLatLng().lng + nextMarker.getLatLng().lng) / 2.0
]);
} }
}; };
/** /**
* Find the order number of the marker. * Find the order number of the marker.
*/ */
this._getPointNo = function (marker) { this._getPointNo = (marker) => {
for (let i = 0; i < this._markers.length; i++) { for (let i = 0; i < this._markers.length; i += 1) {
if (marker == this._markers[i] || marker == this._markers[i].newPointMarker) { if (marker === this._markers[i] || marker === this._markers[i].newPointMarker) {
return i; return i;
} }
} }
@ -528,11 +574,7 @@ L.Polyline.polylineEditor = L.Polyline.extend({
/** /**
* Get polyline latLngs based on marker positions. * Get polyline latLngs based on marker positions.
*/ */
this._getMarkerLatLngs = function () { this._getMarkerLatLngs = () => this._markers.map(marker => marker.getLatLng());
const result = [];
for (let i = 0; i < this._markers.length; i++) { result.push(this._markers[i].getLatLng()); }
return result;
};
this._moveDragLines = event => { this._moveDragLines = event => {
if (this.constr.line1) { this.constr.line1.setLatLngs([event.latlng, this.constr.point1]); } if (this.constr.line1) { this.constr.line1.setLatLngs([event.latlng, this.constr.point1]); }