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

started setting up new caching system

Browse Source
This commit is contained in:
Eric Rowell
2013-08-09 21:09:06 -07:00
parent 7700ecc70b
commit cb5cb66256
2 changed files with 50 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/Node.js
View File

@@ -31,15 +31,34 @@
UPPER_G = 'G', UPPER_G = 'G',
UPPER_B = 'B', UPPER_B = 'B',
HASH = '#', HASH = '#',
CHILDREN = 'children'; CHILDREN = 'children',
TRANSFORM = 'transform',
CACHE_MAP = {
x: TRANSFORM,
y: TRANSFORM,
rotation: TRANSFORM,
rotationDeg: TRANSFORM,
scaleX: TRANSFORM,
scaleY: TRANSFORM,
skewX: TRANSFORM,
skewY: TRANSFORM
};
Kinetic.Util.addMethods(Kinetic.Node, { Kinetic.Util.addMethods(Kinetic.Node, {
_init: function(config) { _init: function(config) {
this._id = Kinetic.Global.idCounter++; this._id = Kinetic.Global.idCounter++;
this.eventListeners = {}; this.eventListeners = {};
this.attrs = {}; this.attrs = {};
this.cache = {};
this.setAttrs(config); this.setAttrs(config);
}, },
_clearCache: function(attr){
var cacheAttr = CACHE_MAP[attr];
if (cacheAttr) {
delete this.cache[cacheAttr];
}
},
/** /**
* bind events to the node. KineticJS supports mouseover, mousemove, * bind events to the node. KineticJS supports mouseover, mousemove,
* mouseout, mouseenter, mouseleave, mousedown, mouseup, click, dblclick, touchstart, touchmove, * mouseout, mouseenter, mouseleave, mousedown, mouseup, click, dblclick, touchstart, touchmove,
@@ -761,7 +780,7 @@
} }
// cache result // cache result
this.cachedTransform = m; this.cache.transform = m;
return m; return m;
}, },
/** /**
@@ -770,7 +789,7 @@
* @memberof Kinetic.Node.prototype * @memberof Kinetic.Node.prototype
*/ */
getTransform: function(useCache) { getTransform: function(useCache) {
var cachedTransform = this.cachedTransform; var cachedTransform = this.cache.transform;
if (useCache && cachedTransform) { if (useCache && cachedTransform) {
return cachedTransform; return cachedTransform;
} }
@@ -1010,7 +1029,7 @@
this.attrs[key] = trans[key]; this.attrs[key] = trans[key];
} }
this.cachedTransform = null; delete this.cache.transform;
}, },
_fireBeforeChangeEvent: function(attr, oldVal, newVal) { _fireBeforeChangeEvent: function(attr, oldVal, newVal) {
this._fire(BEFORE + Kinetic.Util._capitalize(attr) + CHANGE, { this._fire(BEFORE + Kinetic.Util._capitalize(attr) + CHANGE, {
@@ -1125,28 +1144,28 @@
}); });
// getter setter adders // getter setter adders
Kinetic.Node.addGetterSetter = function(constructor, attr, def, isTransform) { Kinetic.Node.addGetterSetter = function(constructor, attr, def) {
this.addGetter(constructor, attr, def); this.addGetter(constructor, attr, def);
this.addSetter(constructor, attr, isTransform); this.addSetter(constructor, attr);
}; };
Kinetic.Node.addPointGetterSetter = function(constructor, attr, def, isTransform) { Kinetic.Node.addPointGetterSetter = function(constructor, attr, def) {
this.addPointGetter(constructor, attr); this.addPointGetter(constructor, attr);
this.addPointSetter(constructor, attr); this.addPointSetter(constructor, attr);
// add invdividual component getters and setters // add invdividual component getters and setters
this.addGetter(constructor, attr + UPPER_X, def); this.addGetter(constructor, attr + UPPER_X, def);
this.addGetter(constructor, attr + UPPER_Y, def); this.addGetter(constructor, attr + UPPER_Y, def);
this.addSetter(constructor, attr + UPPER_X, isTransform); this.addSetter(constructor, attr + UPPER_X);
this.addSetter(constructor, attr + UPPER_Y, isTransform); this.addSetter(constructor, attr + UPPER_Y);
}; };
Kinetic.Node.addPointsGetterSetter = function(constructor, attr) { Kinetic.Node.addPointsGetterSetter = function(constructor, attr) {
this.addPointsGetter(constructor, attr); this.addPointsGetter(constructor, attr);
this.addPointsSetter(constructor, attr); this.addPointsSetter(constructor, attr);
this.addPointAdder(constructor, attr); this.addPointAdder(constructor, attr);
}; };
Kinetic.Node.addRotationGetterSetter = function(constructor, attr, def, isTransform) { Kinetic.Node.addRotationGetterSetter = function(constructor, attr, def) {
this.addRotationGetter(constructor, attr, def); this.addRotationGetter(constructor, attr, def);
this.addRotationSetter(constructor, attr, isTransform); this.addRotationSetter(constructor, attr);
}; };
Kinetic.Node.addColorGetterSetter = function(constructor, attr) { Kinetic.Node.addColorGetterSetter = function(constructor, attr) {
this.addGetter(constructor, attr); this.addGetter(constructor, attr);
@@ -1261,15 +1280,13 @@
this._setAttr('points', points); this._setAttr('points', points);
}; };
}; };
Kinetic.Node.addSetter = function(constructor, attr, isTransform) { Kinetic.Node.addSetter = function(constructor, attr) {
var that = this, var that = this,
method = SET + Kinetic.Util._capitalize(attr); method = SET + Kinetic.Util._capitalize(attr);
constructor.prototype[method] = function(val) { constructor.prototype[method] = function(val) {
this._setAttr(attr, val); this._clearCache(attr);
if (isTransform) { this._setAttr(attr, val);
this.cachedTransform = null;
}
}; };
}; };
Kinetic.Node.addPointSetter = function(constructor, attr) { Kinetic.Node.addPointSetter = function(constructor, attr) {
@@ -1297,23 +1314,19 @@
} }
}; };
}; };
Kinetic.Node.addRotationSetter = function(constructor, attr, isTransform) { Kinetic.Node.addRotationSetter = function(constructor, attr) {
var that = this, var that = this,
method = SET + Kinetic.Util._capitalize(attr); method = SET + Kinetic.Util._capitalize(attr);
// radians // radians
constructor.prototype[method] = function(val) { constructor.prototype[method] = function(val) {
this._clearCache(attr);
this._setAttr(attr, val); this._setAttr(attr, val);
if (isTransform) {
this.cachedTransform = null;
}
}; };
// degrees // degrees
constructor.prototype[method + DEG] = function(deg) { constructor.prototype[method + DEG] = function(deg) {
this._clearCache(attr);
this._setAttr(attr, Kinetic.Util._degToRad(deg)); this._setAttr(attr, Kinetic.Util._degToRad(deg));
if (isTransform) {
this.cachedTransform = null;
}
}; };
}; };
@@ -1371,7 +1384,7 @@
return no; return no;
}; };
// add getters setters // add getters setters
Kinetic.Node.addGetterSetter(Kinetic.Node, 'x', 0, true); Kinetic.Node.addGetterSetter(Kinetic.Node, 'x', 0);
/** /**
* set x position * set x position
@@ -1388,7 +1401,7 @@
* @memberof Kinetic.Node.prototype * @memberof Kinetic.Node.prototype
*/ */
Kinetic.Node.addGetterSetter(Kinetic.Node, 'y', 0, true); Kinetic.Node.addGetterSetter(Kinetic.Node, 'y', 0);
/** /**
* set y position * set y position
@@ -1442,7 +1455,7 @@
* @memberof Kinetic.Node.prototype * @memberof Kinetic.Node.prototype
*/ */
Kinetic.Node.addRotationGetterSetter(Kinetic.Node, 'rotation', 0, true); Kinetic.Node.addRotationGetterSetter(Kinetic.Node, 'rotation', 0);
/** /**
* set rotation in radians * set rotation in radians
@@ -1474,7 +1487,7 @@
* @memberof Kinetic.Node.prototype * @memberof Kinetic.Node.prototype
*/ */
Kinetic.Node.addPointGetterSetter(Kinetic.Node, 'scale', 1, true); Kinetic.Node.addPointGetterSetter(Kinetic.Node, 'scale', 1);
/** /**
* set scale * set scale
@@ -1535,7 +1548,7 @@
* @memberof Kinetic.Node.prototype * @memberof Kinetic.Node.prototype
*/ */
Kinetic.Node.addPointGetterSetter(Kinetic.Node, 'skew', 0, true); Kinetic.Node.addPointGetterSetter(Kinetic.Node, 'skew', 0);
/** /**
* set skew * set skew
@@ -1597,7 +1610,7 @@
* @memberof Kinetic.Node.prototype * @memberof Kinetic.Node.prototype
*/ */
Kinetic.Node.addPointGetterSetter(Kinetic.Node, 'offset', 0, true); Kinetic.Node.addPointGetterSetter(Kinetic.Node, 'offset', 0);
/** /**
* set offset. A node's offset defines the position and rotation point * set offset. A node's offset defines the position and rotation point

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

@@ -105,20 +105,24 @@ Test.Modules.NODE = {
strokeWidth: 4 strokeWidth: 4
}); });
test(!circle.cachedTransform, 'circle transform cache should be empty'); test(!circle.cache.transform, '1) circle transform cache should be empty');
layer.add(circle); layer.add(circle);
stage.add(layer); stage.add(layer);
test(circle.cachedTransform, 'circle transform cache should be present'); test(circle.cache.transform, '2) circle transform cache should be present');
console.log(circle.cache.transform)
circle.setX(100); circle.setX(100);
test(!circle.cachedTransform, 'circle transform cache should be empty'); console.log(circle.cache.transform)
test(!circle.cache.transform, '3) circle transform cache should be empty');
layer.draw(); layer.draw();
test(circle.cachedTransform, 'circle transform cache should be present'); test(circle.cache.transform, '4) circle transform cache should be present');
}, },
'test pixel ratio toDataURL': function(containerId) { 'test pixel ratio toDataURL': function(containerId) {