lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-12-03 12:13:55 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

getStage() result is now cached. refactored caching system even further.

Browse Source
This commit is contained in:
Eric Rowell
2013-08-11 20:34:54 -07:00
parent 8654391de4
commit d49ae15207
8 changed files with 93 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/Canvas.js
View File

@@ -116,10 +116,18 @@
* @method
* @memberof Kinetic.Canvas.prototype
*/
clear: function() {
var context = this.getContext();
var el = this.getElement();
context.clearRect(0, 0, this.getWidth(), this.getHeight());
clear: function(clip) {
var context = this.getContext(),
pos, size;
if (clip) {
pos = Kinetic.Util._getXY(clip);
size = Kinetic.Util._getSize(clip);
context.clearRect(pos.x || 0, pos.y || 0, size.width, size.height);
}
else {
context.clearRect(0, 0, this.getWidth(), this.getHeight());
}
},
/**
* to data url

4
src/Container.js
View File

@@ -137,7 +137,9 @@
return Kinetic.Collection.toCollection(retArr);
},
_getNodeById: function(key) {
var stage = this.getStage(), go = Kinetic.Global, node = go.ids[key];
var go = Kinetic.Global,
node = go.ids[key];
if(node !== undefined && this.isAncestorOf(node)) {
return node;
}

10
src/Layer.js
View File

@@ -107,9 +107,12 @@
* clear canvas tied to the layer
* @method
* @memberof Kinetic.Node.prototype
* @param {Object} [clip] clipping bounds
* @example
* layer.clear([0, 0, 100, 100])
*/
clear: function() {
this.getCanvas().clear();
clear: function(clip) {
this.getCanvas().clear(clip);
return this;
},
// extenders
@@ -194,6 +197,9 @@
stage.content.removeChild(element);
}
return this;
},
getStage: function() {
return this.parent;
}
});
Kinetic.Util.extend(Kinetic.Layer, Kinetic.Container);

133
src/Node.js
View File

@@ -28,12 +28,13 @@
SET = 'set',
SHAPE = 'Shape',
SPACE = ' ',
STAGE = 'Stage',
STAGE = 'stage',
TRANSFORM = 'transform',
UPPER_B = 'B',
UPPER_G = 'G',
UPPER_HEIGHT = 'Height',
UPPER_R = 'R',
UPPER_STAGE = 'Stage',
UPPER_WIDTH = 'Width',
UPPER_X = 'X',
UPPER_Y = 'Y',
@@ -53,61 +54,9 @@
'offsetYChange.kinetic'
].join(SPACE);
function _clearTransformCache() {
this._clearCache(TRANSFORM);
this._clearAbsoluteTransformCache();
}
// clear absolute transform cache pair
function _clearAbsoluteTransformCacheEachChild(node) {
_clearAbsoluteTransformCache.call(node);
}
function _clearAbsoluteTransformCache() {
this._clearCache(ABSOLUTE_TRANSFORM);
if (this.children) {
this.getChildren().each(_clearAbsoluteTransformCacheEachChild);
}
}
// clear visible cache pair
function _clearVisibleCacheEachChild(node) {
_clearVisibleCache.call(node);
}
function _clearVisibleCache() {
this._clearCache(VISIBLE);
if (this.children) {
this.getChildren().each(_clearVisibleCacheEachChild);
}
}
// clear listening cache pair
function _clearListeningCacheEachChild(node) {
_clearListeningCache.call(node);
}
function _clearListeningCache() {
this._clearCache(LISTENING);
if (this.children) {
this.getChildren().each(_clearListeningCacheEachChild);
}
}
// clear absolute opacity cache pair
function _clearAbsoluteOpacityCacheEachChild(node) {
_clearAbsoluteOpacityCache.call(node);
}
function _clearAbsoluteOpacityCache() {
this._clearCache(ABSOLUTE_OPACITY);
if (this.children) {
this.getChildren().each(_clearAbsoluteOpacityCacheEachChild);
}
}
Kinetic.Util.addMethods(Kinetic.Node, {
_init: function(config) {
var that = this;
this._id = Kinetic.Global.idCounter++;
this.eventListeners = {};
this.attrs = {};
@@ -115,16 +64,29 @@
this.setAttrs(config);
// event bindings for cache handling
this.on(transformChangeStr, _clearTransformCache);
this.on('visibleChange.kinetic', _clearVisibleCache);
this.on('listeningChange.kinetic', _clearListeningCache);
this.on('opacityChange.kinetic', _clearAbsoluteOpacityCache);
this._clearTransformCache = _clearTransformCache;
this._clearAbsoluteTransformCache = _clearAbsoluteTransformCache;
this._clearVisibleCache = _clearVisibleCache;
this._clearListeningCache = _clearListeningCache;
this._clearAbsoluteOpacityCache = _clearAbsoluteOpacityCache;
this.on(transformChangeStr, function() {
this._clearCache(TRANSFORM);
that._clearSelfAndChildrenCache(ABSOLUTE_TRANSFORM);
});
this.on('visibleChange.kinetic', function() {
that._clearSelfAndChildrenCache(VISIBLE);
});
this.on('listeningChange.kinetic', function() {
that._clearSelfAndChildrenCache(LISTENING);
});
this.on('opacityChange.kinetic', function() {
that._clearSelfAndChildrenCache(ABSOLUTE_OPACITY);
});
},
/**
* clear cached variables
* @method
* @memberof Kinetic.Node.prototype
* @example
* node.clearCache();
*/
clearCache: function() {
this.cache = {};
},
_clearCache: function(attr){
delete this.cache[attr];
@@ -139,6 +101,16 @@
return this.cache[attr];
},
_clearSelfAndChildrenCache: function(attr) {
var that = this;
this._clearCache(attr);
if (this.children) {
this.getChildren().each(function(node) {
node._clearSelfAndChildrenCache(attr);
});
}
},
/**
* bind events to the node. KineticJS supports mouseover, mousemove,
* mouseout, mouseenter, mouseleave, mousedown, mouseup, click, dblclick, touchstart, touchmove,
@@ -264,6 +236,14 @@
delete this.parent;
}
// every cached attr that is calculated via node tree
// treversal must be cleared when removing a node
this._clearSelfAndChildrenCache(STAGE);
this._clearSelfAndChildrenCache(ABSOLUTE_TRANSFORM);
this._clearSelfAndChildrenCache(VISIBLE);
this._clearSelfAndChildrenCache(LISTENING);
this._clearSelfAndChildrenCache(ABSOLUTE_OPACITY);
return this;
},
/**
@@ -459,7 +439,6 @@
*/
getAbsoluteZIndex: function() {
var level = this.getLevel(),
stage = this.getStage(),
that = this,
index = 0,
nodes, len, n, child;
@@ -484,7 +463,7 @@
addChildren(nodes);
}
}
if(that.nodeType !== STAGE) {
if(that.nodeType !== UPPER_STAGE) {
addChildren(that.getStage().getChildren());
}
@@ -813,8 +792,12 @@
* @memberof Kinetic.Node.prototype
*/
getStage: function() {
if(this.getParent()) {
return this.getParent().getStage();
return this._getCache(STAGE, this._getStage);
},
_getStage: function() {
var parent = this.getParent();
if(parent) {
return parent.getStage();
}
else {
return undefined;
@@ -1107,7 +1090,6 @@
* clears the transform and returns the original transform
*/
_clearTransform: function() {
var trans = {
x: this.getX(),
y: this.getY(),
@@ -1130,7 +1112,8 @@
this.attrs.skewX = 0;
this.attrs.skewY = 0;
this._clearTransformCache();
this._clearCache(TRANSFORM);
this._clearSelfAndChildrenCache(ABSOLUTE_TRANSFORM);
return trans;
},
@@ -1141,7 +1124,8 @@
this.attrs[key] = trans[key];
}
this._clearTransformCache();
this._clearCache(TRANSFORM);
this._clearSelfAndChildrenCache(ABSOLUTE_TRANSFORM);
},
_fireBeforeChangeEvent: function(attr, oldVal, newVal) {
this._fire(BEFORE + Kinetic.Util._capitalize(attr) + CHANGE, {
@@ -1163,7 +1147,6 @@
*/
setId: function(id) {
var oldId = this.getId(),
stage = this.getStage(),
go = Kinetic.Global;
go._removeId(oldId);
@@ -1179,7 +1162,6 @@
*/
setName: function(name) {
var oldName = this.getName(),
stage = this.getStage(),
go = Kinetic.Global;
go._removeName(oldName, this._id);
@@ -1197,12 +1179,11 @@
}
},
_fireAndBubble: function(eventType, evt, compareShape) {
var okayToRun = true;
if(evt && this.nodeType === SHAPE) {
evt.targetNode = this;
}
var stage = this.getStage();
var el = this.eventListeners;
var okayToRun = true;
if(eventType === MOUSEENTER && compareShape && this._id === compareShape._id) {
okayToRun = false;

5
tests/html/performanceTests.html
View File

@@ -8,7 +8,7 @@
<script src="../js/performanceTests.js"></script>
<!-- versions -->
<!--
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.2.min.js"></script>
<script>
run(Kinetic);
@@ -28,9 +28,10 @@
<script>
run(Kinetic);
</script>
-->
<script src="../../dist/kinetic-dev.js"></script>
<script>
run(Kinetic);
</script>
</html>

2
tests/js/manualTests.js
View File

@@ -48,7 +48,7 @@ Test.Modules.Tween = {
});
},
'*tween clipping region': function(containerId) {
'tween clipping region': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,

6
tests/js/performanceTests.js
View File

@@ -50,8 +50,8 @@ var tests = {
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: Math.random() * 500,
y: Math.random() * 200,
x: 43,
y: 43,
radius: 40,
fill: 'red',
stroke: 'black',
@@ -61,10 +61,10 @@ var tests = {
layer.add(circle);
stage.add(layer);
for (var n=0; n<2000; n++) {
layer.draw();
}
stop(Kinetic, test);
}

7
tests/js/unit/nodeTests.js
View File

@@ -152,6 +152,11 @@ Test.Modules.NODE = {
layer.draw();
test(circle.cache.listening === false, '18) circle listening cache should be primed');
// stage cache
var st = circle.getStage();
test(circle.cache.stage._id === stage._id, '19) circle stage cache should be primed');
},
'test pixel ratio toDataURL': function(containerId) {
var stage = new Kinetic.Stage({
@@ -605,8 +610,8 @@ Test.Modules.NODE = {
layer2.add(circle2);
stage.add(layer1).add(layer2);
test(layer2.isVisible(), 'layer2 should be visible');
test(layer2.isVisible(), 'layer2 should be visible');
layer2.hide();
test(!layer2.isVisible(), 'layer2 should be invisible');
test(layer2.canvas.element.style.display === 'none', 'layer canvas element display should be none');