From abc5b663950c67adc83dd4a9e3633c4d6cdfade9 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Thu, 13 Jun 2019 11:44:06 -0400
Subject: [PATCH] Make scrollbars touch accessible.

The GUI which uses the same getEventXY helpers just wire up both touch and mouse events instead of just mouse events
---
 src/components/scrollable-canvas/scrollable-canvas.jsx | 2 ++
 src/containers/scrollable-canvas.jsx                   | 8 ++++++++
 2 files changed, 10 insertions(+)

diff --git a/src/components/scrollable-canvas/scrollable-canvas.jsx b/src/components/scrollable-canvas/scrollable-canvas.jsx
index 3eeb1bb2..56d6feda 100644
--- a/src/components/scrollable-canvas/scrollable-canvas.jsx
+++ b/src/components/scrollable-canvas/scrollable-canvas.jsx
@@ -22,6 +22,7 @@ const ScrollableCanvasComponent = props => (
                         Math.abs(props.horizontalScrollLengthPercent - 100) < 1e-8 ? 'none' : 'block'}`
                 }}
                 onMouseDown={props.onHorizontalScrollbarMouseDown}
+                onTouchStart={props.onHorizontalScrollbarMouseDown}
             />
         </div>
         <div
@@ -38,6 +39,7 @@ const ScrollableCanvasComponent = props => (
                         Math.abs(props.verticalScrollLengthPercent - 100) < 1e-8 ? 'none' : 'block'}`
                 }}
                 onMouseDown={props.onVerticalScrollbarMouseDown}
+                onTouchStart={props.onVerticalScrollbarMouseDown}
             />
         </div>
     </div>
diff --git a/src/containers/scrollable-canvas.jsx b/src/containers/scrollable-canvas.jsx
index 53c1fb65..8246eb81 100644
--- a/src/containers/scrollable-canvas.jsx
+++ b/src/containers/scrollable-canvas.jsx
@@ -45,7 +45,9 @@ class ScrollableCanvas extends React.Component {
         this.initialMouseX = getEventXY(event).x;
         this.initialScreenX = paper.view.matrix.tx;
         window.addEventListener('mousemove', this.handleHorizontalScrollbarMouseMove);
+        window.addEventListener('touchmove', this.handleHorizontalScrollbarMouseMove);
         window.addEventListener('mouseup', this.handleHorizontalScrollbarMouseUp);
+        window.addEventListener('touchend', this.handleHorizontalScrollbarMouseUp);
         event.preventDefault();
     }
     handleHorizontalScrollbarMouseMove (event) {
@@ -57,7 +59,9 @@ class ScrollableCanvas extends React.Component {
     }
     handleHorizontalScrollbarMouseUp () {
         window.removeEventListener('mousemove', this.handleHorizontalScrollbarMouseMove);
+        window.removeEventListener('touchmove', this.handleHorizontalScrollbarMouseMove);
         window.removeEventListener('mouseup', this.handleHorizontalScrollbarMouseUp);
+        window.removeEventListener('touchend', this.handleHorizontalScrollbarMouseUp);
         this.initialMouseX = null;
         this.initialScreenX = null;
         event.preventDefault();
@@ -66,7 +70,9 @@ class ScrollableCanvas extends React.Component {
         this.initialMouseY = getEventXY(event).y;
         this.initialScreenY = paper.view.matrix.ty;
         window.addEventListener('mousemove', this.handleVerticalScrollbarMouseMove);
+        window.addEventListener('touchmove', this.handleVerticalScrollbarMouseMove);
         window.addEventListener('mouseup', this.handleVerticalScrollbarMouseUp);
+        window.addEventListener('touchend', this.handleVerticalScrollbarMouseUp);
         event.preventDefault();
     }
     handleVerticalScrollbarMouseMove (event) {
@@ -78,7 +84,9 @@ class ScrollableCanvas extends React.Component {
     }
     handleVerticalScrollbarMouseUp (event) {
         window.removeEventListener('mousemove', this.handleVerticalScrollbarMouseMove);
+        window.removeEventListener('touchmove', this.handleVerticalScrollbarMouseMove);
         window.removeEventListener('mouseup', this.handleVerticalScrollbarMouseUp);
+        window.removeEventListener('touchend', this.handleVerticalScrollbarMouseUp);
         this.initialMouseY = null;
         this.initialScreenY = null;
         event.preventDefault();