fixed dragging polyline collision with router

src/containers/map/Route/index.tsx

@@ -28,26 +28,33 @@ const RouteUnconnected: FC<Props> = memo(
   ({ map: { route }, editor: { editing, mode }, mapSetRoute, editorSetDistance }) => {
     const [layer, setLayer] = useState<InteractivePoly>(null);
 
-    const onDistanceChange = useCallback(
-      ({ distance }) => editorSetDistance(distance),
-      [editorSetDistance]
-    );
+    const onDistanceChange = useCallback(({ distance }) => editorSetDistance(distance), [
+      editorSetDistance,
+    ]);
 
     useEffect(() => {
       if (!MainMap) return;
 
-      setLayer(
-        new InteractivePoly([], {
-          color: 'url(#activePathGradient)',
-          weight: 6,
-          maxMarkers: isMobile() ? 20 : 100,
-          smoothFactor: 3,
-        })
-          .addTo(MainMap)
-          .on('distancechange', onDistanceChange)
-        // .on("allvertexhide", console.log)
-        // .on("allvertexshow", console.log)
-      );
+      const interactive = new InteractivePoly([], {
+        color: 'url(#activePathGradient)',
+        weight: 6,
+        maxMarkers: isMobile() ? 50 : 200,
+        smoothFactor: 3,
+      })
+        .addTo(MainMap)
+        .on('distancechange', onDistanceChange)
+        .on('vertexdragstart', MainMap.disableClicks)
+        .on('vertexdragend', MainMap.enableClicks)
+        .on('vertexaddstart', MainMap.disableClicks)
+        .on('vertexaddend', MainMap.enableClicks);
+      // .on("allvertexhide", console.log)
+      // .on("allvertexshow", console.log)
+
+      setLayer(interactive);
+
+      return () => {
+        interactive.removeFrom(MainMap);
+      };
     }, [MainMap, onDistanceChange]);
 
     const onRouteChanged = useCallback(

src/modules/InteractivePoly.ts

@@ -239,6 +239,8 @@ export class InteractivePoly extends Polyline {
     this._map.on("mousemove", this.dragHintMove);
     this._map.on("mouseup", this.dragHintAddMarker);
     this._map.on("mouseout", this.stopDragHintMove);
+
+    this.fire('vertexaddstart');
   };
 
   stopDragHintMove = (): void => {
@@ -254,6 +256,7 @@ export class InteractivePoly extends Polyline {
 
     setTimeout(() => {
       this.is_dragging = false;
+      this.fire('vertexaddend');
     }, 0);
   };
 
@@ -598,6 +601,8 @@ InteractivePoly.addInitHook(function() {
   vertexdragstart,
   vertexdragend,
   vertexdrag,
+  vertexaddstart
+  vertexaddend
 
   allvertexhide
   allvertexshow

src/utils/osrm.ts

@@ -7,8 +7,8 @@ import { MainMap } from '~/constants/map';
 const createWaypointMarker = (): DomMarker => {
   const element = document.createElement('div');
 
-  // element.addEventListener('mousedown', this.lockPropagations);
-  // element.addEventListener('mouseup', this.unlockPropagations);
+  element.addEventListener('mousedown', event => event.stopPropagation());
+  element.addEventListener('mouseup', event => event.stopPropagation());
 
   return new DomMarker({
     element,
@@ -37,7 +37,7 @@ export const OsrmRouter = Routing.control({
   },
   show: false,
   plan: Routing.plan([], {
-    createMarker: (i, wp) => {
+    createMarker: (_, wp) => {
       const marker = new Marker(wp.latLng, {
         draggable: true,
         icon: createWaypointMarker(),