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

refactored attr event change logic a bit. added delete operator in a couple places to fix memory leaks. added better event unit tests.

Browse Source
This commit is contained in:
Eric Rowell 2012-06-09 10:53:47 -07:00
parent 12b61b3621
commit e64024d3bd
6 changed files with 96 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
dist/kinetic-core.js vendored
View File

@ -453,14 +453,15 @@ Kinetic.Node.prototype = {
if(this.eventListeners[baseEvent][i].name === name) { if(this.eventListeners[baseEvent][i].name === name) {
this.eventListeners[baseEvent].splice(i, 1); this.eventListeners[baseEvent].splice(i, 1);
if(this.eventListeners[baseEvent].length === 0) { if(this.eventListeners[baseEvent].length === 0) {
this.eventListeners[baseEvent] = undefined; delete this.eventListeners[baseEvent];
break;
} }
break; i--;
} }
} }
} }
else { else {
this.eventListeners[baseEvent] = undefined; delete this.eventListeners[baseEvent];
} }
} }
}, },
@ -535,15 +536,14 @@ Kinetic.Node.prototype = {
*/ */
case 'draggable': case 'draggable':
that.draggable(c[key]); that.draggable(c[key]);
that._fireChangeEvent(key);
break; break;
case 'listening': case 'listening':
that.listen(c[key]); that.listen(c[key]);
that._fireChangeEvent(key);
break; break;
case 'rotationDeg': case 'rotationDeg':
that._setAttr(obj, 'rotation', c[key] * Math.PI / 180); that._setAttr(obj, 'rotation', c[key] * Math.PI / 180);
that._fireChangeEvent('rotation'); // override key for change event
key = 'rotation';
break; break;
/* /*
* config objects * config objects
@ -552,7 +552,6 @@ Kinetic.Node.prototype = {
var pos = go._getXY(val); var pos = go._getXY(val);
that._setAttr(obj[key], 'x', pos.x); that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y); that._setAttr(obj[key], 'y', pos.y);
that._fireChangeEvent(key);
break; break;
/* /*
* includes: * includes:
@ -563,17 +562,14 @@ Kinetic.Node.prototype = {
var pos = go._getXY(val); var pos = go._getXY(val);
that._setAttr(obj[key], 'x', pos.x); that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y); that._setAttr(obj[key], 'y', pos.y);
that._fireChangeEvent(key);
break; break;
case 'scale': case 'scale':
var pos = go._getXY(val); var pos = go._getXY(val);
that._setAttr(obj[key], 'x', pos.x); that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y); that._setAttr(obj[key], 'y', pos.y);
that._fireChangeEvent(key);
break; break;
case 'points': case 'points':
that._setAttr(obj, key, go._getPoints(val)); that._setAttr(obj, key, go._getPoints(val));
that._fireChangeEvent(key);
break; break;
case 'crop': case 'crop':
var pos = go._getXY(val); var pos = go._getXY(val);
@ -582,13 +578,13 @@ Kinetic.Node.prototype = {
that._setAttr(obj[key], 'y', pos.y); that._setAttr(obj[key], 'y', pos.y);
that._setAttr(obj[key], 'width', size.width); that._setAttr(obj[key], 'width', size.width);
that._setAttr(obj[key], 'height', size.height); that._setAttr(obj[key], 'height', size.height);
that._fireChangeEvent(key);
break; break;
default: default:
that._setAttr(obj, key, c[key]); that._setAttr(obj, key, c[key]);
that._fireChangeEvent(key);
break; break;
} }
that._fireChangeEvent(key);
} }
} }
} }
@ -2424,7 +2420,7 @@ else if(!isDragging && this.touchMove) {
} }
} }
if(nodes.length === 0) { if(nodes.length === 0) {
this.names[node.attrs.name] = undefined; delete this.names[node.attrs.name];
} }
} }
} }

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

File diff suppressed because one or more lines are too long

20
src/Node.js
View File

@ -98,14 +98,15 @@ Kinetic.Node.prototype = {
if(this.eventListeners[baseEvent][i].name === name) { if(this.eventListeners[baseEvent][i].name === name) {
this.eventListeners[baseEvent].splice(i, 1); this.eventListeners[baseEvent].splice(i, 1);
if(this.eventListeners[baseEvent].length === 0) { if(this.eventListeners[baseEvent].length === 0) {
this.eventListeners[baseEvent] = undefined; delete this.eventListeners[baseEvent];
break;
} }
break; i--;
} }
} }
} }
else { else {
this.eventListeners[baseEvent] = undefined; delete this.eventListeners[baseEvent];
} }
} }
}, },
@ -180,15 +181,14 @@ Kinetic.Node.prototype = {
*/ */
case 'draggable': case 'draggable':
that.draggable(c[key]); that.draggable(c[key]);
that._fireChangeEvent(key);
break; break;
case 'listening': case 'listening':
that.listen(c[key]); that.listen(c[key]);
that._fireChangeEvent(key);
break; break;
case 'rotationDeg': case 'rotationDeg':
that._setAttr(obj, 'rotation', c[key] * Math.PI / 180); that._setAttr(obj, 'rotation', c[key] * Math.PI / 180);
that._fireChangeEvent('rotation'); // override key for change event
key = 'rotation';
break; break;
/* /*
* config objects * config objects
@ -197,7 +197,6 @@ Kinetic.Node.prototype = {
var pos = go._getXY(val); var pos = go._getXY(val);
that._setAttr(obj[key], 'x', pos.x); that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y); that._setAttr(obj[key], 'y', pos.y);
that._fireChangeEvent(key);
break; break;
/* /*
* includes: * includes:
@ -208,17 +207,14 @@ Kinetic.Node.prototype = {
var pos = go._getXY(val); var pos = go._getXY(val);
that._setAttr(obj[key], 'x', pos.x); that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y); that._setAttr(obj[key], 'y', pos.y);
that._fireChangeEvent(key);
break; break;
case 'scale': case 'scale':
var pos = go._getXY(val); var pos = go._getXY(val);
that._setAttr(obj[key], 'x', pos.x); that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y); that._setAttr(obj[key], 'y', pos.y);
that._fireChangeEvent(key);
break; break;
case 'points': case 'points':
that._setAttr(obj, key, go._getPoints(val)); that._setAttr(obj, key, go._getPoints(val));
that._fireChangeEvent(key);
break; break;
case 'crop': case 'crop':
var pos = go._getXY(val); var pos = go._getXY(val);
@ -227,13 +223,13 @@ Kinetic.Node.prototype = {
that._setAttr(obj[key], 'y', pos.y); that._setAttr(obj[key], 'y', pos.y);
that._setAttr(obj[key], 'width', size.width); that._setAttr(obj[key], 'width', size.width);
that._setAttr(obj[key], 'height', size.height); that._setAttr(obj[key], 'height', size.height);
that._fireChangeEvent(key);
break; break;
default: default:
that._setAttr(obj, key, c[key]); that._setAttr(obj, key, c[key]);
that._fireChangeEvent(key);
break; break;
} }
that._fireChangeEvent(key);
} }
} }
} }

2
src/Stage.js
View File

@ -939,7 +939,7 @@ else if(!isDragging && this.touchMove) {
} }
} }
if(nodes.length === 0) { if(nodes.length === 0) {
this.names[node.attrs.name] = undefined; delete this.names[node.attrs.name];
} }
} }
} }

21
tests/js/Test.js
View File

@ -6,7 +6,7 @@ function test(condition, message) {
throw new Error(message); throw new Error(message);
} }
numTests++; numTests++;
testCounter.innerHTML = numTests; testCounter.innerHTML = numTests;
} }
function log(message) { function log(message) {
@ -16,10 +16,7 @@ function log(message) {
* Test constructor * Test constructor
*/ */
function Test() { function Test() {
//this.testOnly = 'EVENTS - mousedown mouseup mouseover mouseout mousemove click dblclick / touchstart touchend touchmove tap dbltap';
this.testOnly = '';
this.counter = 0; this.counter = 0;
testCounter = document.createElement('div'); testCounter = document.createElement('div');
testCounter.id = 'testCounter'; testCounter.id = 'testCounter';
document.getElementsByTagName('body')[0].appendChild(testCounter); document.getElementsByTagName('body')[0].appendChild(testCounter);
@ -47,8 +44,22 @@ Test.prototype = {
run: function() { run: function() {
var tests = this.tests; var tests = this.tests;
var testOnlySpecial = false;
/*
* if a test key has a star in front of it, then
* only run special tests. This lets us easily run
* specific tests without running all of them
*/
for(var key in tests) { for(var key in tests) {
if(!this.testOnly || (this.testOnly && this.testOnly == key)) { if(key.charAt(0) === '*') {
testOnlySpecial = true;
break;
}
}
for(var key in tests) {
if(!testOnlySpecial || key.charAt(0) === '*') {
var obj = this.addTestContainer(key); var obj = this.addTestContainer(key);
this.counter++; this.counter++;
console.log(this.counter + ") " + key); console.log(this.counter + ") " + key);

62
tests/js/unitTests.js
View File

@ -2925,11 +2925,11 @@ Test.prototype.tests = {
var triggered = false; var triggered = false;
rect.on('widthChange', function() { rect.on('widthChange', function() {
triggered = true; triggered = true;
}); });
rect.setSize(210); rect.setSize(210);
test(triggered, 'width change event not triggered'); test(triggered, 'width change event not triggered');
}, },
'NODE - test setting shadow offset': function(containerId) { 'NODE - test setting shadow offset': function(containerId) {
@ -3614,6 +3614,64 @@ Test.prototype.tests = {
test(foo === 'bar', 'foo should equal bar'); test(foo === 'bar', 'foo should equal bar');
}, },
'EVENTS - add remove event': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle'
});
/*
* test regular on and off
*/
test(circle.eventListeners['click'] === undefined, 'circle should have no click listeners');
circle.on('click', function() {
});
test(circle.eventListeners['click'].length === 1, 'circle should have 1 click listener');
circle.on('click', function() {
});
test(circle.eventListeners['click'].length === 2, 'circle should have 2 click listeners');
circle.off('click');
test(circle.eventListeners['click'] === undefined, 'circle should have no click listeners');
/*
* test name spacing
*/
circle.on('click.foo', function() {
});
test(circle.eventListeners['click'].length === 1, 'circle should have 1 click listener');
circle.on('click.foo', function() {
});
test(circle.eventListeners['click'].length === 2, 'circle should have 2 click listeners');
circle.on('click.bar', function() {
});
test(circle.eventListeners['click'].length === 3, 'circle should have 3 click listeners');
circle.off('click.foo');
test(circle.eventListeners['click'].length === 1, 'circle should have 1 click listener');
circle.off('click.bar');
test(circle.eventListeners['click'] === undefined, 'circle should have no click listeners');
stage.add(layer);
layer.add(circle);
layer.draw();
},
'NODE - simulate event bubble': function(containerId) { 'NODE - simulate event bubble': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,