styled panels

src/modules/Editor.js

@@ -9,7 +9,8 @@ export class Editor {
   constructor({
     container,
     mode,
-    setMode
+    setMode,
+    setRouterPoints,
   }) {
     this.map = new Map({ container });
 
@@ -17,7 +18,7 @@ export class Editor {
 
     this.poly = new Poly({ map, routerMoveStart, lockMapClicks });
     this.stickers = new Stickers({ map, lockMapClicks });
-    this.router = new Router({ map, lockMapClicks });
+    this.router = new Router({ map, lockMapClicks, setRouterPoints });
     this.shotter = new Shotter({ map });
 
     this.setMode = setMode;
@@ -91,7 +92,7 @@ export class Editor {
 
     if (!latlngs || !latlngs.length) return;
 
-    this.router.startFrom(latlngs.pop());
+    this.router.startFrom(latlngs[latlngs.length - 1]);
   };
 
   routerMoveStart = () => {

src/modules/Map.js

@@ -8,7 +8,7 @@ export class Map {
   constructor({ container }) {
     this.map = map(container, { editable: true }).setView([55.0153275, 82.9071235], 13);
 
-    this.tileLayer = tileLayer(providers.default, {
+    this.tileLayer = tileLayer(providers.dgis, {
       attribution: 'Независимое Велосообщество',
       maxNativeZoom: 18,
       maxZoom: 18,

src/modules/Poly.js

@@ -1,6 +1,7 @@
 import { polyline } from "leaflet";
 
-const polyStyle = { color: 'url(#activePathGradient)', weight: '5' };
+const polyStyle = { color: 'url(#activePathGradient)', weight: '6' };
+// const polyStyle = { color: '#ff3344', weight: '5' };
 
 export class Poly {
   constructor({ map, routerMoveStart, lockMapClicks }) {

src/modules/Router.js

@@ -4,11 +4,13 @@ import { CONFIG } from '$config';
 import { DomMarker } from '$utils/DomMarker';
 
 export class Router {
-  constructor({ map, lockMapClicks }) {
+  constructor({ map, lockMapClicks, setRouterPoints }) {
     const routeLine = r => Routing.line(r, {
       styles: [
         { color: 'white', opacity: 0.8, weight: 6 },
-        { color: '#4597d0', opacity: 1, weight: 4, dashArray: '15,10' }
+        {
+          color: '#4597d0', opacity: 1, weight: 4, dashArray: '15,10'
+        }
       ],
       addWaypoints: true,
     }).on('linetouched', this.lockPropagations);
@@ -30,14 +32,13 @@ export class Router {
         routeWhileDragging: true,
       }),
       routeWhileDragging: true
-    });
-    // .on('waypointschanged', this.updateWaypointsByEvent);
+    }).on('waypointschanged', this.updateWaypointsCount);
 
     this.router.addTo(map);
 
     this.waypoints = [];
     this.lockMapClicks = lockMapClicks;
-
+    this.setRouterPoints = setRouterPoints;
     // this.router._line.on('mousedown', console.log);
   }
   //
@@ -46,22 +47,7 @@ export class Router {
     console.log('push', waypoints);
     this.router.setWaypoints([...waypoints, { lat, lng }]);
   };
-  //
-  // pushWaypoint = latlng => {
-  //   this.waypoints.push(latlng);
-  //   this.updateWaypoints();
-  // };
-  //
-  // updateWaypointsByEvent = (e) => {
-  //   console.log('upd', e);
-  //   // this.waypoints = waypoints.map(({ latlng }) => latlng);
-  //
-  // };
-  //
-  // updateWaypoints = () => {
-  //   this.router.setWaypoints(this.waypoints);
-  // };
-  //
+
   createWaypointMarker = () => {
     const element = document.createElement('div');
 
@@ -119,4 +105,9 @@ export class Router {
 
     this.router.setWaypoints(waypoints);
   };
+
+  updateWaypointsCount = () => {
+    const waypoints = this.router.getWaypoints().filter(({ latLng }) => !!latLng);
+    this.setRouterPoints(waypoints.length);
+  }
 }