From 09943f906914394b849de84c036d941fa7233846 Mon Sep 17 00:00:00 2001
From: Trygve Aaberge <trygveaa@gmail.com>
Date: Wed, 18 Mar 2020 17:32:10 +0100
Subject: [PATCH] Ignore touch start with multiple points in direct_select

When you pinch zoom, onTouchStart will be called with multiple points in
the event. When you do this, you don't want the vertices to be moved, or
vertices created on midpoints. Therefore, these actions should only
happen if the event only contains one point.
---
 src/modes/direct_select.js     |  8 +++++---
 test/direct_select.test.js     | 18 ++++++++++++++++++
 test/utils/make_touch_event.js |  6 ++++--
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/modes/direct_select.js b/src/modes/direct_select.js
index 7ba82e9d5..b5cb96820 100644
--- a/src/modes/direct_select.js
+++ b/src/modes/direct_select.js
@@ -202,9 +202,11 @@ DirectSelect.onMouseOut = function(state) {
 };
 
 DirectSelect.onTouchStart = DirectSelect.onMouseDown = function(state, e) {
-  if (isVertex(e)) return this.onVertex(state, e);
-  if (isActiveFeature(e)) return this.onFeature(state, e);
-  if (isMidpoint(e)) return this.onMidpoint(state, e);
+  if (e.points == null || e.points.length === 1) {
+    if (isVertex(e)) return this.onVertex(state, e);
+    if (isActiveFeature(e)) return this.onFeature(state, e);
+    if (isMidpoint(e)) return this.onMidpoint(state, e);
+  }
 };
 
 DirectSelect.onDrag = function(state, e) {
diff --git a/test/direct_select.test.js b/test/direct_select.test.js
index 3758bc1e1..15460a59a 100644
--- a/test/direct_select.test.js
+++ b/test/direct_select.test.js
@@ -273,6 +273,24 @@ test('direct_select', (t) => {
     });
   });
 
+  t.test('direct_select - pinch zooming on a vertex does not make it selected', (st) => {
+    const [lineId] = Draw.add(getGeoJSON('line'));
+    Draw.changeMode(Constants.modes.DIRECT_SELECT, {
+      featureId: lineId
+    });
+    st.notOk(Draw.getSelectedPoints().features[0], 'no initial selection');
+
+    const pointPosition = getGeoJSON('line').geometry.coordinates[0];
+    const positionSecondFinger = { x: pointPosition[0] + 1, y: pointPosition[1] + 1 };
+    afterNextRender(() => {
+      map.fire('touchstart', makeTouchEvent(pointPosition[0], pointPosition[1], {}, [positionSecondFinger]));
+      afterNextRender(() => {
+        st.notOk(Draw.getSelectedPoints().features[0], 'no initial selection');
+        cleanUp(() => st.end());
+      });
+    });
+  });
+
   document.body.removeChild(mapContainer);
   t.end();
 });
diff --git a/test/utils/make_touch_event.js b/test/utils/make_touch_event.js
index b55708fee..70bc1081d 100644
--- a/test/utils/make_touch_event.js
+++ b/test/utils/make_touch_event.js
@@ -1,6 +1,7 @@
 import xtend from 'xtend';
 
-export default function(lng = 0, lat = 0, eventProperties = {}) {
+export default function(lng = 0, lat = 0, eventProperties = {}, additionalPoints = []) {
+  const point = {x: lng, y:lat};
   const e = {
     originalEvent: xtend({
       stopPropagation() {},
@@ -9,7 +10,8 @@ export default function(lng = 0, lat = 0, eventProperties = {}) {
       clientX: lng,
       clientY: lat
     }, eventProperties),
-    point: {x: lng, y:lat},
+    point,
+    points: [point].concat(additionalPoints),
     lngLat: {lng, lat}
   };