fixed marker dragging

package.json

@@ -30,7 +30,7 @@
     "eslint-loader": "^4.0.2",
     "file-saver": "^2.0.0",
     "gpx-parser-builder": "^1.0.2",
-    "leaflet": "^1.6.0",
+    "leaflet": "1.6.0",
     "leaflet-editable": "^1.1.0",
     "leaflet-geometryutil": "^0.9.0",
     "leaflet-routing-machine": "^3.2.12",

src/components/StickerDesc.tsx

@@ -21,12 +21,12 @@ class StickerDesc extends React.PureComponent<Props, State> {
   };
 
   blockMouse = e => {
+    e.preventDefault();
     e.stopPropagation();
     this.input.focus();
   };
 
   input: HTMLTextAreaElement;
-  // todo: pass here locker for moving markers from Sticker.js
 
   render() {
     const { value: text } = this.props;
@@ -34,10 +34,10 @@ class StickerDesc extends React.PureComponent<Props, State> {
     return (
       <div
         className={classnames('sticker-desc', { is_empty: !text.trim() })}
-        onMouseDown={this.blockMouse}
-        onMouseUp={this.blockMouse}
-        onDragStart={this.blockMouse}
-        onTouchStart={this.blockMouse}
+        onMouseDownCapture={this.blockMouse}
+        onMouseUpCapture={this.blockMouse}
+        onDragStartCapture={this.blockMouse}
+        onTouchStartCapture={this.blockMouse}
       >
         <div className="sticker-desc-sizer">
           <span
@@ -59,4 +59,4 @@ class StickerDesc extends React.PureComponent<Props, State> {
   }
 }
 
-export { StickerDesc };
+export { StickerDesc };

src/map/Sticker/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback, useRef, useState } from 'react';
-import { marker, Marker } from 'leaflet';
+import { DivIcon, marker, Marker } from 'leaflet';
 import { IStickerDump } from '~/redux/map/types';
 import { STICKERS } from '~/constants/stickers';
 import { StickerDesc } from '~/components/StickerDesc';
@@ -110,7 +110,7 @@ const Sticker: React.FC<IProps> = ({
 
       MainMap.enableClicks();
     },
-    [onChange, sticker, MainMap]
+    [onChange, sticker]
   );
 
   const onDrag = React.useCallback(
@@ -183,7 +183,7 @@ const Sticker: React.FC<IProps> = ({
       document.removeEventListener('mousemove', onDrag);
       document.removeEventListener('mouseup', onDragStop);
     };
-  }, [dragging, onDrag]);
+  }, [dragging, onDrag, onDragStop]);
 
   // Initial leaflet marker creation, when element (dom element div) is ready
   React.useEffect(() => {
@@ -199,7 +199,7 @@ const Sticker: React.FC<IProps> = ({
     return () => {
       item.remove();
     };
-  }, [element]);
+  }, [sticker.latlng, element]);
 
   useEffect(() => {
     if (!layer) return;

src/utils/map/ArrowsLayer.ts

@@ -5,41 +5,12 @@
 
 */
 
-import { LatLngLiteral, LayerGroup, Map, LatLng, Marker, marker } from 'leaflet';
-import { arrowClusterIcon, createArrow, createArrowIcon } from '~/utils/arrow';
+import { LatLng, LatLngLiteral, LayerGroup, Map, Marker } from 'leaflet';
+import { arrowClusterIcon, createArrow } from '~/utils/arrow';
 import { MarkerClusterGroup } from 'leaflet.markercluster/dist/leaflet.markercluster-src.js';
 import { angleBetweenPoints, dist2, middleCoord } from '~/utils/geom';
 
-interface MidPoint {
-  latlng: LatLngLiteral;
-  angle: number;
-}
-
-// interface IPrevState {
-//   route: LatLngLiteral[];
-//   markers: Marker[];
-//   midpoints: MidPoint[];
-// }
-
 class ArrowsLayer extends LayerGroup {
-  /*
-    without remove optimization
-
-      first:
-      recalc: 5.469970703125ms
-      remove: 0.203857421875ms
-      add: 53.658935546875ms
-      total: 60.986083984375ms
-
-      last:
-      recalc: 0.010986328125ms
-      remove: 0.220947265625ms
-      add: 0.580078125ms
-      total: 2.721923828125ms
-
-    with remove optimization
-  */
-
   constructor(props) {
     super(props);
   }
@@ -54,7 +25,7 @@ class ArrowsLayer extends LayerGroup {
 
   // Reacreating all the markers
 
-  setLatLngs = (route: LatLngLiteral[]): void => {
+  setLatLngs = (route: LatLng[]): void => {
     if (!this.map) return;
 
     this.arrowLayer.clearLayers();

src/utils/map/DomMarker.js

@@ -1,21 +0,0 @@
-import { DivIcon } from 'leaflet';
-
-export const DomMarker = DivIcon.extend({
-  initialize: function (options: any) {
-    this.options = options;
-  },
-
-  options: {
-    element: null // a initialized DOM element
-    // same options as divIcon except for html
-  },
-
-  createIcon: function() {
-    const { html, element, className } = this.options;
-
-    this._setIconStyles(element, 'icon');
-
-    return element;
-  }
-});
-

src/utils/map/DomMarker.ts

@@ -0,0 +1,38 @@
+import { DivIcon, DivIconOptions } from 'leaflet';
+//
+// export const DomMarker = DivIcon.extend({
+//   initialize: function (options) {
+//     this.options = options;
+//   },
+//
+//   options: {
+//     element: null // a initialized DOM element
+//     // same options as divIcon except for html
+//   },
+//
+//   createIcon: function() {
+//     const { element } = this.options;
+//
+//     this._setIconStyles(element, 'icon');
+//
+//     return element;
+//   }
+// });
+
+export interface DomMarkerProps extends DivIconOptions {
+  element: HTMLElement
+}
+
+export class DomMarker extends DivIcon {
+  element: HTMLElement
+
+  constructor({ element, ...props }: DomMarkerProps) {
+    super(props);
+    this.element = element;
+  }
+
+  createIcon(oldicon?: HTMLElement) {
+    this.element.classList.add('icon')
+    return this.element;
+  }
+}

src/utils/map/OsrmRouter.ts

@@ -4,7 +4,7 @@ import { CLIENT } from '~/config/frontend';
 import { DomMarker } from '~/utils/map/DomMarker';
 import { MainMap } from '~/constants/map';
 
-const createWaypointMarker = (): DomMarker => {
+const createWaypointMarker = () => {
   const element = document.createElement('div');
 
   return new DomMarker({

src/utils/renderer.ts

@@ -448,8 +448,6 @@ const composeStickerImage = async (
   sticker: string,
   scale: number
 ): Promise<void> => {
-  console.log({ scale });
-
   const rad = 56;
   const tX = (Math.cos(angle + Math.PI) * rad - 30 - 6) * scale + x;
   const tY = (Math.sin(angle + Math.PI) * rad - 30 - 6) * scale + y;