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

Transformer optimizations

Browse Source
This commit is contained in:
Anton Lavrenov 2018-03-21 09:56:00 +07:00
parent 1de4328fb8
commit 2e93f99aab
5 changed files with 167 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
konva.js
View File

@ -2,7 +2,7 @@
* Konva JavaScript Framework v2.0.2
* http://konvajs.github.io/
* Licensed under the MIT
* Date: Mon Mar 19 2018
* Date: Wed Mar 21 2018
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@ -2407,7 +2407,6 @@
Konva.Util.addMethods(Konva.Node, {
_init: function(config) {
var that = this;
this._id = Konva.idCounter++;
this.eventListeners = {};
this.attrs = {};
@ -2419,21 +2418,21 @@
// event bindings for cache handling
this.on(TRANSFORM_CHANGE_STR, function() {
this._clearCache(TRANSFORM);
that._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
});
this.on(SCALE_CHANGE_STR, function() {
that._clearSelfAndDescendantCache(ABSOLUTE_SCALE);
this._clearSelfAndDescendantCache(ABSOLUTE_SCALE);
});
this.on('visibleChange.konva', function() {
that._clearSelfAndDescendantCache(VISIBLE);
this._clearSelfAndDescendantCache(VISIBLE);
});
this.on('listeningChange.konva', function() {
that._clearSelfAndDescendantCache(LISTENING);
this._clearSelfAndDescendantCache(LISTENING);
});
this.on('opacityChange.konva', function() {
that._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
});
},
_clearCache: function(attr) {
@ -18690,10 +18689,12 @@
TRANSFORM_CHANGE_STR,
function() {
this._clearCache(NODE_RECT);
this._clearCache('transform');
this._clearSelfAndDescendantCache('absoluteTransform');
}.bind(this)
);
node.on(TRANSFORM_CHANGE_STR, this.requestUpdate.bind(this));
node.on('dragmove.resizer', this.requestUpdate.bind(this));
// node.on(TRANSFORM_CHANGE_STR, this.requestUpdate.bind(this));
// node.on('dragmove.resizer', this.requestUpdate.bind(this));
var elementsCreated = !!this.findOne('.top-left');
if (elementsCreated) {
@ -18708,7 +18709,11 @@
detach: function() {
if (this.getNode()) {
this.getNode().off('.resizer');
this._node = undefined;
}
this._clearCache(NODE_RECT);
this._clearCache('transform');
this._clearSelfAndDescendantCache('absoluteTransform');
},
_getNodeRect: function() {
@ -19117,13 +19122,8 @@
},
update: function() {
var attrs = this._getNodeRect();
var x = attrs.x;
var y = attrs.y;
var width = attrs.width;
var height = attrs.height;
this.x(x);
this.y(y);
this.rotation(attrs.rotation);
var enabledHandlers = this.enabledHandlers();
var resizeEnabled = this.resizeEnabled();

6
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

11
src/Node.js
View File

@ -52,7 +52,6 @@
Konva.Util.addMethods(Konva.Node, {
_init: function(config) {
var that = this;
this._id = Konva.idCounter++;
this.eventListeners = {};
this.attrs = {};
@ -64,21 +63,21 @@
// event bindings for cache handling
this.on(TRANSFORM_CHANGE_STR, function() {
this._clearCache(TRANSFORM);
that._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
});
this.on(SCALE_CHANGE_STR, function() {
that._clearSelfAndDescendantCache(ABSOLUTE_SCALE);
this._clearSelfAndDescendantCache(ABSOLUTE_SCALE);
});
this.on('visibleChange.konva', function() {
that._clearSelfAndDescendantCache(VISIBLE);
this._clearSelfAndDescendantCache(VISIBLE);
});
this.on('listeningChange.konva', function() {
that._clearSelfAndDescendantCache(LISTENING);
this._clearSelfAndDescendantCache(LISTENING);
});
this.on('opacityChange.konva', function() {
that._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
});
},
_clearCache: function(attr) {

15
src/shapes/Transformer.js
View File

@ -163,10 +163,12 @@
TRANSFORM_CHANGE_STR,
function() {
this._clearCache(NODE_RECT);
this._clearCache('transform');
this._clearSelfAndDescendantCache('absoluteTransform');
}.bind(this)
);
node.on(TRANSFORM_CHANGE_STR, this.requestUpdate.bind(this));
node.on('dragmove.resizer', this.requestUpdate.bind(this));
// node.on(TRANSFORM_CHANGE_STR, this.requestUpdate.bind(this));
// node.on('dragmove.resizer', this.requestUpdate.bind(this));
var elementsCreated = !!this.findOne('.top-left');
if (elementsCreated) {
@ -181,7 +183,11 @@
detach: function() {
if (this.getNode()) {
this.getNode().off('.resizer');
this._node = undefined;
}
this._clearCache(NODE_RECT);
this._clearCache('transform');
this._clearSelfAndDescendantCache('absoluteTransform');
},
_getNodeRect: function() {
@ -590,13 +596,8 @@
},
update: function() {
var attrs = this._getNodeRect();
var x = attrs.x;
var y = attrs.y;
var width = attrs.width;
var height = attrs.height;
this.x(x);
this.y(y);
this.rotation(attrs.rotation);
var enabledHandlers = this.enabledHandlers();
var resizeEnabled = this.resizeEnabled();

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

@ -746,4 +746,141 @@ suite('Transformer', function() {
assert.equal(rect.height(), 100);
assert.equal(rect.rotation(), 90);
});
test('transformer should automatically track attr changes of a node', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var rect = new Konva.Rect({
x: 100,
y: 60,
draggable: true,
width: 100,
height: 100,
fill: 'yellow'
});
layer.add(rect);
var tr = new Konva.Transformer({
node: rect
});
layer.add(tr);
layer.draw();
assert.equal(tr.x(), 100);
assert.equal(tr.y(), 60);
assert.equal(tr.width(), 100);
assert.equal(rect.height(), 100);
assert.equal(rect.rotation(), 0);
rect.x(0);
assert.equal(tr.x(), 0);
rect.y(0);
assert.equal(tr.y(), 0);
rect.width(50);
assert.equal(tr.width(), 50);
rect.height(50);
assert.equal(tr.height(), 50);
rect.scaleX(2);
assert.equal(tr.width(), 100);
rect.scaleY(2);
assert.equal(tr.height(), 100);
// manual check position
var back = tr.findOne('.back');
assert.equal(back.getAbsolutePosition().x, 0);
layer.batchDraw();
});
test('on detach should remove all listeners', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var rect = new Konva.Rect({
x: 100,
y: 60,
draggable: true,
width: 100,
height: 100,
fill: 'yellow'
});
layer.add(rect);
var tr = new Konva.Transformer({
node: rect
});
layer.add(tr);
layer.draw();
tr.detach();
rect.width(200);
assert.equal(tr.width(), 0);
layer.draw();
var called = false;
// clear cache is called on each update
// make sure we don't call it
tr._clearCache = function() {
called = true;
};
rect.width(50);
assert.equal(called, false, 'don not call clear cache');
});
test('check transformer with drag&drop', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var rect = new Konva.Rect({
x: 0,
y: 0,
width: 100,
height: 100,
fill: 'green',
draggable: true
});
layer.add(rect);
var tr = new Konva.Transformer({
node: rect
});
layer.add(tr);
layer.draw();
stage.simulateMouseDown({
x: 20,
y: 20
});
stage.simulateMouseMove({
x: 30,
y: 30
});
assert.equal(rect.x(), 10);
assert.equal(rect.y(), 10);
assert.equal(tr.x(), 10);
assert.equal(tr.y(), 10);
stage.simulateMouseUp({
x: 30,
y: 30
});
});
});