fixed stage.hide() bug, created new isVisible() method, and moved visible check to container

This commit is contained in:
Eric Rowell 2012-04-14 12:04:45 -07:00
parent c17029d38e
commit 3a520376e5
7 changed files with 125 additions and 74 deletions

11
dist/kinetic-core.js vendored
View File

@ -327,6 +327,12 @@ Kinetic.Node.prototype = {
}
}
},
/**
* determine if shape is visible or not
*/
isVisible: function() {
return this.attrs.visible;
},
/**
* show node
*/
@ -1032,10 +1038,11 @@ Kinetic.Container.prototype = {
* draw children
*/
_drawChildren: function() {
var stage = this.getStage();
var children = this.children;
for(var n = 0; n < children.length; n++) {
var child = children[n];
if(child.nodeType === 'Shape') {
if(child.nodeType === 'Shape' && child.isVisible() && stage.isVisible()) {
child._draw(child.getLayer());
}
else {
@ -2281,7 +2288,7 @@ Kinetic.Shape.prototype = {
* @param {Layer} layer Layer that the shape will be drawn on
*/
_draw: function(layer) {
if(this.attrs.visible && this.drawFunc !== undefined) {
if(layer !== undefined && this.drawFunc !== undefined) {
var stage = layer.getStage();
var context = layer.getContext();
var family = [];

File diff suppressed because one or more lines are too long

View File

@ -109,10 +109,11 @@ Kinetic.Container.prototype = {
* draw children
*/
_drawChildren: function() {
var stage = this.getStage();
var children = this.children;
for(var n = 0; n < children.length; n++) {
var child = children[n];
if(child.nodeType === 'Shape') {
if(child.nodeType === 'Shape' && child.isVisible() && stage.isVisible()) {
child._draw(child.getLayer());
}
else {

View File

@ -174,6 +174,12 @@ Kinetic.Node.prototype = {
}
}
},
/**
* determine if shape is visible or not
*/
isVisible: function() {
return this.attrs.visible;
},
/**
* show node
*/

View File

@ -175,7 +175,7 @@ Kinetic.Shape.prototype = {
* @param {Layer} layer Layer that the shape will be drawn on
*/
_draw: function(layer) {
if(this.attrs.visible && this.drawFunc !== undefined) {
if(layer !== undefined && this.drawFunc !== undefined) {
var stage = layer.getStage();
var context = layer.getContext();
var family = [];

View File

@ -1674,6 +1674,105 @@ Test.prototype.tests = {
layer.add(group);
stage.add(layer);
},
'STAGE - hide stage': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var rect = new Kinetic.Rect({
x: 200,
y: 100,
width: 100,
height: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true,
rotationDeg: 60,
scale: {
x: 2,
y: 1
}
});
group.add(rect);
layer.add(group);
stage.add(layer);
stage.hide();
stage.draw();
},
'STAGE - hide layer': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var rect = new Kinetic.Rect({
x: 200,
y: 100,
width: 100,
height: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true,
rotationDeg: 60,
scale: {
x: 2,
y: 1
}
});
group.add(rect);
layer.add(group);
stage.add(layer);
layer.hide();
stage.draw();
},
'STAGE - hide group': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var rect = new Kinetic.Rect({
x: 200,
y: 100,
width: 100,
height: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true,
rotationDeg: 60,
scale: {
x: 2,
y: 1
}
});
group.add(rect);
layer.add(group);
stage.add(layer);
group.hide();
stage.draw();
},
'STAGE - save image as png (click on circle to open new window)': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,

View File

@ -581,28 +581,6 @@ Test.prototype.tests = {
test(layer.children.length === 0, 'layer should have 0 children');
},
'LAYERS - hide layer': 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
});
layer.add(circle);
stage.add(layer);
layer.hide();
layer.draw();
},
////////////////////////////////////////////////////////////////////////
// GROUPS tests
////////////////////////////////////////////////////////////////////////
@ -629,30 +607,6 @@ Test.prototype.tests = {
layer.add(group);
stage.add(layer);
},
'GROUPS - hide group': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
group.add(circle);
layer.add(group);
stage.add(layer);
group.hide();
layer.draw();
},
'GROUPS - create two groups, move first group': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
@ -1649,28 +1603,6 @@ Test.prototype.tests = {
layer.draw();
},
'SHAPES - hide circle': 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
});
layer.add(circle);
stage.add(layer);
circle.hide();
layer.draw();
},
'SHAPES - hide show circle': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
@ -1690,11 +1622,17 @@ Test.prototype.tests = {
layer.add(circle);
stage.add(layer);
test(circle.isVisible() === true, 'circle should be visible');
circle.hide();
layer.draw();
test(circle.isVisible() === false, 'circle should be hidden');
circle.show();
layer.draw();
test(circle.isVisible() === true, 'circle should be visible');
},
'SHAPES - set shape alpha to 0.5': function(containerId) {
var stage = new Kinetic.Stage({