unit tests and functional tests now passing. Next up, re-integrate serialization with new attrs structure

src/Stage.js

@@ -27,6 +27,10 @@ Kinetic.Stage = function(config) {
         config.container = document.getElementById(config.container);
     }
 
+    // call super constructors
+    Kinetic.Container.apply(this, []);
+    Kinetic.Node.apply(this, [config]);
+    
     this.nodeType = 'Stage';
     this.container = config.container;
     this.content = document.createElement('div');
@@ -58,10 +62,6 @@ Kinetic.Stage = function(config) {
 
     // add stage to global object
     Kinetic.GlobalObject.stages.push(this);
-
-    // call super constructors
-    Kinetic.Container.apply(this, []);
-    Kinetic.Node.apply(this, [config]);
 };
 /*
  * Stage methods
@@ -153,9 +153,11 @@ Kinetic.Stage.prototype = {
         var bufferLayer = this.bufferLayer;
         var bufferContext = bufferLayer.getContext();
         var layers = this.children;
+        var that = this;
 
         function addLayer(n) {
             var dataURL = layers[n].getCanvas().toDataURL();
+            console.log(dataURL);
             var imageObj = new Image();
             imageObj.onload = function() {
                 bufferContext.drawImage(this, 0, 0);
@@ -717,8 +719,8 @@ Kinetic.Stage.prototype = {
 
                 // default
                 var newNodePos = {
-                    x: pos.attrs.x - go.drag.offset.x,
-                    y: pos.attrs.y - go.drag.offset.y
+                    x: pos.x - go.drag.offset.x,
+                    y: pos.y - go.drag.offset.y
                 };
 
                 // bounds overrides

src/shapes/Image.js

@@ -12,30 +12,22 @@ Kinetic.Image = function(config) {
     if(this.attrs === undefined) {
         this.attrs = {};
     }
-    this.attrs.width = 0;
-    this.attrs.height = 0;
 
     // special
     this.image = config.image;
 
-    // defaults
-    if(config.width === undefined) {
-        config.width = config.image.width;
-    }
-    if(config.height === undefined) {
-        config.height = config.image.height;
-    }
-
     this.shapeType = "Image";
     config.drawFunc = function() {
+    	var width = this.attrs.width !== undefined ? this.attrs.width : this.image.width;
+    	var height = this.attrs.height !== undefined ? this.attrs.height : this.image.height;
         var canvas = this.getCanvas();
         var context = this.getContext();
         context.beginPath();
         this.applyLineJoin();
-        context.rect(0, 0, this.attrs.width, this.attrs.height);
+        context.rect(0, 0, width, height);
         context.closePath();
         this.fillStroke();
-        context.drawImage(this.image, 0, 0, this.attrs.width, this.attrs.height);
+        context.drawImage(this.image, 0, 0, width, height);
     };
     // call super constructor
     Kinetic.Shape.apply(this, [config]);

src/shapes/Polygon.js

@@ -15,7 +15,6 @@ Kinetic.Polygon = function(config) {
     this.attrs.points = {};
 
     this.shapeType = "Polygon";
-
     config.drawFunc = function() {
         var context = this.getContext();
         context.beginPath();

src/shapes/RegularPolygon.js

@@ -16,7 +16,6 @@ Kinetic.RegularPolygon = function(config) {
     this.attrs.sides = 0;
 
     this.shapeType = "RegularPolygon";
-
     config.drawFunc = function() {
         var context = this.getContext();
         context.beginPath();

src/shapes/Text.js

@@ -15,6 +15,7 @@ Kinetic.Text = function(config) {
     this.attrs.fontFamily = '';
     this.attrs.text = '';
     this.attrs.fontSize = 12;
+    this.attrs.fill = undefined;
     this.attrs.textStroke = undefined;
     this.attrs.textStrokeWidth = undefined;
     this.attrs.align = 'left';
@@ -24,18 +25,6 @@ Kinetic.Text = function(config) {
 
     this.shapeType = "Text";
 
-    /*
-     * special defaults
-     */
-    if(config.textStroke !== undefined || config.textStrokeWidth !== undefined) {
-        if(config.textStroke === undefined) {
-            config.textStroke = 'black';
-        }
-        else if(config.textStrokeWidth === undefined) {
-            config.textStrokeWidth = 2;
-        }
-    }
-
     config.drawFunc = function() {
         var context = this.getContext();
         context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily;

src/util/Transition.js

@@ -84,8 +84,8 @@ Kinetic.Transition.prototype = {
         }
 
         var tween = new Kinetic.Tween(node, function(i) {
-            node[key] = i;
-        }, Kinetic.Tweens[easing], node[key], config[key], config.duration);
+            node.attrs[key] = i;
+        }, Kinetic.Tweens[easing], node.attrs[key], config[key], config.duration);
 
         return tween;
     },
@@ -98,8 +98,8 @@ Kinetic.Transition.prototype = {
         }
 
         var tween = new Kinetic.Tween(node, function(i) {
-            node[key][prop] = i;
-        }, Kinetic.Tweens[easing], node[key][prop], config[key][prop], config.duration);
+            node.attrs[key][prop] = i;
+        }, Kinetic.Tweens[easing], node.attrs[key][prop], config[key][prop], config.duration);
 
         return tween;
     },