lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-11-24 08:46:44 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Make events work on some CSS transforms. fix #792

Browse Source
This commit is contained in:
Anton Lavrenov
2019-11-28 12:22:44 -05:00
parent 65eeb13d66
commit 7787dfdf14
5 changed files with 75 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@@ -5,6 +5,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
## Not released:
* Make events work on some CSS transforms
* Fix caching on float dimensions
## 4.0.18 - 2019-11-20

25
konva.js
View File

@@ -6485,29 +6485,22 @@
Collection.prototype.each.call(evt.touches, function (touch) {
_this._pointerPositions.push({
id: touch.identifier,
x: touch.clientX - contentPosition.left,
y: touch.clientY - contentPosition.top
x: (touch.clientX - contentPosition.left) / contentPosition.scaleX,
y: (touch.clientY - contentPosition.top) / contentPosition.scaleY
});
});
Collection.prototype.each.call(evt.changedTouches || evt.touches, function (touch) {
_this._changedPointerPositions.push({
id: touch.identifier,
x: touch.clientX - contentPosition.left,
y: touch.clientY - contentPosition.top
x: (touch.clientX - contentPosition.left) / contentPosition.scaleX,
y: (touch.clientY - contentPosition.top) / contentPosition.scaleY
});
});
// currently, only handle one finger
if (evt.touches.length > 0) {
var touch = evt.touches[0];
// get the information for finger #1
x = touch.clientX - contentPosition.left;
y = touch.clientY - contentPosition.top;
}
}
else {
// mouse events
x = evt.clientX - contentPosition.left;
y = evt.clientY - contentPosition.top;
x = (evt.clientX - contentPosition.left) / contentPosition.scaleX;
y = (evt.clientY - contentPosition.top) / contentPosition.scaleY;
this.pointerPos = {
x: x,
y: y
@@ -6525,10 +6518,12 @@
Stage.prototype._getContentPosition = function () {
var rect = this.content.getBoundingClientRect
? this.content.getBoundingClientRect()
: { top: 0, left: 0 };
: { top: 0, left: 0, width: 1000, height: 1000 };
return {
top: rect.top,
left: rect.left
left: rect.left,
scaleX: rect.width / this.content.clientWidth,
scaleY: rect.height / this.content.clientHeight,
};
};
Stage.prototype._buildDOM = function () {

2
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

28
src/Stage.ts
View File

@@ -960,8 +960,8 @@ export class Stage extends Container<BaseLayer> {
Collection.prototype.each.call(evt.touches, (touch: any) => {
this._pointerPositions.push({
id: touch.identifier,
x: touch.clientX - contentPosition.left,
y: touch.clientY - contentPosition.top
x: (touch.clientX - contentPosition.left) / contentPosition.scaleX,
y: (touch.clientY - contentPosition.top) / contentPosition.scaleY
});
});
@@ -970,23 +970,15 @@ export class Stage extends Container<BaseLayer> {
(touch: any) => {
this._changedPointerPositions.push({
id: touch.identifier,
x: touch.clientX - contentPosition.left,
y: touch.clientY - contentPosition.top
x: (touch.clientX - contentPosition.left) / contentPosition.scaleX,
y: (touch.clientY - contentPosition.top) / contentPosition.scaleY
});
}
);
// currently, only handle one finger
if (evt.touches.length > 0) {
var touch = evt.touches[0];
// get the information for finger #1
x = touch.clientX - contentPosition.left;
y = touch.clientY - contentPosition.top;
}
} else {
// mouse events
x = evt.clientX - contentPosition.left;
y = evt.clientY - contentPosition.top;
x = (evt.clientX - contentPosition.left) / contentPosition.scaleX;
y = (evt.clientY - contentPosition.top) / contentPosition.scaleY;
this.pointerPos = {
x: x,
y: y
@@ -1006,10 +998,14 @@ export class Stage extends Container<BaseLayer> {
_getContentPosition() {
var rect = this.content.getBoundingClientRect
? this.content.getBoundingClientRect()
: { top: 0, left: 0 };
: { top: 0, left: 0, width: 1000, height: 1000 };
return {
top: rect.top,
left: rect.left
left: rect.left,
scaleX: rect.width / this.content.clientWidth,
scaleY: rect.height / this.content.clientHeight,
};
}
_buildDOM() {

51
test/functional/MouseEvents-test.js
View File

@@ -2096,4 +2096,55 @@ suite('MouseEvents', function() {
assert.equal(mousemove, 2, 'mousemove should be 2');
Konva.hitOnDragEnabled = false;
});
test('test scaled with CSS stage', function() {
var stage = addStage();
stage.container().style.transform = 'scale(0.5)';
stage.container().style.transformOrigin = 'left top';
var layer = new Konva.Layer();
stage.add(layer);
var rect = new Konva.Rect({
width: 50,
height: 50,
fill: 'red',
draggable: true
});
layer.add(rect);
layer.draw();
var clicks = 0;
rect.on('click', function() {
clicks += 1;
});
stage.simulateMouseDown({
x: 40,
y: 40
});
stage.simulateMouseUp({
x: 40,
y: 40
});
// should not register this click this click, because the stage is scaled
assert.equal(clicks, 0, 'clicks not triggered');
assert.deepEqual(stage.getPointerPosition(), { x: 80, y: 80 });
// try touch too
stage.simulateTouchStart({
x: 30,
y: 30
});
stage.simulateTouchEnd({
x: 30,
y: 30
});
assert.deepEqual(stage.getPointerPosition(), { x: 60, y: 60 });
});
});