diff --git a/src/Node.js b/src/Node.js index 0acbf1b1..8ebf7306 100644 --- a/src/Node.js +++ b/src/Node.js @@ -1,7 +1,4 @@ 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 @@ -223,7 +220,7 @@ Kinetic.Node = (function() { for(var key in config) { var method = 'set' + key.charAt(0).toUpperCase() + key.slice(1); // use setter if available - if(TYPE._isFunction(this[method])) { + if(Kinetic.Type._isFunction(this[method])) { this[method](config[key]); } // otherwise set directly @@ -342,7 +339,7 @@ Kinetic.Node = (function() { * @param {Number} y */ setPosition: function() { - var pos = TYPE._getXY([].slice.call(arguments)); + var pos = Kinetic.Type._getXY([].slice.call(arguments)); this.setAttr('x', pos.x); this.setAttr('y', pos.y); }, @@ -376,7 +373,7 @@ Kinetic.Node = (function() { * y property */ setAbsolutePosition: function() { - var pos = TYPE._getXY([].slice.call(arguments)); + var pos = Kinetic.Type._getXY([].slice.call(arguments)); var trans = this._clearTransform(); // don't clear translation this.attrs.x = trans.x; @@ -405,8 +402,7 @@ Kinetic.Node = (function() { * @param {Number} y */ move: function() { - var pos = TYPE._getXY([].slice.call(arguments)); - + var pos = Kinetic.Type._getXY([].slice.call(arguments)); var x = this.getX(); var y = this.getY(); @@ -558,6 +554,7 @@ Kinetic.Node = (function() { * @methodOf Kinetic.Node.prototype */ toObject: function() { + var type = Kinetic.Type; var obj = {}; obj.attrs = {}; @@ -565,7 +562,7 @@ Kinetic.Node = (function() { // 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) && kineticType._hasMethods(val))) { obj.attrs[key] = val; } } @@ -764,7 +761,7 @@ Kinetic.Node = (function() { * is very high quality */ toImage: function(config) { - TYPE._getImage(this.toDataURL(config), function(img) { + Kinetic.Type._getImage(this.toDataURL(config), function(img) { config.callback(img); }); }, @@ -776,7 +773,7 @@ Kinetic.Node = (function() { * @param {Number} y */ setOffset: function() { - var pos = TYPE._getXY([].slice.call(arguments)); + var pos = Kinetic.Type._getXY([].slice.call(arguments)); if(pos.x === undefined) { pos.x = this.getOffset().x; } @@ -793,7 +790,7 @@ Kinetic.Node = (function() { * @methodOf Kinetic.Node.prototype */ setScale: function() { - var pos = TYPE._getXY([].slice.call(arguments)); + var pos = Kinetic.Type._getXY([].slice.call(arguments)); if(pos.x === undefined) { pos.x = this.getScale().x; @@ -813,7 +810,7 @@ Kinetic.Node = (function() { */ setSize: function() { // set stage dimensions - var size = TYPE._getSize(Array.prototype.slice.call(arguments)); + var size = Kinetic.Type._getSize(Array.prototype.slice.call(arguments)); this.setWidth(size.width); this.setHeight(size.height); }, diff --git a/src/Shape.js b/src/Shape.js index 347c3bf5..475c746c 100644 --- a/src/Shape.js +++ b/src/Shape.js @@ -1,7 +1,4 @@ Kinetic.Shape = (function() { - // variable cache - var TYPE = Kinetic.Type; - /** * Shape constructor. Shapes are primitive objects such as rectangles, * circles, text, lines, etc. @@ -73,7 +70,7 @@ Kinetic.Shape = (function() { var shapes = Kinetic.Global.shapes; var key; while(true) { - key = TYPE._getRandomColorKey(); + key = Kinetic.Type._getRandomColorKey(); if(key && !( key in shapes)) { break; } @@ -144,10 +141,11 @@ Kinetic.Shape = (function() { } }, _getFillType: function(fill) { + var type = Kinetic.Type; if(!fill) { return undefined; } - else if(TYPE._isString(fill)) { + else if(type._isString(fill)) { return 'COLOR'; } else if(fill.image) { @@ -156,7 +154,7 @@ Kinetic.Shape = (function() { else if(fill.start && fill.end && !fill.start.radius && !fill.end.radius) { return 'LINEAR_GRADIENT'; } - else if(fill.start && fill.end && TYPE._isNumber(fill.start.radius) && TYPE._isNumber(fill.end.radius)) { + else if(fill.start && fill.end && type._isNumber(fill.start.radius) && type._isNumber(fill.end.radius)) { return 'RADIAL_GRADIENT'; } else { @@ -316,10 +314,11 @@ Kinetic.Shape = (function() { * @param {Number} config.opacity */ setShadow: function(config) { + var type = Kinetic.Type; if(config.offset !== undefined) { - config.offset = TYPE._getXY(config.offset); + config.offset = type._getXY(config.offset); } - this.setAttr('shadow', TYPE._merge(config, this.getShadow())); + this.setAttr('shadow', type._merge(config, this.getShadow())); }, /** * set fill which can be a color, linear gradient object, @@ -329,6 +328,7 @@ Kinetic.Shape = (function() { * @param {String|Object} fill */ setFill: function(fill) { + var type = Kinetic.Type; var oldFill = this.getFill(); var fillType = this._getFillType(fill); var oldFillType = this._getFillType(oldFill); @@ -337,7 +337,7 @@ Kinetic.Shape = (function() { // if fill.offset is defined, normalize the xy value if(fill.offset !== undefined) { - fill.offset = TYPE._getXY(fill.offset); + fill.offset = type._getXY(fill.offset); } /* @@ -346,7 +346,7 @@ Kinetic.Shape = (function() { * overwrite the fill entirely */ if(!newOrOldFillIsColor && changedFillType) { - fill = TYPE._merge(fill, oldFill); + fill = type._merge(fill, oldFill); } this.setAttr('fill', fill); @@ -357,7 +357,7 @@ Kinetic.Shape = (function() { * @methodOf Kinetic.Shape.prototype */ setSize: function() { - var size = TYPE._getSize(Array.prototype.slice.call(arguments)); + var size = Kinetic.Type._getSize(Array.prototype.slice.call(arguments)); this.setWidth(size.width); this.setHeight(size.height); }, @@ -412,7 +412,7 @@ Kinetic.Shape = (function() { * element is the y component */ intersects: function() { - var pos = TYPE._getXY(Array.prototype.slice.call(arguments)); + var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments)); var stage = this.getStage(); var bufferCanvas = stage.bufferCanvas; bufferCanvas.clear(); diff --git a/tests/js/performanceTests.js b/tests/js/performanceTests.js index 0db4a3f3..c49e3c5a 100644 --- a/tests/js/performanceTests.js +++ b/tests/js/performanceTests.js @@ -67,7 +67,7 @@ Test.Modules.PERFORMANCE = { anim.start(); }, 4000); }, - 'DRAWING - draw 10,000 small circles with tooltips': function(containerId) { + '*DRAWING - draw 10,000 small circles with tooltips': function(containerId) { var stage = new Kinetic.Stage({ container: containerId, width: 578, @@ -79,6 +79,7 @@ Test.Modules.PERFORMANCE = { var colors = ["red", "orange", "yellow", "green", "blue", "cyan", "purple"]; var colorIndex = 0; + startTimer(); for(var n = 0; n < 10000; n++) { // induce scope ( function() { @@ -134,7 +135,9 @@ Test.Modules.PERFORMANCE = { stage.add(circlesLayer); stage.add(tooltipLayer); - document.body.appendChild(circlesLayer.bufferCanvas.element) + endTimer('drew 10,000 circles'); + + //document.body.appendChild(circlesLayer.bufferCanvas.element) }, 'DRAWING - draw rect vs image from image data': function(containerId) {