Permalink
Browse files

started work on layer queueing, but the performance gain isn't what I…

… had hoped for. Will save the code state as a branch in case I want to come back to this
  • Loading branch information...
1 parent 04554e0 commit c4907a71a3743b6ba54a63ed140994c82d77aeb9 @ericdrowell committed Apr 28, 2012
Showing with 97 additions and 15 deletions.
  1. +48 −7 dist/kinetic-core.js
  2. +23 −5 src/GlobalObject.js
  3. +5 −2 src/Layer.js
  4. +20 −0 src/Stage.js
  5. +1 −1 tests/js/Test.js
View
@@ -94,17 +94,35 @@ Kinetic.GlobalObject = {
}
},
_runFrames: function() {
+ var go = Kinetic.GlobalObject;
var nodes = {};
+
for(var n = 0; n < this.animations.length; n++) {
var anim = this.animations[n];
- if(anim.node && anim.node._id !== undefined) {
- nodes[anim.node._id] = anim.node;
+ var node = anim.node;
+
+ console.log(1);
+
+ if(node && node._id !== undefined) {
+ nodes[node._id] = anim.node;
+ }
+
+ if(anim.func !== undefined) {
+ anim.func(this.frame);
+ }
+
+ if(anim.drawOnce === true) {
+ var stage = node.getStage();
+ if(stage !== undefined) {
+ stage.layerQueue[node._id] = undefined;
+ }
+
+ //go.removeAnimation(anim.id);
}
- anim.func(this.frame);
}
for(var key in nodes) {
- nodes[key].draw();
+ nodes[key]._draw();
}
},
_updateFrameObject: function() {
@@ -148,7 +166,7 @@ Kinetic.GlobalObject = {
return !!(obj && obj.constructor && obj.call && obj.apply);
},
_getPoint: function(arg) {
-
+
if(arg.length === 1) {
return arg[0];
}
@@ -1223,6 +1241,7 @@ Kinetic.Stage = function(config) {
this.nodeType = 'Stage';
this.ids = {};
this.names = {};
+ this.layerQueue = {};
/*
* if container is a string, assume it's an id for
@@ -1289,6 +1308,7 @@ Kinetic.Stage.prototype = {
start: function() {
var go = Kinetic.GlobalObject;
go.addAnimation(this.anim);
+
go._handleAnimation();
},
/**
@@ -2071,6 +2091,24 @@ Kinetic.Stage.prototype = {
var baseEvent = types[n];
this.content.addEventListener(baseEvent, handler, false);
}
+ },
+ /**
+ * queue layer
+ * @param {Kinetic.Layer} layer
+ */
+ _queueLayer: function(layer) {
+ var go = Kinetic.GlobalObject;
+ if(!(layer._id in this.layerQueue)) {
+ this.layerQueue[layer._id] = layer;
+
+ var anim = {
+ node: layer,
+ drawOnce: true
+ };
+
+ go.addAnimation(anim);
+ go._handleAnimation();
+ }
}
};
// Extend Container and Node
@@ -2090,7 +2128,7 @@ Kinetic.GlobalObject.extend(Kinetic.Stage, Kinetic.Node);
*/
Kinetic.Layer = function(config) {
this.nodeType = 'Layer';
-
+
this.canvas = document.createElement('canvas');
this.context = this.canvas.getContext('2d');
this.canvas.style.position = 'absolute';
@@ -2108,7 +2146,10 @@ Kinetic.Layer.prototype = {
* or shapes
*/
draw: function() {
- this._draw();
+ var stage = this.getStage();
+ if(stage) {
+ stage._queueLayer(this);
+ }
},
/**
* clears the canvas context tied to the layer. Clearing
View
@@ -66,17 +66,35 @@ Kinetic.GlobalObject = {
}
},
_runFrames: function() {
+ var go = Kinetic.GlobalObject;
var nodes = {};
+
for(var n = 0; n < this.animations.length; n++) {
var anim = this.animations[n];
- if(anim.node && anim.node._id !== undefined) {
- nodes[anim.node._id] = anim.node;
+ var node = anim.node;
+
+ console.log(1);
+
+ if(node && node._id !== undefined) {
+ nodes[node._id] = anim.node;
+ }
+
+ if(anim.func !== undefined) {
+ anim.func(this.frame);
+ }
+
+ if(anim.drawOnce === true) {
+ var stage = node.getStage();
+ if(stage !== undefined) {
+ stage.layerQueue[node._id] = undefined;
+ }
+
+ //go.removeAnimation(anim.id);
}
- anim.func(this.frame);
}
for(var key in nodes) {
- nodes[key].draw();
+ nodes[key]._draw();
}
},
_updateFrameObject: function() {
@@ -120,7 +138,7 @@ Kinetic.GlobalObject = {
return !!(obj && obj.constructor && obj.call && obj.apply);
},
_getPoint: function(arg) {
-
+
if(arg.length === 1) {
return arg[0];
}
View
@@ -11,7 +11,7 @@
*/
Kinetic.Layer = function(config) {
this.nodeType = 'Layer';
-
+
this.canvas = document.createElement('canvas');
this.context = this.canvas.getContext('2d');
this.canvas.style.position = 'absolute';
@@ -29,7 +29,10 @@ Kinetic.Layer.prototype = {
* or shapes
*/
draw: function() {
- this._draw();
+ var stage = this.getStage();
+ if(stage) {
+ stage._queueLayer(this);
+ }
},
/**
* clears the canvas context tied to the layer. Clearing
View
@@ -21,6 +21,7 @@ Kinetic.Stage = function(config) {
this.nodeType = 'Stage';
this.ids = {};
this.names = {};
+ this.layerQueue = {};
/*
* if container is a string, assume it's an id for
@@ -87,6 +88,7 @@ Kinetic.Stage.prototype = {
start: function() {
var go = Kinetic.GlobalObject;
go.addAnimation(this.anim);
+
go._handleAnimation();
},
/**
@@ -869,6 +871,24 @@ Kinetic.Stage.prototype = {
var baseEvent = types[n];
this.content.addEventListener(baseEvent, handler, false);
}
+ },
+ /**
+ * queue layer
+ * @param {Kinetic.Layer} layer
+ */
+ _queueLayer: function(layer) {
+ var go = Kinetic.GlobalObject;
+ if(!(layer._id in this.layerQueue)) {
+ this.layerQueue[layer._id] = layer;
+
+ var anim = {
+ node: layer,
+ drawOnce: true
+ };
+
+ go.addAnimation(anim);
+ go._handleAnimation();
+ }
}
};
// Extend Container and Node
View
@@ -10,7 +10,7 @@ function log(message) {
* Test constructor
*/
function Test() {
- this.testOnly = '';
+ this.testOnly = 'DRAG AND DROP - draggable true';
this.counter = 0;
}
/**

0 comments on commit c4907a7

Please sign in to comment.