new-poly: it works (without dump)

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({
+    // this.newPoly = new NewPoly({
-      map, editor: this,
+    //   map, editor: this,
-    });
+    // });
 
     this.stickers = new Stickers({ map, lockMapClicks, triggerOnChange });
     this.router = new Router({

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,
+      maxMarkers: 50,
-      customPointListeners,
+
-      customNewPointListenets: customPointListeners,
+      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 = () => {
+  updateMarks = (e) => {
-    return;
+    // 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 = () => {

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) {
+      for (let i = 0; i < this._map._editablePolylines.length; i += 1) {
-        const polyline = this._editablePolylines[i];
+        const polyline = this._map._editablePolylines[i];
 
         if (enabled) {
           polyline._showBoundMarkers();
@@ -61,34 +61,51 @@ L.Polyline.polylineEditor = L.Polyline.extend({
       }
     };
 
-    this.enableEditing = () => {
+    this.editor = {
+      enable: () => {
         this._map.setEditablePolylinesEnabled(true);
-    };
+      },
 
-    this.disableEditing = () => {
+      disable: () => {
         this._map.setEditablePolylinesEnabled(false);
-    };
+      },
+
+      continueForward: () => {
 
-    this.continueForwards = () => {
         if (this.getLatLngs().length === 0) {
-        this._map.on('click', this._addFirstPoint);
+          return this._map.on('click', this._addFirstPoint);
-        return;
         }
 
         if (!this._editablePolylinesEnabled) {
           this._map.setEditablePolylinesEnabled(true);
         }
 
-      that._prepareForNewPoint(
+        this._prepareForNewPoint(
           this._markers[this._markers.length - 1],
           this._markers.length,
         );
-    };
 
-    this.stopDrawing = () => {
+        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();
+      }
     };
 
     /*
@@ -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();
+        if (this._options.onPointAdded) this._options.onPointAdded(event);
-        }, 25);
+
+        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