From 69f9374c8edec133f1e67b1df2722a1100774686 Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Fri, 15 Mar 2013 08:33:05 -0700 Subject: [PATCH] first pass at removing setDefaultAttrs logic to speed up node instantation performance --- src/Container.js | 2 +- src/DragAndDrop.js | 33 ++--- src/Group.js | 2 +- src/Layer.js | 16 ++- src/Node.js | 210 +++++++++++++----------------- src/Shape.js | 46 +++++-- src/Stage.js | 33 ++--- src/plugins/RegularPolygon.js | 8 +- src/plugins/Star.js | 10 +- src/plugins/TextPath.js | 19 +-- src/shapes/Circle.js | 9 +- src/shapes/Ellipse.js | 9 +- src/shapes/Image.js | 4 +- src/shapes/Line.js | 7 +- src/shapes/Path.js | 2 +- src/shapes/Polygon.js | 6 +- src/shapes/Rect.js | 19 ++- src/shapes/Spline.js | 7 +- src/shapes/Sprite.js | 10 +- src/shapes/Text.js | 39 +++--- src/shapes/Wedge.js | 10 +- tests/js/performanceTests.js | 34 +---- tests/js/unit/containerTests.js | 2 + tests/js/unit/ddTests.js | 4 +- tests/js/unit/nodeTests.js | 5 +- tests/js/unit/shapeTests.js | 2 +- tests/js/unit/shapes/textTests.js | 4 + tests/js/unit/stageTests.js | 31 ----- 28 files changed, 250 insertions(+), 333 deletions(-) diff --git a/src/Container.js b/src/Container.js index 9d38f575..5640dab7 100644 --- a/src/Container.js +++ b/src/Container.js @@ -242,7 +242,7 @@ Kinetic.Global.extend(Kinetic.Container, Kinetic.Node); // add getters setters - Kinetic.Node.addGettersSetters(Kinetic.Container, ['clipFunc']); + Kinetic.Node.addGetterSetter(Kinetic.Container, 'clipFunc'); /** * set clipping function diff --git a/src/DragAndDrop.js b/src/DragAndDrop.js index 55fde0df..777f468d 100644 --- a/src/DragAndDrop.js +++ b/src/DragAndDrop.js @@ -148,14 +148,7 @@ this.setAttr('draggable', draggable); this._dragChange(); }; - /** - * get draggable - * @name getDraggable - * @methodOf Kinetic.Node.prototype - */ - Kinetic.Node.prototype.getDraggable = function() { - return this.attrs.draggable; - }; + /** * determine if node is currently in drag and drop mode * @name isDragging @@ -200,14 +193,11 @@ this.off('mousedown.kinetic'); this.off('touchstart.kinetic'); }; - /** - * get draggable. Alias of getDraggable() - * @name isDraggable - * @methodOf Kinetic.Node.prototype - */ - Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable; - Kinetic.Node.addGettersSetters(Kinetic.Node, ['dragBoundFunc', 'dragOnTop']); + Kinetic.Node.addGetterSetter(Kinetic.Node, 'dragBoundFunc'); + Kinetic.Node.addGetterSetter(Kinetic.Node, 'dragOnTop', true); + + Kinetic.Node.addGetter(Kinetic.Node, 'draggable', false); /** * set drag bound function. This is used to override the default @@ -237,7 +227,20 @@ * @name getDragOnTop * @methodOf Kinetic.Node.prototype */ + + /** + * get draggable + * @name getDraggable + * @methodOf Kinetic.Node.prototype + */ + /** + * get draggable. Alias of getDraggable() + * @name isDraggable + * @methodOf Kinetic.Node.prototype + */ + Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable; + // listen for capturing phase so that the _endDrag method is // called before the stage mouseup event is triggered in order // to render the hit graph just in time to pick up the event diff --git a/src/Group.js b/src/Group.js index 35427e00..ce16c0eb 100644 --- a/src/Group.js +++ b/src/Group.js @@ -14,7 +14,7 @@ Kinetic.Group.prototype = { _initGroup: function(config) { this.nodeType = 'Group'; - + this.createAttrs(); // call super constructor Kinetic.Container.call(this, config); } diff --git a/src/Layer.js b/src/Layer.js index 4617a551..f7029a50 100644 --- a/src/Layer.js +++ b/src/Layer.js @@ -16,10 +16,6 @@ Kinetic.Layer.prototype = { _initLayer: function(config) { - this.setDefaultAttrs({ - clearBeforeDraw: true - }); - this.nodeType = 'Layer'; this.beforeDrawFunc = undefined; this.afterDrawFunc = undefined; @@ -27,6 +23,7 @@ this.canvas.getElement().style.position = 'absolute'; this.hitCanvas = new Kinetic.HitCanvas(); + this.createAttrs(); // call super constructor Kinetic.Container.call(this, config); }, @@ -70,14 +67,18 @@ */ drawScene: function(canvas) { canvas = canvas || this.getCanvas(); - if(this.attrs.clearBeforeDraw) { + if(this.getClearBeforeDraw()) { canvas.clear(); } Kinetic.Container.prototype.drawScene.call(this, canvas); }, toDataURL: function(config) { config = config || {}; - var mimeType = config.mimeType || null, quality = config.quality || null, canvas, context, x = config.x || 0, y = config.y || 0; + var mimeType = config.mimeType || null, + quality = config.quality || null, + canvas, context, + x = config.x || 0, + y = config.y || 0; // if dimension or position is defined, use Node toDataURL if(config.width || config.height || config.x || config.y) { @@ -87,6 +88,7 @@ else { return this.getCanvas().toDataURL(mimeType, quality); } + }, /** * set before draw handler @@ -217,7 +219,7 @@ Kinetic.Global.extend(Kinetic.Layer, Kinetic.Container); // add getters and setters - Kinetic.Node.addGettersSetters(Kinetic.Layer, ['clearBeforeDraw']); + Kinetic.Node.addGetterSetter(Kinetic.Layer, 'clearBeforeDraw', true); /** * set flag which determines if the layer is cleared or not diff --git a/src/Node.js b/src/Node.js index 2aa93cb4..d125c58c 100644 --- a/src/Node.js +++ b/src/Node.js @@ -13,28 +13,6 @@ Kinetic.Node.prototype = { _nodeInit: function(config) { this._id = Kinetic.Global.idCounter++; - - this.defaultNodeAttrs = { - visible: true, - listening: true, - name: undefined, - opacity: 1, - x: 0, - y: 0, - scale: { - x: 1, - y: 1 - }, - rotation: 0, - offset: { - x: 0, - y: 0 - }, - draggable: false, - dragOnTop: true - }; - - this.setDefaultAttrs(this.defaultNodeAttrs); this.eventListeners = {}; this.setAttrs(config); }, @@ -91,7 +69,6 @@ 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; var parts = event.split('.'); var baseEvent = parts[0]; @@ -155,42 +132,33 @@ this.remove(); }, + /** + * get attr + * @name getAttr + * @methodOf Kinetic.Node.prototype + */ + getAttr: function(attr) { + var method = 'get' + attr.charAt(0).toUpperCase() + attr.slice(1); + return method(); + }, /** * get attrs * @name getAttrs * @methodOf Kinetic.Node.prototype */ getAttrs: function() { - return this.attrs; + return this.attrs || {}; }, /** - * set default attrs. This method should only be used if - * you're creating a custom node - * @name setDefaultAttrs + * @name createAttrs * @methodOf Kinetic.Node.prototype - * @param {Object} confic */ - setDefaultAttrs: function(config) { - // create attrs object if undefined + createAttrs: function() { if(this.attrs === undefined) { this.attrs = {}; } - - if(config) { - for(var key in config) { - /* - * only set the attr if it's undefined in case - * a developer writes a custom class that extends - * a Kinetic Class such that their default property - * isn't overwritten by the Kinetic Class default - * property - */ - if(this.attrs[key] === undefined) { - this.attrs[key] = config[key]; - } - } - } }, + /** * set attrs * @name setAttrs @@ -220,7 +188,14 @@ * @methodOf Kinetic.Node.prototype */ getVisible: function() { - var visible = this.attrs.visible, parent = this.getParent(); + var visible = this.attrs.visible, + parent = this.getParent(); + + // default + if (visible === undefined) { + visible = true; + } + if(visible && parent && !parent.getVisible()) { return false; } @@ -234,7 +209,14 @@ * @methodOf Kinetic.Node.prototype */ getListening: function() { - var listening = this.attrs.listening, parent = this.getParent(); + var listening = this.attrs.listening, + parent = this.getParent(); + + // default + if (listening === undefined) { + listening = true; + } + if(listening && parent && !parent.getListening()) { return false; } @@ -262,7 +244,7 @@ * @methodOf Kinetic.Node.prototype */ getZIndex: function() { - return this.index; + return this.index || 0; }, /** * get absolute z-index which takes into account sibling @@ -335,10 +317,9 @@ * @methodOf Kinetic.Node.prototype */ getPosition: function() { - var attrs = this.attrs; return { - x: attrs.x, - y: attrs.y + x: this.getX(), + y: this.getY() }; }, /** @@ -630,14 +611,13 @@ */ getTransform: function() { var m = new Kinetic.Transform(), - attrs = this.attrs, - x = attrs.x, - y = attrs.y, - rotation = attrs.rotation, - scale = attrs.scale, + x = this.getX(), + y = this.getY(), + rotation = this.getRotation(), + scale = this.getScale(), scaleX = scale.x, scaleY = scale.y, - offset = attrs.offset, + offset = this.getOffset(), offsetX = offset.x, offsetY = offset.y; @@ -811,13 +791,12 @@ } }, _clearTransform: function() { - var attrs = this.attrs, - scale = attrs.scale, - offset = attrs.offset, + var scale = this.getScale(), + offset = this.getOffset(), trans = { - x: attrs.x, - y: attrs.y, - rotation: attrs.rotation, + x: this.getX(), + y: this.getY(), + rotation: this.getRotation(), scale: { x: scale.x, y: scale.y @@ -932,65 +911,37 @@ }; // add getter and setter methods - Kinetic.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.addGetterSetter = function(constructor, arr, def) { + this.addGetter(constructor, arr, def); + this.addSetter(constructor, arr); }; - Kinetic.Node.addPointSetters = function(constructor, arr) { - var len = arr.length; - for(var n = 0; n < len; n++) { - var attr = arr[n]; - this._addPointSetter(constructor, attr); - } + Kinetic.Node.addPointGetterSetter = function(constructor, arr, def) { + this.addGetter(constructor, arr, def); + this.addPointSetter(constructor, arr); }; - Kinetic.Node.addRotationSetters = function(constructor, arr) { - var len = arr.length; - for(var n = 0; n < len; n++) { - var attr = arr[n]; - this._addRotationSetter(constructor, attr); - } + Kinetic.Node.addRotationGetterSetter = function(constructor, arr, def) { + this.addRotationGetter(constructor, arr, def); + this.addRotationSetter(constructor, arr); }; - Kinetic.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.addRotationGetters = function(constructor, arr) { - var len = arr.length; - for(var n = 0; n < len; n++) { - var attr = arr[n]; - this._addRotationGetter(constructor, attr); - } - }; - Kinetic.Node.addGettersSetters = function(constructor, arr) { - this.addSetters(constructor, arr); - this.addGetters(constructor, arr); - }; - Kinetic.Node.addPointGettersSetters = function(constructor, arr) { - this.addPointSetters(constructor, arr); - this.addGetters(constructor, arr); - }; - Kinetic.Node.addRotationGettersSetters = function(constructor, arr) { - this.addRotationSetters(constructor, arr); - this.addRotationGetters(constructor, arr); - }; - Kinetic.Node._addSetter = function(constructor, attr) { + Kinetic.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._addPointSetter = function(constructor, attr) { + Kinetic.Node.addPointSetter = function(constructor, attr) { var that = this; var method = 'set' + attr.charAt(0).toUpperCase() + attr.slice(1); constructor.prototype[method] = function() { var pos = Kinetic.Type._getXY([].slice.call(arguments)); + + // default + if (!this.attrs[attr]) { + this.attrs[attr] = {x:1,y:1}; + } + if(pos && pos.x === undefined) { pos.x = this.attrs[attr].x; } @@ -1000,7 +951,7 @@ this.setAttr(attr, pos); }; }; - Kinetic.Node._addRotationSetter = function(constructor, attr) { + Kinetic.Node.addRotationSetter = function(constructor, attr) { var that = this; var method = 'set' + attr.charAt(0).toUpperCase() + attr.slice(1); // radians @@ -1012,23 +963,35 @@ this.setAttr(attr, Kinetic.Type._degToRad(deg)); }; }; - Kinetic.Node._addGetter = function(constructor, attr) { + Kinetic.Node.addGetter = function(constructor, attr, def) { var that = this; var method = 'get' + attr.charAt(0).toUpperCase() + attr.slice(1); constructor.prototype[method] = function(arg) { - return this.attrs[attr]; + var val = this.attrs[attr]; + if (val === undefined) { + val = def; + } + return val; }; }; - Kinetic.Node._addRotationGetter = function(constructor, attr) { + Kinetic.Node.addRotationGetter = function(constructor, attr, def) { var that = this; var method = 'get' + attr.charAt(0).toUpperCase() + attr.slice(1); // radians constructor.prototype[method] = function() { - return this.attrs[attr]; + var val = this.attrs[attr]; + if (val === undefined) { + val = def; + } + return val; }; // degrees constructor.prototype[method + 'Deg'] = function() { - return Kinetic.Type._radToDeg(this.attrs[attr]) + var val = this.attrs[attr]; + if (val === undefined) { + val = def; + } + return Kinetic.Type._radToDeg(val); }; }; /** @@ -1081,7 +1044,9 @@ return no; }; // add getters setters - Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'opacity']); + Kinetic.Node.addGetterSetter(Kinetic.Node, 'x', 0); + Kinetic.Node.addGetterSetter(Kinetic.Node, 'y', 0); + Kinetic.Node.addGetterSetter(Kinetic.Node, 'opacity', 1); /** * set x position @@ -1124,7 +1089,8 @@ * @methodOf Kinetic.Node.prototype */ - Kinetic.Node.addGetters(Kinetic.Node, ['name', 'id']); + Kinetic.Node.addGetter(Kinetic.Node, 'name'); + Kinetic.Node.addGetter(Kinetic.Node, 'id'); /** * get name @@ -1138,7 +1104,7 @@ * @methodOf Kinetic.Node.prototype */ - Kinetic.Node.addRotationGettersSetters(Kinetic.Node, ['rotation']); + Kinetic.Node.addRotationGetterSetter(Kinetic.Node, 'rotation', 0); /** * set rotation in radians @@ -1166,7 +1132,8 @@ * @methodOf Kinetic.Node.prototype */ - Kinetic.Node.addPointGettersSetters(Kinetic.Node, ['scale', 'offset']); + Kinetic.Node.addPointGetterSetter(Kinetic.Node, 'scale', {x:1,y:1}); + Kinetic.Node.addPointGetterSetter(Kinetic.Node, 'offset', {x:0,y:0}); /** * set scale @@ -1196,7 +1163,10 @@ * @methodOf Kinetic.Node.prototype */ - Kinetic.Node.addSetters(Kinetic.Node, ['width', 'height', 'listening', 'visible']); + Kinetic.Node.addSetter(Kinetic.Node, 'width'); + Kinetic.Node.addSetter(Kinetic.Node, 'height'); + Kinetic.Node.addSetter(Kinetic.Node, 'listening'); + Kinetic.Node.addSetter(Kinetic.Node, 'visible'); /** * set width diff --git a/src/Shape.js b/src/Shape.js index 55053fe6..6dbfde3b 100644 --- a/src/Shape.js +++ b/src/Shape.js @@ -26,15 +26,6 @@ Kinetic.Shape.prototype = { _initShape: function(config) { - this.setDefaultAttrs({ - fillEnabled: true, - strokeEnabled: true, - shadowEnabled: true, - dashArrayEnabled: true, - fillPriority: 'color', - strokeScaleEnabled: true - }); - this.nodeType = 'Shape'; this._fillFunc = _fillFunc; this._strokeFunc = _strokeFunc; @@ -55,6 +46,7 @@ this.colorKey = key; shapes[key] = this; + this.createAttrs(); // call super constructor Kinetic.Node.call(this, config); }, @@ -211,7 +203,31 @@ Kinetic.Global.extend(Kinetic.Shape, Kinetic.Node); // add getters and setters - Kinetic.Node.addGettersSetters(Kinetic.Shape, ['stroke', 'lineJoin', 'lineCap', 'strokeWidth', 'drawFunc', 'drawHitFunc', 'dashArray', 'shadowColor', 'shadowBlur', 'shadowOpacity', 'fillPatternImage', 'fill', 'fillPatternX', 'fillPatternY', 'fillLinearGradientColorStops', 'fillRadialGradientStartRadius', 'fillRadialGradientEndRadius', 'fillRadialGradientColorStops', 'fillPatternRepeat', 'fillEnabled', 'strokeEnabled', 'shadowEnabled', 'dashArrayEnabled', 'fillPriority', 'strokeScaleEnabled']); + Kinetic.Node.addGetterSetter(Kinetic.Shape, 'stroke'); + Kinetic.Node.addGetterSetter(Kinetic.Shape, 'lineJoin'); + Kinetic.Node.addGetterSetter(Kinetic.Shape, 'lineCap'); + Kinetic.Node.addGetterSetter(Kinetic.Shape, 'strokeWidth'); + Kinetic.Node.addGetterSetter(Kinetic.Shape, 'drawFunc'); + Kinetic.Node.addGetterSetter(Kinetic.Shape, 'drawHitFunc'); + Kinetic.Node.addGetterSetter(Kinetic.Shape, 'dashArray'); + Kinetic.Node.addGetterSetter(Kinetic.Shape, 'shadowColor'); + Kinetic.Node.addGetterSetter(Kinetic.Shape, 'shadowBlur'); + Kinetic.Node.addGetterSetter(Kinetic.Shape, 'shadowOpacity'); + Kinetic.Node.addGetterSetter(Kinetic.Shape, 'fillPatternImage'); + Kinetic.Node.addGetterSetter(Kinetic.Shape, 'fill'); + Kinetic.Node.addGetterSetter(Kinetic.Shape, 'fillPatternX'); + Kinetic.Node.addGetterSetter(Kinetic.Shape, 'fillPatternY'); + Kinetic.Node.addGetterSetter(Kinetic.Shape, 'fillLinearGradientColorStops'); + Kinetic.Node.addGetterSetter(Kinetic.Shape, 'fillRadialGradientStartRadius'); + Kinetic.Node.addGetterSetter(Kinetic.Shape, 'fillRadialGradientEndRadius'); + Kinetic.Node.addGetterSetter(Kinetic.Shape, 'fillRadialGradientColorStops'); + Kinetic.Node.addGetterSetter(Kinetic.Shape, 'fillPatternRepeat'); + Kinetic.Node.addGetterSetter(Kinetic.Shape, 'fillEnabled', true); + Kinetic.Node.addGetterSetter(Kinetic.Shape, 'strokeEnabled', true); + Kinetic.Node.addGetterSetter(Kinetic.Shape, 'shadowEnabled', true); + Kinetic.Node.addGetterSetter(Kinetic.Shape, 'dashArrayEnabled', true); + Kinetic.Node.addGetterSetter(Kinetic.Shape, 'fillPriority', 'color'); + Kinetic.Node.addGetterSetter(Kinetic.Shape, 'strokeScaleEnabled', true); /** * set stroke color @@ -482,7 +498,13 @@ * @methodOf Kinetic.Shape.prototype */ - Kinetic.Node.addPointGettersSetters(Kinetic.Shape, ['fillPatternOffset', 'fillPatternScale', 'fillLinearGradientStartPoint', 'fillLinearGradientEndPoint', 'fillRadialGradientStartPoint', 'fillRadialGradientEndPoint', 'shadowOffset']); + Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'fillPatternOffset'); + Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'fillPatternScale'); + Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'fillLinearGradientStartPoint'); + Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'fillLinearGradientEndPoint'); + Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'fillRadialGradientStartPoint'); + Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'fillRadialGradientEndPoint'); + Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'shadowOffset'); /** * set fill pattern offset @@ -575,7 +597,7 @@ * @methodOf Kinetic.Shape.prototype */ - Kinetic.Node.addRotationGettersSetters(Kinetic.Shape, ['fillPatternRotation']); + Kinetic.Node.addRotationGetterSetter(Kinetic.Shape, 'fillPatternRotation', 0); /** * set fill pattern rotation in radians diff --git a/src/Stage.js b/src/Stage.js index cf2b1ce1..e33d4bb6 100644 --- a/src/Stage.js +++ b/src/Stage.js @@ -14,15 +14,11 @@ Kinetic.Stage.prototype = { _initStage: function(config) { - var dd = Kinetic.DD; - this.setDefaultAttrs({ - width: 400, - height: 200 - }); - + var dd = Kinetic.DD; + + this.createAttrs(); // call super constructor Kinetic.Container.call(this, config); - this._setStageDefaultProperties(); this._id = Kinetic.Global.idCounter++; this._buildDOM(); @@ -103,19 +99,6 @@ this.attrs.container.removeChild(content); } }, - /** - * reset stage to default state - * @name reset - * @methodOf Kinetic.Stage.prototype - */ - reset: function() { - // remove children - this.removeChildren(); - - // defaults - this._setStageDefaultProperties(); - this.setAttrs(this.defaultNodeAttrs); - }, /** * get mouse position for desktop apps * @name getMousePosition @@ -170,7 +153,13 @@ */ toDataURL: function(config) { config = config || {}; - var mimeType = config.mimeType || null, quality = config.quality || null, x = config.x || 0, y = config.y || 0, canvas = new Kinetic.SceneCanvas(config.width || this.getWidth(), config.height || this.getHeight()), context = canvas.getContext(), layers = this.children; + var mimeType = config.mimeType || null, + quality = config.quality || null, + x = config.x || 0, + y = config.y || 0, + canvas = new Kinetic.SceneCanvas(config.width || this.getWidth(), config.height || this.getHeight()), + context = canvas.getContext(), + layers = this.children; if(x || y) { context.translate(-1 * x, -1 * y); @@ -568,7 +557,7 @@ Kinetic.Global.extend(Kinetic.Stage, Kinetic.Container); // add getters and setters - Kinetic.Node.addGetters(Kinetic.Stage, ['container']); + Kinetic.Node.addGetter(Kinetic.Stage, 'container'); /** * get container DOM element diff --git a/src/plugins/RegularPolygon.js b/src/plugins/RegularPolygon.js index ec922dd2..0f1584b1 100644 --- a/src/plugins/RegularPolygon.js +++ b/src/plugins/RegularPolygon.js @@ -15,10 +15,7 @@ Kinetic.Plugins.RegularPolygon.prototype = { _initRegularPolygon: function(config) { - this.setDefaultAttrs({ - radius: 0, - sides: 0 - }); + this.createAttrs(); // call super constructor Kinetic.Shape.call(this, config); @@ -42,7 +39,8 @@ Kinetic.Global.extend(Kinetic.Plugins.RegularPolygon, Kinetic.Shape); // add getters setters - Kinetic.Node.addGettersSetters(Kinetic.Plugins.RegularPolygon, ['radius', 'sides']); + Kinetic.Node.addGetterSetter(Kinetic.Plugins.RegularPolygon, 'radius', 0); + Kinetic.Node.addGetterSetter(Kinetic.Plugins.RegularPolygon, 'sides', 0); /** * set radius diff --git a/src/plugins/Star.js b/src/plugins/Star.js index 176da3ca..937b1a83 100644 --- a/src/plugins/Star.js +++ b/src/plugins/Star.js @@ -16,11 +16,7 @@ Kinetic.Plugins.Star.prototype = { _initStar: function(config) { - this.setDefaultAttrs({ - numPoints: 0, - innerRadius: 0, - outerRadius: 0 - }); + this.createAttrs(); // call super constructor Kinetic.Shape.call(this, config); @@ -47,7 +43,9 @@ Kinetic.Global.extend(Kinetic.Plugins.Star, Kinetic.Shape); // add getters setters - Kinetic.Node.addGettersSetters(Kinetic.Plugins.Star, ['numPoints', 'innerRadius', 'outerRadius']); + Kinetic.Node.addGetterSetter(Kinetic.Plugins.Star, 'numPoints', 0); + Kinetic.Node.addGetterSetter(Kinetic.Plugins.Star, 'innerRadius', 0); + Kinetic.Node.addGetterSetter(Kinetic.Plugins.Star, 'outerRadius', 0); /** * set number of points diff --git a/src/plugins/TextPath.js b/src/plugins/TextPath.js index 1f2e7a15..646d079c 100644 --- a/src/plugins/TextPath.js +++ b/src/plugins/TextPath.js @@ -1,4 +1,8 @@ (function() { + var EMPTY_STRING = '', + CALIBRI = 'Calibri', + NORMAL = 'normal'; + /** * Path constructor. * @author Jason Follas @@ -25,13 +29,7 @@ Kinetic.Plugins.TextPath.prototype = { _initTextPath: function(config) { - this.setDefaultAttrs({ - fontFamily: 'Calibri', - fontSize: 12, - fontStyle: 'normal', - text: '' - }); - + this.createAttrs(); this.dummyCanvas = document.createElement('canvas'); this.dataArray = []; var that = this; @@ -307,8 +305,11 @@ Kinetic.Global.extend(Kinetic.Plugins.TextPath, Kinetic.Shape); // add setters and getters - Kinetic.Node.addGettersSetters(Kinetic.Plugins.TextPath, ['fontFamily', 'fontSize', 'fontStyle']); - Kinetic.Node.addGetters(Kinetic.Plugins.TextPath, ['text']); + Kinetic.Node.addGetterSetter(Kinetic.Plugins.TextPath, 'fontFamily', CALIBRI); + Kinetic.Node.addGetterSetter(Kinetic.Plugins.TextPath, 'fontSize', 12); + Kinetic.Node.addGetterSetter(Kinetic.Plugins.TextPath, 'fontStyle', NORMAL); + + Kinetic.Node.addGetter(Kinetic.Plugins.TextPath, 'text', EMPTY_STRING); /** * set font family diff --git a/src/shapes/Circle.js b/src/shapes/Circle.js index 75fc217c..a8f90875 100644 --- a/src/shapes/Circle.js +++ b/src/shapes/Circle.js @@ -14,17 +14,14 @@ Kinetic.Circle.prototype = { _initCircle: function(config) { - this.setDefaultAttrs({ - radius: 0 - }); - + this.createAttrs(); // call super constructor Kinetic.Shape.call(this, config); this.shapeType = 'Circle'; this._setDrawFuncs(); }, drawFunc: function(canvas) { - var context = canvas.getContext(); + var context = canvas.getContext(); context.beginPath(); context.arc(0, 0, this.getRadius(), 0, Math.PI * 2, true); context.closePath(); @@ -48,7 +45,7 @@ Kinetic.Global.extend(Kinetic.Circle, Kinetic.Shape); // add getters setters - Kinetic.Node.addGettersSetters(Kinetic.Circle, ['radius']); + Kinetic.Node.addGetterSetter(Kinetic.Circle, 'radius', 0); /** * set radius diff --git a/src/shapes/Ellipse.js b/src/shapes/Ellipse.js index 8e830b25..d2455734 100644 --- a/src/shapes/Ellipse.js +++ b/src/shapes/Ellipse.js @@ -14,12 +14,7 @@ Kinetic.Ellipse.prototype = { _initEllipse: function(config) { - this.setDefaultAttrs({ - radius: { - x: 0, - y: 0 - } - }); + this.createAttrs(); // call super constructor Kinetic.Shape.call(this, config); @@ -60,7 +55,7 @@ Kinetic.Global.extend(Kinetic.Ellipse, Kinetic.Shape); // add getters setters - Kinetic.Node.addPointGettersSetters(Kinetic.Ellipse, ['radius']); + Kinetic.Node.addPointGetterSetter(Kinetic.Ellipse, 'radius', {x:0,y:0}); /** * set radius diff --git a/src/shapes/Image.js b/src/shapes/Image.js index bf9690b7..7172dbbe 100644 --- a/src/shapes/Image.js +++ b/src/shapes/Image.js @@ -191,8 +191,8 @@ Kinetic.Global.extend(Kinetic.Image, Kinetic.Shape); // add getters setters - Kinetic.Node.addGettersSetters(Kinetic.Image, ['image']); - Kinetic.Node.addGetters(Kinetic.Image, ['crop']); + Kinetic.Node.addGetterSetter(Kinetic.Image, 'image'); + Kinetic.Node.addGetter(Kinetic.Image, 'crop'); /** * set image diff --git a/src/shapes/Line.js b/src/shapes/Line.js index ceb5bc86..0720a47f 100644 --- a/src/shapes/Line.js +++ b/src/shapes/Line.js @@ -15,10 +15,7 @@ Kinetic.Line.prototype = { _initLine: function(config) { - this.setDefaultAttrs({ - points: [], - lineCap: 'butt' - }); + this.createAttrs(); // call super constructor Kinetic.Shape.call(this, config); @@ -51,7 +48,7 @@ Kinetic.Global.extend(Kinetic.Line, Kinetic.Shape); // add getters setters - Kinetic.Node.addGetters(Kinetic.Line, ['points']); + Kinetic.Node.addGetter(Kinetic.Line, 'points', []); /** * get points array diff --git a/src/shapes/Path.js b/src/shapes/Path.js index 17a3f6bc..a895a6fc 100644 --- a/src/shapes/Path.js +++ b/src/shapes/Path.js @@ -543,7 +543,7 @@ return [cx, cy, rx, ry, theta, dTheta, psi, fs]; }; // add getters setters - Kinetic.Node.addGettersSetters(Kinetic.Path, ['data']); + Kinetic.Node.addGetterSetter(Kinetic.Path, 'data'); /** * set SVG path data string. This method diff --git a/src/shapes/Polygon.js b/src/shapes/Polygon.js index a6c0f54c..e541d58d 100644 --- a/src/shapes/Polygon.js +++ b/src/shapes/Polygon.js @@ -15,9 +15,7 @@ Kinetic.Polygon.prototype = { _initPolygon: function(config) { - this.setDefaultAttrs({ - points: [] - }); + this.createAttrs(); // call super constructor Kinetic.Shape.call(this, config); @@ -48,7 +46,7 @@ Kinetic.Global.extend(Kinetic.Polygon, Kinetic.Shape); // add getters setters - Kinetic.Node.addGetters(Kinetic.Polygon, ['points']); + Kinetic.Node.addGetter(Kinetic.Polygon, 'points', []); /** * get points array diff --git a/src/shapes/Rect.js b/src/shapes/Rect.js index bba77ccd..4fd6c8d1 100644 --- a/src/shapes/Rect.js +++ b/src/shapes/Rect.js @@ -14,21 +14,20 @@ Kinetic.Rect.prototype = { _initRect: function(config) { - this.setDefaultAttrs({ - width: 0, - height: 0, - cornerRadius: 0 - }); - + this.createAttrs(); Kinetic.Shape.call(this, config); this.shapeType = 'Rect'; this._setDrawFuncs(); }, drawFunc: function(canvas) { - var context = canvas.getContext(); + var context = canvas.getContext(), + cornerRadius = this.getCornerRadius(), + width = this.getWidth(), + height = this.getHeight(); + context.beginPath(); - var cornerRadius = this.getCornerRadius(), width = this.getWidth(), height = this.getHeight(); - if(cornerRadius === 0) { + + if(!cornerRadius) { // simple rect - don't bother doing all that complicated maths stuff. context.rect(0, 0, width, height); } @@ -51,7 +50,7 @@ Kinetic.Global.extend(Kinetic.Rect, Kinetic.Shape); - Kinetic.Node.addGettersSetters(Kinetic.Rect, ['cornerRadius']); + Kinetic.Node.addGetterSetter(Kinetic.Rect, 'cornerRadius', 0); /** * set corner radius diff --git a/src/shapes/Spline.js b/src/shapes/Spline.js index 294e3952..bdfa0c99 100644 --- a/src/shapes/Spline.js +++ b/src/shapes/Spline.js @@ -40,10 +40,7 @@ Kinetic.Spline.prototype = { _initSpline: function(config) { - this.setDefaultAttrs({ - tension: 1 - }); - + this.createAttrs(); // call super constructor Kinetic.Line.call(this, config); this.shapeType = 'Spline'; @@ -106,7 +103,7 @@ Kinetic.Global.extend(Kinetic.Spline, Kinetic.Line); // add getters setters - Kinetic.Node.addGetters(Kinetic.Spline, ['tension']); + Kinetic.Node.addGetter(Kinetic.Spline, 'tension', 1); /** * get tension diff --git a/src/shapes/Sprite.js b/src/shapes/Sprite.js index aae9a729..73f7148f 100644 --- a/src/shapes/Sprite.js +++ b/src/shapes/Sprite.js @@ -16,10 +16,7 @@ Kinetic.Sprite.prototype = { _initSprite: function(config) { - this.setDefaultAttrs({ - index: 0, - frameRate: 17 - }); + this.createAttrs(); // call super constructor Kinetic.Shape.call(this, config); @@ -111,7 +108,10 @@ Kinetic.Global.extend(Kinetic.Sprite, Kinetic.Shape); // add getters setters - Kinetic.Node.addGettersSetters(Kinetic.Sprite, ['animation', 'animations', 'index']); + Kinetic.Node.addGetterSetter(Kinetic.Sprite, 'animation'); + Kinetic.Node.addGetterSetter(Kinetic.Sprite, 'animations'); + Kinetic.Node.addGetterSetter(Kinetic.Sprite, 'index', 0); + Kinetic.Node.addGetterSetter(Kinetic.Sprite, 'frameRate', 17); /** * set animation key diff --git a/src/shapes/Text.js b/src/shapes/Text.js index 22d246a4..6cdada40 100644 --- a/src/shapes/Text.js +++ b/src/shapes/Text.js @@ -53,24 +53,18 @@ Kinetic.Text.prototype = { _initText: function(config) { var that = this; - this.setDefaultAttrs({ - fontFamily: CALIBRI, - text: EMPTY_STRING, - fontSize: 12, - align: LEFT, - verticalAlign: TOP, - fontStyle: NORMAL, - padding: 0, - width: AUTO, - height: AUTO, - lineHeight: 1 - }); - this.dummyCanvas = document.createElement(CANVAS); - + this.createAttrs(); + + // since width and height work a bit different for Text, + // we need to default the values here + this.attrs.width = AUTO; + this.attrs.height = AUTO; + // call super constructor Kinetic.Shape.call(this, config); + this.shapeType = TEXT; this._fillFunc = _fillFunc; this._strokeFunc = _strokeFunc; this.shapeType = TEXT_UPPER; @@ -158,7 +152,7 @@ * @methodOf Kinetic.Text.prototype */ getHeight: function() { - return this.attrs.height === AUTO ? (this.getTextHeight() * this.textArr.length * this.attrs.lineHeight) + this.attrs.padding * 2 : this.attrs.height; + return this.attrs.height === AUTO ? (this.getTextHeight() * this.textArr.length * this.getLineHeight()) + this.attrs.padding * 2 : this.attrs.height; }, /** * get text width @@ -280,10 +274,19 @@ } }; Kinetic.Global.extend(Kinetic.Text, Kinetic.Shape); - + // add getters setters - Kinetic.Node.addGettersSetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'padding', 'align', 'lineHeight']); - Kinetic.Node.addGetters(Kinetic.Text, [TEXT]); + Kinetic.Node.addGetterSetter(Kinetic.Text, 'fontFamily', CALIBRI); + Kinetic.Node.addGetterSetter(Kinetic.Text, 'fontSize', 12); + Kinetic.Node.addGetterSetter(Kinetic.Text, 'fontStyle', NORMAL); + Kinetic.Node.addGetterSetter(Kinetic.Text, 'padding', 0); + Kinetic.Node.addGetterSetter(Kinetic.Text, 'align', LEFT); + Kinetic.Node.addGetterSetter(Kinetic.Text, 'lineHeight', 1); + + Kinetic.Node.addGetter(Kinetic.Text, TEXT, EMPTY_STRING); + + Kinetic.Node.addSetter(Kinetic.Text, 'width'); + Kinetic.Node.addSetter(Kinetic.Text, 'height'); /** * set font family * @name setFontFamily diff --git a/src/shapes/Wedge.js b/src/shapes/Wedge.js index ed42ff5f..5a1d4651 100644 --- a/src/shapes/Wedge.js +++ b/src/shapes/Wedge.js @@ -16,11 +16,7 @@ Kinetic.Wedge.prototype = { _initWedge: function(config) { - this.setDefaultAttrs({ - radius: 0, - angle: 0, - clockwise: false - }); + this.createAttrs(); // call super constructor Kinetic.Shape.call(this, config); @@ -56,7 +52,9 @@ Kinetic.Global.extend(Kinetic.Wedge, Kinetic.Shape); // add getters setters - Kinetic.Node.addGettersSetters(Kinetic.Wedge, ['radius', 'angle', 'clockwise']); + Kinetic.Node.addGetterSetter(Kinetic.Wedge, 'radius', 0); + Kinetic.Node.addGetterSetter(Kinetic.Wedge, 'angle', 0); + Kinetic.Node.addGetterSetter(Kinetic.Wedge, 'clockwise', false); /** * set radius diff --git a/tests/js/performanceTests.js b/tests/js/performanceTests.js index dac6daa7..5e206d3f 100644 --- a/tests/js/performanceTests.js +++ b/tests/js/performanceTests.js @@ -400,7 +400,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, @@ -408,7 +408,7 @@ Test.Modules.PERFORMANCE = { }); var circlesLayer = new Kinetic.Layer(); - var tooltipLayer = new Kinetic.Layer(); + var colors = ["red", "orange", "yellow", "green", "blue", "cyan", "purple"]; var colorIndex = 0; @@ -425,47 +425,19 @@ Test.Modules.PERFORMANCE = { var randX = Math.random() * stage.getWidth(); var randY = Math.random() * stage.getHeight(); - var circle = new Kinetic.Ellipse({ + var circle = new Kinetic.Circle({ x: randX, y: randY, radius: 2, fill: color }); - circle.on("mousemove", function() { - // update tooltip - console.log('mouseover') - var mousePos = stage.getMousePosition(); - tooltip.setPosition(mousePos.x + 5, mousePos.y + 5); - tooltip.setText("node: " + i + ", color: " + color); - tooltip.show(); - tooltipLayer.draw(); - }); - - circle.on("mouseout", function() { - tooltip.hide(); - tooltipLayer.draw(); - }); - circlesLayer.add(circle); }()); } - var tooltip = new Kinetic.Text({ - text: "", - fontFamily: "Calibri", - fontSize: 12, - padding: 5, - visible: false, - fill: "black", - alpha: 0.75, - textFill: "white" - }); - - tooltipLayer.add(tooltip); stage.add(circlesLayer); - stage.add(tooltipLayer); endTimer('drew 10,000 circles'); diff --git a/tests/js/unit/containerTests.js b/tests/js/unit/containerTests.js index 6d77bae5..0175e917 100644 --- a/tests/js/unit/containerTests.js +++ b/tests/js/unit/containerTests.js @@ -855,6 +855,8 @@ Test.Modules.CONTAINER = { stage.add(greenLayer); blueLayer.setZIndex(1); + + console.log(greenLayer.getZIndex()); test(greenLayer.getZIndex() === 0, 'green layer should have z index of 0'); test(blueLayer.getZIndex() === 1, 'blue layer should have z index of 1'); diff --git a/tests/js/unit/ddTests.js b/tests/js/unit/ddTests.js index 0f77ee35..a93c15e8 100644 --- a/tests/js/unit/ddTests.js +++ b/tests/js/unit/ddTests.js @@ -21,13 +21,13 @@ Test.Modules.DD = { layer.draw(); // test defaults - test(circle.attrs.draggable === false, 'draggable should be false'); + test(circle.isDraggable() === false, 'draggable should be false'); //change properties circle.setDraggable(true); // test new properties - test(circle.attrs.draggable === true, 'draggable should be true'); + test(circle.getDraggable() === true, 'draggable should be true'); }, 'DRAG AND DROP - multiple drag and drop sets with setDraggable()': function(containerId) { var stage = new Kinetic.Stage({ diff --git a/tests/js/unit/nodeTests.js b/tests/js/unit/nodeTests.js index cdee3e49..12145132 100644 --- a/tests/js/unit/nodeTests.js +++ b/tests/js/unit/nodeTests.js @@ -852,7 +852,7 @@ Test.Modules.NODE = { showHit(layer); }, - 'hide group': function(containerId) { + 'hide group 2': function(containerId) { var stage = new Kinetic.Stage({ container: containerId, width: 578, @@ -2611,6 +2611,9 @@ Test.Modules.NODE = { layer.hide(); layer.draw(); + + console.log(layer.toDataURL()); + test(layer.toDataURL() === dataUrls['cleared'], 'layer is still visible'); }, 'hide group': function(containerId) { diff --git a/tests/js/unit/shapeTests.js b/tests/js/unit/shapeTests.js index 00e97346..73a6dbae 100644 --- a/tests/js/unit/shapeTests.js +++ b/tests/js/unit/shapeTests.js @@ -561,7 +561,7 @@ Test.Modules.SHAPE = { test(circle.getDashArrayEnabled() === true, 'dashArrayEnabled should be true'); circle.disableFill(); - + test(circle.getFillEnabled() === false, 'fillEnabled should be false'); test(circle.getStrokeEnabled() === true, 'strokeEnabled should be true'); test(circle.getShadowEnabled() === true, 'shadowEnabled should be true'); diff --git a/tests/js/unit/shapes/textTests.js b/tests/js/unit/shapes/textTests.js index 482970c8..88bcc076 100644 --- a/tests/js/unit/shapes/textTests.js +++ b/tests/js/unit/shapes/textTests.js @@ -256,12 +256,16 @@ Test.Modules.Text = { var width = text.getWidth(); var height = text.getHeight(); + + layer.add(text); stage.add(layer); text.setFontSize(30); layer.draw(); + + //console.log(text.getHeight() + ',' + height); test(text.getWidth() > width, 'text box width should have increased.'); test(text.getHeight() > height, 'text box height should have increased.'); diff --git a/tests/js/unit/stageTests.js b/tests/js/unit/stageTests.js index 895a3a68..37b1a8fb 100644 --- a/tests/js/unit/stageTests.js +++ b/tests/js/unit/stageTests.js @@ -67,37 +67,6 @@ Test.Modules.STAGE = { test(layer.getCanvas().element.width === 333, 'layer canvas element width should be 333'); test(layer.getCanvas().element.height === 155, 'layer canvas element width should be 155'); }, - 'reset stage': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200, - x: 100 - }); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); - var circle = new Kinetic.Circle({ - x: stage.getWidth() / 2, - y: stage.getHeight() / 2, - radius: 70, - fill: 'green', - stroke: 'black', - strokeWidth: 4, - name: 'myCircle', - draggable: true - }); - - stage.add(layer); - layer.add(group); - group.add(circle); - layer.draw(); - - test(stage.getChildren().length === 1, 'stage should have one child'); - test(stage.getX() === 100, 'stage x should be 100'); - stage.reset(); - test(stage.getChildren().length === 0, 'stage should have no children'); - test(stage.getX() === 0, 'stage x should be 0'); - }, 'get stage DOM': function(containerId) { var stage = new Kinetic.Stage({ container: containerId,