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.

Author: trygveaa

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.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) {

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();
 });

test/utils/make_mouse_event.js

@@ -1,14 +1,16 @@
 import xtend from 'xtend';
 
 export default function(lng = 0, lat = 0, eventProperties = {}) {
+  const point = {x: lng, y:lat};
   const e = {
     originalEvent: xtend({
       stopPropagation() {},
       button: 0,
       clientX: lng,
       clientY: lat
     }, eventProperties),
-    point: {x: lng, y:lat},
+    point: point,
+    points: [point],
     lngLat: {lng, lat}
   };
 

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: point,
+    points: [point].concat(additionalPoints),
     lngLat: {lng, lat}
   };