lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 12:34:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

25
src/Container.js
View File

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

6
src/Layer.js
View File

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

40
src/Node.js
View File

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

19
src/Shape.js
View File

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

6
src/Stage.js
View File

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

11
tests/js/unit/containerTests.js
View File

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