lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-12-19 10:58:20 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

pointer position fixes

Browse Source
This commit is contained in:
Anton Lavrenov
2017-05-24 21:50:56 +03:00
parent 485fac6550
commit 3e3186d0d1
5 changed files with 95 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
konva.js
View File

@@ -2,7 +2,7 @@
* Konva JavaScript Framework v1.6.2 * Konva JavaScript Framework v1.6.2
* http://konvajs.github.io/ * http://konvajs.github.io/
* Licensed under the MIT or GPL Version 2 licenses. * Licensed under the MIT or GPL Version 2 licenses.
* Date: Mon May 08 2017 * Date: Wed May 24 2017
* *
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS) * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - 2017 by Anton Lavrenov (Konva) * Modified work Copyright (C) 2014 - 2017 by Anton Lavrenov (Konva)
@@ -10008,7 +10008,7 @@
layers = this.children; layers = this.children;
if (x || y) { if (x || y) {
_context.translate((-1) * x, (-1) * y); _context.translate(-1 * x, -1 * y);
} }
layers.each(function(layer) { layers.each(function(layer) {
@@ -10284,12 +10284,9 @@
dd.justDragged = false; dd.justDragged = false;
} }
setTimeout( setTimeout(function() {
function() { Konva.inDblClickWindow = false;
Konva.inDblClickWindow = false; }, Konva.dblClickWindow);
},
Konva.dblClickWindow
);
if (shape && shape.isListening()) { if (shape && shape.isListening()) {
shape._fireAndBubble(MOUSEUP, { evt: evt }); shape._fireAndBubble(MOUSEUP, { evt: evt });
@@ -10340,7 +10337,9 @@
// only call preventDefault if the shape is listening for events // only call preventDefault if the shape is listening for events
if ( if (
shape.isListening() && shape.preventDefault() && evt.preventDefault shape.isListening() &&
shape.preventDefault() &&
evt.preventDefault
) { ) {
evt.preventDefault(); evt.preventDefault();
} }
@@ -10360,12 +10359,9 @@
Konva.inDblClickWindow = true; Konva.inDblClickWindow = true;
} }
setTimeout( setTimeout(function() {
function() { Konva.inDblClickWindow = false;
Konva.inDblClickWindow = false; }, Konva.dblClickWindow);
},
Konva.dblClickWindow
);
if (shape && shape.isListening()) { if (shape && shape.isListening()) {
shape._fireAndBubble(TOUCHEND, { evt: evt }); shape._fireAndBubble(TOUCHEND, { evt: evt });
@@ -10384,7 +10380,9 @@
} }
// only call preventDefault if the shape is listening for events // only call preventDefault if the shape is listening for events
if ( if (
shape.isListening() && shape.preventDefault() && evt.preventDefault shape.isListening() &&
shape.preventDefault() &&
evt.preventDefault
) { ) {
evt.preventDefault(); evt.preventDefault();
} }
@@ -10409,7 +10407,9 @@
shape._fireAndBubble(TOUCHMOVE, { evt: evt }); shape._fireAndBubble(TOUCHMOVE, { evt: evt });
// only call preventDefault if the shape is listening for events // only call preventDefault if the shape is listening for events
if ( if (
shape.isListening() && shape.preventDefault() && evt.preventDefault shape.isListening() &&
shape.preventDefault() &&
evt.preventDefault
) { ) {
evt.preventDefault(); evt.preventDefault();
} }
@@ -10447,21 +10447,13 @@
if (evt.touches.length > 0) { if (evt.touches.length > 0) {
var touch = evt.touches[0]; var touch = evt.touches[0];
// get the information for finger #1 // get the information for finger #1
x = touch.offsetX !== undefined x = touch.clientX - contentPosition.left;
? touch.offsetX y = touch.clientY - contentPosition.top;
: touch.clientX - contentPosition.left;
y = touch.offsetY !== undefined
? touch.offsetY
: touch.clientY - contentPosition.top;
} }
} else { } else {
// mouse events // mouse events
x = evt.offsetX !== undefined x = evt.clientX - contentPosition.left;
? evt.offsetX y = evt.clientY - contentPosition.top;
: evt.clientX - contentPosition.left;
y = evt.offsetY !== undefined
? evt.offsetY
: evt.clientY - contentPosition.top;
} }
if (x !== null && y !== null) { if (x !== null && y !== null) {
this.pointerPos = { this.pointerPos = {

12
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

48
src/Stage.js
View File

@@ -266,7 +266,7 @@
layers = this.children; layers = this.children;
if (x || y) { if (x || y) {
_context.translate((-1) * x, (-1) * y); _context.translate(-1 * x, -1 * y);
} }
layers.each(function(layer) { layers.each(function(layer) {
@@ -542,12 +542,9 @@
dd.justDragged = false; dd.justDragged = false;
} }
setTimeout( setTimeout(function() {
function() { Konva.inDblClickWindow = false;
Konva.inDblClickWindow = false; }, Konva.dblClickWindow);
},
Konva.dblClickWindow
);
if (shape && shape.isListening()) { if (shape && shape.isListening()) {
shape._fireAndBubble(MOUSEUP, { evt: evt }); shape._fireAndBubble(MOUSEUP, { evt: evt });
@@ -598,7 +595,9 @@
// only call preventDefault if the shape is listening for events // only call preventDefault if the shape is listening for events
if ( if (
shape.isListening() && shape.preventDefault() && evt.preventDefault shape.isListening() &&
shape.preventDefault() &&
evt.preventDefault
) { ) {
evt.preventDefault(); evt.preventDefault();
} }
@@ -618,12 +617,9 @@
Konva.inDblClickWindow = true; Konva.inDblClickWindow = true;
} }
setTimeout( setTimeout(function() {
function() { Konva.inDblClickWindow = false;
Konva.inDblClickWindow = false; }, Konva.dblClickWindow);
},
Konva.dblClickWindow
);
if (shape && shape.isListening()) { if (shape && shape.isListening()) {
shape._fireAndBubble(TOUCHEND, { evt: evt }); shape._fireAndBubble(TOUCHEND, { evt: evt });
@@ -642,7 +638,9 @@
} }
// only call preventDefault if the shape is listening for events // only call preventDefault if the shape is listening for events
if ( if (
shape.isListening() && shape.preventDefault() && evt.preventDefault shape.isListening() &&
shape.preventDefault() &&
evt.preventDefault
) { ) {
evt.preventDefault(); evt.preventDefault();
} }
@@ -667,7 +665,9 @@
shape._fireAndBubble(TOUCHMOVE, { evt: evt }); shape._fireAndBubble(TOUCHMOVE, { evt: evt });
// only call preventDefault if the shape is listening for events // only call preventDefault if the shape is listening for events
if ( if (
shape.isListening() && shape.preventDefault() && evt.preventDefault shape.isListening() &&
shape.preventDefault() &&
evt.preventDefault
) { ) {
evt.preventDefault(); evt.preventDefault();
} }
@@ -705,21 +705,13 @@
if (evt.touches.length > 0) { if (evt.touches.length > 0) {
var touch = evt.touches[0]; var touch = evt.touches[0];
// get the information for finger #1 // get the information for finger #1
x = touch.offsetX !== undefined x = touch.clientX - contentPosition.left;
? touch.offsetX y = touch.clientY - contentPosition.top;
: touch.clientX - contentPosition.left;
y = touch.offsetY !== undefined
? touch.offsetY
: touch.clientY - contentPosition.top;
} }
} else { } else {
// mouse events // mouse events
x = evt.offsetX !== undefined x = evt.clientX - contentPosition.left;
? evt.offsetX y = evt.clientY - contentPosition.top;
: evt.clientX - contentPosition.left;
y = evt.offsetY !== undefined
? evt.offsetY
: evt.clientY - contentPosition.top;
} }
if (x !== null && y !== null) { if (x !== null && y !== null) {
this.pointerPos = { this.pointerPos = {

67
test/functional/TouchEvents-test.js
View File

@@ -16,7 +16,7 @@ suite('TouchEvents', function() {
layer.add(circle); layer.add(circle);
stage.add(layer); stage.add(layer);
var circleTouchstart = circleTouchend = stageContentTouchstart = stageContentTouchend = stageContentTouchmove = stageContentTap = stageContentDbltap = 0; var circleTouchstart = (circleTouchend = stageContentTouchstart = stageContentTouchend = stageContentTouchmove = stageContentTap = stageContentDbltap = 0);
var top = stage.content.getBoundingClientRect().top; var top = stage.content.getBoundingClientRect().top;
@@ -51,8 +51,8 @@ suite('TouchEvents', function() {
stage._touchstart({ stage._touchstart({
touches: [ touches: [
{ {
offsetX: 100, clientX: 100,
offsetY: 100 clientY: 100 + top
} }
] ]
}); });
@@ -70,8 +70,8 @@ suite('TouchEvents', function() {
stage._touchstart({ stage._touchstart({
touches: [ touches: [
{ {
offsetX: 1, clientX: 1,
offsetY: 1 clientY: 1 + top
} }
] ]
}); });
@@ -146,8 +146,8 @@ suite('TouchEvents', function() {
stage._touchstart({ stage._touchstart({
touches: [ touches: [
{ {
offsetX: 289, clientX: 289,
offsetY: 100 clientY: 100 + top
} }
], ],
preventDefault: function() {} preventDefault: function() {}
@@ -178,8 +178,8 @@ suite('TouchEvents', function() {
stage._touchstart({ stage._touchstart({
touches: [ touches: [
{ {
offsetX: 289, clientX: 289,
offsetY: 100 clientY: 100 + top
} }
], ],
preventDefault: function() {} preventDefault: function() {}
@@ -206,29 +206,26 @@ suite('TouchEvents', function() {
assert(tap, '11) tap should be true'); assert(tap, '11) tap should be true');
assert(dbltap, '11) dbltap should be true'); assert(dbltap, '11) dbltap should be true');
setTimeout( setTimeout(function() {
function() { // touchmove circle
// touchmove circle stage._touchmove({
stage._touchmove({ touches: [
touches: [ {
{ clientX: 290,
offsetX: 290, clientY: 100 + top
offsetY: 100 }
} ],
], preventDefault: function() {}
preventDefault: function() {} });
});
assert(touchstart, '12) touchstart should be true'); assert(touchstart, '12) touchstart should be true');
assert(touchmove, '12) touchmove should be true'); assert(touchmove, '12) touchmove should be true');
assert(touchend, '12) touchend should be true'); assert(touchend, '12) touchend should be true');
assert(tap, '12) tap should be true'); assert(tap, '12) tap should be true');
assert(dbltap, '12) dbltap should be true'); assert(dbltap, '12) dbltap should be true');
done(); done();
}, }, 17);
17
);
}); });
// test for https://github.com/konvajs/konva/issues/156 // test for https://github.com/konvajs/konva/issues/156
@@ -248,7 +245,7 @@ suite('TouchEvents', function() {
layer.add(circle); layer.add(circle);
stage.add(layer); stage.add(layer);
var circleTouchend = stageContentTouchstart = stageContentTouchend = 0; var circleTouchend = (stageContentTouchstart = stageContentTouchend = 0);
var top = stage.content.getBoundingClientRect().top; var top = stage.content.getBoundingClientRect().top;
@@ -267,8 +264,8 @@ suite('TouchEvents', function() {
stage._touchstart({ stage._touchstart({
touches: [ touches: [
{ {
offsetX: 1, clientX: 1,
offsetY: 1 clientY: 1 + top
} }
] ]
}); });
@@ -276,8 +273,8 @@ suite('TouchEvents', function() {
stage._touchend({ stage._touchend({
touches: [ touches: [
{ {
offsetX: 100, clientX: 100,
offsetY: 100 clientY: 100 + top
} }
] ]
}); });

25
test/runner.js
View File

@@ -10,14 +10,16 @@ var assert = chai.assert,
assertions = document.createElement('em'); assertions = document.createElement('em');
window.requestAnimFrame = (function(callback) { window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame || window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame || window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame || window.oRequestAnimationFrame ||
window.msRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) { function(callback) {
window.setTimeout(callback, 1000 / 30); window.setTimeout(callback, 1000 / 30);
}; }
);
})(); })();
function init() { function init() {
@@ -226,17 +228,21 @@ afterEach(function() {
}); });
Konva.Stage.prototype.simulateMouseDown = function(pos) { Konva.Stage.prototype.simulateMouseDown = function(pos) {
var top = this.content.getBoundingClientRect().top;
this._mousedown({ this._mousedown({
offsetX: pos.x, clientX: pos.x,
offsetY: pos.y, clientY: pos.y + top,
button: pos.button button: pos.button
}); });
}; };
Konva.Stage.prototype.simulateMouseMove = function(pos) { Konva.Stage.prototype.simulateMouseMove = function(pos) {
var top = this.content.getBoundingClientRect().top;
var evt = { var evt = {
offsetX: pos.x, clientX: pos.x,
offsetY: pos.y, clientY: pos.y + top,
button: pos.button button: pos.button
}; };
@@ -245,10 +251,11 @@ Konva.Stage.prototype.simulateMouseMove = function(pos) {
}; };
Konva.Stage.prototype.simulateMouseUp = function(pos) { Konva.Stage.prototype.simulateMouseUp = function(pos) {
'use strict'; var top = this.content.getBoundingClientRect().top;
var evt = { var evt = {
offsetX: pos.x, clientX: pos.x,
offsetY: pos.y, clientY: pos.y + top,
button: pos.button button: pos.button
}; };