lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-18 18:27:58 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

remove() method now correctly removes node descendants

Browse Source
This commit is contained in:
Eric Rowell
2012-06-01 23:56:01 -07:00
parent ba796f4cc3
commit 385deb793d
4 changed files with 196 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
dist/kinetic-core.js vendored
View File

@@ -1300,7 +1300,7 @@ Kinetic.Container.prototype = {
* @param {Node} child
*/
remove: function(child) {
if(child.index !== undefined && this.children[child.index]._id == child._id) {
if(child && child.index !== undefined && this.children[child.index]._id == child._id) {
var stage = this.getStage();
if(stage !== undefined) {
stage._removeId(child);
@@ -1312,18 +1312,24 @@ Kinetic.Container.prototype = {
var node = go.tempNodes[n];
if(node._id === child._id) {
go.tempNodes.splice(n, 1);
n = go.tempNodes.length;
break;
}
}
this.children.splice(child.index, 1);
this._setChildrenIndices();
child = undefined;
}
// do extra stuff if needed
if(this._remove !== undefined) {
this._remove(child);
// remove children
if(child.children) {
for(var n = 0; n < child.children.length; n++) {
child.remove(child.children[n]);
}
}
// do extra stuff if needed
if(this._remove !== undefined) {
this._remove(child);
}
}
// chainable

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

File diff suppressed because one or more lines are too long

20
src/Container.js
View File

@@ -68,7 +68,7 @@ Kinetic.Container.prototype = {
* @param {Node} child
*/
remove: function(child) {
if(child.index !== undefined && this.children[child.index]._id == child._id) {
if(child && child.index !== undefined && this.children[child.index]._id == child._id) {
var stage = this.getStage();
if(stage !== undefined) {
stage._removeId(child);
@@ -80,18 +80,24 @@ Kinetic.Container.prototype = {
var node = go.tempNodes[n];
if(node._id === child._id) {
go.tempNodes.splice(n, 1);
n = go.tempNodes.length;
break;
}
}
this.children.splice(child.index, 1);
this._setChildrenIndices();
child = undefined;
}
// do extra stuff if needed
if(this._remove !== undefined) {
this._remove(child);
// remove children
if(child.children) {
for(var n = 0; n < child.children.length; n++) {
child.remove(child.children[n]);
}
}
// do extra stuff if needed
if(this._remove !== undefined) {
this._remove(child);
}
}
// chainable

230
tests/js/unitTests.js
View File

@@ -645,7 +645,9 @@ Test.prototype.tests = {
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var layer = new Kinetic.Layer({
name: 'myLayer'
});
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
@@ -660,10 +662,14 @@ Test.prototype.tests = {
stage.add(layer);
test(stage.children.length === 1, 'stage should have 1 children');
test(stage.get('.myLayer')[0] !== undefined, 'layer should exist');
test(stage.get('.myCircle')[0] !== undefined, 'circle should exist');
stage.remove(layer);
test(stage.children.length === 0, 'stage should have 0 children');
test(stage.children.length === 0, 'stage should have 0 children');
test(stage.get('.myLayer')[0] === undefined, 'layer should not exist');
test(stage.get('.myCircle')[0] === undefined, 'circle should not exist');
},
'STAGE - remove layer with no shapes': function(containerId) {
var stage = new Kinetic.Stage({
@@ -674,6 +680,8 @@ Test.prototype.tests = {
var layer = new Kinetic.Layer();
stage.add(layer);
stage.remove(layer);
test(stage.children.length === 0, 'stage should have 0 children');
},
'STAGE - remove shape multiple times': function(containerId) {
var stage = new Kinetic.Stage({
@@ -1293,8 +1301,8 @@ Test.prototype.tests = {
strokeWidth: 1,
});
if (key === 'US')
test(path.getDataArray()[0].command === 'M', 'first command should be a moveTo');
if(key === 'US')
test(path.getDataArray()[0].command === 'M', 'first command should be a moveTo');
path.on('mouseover', function() {
this.setFill('red');
@@ -1324,26 +1332,26 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var c = "M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z";
var c = "M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z";
var path = new Kinetic.Path({
data: c,
fill: '#ccc',
stroke: '#999',
strokeWidth: 1,
});
var path = new Kinetic.Path({
data: c,
fill: '#ccc',
stroke: '#999',
strokeWidth: 1,
});
path.on('mouseover', function() {
this.setFill('red');
layer.draw();
});
path.on('mouseover', function() {
this.setFill('red');
layer.draw();
});
path.on('mouseout', function() {
this.setFill('#ccc');
layer.draw();
});
path.on('mouseout', function() {
this.setFill('#ccc');
layer.draw();
});
layer.add(path);
layer.add(path);
stage.add(layer);
},
@@ -1359,56 +1367,56 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var c = "M200,300 Q400,50 600,300 T1000,300";
var c = "M200,300 Q400,50 600,300 T1000,300";
var path = new Kinetic.Path({
data: c,
stroke: 'red',
strokeWidth: 5,
});
var path = new Kinetic.Path({
data: c,
stroke: 'red',
strokeWidth: 5,
});
layer.add(path);
layer.add(path);
layer.add(new Kinetic.Circle({
x: 200,
y: 300,
radius: 10,
fill: 'black'
}));
layer.add(new Kinetic.Circle({
x: 200,
y: 300,
radius: 10,
fill: 'black'
}));
layer.add(new Kinetic.Circle({
x: 600,
y: 300,
radius: 10,
fill: 'black'
}));
layer.add(new Kinetic.Circle({
x: 600,
y: 300,
radius: 10,
fill: 'black'
}));
layer.add(new Kinetic.Circle({
x: 1000,
y: 300,
radius: 10,
fill: 'black'
}));
layer.add(new Kinetic.Circle({
x: 1000,
y: 300,
radius: 10,
fill: 'black'
}));
layer.add(new Kinetic.Circle({
x: 400,
y: 50,
radius: 10,
fill: '#888'
}));
layer.add(new Kinetic.Circle({
x: 400,
y: 50,
radius: 10,
fill: '#888'
}));
layer.add(new Kinetic.Circle({
x: 800,
y: 550,
radius: 10,
fill: '#888'
}));
layer.add(new Kinetic.Circle({
x: 800,
y: 550,
radius: 10,
fill: '#888'
}));
layer.add(new Kinetic.Path({
data: "M200,300 L400,50L600,300L800,550L1000,300",
stroke: "#888",
strokeWidth: 2
}));
layer.add(new Kinetic.Path({
data: "M200,300 L400,50L600,300L800,550L1000,300",
stroke: "#888",
strokeWidth: 2
}));
stage.add(layer);
@@ -1425,64 +1433,64 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var c = "M100,200 C100,100 250,100 250,200 S400,300 400,200";
var c = "M100,200 C100,100 250,100 250,200 S400,300 400,200";
var path = new Kinetic.Path({
data: c,
stroke: 'red',
strokeWidth: 5,
});
var path = new Kinetic.Path({
data: c,
stroke: 'red',
strokeWidth: 5,
});
layer.add(path);
layer.add(path);
layer.add(new Kinetic.Circle({
x: 100,
y: 200,
radius: 10,
stroke: '#888'
}));
layer.add(new Kinetic.Circle({
x: 100,
y: 200,
radius: 10,
stroke: '#888'
}));
layer.add(new Kinetic.Circle({
x: 250,
y: 200,
radius: 10,
stroke: '#888'
}));
layer.add(new Kinetic.Circle({
x: 250,
y: 200,
radius: 10,
stroke: '#888'
}));
layer.add(new Kinetic.Circle({
x: 400,
y: 200,
radius: 10,
stroke: '#888'
}));
layer.add(new Kinetic.Circle({
x: 400,
y: 200,
radius: 10,
stroke: '#888'
}));
layer.add(new Kinetic.Circle({
x: 100,
y: 100,
radius: 10,
fill: '#888'
}));
layer.add(new Kinetic.Circle({
x: 100,
y: 100,
radius: 10,
fill: '#888'
}));
layer.add(new Kinetic.Circle({
x: 250,
y: 100,
radius: 10,
fill: '#888'
}));
layer.add(new Kinetic.Circle({
x: 250,
y: 100,
radius: 10,
fill: '#888'
}));
layer.add(new Kinetic.Circle({
x: 400,
y: 300,
radius: 10,
fill: '#888'
}));
layer.add(new Kinetic.Circle({
x: 400,
y: 300,
radius: 10,
fill: '#888'
}));
layer.add(new Kinetic.Circle({
x: 250,
y: 300,
radius: 10,
stroke: 'blue'
}));
layer.add(new Kinetic.Circle({
x: 250,
y: 300,
radius: 10,
stroke: 'blue'
}));
stage.add(layer);