lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 08:48:57 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix click stage event on dragend, Fix some Transformer cursor behavior. fix #463

Browse Source
This commit is contained in:
Anton Lavrenov 2018-09-27 10:59:27 +03:00
parent c0911572e7
commit 15b9d66b20
8 changed files with 144 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@ -12,6 +12,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
### Fixed
* `getClientRect` calculation fix for groups
* Update of `Konva.Transformer` on `rotateEnabled` change
* Fix click stage event on dragend
* Fix some Transformer cursor behavior
## [2.4.0][2018-09-19]

24
konva.js
View File

@ -2,7 +2,7 @@
* Konva JavaScript Framework v2.4.0
* http://konvajs.github.io/
* Licensed under the MIT
* Date: Mon Sep 24 2018
* Date: Thu Sep 27 2018
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@ -11040,7 +11040,10 @@
}
} else {
this._fire(MOUSEUP, { evt: evt, target: this, currentTarget: this });
this._fire(CLICK, { evt: evt, target: this, currentTarget: this });
if (Konva.listenClickTap) {
this._fire(CLICK, { evt: evt, target: this, currentTarget: this });
}
if (fireDblClick) {
this._fire(DBL_CLICK, {
evt: evt,
@ -11145,7 +11148,9 @@
}
} else {
this._fire(TOUCHEND, { evt: evt, target: this, currentTarget: this });
this._fire(TAP, { evt: evt, target: this, currentTarget: this });
if (Konva.listenClickTap) {
this._fire(TAP, { evt: evt, target: this, currentTarget: this });
}
if (fireDblClick) {
this._fire(DBL_TAP, {
evt: evt,
@ -19440,6 +19445,7 @@
var ATTR_CHANGE_LIST = [
'resizeEnabledChange',
'rotateAnchorOffsetChange',
'rotateEnabledChange',
'enabledAnchorsChange',
'anchorSizeChange',
'borderEnabledChange',
@ -19767,7 +19773,6 @@
// add hover styling
anchor.on('mouseenter', function() {
var layer = this.getLayer();
var tr = this.getParent();
var rad = Konva.getAngle(tr.rotation());
@ -19777,15 +19782,14 @@
var isMirrored = scale.y * scale.x < 0;
var cursor = getCursor(name, rad, isMirrored);
anchor.getStage().content.style.cursor = cursor;
layer.batchDraw();
tr._cursorChange = true;
});
anchor.on('mouseout', function() {
var layer = this.getLayer();
if (!layer) {
if (!anchor.getStage() || !this.getParent()) {
return;
}
anchor.getStage().content.style.cursor = '';
layer.batchDraw();
this.getParent()._cursorChange = false;
});
this.add(anchor);
},
@ -20245,6 +20249,10 @@
}
},
destroy: function() {
// console.log(this.isTransforming() && this.getStage());
if (this.getStage() && this._cursorChange) {
this.getStage().content.style.cursor = '';
}
Konva.Group.prototype.destroy.call(this);
this.detach();
this._removeEvents();

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

9
src/Stage.js
View File

@ -566,7 +566,10 @@
}
} else {
this._fire(MOUSEUP, { evt: evt, target: this, currentTarget: this });
this._fire(CLICK, { evt: evt, target: this, currentTarget: this });
if (Konva.listenClickTap) {
this._fire(CLICK, { evt: evt, target: this, currentTarget: this });
}
if (fireDblClick) {
this._fire(DBL_CLICK, {
evt: evt,
@ -671,7 +674,9 @@
}
} else {
this._fire(TOUCHEND, { evt: evt, target: this, currentTarget: this });
this._fire(TAP, { evt: evt, target: this, currentTarget: this });
if (Konva.listenClickTap) {
this._fire(TAP, { evt: evt, target: this, currentTarget: this });
}
if (fireDblClick) {
this._fire(DBL_TAP, {
evt: evt,

13
src/shapes/Transformer.js
View File

@ -4,6 +4,7 @@
var ATTR_CHANGE_LIST = [
'resizeEnabledChange',
'rotateAnchorOffsetChange',
'rotateEnabledChange',
'enabledAnchorsChange',
'anchorSizeChange',
'borderEnabledChange',
@ -331,7 +332,6 @@
// add hover styling
anchor.on('mouseenter', function() {
var layer = this.getLayer();
var tr = this.getParent();
var rad = Konva.getAngle(tr.rotation());
@ -341,15 +341,14 @@
var isMirrored = scale.y * scale.x < 0;
var cursor = getCursor(name, rad, isMirrored);
anchor.getStage().content.style.cursor = cursor;
layer.batchDraw();
tr._cursorChange = true;
});
anchor.on('mouseout', function() {
var layer = this.getLayer();
if (!layer) {
if (!anchor.getStage() || !this.getParent()) {
return;
}
anchor.getStage().content.style.cursor = '';
layer.batchDraw();
this.getParent()._cursorChange = false;
});
this.add(anchor);
},
@ -809,6 +808,10 @@
}
},
destroy: function() {
// console.log(this.isTransforming() && this.getStage());
if (this.getStage() && this._cursorChange) {
this.getStage().content.style.cursor = '';
}
Konva.Group.prototype.destroy.call(this);
this.detach();
this._removeEvents();

4
test/unit/Container-test.js
View File

@ -2346,7 +2346,7 @@ suite('Container', function() {
});
});
test.only('getClientRect - nested group with a hidden shapes', function() {
test('getClientRect - nested group with a hidden shapes', function() {
var stage = addStage();
var layer = new Konva.Layer();
@ -2376,8 +2376,6 @@ suite('Container', function() {
visible: false
});
group1.add(rect2);
assert.deepEqual(layer.getClientRect(), {
x: 50,

46
test/unit/Stage-test.js
View File

@ -733,6 +733,52 @@ suite('Stage', function() {
assert.equal(Konva.DD.node, undefined);
});
// ======================================================
test('do not trigger stage click after dragend', function() {
var stage = addStage();
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: 0,
y: 0,
width: 50,
height: 50,
fill: 'red',
draggable: true
});
layer.add(rect);
stage.add(layer);
var clicks = 0;
stage.on('click', function() {
debugger;
clicks += 1;
});
// simulate dragging
stage.simulateMouseDown({
x: 25,
y: 25
});
stage.simulateMouseMove({
x: 100,
y: 100
});
// move rect out of mouse
rect.x(-30);
rect.y(-30);
stage.simulateMouseUp({
x: 100,
y: 100
});
assert.equal(clicks, 0);
});
test('can listen click on empty areas', function() {
var stage = addStage();
var layer = new Konva.Layer();

61
test/unit/shapes/Transformer-test.js
View File

@ -1036,6 +1036,67 @@ suite('Transformer', function() {
assert.equal(stage.content.style.cursor, 'nwse-resize');
});
test('check correct cursor off on Transformer destroy', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var rect = new Konva.Rect({
x: 0,
y: 0,
draggable: true,
width: 100,
height: 100,
fill: 'yellow'
});
layer.add(rect);
var tr = new Konva.Transformer({
node: rect
});
layer.add(tr);
layer.draw();
stage.simulateMouseMove({
x: 100,
y: 100
});
stage.simulateMouseDown({
x: 100,
y: 100
});
assert.equal(stage.content.style.cursor, 'nwse-resize');
var target = stage.getIntersection({
x: 100,
y: 100
});
var top = stage.content.getBoundingClientRect().top;
tr._handleMouseMove({
target: target,
clientX: 120,
clientY: 100 + top
});
// here is duplicate, because transformer is listening window events
tr._handleMouseUp({
clientX: 120,
clientY: 100 + top
});
stage.simulateMouseUp({
x: 120,
y: 100
});
tr.destroy();
stage.simulateMouseMove({
x: 140,
y: 100
});
assert.equal(stage.content.style.cursor, '');
});
test('check correct cursor on scaled parent', function() {
var stage = addStage();
var layer = new Konva.Layer({