Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Fix for getPointer on touchDevices + Fix for absolute postioned scrolled elements #407

Merged
merged 1 commit into from

3 participants

@Kienz
Collaborator

Fix touch events if canvas is inside a scrolled container (see issue #123).

Fix bug if mouse moves over absolute scrolled element while object scaling (see issue #385). Also if mouse is moved over documentElement (fabric.document) while scaling object is fixed (same issue like #385).

Tested with Safari 5.1.7, 6.1, Firefox 18, 3.6.28, Chrome 24/25beta, Opera 12.12 and iPhone iOS 6.1, iPad iOS 6.1 in non-scrolled and scrolled containers.

@Kienz Kienz Fix touch events if canvas is inside a scrolled container (see issue …
…#123).

Fix bug if mouse moves over absolute scrolled element while object scaling (see issue #385). Also if mouse is moved over documentElement (fabric.document) while scaling object is fixed (same issue like #385).

Tested with Safari 5.1.7, 6.1, Firefox 18, 3.6.28, Chrome 24/25beta, Opera 12.12 and iPhone iOS 6.1, iPad iOS 6.1 in non-scrolled and scrolled containers.
ddaf8ba
@kangax kangax merged commit ac78df5 into from
@coulix

Are we certain about:

"Also if mouse is moved over documentElement (fabric.document) while scaling object is fixed (same issue like #385)."

On chrome 24, with scaling or freehand drawing a jumpy behavior remains.

Freehand
http://jsbin.com/ibeseh/11/edit

Move / resize
http://jsbin.com/ibeseh/13

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Feb 1, 2013
  1. @Kienz

    Fix touch events if canvas is inside a scrolled container (see issue …

    Kienz authored
    …#123).
    
    Fix bug if mouse moves over absolute scrolled element while object scaling (see issue #385). Also if mouse is moved over documentElement (fabric.document) while scaling object is fixed (same issue like #385).
    
    Tested with Safari 5.1.7, 6.1, Firefox 18, 3.6.28, Chrome 24/25beta, Opera 12.12 and iPhone iOS 6.1, iPad iOS 6.1 in non-scrolled and scrolled containers.
This page is out of date. Refresh to see the latest.
View
4 src/canvas.class.js
@@ -339,7 +339,7 @@
_setupCurrentTransform: function (e, target) {
var action = 'drag',
corner,
- pointer = getPointer(e);
+ pointer = getPointer(e, target.canvas.upperCanvasEl);
corner = target._findTargetCorner(e, this._offset);
if (corner) {
@@ -774,7 +774,7 @@
* @return {Object} object with "x" and "y" number values
*/
getPointer: function (e) {
- var pointer = getPointer(e);
+ var pointer = getPointer(e, this.upperCanvasEl);
return {
x: pointer.x - this._offset.left,
y: pointer.y - this._offset.top
View
4 src/canvas_events.mixin.js
@@ -290,7 +290,7 @@
// We initially clicked in an empty area, so we draw a box for multiple selection.
if (groupSelector !== null) {
- pointer = getPointer(e);
+ pointer = getPointer(e, this.upperCanvasEl);
groupSelector.left = pointer.x - this._offset.left - groupSelector.ex;
groupSelector.top = pointer.y - this._offset.top - groupSelector.ey;
@@ -323,7 +323,7 @@
}
else {
// object is being transformed (scaled/rotated/moved/etc.)
- pointer = getPointer(e);
+ pointer = getPointer(e, this.upperCanvasEl);
var x = pointer.x,
y = pointer.y;
View
2  src/object_interactivity.mixin.js
@@ -16,7 +16,7 @@
_findTargetCorner: function(e, offset) {
if (!this.hasControls || !this.active) return false;
- var pointer = getPointer(e),
+ var pointer = getPointer(e, this.canvas.upperCanvasEl),
ex = pointer.x - offset.left,
ey = pointer.y - offset.top,
xpoints,
View
28 src/util/dom_event.js
@@ -172,27 +172,41 @@
* @method getPointer
* @memberOf fabric.util
* @param {Event} event
+ * @param {HTMLCanvasElement} upperCanvasEl <canvas> element on which object selection is drawn
*/
- function getPointer(event) {
+ function getPointer(event, upperCanvasEl) {
event || (event = fabric.window.event);
var element = event.target || (typeof event.srcElement !== 'unknown' ? event.srcElement : null),
+ body = fabric.document.body || {scrollLeft: 0, scrollTop: 0},
+ docElement = fabric.document.documentElement,
+ orgElement = element,
scrollLeft = 0,
scrollTop = 0,
firstFixedAncestor;
while (element && element.parentNode && !firstFixedAncestor) {
- element = element.parentNode;
+ element = element.parentNode;
- if (element !== fabric.document && fabric.util.getElementPosition(element) === 'fixed') firstFixedAncestor = element;
+ if (element !== fabric.document && fabric.util.getElementPosition(element) === 'fixed') firstFixedAncestor = element;
+ if (element !== fabric.document && orgElement !== upperCanvasEl && fabric.util.getElementPosition(element) === 'absolute') {
+ scrollLeft = 0;
+ scrollTop = 0;
+ }
+ else if (element === fabric.document && orgElement !== upperCanvasEl) {
+ scrollLeft = body.scrollLeft || docElement.scrollLeft || 0;
+ scrollTop = body.scrollTop || docElement.scrollTop || 0;
+ }
+ else {
scrollLeft += element.scrollLeft || 0;
scrollTop += element.scrollTop || 0;
+ }
}
return {
- x: pointerX(event) + scrollLeft,
- y: pointerY(event) + scrollTop
+ x: pointerX(event) + scrollLeft,
+ y: pointerY(event) + scrollTop
};
}
@@ -209,10 +223,10 @@
if (fabric.isTouchSupported) {
pointerX = function(event) {
- return event.touches && event.touches[0] && event.touches[0].pageX || event.clientX;
+ return (event.touches && event.touches[0] ? (event.touches[0].pageX - (event.touches[0].pageX - event.touches[0].clientX)) || event.clientX : event.clientX);
};
pointerY = function(event) {
- return event.touches && event.touches[0] && event.touches[0].pageY || event.clientY;
+ return (event.touches && event.touches[0] ? (event.touches[0].pageY - (event.touches[0].pageY - event.touches[0].clientY)) || event.clientY : event.clientY);
};
}
Something went wrong with that request. Please try again.