rewrote Label API. Group plugins now require that children are added to the base class

src/Container.js

@@ -33,6 +33,9 @@
             child.index = children.length;
             child.parent = this;
             children.push(child);
+            this.fire('add', {
+                child: child
+            }, true);
 
             // chainable
             return this;

src/Node.js

@@ -31,7 +31,8 @@
         UPPER_R = 'R',
         UPPER_G = 'G',
         UPPER_B = 'B',
-        HASH = '#';
+        HASH = '#',
+        CHILDREN = 'children';
         
     Kinetic.Util.addMethods(Kinetic.Node, {
         _nodeInit: function(config) {
@@ -267,14 +268,19 @@
             
             if(config) {
                 for(key in config) {
-                    method = SET + Kinetic.Util._capitalize(key);
+                    if (key === CHILDREN) {
-                    // use setter if available
+                   
-                    if(Kinetic.Util._isFunction(this[method])) {
-                        this[method](config[key]);
                     }
-                    // otherwise set directly
                     else {
-                        this._setAttr(key, config[key]);
+                        method = SET + Kinetic.Util._capitalize(key);
+                        // use setter if available
+                        if(Kinetic.Util._isFunction(this[method])) {
+                            this[method](config[key]);
+                        }
+                        // otherwise set directly
+                        else {
+                            this._setAttr(key, config[key]);
+                        }
                     }
                 }
             }
@@ -661,9 +667,7 @@
                 }
             }
 
-            obj.className = this.className;
+            obj.className = this.getClassName();
-            obj.nodeType = this.nodeType;
-
             return obj;
         },
         /**

src/plugins/Label.js

@@ -33,45 +33,36 @@
      * @param {Number} [config.tag.cornerRadius] 
      * {{NodeParams}}
      * @example
+     * // create label
      * var label = new Kinetic.Label({<br>
-     *   x: 350,<br>
+     *   x: 100,<br>
-     *   y: 50,<br>
+     *   y: 100, <br>
-     *   opacity: 0.75,<br>
+     *   draggable: true<br>
-     *   text: {<br>
-     *     text: 'Simple label',<br>
-     *     fontFamily: 'Calibri',<br>
-     *     fontSize: 18,<br>
-     *     padding: 5,<br>
-     *     fill: 'black'<br>
-     *   },<br>
-     *   tag: {<br>
-     *     fill: 'yellow',<br>
-     *   }<br>
      * });<br><br>
      *
-     * var tooltip = new Kinetic.Label({<br>
+     * // add a tag to the label<br>
-     *   x: 170,<br>
+     * label.add(new Kinetic.Tag({<br>
-     *   y: 75,<br>
+     *   fill: '#bbb',<br>
-     *   opacity: 0.75,<br>
+     *   stroke: '#333',<br>
-     *   text: {<br>
+     *   shadowColor: 'black',<br>
-     *     text: 'Tooltip pointing down',<br>
+     *   shadowBlur: 10,<br>
-     *     fontFamily: 'Calibri',<br>
+     *   shadowOffset: [10, 10],<br>
-     *     fontSize: 18,<br>
+     *   shadowOpacity: 0.2,<br>
-     *     padding: 5,<br>
+     *   lineJoin: 'round',<br>
-     *     fill: 'white'<br>
+     *   pointerDirection: 'up',<br>
-     *   },<br>
+     *   pointerWidth: 20,<br>
-     *   tag: {<br>
+     *   pointerHeight: 20,<br>
-     *     fill: 'black',<br>
+     *   cornerRadius: 5<br>
-     *     pointerDirection: 'down',<br>
+     * }));<br><br>
-     *     pointerWidth: 10,<br>
+     *
-     *     pointerHeight: 10,<br>
+     * // add text to the label<br>
-     *     lineJoin: 'round',<br>
+     * label.add(new Kinetic.Text({<br>
-     *     shadowColor: 'black',<br>
+     *   text: 'Hello World!',<br>
-     *     shadowBlur: 10,<br>
+     *   fontSize: 50,<br>
-     *     shadowOffset: 10,<br>
+     *   lineHeight: 1.2,<br>
-     *     shadowOpacity: 0.5<br>
+     *   padding: 10,<br>
-     *   }<br>
+     *   fill: 'green'<br>
-     * });
+     *  }));
      */
     Kinetic.Label = function(config) {
         this._initLabel(config);
@@ -79,41 +70,16 @@
 
     Kinetic.Label.prototype = {
         _initLabel: function(config) {
-            var that = this,
+            var that = this;
-                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);
+            Kinetic.Group.call(this, config); 
-            this.text = new Kinetic.Text(textConfig);
-            this.tag = new Kinetic.Tag(tagConfig);
-            this.innerGroup.add(this.getTag());
-            this.innerGroup.add(this.getText()); 
-            this.add(this.innerGroup);   
-            this._setGroupOffset();
 
-            // update text data for certain attr changes
+            this.on('add', function(evt) {
-            for(n = 0; n < attrChangeListLen; n++) {
+                that._addListeners(evt.child);
-                that.text.on(ATTR_CHANGE_LIST[n] + CHANGE_KINETIC, function() {
+                that._sync();
-                    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
@@ -122,9 +88,9 @@
          * @method
          * @memberof Kinetic.Label.prototype
          */
-         getText: function() {
+        getText: function() {
-            return this.text;
+            return this.get('Text')[0];
-         },    
+        },    
         /**
          * get Tag shape for the label.  You need to access the Tag shape in order to update
          * the pointer properties and the corner radius
@@ -133,7 +99,17 @@
          * @memberof Kinetic.Label.prototype
          */
         getTag: function() {
-            return this.tag;
+            return this.get('Tag')[0];
+        },
+        _addListeners: function(context) {
+            var that = this,
+                n;
+            // update text data for certain attr changes
+            for(n = 0; n < attrChangeListLen; n++) {
+                context.on(ATTR_CHANGE_LIST[n] + CHANGE_KINETIC, function() {
+                    that._sync();
+                });
+            } 
         },
         getWidth: function() {
             return this.getText().getWidth();
@@ -141,40 +117,45 @@
         getHeight: function() {
             return this.getText().getHeight();
         },
-        _setGroupOffset: function() {
+        _sync: function() {
             var text = this.getText(),
-                width = text.getWidth(),
-                height = text.getHeight(),
                 tag = this.getTag(),
+                width, height, pointerDirection, pointerWidth, x, y;
+
+            if (text && tag) {
+                width = text.getWidth(),
+                height = text.getHeight(),   
                 pointerDirection = tag.getPointerDirection(),
                 pointerWidth = tag.getPointerWidth(),
                 pointerHeight = tag.getPointerHeight(),
                 x = 0, 
                 y = 0;
-            
+
-            switch(pointerDirection) {
+                switch(pointerDirection) {
-                case UP:
+                    case UP:
-                    x = width / 2;
+                        x = width / 2;
-                    y = -1 * pointerHeight;
+                        y = -1 * pointerHeight;
-                    break;
+                        break;
-                case RIGHT:
+                    case RIGHT:
-                    x = width + pointerWidth;
+                        x = width + pointerWidth;
-                    y = height / 2;
+                        y = height / 2;
-                    break;
+                        break;
-                case DOWN:
+                    case DOWN:
-                    x = width / 2;
+                        x = width / 2;
-                    y = height + pointerHeight;
+                        y = height + pointerHeight;
-                    break;
+                        break;
-                case LEFT:
+                    case LEFT:
-                    x = -1 * pointerWidth;
+                        x = -1 * pointerWidth;
-                    y = height / 2;
+                        y = height / 2;
-                    break;
+                        break;
+                }
+                
+                tag.setAttrs({
+
+                    width: width,
+                    height: height
+                }); 
             }
-            
-            this.innerGroup.setOffset({
-                x: x,
-                y: y
-            }); 
         }
     };
     
@@ -204,10 +185,9 @@
             this._setDrawFuncs();
         },
         drawFunc: function(canvas) {
-            var label = this.getParent().getParent(),
+            var context = canvas.getContext(),
-                context = canvas.getContext(),
+                width = this.getWidth(),
-                width = label.getWidth(),
+                height = this.getHeight(),
-                height = label.getHeight(),
                 pointerDirection = this.getPointerDirection(),
                 pointerWidth = this.getPointerWidth(),
                 pointerHeight = this.getPointerHeight(),

tests/js/unit/plugins/labelTests.js

@@ -10,34 +10,39 @@ Test.Modules.LABEL = {
         var label = new Kinetic.Label({
             x: 100,
             y: 100, 
-            draggable: true,
+            draggable: true
-            text: { 
-                text: '',
-                fontSize: 50,
-                //fontFamily: 'Calibri',
-                //fontStyle: 'normal',
-                lineHeight: 1.2,
-                //padding: 10,
-                fill: 'green'
-            }, 
-            tag: {
-                fill: '#bbb',
-                stroke: '#333',
-                shadowColor: 'black',
-                shadowBlur: 10,
-                shadowOffset: [10, 10],
-                shadowOpacity: 0.2,
-                lineJoin: 'round',
-                pointerDirection: 'up',
-                pointerWidth: 20,
-                pointerHeight: 20,
-                cornerRadius: 5
-            }
         });
 
+        // add a tag to the label
+        label.add(new Kinetic.Tag({
+            fill: '#bbb',
+            stroke: '#333',
+            shadowColor: 'black',
+            shadowBlur: 10,
+            shadowOffset: [10, 10],
+            shadowOpacity: 0.2,
+            lineJoin: 'round',
+            pointerDirection: 'up',
+            pointerWidth: 20,
+            pointerHeight: 20,
+            cornerRadius: 5
+        }));
+
+        // add text to the label
+        label.add(new Kinetic.Text({
+            text: '',
+            fontSize: 50,
+            //fontFamily: 'Calibri',
+            //fontStyle: 'normal',
+            lineHeight: 1.2, 
+            //padding: 10,
+            fill: 'green'
+        }));
+
         layer.add(label);
         stage.add(layer);
 
+        
         var beforeTextWidth = label.getText().getWidth();
 
         label.getText().setFontSize(100);
@@ -51,6 +56,7 @@ Test.Modules.LABEL = {
         label.getText().setText('Hello big world');
 
         layer.draw();
+      
         
         test(label.getType() === 'Group', 'label should be a group');
         test(label.getClassName() === 'Label', 'label class name should be Label');
@@ -66,7 +72,7 @@ Test.Modules.LABEL = {
             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 json = '{"attrs":{"x":100,"y":100,"draggable":true},"className":"Label","children":[{"attrs":{"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,"width":303,"height":60},"className":"Tag"},{"attrs":{"width":"auto","height":"auto","text":"Hello big world","fontSize":50,"lineHeight":1.2,"fill":"green"},"className":"Text"}]}';
         var layer = new Kinetic.Layer();
 
         var label = Kinetic.Node.create(json);