handling distance changes

src/modules/Poly.ts

@@ -31,24 +31,10 @@ export class Poly {
       color: 'url(#activePathGradient)',
       weight: 6,
       maxMarkers: 300,
-    });
+    })
-    // this.poly = new EditablePolyline([], {
+      .on('distancechange', this.onDistanceUpdate);
-    //   ...polyStyle,
-    //   maxMarkers: 100,
-    //
-    //   onPointsSet: this.updateMarks,
-    //   onMarkerDragEnd: this.updateMarks,
-    //   onPointAdded: this.updateMarks,
-    //   onPointDropped: this.updateMarks,
-    //   onContinueDrawing: this.setModeOnDrawing,
-    //
-    //   onMarkersHide: () => editor.setMarkersShown(false),
-    //   onMarkersShow: () => editor.setMarkersShown(true),
-    // }).addTo(map);
 
     this.poly.addTo(map);
-    // todo: uncomment
-    // this.poly._reloadPolyline();
     this.editor = editor;
 
     this.map = map;
@@ -61,72 +47,47 @@ export class Poly {
     this.arrows.addTo(map);
   }
 
-  setModeOnDrawing = (): void => {
+  onDistanceUpdate = (event) => {
-    if (this.editor.getMode() !== MODES.POLY) this.editor.setMode(MODES.POLY);
+    const { distance } = event as { distance: number };
-  };
+    this.setDistance(parseFloat(distance.toFixed(2)));
-
-  drawArrows = () => {
-    // todo: fix this
-    this.arrows.clearLayers();
-    const { latlngs } = this;
-
-    if (!latlngs || latlngs.length <= 1) return;
-
-    latlngs.forEach((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 Polyline(
-        [
-          latlngs[i - 1],
-          [mid.lat, mid.lng]
-        ],
-        { color: 'none', weight: CLIENT.STROKE_WIDTH }
-      ).addTo(this.arrows) as any;
-
-      // todo: uncomment and fix this:
-      slide._path.setAttribute('marker-end', 'url(#long-arrow)');
-    });
-  };
-
-  updateMarks = () => {
-    const coords = this.poly.toGeoJSON().geometry.coordinates;
-
-    // const meters = (this.latlngs && this.latlngs.length > 1 && getPolyLength(this.latlngs)) || 0;
-    // const kilometers = (meters && Number(meters.toFixed(1))) || 0;
-
-    const kilometers = ((this.latlngs && this.latlngs.length > 1 && getPolyLength(this.latlngs)) || 0);
-
-    this.setDistance(parseFloat(kilometers.toFixed(2)));
-    this.routerMoveStart();
-
-    this.drawArrows(); // <-- uncomment
-
-    if (coords.length > 1) this.triggerOnChange();
   };
+  // setModeOnDrawing = (): void => {
+  //   if (this.editor.getMode() !== MODES.POLY) this.editor.setMode(MODES.POLY);
+  // };
   //
-  // preventMissClicks = (e): void => {
+  // drawArrows = () => {
-  //   const mode = this.editor.getMode();
+  //   // todo: fix this
+  //   this.arrows.clearLayers();
+  //   const { latlngs } = this;
   //
-  //   if (mode === MODES.POLY) return;
+  //   if (!latlngs || latlngs.length <= 1) return;
   //
-  //   e.cancel();
+  //   latlngs.forEach((latlng, i) => {
+  //     if (i === 0) return;
   //
-  //   if (mode === MODES.NONE) this.editor.setMode(MODES.POLY);
+  //     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 Polyline(
+  //       [
+  //         latlngs[i - 1],
+  //         [mid.lat, mid.lng]
+  //       ],
+  //       { color: 'none', weight: CLIENT.STROKE_WIDTH }
+  //     ).addTo(this.arrows) as any;
+  //
+  //     // todo: uncomment and fix this:
+  //     slide._path.setAttribute('marker-end', 'url(#long-arrow)');
+  //   });
   // };
 
   continue = (): void => {
-    // todo: implement
     this.poly.editor.continue();
   };
 
   stop = (): void => {
-    // todo: implement
-    // if (this.poly) this.poly.editor.stopDrawing();
     this.poly.stopDrawing();
   };
 
@@ -134,20 +95,10 @@ export class Poly {
     this.poly.editor.enable();
   };
 
-  continueForward = (): void => {
-    // todo: implement
-    this.poly.editor.continue();
-  };
-
-  lockMap = (): void => {
-    this.lockMapClicks(true);
-  };
-
   setPoints = (latlngs: Array<ILatLng>): void => {
     console.log('setP');
 
     if (!latlngs || latlngs.length <= 1) return;
-    // todo: implement
     this.poly.setPoints(latlngs);
   };
 
@@ -160,18 +111,13 @@ export class Poly {
     ];
 
     this.poly.setPoints(summary);
-    this.updateMarks();
   };
 
   clearAll = (): void => {
-    // this.poly.setLatLngs([]);
-    // todo: implement
-    // this.poly.editor.clear();
     this.poly.setPoints([]);
-    this.updateMarks();
   };
 
-  clearArrows = (): LayerGroup<any> => this.arrows.clearLayers();
+  // clearArrows = (): LayerGroup<any> => this.arrows.clearLayers();
 
   dumpData = (): Array<LatLng> => this.latlngs;