From bb5b5e5ad5f8d4ca7ebb78afc596782077dfbbd1 Mon Sep 17 00:00:00 2001 From: muerwre Date: Thu, 20 Dec 2018 18:36:07 +0700 Subject: [PATCH] new-poly: it works (without dump) --- src/modules/Editor.js | 8 +-- src/modules/NewPoly.js | 31 ++++++----- src/utils/EditablePolyline.js | 102 ++++++++++++++++++++++------------ 3 files changed, 87 insertions(+), 54 deletions(-) diff --git a/src/modules/Editor.js b/src/modules/Editor.js index 4dd1d11..67b67cf 100644 --- a/src/modules/Editor.js +++ b/src/modules/Editor.js @@ -38,13 +38,13 @@ export class Editor { map: { map } } = this; - this.poly = new Poly({ + this.poly = new NewPoly({ map, routerMoveStart, lockMapClicks, setTotalDist: this.setDistance, triggerOnChange, editor: this, }); - this.newPoly = new NewPoly({ - map, editor: this, - }); + // this.newPoly = new NewPoly({ + // map, editor: this, + // }); this.stickers = new Stickers({ map, lockMapClicks, triggerOnChange }); this.router = new Router({ diff --git a/src/modules/NewPoly.js b/src/modules/NewPoly.js index 14cc6d1..7a9da6d 100644 --- a/src/modules/NewPoly.js +++ b/src/modules/NewPoly.js @@ -25,18 +25,17 @@ export class NewPoly { // { lat: 55.0145, lng: 82.67699 }, ]; - 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, + maxMarkers: 50, + + onPointsSet: this.updateMarks, + onMarkerDragEnd: this.updateMarks, + onPointAdded: this.updateMarks, + onPointDropped: this.updateMarks, + + onMarkersHide: () => console.log('all markers are hidden'), + onMarkersShow: () => console.log('all markers are visible'), }).addTo(map); this.latlngs = []; @@ -82,9 +81,11 @@ export class NewPoly { }); }; - updateMarks = () => { - return; + updateMarks = (e) => { + // console.log('upd', e); + // 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; @@ -92,7 +93,7 @@ export class NewPoly { this.setTotalDist(kilometers); this.routerMoveStart(); - // this.drawArrows(); // <-- uncomment + this.drawArrows(); // <-- uncomment if (coords.length > 1) this.triggerOnChange(); }; @@ -144,7 +145,7 @@ export class NewPoly { }; continue = () => { - this.poly.continueForwards(); + this.poly.editor.continueForward(); // if (this.latlngs && this.latlngs.length) { // // this.poly.enableEdit().continueForward(); // // this.poly.editor.reset(); @@ -156,7 +157,7 @@ export class NewPoly { }; stop = () => { - if (this.poly) this.poly.stopDrawing(); + if (this.poly) this.poly.editor.stopDrawing(); }; continueForward = () => { diff --git a/src/utils/EditablePolyline.js b/src/utils/EditablePolyline.js index fd22ec9..4d11a8f 100644 --- a/src/utils/EditablePolyline.js +++ b/src/utils/EditablePolyline.js @@ -46,12 +46,12 @@ L.Polyline.polylineEditor = L.Polyline.extend({ /** * Enable/disable editing. */ - this._map.setEditablePolylinesEnabled = (enabled) => { + 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]; + for (let i = 0; i < this._map._editablePolylines.length; i += 1) { + const polyline = this._map._editablePolylines[i]; if (enabled) { polyline._showBoundMarkers(); @@ -61,34 +61,51 @@ L.Polyline.polylineEditor = L.Polyline.extend({ } }; - this.enableEditing = () => { - this._map.setEditablePolylinesEnabled(true); - }; - - this.disableEditing = () => { - this._map.setEditablePolylinesEnabled(false); - }; - - this.continueForwards = () => { - if (this.getLatLngs().length === 0) { - this._map.on('click', this._addFirstPoint); - return; - } - - if (!this._editablePolylinesEnabled) { + this.editor = { + enable: () => { this._map.setEditablePolylinesEnabled(true); + }, + + disable: () => { + this._map.setEditablePolylinesEnabled(false); + }, + + continueForward: () => { + + if (this.getLatLngs().length === 0) { + return this._map.on('click', this._addFirstPoint); + } + + if (!this._editablePolylinesEnabled) { + this._map.setEditablePolylinesEnabled(true); + } + + this._prepareForNewPoint( + this._markers[this._markers.length - 1], + this._markers.length, + ); + + return; + }, + + stopDrawing: () => { + this._clearDragLines(); + + this._map.off('click', this._addPointForward); + this._map.off('click', this._addFirstPoint); + }, + + reset: () => { + const latlngs = this.getLatLngs(); + + this._markers = []; + + for (let i = 0; i < latlngs.length; i += 1) { + this._addMarkers(i, latlngs[i]); + } + + this._reloadPolyline(); } - - that._prepareForNewPoint( - this._markers[this._markers.length - 1], - this._markers.length, - ); - }; - - this.stopDrawing = () => { - this._clearDragLines(); - this._map.off('click', this._addPointForward); - this._map.off('click', this._addFirstPoint); }; /* @@ -225,6 +242,7 @@ L.Polyline.polylineEditor = L.Polyline.extend({ const bounds = that._map.getBounds(); let found = 0; + // todo: optimise this for (let polylineNo in that._map._editablePolylines) { const polyline = that._map._editablePolylines[polylineNo]; @@ -234,6 +252,13 @@ L.Polyline.polylineEditor = L.Polyline.extend({ } } + if (found < that._options.maxMarkers) { + console.log('shown'); // todo: onHide + } else { + console.log('hidden'); // todo: onShow + } + + // todo: optimise this for (let polylineNo in that._map._editablePolylines) { const polyline = that._map._editablePolylines[polylineNo]; @@ -304,10 +329,12 @@ L.Polyline.polylineEditor = L.Polyline.extend({ this._markers = []; for (let i = 0; i < latlngs.length; i += 1) { - const marker = this._addMarkers(i, latlngs[i]); + this._addMarkers(i, latlngs[i]); } this._reloadPolyline(); + + if (this._options.onPointsSet) this._options.onPointsSet(latlngs); }; /** @@ -324,6 +351,7 @@ L.Polyline.polylineEditor = L.Polyline.extend({ }; this._onMarkerDrag = (event) => { + if (this._options.onMarkerDragStart) this._options.onMarkerDragStart(event); if (this.constr.is_drawing) { that._map.off('click', this._addPointForward); } @@ -345,6 +373,8 @@ L.Polyline.polylineEditor = L.Polyline.extend({ setTimeout(() => { this._reloadPolyline(point); }, 25); + + if (this._options.onMarkerDragEnd) this._options.onMarkerDragEnd(event); }; /** * Add two markers (a point marker and his newPointMarker) for a @@ -360,7 +390,6 @@ L.Polyline.polylineEditor = L.Polyline.extend({ marker.newPointMarker = null; marker.on('dragstart', this._onMarkerDrag); - marker.on('dragend', this._onMarkerDrop); // marker.on('contextmenu', (event) => { @@ -427,9 +456,10 @@ L.Polyline.polylineEditor = L.Polyline.extend({ const marker = event.target; const pointNo = that._getPointNo(event.target); that._addMarkers(pointNo, marker.getLatLng(), true); - setTimeout(() => { - that._reloadPolyline(); - }, 25); + + if (this._options.onPointAdded) this._options.onPointAdded(event); + + setTimeout(that._reloadPolyline, 25); }); newPointMarker.on('contextmenu', (event) => { @@ -500,6 +530,8 @@ L.Polyline.polylineEditor = L.Polyline.extend({ }; this._addPointForward = event => { + if (this._options.onPointAdded) this._options.onPointAdded(event); + const pointNo = (this._markers && this._markers.length) || 0; that._addMarkers(pointNo, event.latlng, true); @@ -688,7 +720,7 @@ L.Polyline.polylineEditor.addInitHook(function () { * original order number of this point. The order may change if some * markers before this one are delted or new added. */ -L.Polyline.PolylineEditor = function (latlngs, options, contexts, polylineNo) { +L.Polyline.PolylineEditor = (latlngs, options, contexts, polylineNo) => { // Since the app code may not be able to explicitly call the // initialization of all editable polylines (if the user created a new // one by splitting an existing), with this method you can control the