removed beforeDraw and afterDraw methods. you can now subscribe to draw events with .on('draw') or .on('beforeDraw'). Draw events also bubble

This commit is contained in:
Eric Rowell
2013-03-24 01:05:37 -07:00
parent 15a9f6165f
commit 13c540b969
3 changed files with 61 additions and 22 deletions

View File

@@ -27,25 +27,6 @@
// call super constructor // call super constructor
Kinetic.Container.call(this, config); Kinetic.Container.call(this, config);
}, },
/**
* draw children nodes. this includes any groups
* or shapes
* @name draw
* @methodOf Kinetic.Layer.prototype
*/
draw: function() {
// before draw handler
if(this.beforeDrawFunc !== undefined) {
this.beforeDrawFunc.call(this);
}
Kinetic.Container.prototype.draw.call(this);
// after draw handler
if(this.afterDrawFunc !== undefined) {
this.afterDrawFunc.call(this);
}
},
toDataURL: function(config) { toDataURL: function(config) {
config = config || {}; config = config || {};
var mimeType = config.mimeType || null, var mimeType = config.mimeType || null,

View File

@@ -18,7 +18,9 @@
MOUSELEAVE = 'mouseleave', MOUSELEAVE = 'mouseleave',
DEG = 'Deg', DEG = 'Deg',
ON = 'on', ON = 'on',
OFF = 'off'; OFF = 'off',
BEFORE_DRAW = 'beforeDraw',
DRAW = 'draw';
/** /**
* Node constructor. Nodes are entities that can be transformed, layered, * Node constructor. Nodes are entities that can be transformed, layered,
@@ -945,7 +947,7 @@
}, },
_handleEvent: function(eventType, evt, compareShape) { _handleEvent: function(eventType, evt, compareShape) {
if(evt && this.nodeType === SHAPE) { if(evt && this.nodeType === SHAPE) {
evt.shape = this; evt.node = this;
} }
var stage = this.getStage(); var stage = this.getStage();
var el = this.eventListeners; var el = this.eventListeners;
@@ -990,15 +992,20 @@
* the scene renderer * the scene renderer
*/ */
draw: function() { draw: function() {
var layer = this.getLayer(); var layer = this.getLayer(),
evt = {
node: this
};
if(layer && layer.getClearBeforeDraw()) { if(layer && layer.getClearBeforeDraw()) {
layer.getCanvas().clear(); layer.getCanvas().clear();
layer.getHitCanvas().clear(); layer.getHitCanvas().clear();
} }
this.fire(BEFORE_DRAW, evt);
this.drawScene(); this.drawScene();
this.drawHit(); this.drawHit();
this.fire(DRAW, evt);
}, },
shouldDrawHit: function() { shouldDrawHit: function() {
return this.isVisible() && this.isListening() && !Kinetic.Global.isDragging(); return this.isVisible() && this.isListening() && !Kinetic.Global.isDragging();

View File

@@ -302,6 +302,57 @@ Test.Modules.DD = {
}; };
Test.Modules.EVENT = { Test.Modules.EVENT = {
'draw events': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200,
throttle: 999
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'red'
});
var eventNodes = [];
var savedEvt;
var order = [];
layer.on('draw', function(evt) {
savedEvt = evt;
eventNodes.push(this.getNodeType());
order.push('layer draw');
});
stage.on('draw', function(evt) {
eventNodes.push(this.getNodeType());
order.push('stage draw');
});
layer.on('beforeDraw', function(evt) {
order.push('layer beforeDraw');
});
stage.on('beforeDraw', function(evt) {
order.push('stage beforeDraw');
});
layer.add(circle);
stage.add(layer);
test(eventNodes.toString() === 'Layer,Stage', 'layer draw event should have fired followed by stage draw event');
test(savedEvt.node.getNodeType() === 'Layer', 'event object should contain a node property which is Layer');
test(order.toString() === 'layer beforeDraw,stage beforeDraw,layer draw,stage draw', 'order should be: layer beforeDraw,stage beforeDraw,layer draw,stage draw');
},
'click mapping': function(containerId) { 'click mapping': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,