migrated Ellipse test to Mocha, and finished up context wrapper methods

src/Context.js

@@ -11,14 +11,20 @@
             'beginPath',
             'bezierCurveTo',
             'clearRect', 
+            'clip',
             'closePath',
+            'createLinearGradient',
+            'createPattern',
+            'createRadialGradient',
             'fill', 
             'fillText', 
             'lineTo',
             'moveTo',
             'rect', 
             'restore', 
+            'rotate',
             'save', 
+            'scale',
             'setTransform', 
             'stroke', 
             'strokeText', 
@@ -154,19 +160,19 @@
         _applyLineCap: function(shape) {
             var lineCap = shape.getLineCap();
             if(lineCap) {
-                this._context.lineCap = lineCap;
+                this.setAttr('lineCap', lineCap);
             }
         },
         _applyOpacity: function(shape) {
             var absOpacity = shape.getAbsoluteOpacity();
             if(absOpacity !== 1) {
-                this._context.globalAlpha = absOpacity;
+                this.setAttr('globalAlpha', absOpacity);
             }
         },
         _applyLineJoin: function(shape) {
             var lineJoin = shape.getLineJoin();
             if(lineJoin) {
-                this._context.lineJoin = lineJoin;
+                this.setAttr('lineJoin', lineJoin);
             }
         },
         _applyAncestorTransforms: function(shape) {
@@ -174,8 +180,7 @@
             this.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
         },
         _clip: function(container) {
-            var _context = this._context,
+            var clipX = container.getClipX() || 0,
-                clipX = container.getClipX() || 0,
                 clipY = container.getClipY() || 0,
                 clipWidth = container.getClipWidth(),
                 clipHeight = container.getClipHeight();
@@ -184,7 +189,7 @@
             this._applyAncestorTransforms(container);
             this.beginPath();
             this.rect(clipX, clipY, clipWidth, clipHeight);
-            _context.clip();
+            this.clip();
             this.reset();
             container._drawChildren(this.getCanvas());
             this.restore();
@@ -210,9 +215,25 @@
             var a = arguments;
             this._context.clearRect(a[0], a[1], a[2], a[3]);
         },
+        clip: function() {
+            var a = arguments;
+            this._context.clip(a[0], a[1], a[2], a[3]);
+        },
         closePath: function() {
             this._context.closePath();
         },
+        createLinearGradient: function() {
+            var a = arguments;
+            return this._context.createLinearGradient(a[0], a[1], a[2], a[3]);
+        },
+        createPattern: function() {
+            var a = arguments;
+            this._context.createPattern(a[0], a[1]);
+        },
+        createRadialGradient: function() {
+            var a = arguments;
+            return this._context.createRadialGradient(a[0], a[1], a[2], a[3], a[4], a[5]);
+        },
         fill: function() {
             this._context.fill();
         },
@@ -235,9 +256,17 @@
         restore: function() {
             this._context.restore();
         },
+        rotate: function() {
+            var a = arguments;
+            this._context.rotate(a[0]);
+        },
         save: function() {
             this._context.save();
         },
+        scale: function() {
+            var a = arguments;
+            this._context.scale(a[0], a[1]);
+        },
         setTransform: function() {
             var a = arguments;
             this._context.setTransform(a[0], a[1], a[2], a[3], a[4], a[5]);
@@ -267,11 +296,14 @@
             // methods
             for (n=0; n<len; n++) {
                 (function(methodName) {
-                    var origMethod = that[methodName];
+                    var origMethod = that[methodName],
+                        ret;
+
                     that[methodName] = function() {
                         args = _roundArrValues(Array.prototype.slice.call(arguments, 0));
-                        origMethod.apply(that, arguments);
+                        ret = origMethod.apply(that, arguments);
                         that._trace(methodName + OPEN_PAREN + args.join(COMMA) + CLOSE_PAREN);
+                        return ret;
                     };
                 })(CONTEXT_METHODS[n]);
             }
@@ -296,8 +328,7 @@
             shape._fillFunc(this);
         },
         _fillPattern: function(shape) {
-            var _context = this._context,
+            var fillPatternImage = shape.getFillPatternImage(),
-                fillPatternImage = shape.getFillPatternImage(),
                 fillPatternX = shape.getFillPatternX(),
                 fillPatternY = shape.getFillPatternY(),
                 fillPatternScale = shape.getFillPatternScale(),
@@ -309,24 +340,23 @@
                 this.translate(fillPatternX || 0, fillPatternY || 0);
             }
             if(fillPatternRotation) {
-                _context.rotate(fillPatternRotation);
+                this.rotate(fillPatternRotation);
             }
             if(fillPatternScale) {
-                _context.scale(fillPatternScale.x, fillPatternScale.y);
+                this.scale(fillPatternScale.x, fillPatternScale.y);
             }
             if(fillPatternOffset) {
                 this.translate(-1 * fillPatternOffset.x, -1 * fillPatternOffset.y);
             }
 
-            this.setAttr('fillStyle', _context.createPattern(fillPatternImage, fillPatternRepeat || 'repeat'));
+            this.setAttr('fillStyle', this.createPattern(fillPatternImage, fillPatternRepeat || 'repeat'));
             this.fill();
         },
         _fillLinearGradient: function(shape) {
-            var _context = this._context,
+            var start = shape.getFillLinearGradientStartPoint(),
-                start = shape.getFillLinearGradientStartPoint(),
                 end = shape.getFillLinearGradientEndPoint(),
                 colorStops = shape.getFillLinearGradientColorStops(),
-                grd = _context.createLinearGradient(start.x, start.y, end.x, end.y);
+                grd = this.createLinearGradient(start.x, start.y, end.x, end.y);
 
             if (colorStops) {
                 // build color stops
@@ -338,13 +368,12 @@
             }
         },
         _fillRadialGradient: function(shape) {
-            var _context = this._context,
+            var start = shape.getFillRadialGradientStartPoint(),
-            start = shape.getFillRadialGradientStartPoint(),
             end = shape.getFillRadialGradientEndPoint(),
             startRadius = shape.getFillRadialGradientStartRadius(),
             endRadius = shape.getFillRadialGradientEndRadius(),
             colorStops = shape.getFillRadialGradientColorStops(),
-            grd = _context.createRadialGradient(start.x, start.y, startRadius, end.x, end.y, endRadius);
+            grd = this.createRadialGradient(start.x, start.y, startRadius, end.x, end.y, endRadius);
 
             // build color stops
             for(var n = 0; n < colorStops.length; n += 2) {
@@ -354,16 +383,14 @@
             this.fill();
         },
         _fill: function(shape, skipShadow) {
-            var _context = this._context,
+            var hasColor = shape.getFill(),
-                hasColor = shape.getFill(),
                 hasPattern = shape.getFillPatternImage(),
                 hasLinearGradient = shape.getFillLinearGradientColorStops(),
                 hasRadialGradient = shape.getFillRadialGradientColorStops(),
                 fillPriority = shape.getFillPriority();
 
-            this.save();
-
             if(!skipShadow && shape.hasShadow()) {
+                this.save();
                 this._applyShadow(shape);
             }
 
@@ -393,9 +420,9 @@
             else if(hasRadialGradient) {
                 this._fillRadialGradient(shape);
             }
-            this.restore();
             
             if(!skipShadow && shape.hasShadow()) {
+                this.restore();
                 this._fill(shape, true);
             }
         },
@@ -406,8 +433,8 @@
                 dashArray = shape.getDashArray();
 
             if(stroke || strokeWidth) {
-                this.save();
                 if (!shape.getStrokeScaleEnabled()) {
+                    this.save();
                     this.setTransform(1, 0, 0, 1, 0, 0);
                 }
                 this._applyLineCap(shape);
@@ -428,16 +455,15 @@
                 this.setAttr('lineWidth', strokeWidth || 2);
                 this.setAttr('strokeStyle', stroke || 'black');
                 shape._strokeFunc(this);
-                this.restore();
                 
                 if(!skipShadow && shape.hasShadow()) {
+                    this.restore();
                     this._stroke(shape, true);
                 }
             }
         },
         _applyShadow: function(shape) {
-            var _context = this._context,
+            var util, absOpacity, color, blur, offset, shadowOpacity;
-                util, absOpacity, color, blur, offset, shadowOpacity;
 
             if(shape.hasShadow() && shape.getShadowEnabled()) {
                 util = Kinetic.Util;
@@ -451,13 +477,13 @@
                 });
 
                 if(shadowOpacity) {
-                    _context.globalAlpha = shadowOpacity * absOpacity;
+                    this.setAttr('globalAlpha', shadowOpacity * absOpacity);
                 }
 
-                _context.shadowColor = color;
+                this.setAttr('shadowColor', color);
-                _context.shadowBlur = blur;
+                this.setAttr('shadowBlur', blur);
-                _context.shadowOffsetX = offset.x;
+                this.setAttr('shadowOffsetX', offset.x);
-                _context.shadowOffsetY = offset.y;
+                this.setAttr('shadowOffsetY', offset.y);
             }
         }
     };
@@ -469,21 +495,19 @@
 
     Kinetic.HitContext.prototype = {
         _fill: function(shape) {
-            var _context = this._context;
             this.save();
             this.setAttr('fillStyle', shape.colorKey);
             shape._fillFuncHit(this);
             this.restore();
         },
         _stroke: function(shape) {
-            var _context = this._context,
+            var stroke = shape.getStroke(),
-                stroke = shape.getStroke(),
                 strokeWidth = shape.getStrokeWidth();
 
             if(stroke || strokeWidth) {
                 this._applyLineCap(shape);
-                _context.lineWidth = strokeWidth || 2;
+                this.setAttr('lineWidth', strokeWidth || 2);
-                _context.strokeStyle = shape.colorKey;
+                this.setAttr('strokeStyle', shape.colorKey);
                 shape._strokeFuncHit(this);
             }
         }

src/Node.js

@@ -1009,16 +1009,16 @@
                     height: config.height || stage.getHeight(),
                     pixelRatio: 1
                 }),
-                _context = canvas.getContext()._context;
+                context = canvas.getContext();
 
-            _context.save();
+            context.save();
 
             if(x || y) {
-                _context.translate(-1 * x, -1 * y);
+                context.translate(-1 * x, -1 * y);
             }
 
             this.drawScene(canvas);
-            _context.restore();
+            context.restore();
 
             return canvas.toDataURL(mimeType, quality);
         },

src/shapes/Ellipse.js

@@ -26,14 +26,14 @@
             var _context = context._context, 
                 r = this.getRadius();
 
-            _context.beginPath();
+            context.beginPath();
-            _context.save();
+            context.save();
             if(r.x !== r.y) {
-                _context.scale(1, r.y / r.x);
+                context.scale(1, r.y / r.x);
             }
-            _context.arc(0, 0, r.x, 0, PIx2, false);
+            context.arc(0, 0, r.x, 0, PIx2, false);
-            _context.restore();
+            context.restore();
-            _context.closePath();
+            context.closePath();
             context.fillStrokeShape(this);
         },
         getWidth: function() {

test/runner.html

@@ -30,6 +30,7 @@
     <script src="unit/Circle-test.js"></script>
     <script src="unit/Text-test.js"></script>
     <script src="unit/Blob-test.js"></script>
+    <script src="unit/Ellipse-test.js"></script>
     <script>
       if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
       else { mocha.run(); }

test/unit/Circle-test.js

@@ -42,7 +42,7 @@ suite('Circle', function(){
 
     var trace = layer.getContext().getTrace();
     //console.log(trace);
-    assert.equal(trace, 'clearRect(0,0,578,200);clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();save();fillStyle=green;fill();restore();save();lineWidth=4;strokeStyle=black;stroke();restore();restore()');
+    assert.equal(trace, 'clearRect(0,0,578,200);clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore()');
   });
 
   // ======================================================

test/unit/Ellipse-test.js

@@ -0,0 +1,26 @@
+suite('Ellipse', function(){
+
+  // ======================================================
+  test('add ellipse', function(){
+      var stage = new Kinetic.Stage({
+          container: 'container',
+          width: 578,
+          height: 200
+      });
+      var layer = new Kinetic.Layer();
+      var ellipse = new Kinetic.Ellipse({
+          x: stage.getWidth() / 2,
+          y: stage.getHeight() / 2,
+          radius: [70, 35],
+          fill: 'green',
+          stroke: 'black',
+          strokeWidth: 8
+      });
+      layer.add(ellipse);
+      stage.add(layer);
+      assert.equal(ellipse.getClassName(), 'Ellipse');
+
+      var trace = layer.getContext().getTrace();
+      assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,289,100);beginPath();save();scale(1,0.5);arc(0,0,70,0,6.283,false);restore();closePath();fillStyle=green;fill();lineWidth=8;strokeStyle=black;stroke();restore()');
+  });
+});

test/unit/Rect-test.js

@@ -27,7 +27,7 @@ suite('Rect', function(){
 
     var trace = layer.getContext().getTrace();
     //console.log(trace);
-    assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);beginPath();rect(0,0,100,50);closePath();save();fillStyle=green;fill();restore();save();lineWidth=2;strokeStyle=blue;stroke();restore();restore()');
+    assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=2;strokeStyle=blue;stroke();restore()');
 
   });
 
@@ -69,8 +69,8 @@ suite('Rect', function(){
     assert.equal(rect.getCornerRadius(), 5);
 
     var trace = layer.getContext().getTrace();
-    //console.log(trace);
+    //console.log(layer.getContext().traceArr);
-    assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);beginPath();moveTo(5,0);lineTo(95,0);arc(95,5,5,4.712,0,false);lineTo(100,45);arc(95,45,5,0,1.571,false);lineTo(5,50);arc(5,45,5,1.571,3.142,false);lineTo(0,5);arc(5,5,5,3.142,4.712,false);closePath();save();fillStyle=green;fill();restore();save();fillStyle=green;fill();restore();save();lineWidth=2;strokeStyle=blue;stroke();restore();restore()');
+    assert.equal(trace, 'clearRect(0,0,578,200);save();globalAlpha=0.4;transform(1,0,0,1,100,50);beginPath();moveTo(5,0);lineTo(95,0);arc(95,5,5,4.712,0,false);lineTo(100,45);arc(95,45,5,0,1.571,false);lineTo(5,50);arc(5,45,5,1.571,3.142,false);lineTo(0,5);arc(5,5,5,3.142,4.712,false);closePath();save();globalAlpha=0.2;shadowColor=red;shadowBlur=10;shadowOffsetX=5;shadowOffsetY=5;fillStyle=green;fill();restore();fillStyle=green;fill();lineWidth=2;strokeStyle=blue;stroke();restore()');
 
   });
 

test/unit/Text-test.js

@@ -252,7 +252,7 @@ suite('Text', function(){
         layer.add(text);
         stage.add(layer);
 
-        console.log(layer.getContext().getTrace());
+        //console.log(layer.getContext().getTrace());
 
     });
 

tests/js/unit/shapes/ellipseTests.js

@@ -1,21 +0,0 @@
-Test.Modules.ELLIPSE = {
-    'add ellipse': function(containerId) {
-        var stage = new Kinetic.Stage({
-            container: containerId,
-            width: 578,
-            height: 200
-        });
-        var layer = new Kinetic.Layer();
-        var ellipse = new Kinetic.Ellipse({
-            x: stage.getWidth() / 2,
-            y: stage.getHeight() / 2,
-            radius: [70, 35],
-            fill: 'green',
-            stroke: 'black',
-            strokeWidth: 8
-        });
-        layer.add(ellipse);
-        stage.add(layer);
-        test(ellipse.getClassName() === 'Ellipse', 'shape type should be Ellipse');
-    }
-};