Merge branch 'master' of https://github.com/ericdrowell/KineticJS

Conflicts:
	Gruntfile.js

test/unit/Node-test.js

@@ -340,11 +340,11 @@ suite('Node', function() {
     });
 
     // ======================================================
-    test('test offset attr change', function() {
+    test('test center attr change', function() {
         /*
          * the premise of this test to make sure that only
          * root level attributes trigger an attr change event.
-         * for this test, we have two offset properties.  one
+         * for this test, we have two center properties.  one
          * is in the root level, and the other is inside the shadow
          * object
          */
@@ -356,7 +356,7 @@ suite('Node', function() {
             width: 200,
             height: 50,
             fill: 'blue',
-            offset: {x:10, y:10},
+            center: {x:10, y:10},
             shadowColor: 'black',
             shadowOffset: {x:20, y:20}
         });
@@ -364,16 +364,16 @@ suite('Node', function() {
         layer.add(rect);
         stage.add(layer);
 
-        var offsetChange = false;
+        var centerChange = false;
         var shadowOffsetChange = false;
 
-        rect.on('offsetChange', function(val) {
-            offsetChange = true;
+        rect.on('centerChange', function(val) {
+            centerChange = true;
         });
 
-        rect.setOffset({x:1, y:2});
+        rect.center({x:1, y:2});
 
-        assert.equal(offsetChange, true);
+        assert.equal(centerChange, true);
     });
 
     // ======================================================
@@ -410,9 +410,11 @@ suite('Node', function() {
             width: 200,
             height: 50,
             fill: 'blue',
-            offset: [10, 10],
+            centerX: 10,
+            centerY: 10,
             shadowColor: 'black',
-            shadowOffset: [20, 20],
+            shadowOffsetX: 20,
+            shadowOffsetY: 20,
             draggable: true,
             name: 'myRect'
         });
@@ -478,7 +480,8 @@ suite('Node', function() {
             width: 200,
             height: 50,
             fill: 'red',
-            offset: [10, 10],
+            centerX: 10,
+            centerY: 10,
             shadowColor: 'black',
             shadowOffset: [20, 20],
             name: 'myRect',
@@ -1045,7 +1048,7 @@ suite('Node', function() {
             fill: 'green',
             stroke: 'black',
             strokeWidth: 4,
-            offset: {
+            center: {
                 x: 0,
                 y: 0
             },
@@ -1120,7 +1123,7 @@ suite('Node', function() {
             width: 100,
             height: 50,
             stroke: 'blue',
-            offset: {
+            center: {
                 x: 40,
                 y: 20
             }
@@ -1129,19 +1132,19 @@ suite('Node', function() {
         layer.add(rect);
         stage.add(layer);
 
-        assert.equal(rect.getOffsetX(), 40);
-        assert.equal(rect.getOffsetY(), 20);
+        assert.equal(rect.centerX(), 40);
+        assert.equal(rect.centerY(), 20);
 
-        assert.equal(rect.getOffset().x, 40);
-        assert.equal(rect.getOffset().y, 20);
+        assert.equal(rect.center().x, 40);
+        assert.equal(rect.center().y, 20);
 
-        rect.setOffset({x:80, y:40});
+        rect.center({x:80, y:40});
 
-        assert.equal(rect.getOffsetX(), 80);
-        assert.equal(rect.getOffsetY(), 40);
+        assert.equal(rect.centerX(), 80);
+        assert.equal(rect.centerY(), 40);
 
-        assert.equal(rect.getOffset().x, 80);
-        assert.equal(rect.getOffset().y, 40);
+        assert.equal(rect.center().x, 80);
+        assert.equal(rect.center().y, 40);
 
     });
 
@@ -1234,7 +1237,7 @@ suite('Node', function() {
     });
 
     // ======================================================
-    test('test setOffset', function() {
+    test('test center', function() {
         var stage = addStage();
         var layer = new Kinetic.Layer();
         var rect = new Kinetic.Rect({
@@ -1248,28 +1251,28 @@ suite('Node', function() {
         layer.add(rect);
         stage.add(layer);
 
-        rect.setOffset({x:1, y: 2});
-        assert.equal(rect.getOffset().x, 1);
-        assert.equal(rect.getOffset().y, 2);
+        rect.center({x:1, y: 2});
+        assert.equal(rect.center().x, 1);
+        assert.equal(rect.center().y, 2);
 
-        rect.setOffset({x:3, y:4});
-        assert.equal(rect.getOffset().x, 3);
-        assert.equal(rect.getOffset().y, 4);
+        rect.center({x:3, y:4});
+        assert.equal(rect.center().x, 3);
+        assert.equal(rect.center().y, 4);
 
-        rect.setOffset({
+        rect.center({
             x: 5,
             y: 6
         });
-        assert.equal(rect.getOffset().x, 5);
-        assert.equal(rect.getOffset().y, 6);
+        assert.equal(rect.center().x, 5);
+        assert.equal(rect.center().y, 6);
 
-        rect.setOffsetX(7);
-        assert.equal(rect.getOffset().x, 7);
-        assert.equal(rect.getOffset().y, 6);
+        rect.centerX(7);
+        assert.equal(rect.center().x, 7);
+        assert.equal(rect.center().y, 6);
 
-        rect.setOffsetY(8);
-        assert.equal(rect.getOffset().x, 7);
-        assert.equal(rect.getOffset().y, 8);
+        rect.centerY(8);
+        assert.equal(rect.center().x, 7);
+        assert.equal(rect.center().y, 8);
 
     });
 
@@ -1535,8 +1538,8 @@ suite('Node', function() {
             stroke: 'black',
             strokeWidth: 4,
             draggable: true,
-            offsetX: 30,
-            offsetY: 30
+            centerX: 30,
+            centerY: 30
             //rotationDeg: 60
             //rotationDeg: Math.PI / 3
         });
@@ -1566,7 +1569,7 @@ suite('Node', function() {
             name: 'groupName',
             id: 'groupId',
             rotationDeg: 45,
-            offset: {x:side / 2, y:side / 2},
+            center: {x:side / 2, y:side / 2},
             x: diagonal / 2,
             y: diagonal / 2
         });
@@ -1617,7 +1620,7 @@ suite('Node', function() {
                 x: 2,
                 y: 1
             },
-            offset: {
+            center: {
                 x: 50,
                 y: 25
             }
@@ -2221,7 +2224,7 @@ suite('Node', function() {
         var stage = Kinetic.Node.create(json, container);
 
         stage.find('#myTriangle').each(function(node) {
-            node.setDrawFunc(drawTriangle);
+            node.sceneFunc(drawTriangle);
         });
 
         stage.draw();
@@ -2239,7 +2242,7 @@ suite('Node', function() {
                 x: 200,
                 y: 60,
                 image: imageObj,
-                offset: {
+                center: {
                     x: 50,
                     y: imageObj.height / 2
                 },
@@ -2248,7 +2251,7 @@ suite('Node', function() {
 
             layer.add(darth);
             stage.add(layer);
-            var json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"x":200,"y":60,"offsetX":50,"offsetY":150,"id":"darth"},"className":"Image"}]}]}';
+            var json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"x":200,"y":60,"centerX":50,"centerY":150,"id":"darth"},"className":"Image"}]}]}';
 
             assert.equal(stage.toJSON(), json);
 
@@ -2262,7 +2265,7 @@ suite('Node', function() {
         var imageObj = new Image();
         var container = addContainer();
         imageObj.onload = function() {
-            var json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"x":200,"y":60,"offsetX":50,"offsetY":150,"id":"darth"},"className":"Image"}]}]}';
+            var json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"x":200,"y":60,"centerX":50,"centerY":150,"id":"darth"},"className":"Image"}]}]}';
             var stage = Kinetic.Node.create(json, container);
 
             assert.equal(stage.toJSON(), json);
@@ -2863,15 +2866,15 @@ suite('Node', function() {
     circle.skewY(8);
     assert.equal(circle.skewY(), 8);
 
-    circle.offset({x: 2, y: 2});
-    assert.equal(circle.offset().x, 2);
-    assert.equal(circle.offset().y, 2);
+    circle.center({x: 2, y: 2});
+    assert.equal(circle.center().x, 2);
+    assert.equal(circle.center().y, 2);
 
-    circle.offsetX(5);
-    assert.equal(circle.offsetX(), 5);
+    circle.centerX(5);
+    assert.equal(circle.centerX(), 5);
 
-    circle.offsetY(8);
-    assert.equal(circle.offsetY(), 8);
+    circle.centerY(8);
+    assert.equal(circle.centerY(), 8);
 
     circle.width(23);
     assert.equal(circle.width(), 23); 
@@ -2919,18 +2922,14 @@ suite('Node', function() {
         y: -74,
         width: 148,
         height: 148
-    }).offset({
+    }).center({
         x: 74,
         y: 74
     });
 
     assert.notEqual(circle._cache.canvas.scene, undefined);
     assert.notEqual(circle._cache.canvas.hit, undefined);
-    assert.equal(circle._cache.canvas.x, -74);
-    assert.equal(circle._cache.canvas.y, -74);
 
-
-    
     layer.draw();
 
 
@@ -3080,7 +3079,7 @@ suite('Node', function() {
         height: 208
     });
 
-    group.offsetX(104).offsetY(104);
+    group.centerX(104).centerY(104);
 
     //console.log('--after cache');
     //console.log(group.getAbsoluteTransform().getTranslation())

test/unit/Shape-test.js

@@ -530,11 +530,11 @@ suite('Shape', function() {
     rect.strokeWidth(8);
     assert.equal(rect.strokeWidth(), 8);
 
-    rect.drawFunc('function');
-    assert.equal(rect.drawFunc(), 'function');
+    rect.sceneFunc('function');
+    assert.equal(rect.sceneFunc(), 'function');
 
-    rect.drawHitFunc('function');
-    assert.equal(rect.drawHitFunc(), 'function');
+    rect.hitFunc('function');
+    assert.equal(rect.hitFunc(), 'function');
 
     rect.dashArray([1]);
     assert.equal(rect.dashArray()[0], 1);
@@ -544,4 +544,56 @@ suite('Shape', function() {
 
 
   });
+
+  // ======================================================
+  test('create image hit region', function(done) {
+      var imageObj = new Image();
+
+      var stage = addStage();
+      var layer = new Kinetic.Layer();
+
+      imageObj.onload = function() {
+
+          var lion = new Kinetic.Image({
+              x: 200,
+              y: 40,
+              image: imageObj,
+              draggable: true,
+              shadowColor: 'black',
+              shadowBlur: 10,
+              shadowOffset: 20,
+              shadowOpacity: 0.2
+          });
+
+          // override color key with black
+          lion.colorKey = '#000000';
+          Kinetic.shapes['#000000'] = lion;
+
+          layer.add(lion);
+
+          stage.add(layer);
+
+          lion.cache();
+
+
+          //document.body.appendChild(lion._cache.canvas.hit._canvas);
+
+
+          lion.drawHitFromCache();
+
+
+          layer.draw();
+
+
+          done();
+
+
+      };
+      imageObj.src = 'assets/lion.png';
+
+      showHit(layer);
+
+      layer.hitCanvas._canvas.style.border='2px solid black';
+  });
+
 });

test/unit/filters/Blur-test.js

@@ -95,7 +95,7 @@ suite('Blur', function() {
         height: 300
     });
 
-    group.offset({
+    group.center({
       x: 150, 
       y: 150
     });
@@ -105,14 +105,14 @@ suite('Blur', function() {
 
     layer.draw();
 
-    //document.body.appendChild(group._cache.canvas.scene._canvas);
+    //document.body.appendChild(group._cache.canvas.hit._canvas);
 
 
 
 
 
 
-    showHit(layer);
+    //showHit(layer);
   });
 
     // ======================================================
@@ -277,4 +277,43 @@ suite('Blur', function() {
         };
         imageObj.src = 'assets/lion.png';
     });
+
+    // ======================================================
+    test('blur hit region', function(done) {
+        var stage = addStage();
+
+        var imageObj = new Image();
+        imageObj.onload = function() {
+            
+            var layer = new Kinetic.Layer();
+            darth = new Kinetic.Image({
+                x: 10,
+                y: 10,
+                image: imageObj,
+                draggable: true
+            });
+
+            layer.add(darth);
+            stage.add(layer);
+
+            darth.cache();
+            darth.filters([Kinetic.Filters.Blur]);
+            darth.blurRadius(20);
+            darth.drawHitFromCache(100);
+            layer.draw();
+
+            showCanvas(darth._cache.canvas.hit._canvas);
+
+            //console.log(darth._cache.canvas.hit.getContext().getTrace(true));
+
+            assert.equal(darth._cache.canvas.hit.getContext().getTrace(true), 'save();translate();beginPath();rect();closePath();save();fillStyle;fill();restore();restore();clearRect();getImageData();putImageData();');
+
+
+
+            done();
+
+        };
+        imageObj.src = 'assets/lion.png';
+    });
+
 });

test/unit/plugins/RegularPolygon-test.js

@@ -14,7 +14,7 @@ suite('RegularPolygon', function() {
             stroke: 'blue',
             strokeWidth: 5,
             name: 'foobar',
-            offset: {
+            center: {
                 x: 0,
                 y: -50
             }

test/unit/plugins/Star-test.js

@@ -15,7 +15,7 @@ suite('Star', function() {
             stroke: 'blue',
             strokeWidth: 5,
             name: 'foobar',
-            offset: {
+            center: {
                 x: 0,
                 y: -70
             },

test/unit/shapes/Image-test.js

@@ -13,7 +13,7 @@ suite('Image', function(){
               image: imageObj,
               width: 100,
               height: 100,
-              offset: {x: 50, y: 30},
+              center: {x: 50, y: 30},
               crop: {x: 135, y: 7, width: 167, height: 134},
               draggable: true
           });
@@ -31,8 +31,8 @@ suite('Image', function(){
           assert.equal(darth.getY(), 60);
           assert.equal(darth.getWidth(), 100);
           assert.equal(darth.getHeight(), 100);
-          assert.equal(darth.getOffset().x, 50);
-          assert.equal(darth.getOffset().y, 30);
+          assert.equal(darth.center().x, 50);
+          assert.equal(darth.center().y, 30);
           assert.equal(Kinetic.Util._isElement(darth.getImage()), true);
 
           var crop = null;
@@ -88,7 +88,8 @@ suite('Image', function(){
               image: imageObj,
               width: 100,
               height: 100,
-              offset: [50, 30],
+              centerX: 50,
+              centerY: 30,
               crop: {x: 135, y: 7, width: 167, height: 134},
               draggable: true
           });
@@ -172,55 +173,6 @@ suite('Image', function(){
       imageObj.src = 'assets/darth-vader.jpg';
   });
 
-  // ======================================================
-  test('create image hit region', function(done) {
-      var imageObj = new Image();
-
-      var stage = addStage();
-      var layer = new Kinetic.Layer();
-
-      imageObj.onload = function() {
-
-          var lion = new Kinetic.Image({
-              x: 200,
-              y: 40,
-              image: imageObj,
-              draggable: true,
-              shadowColor: 'black',
-              shadowBlur: 10,
-              shadowOffset: 20,
-              shadowOpacity: 0.2
-          });
-
-          // override color key with black
-          lion.colorKey = '#000000';
-          Kinetic.shapes['#000000'] = lion;
-
-          layer.add(lion);
-
-          lion.createImageHitRegion(function() {
-              stage.add(layer);
-              layer.drawHit();
-
-              var trace = layer.hitCanvas.getContext().getTrace();
-              //console.log(trace);
-              //assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,200,40);drawImage([object HTMLImageElement],0,0,144,139);beginPath();rect(0,0,144,139);closePath();restore();clearRect(0,0,578,200);save();transform(1,0,0,1,200,40);drawImage([object HTMLImageElement],0,0,144,139);beginPath();rect(0,0,144,139);closePath();restore();');
-
-              var hitTrace = layer.hitCanvas.getContext().getTrace();
-              //console.log(hitTrace);
-              //assert.equal(hitTrace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,200,40);drawImage([object HTMLImageElement],0,0,144,139);beginPath();rect(0,0,144,139);closePath();restore();clearRect(0,0,578,200);save();transform(1,0,0,1,200,40);drawImage([object HTMLImageElement],0,0,144,139);beginPath();rect(0,0,144,139);closePath();restore();');
-
-              done();  
-
-          });
-      };
-      imageObj.src = 'assets/lion.png';
-
-      showHit(layer);
-
-      layer.hitCanvas._canvas.style.border='2px solid black';
-  });
-
   // ======================================================
   test('image with svg source', function(done) {
       var imageObj = new Image();
@@ -301,7 +253,7 @@ suite('Image', function(){
               image: imageObj,
               width: 100,
               height: 100,
-              offset: {x: 50, y:30},
+              center: {x: 50, y:30},
               draggable: true,
               opacity: 0.5,
               shadowColor: 'black',
@@ -336,7 +288,7 @@ suite('Image', function(){
               image: imageObj,
               width: 100,
               height: 100,
-              offset: {x: 50, y: 30},
+              center: {x: 50, y: 30},
               draggable: true,
               opacity: 0.5,
               shadowColor: 'black',

test/unit/shapes/Rect-test.js

@@ -82,7 +82,7 @@ suite('Rect', function(){
           fill: 'green',
           stroke: 'black',
           strokeWidth: 4,
-          offset: {x: 50, y: 0},
+          center: {x: 50, y: 0},
           scale: {x: 2, y: 2},
           cornerRadius: 15,
           draggable: true

test/unit/shapes/Text-test.js

@@ -44,8 +44,8 @@ suite('Text', function(){
         });
 
         // center text box
-        rect.setOffset(text.getWidth() / 2, text.getHeight() / 2);
-        text.setOffset(text.getWidth() / 2, text.getHeight() / 2);
+        rect.center(text.getWidth() / 2, text.getHeight() / 2);
+        text.center(text.getWidth() / 2, text.getHeight() / 2);
 
         group.add(rect);
         group.add(text);
@@ -82,7 +82,7 @@ suite('Text', function(){
         });
 
         // center text box
-        text.setOffset(text.getWidth() / 2, text.getHeight() / 2);
+        text.center(text.getWidth() / 2, text.getHeight() / 2);
 
         layer.add(text);
         stage.add(layer);