dist and time

finishing route

src/modules/Editor.js

@@ -11,14 +11,19 @@ export class Editor {
     mode,
     setMode,
     setRouterPoints,
+    setTotalDist,
   }) {
     this.map = new Map({ container });
 
-    const { lockMapClicks, routerMoveStart, map: { map } } = this;
+    const {
+      lockMapClicks, routerMoveStart, changeMode, pushPolyPoints, map: { map }
+    } = this;
 
-    this.poly = new Poly({ map, routerMoveStart, lockMapClicks });
+    this.poly = new Poly({ map, routerMoveStart, lockMapClicks, setTotalDist });
     this.stickers = new Stickers({ map, lockMapClicks });
-    this.router = new Router({ map, lockMapClicks, setRouterPoints });
+    this.router = new Router({
+      map, lockMapClicks, setRouterPoints, changeMode, pushPolyPoints
+    });
     this.shotter = new Shotter({ map });
 
     this.setMode = setMode;
@@ -98,6 +103,10 @@ export class Editor {
   routerMoveStart = () => {
     const { _latlngs } = this.poly.poly;
 
-    if (_latlngs) this.router.moveStart(_latlngs[_latlngs.length-1]);
+    if (_latlngs) this.router.moveStart(_latlngs[_latlngs.length - 1]);
+  };
+
+  pushPolyPoints = latlngs => {
+    this.poly.pushPoints(latlngs);
   }
 }

src/modules/Poly.js

@@ -1,16 +1,21 @@
-import { polyline } from "leaflet";
+import L from 'leaflet';
+import 'leaflet-geometryutil';
+import { simplify } from '$utils/simplify';
 
 const polyStyle = { color: 'url(#activePathGradient)', weight: '6' };
 // const polyStyle = { color: '#ff3344', weight: '5' };
 
 export class Poly {
-  constructor({ map, routerMoveStart, lockMapClicks }) {
-    this.poly = polyline([], polyStyle);
+  constructor({
+    map, routerMoveStart, lockMapClicks, setTotalDist
+  }) {
+    this.poly = L.polyline([], polyStyle);
     this.latlngs = [];
     this.poly.addTo(map);
     this.map = map;
 
     this.routerMoveStart = routerMoveStart;
+    this.setTotalDist = setTotalDist;
     this.lockMapClicks = lockMapClicks;
     this.bindEvents();
   }
@@ -19,7 +24,10 @@ export class Poly {
     console.log('upd');
     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 && parseFloat(meters.toFixed(1))) || 0;
 
+    this.setTotalDist(kilometers);
     this.routerMoveStart();
   };
 
@@ -59,9 +67,11 @@ export class Poly {
 
   continue = () => {
     if (this.latlngs && this.latlngs.length) {
+      console.log('continue?');
       this.poly.enableEdit().continueForward();
       this.poly.editor.reset();
     } else {
+      console.log('start over');
       this.poly = this.map.editTools.startPolyline();
       this.poly.setStyle(polyStyle);
     }
@@ -78,5 +88,17 @@ export class Poly {
 
   lockMap = () => {
     this.lockMapClicks(true);
+  };
+
+  pushPoints = latlngs => {
+    const { map } = this;
+    const simplified = simplify({ map, latlngs });
+    const summary = [
+      ...this.poly.getLatLngs(),
+      ...simplified,
+    ];
+
+    this.poly.setLatLngs(summary);
+    this.updateMarks();
   }
 }

src/modules/Router.js

@@ -2,9 +2,16 @@ import L from 'leaflet';
 import Routing from 'leaflet-routing-machine/src/index';
 import { CONFIG } from '$config';
 import { DomMarker } from '$utils/DomMarker';
+import { MODES } from '$constants/modes';
 
 export class Router {
-  constructor({ map, lockMapClicks, setRouterPoints }) {
+  constructor({ map, lockMapClicks, setRouterPoints, changeMode, pushPolyPoints }) {
+    this.waypoints = [];
+    this.lockMapClicks = lockMapClicks;
+    this.setRouterPoints = setRouterPoints;
+    this.changeMode = changeMode;
+    this.pushPolyPoints = pushPolyPoints;
+
     const routeLine = r => Routing.line(r, {
       styles: [
         { color: 'white', opacity: 0.8, weight: 6 },
@@ -36,9 +43,6 @@ export class Router {
 
     this.router.addTo(map);
 
-    this.waypoints = [];
-    this.lockMapClicks = lockMapClicks;
-    this.setRouterPoints = setRouterPoints;
     // this.router._line.on('mousedown', console.log);
   }
   //
@@ -109,5 +113,20 @@ export class Router {
   updateWaypointsCount = () => {
     const waypoints = this.router.getWaypoints().filter(({ latLng }) => !!latLng);
     this.setRouterPoints(waypoints.length);
-  }
+  };
+
+  cancelDrawing = () => {
+    this.router.setWaypoints([]);
+    this.changeMode(MODES.NONE);
+  };
+
+  submitDrawing = () => {
+    const [route] = this.router._routes;
+    if (!route) return;
+
+    const { coordinates, summary: { totalDistance } } = route;
+    this.pushPolyPoints(coordinates);
+    this.router.setWaypoints([]);
+    this.changeMode(MODES.POLY);
+  };
 }

src/modules/Sticker.js

@@ -118,9 +118,9 @@ export class Sticker {
 
   generateStickerSVG = sticker => (
     `
-    <svg width="64" height="64">
-       <use xlink:href="${stickers}#sticker-${sticker}" x="0" y="0" width="64" height="64" />
-    </svg>
+      <svg width="64" height="64">
+         <use xlink:href="${stickers}#sticker-${sticker}" x="0" y="0" width="64" height="64" />
+      </svg>
     `
   )
 }