lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 00:14:29 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

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

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

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

File diff suppressed because one or more lines are too long

3
src/Container.js
View File

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

6
src/Node.js
View File

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

2
src/Shape.js
View File

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

99
tests/js/functionalTests.js
View File

@ -1674,6 +1674,105 @@ Test.prototype.tests = {
layer.add(group); layer.add(group);
stage.add(layer); 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) { 'STAGE - save image as png (click on circle to open new window)': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,

74
tests/js/unitTests.js
View File

@ -581,28 +581,6 @@ Test.prototype.tests = {
test(layer.children.length === 0, 'layer should have 0 children'); 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 // GROUPS tests
//////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////
@ -629,30 +607,6 @@ Test.prototype.tests = {
layer.add(group); layer.add(group);
stage.add(layer); 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) { 'GROUPS - create two groups, move first group': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
@ -1649,28 +1603,6 @@ Test.prototype.tests = {
layer.draw(); 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) { 'SHAPES - hide show circle': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
@ -1690,11 +1622,17 @@ Test.prototype.tests = {
layer.add(circle); layer.add(circle);
stage.add(layer); stage.add(layer);
test(circle.isVisible() === true, 'circle should be visible');
circle.hide(); circle.hide();
layer.draw(); layer.draw();
test(circle.isVisible() === false, 'circle should be hidden');
circle.show(); circle.show();
layer.draw(); layer.draw();
test(circle.isVisible() === true, 'circle should be visible');
}, },
'SHAPES - set shape alpha to 0.5': function(containerId) { 'SHAPES - set shape alpha to 0.5': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({