first pass of new Label plugin

Thorfile

@@ -8,7 +8,7 @@ class Build < Thor
     "src/filters/Grayscale.js", "src/filters/Brighten.js", "src/filters/Invert.js", "src/filters/Gauss.js", 
     "src/Node.js", "src/Animation.js", "src/DragAndDrop.js", "src/Transition.js", "src/Container.js", "src/Shape.js", "src/Stage.js", "src/Layer.js", "src/Group.js",
     "src/shapes/Rect.js", "src/shapes/Circle.js", "src/shapes/Wedge.js", "src/shapes/Ellipse.js", "src/shapes/Image.js", "src/shapes/Polygon.js", "src/shapes/Text.js", "src/shapes/Line.js", "src/shapes/Spline.js", "src/shapes/Blob.js", "src/shapes/Sprite.js", "src/shapes/Path.js",
-    "src/plugins/TextPath.js", "src/plugins/RegularPolygon.js", "src/plugins/Star.js"       
+    "src/plugins/TextPath.js", "src/plugins/RegularPolygon.js", "src/plugins/Star.js", "src/plugins/Label.js"       
   ]
   
   UNIT_TESTS = [
@@ -36,7 +36,8 @@ class Build < Thor
   	
   	"tests/js/unit/plugins/regularPolygonTests.js",
   	"tests/js/unit/plugins/starTests.js",
-  	"tests/js/unit/plugins/textPathTests.js"	
+  	"tests/js/unit/plugins/textPathTests.js",
+    "tests/js/unit/plugins/labelTests.js"
   ]
 
   if !File.directory?("dist")

src/plugins/Label.js

@@ -0,0 +1,59 @@
+(function() {
+    // constants
+    var ATTR_CHANGE_LIST = ['fontFamily', 'fontSize', 'fontStyle', 'padding', 'lineHeight', 'text'],
+        CHANGE_KINETIC = 'Change.kinetic',
+        TEXT = 'text',
+        RECT = 'rect';
+
+    // cached variables
+    attrChangeListLen = ATTR_CHANGE_LIST.length;
+
+    /**
+     * Label constructor.  Blobs are defined by an array of points and
+     *  a tension
+     * @constructor
+     * @param {Object} config
+     * @param {String} [config.fontFamily] default is Calibri
+     * @param {Number} [config.fontSize] in pixels.  Default is 12
+     * @param {String} [config.fontStyle] can be normal, bold, or italic.  Default is normal
+     * @param {String} config.text
+     * @param {Number} [config.padding]
+     * @param {Number} [config.lineHeight] default is 1
+     * @param {String} [config.textFill]
+     * @param {String} [config.textStroke]
+     * @param {Number} [config.cornerRadius]
+     * {{ShapeParams}}
+     * {{NodeParams}}
+     */
+    Kinetic.Plugins.Label = function(config) {
+        this._initLabel(config);
+    };
+
+    Kinetic.Plugins.Label.prototype = {
+        _initLabel: function(config) {
+            var that = this,
+                text = null;
+
+            this.createAttrs();
+            Kinetic.Group.call(this, config);
+            this.setText(new Kinetic.Text(config.text));
+            this.setRect(new Kinetic.Rect(config.rect));
+            this.add(this.getRect());
+            this.add(this.getText());
+
+            text = this.getText();
+            // update text data for certain attr changes
+            for(var n = 0; n < attrChangeListLen; n++) {
+                text.on(ATTR_CHANGE_LIST[n] + CHANGE_KINETIC, function() {
+                    that.getRect().setSize(this.getSize());            
+                });
+            }
+        }
+    };
+    
+    Kinetic.Global.extend(Kinetic.Plugins.Label, Kinetic.Group);
+
+    Kinetic.Node.addGetterSetter(Kinetic.Plugins.Label, TEXT);
+    Kinetic.Node.addGetterSetter(Kinetic.Plugins.Label, RECT);
+
+})();

src/shapes/Text.js

@@ -21,7 +21,8 @@
         ATTR_CHANGE_LIST = ['fontFamily', 'fontSize', 'fontStyle', 'padding', 'align', 'lineHeight', 'text', 'width', 'height'],
         
         // cached variables
-        attrChangeListLen = ATTR_CHANGE_LIST.length;
+        attrChangeListLen = ATTR_CHANGE_LIST.length,
+        dummyCanvas = document.createElement(CANVAS);
 
     /**
      * Text constructor
@@ -53,7 +54,6 @@
     Kinetic.Text.prototype = {
         _initText: function(config) {
             var that = this;
-            this.dummyCanvas = document.createElement(CANVAS);
             this.createAttrs();
             
             // since width and height work a bit different for Text,
@@ -171,8 +171,7 @@
             return this.textHeight;
         },
         _getTextSize: function(text) {
-            var dummyCanvas = this.dummyCanvas,
-                context = dummyCanvas.getContext(CONTEXT_2D),
+            var context = dummyCanvas.getContext(CONTEXT_2D),
                 fontSize = this.getFontSize(),
                 metrics;
 

tests/js/unit/plugins/labelTests.js

@@ -0,0 +1,49 @@
+Test.Modules.LABEL = {
+    '*add label': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+
+        var label = new Kinetic.Plugins.Label({
+            x: 20,
+            y: 20, 
+            draggable: true,
+            text: {
+                text: 'Hello World!',
+                fontSize: 50,
+                fontFamily: 'Calibri',
+                fontStyle: 'normal',
+                lineHeight: 1.2,
+                padding: 10,
+                fill: 'green',
+            },
+            rect: {
+                fill: '#bbb',
+                stroke: '#333',
+                shadowColor: 'black',
+                shadowBlur: 1,
+                shadowOffset: [10, 10],
+                shadowOpacity: 0.2,
+                cornerRadius: 10,
+            }
+        });
+
+        layer.add(label);
+        stage.add(layer);
+
+        var beforeTextWidth = label.getText().getWidth();
+
+        label.getText().setFontSize(100);
+
+        var afterTextWidth = label.getText().getWidth();
+
+        test(afterTextWidth > beforeTextWidth, 'label text width should have grown');
+
+        label.getText().setFontSize(50);
+
+        layer.draw();
+    }
+};