better touch hinting

src/modules/InteractivePoly.ts

@@ -38,15 +38,19 @@ export class Component extends Polyline {
     this.constrLine = new Polyline([], this.constraintsStyle);
 
     this.startDragHinting();
-    this.touchHinter.on('click', console.log);
   }
 
+  updateTouchHinter = ({ latlngs }: { latlngs: LatLngLiteral[] }): void => {
+    this.touchHinter.setLatLngs(latlngs);
+  };
+
   setPoints = (latlngs: LatLng[]) => {
     this.setLatLngs(latlngs);
     this.recreateMarkers();
     this.recalcDistance();
     this.recalcKmMarks();
     this.touchHinter.setLatLngs(latlngs);
+    this.fire('latlngschange', { latlngs });
   };
 
   createHintMarker = (latlng: LatLng): Marker => marker(latlng, {
@@ -365,7 +369,10 @@ export class Component extends Polyline {
     this.setConstraints([latlng, marker.getLatLng()]);
   };
 
-  onDrawingClick = ({ latlng }: LeafletMouseEvent): void => {
+  onDrawingClick = (event: LeafletMouseEvent): void => {
+    console.log(event);
+    const { latlng } = event;
+
     this.stopDrawing();
     const latlngs = this.getLatLngs() as any[];
 
@@ -378,8 +385,9 @@ export class Component extends Polyline {
       latlngs.unshift(latlng);
       this.markers.unshift(this.createMarker(latlng));
     }
+
     this.setLatLngs(latlngs);
-    this.touchHinter.setLatLngs(latlngs);
+    this.fire('latlngschange', { latlngs });
     this.startDrawing();
   };
 
@@ -403,15 +411,15 @@ export class Component extends Polyline {
   replaceLatlng = (latlng: LatLng, index: number): void => {
     const latlngs = this.getLatLngs() as LatLngLiteral[];
     latlngs.splice(index, 1, latlng);
-    this.touchHinter.setLatLngs(latlngs);
     this.setLatLngs(latlngs);
+    this.fire('latlngschange', { latlngs });
   };
 
   insertLatLng = (latlng, index): void => {
     const latlngs = this.getLatLngs();
     latlngs.splice(index, 0, latlng);
-    this.touchHinter.setLatLngs(latlngs);
     this.setLatLngs(latlngs);
+    this.fire('latlngschange', { latlngs });
   };
 
   setConstraints = (coords: LatLng[]) => {
@@ -430,7 +438,7 @@ export class Component extends Polyline {
     latlngs.splice(index, 1);
 
     this.setLatLngs(latlngs);
-    this.touchHinter.setLatLngs(latlngs);
+    this.fire('latlngschange', { latlngs });
   };
 
   dropMarkerDistanceChange = (index: number): void => {
@@ -482,8 +490,6 @@ export class Component extends Polyline {
 
       return sum;
     }, 0);
-
-    console.log('counting km marks', this.kmMarks);
   };
 
   kmMarksEnabled?: InteractivePolylineOptions['kmMarksEnabled'] = true;
@@ -502,7 +508,12 @@ export class Component extends Polyline {
     opacity: 0.5,
   };
 
-  touchHinter: Polyline = new Polyline([], { weight: 25, color: 'rgba(255, 255, 255, 0.7)' });
+  touchHinter: Polyline = new Polyline([], {
+    weight: 25,
+    color: 'rgba(255, 255, 255, 0)',
+    smoothFactor: 3,
+    // bubblingMouseEvents: false,
+  });
   hintMarker: Marker = this.createHintMarker(latLng({ lat: 0, lng: 0 }));
 
   constrLine: Polyline;
@@ -532,6 +543,8 @@ Component.addInitHook(function () {
 
       this.map.on('moveend', this.updateMarkers);
 
+      this.on('latlngschange', this.updateTouchHinter);
+
       if (window.innerWidth < 768) {
         this.touchHinter.setStyle({ weight: 50 });
       }

src/modules/Poly.ts

@@ -25,7 +25,7 @@ export class Poly {
       weight: 6,
       maxMarkers: 100,
       smoothFactor: 3,
-      bubblingMouseEvents: false,
+      // bubblingMouseEvents: false,
     })
       .on('distancechange', this.onDistanceUpdate);
 

src/styles/map.less

@@ -26,32 +26,49 @@
 .leaflet-vertex-icon, .leaflet-middle-icon {
   outline: none !important;
   border-radius: 10px;
-  opacity :1;
+  opacity: 1;
   border: none;
   width: 16px !important;
   height: 16px !important;margin-left:-8px !important;margin-top:-8px !important;
   background: transparent;
-}
+  position: absolute;
 
-.leaflet-middle-icon {
-  opacity: 0.5;
-}
+  &::before {
+    width: 24px;
+    height: 24px;
+    background: none;
+    content: ' ';
+    position: absolute;
+    transform: translate(-4px, -4px);
+    border-radius: 16px;
+    top: 0;
+    left: 0;
+  }
 
-.leaflet-vertex-icon::after, .leaflet-middle-icon::after {
-  content: ' ';
-  position:absolute;top:4px;left:4px;width:8px;height:8px;
-  background:white;border-radius: 8px;transform:scale(1);
-  transition:transform 150ms;
-}
+  @media (max-width: @mobile_breakpoint) {
+    &::before {
+      width: 32px;
+      height: 32px;
+      transform: translate(-8px, -8px);
+    }
+  }
 
-.leaflet-vertex-icon:hover, .leaflet-middle-icon:hover {
-  opacity: 1 !important;
-}
+  &::after {
+    content: ' ';
+    position:absolute;
+    top:4px;
+    left:4px;
+    width:8px;
+    height:8px;
+    background:white;
+    border-radius: 8px;
+    transform:scale(1);
+    transition:transform 150ms;
+  }
 
-.leaflet-vertex-icon:hover::after, .leaflet-middle-icon:hover::after,
-.leaflet-vertex-icon:active::after, .leaflet-middle-icon:active::after  {
-  transform: scale(2);
-  box-shadow: #999 0 0 5px 2px;
+  &:hover {
+    opacity: 1;
+  }
 }
 
 .leaflet-control-container .leaflet-routing-container-hide {