removeChildren now removes all descendants. returned this for all applicable methods in Node, Layer, Stage, and Shape

This commit is contained in:
Eric Rowell
2013-06-06 22:45:31 -07:00
parent 824e9fdbee
commit ffc33a7676
6 changed files with 101 additions and 6 deletions

View File

@@ -12,15 +12,32 @@
getChildren: function() { getChildren: function() {
return this.children; return this.children;
}, },
/**
* determine if node has children
* @method
* @memberof Kinetic.Container.prototype
*/
hasChildren: function() {
return this.getChildren().length > 0;
},
/** /**
* remove all children * remove all children
* @method * @method
* @memberof Kinetic.Container.prototype * @memberof Kinetic.Container.prototype
*/ */
removeChildren: function() { removeChildren: function() {
while(this.children.length > 0) { var children = this.children,
this.children[0].remove(); child;
while(children.length > 0) {
var child = children[0];
if (child.hasChildren()) {
child.removeChildren();
}
child.remove();
} }
return this;
}, },
/** /**
* add node to container * add node to container
@@ -214,6 +231,8 @@
canvas.getContext().restore(); canvas.getContext().restore();
} }
} }
return this;
}, },
drawHit: function() { drawHit: function() {
var clip = !!this.getClipFunc() && this.nodeType !== 'Stage', var clip = !!this.getClipFunc() && this.nodeType !== 'Stage',
@@ -238,6 +257,8 @@
hitCanvas.getContext().restore(); hitCanvas.getContext().restore();
} }
} }
return this;
} }
}); });

View File

@@ -52,6 +52,7 @@
} }
Kinetic.Container.prototype.drawScene.call(this, canvas); Kinetic.Container.prototype.drawScene.call(this, canvas);
return this;
}, },
drawHit: function() { drawHit: function() {
var layer = this.getLayer(); var layer = this.getLayer();
@@ -61,6 +62,7 @@
} }
Kinetic.Container.prototype.drawHit.call(this); Kinetic.Container.prototype.drawHit.call(this);
return this;
}, },
/** /**
* get layer canvas * get layer canvas
@@ -93,6 +95,7 @@
*/ */
clear: function() { clear: function() {
this.getCanvas().clear(); this.getCanvas().clear();
return this;
}, },
// extenders // extenders
setVisible: function(visible) { setVisible: function(visible) {
@@ -105,6 +108,7 @@
this.getCanvas().element.style.display = 'none'; this.getCanvas().element.style.display = 'none';
this.hitCanvas.element.style.display = 'none'; this.hitCanvas.element.style.display = 'none';
} }
return this;
}, },
setZIndex: function(index) { setZIndex: function(index) {
Kinetic.Node.prototype.setZIndex.call(this, index); Kinetic.Node.prototype.setZIndex.call(this, index);
@@ -119,6 +123,7 @@
stage.content.appendChild(this.getCanvas().element); stage.content.appendChild(this.getCanvas().element);
} }
} }
return this;
}, },
moveToTop: function() { moveToTop: function() {
Kinetic.Node.prototype.moveToTop.call(this); Kinetic.Node.prototype.moveToTop.call(this);
@@ -173,6 +178,7 @@
if(stage && canvas && Kinetic.Util._isInDocument(element)) { if(stage && canvas && Kinetic.Util._isInDocument(element)) {
stage.content.removeChild(element); stage.content.removeChild(element);
} }
return this;
} }
}); });
Kinetic.Util.extend(Kinetic.Layer, Kinetic.Container); Kinetic.Util.extend(Kinetic.Layer, Kinetic.Container);

View File

@@ -169,6 +169,7 @@
parent._setChildrenIndices(); parent._setChildrenIndices();
} }
delete this.parent; delete this.parent;
return this;
}, },
/** /**
* remove and destroy self * remove and destroy self
@@ -195,6 +196,7 @@
// TODO: stop transitions // TODO: stop transitions
this.remove(); this.remove();
return this;
}, },
/** /**
* get attr * get attr
@@ -237,6 +239,7 @@
else { else {
this.attrs[attr] = args[0]; this.attrs[attr] = args[0];
} }
return this;
}, },
/** /**
* get attrs object literal * get attrs object literal
@@ -250,6 +253,7 @@
if(this.attrs === undefined) { if(this.attrs === undefined) {
this.attrs = {}; this.attrs = {};
} }
return this;
}, },
/** /**
@@ -284,6 +288,7 @@
} }
} }
} }
return this;
}, },
/** /**
* determine if node is visible or not. Node is visible only * determine if node is visible or not. Node is visible only
@@ -334,6 +339,7 @@
*/ */
show: function() { show: function() {
this.setVisible(true); this.setVisible(true);
return this;
}, },
/** /**
* hide node. Hidden nodes are no longer detectable * hide node. Hidden nodes are no longer detectable
@@ -342,6 +348,7 @@
*/ */
hide: function() { hide: function() {
this.setVisible(false); this.setVisible(false);
return this;
}, },
/** /**
* get zIndex relative to the node's siblings who share the same parent * get zIndex relative to the node's siblings who share the same parent
@@ -432,6 +439,7 @@
var pos = Kinetic.Util._getXY([].slice.call(arguments)); var pos = Kinetic.Util._getXY([].slice.call(arguments));
this.setX(pos.x); this.setX(pos.x);
this.setY(pos.y); this.setY(pos.y);
return this;
}, },
/** /**
* get node position relative to parent * get node position relative to parent
@@ -486,6 +494,7 @@
this.setPosition(pos.x, pos.y); this.setPosition(pos.x, pos.y);
this._setTransform(trans); this._setTransform(trans);
return this;
}, },
/** /**
* move node by an amount relative to its current position * move node by an amount relative to its current position
@@ -516,6 +525,7 @@
} }
this.setPosition(x, y); this.setPosition(x, y);
return this;
}, },
_eachAncestorReverse: function(func, includeSelf) { _eachAncestorReverse: function(func, includeSelf) {
var family = [], var family = [],
@@ -544,6 +554,7 @@
*/ */
rotate: function(theta) { rotate: function(theta) {
this.setRotation(this.getRotation() + theta); this.setRotation(this.getRotation() + theta);
return this;
}, },
/** /**
* rotate node by an amount in degrees relative to its current rotation * rotate node by an amount in degrees relative to its current rotation
@@ -553,6 +564,7 @@
*/ */
rotateDeg: function(deg) { rotateDeg: function(deg) {
this.setRotation(this.getRotation() + Kinetic.Util._degToRad(deg)); this.setRotation(this.getRotation() + Kinetic.Util._degToRad(deg));
return this;
}, },
/** /**
* move node to the top of its siblings * move node to the top of its siblings
@@ -580,6 +592,7 @@
this.parent._setChildrenIndices(); this.parent._setChildrenIndices();
return true; return true;
} }
return false;
}, },
/** /**
* move node down * move node down
@@ -594,6 +607,7 @@
this.parent._setChildrenIndices(); this.parent._setChildrenIndices();
return true; return true;
} }
return false;
}, },
/** /**
* move node to the bottom of its siblings * move node to the bottom of its siblings
@@ -608,6 +622,7 @@
this.parent._setChildrenIndices(); this.parent._setChildrenIndices();
return true; return true;
} }
return false;
}, },
/** /**
* set zIndex relative to siblings * set zIndex relative to siblings
@@ -620,6 +635,7 @@
this.parent.children.splice(index, 1); this.parent.children.splice(index, 1);
this.parent.children.splice(zIndex, 0, this); this.parent.children.splice(zIndex, 0, this);
this.parent._setChildrenIndices(); this.parent._setChildrenIndices();
return this;
}, },
/** /**
* get absolute opacity * get absolute opacity
@@ -645,6 +661,7 @@
moveTo: function(newContainer) { moveTo: function(newContainer) {
Kinetic.Node.prototype.remove.call(this); Kinetic.Node.prototype.remove.call(this);
newContainer.add(this); newContainer.add(this);
return this;
}, },
/** /**
* convert Node into an object for serialization. Returns an object. * convert Node into an object for serialization. Returns an object.
@@ -739,6 +756,7 @@
else { else {
this._fire(eventType, evt || {}); this._fire(eventType, evt || {});
} }
return this;
}, },
/** /**
* get absolute transform of the node which takes into * get absolute transform of the node which takes into
@@ -934,6 +952,7 @@
var size = Kinetic.Util._getSize(Array.prototype.slice.call(arguments)); var size = Kinetic.Util._getSize(Array.prototype.slice.call(arguments));
this.setWidth(size.width); this.setWidth(size.width);
this.setHeight(size.height); this.setHeight(size.height);
return this;
}, },
/** /**
* get size * get size
@@ -1057,6 +1076,7 @@
go._removeId(oldId); go._removeId(oldId);
go._addId(this, id); go._addId(this, id);
this._setAttr(ID, id); this._setAttr(ID, id);
return this;
}, },
/** /**
* set name * set name
@@ -1072,6 +1092,7 @@
go._removeName(oldName, this._id); go._removeName(oldName, this._id);
go._addName(this, name); go._addName(this, name);
this._setAttr(NAME, name); this._setAttr(NAME, name);
return this;
}, },
_setAttr: function(key, val) { _setAttr: function(key, val) {
var oldVal; var oldVal;
@@ -1137,6 +1158,7 @@
this.drawScene(); this.drawScene();
this.drawHit(); this.drawHit();
this._fire(DRAW, evt); this._fire(DRAW, evt);
return this;
}, },
shouldDrawHit: function() { shouldDrawHit: function() {
return this.isVisible() && this.isListening() && !Kinetic.Global.isDragging(); return this.isVisible() && this.isListening() && !Kinetic.Global.isDragging();
@@ -1696,5 +1718,21 @@
*/ */
Kinetic.Node.prototype.isVisible = Kinetic.Node.prototype.getVisible; Kinetic.Node.prototype.isVisible = Kinetic.Node.prototype.getVisible;
Kinetic.Collection.mapMethods(['on', 'off', 'draw']); Kinetic.Collection.mapMethods([
'on',
'off',
'remove',
'destroy',
'show',
'hide',
'move',
'rotate',
'moveToTop',
'moveUp',
'moveDown',
'moveToBottom',
'moveTo',
'fire',
'draw'
]);
})(); })();

View File

@@ -38,6 +38,12 @@
// call super constructor // call super constructor
Kinetic.Node.call(this, config); Kinetic.Node.call(this, config);
}, },
hasChildren: function() {
return false;
},
getChildren: function() {
return [];
},
/** /**
* get canvas context tied to the layer * get canvas context tied to the layer
* @method * @method
@@ -101,6 +107,7 @@
*/ */
enableFill: function() { enableFill: function() {
this._setAttr('fillEnabled', true); this._setAttr('fillEnabled', true);
return this;
}, },
/** /**
* disable fill * disable fill
@@ -109,6 +116,7 @@
*/ */
disableFill: function() { disableFill: function() {
this._setAttr('fillEnabled', false); this._setAttr('fillEnabled', false);
return this;
}, },
/** /**
* enable stroke * enable stroke
@@ -117,6 +125,7 @@
*/ */
enableStroke: function() { enableStroke: function() {
this._setAttr('strokeEnabled', true); this._setAttr('strokeEnabled', true);
return this;
}, },
/** /**
* disable stroke * disable stroke
@@ -125,6 +134,7 @@
*/ */
disableStroke: function() { disableStroke: function() {
this._setAttr('strokeEnabled', false); this._setAttr('strokeEnabled', false);
return this;
}, },
/** /**
* enable stroke scale * enable stroke scale
@@ -133,6 +143,7 @@
*/ */
enableStrokeScale: function() { enableStrokeScale: function() {
this._setAttr('strokeScaleEnabled', true); this._setAttr('strokeScaleEnabled', true);
return this;
}, },
/** /**
* disable stroke scale * disable stroke scale
@@ -141,6 +152,7 @@
*/ */
disableStrokeScale: function() { disableStrokeScale: function() {
this._setAttr('strokeScaleEnabled', false); this._setAttr('strokeScaleEnabled', false);
return this;
}, },
/** /**
* enable shadow * enable shadow
@@ -149,6 +161,7 @@
*/ */
enableShadow: function() { enableShadow: function() {
this._setAttr('shadowEnabled', true); this._setAttr('shadowEnabled', true);
return this;
}, },
/** /**
* disable shadow * disable shadow
@@ -157,6 +170,7 @@
*/ */
disableShadow: function() { disableShadow: function() {
this._setAttr('shadowEnabled', false); this._setAttr('shadowEnabled', false);
return this;
}, },
/** /**
* enable dash array * enable dash array
@@ -165,6 +179,7 @@
*/ */
enableDashArray: function() { enableDashArray: function() {
this._setAttr('dashArrayEnabled', true); this._setAttr('dashArrayEnabled', true);
return this;
}, },
/** /**
* disable dash array * disable dash array
@@ -173,10 +188,12 @@
*/ */
disableDashArray: function() { disableDashArray: function() {
this._setAttr('dashArrayEnabled', false); this._setAttr('dashArrayEnabled', false);
return this;
}, },
destroy: function() { destroy: function() {
Kinetic.Node.prototype.destroy.call(this); Kinetic.Node.prototype.destroy.call(this);
delete Kinetic.Global.shapes[this.colorKey]; delete Kinetic.Global.shapes[this.colorKey];
return this;
}, },
drawScene: function(canvas) { drawScene: function(canvas) {
canvas = canvas || this.getLayer().getCanvas(); canvas = canvas || this.getLayer().getCanvas();
@@ -192,6 +209,7 @@
drawFunc.call(this, canvas); drawFunc.call(this, canvas);
context.restore(); context.restore();
} }
return this;
}, },
drawHit: function() { drawHit: function() {
var attrs = this.getAttrs(), var attrs = this.getAttrs(),
@@ -207,6 +225,7 @@
drawFunc.call(this, canvas); drawFunc.call(this, canvas);
context.restore(); context.restore();
} }
return this;
}, },
_setDrawFuncs: function() { _setDrawFuncs: function() {
if(!this.attrs.drawFunc && this.drawFunc) { if(!this.attrs.drawFunc && this.drawFunc) {

View File

@@ -59,6 +59,7 @@
container = document.getElementById(container); container = document.getElementById(container);
} }
this._setAttr(CONTAINER, container); this._setAttr(CONTAINER, container);
return this;
}, },
draw: function() { draw: function() {
// clear children layers // clear children layers
@@ -75,6 +76,7 @@
} }
Kinetic.Node.prototype.draw.call(this); Kinetic.Node.prototype.draw.call(this);
return this;
}, },
/** /**
* draw layer scene graphs * draw layer scene graphs
@@ -99,6 +101,7 @@
setHeight: function(height) { setHeight: function(height) {
Kinetic.Node.prototype.setHeight.call(this, height); Kinetic.Node.prototype.setHeight.call(this, height);
this._resizeDOM(); this._resizeDOM();
return this;
}, },
/** /**
* set width * set width
@@ -109,6 +112,7 @@
setWidth: function(width) { setWidth: function(width) {
Kinetic.Node.prototype.setWidth.call(this, width); Kinetic.Node.prototype.setWidth.call(this, width);
this._resizeDOM(); this._resizeDOM();
return this;
}, },
/** /**
* clear all layers * clear all layers
@@ -123,6 +127,7 @@
for(n = 0; n < len; n++) { for(n = 0; n < len; n++) {
layers[n].clear(); layers[n].clear();
} }
return this;
}, },
/** /**
* remove stage * remove stage
@@ -136,6 +141,7 @@
if(content && Kinetic.Util._isInDocument(content)) { if(content && Kinetic.Util._isInDocument(content)) {
this.getContainer().removeChild(content); this.getContainer().removeChild(content);
} }
return this;
}, },
/** /**
* get mouse position for desktop apps * get mouse position for desktop apps

View File

@@ -317,6 +317,7 @@ Test.Modules.CONTAINER = {
height: 200 height: 200
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle1 = new Kinetic.Circle({ var circle1 = new Kinetic.Circle({
x: 100, x: 100,
y: stage.getHeight() / 2, y: stage.getHeight() / 2,
@@ -335,16 +336,19 @@ Test.Modules.CONTAINER = {
strokeWidth: 4 strokeWidth: 4
}); });
layer.add(circle1); group.add(circle1);
layer.add(circle2); group.add(circle2);
layer.add(group);
stage.add(layer); stage.add(layer);
test(layer.children.length === 2, 'layer should have 2 children'); test(layer.children.length === 1, 'layer should have 1 children');
test(group.children.length === 2, 'group should have 2 children');
layer.removeChildren(); layer.removeChildren();
layer.draw(); layer.draw();
test(layer.children.length === 0, 'layer should have 0 children'); test(layer.children.length === 0, 'layer should have 0 children');
test(group.children.length === 0, 'group should have 0 children');
}, },
'add group': function(containerId) { 'add group': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@@ -1098,6 +1102,7 @@ Test.Modules.CONTAINER = {
layer.add(bluecircle); layer.add(bluecircle);
stage.add(layer); stage.add(layer);
test(layer.getZIndex() === 0, 'layer should have zindex of 0'); test(layer.getZIndex() === 0, 'layer should have zindex of 0');
layer.moveDown(); layer.moveDown();