lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-19 02:37:59 +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 * @param {Node} child
*/ */
remove: function(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(); var stage = this.getStage();
if(stage !== undefined) { if(stage !== undefined) {
stage._removeId(child); stage._removeId(child);
@@ -1312,18 +1312,24 @@ Kinetic.Container.prototype = {
var node = go.tempNodes[n]; var node = go.tempNodes[n];
if(node._id === child._id) { if(node._id === child._id) {
go.tempNodes.splice(n, 1); go.tempNodes.splice(n, 1);
n = go.tempNodes.length; break;
} }
} }
this.children.splice(child.index, 1); this.children.splice(child.index, 1);
this._setChildrenIndices(); this._setChildrenIndices();
child = undefined;
}
// do extra stuff if needed // remove children
if(this._remove !== undefined) { if(child.children) {
this._remove(child); 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 // 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 * @param {Node} child
*/ */
remove: function(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(); var stage = this.getStage();
if(stage !== undefined) { if(stage !== undefined) {
stage._removeId(child); stage._removeId(child);
@@ -80,18 +80,24 @@ Kinetic.Container.prototype = {
var node = go.tempNodes[n]; var node = go.tempNodes[n];
if(node._id === child._id) { if(node._id === child._id) {
go.tempNodes.splice(n, 1); go.tempNodes.splice(n, 1);
n = go.tempNodes.length; break;
} }
} }
this.children.splice(child.index, 1); this.children.splice(child.index, 1);
this._setChildrenIndices(); this._setChildrenIndices();
child = undefined;
}
// do extra stuff if needed // remove children
if(this._remove !== undefined) { if(child.children) {
this._remove(child); 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 // chainable

230
tests/js/unitTests.js
View File

@@ -645,7 +645,9 @@ Test.prototype.tests = {
width: 578, width: 578,
height: 200 height: 200
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer({
name: 'myLayer'
});
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.getWidth() / 2, x: stage.getWidth() / 2,
y: stage.getHeight() / 2, y: stage.getHeight() / 2,
@@ -660,10 +662,14 @@ Test.prototype.tests = {
stage.add(layer); stage.add(layer);
test(stage.children.length === 1, 'stage should have 1 children'); 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); 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) { 'STAGE - remove layer with no shapes': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@@ -674,6 +680,8 @@ Test.prototype.tests = {
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
stage.add(layer); stage.add(layer);
stage.remove(layer); stage.remove(layer);
test(stage.children.length === 0, 'stage should have 0 children');
}, },
'STAGE - remove shape multiple times': function(containerId) { 'STAGE - remove shape multiple times': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@@ -1293,8 +1301,8 @@ Test.prototype.tests = {
strokeWidth: 1, strokeWidth: 1,
}); });
if (key === 'US') if(key === 'US')
test(path.getDataArray()[0].command === 'M', 'first command should be a moveTo'); test(path.getDataArray()[0].command === 'M', 'first command should be a moveTo');
path.on('mouseover', function() { path.on('mouseover', function() {
this.setFill('red'); this.setFill('red');
@@ -1324,26 +1332,26 @@ Test.prototype.tests = {
}); });
var layer = new Kinetic.Layer(); 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({ var path = new Kinetic.Path({
data: c, data: c,
fill: '#ccc', fill: '#ccc',
stroke: '#999', stroke: '#999',
strokeWidth: 1, strokeWidth: 1,
}); });
path.on('mouseover', function() { path.on('mouseover', function() {
this.setFill('red'); this.setFill('red');
layer.draw(); layer.draw();
}); });
path.on('mouseout', function() { path.on('mouseout', function() {
this.setFill('#ccc'); this.setFill('#ccc');
layer.draw(); layer.draw();
}); });
layer.add(path); layer.add(path);
stage.add(layer); stage.add(layer);
}, },
@@ -1359,56 +1367,56 @@ Test.prototype.tests = {
}); });
var layer = new Kinetic.Layer(); 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({ var path = new Kinetic.Path({
data: c, data: c,
stroke: 'red', stroke: 'red',
strokeWidth: 5, strokeWidth: 5,
}); });
layer.add(path); layer.add(path);
layer.add(new Kinetic.Circle({ layer.add(new Kinetic.Circle({
x: 200, x: 200,
y: 300, y: 300,
radius: 10, radius: 10,
fill: 'black' fill: 'black'
})); }));
layer.add(new Kinetic.Circle({ layer.add(new Kinetic.Circle({
x: 600, x: 600,
y: 300, y: 300,
radius: 10, radius: 10,
fill: 'black' fill: 'black'
})); }));
layer.add(new Kinetic.Circle({ layer.add(new Kinetic.Circle({
x: 1000, x: 1000,
y: 300, y: 300,
radius: 10, radius: 10,
fill: 'black' fill: 'black'
})); }));
layer.add(new Kinetic.Circle({ layer.add(new Kinetic.Circle({
x: 400, x: 400,
y: 50, y: 50,
radius: 10, radius: 10,
fill: '#888' fill: '#888'
})); }));
layer.add(new Kinetic.Circle({ layer.add(new Kinetic.Circle({
x: 800, x: 800,
y: 550, y: 550,
radius: 10, radius: 10,
fill: '#888' fill: '#888'
})); }));
layer.add(new Kinetic.Path({ layer.add(new Kinetic.Path({
data: "M200,300 L400,50L600,300L800,550L1000,300", data: "M200,300 L400,50L600,300L800,550L1000,300",
stroke: "#888", stroke: "#888",
strokeWidth: 2 strokeWidth: 2
})); }));
stage.add(layer); stage.add(layer);
@@ -1425,64 +1433,64 @@ Test.prototype.tests = {
}); });
var layer = new Kinetic.Layer(); 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({ var path = new Kinetic.Path({
data: c, data: c,
stroke: 'red', stroke: 'red',
strokeWidth: 5, strokeWidth: 5,
}); });
layer.add(path); layer.add(path);
layer.add(new Kinetic.Circle({ layer.add(new Kinetic.Circle({
x: 100, x: 100,
y: 200, y: 200,
radius: 10, radius: 10,
stroke: '#888' stroke: '#888'
})); }));
layer.add(new Kinetic.Circle({ layer.add(new Kinetic.Circle({
x: 250, x: 250,
y: 200, y: 200,
radius: 10, radius: 10,
stroke: '#888' stroke: '#888'
})); }));
layer.add(new Kinetic.Circle({ layer.add(new Kinetic.Circle({
x: 400, x: 400,
y: 200, y: 200,
radius: 10, radius: 10,
stroke: '#888' stroke: '#888'
})); }));
layer.add(new Kinetic.Circle({ layer.add(new Kinetic.Circle({
x: 100, x: 100,
y: 100, y: 100,
radius: 10, radius: 10,
fill: '#888' fill: '#888'
})); }));
layer.add(new Kinetic.Circle({ layer.add(new Kinetic.Circle({
x: 250, x: 250,
y: 100, y: 100,
radius: 10, radius: 10,
fill: '#888' fill: '#888'
})); }));
layer.add(new Kinetic.Circle({ layer.add(new Kinetic.Circle({
x: 400, x: 400,
y: 300, y: 300,
radius: 10, radius: 10,
fill: '#888' fill: '#888'
})); }));
layer.add(new Kinetic.Circle({ layer.add(new Kinetic.Circle({
x: 250, x: 250,
y: 300, y: 300,
radius: 10, radius: 10,
stroke: 'blue' stroke: 'blue'
})); }));
stage.add(layer); stage.add(layer);