From efd2aba32509be868c07bba22f35db4c82483e7e Mon Sep 17 00:00:00 2001 From: kangax Date: Wed, 21 Sep 2011 19:29:00 -0400 Subject: [PATCH] Add basic touch event support. --- HEADER.js | 6 ++-- dist/all.js | 69 +++++++++++++++++++++++++++++++++++-------- package.json | 2 +- src/canvas.class.js | 56 +++++++++++++++++++++++++++-------- src/util/dom_event.js | 9 ++++++ 5 files changed, 114 insertions(+), 28 deletions(-) diff --git a/HEADER.js b/HEADER.js index 6d3e61a0..5daf17e5 100644 --- a/HEADER.js +++ b/HEADER.js @@ -1,6 +1,6 @@ /*! Fabric.js Copyright 2008-2011, Bitsonnet (Juriy Zaytsev, Maxim Chernyak) */ -var fabric = fabric || { version: "0.5.14" }; +var fabric = fabric || { version: "0.6" }; if (typeof exports != 'undefined') { exports.fabric = fabric; @@ -14,4 +14,6 @@ else { // assume we're running under node.js when document/window are not present fabric.document = require("jsdom").jsdom(""); fabric.window = fabric.document.createWindow(); -} \ No newline at end of file +} + +fabric.isTouchSupported = "ontouchstart" in fabric.document.documentElement; \ No newline at end of file diff --git a/dist/all.js b/dist/all.js index c82a7eeb..6c476ab4 100644 --- a/dist/all.js +++ b/dist/all.js @@ -1,6 +1,6 @@ /*! Fabric.js Copyright 2008-2011, Bitsonnet (Juriy Zaytsev, Maxim Chernyak) */ -var fabric = fabric || { version: "0.5.14" }; +var fabric = fabric || { version: "0.6" }; if (typeof exports != 'undefined') { exports.fabric = fabric; @@ -15,6 +15,8 @@ else { fabric.document = require("jsdom").jsdom(""); fabric.window = fabric.document.createWindow(); } + +fabric.isTouchSupported = "ontouchstart" in fabric.document.documentElement; /* http://www.JSON.org/json2.js 2010-03-20 @@ -2450,6 +2452,15 @@ fabric.util.string = { (docElement.clientTop || 0)); } + if (fabric.isTouchSupported) { + pointerX = function(event) { + return event.touches && event.touches[0].pageX; + }; + pointerY = function(event) { + return event.touches && event.touches[0].pageY; + }; + } + fabric.util.getPointer = getPointer; fabric.util.object.extend(fabric.util, fabric.Observable); @@ -4654,24 +4665,52 @@ fabric.util.string = { _initEvents: function () { var _this = this; - this._onMouseDown = function (e) { + this._onMouseDown = function (e) { _this.__onMouseDown(e); + addListener(fabric.document, 'mouseup', _this._onMouseUp); + addListener(fabric.document, 'touchend', _this._onMouseUp); + addListener(fabric.document, 'mousemove', _this._onMouseMove); + addListener(fabric.document, 'touchmove', _this._onMouseMove); + removeListener(_this.upperCanvasEl, 'mousemove', _this._onMouseMove); + removeListener(_this.upperCanvasEl, 'touchmove', _this._onMouseMove); }; - this._onMouseUp = function (e) { - _this.__onMouseUp(e); - removeListener(fabric.document, 'mouseup', _this._onMouseUp); - removeListener(fabric.document, 'mousemove', _this._onMouseMove); - addListener(_this.upperCanvasEl, 'mousemove', _this._onMouseMove); - }; - this._onMouseMove = function (e) { _this.__onMouseMove(e); }; - this._onResize = function (e) { _this.calcOffset() }; - addListener(this.upperCanvasEl, 'mousedown', this._onMouseDown); - addListener(this.upperCanvasEl, 'mousemove', this._onMouseMove); + this._onMouseUp = function (e) { + _this.__onMouseUp(e); + + removeListener(fabric.document, 'mouseup', _this._onMouseUp); + removeListener(fabric.document, 'touchend', _this._onMouseUp); + + removeListener(fabric.document, 'mousemove', _this._onMouseMove); + removeListener(fabric.document, 'touchmove', _this._onMouseMove); + + addListener(_this.upperCanvasEl, 'mousemove', _this._onMouseMove); + addListener(_this.upperCanvasEl, 'touchmove', _this._onMouseMove); + }; + + this._onMouseMove = function (e) { + e.preventDefault && e.preventDefault(); + _this.__onMouseMove(e); + }; + + this._onResize = function (e) { + _this.calcOffset(); + }; + + addListener(fabric.window, 'resize', this._onResize); + + if (fabric.isTouchSupported) { + addListener(this.upperCanvasEl, 'touchstart', this._onMouseDown); + addListener(this.upperCanvasEl, 'touchmove', this._onMouseMove); + } + else { + addListener(this.upperCanvasEl, 'mousedown', this._onMouseDown); + addListener(this.upperCanvasEl, 'mousemove', this._onMouseMove); + } }, /** @@ -4876,7 +4915,7 @@ fabric.util.string = { __onMouseDown: function (e) { // accept only left clicks - if (e.which !== 1) return; + if (e.which !== 1 && !fabric.isTouchSupported) return; if (this.isDrawingMode) { this._prepareForDrawing(e); @@ -6278,6 +6317,10 @@ fabric.util.string = { */ fabric.Element = fabric.Canvas; + if (fabric.isTouchSupported) { + fabric.Canvas.prototype._setCursorFromEvent = function() { }; + } + })(typeof exports != 'undefined' ? exports : this); fabric.util.object.extend(fabric.Canvas.prototype, { diff --git a/package.json b/package.json index 405bd2f4..afc79aec 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "fabric", "description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.", - "version": "0.5.14", + "version": "0.6", "author": "Juriy Zaytsev ", "keywords": ["canvas", "graphic", "graphics", "SVG", "node-canvas", "parser", "HTML5", "object model"], "repository": "git://github.com/kangax/fabric.js", diff --git a/src/canvas.class.js b/src/canvas.class.js index 784eca0a..75bac80d 100644 --- a/src/canvas.class.js +++ b/src/canvas.class.js @@ -395,24 +395,52 @@ _initEvents: function () { var _this = this; - this._onMouseDown = function (e) { + this._onMouseDown = function (e) { _this.__onMouseDown(e); + addListener(fabric.document, 'mouseup', _this._onMouseUp); + addListener(fabric.document, 'touchend', _this._onMouseUp); + addListener(fabric.document, 'mousemove', _this._onMouseMove); + addListener(fabric.document, 'touchmove', _this._onMouseMove); + removeListener(_this.upperCanvasEl, 'mousemove', _this._onMouseMove); + removeListener(_this.upperCanvasEl, 'touchmove', _this._onMouseMove); }; - this._onMouseUp = function (e) { - _this.__onMouseUp(e); - removeListener(fabric.document, 'mouseup', _this._onMouseUp); - removeListener(fabric.document, 'mousemove', _this._onMouseMove); - addListener(_this.upperCanvasEl, 'mousemove', _this._onMouseMove); - }; - this._onMouseMove = function (e) { _this.__onMouseMove(e); }; - this._onResize = function (e) { _this.calcOffset() }; - addListener(this.upperCanvasEl, 'mousedown', this._onMouseDown); - addListener(this.upperCanvasEl, 'mousemove', this._onMouseMove); + this._onMouseUp = function (e) { + _this.__onMouseUp(e); + + removeListener(fabric.document, 'mouseup', _this._onMouseUp); + removeListener(fabric.document, 'touchend', _this._onMouseUp); + + removeListener(fabric.document, 'mousemove', _this._onMouseMove); + removeListener(fabric.document, 'touchmove', _this._onMouseMove); + + addListener(_this.upperCanvasEl, 'mousemove', _this._onMouseMove); + addListener(_this.upperCanvasEl, 'touchmove', _this._onMouseMove); + }; + + this._onMouseMove = function (e) { + e.preventDefault && e.preventDefault(); + _this.__onMouseMove(e); + }; + + this._onResize = function (e) { + _this.calcOffset(); + }; + + addListener(fabric.window, 'resize', this._onResize); + + if (fabric.isTouchSupported) { + addListener(this.upperCanvasEl, 'touchstart', this._onMouseDown); + addListener(this.upperCanvasEl, 'touchmove', this._onMouseMove); + } + else { + addListener(this.upperCanvasEl, 'mousedown', this._onMouseDown); + addListener(this.upperCanvasEl, 'mousemove', this._onMouseMove); + } }, /** @@ -617,7 +645,7 @@ __onMouseDown: function (e) { // accept only left clicks - if (e.which !== 1) return; + if (e.which !== 1 && !fabric.isTouchSupported) return; if (this.isDrawingMode) { this._prepareForDrawing(e); @@ -2019,4 +2047,8 @@ */ fabric.Element = fabric.Canvas; + if (fabric.isTouchSupported) { + fabric.Canvas.prototype._setCursorFromEvent = function() { }; + } + })(typeof exports != 'undefined' ? exports : this); \ No newline at end of file diff --git a/src/util/dom_event.js b/src/util/dom_event.js index 56a9a6ce..96aa360b 100644 --- a/src/util/dom_event.js +++ b/src/util/dom_event.js @@ -204,6 +204,15 @@ (docElement.clientTop || 0)); } + if (fabric.isTouchSupported) { + pointerX = function(event) { + return event.touches && event.touches[0].pageX; + }; + pointerY = function(event) { + return event.touches && event.touches[0].pageY; + }; + } + fabric.util.getPointer = getPointer; fabric.util.object.extend(fabric.util, fabric.Observable);