Skip to content

Commit

Permalink
refactored draw, _draw, and _drawChildren methods in such a way that …
Browse files Browse the repository at this point in the history 
…isVisible and getListening logic resides in one place, therefore improving code quality
  • Loading branch information
@ericdrowell
ericdrowell committed Aug 20, 2012
1 parent e99312e commit 9093d9a
Show file tree
Hide file tree
Showing 11 changed files with 101 additions and 152 deletions.
115 changes: 43 additions & 72 deletions dist/kinetic-core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1278,7 +1278,7 @@ Kinetic.Node = Kinetic.Class.extend({
this.eventListeners = {};
this.transAnim = new Kinetic.Animation();
this.setAttrs(config);

// bind events
this.on('draggableChange.kinetic', function() {
this._onDraggableChange();
Expand Down Expand Up @@ -2202,7 +2202,27 @@ Kinetic.Node = Kinetic.Class.extend({
}
}
}
}
},
_draw: function(canvas) {
if(this.isVisible() && (!canvas || canvas.name !== 'buffer' || this.getListening())) {
if(this._beforeDraw) {
this._beforeDraw(canvas);
}

var children = this.children;
if(children) {
for(var n = 0; n < children.length; n++) {
var child = children[n];
if(child.draw) {
child.draw(canvas);
}
else {
child._draw(canvas);
}
}
}
}
},
});

// add getter and setter methods
Expand Down Expand Up @@ -2647,26 +2667,6 @@ Kinetic.Container = Kinetic.Node.extend({

return arr;
},
/**
* draw children
*/
_drawChildren: function(canvas) {
var stage = this.getStage();
var children = this.children;
for(var n = 0; n < children.length; n++) {
var child = children[n];
if(child.getListening()) {
if(child.nodeType === 'Shape') {
if(child.isVisible()) {
child._draw(canvas);
}
}
else {
child.draw(canvas);
}
}
}
},
/**
* set children indices
*/
Expand Down Expand Up @@ -3489,9 +3489,6 @@ Kinetic.Stage = Kinetic.Container.extend({
this.ids = {};
this.names = {};
this.dragAnim = new Kinetic.Animation();
},
_draw: function() {
this._drawChildren();
}
});

Expand Down Expand Up @@ -3582,7 +3579,23 @@ Kinetic.Layer = Kinetic.Container.extend({
* @methodOf Kinetic.Layer.prototype
*/
draw: function(canvas) {
this._draw(canvas);
// before draw handler
if(this.beforeDrawFunc !== undefined) {
this.beforeDrawFunc.call(this);
}

if(canvas) {
this._draw(canvas);
}
else {
this._draw(this.getCanvas());
this._draw(this.bufferCanvas);
}

// after draw handler
if(this.afterDrawFunc !== undefined) {
this.afterDrawFunc.call(this);
}
},
/**
* draw children nodes on buffer. this includes any groups
Expand Down Expand Up @@ -3675,43 +3688,9 @@ Kinetic.Layer = Kinetic.Container.extend({
}
return canvas.toDataURL(mimeType, quality);
},
/**
* private draw children
*/
_draw: function(canvas) {
if(this.isVisible()) {
// before draw handler
if(this.beforeDrawFunc !== undefined) {
this.beforeDrawFunc.call(this);
}

if(this.attrs.clearBeforeDraw) {
if(canvas) {
canvas.clear();
}
else {
this.getCanvas().clear();
this.bufferCanvas.clear();
}
}

// draw custom func
if(this.attrs.drawFunc !== undefined) {
this.attrs.drawFunc.call(this);
}

if(canvas) {
this._drawChildren(canvas);
}
else {
this._drawChildren(this.getCanvas());
this._drawChildren(this.bufferCanvas);
}

// after draw handler
if(this.afterDrawFunc !== undefined) {
this.afterDrawFunc.call(this);
}
_beforeDraw: function(canvas) {
if(this.attrs.clearBeforeDraw) {
canvas.clear();
}
}
});
Expand Down Expand Up @@ -3771,14 +3750,6 @@ Kinetic.Group = Kinetic.Container.extend({

// call super constructor
this._super(config);
},
draw: function(canvas) {
this._draw(canvas);
},
_draw: function(canvas) {
if(this.attrs.visible) {
this._drawChildren(canvas);
}
}
});

Expand Down Expand Up @@ -4103,7 +4074,7 @@ Kinetic.Shape = Kinetic.Node.extend({
var obj = stage.getIntersection(pos);
return !!(obj && obj.pixel[3] > 0);
},
_draw: function(canvas) {
_beforeDraw: function(canvas) {
if(this.attrs.drawFunc) {
var stage = this.getStage();
var context = canvas.getContext();
Expand Down
4 changes: 2 additions & 2 deletions dist/kinetic-core.min.js
View file

Large diffs are not rendered by default.

20 changes: 0 additions & 20 deletions src/Container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,26 +241,6 @@ Kinetic.Container = Kinetic.Node.extend({

return arr;
},
/**
* draw children
*/
_drawChildren: function(canvas) {
var stage = this.getStage();
var children = this.children;
for(var n = 0; n < children.length; n++) {
var child = children[n];
if(child.getListening()) {
if(child.nodeType === 'Shape') {
if(child.isVisible()) {
child._draw(canvas);
}
}
else {
child.draw(canvas);
}
}
}
},
/**
* set children indices
*/
Expand Down
8 changes: 0 additions & 8 deletions src/Group.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,5 @@ Kinetic.Group = Kinetic.Container.extend({

// call super constructor
this._super(config);
},
draw: function(canvas) {
this._draw(canvas);
},
_draw: function(canvas) {
if(this.attrs.visible) {
this._drawChildren(canvas);
}
}
});
58 changes: 20 additions & 38 deletions src/Layer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,23 @@ Kinetic.Layer = Kinetic.Container.extend({
* @methodOf Kinetic.Layer.prototype
*/
draw: function(canvas) {
this._draw(canvas);
// before draw handler
if(this.beforeDrawFunc !== undefined) {
this.beforeDrawFunc.call(this);
}

if(canvas) {
this._draw(canvas);
}
else {
this._draw(this.getCanvas());
this._draw(this.bufferCanvas);
}

// after draw handler
if(this.afterDrawFunc !== undefined) {
this.afterDrawFunc.call(this);
}
},
/**
* draw children nodes on buffer. this includes any groups
Expand Down Expand Up @@ -150,43 +166,9 @@ Kinetic.Layer = Kinetic.Container.extend({
}
return canvas.toDataURL(mimeType, quality);
},
/**
* private draw children
*/
_draw: function(canvas) {
if(this.isVisible()) {
// before draw handler
if(this.beforeDrawFunc !== undefined) {
this.beforeDrawFunc.call(this);
}

if(this.attrs.clearBeforeDraw) {
if(canvas) {
canvas.clear();
}
else {
this.getCanvas().clear();
this.bufferCanvas.clear();
}
}

// draw custom func
if(this.attrs.drawFunc !== undefined) {
this.attrs.drawFunc.call(this);
}

if(canvas) {
this._drawChildren(canvas);
}
else {
this._drawChildren(this.getCanvas());
this._drawChildren(this.bufferCanvas);
}

// after draw handler
if(this.afterDrawFunc !== undefined) {
this.afterDrawFunc.call(this);
}
_beforeDraw: function(canvas) {
if(this.attrs.clearBeforeDraw) {
canvas.clear();
}
}
});
Expand Down
24 changes: 22 additions & 2 deletions src/Node.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ Kinetic.Node = Kinetic.Class.extend({
this.eventListeners = {};
this.transAnim = new Kinetic.Animation();
this.setAttrs(config);

// bind events
this.on('draggableChange.kinetic', function() {
this._onDraggableChange();
Expand Down Expand Up @@ -982,7 +982,27 @@ Kinetic.Node = Kinetic.Class.extend({
}
}
}
}
},
_draw: function(canvas) {
if(this.isVisible() && (!canvas || canvas.name !== 'buffer' || this.getListening())) {
if(this._beforeDraw) {
this._beforeDraw(canvas);
}

var children = this.children;
if(children) {
for(var n = 0; n < children.length; n++) {
var child = children[n];
if(child.draw) {
child.draw(canvas);
}
else {
child._draw(canvas);
}
}
}
}
},
});

// add getter and setter methods
Expand Down
2 changes: 1 addition & 1 deletion src/Shape.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -319,7 +319,7 @@ Kinetic.Shape = Kinetic.Node.extend({
var obj = stage.getIntersection(pos);
return !!(obj && obj.pixel[3] > 0);
},
_draw: function(canvas) {
_beforeDraw: function(canvas) {
if(this.attrs.drawFunc) {
var stage = this.getStage();
var context = canvas.getContext();
Expand Down
3 changes: 0 additions & 3 deletions src/Stage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -810,9 +810,6 @@ Kinetic.Stage = Kinetic.Container.extend({
this.ids = {};
this.names = {};
this.dragAnim = new Kinetic.Animation();
},
_draw: function() {
this._drawChildren();
}
});

Expand Down
2 changes: 2 additions & 0 deletions tests/js/manualTests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -363,6 +363,8 @@ Test.prototype.tests = {

layer.add(star);
stage.add(layer);

//document.body.appendChild(layer.bufferCanvas.element)
},
'EVENTS - drag events click': function(containerId) {
var stage = new Kinetic.Stage({
Expand Down
2 changes: 1 addition & 1 deletion tests/js/performanceTests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ Test.prototype.tests = {
anim.start();
}, 4000);
},
'*DRAWING - draw 10,000 small circles with tooltips': function(containerId) {
'DRAWING - draw 10,000 small circles with tooltips': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
Expand Down
15 changes: 10 additions & 5 deletions tests/js/unitTests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ Test.prototype.tests = {

test(circle.getName() === 'myCircle', 'circle name should be myCircle');

//document.body.appendChild(layer.bufferCanvas.element)
document.body.appendChild(layer.bufferCanvas.element)
},
'STAGE - add shape with opacity': function(containerId) {
var stage = new Kinetic.Stage({
Expand Down Expand Up @@ -480,7 +480,6 @@ Test.prototype.tests = {

test(stage.getScale().x === 0.5, 'stage scale x should be 0.5');
test(stage.getScale().y === 0.5, 'stage scale y should be 0.5');

stage.draw();
},
'STAGE - scale stage before add shape': function(containerId) {
Expand Down Expand Up @@ -1882,11 +1881,17 @@ Test.prototype.tests = {
y: -120

});

layer.add(cachedShape);
layer.draw();

warn(urls[0] === layer.toDataURL(), 'layer data url is incorrect');
cachedShape.createBufferImage(function() {

layer.draw();

warn(urls[0] === layer.toDataURL(), 'layer data url is incorrect');

document.body.appendChild(layer.bufferCanvas.element)
});
}
});

Expand Down

0 comments on commit 9093d9a

Please sign in to comment.