Only start tile drag for certain angles

src/components/sprite-selector-item/sprite-selector-item.css

@@ -20,7 +20,6 @@
     cursor: pointer;
 
     user-select: none;
-    touch-action: none;
 }
 
 .sprite-selector-item.is-selected {

src/components/sprite-selector/sprite-selector.css

@@ -68,6 +68,8 @@
     padding-left: calc($space / 2);
     padding-right: calc($space / 2);
     padding-bottom: $space;
+
+    overflow-x: hidden;
 }
 
 .add-button {

src/containers/sprite-selector-item.jsx

@@ -38,10 +38,11 @@ class SpriteSelectorItem extends React.PureComponent {
     }
     handleMouseUp () {
         this.initialOffset = null;
+        this.gestureIsScroll = null;
         window.removeEventListener('mouseup', this.handleMouseUp);
         window.removeEventListener('mousemove', this.handleMouseMove);
         window.removeEventListener('touchend', this.handleMouseUp);
-        window.removeEventListener('touchmove', this.handleMouseMove);
+        window.removeEventListener('touchmove', this.handleMouseMove, {passive: false});
         if (this.props.dragging) {
             this.props.onDrag({
                 img: null,
@@ -57,9 +58,35 @@ class SpriteSelectorItem extends React.PureComponent {
     }
     handleMouseMove (e) {
         const currentOffset = getEventXY(e);
-        const dx = currentOffset.x - this.initialOffset.x;
-        const dy = currentOffset.y - this.initialOffset.y;
-        if (Math.sqrt((dx * dx) + (dy * dy)) > dragThreshold) {
+
+        let shouldStartDrag = false;
+        if (!this.props.dragging && !this.gestureIsScroll) {
+            const dx = currentOffset.x - this.initialOffset.x;
+            const dy = currentOffset.y - this.initialOffset.y;
+            const dragDistance = Math.sqrt((dx * dx) + (dy * dy));
+            shouldStartDrag = dragDistance > dragThreshold;
+
+            // For touch moves, additionally check if the angle suggests drag vs. scroll
+            if (shouldStartDrag && e.type === 'touchmove') {
+                const angleThreshold = 50;
+                // Direction goes from -180 to 180, with 0 toward the right.
+                let angle = Math.atan2(dy, dx) / Math.PI * 180;
+                // Fold over horizontal axis, range now 0 to 180
+                angle = Math.abs(angle);
+                // Fold over vertical axis, range now 0 to 90
+                if (angle > 90) angle = 180 - angle;
+                shouldStartDrag = shouldStartDrag && angle < angleThreshold;
+
+                // If the movement exceeds the distance threshold but is not a drag by angle
+                // stop checking by setting the gestureIsScroll flag. This prevents
+                // a scroll drag from "turning into" a tile drag by changing the angle.
+                if (!shouldStartDrag) {
+                    this.gestureIsScroll = true;
+                }
+            }
+        }
+
+        if (shouldStartDrag || this.props.dragging) {
             this.props.onDrag({
                 img: this.getCostumeData(),
                 currentOffset: currentOffset,
@@ -69,15 +96,15 @@ class SpriteSelectorItem extends React.PureComponent {
                 payload: this.props.dragPayload
             });
             this.noClick = true;
+            e.preventDefault();
         }
-        e.preventDefault();
     }
     handleMouseDown (e) {
         this.initialOffset = getEventXY(e);
         window.addEventListener('mouseup', this.handleMouseUp);
         window.addEventListener('mousemove', this.handleMouseMove);
         window.addEventListener('touchend', this.handleMouseUp);
-        window.addEventListener('touchmove', this.handleMouseMove);
+        window.addEventListener('touchmove', this.handleMouseMove, {passive: false});
     }
     handleClick (e) {
         e.preventDefault();