Mobile touch events to work on leaflet 1.7

package.json

@@ -71,7 +71,7 @@
     "es6-weak-map": "^2.0.1",
     "express": "~4.16.3",
     "jsdom": "^9.8.3",
-    "leaflet": "~1.6.0",
+    "leaflet": "^1.7.1",
     "mocha": "~3.5.3",
     "nightmare": "~3.0.1",
     "ramda": "^0.22.1",

src/FreeDraw.js

@@ -1,13 +1,14 @@
 import 'core-js';
 import 'regenerator-runtime/runtime';
 
-import { noConflict, FeatureGroup, Point } from 'leaflet';
+import { noConflict, FeatureGroup, DomEvent } from 'leaflet';
 import { select } from 'd3-selection';
 import { line, curveMonotoneX } from 'd3-shape';
 import Set from 'es6-set';
 import WeakMap from 'es6-weak-map';
 import Symbol from 'es6-symbol';
 import { updateFor } from './helpers/Layer';
+import { touchEventToContainerPoint } from './helpers/Map';
 import { createFor, removeFor, clearFor } from './helpers/Polygon';
 import { CREATE, EDIT, DELETE, APPEND, EDIT_APPEND, NONE, ALL, modeFor } from './helpers/Flags';
 import simplifyPolygon from './helpers/Simplify';
@@ -109,6 +110,8 @@ export default class FreeDraw extends FeatureGroup {
                                  .classed('free-draw', true).attr('width', '100%').attr('height', '100%')
                                  .style('pointer-events', 'none').style('z-index', '1001').style('position', 'relative');
 
+        // Required for pointer events to trigger
+        map.getContainer().style.setProperty('touch-action', 'none');
         // Set the mouse events.
         this.listenForEvents(map, svg, this.options);
 
@@ -132,6 +135,7 @@ export default class FreeDraw extends FeatureGroup {
         delete map[instanceKey];
         delete map.simplifyPolygon;
 
+        map.getContainer().style.removeProperty('touch-action');
     }
 
     /**
@@ -213,11 +217,10 @@ export default class FreeDraw extends FeatureGroup {
 
         /**
          * @method mouseDown
-         * @param {Object} event
+         * @param {TouchEvent} event
          * @return {void}
          */
         const mouseDown = event => {
-
             if (!(map[modesKey] & CREATE)) {
 
                 // Polygons can only be created when the mode includes create.
@@ -233,43 +236,42 @@ export default class FreeDraw extends FeatureGroup {
 
             // Create the line iterator and move it to its first `yield` point, passing in the start point
             // from the mouse down event.
-            const lineIterator = this.createPath(svg, map.latLngToContainerPoint(event.latlng), options.strokeWidth);
+            const lineIterator = this.createPath(svg, touchEventToContainerPoint(event, map.getContainer()), options.strokeWidth);
 
             /**
              * @method mouseMove
-             * @param {Object} event
+             * @param {TouchEvent} event
              * @return {void}
              */
             const mouseMove = event => {
-
                 // Resolve the pixel point to the latitudinal and longitudinal equivalent.
-                const point = map.mouseEventToContainerPoint(event.originalEvent);
+                const point = touchEventToContainerPoint(event, map.getContainer());
 
                 // Push each lat/lng value into the points set.
-                latLngs.add(map.containerPointToLatLng(point));
+                const value = map.containerPointToLatLng(point);
+                latLngs.add(value);
 
                 // Invoke the generator by passing in the starting point for the path.
-                lineIterator(new Point(point.x, point.y));
+                lineIterator(point);
 
             };
 
             // Create the path when the user moves their cursor.
-            map.on('mousemove touchmove', mouseMove);
+            DomEvent.on(map.getContainer(), 'touchmove', mouseMove);
 
             /**
              * @method mouseUp
              * @param {Boolean} [create = true]
              * @return {Function}
              */
             const mouseUp = (_, create = true) => {
-
                 // Remove the ability to invoke `cancel`.
                 map[cancelKey] = () => {};
 
                 // Stop listening to the events.
-                map.off('mouseup', mouseUp);
-                map.off('mousemove', mouseMove);
-                'body' in document && document.body.removeEventListener('mouseleave', mouseUp);
+                DomEvent.off(map.getContainer(), 'touchend', mouseUp);
+                DomEvent.off(map.getContainer(), 'touchmove', mouseMove);
+                'body' in document && document.body.removeEventListener('touchcancel', mouseUp);
 
                 // Clear the SVG canvas.
                 svg.selectAll('*').remove();
@@ -291,15 +293,15 @@ export default class FreeDraw extends FeatureGroup {
             };
 
             // Clear up the events when the user releases the mouse.
-            map.on('mouseup touchend', mouseUp);
-            'body' in document && document.body.addEventListener('mouseleave', mouseUp);
+            DomEvent.on(map.getContainer(), 'touchend', mouseUp);
+            'body' in document && document.body.addEventListener('touchcancel', mouseUp);
 
             // Setup the function to invoke when `cancel` has been invoked.
             map[cancelKey] = () => mouseUp({}, false);
 
         };
 
-        map.on('mousedown touchstart', mouseDown);
+        DomEvent.on(map.getContainer(), 'touchstart', mouseDown);
 
     }
 
@@ -308,7 +310,7 @@ export default class FreeDraw extends FeatureGroup {
      * @param {Object} svg
      * @param {Point} fromPoint
      * @param {Number} strokeWidth
-     * @return {void}
+     * @return {(point: L.Point) => void}
      */
     createPath(svg, fromPoint, strokeWidth) {
         let lastPoint = fromPoint;

src/helpers/Map.js

@@ -0,0 +1,17 @@
+import { Point } from 'leaflet';
+
+/**
+ * {@link https://github.com/Leaflet/Leaflet/issues/1542#issuecomment-151679021}
+ * @param {TouchEvent} event
+ * @param {HTMLElement} container
+ * @return {L.Point}
+ */
+export const touchEventToContainerPoint = (event, container) => {
+    const touch = event.touches[0];
+    const rect = container.getBoundingClientRect();
+
+    const lat = touch.clientX - rect.left - container.clientLeft;
+    const lng = touch.clientY - rect.top - container.clientTop;
+
+    return new Point(lat, lng);
+};

tests/FreeDraw.test.js

@@ -1,7 +1,7 @@
 import test from 'ava';
 import { select } from 'd3-selection';
 import { LatLng, Point } from 'leaflet';
-import { spy } from 'sinon';
+import { spy, stub } from 'sinon';
 import FreeDraw, { polygons, edgesKey } from '../src/FreeDraw';
 import { updateFor } from '../src/helpers/Layer';
 import { NONE, CREATE, EDIT, DELETE, APPEND, EDIT_APPEND, ALL } from '../src/helpers/Flags';
@@ -30,10 +30,12 @@ const polygon = [new LatLng(51.50249181873096, -0.08634567260742189),
 test.beforeEach(t => {
 
     const node = t.context.node = document.createElement('div');
+    const mapContainer = document.createElement('div');
 
     t.context.map = {
         on: spy(),
         fire: spy(),
+        getContainer: stub().returns(mapContainer),
         dragging: {
             disable: spy(),
             enable: spy()
@@ -43,6 +45,7 @@ test.beforeEach(t => {
         layerPointToLatLng: spy(({ x, y }) => ({ lat: x, lng: y }))
     };
 
+    t.context.mapContainer = mapContainer;
     t.context.svg = select(node).append('svg');
     t.context.polygon = [...polygon];
     t.context.freeDraw = new FreeDraw({ mergePolygons: false, concavePolygon: false });
@@ -202,6 +205,19 @@ test('It should be able to set the mode on the map;', t => {
 
 });
 
+test('It should set map touch actions on and off when adding and removing the layer', async t => {
+
+    const { freeDraw, map, mapContainer } = t.context;
+    freeDraw.onAdd(map);
+
+    t.is(mapContainer.style.touchAction, 'none');
+
+    freeDraw.onRemove(map);
+
+    t.is(mapContainer.style.touchAction, '');
+
+});
+
 test('It should be able to create a path;', t => {
 
     const { freeDraw, map, svg } = t.context;

tests/Map.test.js

@@ -0,0 +1,17 @@
+import test from 'ava';
+import { stub } from 'sinon';
+import {touchEventToContainerPoint} from '../src/helpers/Map';
+
+
+test('It should calculate correct point', async (t) => {
+
+	const containerMock = {clientLeft: 10, clientTop: 20, getBoundingClientRect: stub()};
+	containerMock.getBoundingClientRect.returns({x: 10, y: 20, width: 100, height: 100, top: 20, right: 110, bottom: 961, left: 10});
+
+	const event = {touches: [{clientX: 25, clientY: 52, target: containerMock, identifier: 543543}]};
+
+	const point = touchEventToContainerPoint(event, containerMock);
+
+	t.is(point.x, 5);
+	t.is(point.y, 12);
+});

tests/functional/helpers/Polygons.js

@@ -2,19 +2,19 @@ export const createMergedPolygon = () => {
 
     const map = document.querySelector('section.map');
 
-    map.dispatchEvent(new MouseEvent('mousedown'));
-    map.dispatchEvent(new MouseEvent('mousemove', { clientX: 100, clientY: 100 }));
-    map.dispatchEvent(new MouseEvent('mousemove', { clientX: 100, clientY: 200 }));
-    map.dispatchEvent(new MouseEvent('mousemove', { clientX: 200, clientY: 200 }));
-    map.dispatchEvent(new MouseEvent('mousemove', { clientX: 200, clientY: 100 }));
-    map.dispatchEvent(new MouseEvent('mouseup'));
-
-    map.dispatchEvent(new MouseEvent('mousedown'));
-    map.dispatchEvent(new MouseEvent('mousemove', { clientX: 150, clientY: 150 }));
-    map.dispatchEvent(new MouseEvent('mousemove', { clientX: 150, clientY: 250 }));
-    map.dispatchEvent(new MouseEvent('mousemove', { clientX: 250, clientY: 250 }));
-    map.dispatchEvent(new MouseEvent('mousemove', { clientX: 250, clientY: 150 }));
-    map.dispatchEvent(new MouseEvent('mouseup'));
+    map.dispatchEvent(new MouseEvent('pointerdown'));
+    map.dispatchEvent(new MouseEvent('pointermove', { clientX: 100, clientY: 100 }));
+    map.dispatchEvent(new MouseEvent('pointermove', { clientX: 100, clientY: 200 }));
+    map.dispatchEvent(new MouseEvent('pointermove', { clientX: 200, clientY: 200 }));
+    map.dispatchEvent(new MouseEvent('pointermove', { clientX: 200, clientY: 100 }));
+    map.dispatchEvent(new MouseEvent('pointerup'));
+
+    map.dispatchEvent(new MouseEvent('pointerdown'));
+    map.dispatchEvent(new MouseEvent('pointermove', { clientX: 150, clientY: 150 }));
+    map.dispatchEvent(new MouseEvent('pointermove', { clientX: 150, clientY: 250 }));
+    map.dispatchEvent(new MouseEvent('pointermove', { clientX: 250, clientY: 250 }));
+    map.dispatchEvent(new MouseEvent('pointermove', { clientX: 250, clientY: 150 }));
+    map.dispatchEvent(new MouseEvent('pointerup'));
 
     return Array.from(document.querySelectorAll('path.leaflet-polygon'));
 
@@ -24,12 +24,12 @@ export const createFirstPolygon = () => {
 
     const map = document.querySelector('section.map');
 
-    map.dispatchEvent(new MouseEvent('mousedown'));
-    map.dispatchEvent(new MouseEvent('mousemove', { clientX: 50, clientY: 50 }));
-    map.dispatchEvent(new MouseEvent('mousemove', { clientX: 50, clientY: 100 }));
-    map.dispatchEvent(new MouseEvent('mousemove', { clientX: 100, clientY: 100 }));
-    map.dispatchEvent(new MouseEvent('mousemove', { clientX: 100, clientY: 50 }));
-    map.dispatchEvent(new MouseEvent('mouseup'));
+    map.dispatchEvent(new MouseEvent('pointerdown'));
+    map.dispatchEvent(new MouseEvent('pointermove', { clientX: 50, clientY: 50 }));
+    map.dispatchEvent(new MouseEvent('pointermove', { clientX: 50, clientY: 100 }));
+    map.dispatchEvent(new MouseEvent('pointermove', { clientX: 100, clientY: 100 }));
+    map.dispatchEvent(new MouseEvent('pointermove', { clientX: 100, clientY: 50 }));
+    map.dispatchEvent(new MouseEvent('pointerup'));
 
     return Array.from(document.querySelectorAll('path.leaflet-polygon'));
 
@@ -39,12 +39,12 @@ export const createSecondPolygon = () => {
 
     const map = document.querySelector('section.map');
 
-    map.dispatchEvent(new MouseEvent('mousedown'));
-    map.dispatchEvent(new MouseEvent('mousemove', { clientX: 150, clientY: 150 }));
-    map.dispatchEvent(new MouseEvent('mousemove', { clientX: 150, clientY: 250 }));
-    map.dispatchEvent(new MouseEvent('mousemove', { clientX: 250, clientY: 250 }));
-    map.dispatchEvent(new MouseEvent('mousemove', { clientX: 250, clientY: 150 }));
-    map.dispatchEvent(new MouseEvent('mouseup'));
+    map.dispatchEvent(new MouseEvent('pointerdown'));
+    map.dispatchEvent(new MouseEvent('pointermove', { clientX: 150, clientY: 150 }));
+    map.dispatchEvent(new MouseEvent('pointermove', { clientX: 150, clientY: 250 }));
+    map.dispatchEvent(new MouseEvent('pointermove', { clientX: 250, clientY: 250 }));
+    map.dispatchEvent(new MouseEvent('pointermove', { clientX: 250, clientY: 150 }));
+    map.dispatchEvent(new MouseEvent('pointerup'));
 
     return Array.from(document.querySelectorAll('path.leaflet-polygon'));
 

yarn.lock

@@ -4750,10 +4750,10 @@ lcid@^2.0.0:
   dependencies:
     invert-kv "^2.0.0"
 
-leaflet@~1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.6.0.tgz#aecbb044b949ec29469eeb31c77a88e2f448f308"
-  integrity sha512-CPkhyqWUKZKFJ6K8umN5/D2wrJ2+/8UIpXppY7QDnUZW5bZL5+SEI2J7GBpwh4LIupOKqbNSQXgqmrEJopHVNQ==
+leaflet@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.7.1.tgz#10d684916edfe1bf41d688a3b97127c0322a2a19"
+  integrity sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==
 
 leven@^3.1.0:
   version "3.1.0"