label offsets, serialization, and deserialization now work. fixes #406

src/plugins/Label.js

@@ -80,28 +80,61 @@
     Kinetic.Label.prototype = {
         _initLabel: function(config) {
             var that = this,
-                text = null;
+                textConfig = config.text,
+                tagConfig = config.tag,
+                n;
 
+            // clear text and tag configs because they aren't actually attrs
+            // TODO: is there a better way to config children attrs from a super config?
+            delete config.text;
+            delete config.tag;
+
+            // need the inner group in case the dev wants to set the label offset
             this.innerGroup = new Kinetic.Group();
             this.createAttrs();
             this.className = LABEL;
             Kinetic.Group.call(this, config);
-            text = new Kinetic.Text(config.text);
+            this.text = new Kinetic.Text(textConfig);
-            this.setText(text);
+            this.tag = new Kinetic.Tag(tagConfig);
-            this.setTag(new Kinetic.Tag(config.tag));
             this.innerGroup.add(this.getTag());
-            this.innerGroup.add(text); 
+            this.innerGroup.add(this.getText()); 
             this.add(this.innerGroup);   
-            
             this._setGroupOffset();
 
             // update text data for certain attr changes
-            for(var n = 0; n < attrChangeListLen; n++) {
+            for(n = 0; n < attrChangeListLen; n++) {
-                text.on(ATTR_CHANGE_LIST[n] + CHANGE_KINETIC, function() {
+                that.text.on(ATTR_CHANGE_LIST[n] + CHANGE_KINETIC, function() {
                     that._setGroupOffset();
                 });
             }     
         },
+        toObject: function() {
+            var obj = Kinetic.Node.prototype.toObject.call(this);
+            obj.attrs.text = Kinetic.Node.prototype.toObject.call(this.text).attrs;
+            obj.attrs.tag = Kinetic.Node.prototype.toObject.call(this.tag).attrs;
+
+            return obj;
+        },
+        /**
+         * get Text shape for the label.  You need to access the Text shape in order to update
+         * the text properties
+         * @name getText
+         * @method
+         * @memberof Kinetic.Label.prototype
+         */
+         getText: function() {
+            return this.text;
+         },    
+        /**
+         * get Tag shape for the label.  You need to access the Tag shape in order to update
+         * the pointer properties and the corner radius
+         * @name getTag
+         * @method
+         * @memberof Kinetic.Label.prototype
+         */
+        getTag: function() {
+            return this.tag;
+        },
         getWidth: function() {
             return this.getText().getWidth();
         },
@@ -138,7 +171,7 @@
                     break;
             }
             
-            this.setOffset({
+            this.innerGroup.setOffset({
                 x: x,
                 y: y
             }); 
@@ -147,26 +180,6 @@
     
     Kinetic.Util.extend(Kinetic.Label, Kinetic.Group);
 
-    Kinetic.Node.addGetterSetter(Kinetic.Label, 'text');
-
-    /**
-     * get Text shape for the label.  You need to access the Text shape in order to update
-     * the text properties
-     * @name getText
-     * @method
-     * @memberof Kinetic.Label.prototype
-     */
-
-    Kinetic.Node.addGetterSetter(Kinetic.Label, 'tag');
-       
-    /**
-     * get Tag shape for the label.  You need to access the Tag shape in order to update
-     * the pointer properties and the corner radius
-     * @name getTag
-     * @method
-     * @memberof Kinetic.Label.prototype
-     */
-
     /**
      * Tag constructor.&nbsp; A Tag can be configured
      *  to have a pointer element that points up, right, down, or left 

tests/js/unit/plugins/labelTests.js

@@ -54,5 +54,25 @@ Test.Modules.LABEL = {
         
         test(label.getType() === 'Group', 'label should be a group');
         test(label.getClassName() === 'Label', 'label class name should be Label');
+
+        var json = label.toJSON();
+
+        console.log(json);
+    },
+    'create label from json': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+
+        var json = '{"attrs":{"x":100,"y":100,"draggable":true,"text":{"width":"auto","height":"auto","text":"Hello big world","fontSize":50,"lineHeight":1.2,"fill":"green"},"tag":{"fill":"#bbb","stroke":"#333","shadowColor":"black","shadowBlur":10,"shadowOffsetX":10,"shadowOffsetY":10,"shadowOpacity":0.2,"lineJoin":"round","pointerDirection":"up","pointerWidth":20,"pointerHeight":20,"cornerRadius":5}},"className":"Label","nodeType":"Group"}';
+        var layer = new Kinetic.Layer();
+
+        var label = Kinetic.Node.create(json);
+
+        layer.add(label);
+        stage.add(layer);
     }
+ 
 };