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

new-poly: its finally working

Browse source
This commit is contained in:
muerwre 2018-12-24 13:44:14 +07:00
parent 34f99771b1
commit aab1ee18b8
2 changed files with 89 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/modules/NewPoly.js
View file

@ -33,6 +33,7 @@ export class NewPoly {
onMarkerDragEnd: this.updateMarks, onMarkerDragEnd: this.updateMarks,
onPointAdded: this.updateMarks, onPointAdded: this.updateMarks,
onPointDropped: this.updateMarks, onPointDropped: this.updateMarks,
onContinueDrawing: this.setModeOnDrawing,
onMarkersHide: () => console.log('all markers are hidden'), onMarkersHide: () => console.log('all markers are hidden'),
onMarkersShow: () => console.log('all markers are visible'), onMarkersShow: () => console.log('all markers are visible'),
@ -53,6 +54,9 @@ export class NewPoly {
this.arrows = new L.LayerGroup().addTo(map); this.arrows = new L.LayerGroup().addTo(map);
} }
setModeOnDrawing = () => {
if (this.editor.getMode() !== MODES.POLY) this.editor.setMode(MODES.POLY);
};
drawArrows = () => { drawArrows = () => {
this.arrows.clearLayers(); this.arrows.clearLayers();
@ -80,8 +84,8 @@ export class NewPoly {
}); });
}; };
updateMarks = (e) => { updateMarks = (e, callee) => {
// console.log('upd', e); console.log('upd', callee);
// return; // return;
const coords = this.poly.toGeoJSON().geometry.coordinates; const coords = this.poly.toGeoJSON().geometry.coordinates;

159
src/utils/EditablePolyline.js
View file

@ -71,7 +71,6 @@ L.Polyline.polylineEditor = L.Polyline.extend({
}, },
continueForward: () => { continueForward: () => {
if (this.getLatLngs().length === 0) { if (this.getLatLngs().length === 0) {
return this._map.on('click', this._addFirstPoint); return this._map.on('click', this._addFirstPoint);
} }
@ -253,9 +252,9 @@ L.Polyline.polylineEditor = L.Polyline.extend({
} }
if (found < that._options.maxMarkers) { if (found < that._options.maxMarkers) {
console.log('shown'); // todo: onHide // console.log('shown'); // todo: onHide
} else { } else {
console.log('hidden'); // todo: onShow // console.log('hidden'); // todo: onShow
} }
// todo: optimise this // todo: optimise this
@ -351,10 +350,12 @@ L.Polyline.polylineEditor = L.Polyline.extend({
}; };
this._onMarkerDrag = (event) => { this._onMarkerDrag = (event) => {
// if (this.constr.is_drawing) {
// this._map.off('click', this._addFirstPoint);
// this._map.off('click', this._addPointForward);
// }
if (this._options.onMarkerDragStart) this._options.onMarkerDragStart(event); if (this._options.onMarkerDragStart) this._options.onMarkerDragStart(event);
if (this.constr.is_drawing) {
that._map.off('click', this._addPointForward);
}
if (this.constr.line1) that._map.removeLayer(this.constr.line1); if (this.constr.line1) that._map.removeLayer(this.constr.line1);
if (this.constr.line2) that._map.removeLayer(this.constr.line2); if (this.constr.line2) that._map.removeLayer(this.constr.line2);
@ -370,11 +371,15 @@ L.Polyline.polylineEditor = L.Polyline.extend({
this._onMarkerDrop = event => { this._onMarkerDrop = event => {
const point = that._getPointNo(event.target); const point = that._getPointNo(event.target);
setTimeout(() => { // setTimeout(() => {
this._reloadPolyline(point); this._reloadPolyline(point);
}, 25);
if (this._options.onMarkerDragEnd) this._options.onMarkerDragEnd(event); if (this._options.onMarkerDragEnd) this._options.onMarkerDragEnd(event);
//
// if (this.constr.is_drawing) {
// setTimeout(this._prepareForNewPoint.bind(this), 25);
// }
// }, 25);
}; };
/** /**
* Add two markers (a point marker and his newPointMarker) for a * Add two markers (a point marker and his newPointMarker) for a
@ -392,15 +397,19 @@ L.Polyline.polylineEditor = L.Polyline.extend({
marker.on('dragstart', this._onMarkerDrag); marker.on('dragstart', this._onMarkerDrag);
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 = this._getPointNo(event.target);
// that._map.removeLayer(_marker);
// // that._map.removeLayer(newPointMarker); if (!this._markers || this._markers.length <= 2) return;
// if (this.constr.is_drawing) return;
// that._markers.splice(_pointNo, 1);
// that._reloadPolyline(_pointNo); this._map.removeLayer(_marker);
// }); // that._map.removeLayer(newPointMarker);
this._markers.splice(_pointNo, 1);
this._reloadPolyline(_pointNo);
});
// marker.on(that._options.addFirstLastPointEvent, (event) => { // marker.on(that._options.addFirstLastPointEvent, (event) => {
// console.log('click on marker'); // console.log('click on marker');
@ -444,56 +453,55 @@ L.Polyline.polylineEditor = L.Polyline.extend({
marker.newPointMarker = newPointMarker; marker.newPointMarker = newPointMarker;
newPointMarker.on('dragstart', (event) => { newPointMarker.on('dragstart', (event) => {
this._clearDragLines();
const point = that._getPointNo(event.target); const point = that._getPointNo(event.target);
const previous = that._markers[point - 1].getLatLng(); const previous = that._markers[point - 1].getLatLng();
const next = that._markers[point].getLatLng(); const next = that._markers[point].getLatLng();
that._setupDragLines(marker.newPointMarker, previous, next); this._setupDragLines(marker.newPointMarker, previous, next);
that._hideAll(marker.newPointMarker); this._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);
that._addMarkers(pointNo, marker.getLatLng(), true); this._addMarkers(pointNo, marker.getLatLng(), true);
if (this._options.onPointAdded) this._options.onPointAdded(event); // setTimeout(() => {
this._reloadPolyline();
setTimeout(that._reloadPolyline, 25); if (this._options.onPointAdded) this._options.onPointAdded(event, 'added');
// }, 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;
const pointNo = that._getPointNo(marker); // const pointNo = that._getPointNo(marker);
const markers = that.getPoints(); // const markers = that.getPoints();
that._hideAll(); // that._hideAll();
//
const secondPartMarkers = that._markers.slice(pointNo, pointNo.length); // const secondPartMarkers = that._markers.slice(pointNo, pointNo.length);
that._markers.splice(pointNo, that._markers.length - pointNo); // that._markers.splice(pointNo, that._markers.length - pointNo);
//
that._reloadPolyline(); // that._reloadPolyline();
//
const points = []; // const points = [];
const contexts = []; // const contexts = [];
for (let i = 0; i < secondPartMarkers.length; i++) { // for (let i = 0; i < secondPartMarkers.length; i += 1) {
var marker = secondPartMarkers[i]; // const item = secondPartMarkers[i];
points.push(marker.getLatLng()); // points.push(item.getLatLng());
contexts.push(marker.context); // contexts.push(item.context);
} // }
//
console.log(`points:${points}`); // // Need to know the current polyline order numbers, because
console.log(`contexts:${contexts}`); // // the splitted one need to be inserted immediately after:
// const originalPolylineNo = that._map._editablePolylines.indexOf(that);
// Need to know the current polyline order numbers, because //
// the splitted one need to be inserted immediately after: // L.Polyline.PolylineEditor(points, that._options, contexts, originalPolylineNo + 1)
const originalPolylineNo = that._map._editablePolylines.indexOf(that); // .addTo(that._map);
//
L.Polyline.PolylineEditor(points, that._options, contexts, originalPolylineNo + 1) // that._showBoundMarkers();
.addTo(that._map); // });
that._showBoundMarkers();
});
this._markers.splice(pointNo, 0, marker); this._markers.splice(pointNo, 0, marker);
@ -523,44 +531,42 @@ L.Polyline.polylineEditor = L.Polyline.extend({
this._addMarkers(0, event.latlng, true); this._addMarkers(0, event.latlng, true);
this._reloadPolyline(); this._reloadPolyline();
console.log(this._markers);
this._map.off('click', this._addFirstPoint); this._map.off('click', this._addFirstPoint);
this._prepareForNewPoint(this._markers[0], 0); this._prepareForNewPoint(this._markers[0], 0);
}; };
this._addPointForward = event => { this._addPointForward = event => {
if (event.sourceTarget && typeof event.sourceTarget._moved === 'boolean' && event.sourceTarget._moved) {
// prevent from adding markers after drag
this._map.off('click', this._addPointForward);
this._clearDragLines();
setTimeout(this._prepareForNewPoint.bind(this), 25);
return;
}
if (this._options.onPointAdded) this._options.onPointAdded(event); if (this._options.onPointAdded) this._options.onPointAdded(event);
const pointNo = (this._markers && this._markers.length) || 0; const pointNo = (this._markers && this._markers.length) || 0;
that._addMarkers(pointNo, event.latlng, true); this._addMarkers(pointNo, event.latlng, true);
that._reloadPolyline(); this._reloadPolyline();
that._map.off('click', this._addPointForward); this._map.off('click', this._addPointForward);
if (pointNo === 0) { setTimeout(this._prepareForNewPoint.bind(this), 25);
this._prepareForNewPoint(this._markers[0], 0);
} else {
this._prepareForNewPoint(this._markers[this._markers.length - 1], (this._markers.length));
}
}; };
/** /**
* Event handlers for first and last point. * Event handlers for first and last point.
*/ */
this._prepareForNewPoint = marker => { this._prepareForNewPoint = target => {
// This is slightly delayed to prevent the same propagated event if (this._options.onContinueDrawing) this._options.onContinueDrawing();
// to be catched here:
setTimeout( const marker = target || this._markers[this._markers.length - 1];
() => { this._setupDragLines(marker, marker.getLatLng());
that._setupDragLines(marker, marker.getLatLng());
// that._map.once('click', this._addNewPoint(pointNo)); this._map.on('click', this._addPointForward);
that._map.on('click', this._addPointForward);
},
100
);
}; };
/** /**
@ -615,7 +621,6 @@ L.Polyline.polylineEditor = L.Polyline.extend({
this._clearDragLines = event => { this._clearDragLines = event => {
if (that._map && this.constr.is_drawing) { if (that._map && this.constr.is_drawing) {
if (this.constr.line1) that._map.removeLayer(this.constr.line1); if (this.constr.line1) that._map.removeLayer(this.constr.line1);
if (this.constr.line2) that._map.removeLayer(this.constr.line2); if (this.constr.line2) that._map.removeLayer(this.constr.line2);
that._map.off('mousemove', this._moveDragLines); that._map.off('mousemove', this._moveDragLines);