lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-03-10 00:23:32 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

removed ATTRS class level variable cache from Shape. added class level variable cache to Node. Made several low level optimizations.

Browse Source
This commit is contained in:
Eric Rowell
2012-11-13 23:22:56 -08:00
parent 429f28964a
commit 3c3351ec6f
2 changed files with 1139 additions and 1127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/Node.js
View File

@@ -1,3 +1,7 @@
Kinetic.Node = (function() {
// variable cache
var TYPE = Kinetic.Type;
/**
* Node constructor.  Nodes are entities that can be transformed, layered,
* and have events bound to them. They are the building blocks of a KineticJS
@@ -22,11 +26,11 @@
* @param {Boolean} [config.draggable]
* @param {Function} [config.dragBoundFunc] dragBoundFunc(pos, evt) should return new position
*/
Kinetic.Node = function(config) {
var Node = function(config) {
this._nodeInit(config);
};
Kinetic.Node.prototype = {
Node.prototype = {
_nodeInit: function(config) {
this.defaultNodeAttrs = {
visible: true,
@@ -87,7 +91,8 @@ Kinetic.Node.prototype = {
* each one. eg. 'click mouseover.namespace mouseout'
* will create three event bindings
*/
for(var n = 0; n < types.length; n++) {
var len = types.length;
for(var n = 0; n < len; n++) {
var type = types[n];
var event = type;
var parts = event.split('.');
@@ -117,8 +122,8 @@ Kinetic.Node.prototype = {
*/
off: function(typesStr) {
var types = typesStr.split(' ');
for(var n = 0; n < types.length; n++) {
var len = types.length;
for(var n = 0; n < len; n++) {
var type = types[n];
//var event = (type.indexOf('touch') === -1) ? 'on' + type : type;
var event = type;
@@ -218,7 +223,7 @@ Kinetic.Node.prototype = {
for(var key in config) {
var method = 'set' + key.charAt(0).toUpperCase() + key.slice(1);
// use setter if available
if(Kinetic.Type._isFunction(this[method])) {
if(TYPE._isFunction(this[method])) {
this[method](config[key]);
}
// otherwise set directly
@@ -291,7 +296,8 @@ Kinetic.Node.prototype = {
var index = 0;
function addChildren(children) {
var nodes = [];
for(var n = 0; n < children.length; n++) {
var len = children.length;
for(var n = 0; n < len; n++) {
var child = children[n];
index++;
@@ -300,7 +306,7 @@ Kinetic.Node.prototype = {
}
if(child._id === that._id) {
n = children.length;
n = len;
}
}
@@ -336,7 +342,7 @@ Kinetic.Node.prototype = {
* @param {Number} y
*/
setPosition: function() {
var pos = Kinetic.Type._getXY([].slice.call(arguments));
var pos = TYPE._getXY([].slice.call(arguments));
this.setAttr('x', pos.x);
this.setAttr('y', pos.y);
},
@@ -370,7 +376,7 @@ Kinetic.Node.prototype = {
* y property
*/
setAbsolutePosition: function() {
var pos = Kinetic.Type._getXY([].slice.call(arguments));
var pos = TYPE._getXY([].slice.call(arguments));
var trans = this._clearTransform();
// don't clear translation
this.attrs.x = trans.x;
@@ -399,7 +405,7 @@ Kinetic.Node.prototype = {
* @param {Number} y
*/
move: function() {
var pos = Kinetic.Type._getXY([].slice.call(arguments));
var pos = TYPE._getXY([].slice.call(arguments));
var x = this.getX();
var y = this.getY();
@@ -468,7 +474,8 @@ Kinetic.Node.prototype = {
*/
moveUp: function() {
var index = this.index;
if(index < this.parent.getChildren().length - 1) {
var len = this.parent.getChildren().length;
if(index < len - 1) {
this.parent.children.splice(index, 1);
this.parent.children.splice(index + 1, 0, this);
this.parent._setChildrenIndices();
@@ -552,14 +559,13 @@ Kinetic.Node.prototype = {
*/
toObject: function() {
var obj = {};
var type = Kinetic.Type;
obj.attrs = {};
// serialize only attributes that are not function, image, DOM, or objects with methods
for(var key in this.attrs) {
var val = this.attrs[key];
if(!type._isFunction(val) && !type._isElement(val) && !(type._isObject(val) && type._hasMethods(val))) {
if(!TYPE._isFunction(val) && !TYPE._isElement(val) && !(TYPE._isObject(val) && TYPE._hasMethods(val))) {
obj.attrs[key] = val;
}
}
@@ -640,7 +646,8 @@ Kinetic.Node.prototype = {
parent = parent.parent;
}
for(var n = 0; n < family.length; n++) {
var len = family.length;
for(var n = 0; n < len; n++) {
var node = family[n];
var m = node.getTransform();
am.multiply(m);
@@ -687,7 +694,8 @@ Kinetic.Node.prototype = {
*/
for(var key in this.eventListeners) {
var allListeners = this.eventListeners[key];
for(var n = 0; n < allListeners.length; n++) {
var len = allListeners.length;
for(var n = 0; n < len; n++) {
var listener = allListeners[n];
/*
* don't include kinetic namespaced listeners because
@@ -756,7 +764,7 @@ Kinetic.Node.prototype = {
* is very high quality
*/
toImage: function(config) {
Kinetic.Type._getImage(this.toDataURL(config), function(img) {
TYPE._getImage(this.toDataURL(config), function(img) {
config.callback(img);
});
},
@@ -768,7 +776,7 @@ Kinetic.Node.prototype = {
* @param {Number} y
*/
setOffset: function() {
var pos = Kinetic.Type._getXY([].slice.call(arguments));
var pos = TYPE._getXY([].slice.call(arguments));
if(pos.x === undefined) {
pos.x = this.getOffset().x;
}
@@ -785,7 +793,7 @@ Kinetic.Node.prototype = {
* @methodOf Kinetic.Node.prototype
*/
setScale: function() {
var pos = Kinetic.Type._getXY([].slice.call(arguments));
var pos = TYPE._getXY([].slice.call(arguments));
if(pos.x === undefined) {
pos.x = this.getScale().x;
@@ -805,7 +813,7 @@ Kinetic.Node.prototype = {
*/
setSize: function() {
// set stage dimensions
var size = Kinetic.Type._getSize(Array.prototype.slice.call(arguments));
var size = TYPE._getSize(Array.prototype.slice.call(arguments));
this.setWidth(size.width);
this.setHeight(size.height);
},
@@ -941,7 +949,8 @@ Kinetic.Node.prototype = {
},
_executeHandlers: function(eventType, evt) {
var events = this.eventListeners[eventType];
for(var i = 0; i < events.length; i++) {
var len = events.length;
for(var i = 0; i < len; i++) {
events[i].handler.apply(this, [evt]);
}
},
@@ -951,30 +960,32 @@ Kinetic.Node.prototype = {
};
// add getter and setter methods
Kinetic.Node.addSetters = function(constructor, arr) {
for(var n = 0; n < arr.length; n++) {
Node.addSetters = function(constructor, arr) {
var len = arr.length;
for(var n = 0; n < len; n++) {
var attr = arr[n];
this._addSetter(constructor, attr);
}
};
Kinetic.Node.addGetters = function(constructor, arr) {
for(var n = 0; n < arr.length; n++) {
Node.addGetters = function(constructor, arr) {
var len = arr.length;
for(var n = 0; n < len; n++) {
var attr = arr[n];
this._addGetter(constructor, attr);
}
};
Kinetic.Node.addGettersSetters = function(constructor, arr) {
Node.addGettersSetters = function(constructor, arr) {
this.addSetters(constructor, arr);
this.addGetters(constructor, arr);
};
Kinetic.Node._addSetter = function(constructor, attr) {
Node._addSetter = function(constructor, attr) {
var that = this;
var method = 'set' + attr.charAt(0).toUpperCase() + attr.slice(1);
constructor.prototype[method] = function(val) {
this.setAttr(attr, val);
};
};
Kinetic.Node._addGetter = function(constructor, attr) {
Node._addGetter = function(constructor, attr) {
var that = this;
var method = 'get' + attr.charAt(0).toUpperCase() + attr.slice(1);
constructor.prototype[method] = function(arg) {
@@ -992,10 +1003,10 @@ Kinetic.Node._addGetter = function(constructor, attr) {
* @methodOf Kinetic.Node
* @param {String} JSON string
*/
Kinetic.Node.create = function(json, container) {
Node.create = function(json, container) {
return this._createNode(JSON.parse(json), container);
};
Kinetic.Node._createNode = function(obj, container) {
Node._createNode = function(obj, container) {
var type;
// determine type
@@ -1020,7 +1031,8 @@ Kinetic.Node._createNode = function(obj, container) {
var no = new Kinetic[type](obj.attrs);
if(obj.children) {
for(var n = 0; n < obj.children.length; n++) {
var len = obj.children.length;
for(var n = 0; n < len; n++) {
no.add(this._createNode(obj.children[n]));
}
}
@@ -1028,9 +1040,9 @@ Kinetic.Node._createNode = function(obj, container) {
return no;
};
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'rotation', 'opacity', 'name', 'id']);
Kinetic.Node.addGetters(Kinetic.Node, ['scale', 'offset']);
Kinetic.Node.addSetters(Kinetic.Node, ['width', 'height', 'listening', 'visible']);
Node.addGettersSetters(Node, ['x', 'y', 'rotation', 'opacity', 'name', 'id']);
Node.addGetters(Node, ['scale', 'offset']);
Node.addSetters(Node, ['width', 'height', 'listening', 'visible']);
// mappings
/**
@@ -1038,18 +1050,17 @@ Kinetic.Node.addSetters(Kinetic.Node, ['width', 'height', 'listening', 'visible'
* @name isListening
* @methodOf Kinetic.Node.prototype
*/
Kinetic.Node.prototype.isListening = Kinetic.Node.prototype.getListening;
Node.prototype.isListening = Node.prototype.getListening;
/**
* Alias of getVisible()
* @name isVisible
* @methodOf Kinetic.Node.prototype
*/
Kinetic.Node.prototype.isVisible = Kinetic.Node.prototype.getVisible;
Node.prototype.isVisible = Node.prototype.getVisible;
// collection mappings
(function() {
var collectionMappings = ['on', 'off'];
for(var n = 0; n < collectionMappings.length; n++) {
for(var n = 0; n < 2; n++) {
// induce scope
(function(i) {
var method = collectionMappings[i];
@@ -1060,7 +1071,6 @@ Kinetic.Node.prototype.isVisible = Kinetic.Node.prototype.getVisible;
};
})(n);
}
})();
/**
* set node x position
@@ -1167,3 +1177,6 @@ Kinetic.Node.prototype.isVisible = Kinetic.Node.prototype.getVisible;
* @name getOffset
* @methodOf Kinetic.Node.prototype
*/
return Node;
})();

19
src/Shape.js
View File

@@ -1,6 +1,6 @@
Kinetic.Shape = (function() {
// variable cache
var ATTRS, TYPE = Kinetic.Type;
var TYPE = Kinetic.Type;
/**
* Shape constructor. Shapes are primitive objects such as rectangles,
@@ -83,7 +83,6 @@ Kinetic.Shape = (function() {
// call super constructor
Kinetic.Node.call(this, config);
ATTRS = this.attrs;
},
/**
* get canvas context tied to the layer
@@ -120,7 +119,7 @@ Kinetic.Shape = (function() {
var appliedShadow = false;
context.save();
if(ATTRS.shadow && !this.appliedShadow) {
if(this.attrs.shadow && !this.appliedShadow) {
appliedShadow = this._applyShadow(context);
}
@@ -181,7 +180,7 @@ Kinetic.Shape = (function() {
var appliedShadow = false, fill = this.getFill(), fillType = this._getFillType(fill);
if(fill) {
context.save();
if(ATTRS.shadow && !this.appliedShadow) {
if(this.attrs.shadow && !this.appliedShadow) {
appliedShadow = this._applyShadow(context);
}
@@ -260,7 +259,7 @@ Kinetic.Shape = (function() {
var a = Array.prototype.slice.call(arguments);
if(a.length === 6 || a.length === 10) {
if(ATTRS.shadow && !this.appliedShadow) {
if(this.attrs.shadow && !this.appliedShadow) {
appliedShadow = this._applyShadow(context);
}
@@ -291,8 +290,8 @@ Kinetic.Shape = (function() {
* @methodOf Kinetic.Shape.prototype
*/
applyLineJoin: function(context) {
if(ATTRS.lineJoin) {
context.lineJoin = ATTRS.lineJoin;
if(this.attrs.lineJoin) {
context.lineJoin = this.attrs.lineJoin;
}
},
/**
@@ -302,8 +301,8 @@ Kinetic.Shape = (function() {
* @methodOf Kinetic.Shape.prototype
*/
applyLineCap: function(context) {
if(ATTRS.lineCap) {
context.lineCap = ATTRS.lineCap;
if(this.attrs.lineCap) {
context.lineCap = this.attrs.lineCap;
}
},
/**
@@ -381,7 +380,7 @@ Kinetic.Shape = (function() {
* and false if it was not
*/
_applyShadow: function(context) {
var s = ATTRS.shadow;
var s = this.attrs.shadow;
if(s) {
var aa = this.getAbsoluteOpacity();
// defaults