introduced new setDefaultAttrs() method which greatly simplifies the logic required inside node constructors. This will also make plugin creation much easier

dist/kinetic-core.js

@@ -178,31 +178,28 @@ window.requestAnimFrame = (function(callback) {
  * @param {Object} config
  */
 Kinetic.Node = function(config) {
-    // default attrs
+    this.setDefaultAttrs({
-    if(this.attrs === undefined) {
+        visible: true,
-        this.attrs = {};
+        listening: true,
-    }
+        name: undefined,
-    this.attrs.visible = true;
+        alpha: 1,
-    this.attrs.listening = true;
+        x: 0,
-    this.attrs.name = undefined;
+        y: 0,
-    this.attrs.alpha = 1;
+        scale: {
-    this.attrs.x = 0;
-    this.attrs.y = 0;
-    this.attrs.scale = {
             x: 1,
             y: 1
-    };
+        },
-    this.attrs.rotation = 0;
+        rotation: 0,
-    this.attrs.centerOffset = {
+        centerOffset: {
             x: 0,
             y: 0
-    };
+        },
-    this.attrs.dragConstraint = 'none';
+        dragConstraint: 'none',
-    this.attrs.dragBounds = {};
+        dragBounds: {},
-    this.attrs.draggable = false;
+        draggable: false
-    this.eventListeners = {};
+    });
 
-    // set attrs
+    this.eventListeners = {};
     this.setAttrs(config);
 };
 /*
@@ -284,6 +281,23 @@ Kinetic.Node.prototype = {
     getAttrs: function() {
         return this.attrs;
     },
+    /**
+     * set default attrs
+     * @param {Object} confic
+     */
+    setDefaultAttrs: function(config) {
+        // create attrs object if undefined
+        if(this.attrs === undefined) {
+            this.attrs = {};
+        }
+
+        if(config) {
+            for(var key in config) {
+                var val = config[key];
+                this.attrs[key] = config[key];
+            }
+        }
+    },
     /**
      * set attrs
      * @param {Object} config
@@ -1213,12 +1227,11 @@ Kinetic.Container.prototype = {
  * @param {int} height
  */
 Kinetic.Stage = function(config) {
-    // default attrs
+    this.setDefaultAttrs({
-    if(this.attrs === undefined) {
+        width: 400,
-        this.attrs = {};
+        height: 200
-    }
+    });
-    this.attrs.width = 400;
+
-    this.attrs.height = 200;
     this.nodeType = 'Stage';
     this.ids = {};
     this.names = {};
@@ -2089,11 +2102,9 @@ Kinetic.GlobalObject.extend(Kinetic.Stage, Kinetic.Node);
  * @param {Object} config
  */
 Kinetic.Layer = function(config) {
-    // default attrs
+    this.setDefaultAttrs({
-    if(this.attrs === undefined) {
+        throttle: 12
-        this.attrs = {};
+    });
-    }
-    this.attrs.throttle = 12;
 
     this.nodeType = 'Layer';
     this.lastDrawTime = 0;
@@ -2258,15 +2269,13 @@ Kinetic.GlobalObject.extend(Kinetic.Group, Kinetic.Node);
  *  The default is "path" because it performs better
  */
 Kinetic.Shape = function(config) {
-    // default attrs
+    this.setDefaultAttrs({
-    if(this.attrs === undefined) {
+        fill: undefined,
-        this.attrs = {};
+        stroke: undefined,
-    }
+        strokeWidth: undefined,
-    this.attrs.fill = undefined;
+        lineJoin: undefined,
-    this.attrs.stroke = undefined;
+        detectionType: 'path'
-    this.attrs.strokeWidth = undefined;
+    });
-    this.attrs.lineJoin = undefined;
-    this.attrs.detectionType = 'path';
 
     this.data = [];
     this.nodeType = 'Shape';
@@ -2488,13 +2497,11 @@ Kinetic.GlobalObject.extend(Kinetic.Shape, Kinetic.Node);
  * @param {Object} config
  */
 Kinetic.Rect = function(config) {
-    // default attrs
+    this.setDefaultAttrs({
-    if(this.attrs === undefined) {
+        width: 0,
-        this.attrs = {};
+        height: 0,
-    }
+        cornerRadius: 0
-    this.attrs.width = 0;
+    });
-    this.attrs.height = 0;
-    this.attrs.cornerRadius = 0;
 
     this.shapeType = "Rect";
 
@@ -2600,11 +2607,10 @@ Kinetic.GlobalObject.extend(Kinetic.Rect, Kinetic.Shape);
  * @param {Object} config
  */
 Kinetic.Circle = function(config) {
-    // default attrs
+    this.setDefaultAttrs({
-    if(this.attrs === undefined) {
+        radius: 0
-        this.attrs = {};
+    });
-    }
+
-    this.attrs.radius = 0;
     this.shapeType = "Circle";
 
     config.drawFunc = function() {
@@ -2651,16 +2657,14 @@ Kinetic.GlobalObject.extend(Kinetic.Circle, Kinetic.Shape);
  * @param {Object} config
  */
 Kinetic.Image = function(config) {
-    // default attrs
+    this.setDefaultAttrs({
-    if(this.attrs === undefined) {
+        crop: {
-        this.attrs = {};
-    }
-    this.attrs.crop = {
             x: 0,
             y: 0,
             width: undefined,
             height: undefined
-    };
+        }
+    });
 
     this.shapeType = "Image";
     config.drawFunc = function() {
@@ -2787,11 +2791,9 @@ Kinetic.GlobalObject.extend(Kinetic.Image, Kinetic.Shape);
  * @param {Object} config
  */
 Kinetic.Polygon = function(config) {
-    // default attrs
+    this.setDefaultAttrs({
-    if(this.attrs === undefined) {
+        points: {}
-        this.attrs = {};
+    });
-    }
-    this.attrs.points = {};
 
     this.shapeType = "Polygon";
     config.drawFunc = function() {
@@ -2840,12 +2842,10 @@ Kinetic.GlobalObject.extend(Kinetic.Polygon, Kinetic.Shape);
  * @param {Object} config
  */
 Kinetic.RegularPolygon = function(config) {
-    // default attrs
+    this.setDefaultAttrs({
-    if(this.attrs === undefined) {
+        radius: 0,
-        this.attrs = {};
+        sides: 0
-    }
+    });
-    this.attrs.radius = 0;
-    this.attrs.sides = 0;
 
     this.shapeType = "RegularPolygon";
     config.drawFunc = function() {
@@ -2910,13 +2910,11 @@ Kinetic.GlobalObject.extend(Kinetic.RegularPolygon, Kinetic.Shape);
  * @param {Object} config
  */
 Kinetic.Star = function(config) {
-    // default attrs
+    this.setDefaultAttrs({
-    if(this.attrs === undefined) {
+        points: [],
-        this.attrs = {};
+        innerRadius: 0,
-    }
+        outerRadius: 0
-    this.attrs.points = [];
+    });
-    this.attrs.innerRadius = 0;
-    this.attrs.outerRadius = 0;
 
     this.shapeType = "Star";
     config.drawFunc = function() {
@@ -2994,20 +2992,18 @@ Kinetic.GlobalObject.extend(Kinetic.Star, Kinetic.Shape);
  * @param {Object} config
  */
 Kinetic.Text = function(config) {
-    // default attrs
+    this.setDefaultAttrs({
-    if(this.attrs === undefined) {
+        fontFamily: 'Calibri',
-        this.attrs = {};
+        text: '',
-    }
+        fontSize: 12,
-    this.attrs.fontFamily = '';
+        fill: undefined,
-    this.attrs.text = '';
+        textStroke: undefined,
-    this.attrs.fontSize = 12;
+        textStrokeWidth: undefined,
-    this.attrs.fill = undefined;
+        align: 'left',
-    this.attrs.textStroke = undefined;
+        verticalAlign: 'top',
-    this.attrs.textStrokeWidth = undefined;
+        padding: 0,
-    this.attrs.align = 'left';
+        fontStyle: 'normal'
-    this.attrs.verticalAlign = 'top';
+    });
-    this.attrs.padding = 0;
-    this.attrs.fontStyle = 'normal';
 
     this.shapeType = "Text";
 

src/Layer.js

@@ -10,11 +10,9 @@
  * @param {Object} config
  */
 Kinetic.Layer = function(config) {
-    // default attrs
+    this.setDefaultAttrs({
-    if(this.attrs === undefined) {
+        throttle: 12
-        this.attrs = {};
+    });
-    }
-    this.attrs.throttle = 12;
 
     this.nodeType = 'Layer';
     this.lastDrawTime = 0;

src/Node.js

@@ -9,31 +9,28 @@
  * @param {Object} config
  */
 Kinetic.Node = function(config) {
-    // default attrs
+    this.setDefaultAttrs({
-    if(this.attrs === undefined) {
+        visible: true,
-        this.attrs = {};
+        listening: true,
-    }
+        name: undefined,
-    this.attrs.visible = true;
+        alpha: 1,
-    this.attrs.listening = true;
+        x: 0,
-    this.attrs.name = undefined;
+        y: 0,
-    this.attrs.alpha = 1;
+        scale: {
-    this.attrs.x = 0;
-    this.attrs.y = 0;
-    this.attrs.scale = {
             x: 1,
             y: 1
-    };
+        },
-    this.attrs.rotation = 0;
+        rotation: 0,
-    this.attrs.centerOffset = {
+        centerOffset: {
             x: 0,
             y: 0
-    };
+        },
-    this.attrs.dragConstraint = 'none';
+        dragConstraint: 'none',
-    this.attrs.dragBounds = {};
+        dragBounds: {},
-    this.attrs.draggable = false;
+        draggable: false
-    this.eventListeners = {};
+    });
 
-    // set attrs
+    this.eventListeners = {};
     this.setAttrs(config);
 };
 /*
@@ -115,6 +112,23 @@ Kinetic.Node.prototype = {
     getAttrs: function() {
         return this.attrs;
     },
+    /**
+     * set default attrs
+     * @param {Object} confic
+     */
+    setDefaultAttrs: function(config) {
+        // create attrs object if undefined
+        if(this.attrs === undefined) {
+            this.attrs = {};
+        }
+
+        if(config) {
+            for(var key in config) {
+                var val = config[key];
+                this.attrs[key] = config[key];
+            }
+        }
+    },
     /**
      * set attrs
      * @param {Object} config

src/Shape.js

@@ -16,15 +16,13 @@
  *  The default is "path" because it performs better
  */
 Kinetic.Shape = function(config) {
-    // default attrs
+    this.setDefaultAttrs({
-    if(this.attrs === undefined) {
+        fill: undefined,
-        this.attrs = {};
+        stroke: undefined,
-    }
+        strokeWidth: undefined,
-    this.attrs.fill = undefined;
+        lineJoin: undefined,
-    this.attrs.stroke = undefined;
+        detectionType: 'path'
-    this.attrs.strokeWidth = undefined;
+    });
-    this.attrs.lineJoin = undefined;
-    this.attrs.detectionType = 'path';
 
     this.data = [];
     this.nodeType = 'Shape';

src/Stage.js

@@ -12,12 +12,11 @@
  * @param {int} height
  */
 Kinetic.Stage = function(config) {
-    // default attrs
+    this.setDefaultAttrs({
-    if(this.attrs === undefined) {
+        width: 400,
-        this.attrs = {};
+        height: 200
-    }
+    });
-    this.attrs.width = 400;
+
-    this.attrs.height = 200;
     this.nodeType = 'Stage';
     this.ids = {};
     this.names = {};

src/shapes/Circle.js

@@ -8,11 +8,10 @@
  * @param {Object} config
  */
 Kinetic.Circle = function(config) {
-    // default attrs
+    this.setDefaultAttrs({
-    if(this.attrs === undefined) {
+        radius: 0
-        this.attrs = {};
+    });
-    }
+
-    this.attrs.radius = 0;
     this.shapeType = "Circle";
 
     config.drawFunc = function() {

src/shapes/Image.js

@@ -8,16 +8,14 @@
  * @param {Object} config
  */
 Kinetic.Image = function(config) {
-    // default attrs
+    this.setDefaultAttrs({
-    if(this.attrs === undefined) {
+        crop: {
-        this.attrs = {};
-    }
-    this.attrs.crop = {
             x: 0,
             y: 0,
             width: undefined,
             height: undefined
-    };
+        }
+    });
 
     this.shapeType = "Image";
     config.drawFunc = function() {

src/shapes/Polygon.js

@@ -8,11 +8,9 @@
  * @param {Object} config
  */
 Kinetic.Polygon = function(config) {
-    // default attrs
+    this.setDefaultAttrs({
-    if(this.attrs === undefined) {
+        points: {}
-        this.attrs = {};
+    });
-    }
-    this.attrs.points = {};
 
     this.shapeType = "Polygon";
     config.drawFunc = function() {

src/shapes/Rect.js

@@ -8,13 +8,11 @@
  * @param {Object} config
  */
 Kinetic.Rect = function(config) {
-    // default attrs
+    this.setDefaultAttrs({
-    if(this.attrs === undefined) {
+        width: 0,
-        this.attrs = {};
+        height: 0,
-    }
+        cornerRadius: 0
-    this.attrs.width = 0;
+    });
-    this.attrs.height = 0;
-    this.attrs.cornerRadius = 0;
 
     this.shapeType = "Rect";
 

src/shapes/RegularPolygon.js

@@ -8,12 +8,10 @@
  * @param {Object} config
  */
 Kinetic.RegularPolygon = function(config) {
-    // default attrs
+    this.setDefaultAttrs({
-    if(this.attrs === undefined) {
+        radius: 0,
-        this.attrs = {};
+        sides: 0
-    }
+    });
-    this.attrs.radius = 0;
-    this.attrs.sides = 0;
 
     this.shapeType = "RegularPolygon";
     config.drawFunc = function() {

src/shapes/Star.js

@@ -8,13 +8,11 @@
  * @param {Object} config
  */
 Kinetic.Star = function(config) {
-    // default attrs
+    this.setDefaultAttrs({
-    if(this.attrs === undefined) {
+        points: [],
-        this.attrs = {};
+        innerRadius: 0,
-    }
+        outerRadius: 0
-    this.attrs.points = [];
+    });
-    this.attrs.innerRadius = 0;
-    this.attrs.outerRadius = 0;
 
     this.shapeType = "Star";
     config.drawFunc = function() {

src/shapes/Text.js

@@ -8,20 +8,18 @@
  * @param {Object} config
  */
 Kinetic.Text = function(config) {
-    // default attrs
+    this.setDefaultAttrs({
-    if(this.attrs === undefined) {
+        fontFamily: 'Calibri',
-        this.attrs = {};
+        text: '',
-    }
+        fontSize: 12,
-    this.attrs.fontFamily = '';
+        fill: undefined,
-    this.attrs.text = '';
+        textStroke: undefined,
-    this.attrs.fontSize = 12;
+        textStrokeWidth: undefined,
-    this.attrs.fill = undefined;
+        align: 'left',
-    this.attrs.textStroke = undefined;
+        verticalAlign: 'top',
-    this.attrs.textStrokeWidth = undefined;
+        padding: 0,
-    this.attrs.align = 'left';
+        fontStyle: 'normal'
-    this.attrs.verticalAlign = 'top';
+    });
-    this.attrs.padding = 0;
-    this.attrs.fontStyle = 'normal';
 
     this.shapeType = "Text";