Merge pull request #627 from paulkaplan/touch-events

Enable touch events for the stage and audio trimmers

src/components/audio-trimmer/audio-trimmer.css

@@ -16,6 +16,7 @@ $hover-scale: 2;
 
 .trim-background {
     cursor: pointer;
+    touch-action: none;
 }
 
 .trim-background-mask {

src/components/audio-trimmer/audio-trimmer.jsx

@@ -17,6 +17,7 @@ const AudioTrimmer = props => (
                     width: `${100 * props.trimStart}%`
                 }}
                 onMouseDown={props.onTrimStartMouseDown}
+                onTouchStart={props.onTrimStartMouseDown}
             >
                 <Box className={classNames(styles.absolute, styles.trimBackgroundMask)} />
                 <Box className={classNames(styles.trimLine, styles.startTrimLine)}>
@@ -47,6 +48,7 @@ const AudioTrimmer = props => (
                     width: `${100 - (100 * props.trimEnd)}%`
                 }}
                 onMouseDown={props.onTrimEndMouseDown}
+                onTouchStart={props.onTrimEndMouseDown}
             >
                 <Box className={classNames(styles.absolute, styles.trimBackgroundMask)} />
                 <Box className={classNames(styles.trimLine, styles.endTrimLine)}>

src/containers/audio-trimmer.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import bindAll from 'lodash.bindall';
 import AudioTrimmerComponent from '../components/audio-trimmer/audio-trimmer.jsx';
+import {getEventXY} from '../lib/touch-utils';
 
 class AudioTrimmer extends React.Component {
     constructor (props) {
@@ -18,14 +19,14 @@ class AudioTrimmer extends React.Component {
     }
     handleTrimStartMouseMove (e) {
         const containerSize = this.containerElement.getBoundingClientRect().width;
-        const dx = (e.clientX - this.initialX) / containerSize;
+        const dx = (getEventXY(e).x - this.initialX) / containerSize;
         const newTrim = Math.max(0, Math.min(this.props.trimEnd, this.initialTrim + dx));
         this.props.onSetTrimStart(newTrim);
         e.preventDefault();
     }
     handleTrimEndMouseMove (e) {
         const containerSize = this.containerElement.getBoundingClientRect().width;
-        const dx = (e.clientX - this.initialX) / containerSize;
+        const dx = (getEventXY(e).x - this.initialX) / containerSize;
         const newTrim = Math.min(1, Math.max(this.props.trimStart, this.initialTrim + dx));
         this.props.onSetTrimEnd(newTrim);
         e.preventDefault();
@@ -33,22 +34,30 @@ class AudioTrimmer extends React.Component {
     handleTrimStartMouseUp () {
         window.removeEventListener('mousemove', this.handleTrimStartMouseMove);
         window.removeEventListener('mouseup', this.handleTrimStartMouseUp);
+        window.removeEventListener('touchmove', this.handleTrimStartMouseMove);
+        window.removeEventListener('touchend', this.handleTrimStartMouseUp);
     }
     handleTrimEndMouseUp () {
         window.removeEventListener('mousemove', this.handleTrimEndMouseMove);
         window.removeEventListener('mouseup', this.handleTrimEndMouseUp);
+        window.removeEventListener('touchmove', this.handleTrimEndMouseMove);
+        window.removeEventListener('touchend', this.handleTrimEndMouseUp);
     }
     handleTrimStartMouseDown (e) {
-        this.initialX = e.clientX;
+        this.initialX = getEventXY(e).x;
         this.initialTrim = this.props.trimStart;
         window.addEventListener('mousemove', this.handleTrimStartMouseMove);
         window.addEventListener('mouseup', this.handleTrimStartMouseUp);
+        window.addEventListener('touchmove', this.handleTrimStartMouseMove);
+        window.addEventListener('touchend', this.handleTrimStartMouseUp);
     }
     handleTrimEndMouseDown (e) {
-        this.initialX = e.clientX;
+        this.initialX = getEventXY(e).x;
         this.initialTrim = this.props.trimEnd;
         window.addEventListener('mousemove', this.handleTrimEndMouseMove);
         window.addEventListener('mouseup', this.handleTrimEndMouseUp);
+        window.addEventListener('touchmove', this.handleTrimEndMouseMove);
+        window.addEventListener('touchend', this.handleTrimEndMouseUp);
     }
     storeRef (el) {
         this.containerElement = el;

src/containers/stage.jsx

@@ -4,6 +4,7 @@ import React from 'react';
 import Renderer from 'scratch-render';
 import AudioEngine from 'scratch-audio';
 import VM from 'scratch-vm';
+import {getEventXY} from '../lib/touch-utils';
 
 import StageComponent from '../components/stage/stage.jsx';
 
@@ -50,12 +51,18 @@ class Stage extends React.Component {
     attachMouseEvents (canvas) {
         document.addEventListener('mousemove', this.onMouseMove);
         document.addEventListener('mouseup', this.onMouseUp);
+        document.addEventListener('touchmove', this.onMouseMove);
+        document.addEventListener('touchend', this.onMouseUp);
         canvas.addEventListener('mousedown', this.onMouseDown);
+        canvas.addEventListener('touchstart', this.onMouseDown);
     }
     detachMouseEvents (canvas) {
         document.removeEventListener('mousemove', this.onMouseMove);
         document.removeEventListener('mouseup', this.onMouseUp);
+        document.removeEventListener('touchmove', this.onMouseMove);
+        document.removeEventListener('touchend', this.onMouseUp);
         canvas.removeEventListener('mousedown', this.onMouseDown);
+        canvas.removeEventListener('touchstart', this.onMouseDown);
     }
     attachRectEvents () {
         window.addEventListener('resize', this.updateRect);
@@ -76,8 +83,9 @@ class Stage extends React.Component {
         ];
     }
     handleDoubleClick (e) {
+        const {x, y} = getEventXY(e);
         // Set editing target from cursor position, if clicking on a sprite.
-        const mousePosition = [e.clientX - this.rect.left, e.clientY - this.rect.top];
+        const mousePosition = [x - this.rect.left, y - this.rect.top];
         const drawableId = this.renderer.pick(mousePosition[0], mousePosition[1]);
         if (drawableId === null) return;
         const targetId = this.props.vm.getTargetIdForDrawableId(drawableId);
@@ -85,7 +93,8 @@ class Stage extends React.Component {
         this.props.vm.setEditingTarget(targetId);
     }
     onMouseMove (e) {
-        const mousePosition = [e.clientX - this.rect.left, e.clientY - this.rect.top];
+        const {x, y} = getEventXY(e);
+        const mousePosition = [x - this.rect.left, y - this.rect.top];
         if (this.state.mouseDownTimeoutId !== null) {
             this.cancelMouseDownTimeout();
             if (this.state.mouseDown && !this.state.isDragging) {
@@ -109,6 +118,7 @@ class Stage extends React.Component {
         this.props.vm.postIOData('mouse', coordinates);
     }
     onMouseUp (e) {
+        const {x, y} = getEventXY(e);
         this.cancelMouseDownTimeout();
         this.setState({
             mouseDown: false,
@@ -119,8 +129,8 @@ class Stage extends React.Component {
         } else {
             const data = {
                 isDown: false,
-                x: e.clientX - this.rect.left,
-                y: e.clientY - this.rect.top,
+                x: x - this.rect.left,
+                y: y - this.rect.top,
                 canvasWidth: this.rect.width,
                 canvasHeight: this.rect.height
             };
@@ -129,7 +139,8 @@ class Stage extends React.Component {
     }
     onMouseDown (e) {
         this.updateRect();
-        const mousePosition = [e.clientX - this.rect.left, e.clientY - this.rect.top];
+        const {x, y} = getEventXY(e);
+        const mousePosition = [x - this.rect.left, y - this.rect.top];
         this.setState({
             mouseDown: true,
             mouseDownPosition: mousePosition,
@@ -146,7 +157,9 @@ class Stage extends React.Component {
             canvasHeight: this.rect.height
         };
         this.props.vm.postIOData('mouse', data);
-        e.preventDefault();
+        if (e.preventDefault) {
+            e.preventDefault();
+        }
     }
     cancelMouseDownTimeout () {
         if (this.state.mouseDownTimeoutId !== null) {

src/lib/touch-utils.js

+const getEventXY = e => {
+    if (e.touches && e.touches[0]) {
+        return {x: e.touches[0].clientX, y: e.touches[0].clientY};
+    } else if (e.changedTouches && e.changedTouches[0]) {
+        return {x: e.changedTouches[0].clientX, y: e.changedTouches[0].clientY};
+    }
+    return {x: e.clientX, y: e.clientY};
+};
+
+export {
+    getEventXY
+};

test/unit/components/__snapshots__/sound-editor.test.jsx.snap

@@ -111,6 +111,7 @@ exports[`Sound Editor Component matches snapshot 1`] = `
         <div
           className=""
           onMouseDown={[Function]}
+          onTouchStart={[Function]}
           style={
             Object {
               "alignContent": undefined,
@@ -231,6 +232,7 @@ exports[`Sound Editor Component matches snapshot 1`] = `
         <div
           className=""
           onMouseDown={[Function]}
+          onTouchStart={[Function]}
           style={
             Object {
               "alignContent": undefined,