Adding touch events to canvas

Author: Thomas Bolis

.gitignore

@@ -6,6 +6,8 @@
 
 # Linux trash folder which might appear on any partition or disk
 .Trash-*
+
+
 ### JetBrains template
 # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio
 
@@ -53,6 +55,8 @@ atlassian-ide-plugin.xml
 com_crashlytics_export_strings.xml
 crashlytics.properties
 crashlytics-build.properties
+
+
 ### OSX template
 .DS_Store
 .AppleDouble
@@ -78,6 +82,8 @@ Icon
 Network Trash Folder
 Temporary Items
 .apdisk
+
+
 ### Eclipse template
 *.pydevproject
 .metadata
@@ -118,6 +124,8 @@ local.properties
 
 # TeXlipse plugin
 .texlipse
+
+
 ### Node template
 # Logs
 logs
@@ -147,6 +155,9 @@ build/Release
 # Dependency directory
 # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
 node_modules
+
+lib/
+
 ### Windows template
 # Windows image file caches
 Thumbs.db

.npmignore

@@ -1,7 +1,7 @@
 {
   "name": "react-sketch",
-  "version": "0.1.0",
-  "description": "Sketch Element for React",
+  "version": "0.1.1",
+  "description": "Simple Sketch Element for React based applications",
   "keywords": [
     "React",
     "canvas",

package.json

@@ -1,10 +1,10 @@
 import CanvasTool from './CanvasTool'
-import {mousePosition} from './utils';
+import {pointerPosition} from './utils';
 
 class Line extends CanvasTool {
 
     doMouseDown(event) {
-        let [_x, _y] = mousePosition(event);
+        let [_x, _y] = pointerPosition(event);
         // store initial position of mouse
         [this._startX, this._startY] = [_x, _y];
         [this._x, this._y] = [_x, _y];
@@ -15,7 +15,7 @@ class Line extends CanvasTool {
 
     doMouseMove(event) {
         let [_startX,_startY] = [this._startX, this._startY];
-        let [_currX, _currY] = mousePosition(event);
+        let [_currX, _currY] = pointerPosition(event);
         if (this._isMouseDown) {
             this._ctx.beginPath();
             this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);

src/Line.js

@@ -1,5 +1,5 @@
 import CanvasTool from './CanvasTool'
-import {mousePosition} from './utils';
+import {pointerPosition} from './utils';
 
 class Pencil extends CanvasTool {
 
@@ -8,7 +8,7 @@ class Pencil extends CanvasTool {
     }
 
     doMouseDown(event) {
-        let [_x, _y] = mousePosition(event);
+        let [_x, _y] = pointerPosition(event);
         // store initial position of mouse
         [this._startX, this._startY] = [_x, _y];
         [this._x, this._y] = [_x, _y];
@@ -18,7 +18,7 @@ class Pencil extends CanvasTool {
 
     doMouseMove(event) {
         let [_prevX,_prevY] = [this._x, this._y];
-        let [_currX, _currY] = mousePosition(event);
+        let [_currX, _currY] = pointerPosition(event);
         if (this._isMouseDown) {
             this._ctx.beginPath();
             this._ctx.moveTo(_prevX, _prevY);

src/Pencil.js

@@ -1,5 +1,5 @@
 import CanvasTool from './CanvasTool'
-import {mousePosition} from './utils';
+import {pointerPosition} from './utils';
 
 class Rectangle extends CanvasTool {
 
@@ -9,7 +9,7 @@ class Rectangle extends CanvasTool {
     }
 
     doMouseDown(event) {
-        let [_x, _y] = mousePosition(event);
+        let [_x, _y] = pointerPosition(event);
         // store initial position of mouse
         [this._startX, this._startY] = [_x, _y];
         [this._x, this._y] = [_x, _y];
@@ -20,7 +20,7 @@ class Rectangle extends CanvasTool {
 
     doMouseMove(event) {
         let [_startX,_startY] = [this._startX, this._startY];
-        let [_currX, _currY] = mousePosition(event);
+        let [_currX, _currY] = pointerPosition(event);
         if (this._isMouseDown) {
             this._ctx.beginPath();
             this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);

src/Rectangle.js

@@ -54,9 +54,16 @@ class SketchField extends React.Component {
     componentDidMount() {
         // Assign the events to canvas element
         this._canvas.addEventListener('mouseup', this._mouseUp, false);
+        this._canvas.addEventListener('touchend', this._mouseUp, false);
+
         this._canvas.addEventListener('mousedown', this._mouseDown, false);
+        this._canvas.addEventListener('touchstart', this._mouseDown, false);
+
         this._canvas.addEventListener('mousemove', this._mouseMove, false);
-        this._canvas.addEventListener('mouseout', this._mouseOut, false);
+        this._canvas.addEventListener('touchmove', this._mouseMove, false);
+
+        this._canvas.addEventListener('mouseout', this._mouseOut);
+
         // Handle the resize of Canvas
         this._canvas.width = ReactDOM.findDOMNode(this).offsetWidth;
         window.addEventListener('resize', this._resize, false);
@@ -131,6 +138,7 @@ class SketchField extends React.Component {
      * @private
      */
     _mouseUp(event) {
+        if (event) event.preventDefault();
         // Call corresponding tool action
         let tool = this._tools[this.props.tool || Tool.Pencil];
         tool.doMouseUp(event);
@@ -152,6 +160,7 @@ class SketchField extends React.Component {
      * @private
      */
     _mouseMove(event) {
+        if (event) event.preventDefault();
         let tool = this._tools[this.props.tool || Tool.Pencil];
         tool.doMouseMove(event);
     }
@@ -163,6 +172,7 @@ class SketchField extends React.Component {
      * @private
      */
     _mouseDown(event) {
+        if (event) event.preventDefault();
         let tool = this._tools[this.props.tool || Tool.Pencil];
         tool.doMouseDown(event);
     }
@@ -174,6 +184,7 @@ class SketchField extends React.Component {
      * @private
      */
     _mouseOut(event) {
+        if (event) event.preventDefault();
         let tool = this._tools[this.props.tool || Tool.Pencil];
         tool.doMouseOut(event);
         // there is no direct on change event

src/SketchField.jsx

@@ -5,14 +5,16 @@
  * @returns *[] tuple of position x,y
  * @private
  */
-export function mousePosition(event) {
+export function pointerPosition(event) {
     event = event || window.event;
     var target = event.target || event.srcElement,
         style = target.currentStyle || window.getComputedStyle(target, null),
         borderLeftWidth = parseInt(style['borderLeftWidth'], 10),
         borderTopWidth = parseInt(style['borderTopWidth'], 10),
         rect = target.getBoundingClientRect(),
         _x = event.clientX - borderLeftWidth - rect.left,
-        _y = event.clientY - borderTopWidth - rect.top;
-    return [_x, _y];
+        _y = event.clientY - borderTopWidth - rect.top,
+        _touchX = event.changedTouches ? event.changedTouches[0].clientX - borderLeftWidth - rect.left : null,
+        _touchY = event.changedTouches ? event.changedTouches[0].clientY - borderTopWidth - rect.top : null;
+    return [(_x || _touchX), (_y || _touchY)];
 }