From 0fc44eb3ff820e67918069c9a2e7bfdd374ee6a4 Mon Sep 17 00:00:00 2001
From: Eric Rowell <erowell83@gmail.com>
Date: Sun, 1 Sep 2013 02:03:24 -0700
Subject: [PATCH] finished up all of the context traces for a simple rectangle
 rendering, and added unit test

---
 src/Context.js         | 90 ++++++++++++++++++++++++++++++++----------
 src/Shape.js           | 16 ++++----
 src/shapes/Line.js     |  2 +-
 src/shapes/Spline.js   |  2 +-
 src/shapes/Text.js     |  8 ++--
 test/unit/Rect-test.js | 16 +++++++-
 6 files changed, 97 insertions(+), 37 deletions(-)

diff --git a/src/Context.js b/src/Context.js
index b17f3700..91dc2ece 100644
--- a/src/Context.js
+++ b/src/Context.js
@@ -3,8 +3,25 @@
         OPEN_PAREN = '(',
         CLOSE_PAREN = ')',
         EMPTY_STRING = '',
-        CONTEXT_METHODS = ['clearRect', 'rect', 'restore', 'save', 'setTransform', 'transform'],
-        CONTEXT_PROPERTIES = ['fillStyle', 'lineWidth', 'strokeStyle'];
+        EQUALS = '=',
+        SET = 'set',
+        CONTEXT_METHODS = [
+            'clearRect', 
+            'fill', 
+            'fillText', 
+            'rect', 
+            'restore', 
+            'save', 
+            'setTransform', 
+            'stroke', 
+            'strokeText', 
+            'transform'
+        ],
+        CONTEXT_PROPERTIES = [
+            'fillStyle', 
+            'lineWidth', 
+            'strokeStyle'
+        ];
 
     /**
      * Canvas Context constructor
@@ -73,7 +90,7 @@
          * @memberof Kinetic.Context.prototype
          * @param {Kinetic.Shape} shape
          */
-        fill: function(shape) {
+        fillShape: function(shape) {
             if(shape.getFillEnabled()) {
                 this._fill(shape);
             }
@@ -84,7 +101,7 @@
          * @memberof Kinetic.Context.prototype
          * @param {Kinetic.Shape} shape
          */
-        stroke: function(shape) {
+        strokeShape: function(shape) {
             if(shape.getStrokeEnabled()) {
                 this._stroke(shape);
             }
@@ -159,10 +176,28 @@
             container._drawChildren(this.getCanvas());
             this.restore();
         },
+
+        // context property setters
+        setFillStyle: function(val) {
+            this._context.fillStyle = val;
+        },
+        setLineWidth: function(val) {
+            this._context.lineWidth = val;
+        },
+        setStrokeStyle: function(val) {
+            this._context.strokeStyle = val;
+        },
+
         // context pass through methods
         clearRect: function(x, y, width, height) {
             this._context.clearRect(x, y, width, height);
         },
+        fill: function() {
+            this._context.fill();
+        },
+        fillText: function(str, x, y) {
+            this._context.fillText(str, x, y);
+        },
         rect: function(x, y, width, height) {
             this._context.rect(x, y, width, height);
         },
@@ -175,6 +210,12 @@
         setTransform: function(a, b, c, d, e, f) {
             this._context.setTransform(a, b, c, d, e, f);
         },
+        stroke: function() {
+            this._context.stroke();
+        },
+        strokeText: function(str, x, y) {
+            this._context.strokeText(str, x, y);
+        },
         transform: function(a, b, c, d, e, f) {
             this._context.transform(a, b, c, d, e, f);
         },
@@ -199,9 +240,16 @@
 
             // properties
             len = CONTEXT_PROPERTIES.length;
-
             for (n=0; n<len; n++) {
-                
+                (function(contextProperty) {
+                    var methodName = SET + Kinetic.Util._capitalize(contextProperty),
+                        method = that[methodName];
+
+                    that[methodName] = function(val) {
+                        method.call(that, val);
+                        that._trace(contextProperty + EQUALS + val);
+                    };
+                })(CONTEXT_PROPERTIES[n]);
             }
         }
     };
@@ -215,8 +263,8 @@
             var _context = this._context, 
                 fill = shape.getFill();
 
-            _context.fillStyle = fill;
-            shape._fillFunc(_context);
+            this.setFillStyle(fill);
+            shape._fillFunc(this);
         },
         _fillPattern: function(shape) {
             var _context = this._context,
@@ -241,8 +289,8 @@
                 _context.translate(-1 * fillPatternOffset.x, -1 * fillPatternOffset.y);
             }
 
-            _context.fillStyle = _context.createPattern(fillPatternImage, fillPatternRepeat || 'repeat');
-            _context.fill();
+            this.setFillStyle(_context.createPattern(fillPatternImage, fillPatternRepeat || 'repeat'));
+            this.fill();
         },
         _fillLinearGradient: function(shape) {
             var _context = this._context,
@@ -256,8 +304,8 @@
                 for(var n = 0; n < colorStops.length; n += 2) {
                     grd.addColorStop(colorStops[n], colorStops[n + 1]);
                 }
-                _context.fillStyle = grd;
-                _context.fill();
+                this.setFillStyle(grd);
+                this.fill();
             }
         },
         _fillRadialGradient: function(shape) {
@@ -273,8 +321,8 @@
             for(var n = 0; n < colorStops.length; n += 2) {
                 grd.addColorStop(colorStops[n], colorStops[n + 1]);
             }
-            _context.fillStyle = grd;
-            _context.fill();
+            this.setFillStyle(grd);
+            this.fill();
         },
         _fill: function(shape, skipShadow) {
             var _context = this._context,
@@ -329,9 +377,9 @@
                 dashArray = shape.getDashArray();
 
             if(stroke || strokeWidth) {
-                _context.save();
+                this.save();
                 if (!shape.getStrokeScaleEnabled()) {
-                    _context.setTransform(1, 0, 0, 1, 0, 0);
+                    this.setTransform(1, 0, 0, 1, 0, 0);
                 }
                 this._applyLineCap(shape);
                 if(dashArray && shape.getDashArrayEnabled()) {
@@ -348,10 +396,10 @@
                 if(!skipShadow && shape.hasShadow()) {
                     this._applyShadow(shape);
                 }
-                _context.lineWidth = strokeWidth || 2;
-                _context.strokeStyle = stroke || 'black';
-                shape._strokeFunc(_context);
-                _context.restore();
+                this.setLineWidth(strokeWidth || 2);
+                this.setStrokeStyle(stroke || 'black');
+                shape._strokeFunc(this);
+                this.restore();
 
                 if(!skipShadow && shape.hasShadow()) {
                     this._stroke(shape, true);
@@ -394,7 +442,7 @@
         _fill: function(shape) {
             var _context = this._context;
             _context.save();
-            _context.fillStyle = shape.colorKey;
+            this.setFillStyle(shape.colorKey);
             shape._fillFuncHit(_context);
             _context.restore();
         },
diff --git a/src/Shape.js b/src/Shape.js
index 5eb1f4bf..f0793480 100644
--- a/src/Shape.js
+++ b/src/Shape.js
@@ -1,17 +1,17 @@
 (function() {
     var HAS_SHADOW = 'hasShadow';
 
-    function _fillFunc(_context) {
-        _context.fill();
+    function _fillFunc(context) {
+        context.fill();
     }
-    function _strokeFunc(_context) {
-        _context.stroke();
+    function _strokeFunc(context) {
+        context.stroke();
     }
-    function _fillFuncHit(_context) {
-        _context.fill();
+    function _fillFuncHit(context) {
+        context.fill();
     }
-    function _strokeFuncHit(_context) {
-        _context.stroke();
+    function _strokeFuncHit(context) {
+        context.stroke();
     }
 
     function _clearHasShadowCache() {
diff --git a/src/shapes/Line.js b/src/shapes/Line.js
index 15038a00..8f693b95 100644
--- a/src/shapes/Line.js
+++ b/src/shapes/Line.js
@@ -55,7 +55,7 @@
                 _context.lineTo(point.x, point.y);
             }
 
-            context.stroke(this);
+            context.strokeShape(this);
         }
     };
     Kinetic.Util.extend(Kinetic.Line, Kinetic.Shape);
diff --git a/src/shapes/Spline.js b/src/shapes/Spline.js
index 69880286..e9fdb662 100644
--- a/src/shapes/Spline.js
+++ b/src/shapes/Spline.js
@@ -69,7 +69,7 @@
                 }
             }
 
-            context.stroke(this);
+            context.strokeShape(this);
         },
         _setAllPoints: function() {
             this.allPoints = Kinetic.Util._expandPoints(this.getPoints(), this.getTension());
diff --git a/src/shapes/Text.js b/src/shapes/Text.js
index dc0f12ab..5ab7e908 100644
--- a/src/shapes/Text.js
+++ b/src/shapes/Text.js
@@ -58,11 +58,11 @@
     Kinetic.Text = function(config) {
         this.___init(config);
     };
-    function _fillFunc(_context) {
-        _context.fillText(this.partialText, 0, 0);
+    function _fillFunc(context) {
+        context.fillText(this.partialText, 0, 0);
     }
-    function _strokeFunc(_context) {
-        _context.strokeText(this.partialText, 0, 0);
+    function _strokeFunc(context) {
+        context.strokeText(this.partialText, 0, 0);
     }
 
     Kinetic.Text.prototype = {
diff --git a/test/unit/Rect-test.js b/test/unit/Rect-test.js
index 3b6caca1..10d6cfbe 100644
--- a/test/unit/Rect-test.js
+++ b/test/unit/Rect-test.js
@@ -34,8 +34,20 @@ suite('Rect', function(){
 
     test('context trace array', function() {
       var traceArr = layer.getContext().traceArr;
-      console.log(traceArr)
-      assert.equal(traceArr[0], 'clearRect(0,0,578,200)');
+      var n = 0;
+      //console.log(traceArr);
+      assert.equal(traceArr[n++], 'clearRect(0,0,578,200)');
+      assert.equal(traceArr[n++], 'save()');
+      assert.equal(traceArr[n++], 'transform(1,0,0,1,100,50)');
+      assert.equal(traceArr[n++], 'rect(0,0,100,50)');
+      assert.equal(traceArr[n++], 'fillStyle=green');
+      assert.equal(traceArr[n++], 'fill()');
+      assert.equal(traceArr[n++], 'save()');
+      assert.equal(traceArr[n++], 'lineWidth=2');
+      assert.equal(traceArr[n++], 'strokeStyle=blue');
+      assert.equal(traceArr[n++], 'stroke()');
+      assert.equal(traceArr[n++], 'restore()');
+      assert.equal(traceArr[n++], 'restore()');
     });
   });
 });
\ No newline at end of file