mirror of
https://github.com/konvajs/konva.git
synced 2025-06-28 15:23:44 +08:00
refactored attr event change logic a bit. added delete operator in a couple places to fix memory leaks. added better event unit tests.
This commit is contained in:
parent
12b61b3621
commit
e64024d3bd
22
dist/kinetic-core.js
vendored
22
dist/kinetic-core.js
vendored
@ -453,14 +453,15 @@ Kinetic.Node.prototype = {
|
||||
if(this.eventListeners[baseEvent][i].name === name) {
|
||||
this.eventListeners[baseEvent].splice(i, 1);
|
||||
if(this.eventListeners[baseEvent].length === 0) {
|
||||
this.eventListeners[baseEvent] = undefined;
|
||||
delete this.eventListeners[baseEvent];
|
||||
break;
|
||||
}
|
||||
break;
|
||||
i--;
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.eventListeners[baseEvent] = undefined;
|
||||
delete this.eventListeners[baseEvent];
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -535,15 +536,14 @@ Kinetic.Node.prototype = {
|
||||
*/
|
||||
case 'draggable':
|
||||
that.draggable(c[key]);
|
||||
that._fireChangeEvent(key);
|
||||
break;
|
||||
case 'listening':
|
||||
that.listen(c[key]);
|
||||
that._fireChangeEvent(key);
|
||||
break;
|
||||
case 'rotationDeg':
|
||||
that._setAttr(obj, 'rotation', c[key] * Math.PI / 180);
|
||||
that._fireChangeEvent('rotation');
|
||||
// override key for change event
|
||||
key = 'rotation';
|
||||
break;
|
||||
/*
|
||||
* config objects
|
||||
@ -552,7 +552,6 @@ Kinetic.Node.prototype = {
|
||||
var pos = go._getXY(val);
|
||||
that._setAttr(obj[key], 'x', pos.x);
|
||||
that._setAttr(obj[key], 'y', pos.y);
|
||||
that._fireChangeEvent(key);
|
||||
break;
|
||||
/*
|
||||
* includes:
|
||||
@ -563,17 +562,14 @@ Kinetic.Node.prototype = {
|
||||
var pos = go._getXY(val);
|
||||
that._setAttr(obj[key], 'x', pos.x);
|
||||
that._setAttr(obj[key], 'y', pos.y);
|
||||
that._fireChangeEvent(key);
|
||||
break;
|
||||
case 'scale':
|
||||
var pos = go._getXY(val);
|
||||
that._setAttr(obj[key], 'x', pos.x);
|
||||
that._setAttr(obj[key], 'y', pos.y);
|
||||
that._fireChangeEvent(key);
|
||||
break;
|
||||
case 'points':
|
||||
that._setAttr(obj, key, go._getPoints(val));
|
||||
that._fireChangeEvent(key);
|
||||
break;
|
||||
case 'crop':
|
||||
var pos = go._getXY(val);
|
||||
@ -582,13 +578,13 @@ Kinetic.Node.prototype = {
|
||||
that._setAttr(obj[key], 'y', pos.y);
|
||||
that._setAttr(obj[key], 'width', size.width);
|
||||
that._setAttr(obj[key], 'height', size.height);
|
||||
that._fireChangeEvent(key);
|
||||
break;
|
||||
default:
|
||||
that._setAttr(obj, key, c[key]);
|
||||
that._fireChangeEvent(key);
|
||||
break;
|
||||
}
|
||||
|
||||
that._fireChangeEvent(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2424,7 +2420,7 @@ else if(!isDragging && this.touchMove) {
|
||||
}
|
||||
}
|
||||
if(nodes.length === 0) {
|
||||
this.names[node.attrs.name] = undefined;
|
||||
delete this.names[node.attrs.name];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
4
dist/kinetic-core.min.js
vendored
4
dist/kinetic-core.min.js
vendored
File diff suppressed because one or more lines are too long
20
src/Node.js
20
src/Node.js
@ -98,14 +98,15 @@ Kinetic.Node.prototype = {
|
||||
if(this.eventListeners[baseEvent][i].name === name) {
|
||||
this.eventListeners[baseEvent].splice(i, 1);
|
||||
if(this.eventListeners[baseEvent].length === 0) {
|
||||
this.eventListeners[baseEvent] = undefined;
|
||||
delete this.eventListeners[baseEvent];
|
||||
break;
|
||||
}
|
||||
break;
|
||||
i--;
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.eventListeners[baseEvent] = undefined;
|
||||
delete this.eventListeners[baseEvent];
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -180,15 +181,14 @@ Kinetic.Node.prototype = {
|
||||
*/
|
||||
case 'draggable':
|
||||
that.draggable(c[key]);
|
||||
that._fireChangeEvent(key);
|
||||
break;
|
||||
case 'listening':
|
||||
that.listen(c[key]);
|
||||
that._fireChangeEvent(key);
|
||||
break;
|
||||
case 'rotationDeg':
|
||||
that._setAttr(obj, 'rotation', c[key] * Math.PI / 180);
|
||||
that._fireChangeEvent('rotation');
|
||||
// override key for change event
|
||||
key = 'rotation';
|
||||
break;
|
||||
/*
|
||||
* config objects
|
||||
@ -197,7 +197,6 @@ Kinetic.Node.prototype = {
|
||||
var pos = go._getXY(val);
|
||||
that._setAttr(obj[key], 'x', pos.x);
|
||||
that._setAttr(obj[key], 'y', pos.y);
|
||||
that._fireChangeEvent(key);
|
||||
break;
|
||||
/*
|
||||
* includes:
|
||||
@ -208,17 +207,14 @@ Kinetic.Node.prototype = {
|
||||
var pos = go._getXY(val);
|
||||
that._setAttr(obj[key], 'x', pos.x);
|
||||
that._setAttr(obj[key], 'y', pos.y);
|
||||
that._fireChangeEvent(key);
|
||||
break;
|
||||
case 'scale':
|
||||
var pos = go._getXY(val);
|
||||
that._setAttr(obj[key], 'x', pos.x);
|
||||
that._setAttr(obj[key], 'y', pos.y);
|
||||
that._fireChangeEvent(key);
|
||||
break;
|
||||
case 'points':
|
||||
that._setAttr(obj, key, go._getPoints(val));
|
||||
that._fireChangeEvent(key);
|
||||
break;
|
||||
case 'crop':
|
||||
var pos = go._getXY(val);
|
||||
@ -227,13 +223,13 @@ Kinetic.Node.prototype = {
|
||||
that._setAttr(obj[key], 'y', pos.y);
|
||||
that._setAttr(obj[key], 'width', size.width);
|
||||
that._setAttr(obj[key], 'height', size.height);
|
||||
that._fireChangeEvent(key);
|
||||
break;
|
||||
default:
|
||||
that._setAttr(obj, key, c[key]);
|
||||
that._fireChangeEvent(key);
|
||||
break;
|
||||
}
|
||||
|
||||
that._fireChangeEvent(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -939,7 +939,7 @@ else if(!isDragging && this.touchMove) {
|
||||
}
|
||||
}
|
||||
if(nodes.length === 0) {
|
||||
this.names[node.attrs.name] = undefined;
|
||||
delete this.names[node.attrs.name];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -6,7 +6,7 @@ function test(condition, message) {
|
||||
throw new Error(message);
|
||||
}
|
||||
numTests++;
|
||||
|
||||
|
||||
testCounter.innerHTML = numTests;
|
||||
}
|
||||
function log(message) {
|
||||
@ -16,10 +16,7 @@ function log(message) {
|
||||
* Test constructor
|
||||
*/
|
||||
function Test() {
|
||||
//this.testOnly = 'EVENTS - mousedown mouseup mouseover mouseout mousemove click dblclick / touchstart touchend touchmove tap dbltap';
|
||||
this.testOnly = '';
|
||||
this.counter = 0;
|
||||
|
||||
testCounter = document.createElement('div');
|
||||
testCounter.id = 'testCounter';
|
||||
document.getElementsByTagName('body')[0].appendChild(testCounter);
|
||||
@ -47,8 +44,22 @@ Test.prototype = {
|
||||
run: function() {
|
||||
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) {
|
||||
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);
|
||||
this.counter++;
|
||||
console.log(this.counter + ") " + key);
|
||||
|
@ -2925,11 +2925,11 @@ Test.prototype.tests = {
|
||||
var triggered = false;
|
||||
|
||||
rect.on('widthChange', function() {
|
||||
triggered = true;
|
||||
triggered = true;
|
||||
});
|
||||
|
||||
rect.setSize(210);
|
||||
|
||||
|
||||
test(triggered, 'width change event not triggered');
|
||||
},
|
||||
'NODE - test setting shadow offset': function(containerId) {
|
||||
@ -3614,6 +3614,64 @@ Test.prototype.tests = {
|
||||
|
||||
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) {
|
||||
var stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
|
Loading…
Reference in New Issue
Block a user