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

transition attr updates now fire the attr change event. Fixed problem with root level attrs not being fired when child level attr changed

Browse Source
This commit is contained in:
Eric Rowell 2012-07-01 00:19:56 -07:00
parent ddb57a03ba
commit 31566bff13
7 changed files with 71 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -6,7 +6,7 @@ To build a development version of the library, run `thor build:dev VERSION`, whe
If you add a file in the src directory, be sure to add the filename to the filename array in the Thorfile.
#Tests
To run tests, open `unitTests.html`, `functionalTests.html`, or `manualTests.html` in the `tests/html` directory. Unit tests and functional tests output the results to the console via `console.log()` so be sure to have it open. Use test() for hard tests which will throw an error if something fails, and use warn() for soft tests that will allow the tests to continue. The warn() method is great for tests that will have different results in different browsers, such as canvas data url comparisons, text metric dimensions, etc. All tests should pass in Google Chrome with no warnings, And all tests should pass with some warnings for other browsers.
To run tests, open `unitTests.html`, `functionalTests.html`, or `manualTests.html` in the `tests/html` directory. Unit tests and functional tests output the results to the console via `console.log()` so be sure to have it open. Use test() for hard tests which will throw an error if something fails, and use warn() for soft tests that will allow the tests to continue. The warn() method is great for tests that will have different results in different browsers, such as canvas data url comparisons, text metric dimensions, etc. All tests should pass in Google Chrome with no warnings, and all tests should pass with some warnings in other browsers.
#Pull Requests
I'd be happy to review any pull requests that may better the KineticJS project, in particular if you have a bug fix, enhancement, or a new shape (see `src/shapes` for examples). Before doing so, please first make sure that all of the unit tests and functional tests pass.

38
dist/kinetic-core.js vendored
View File

@ -3,7 +3,7 @@
* http://www.kineticjs.com/
* Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses.
* Date: Jun 30 2012
* Date: Jul 01 2012
*
* Copyright (C) 2011 - 2012 by Eric Rowell
*
@ -573,7 +573,6 @@ Kinetic.Node.prototype = {
setAttrs: function(config) {
var go = Kinetic.GlobalObject;
var that = this;
// set properties from config
if(config !== undefined) {
function setAttrs(obj, c, level) {
@ -644,14 +643,13 @@ Kinetic.Node.prototype = {
that._setAttr(obj, key, val);
break;
}
/*
* only fire change event for root
* level attrs
*/
if(level === 0) {
that._fireChangeEvent(key);
}
}
/*
* only fire change event for root
* level attrs
*/
if(level === 0) {
that._fireChangeEvent(key);
}
}
}
@ -4921,20 +4919,22 @@ Kinetic.Transition = function(node, config) {
var that = this;
// add tween for each property
function addTween(c, attrs) {
function addTween(c, attrs, obj, rootObj) {
for(var key in c) {
if(key !== 'duration' && key !== 'easing' && key !== 'callback') {
// if val is an object then traverse
if(Kinetic.GlobalObject._isObject(c[key])) {
addTween(c[key], attrs[key]);
obj[key] = {};
addTween(c[key], attrs[key], obj[key], rootObj);
}
else {
that._add(that._getTween(attrs, key, c[key]));
that._add(that._getTween(attrs, key, c[key], obj, rootObj));
}
}
}
}
addTween(config, node.attrs);
var obj = {};
addTween(config, node.attrs, obj, obj);
var finishedTweens = 0;
for(var n = 0; n < this.tweens.length; n++) {
@ -4983,7 +4983,7 @@ Kinetic.Transition.prototype = {
_add: function(tween) {
this.tweens.push(tween);
},
_getTween: function(key, prop, val) {
_getTween: function(attrs, prop, val, obj, rootObj) {
var config = this.config;
var node = this.node;
var easing = config.easing;
@ -4992,8 +4992,9 @@ Kinetic.Transition.prototype = {
}
var tween = new Kinetic.Tween(node, function(i) {
key[prop] = i;
}, Kinetic.Tweens[easing], key[prop], val, config.duration);
obj[prop] = i;
node.setAttrs(rootObj);
}, Kinetic.Tweens[easing], attrs[prop], val, config.duration);
return tween;
}
@ -5068,10 +5069,7 @@ Kinetic.Tween.prototype = {
},
setPosition: function(p) {
this.prevPos = this._pos;
//var a = this.suffixe != '' ? this.suffixe : '';
this.propFunc(p);
//+ a;
//this.obj(Math.round(p));
this._pos = p;
this.broadcastMessage('onChanged', {
target: this,

6
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

16
src/Node.js
View File

@ -176,7 +176,6 @@ Kinetic.Node.prototype = {
setAttrs: function(config) {
var go = Kinetic.GlobalObject;
var that = this;
// set properties from config
if(config !== undefined) {
function setAttrs(obj, c, level) {
@ -247,14 +246,13 @@ Kinetic.Node.prototype = {
that._setAttr(obj, key, val);
break;
}
/*
* only fire change event for root
* level attrs
*/
if(level === 0) {
that._fireChangeEvent(key);
}
}
/*
* only fire change event for root
* level attrs
*/
if(level === 0) {
that._fireChangeEvent(key);
}
}
}

20
src/util/Transition.js
View File

@ -18,20 +18,22 @@ Kinetic.Transition = function(node, config) {
var that = this;
// add tween for each property
function addTween(c, attrs) {
function addTween(c, attrs, obj, rootObj) {
for(var key in c) {
if(key !== 'duration' && key !== 'easing' && key !== 'callback') {
// if val is an object then traverse
if(Kinetic.GlobalObject._isObject(c[key])) {
addTween(c[key], attrs[key]);
obj[key] = {};
addTween(c[key], attrs[key], obj[key], rootObj);
}
else {
that._add(that._getTween(attrs, key, c[key]));
that._add(that._getTween(attrs, key, c[key], obj, rootObj));
}
}
}
}
addTween(config, node.attrs);
var obj = {};
addTween(config, node.attrs, obj, obj);
var finishedTweens = 0;
for(var n = 0; n < this.tweens.length; n++) {
@ -80,7 +82,7 @@ Kinetic.Transition.prototype = {
_add: function(tween) {
this.tweens.push(tween);
},
_getTween: function(key, prop, val) {
_getTween: function(attrs, prop, val, obj, rootObj) {
var config = this.config;
var node = this.node;
var easing = config.easing;
@ -89,8 +91,9 @@ Kinetic.Transition.prototype = {
}
var tween = new Kinetic.Tween(node, function(i) {
key[prop] = i;
}, Kinetic.Tweens[easing], key[prop], val, config.duration);
obj[prop] = i;
node.setAttrs(rootObj);
}, Kinetic.Tweens[easing], attrs[prop], val, config.duration);
return tween;
}
@ -165,10 +168,7 @@ Kinetic.Tween.prototype = {
},
setPosition: function(p) {
this.prevPos = this._pos;
//var a = this.suffixe != '' ? this.suffixe : '';
this.propFunc(p);
//+ a;
//this.obj(Math.round(p));
this._pos = p;
this.broadcastMessage('onChanged', {
target: this,

15
tests/js/manualTests.js
View File

@ -82,7 +82,15 @@ Test.prototype.tests = {
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4
strokeWidth: 4,
shadow: {
color: 'black',
offset: {
x: 10,
y: 10
},
alpha: 0.5
}
});
layer.add(rect);
@ -90,6 +98,11 @@ Test.prototype.tests = {
rect.transitionTo({
duration: 2,
shadow: {
offset: {
x: 80
}
},
x: 400,
y: 30,
rotation: Math.PI * 2,

22
tests/js/unitTests.js
View File

@ -3125,21 +3125,35 @@ Test.prototype.tests = {
y: 50,
width: 200,
height: 50,
fill: 'blue'
fill: 'blue',
shadow: {
offset: [10, 10]
}
});
layer.add(rect);
stage.add(layer);
var triggered = false;
var widthChanged = false;
var shadowChanged = false;
rect.on('widthChange', function() {
triggered = true;
widthChanged = true;
});
rect.on('shadowChange', function() {
shadowChanged = true;
});
rect.setSize(210);
rect.setShadow({
offset: {
x: 20
}
});
test(triggered, 'width change event not triggered');
test(widthChanged, 'width change event was not fired');
test(shadowChanged, 'shadow change event not fired');
},
'NODE - test setting shadow offset': function(containerId) {
var stage = new Kinetic.Stage({