flattened fill attr, created new Node getter and setter generators that handle type conversions for points, sizes, and rotations

tests/js/unit/shapeTests.js

@@ -54,7 +54,7 @@ Test.Modules.SHAPE = {
         var layer = new Kinetic.Layer();
 
         var drawTriangle = function(canvas) {
-        	var context = canvas.getContext();
+            var context = canvas.getContext();
             context.beginPath();
             context.moveTo(200, 50);
             context.lineTo(420, 80);
@@ -100,7 +100,7 @@ Test.Modules.SHAPE = {
         var layer = new Kinetic.Layer();
         var shape = new Kinetic.Shape({
             drawFunc: function(canvas) {
-            	var context = canvas.getContext();
+                var context = canvas.getContext();
                 context.beginPath();
                 context.moveTo(0, 0);
                 context.lineTo(100, 0);
@@ -128,7 +128,7 @@ Test.Modules.SHAPE = {
         var layer = new Kinetic.Layer();
         var shape = new Kinetic.Shape({
             drawFunc: function(canvas) {
-            	var context = canvas.getContext();
+                var context = canvas.getContext();
                 context.beginPath();
                 context.moveTo(0, 0);
                 context.lineTo(100, 0);
@@ -145,7 +145,7 @@ Test.Modules.SHAPE = {
         });
 
         shape.setDrawFunc(function(canvas) {
-        	var context = canvas.getContext();
+            var context = canvas.getContext();
             context.beginPath();
             context.moveTo(0, 0);
             context.lineTo(200, 0);
@@ -166,7 +166,7 @@ Test.Modules.SHAPE = {
         });
 
         rect.setDrawFunc(function(canvas) {
-        	var context = canvas.getContext();
+            var context = canvas.getContext();
             context.beginPath();
             context.moveTo(0, 0);
             context.lineTo(200, 0);
@@ -200,21 +200,15 @@ Test.Modules.SHAPE = {
                 numPoints: 5,
                 innerRadius: 40,
                 outerRadius: 70,
-                fill: {
-                    image: imageObj,
-                    x: -20,
-                    y: -30,
-                    scale: {
-                        x: 0.5,
-                        y: 0.5
-                    },
-                    offset: {
-                        x: 219,
-                        y: 150
-                    },
-                    rotation: Math.PI * 0.5,
-                    repeat: 'no-repeat'
-                },
+
+                fillPatternImage: imageObj,
+                fillPatternX: -20,
+                fillPatternY: -30,
+                fillPatternScale: 0.5,
+                fillPatternOffset: [219, 150],
+                fillPatternRotation: Math.PI * 0.5,
+                fillPatternRepeat: 'no-repeat',
+
                 stroke: 'blue',
                 strokeWidth: 5,
                 draggable: true
@@ -230,33 +224,27 @@ Test.Modules.SHAPE = {
              anim.start();
              */
 
-            test(star.getFill().x === -20, 'star fill x should be -20');
-            test(star.getFill().y === -30, 'star fill y should be -30');
-            test(star.getFill().scale.x === 0.5, 'star fill scale x should be 0.5');
-            test(star.getFill().scale.y === 0.5, 'star fill scale y should be 0.5');
-            test(star.getFill().offset.x === 219, 'star fill offset x should be 219');
-            test(star.getFill().offset.y === 150, 'star fill offset y should be 150');
-            test(star.getFill().rotation === Math.PI * 0.5, 'star fill rotation should be Math.PI * 0.5');
+            test(star.getFillPatternX() === -20, 'star fill x should be -20');
+            test(star.getFillPatternY() === -30, 'star fill y should be -30');
+            test(star.getFillPatternScale().x === 0.5, 'star fill scale x should be 0.5');
+            test(star.getFillPatternScale().y === 0.5, 'star fill scale y should be 0.5');
+            test(star.getFillPatternOffset().x === 219, 'star fill offset x should be 219');
+            test(star.getFillPatternOffset().y === 150, 'star fill offset y should be 150');
+            test(star.getFillPatternRotation() === Math.PI * 0.5, 'star fill rotation should be Math.PI * 0.5');
 
-            star.setFill({
-				rotationDeg: 180
-            });
-            
-            test(star.getFill().rotation === Math.PI, 'star fill rotation should be Math.PI');
-            
-            star.setFill({
-            	scale: 1
-            });
-            
-            test(star.getFill().scale.x === 1, 'star fill scale x should be 1');
-            test(star.getFill().scale.y === 1, 'star fill scale y should be 1');
-            
-            star.setFill({
-            	offset: [100, 120]
-            });
-            
-            test(star.getFill().offset.x === 100, 'star fill offset x should be 100');
-            test(star.getFill().offset.y === 120, 'star fill offset y should be 120');
+            star.setFillPatternRotationDeg(180);
+
+            test(star.getFillPatternRotation() === Math.PI, 'star fill rotation should be Math.PI');
+
+            star.setFillPatternScale(1);
+
+            test(star.getFillPatternScale().x === 1, 'star fill scale x should be 1');
+            test(star.getFillPatternScale().y === 1, 'star fill scale y should be 1');
+
+            star.setFillPatternOffset([100, 120]);
+
+            test(star.getFillPatternOffset().x === 100, 'star fill offset x should be 100');
+            test(star.getFillPatternOffset().y === 120, 'star fill offset y should be 120');
 
         };
         imageObj.src = '../assets/darth-vader.jpg';
@@ -328,5 +316,50 @@ Test.Modules.SHAPE = {
         test(ellipse.getSize().height === 100, 'ellipse height should be 100');
         test(ellipse.getRadius().x === 200, 'ellipse radius x should be 200');
 
+    },
+    'set image fill to color then image then linear gradient then back to image': function(containerId) {
+        var imageObj = new Image();
+        imageObj.onload = function() {
+            var stage = new Kinetic.Stage({
+                container: containerId,
+                width: 578,
+                height: 200
+            });
+            var layer = new Kinetic.Layer();
+            var circle = new Kinetic.Circle({
+                x: 200,
+                y: 60,
+                radius: 50,
+                fill: 'blue'
+            });
+
+            layer.add(circle);
+            stage.add(layer);
+
+            test(circle.getFill() === 'blue', 'circle fill should be blue');
+
+            circle.setFill(null);
+            circle.setFillPatternImage(imageObj);
+            circle.setFillPatternRepeat('no-repeat');
+            circle.setFillPatternOffset([-200, -70]);
+
+            test(circle.getFillPatternImage() !== undefined, 'circle fill image should be defined');
+            test(circle.getFillPatternRepeat() === 'no-repeat', 'circle fill repeat should be no-repeat');
+            test(circle.getFillPatternOffset().x === -200, 'circle fill offset x should be -200');
+            test(circle.getFillPatternOffset().y === -70, 'circle fill offset y should be -70');
+
+            circle.setFillPatternImage(null);
+            circle.setFillLinearGradientStartPoint(-35);
+            circle.setFillLinearGradientEndPoint(35);
+            circle.setFillLinearGradientColorStops([0, 'red', 1, 'blue']);
+            
+            circle.setFillLinearGradientStartPoint(null);
+            circle.setFillPatternImage(imageObj);
+            circle.setFillPatternRepeat('repeat');
+            circle.setFillPatternOffset(0);
+
+            layer.draw();
+        };
+        imageObj.src = '../assets/darth-vader.jpg';
     }
 };

tests/js/unit/shapes/circleTests.js

@@ -48,12 +48,9 @@ Test.Modules.CIRCLE = {
                 x: stage.getWidth() / 2,
                 y: stage.getHeight() / 2,
                 radius: 70,
-                fill: {
-                    image: imageObj,
-                    repeat: 'no-repeat',
-                    offset: [-200, -70],
-                    scale: 0.7
-                },
+                fillPatternImage: imageObj,
+                fillPatternOffset: -5,
+                fillPatternScale: 0.7,
                 stroke: 'black',
                 strokeWidth: 4,
                 name: 'myCircle',
@@ -64,48 +61,22 @@ Test.Modules.CIRCLE = {
             layer.add(group);
             stage.add(layer);
 
-            test(circle.getFill().repeat === 'no-repeat', 'repeat option should be no-repeat');
-            test(circle.getFill().offset.x === -200, 'fill offset x should be -200');
-            test(circle.getFill().offset.y === -70, 'fill offset y should be -70');
+            test(circle.getFillPatternOffset().x === -5, 'fill offset x should be -5');
+            test(circle.getFillPatternOffset().y === -5, 'fill offset y should be -5');
 
             /*
              * test offset setting
              */
-            circle.setFill({
-                offset: [1, 2]
-            });
-            test(circle.getFill().offset.x === 1, 'fill offset x should be 1');
-            test(circle.getFill().offset.y === 2, 'fill offset y should be 2');
+            circle.setFillPatternOffset(1, 2);
+            test(circle.getFillPatternOffset().x === 1, 'fill offset x should be 1');
+            test(circle.getFillPatternOffset().y === 2, 'fill offset y should be 2');
 
-            circle.setFill({
-                offset: {
-                    x: 3,
-                    y: 4
-                }
+            circle.setFillPatternOffset({
+                x: 3,
+                y: 4
             });
-            test(circle.getFill().offset.x === 3, 'fill offset x should be 3');
-            test(circle.getFill().offset.y === 4, 'fill offset y should be 4');
-
-            circle.setFill({
-                offset: {
-                    x: 5
-                }
-            });
-            test(circle.getFill().offset.x === 5, 'fill offset x should be 5');
-            test(circle.getFill().offset.y === 4, 'fill offset y should be 4');
-
-            circle.setFill({
-                offset: {
-                    y: 6
-                }
-            });
-            test(circle.getFill().offset.x === 5, 'fill offset x should be 5');
-            test(circle.getFill().offset.y === 6, 'fill offset y should be 6');
-
-            circle.setFill({
-                offset: [-200, -70]
-            });
-
+            test(circle.getFillPatternOffset().x === 3, 'fill offset x should be 3');
+            test(circle.getFillPatternOffset().y === 4, 'fill offset y should be 4');
         };
         imageObj.src = '../assets/darth-vader.jpg';
 
@@ -122,19 +93,11 @@ Test.Modules.CIRCLE = {
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
-            fill: {
-                start: {
-                    x: -20,
-                    y: -20,
-                    radius: 0
-                },
-                end: {
-                    x: -60,
-                    y: -60,
-                    radius: 130
-                },
-                colorStops: [0, 'red', 0.2, 'yellow', 1, 'blue']
-            },
+            fillRadialGradientStartPoint: -20,
+            fillRadialGradientStartRadius: 0,
+            fillRadialGradientEndPoint: -60,
+            fillRadialGradientEndRadius: 130,
+            fillRadialGradientColorStops: [0, 'red', 0.2, 'yellow', 1, 'blue'],
             name: 'myCircle',
             draggable: true,
             scale: {
@@ -147,19 +110,15 @@ Test.Modules.CIRCLE = {
         layer.add(group);
         stage.add(layer);
 
-        var fill = circle.getFill();
+        test(circle.getFillRadialGradientStartPoint().x === -20, 'fill start x should be 20');
+        test(circle.getFillRadialGradientStartPoint().y === -20, 'fill start y should be 20');
+        test(circle.getFillRadialGradientStartRadius() === 0, 'fill start radius should be 0');
 
-        test(fill.start.x === -20, 'fill start x should be 20');
-        test(fill.start.y === -20, 'fill start y should be 20');
-        test(fill.start.radius === 0, 'fill start radius should be 0');
+        test(circle.getFillRadialGradientEndPoint().x === -60, 'fill end x should be 60');
+        test(circle.getFillRadialGradientEndPoint().y === -60, 'fill end y should be 60');
+        test(circle.getFillRadialGradientEndRadius() === 130, 'fill end radius should be 130');
 
-        test(fill.end.x === -60, 'fill end x should be 60');
-        test(fill.end.y === -60, 'fill end y should be 60');
-        test(fill.end.radius === 130, 'fill end radius should be 130');
-
-        test(fill.colorStops.length === 6, 'fill colorStops length should be 6');
-
-      
+        test(circle.getFillRadialGradientColorStops().length === 6, 'fill colorStops length should be 6');
 
     },
     'add circle': function(containerId) {
@@ -192,17 +151,9 @@ Test.Modules.CIRCLE = {
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: 70,
-            fill: {
-                start: {
-                    x: -35,
-                    y: -35
-                },
-                end: {
-                    x: 35,
-                    y: 35
-                },
-                colorStops: [0, 'red', 1, 'blue']
-            },
+            fillLinearGradientStartPoint: -35,
+            fillLinearGradientEndPoint: 35,
+            fillLinearGradientColorStops: [0, 'red', 1, 'blue'],
             stroke: 'black',
             strokeWidth: 4,
             name: 'myCircle',
@@ -215,7 +166,6 @@ Test.Modules.CIRCLE = {
 
         test(circle.getName() === 'myCircle', 'circle name should be myCircle');
 
-
     },
     'add circle with opacity': function(containerId) {
         var stage = new Kinetic.Stage({

tests/js/unit/shapes/imageTests.js

@@ -335,62 +335,6 @@ Test.Modules.IMAGE = {
         };
         imageObj.src = '../assets/darth-vader.jpg';
     },
-    'set image fill to color then image then linear gradient then back to image': function(containerId) {
-        var imageObj = new Image();
-        imageObj.onload = function() {
-            var stage = new Kinetic.Stage({
-                container: containerId,
-                width: 578,
-                height: 200
-            });
-            var layer = new Kinetic.Layer();
-            var circle = new Kinetic.Circle({
-                x: 200,
-                y: 60,
-                radius: 50,
-                fill: 'blue'
-            });
-
-            layer.add(circle);
-            stage.add(layer);
-
-            test(circle.getFill() === 'blue', 'circle fill should be blue');
-
-            circle.setFill({
-                image: imageObj,
-                repeat: 'no-repeat',
-                offset: [-200, -70]
-            });
-
-            test(circle.getFill().image !== undefined, 'circle fill image should be defined');
-            test(circle.getFill().repeat === 'no-repeat', 'circle fill repeat should be no-repeat');
-            test(circle.getFill().offset.x === -200, 'circle fill offset x should be -200');
-            test(circle.getFill().offset.y === -70, 'circle fill offset y should be -70');
-
-            circle.setFill({
-                start: {
-                    x: -35,
-                    y: -35
-                },
-                end: {
-                    x: 35,
-                    y: 35
-                },
-                colorStops: [0, 'red', 1, 'blue']
-            });
-
-            test(circle.getFill().image === undefined, 'circle fill image should be undefined');
-
-            circle.setFill({
-                image: imageObj,
-                repeat: 'no-repeat',
-                offset: [-200, -70]
-            });
-
-            layer.draw();
-        };
-        imageObj.src = '../assets/darth-vader.jpg';
-    },
     'apply shadow to transparent image': function(containerId) {
         var imageObj = new Image();