Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-03-16 22:10:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add basic touch event support.

Browse source
This commit is contained in:
kangax 2011-09-21 19:29:00 -04:00
parent 36fe5e3a6f
commit efd2aba325
5 changed files with 114 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
HEADER.js
View file

@ -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("<!DOCTYPE html><html><head></head><body></body></html>");
fabric.window = fabric.document.createWindow();
}
}
fabric.isTouchSupported = "ontouchstart" in fabric.document.documentElement;

69
dist/all.js vendored
View file

@ -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("<!DOCTYPE html><html><head></head><body></body></html>");
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, {

2
package.json
View file

@ -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 <kangax@gmail.com>",
"keywords": ["canvas", "graphic", "graphics", "SVG", "node-canvas", "parser", "HTML5", "object model"],
"repository": "git://github.com/kangax/fabric.js",

56
src/canvas.class.js
View file

@ -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);

9
src/util/dom_event.js
View file

@ -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);