ImageInput Touch Selection

Ref #8
0xcaff · Oct 8, 2017 · 07a5b10 · 07a5b10
1 parent 181a2d9
commit 07a5b10
Showing 1 changed file with 12 additions and 4 deletions.
diff --git a/src/Annotations.js b/src/Annotations.js
@@ -161,15 +161,23 @@ export default class Annotations extends Component {
 
     // attach listeners to stage so we receive all mouse events, (even consumed
     // ones).
-    stage.on('contentMousedown', withPosition(({x, y}) => {
+    stage.on('contentMousedown contentTouchstart', withPosition(({ x, y }, { evt }) => {
+      evt.preventDefault();
+
       expandSelection(area, {x0: x, y0: y, x1: x, y1: y});
     }));
 
-    stage.on('contentMousemove', withPosition(({x, y}, {evt}) => {
-      evt.buttons === 1 && expandSelection(area, {x1: x, y1: y});
+    stage.on('contentMousemove contentTouchmove', withPosition(({ x, y }, { evt }) => {
+      evt.preventDefault();
+
+      const isActive = evt.buttons === 1 || (evt.touches && evt.touches.length);
+      if (isActive) {
+        expandSelection(area, {x1: x, y1: y});
+      }
     }));
 
-    stage.on('contentMouseup', withPosition(({x, y}, {evt}) => {
+    stage.on('contentMouseup contentTouchend', withPosition(({ x, y }, { evt }) => {
+      evt.preventDefault();
       const { selected } = this;
 
       expandSelection(area, {x1: x, y1: y});