From b02b9cba157d0447ea531493a4df7514cf1762e4 Mon Sep 17 00:00:00 2001
From: Justin Windle <jwindle@google.com>
Date: Tue, 28 May 2013 13:27:50 -0400
Subject: [PATCH] Added chaining feature which will allow for the chaining of
 any methods that would otherwise return `void`. This can be switched on by
 passing `true` as the `chain` flag in options (`false` by default). #18

---
 examples/drawing.html | 16 ++++++++++------
 js/sketch.js          | 33 ++++++++++++++++++++++-----------
 js/sketch.min.js      |  2 +-
 tests/spec/sketch.js  | 20 ++++++++++++++++++++
 4 files changed, 53 insertions(+), 18 deletions(-)

diff --git a/examples/drawing.html b/examples/drawing.html
index 802e6f9..c6ccec4 100644
--- a/examples/drawing.html
+++ b/examples/drawing.html
@@ -33,6 +33,10 @@ <h3>Start drawing!</h3>
             container: document.getElementById( 'container' ),
             autoclear: false,
 
+            // Return the sketch from any methods that would otherwise return `void`.
+            // This allows the chaining of methods (`a().b().c()`) for faster typing.
+            chain: true,
+
             setup: function() {
                 console.log( 'setup' );
             },
@@ -41,8 +45,7 @@ <h3>Start drawing!</h3>
                 radius = 2 + abs( sin( this.millis * 0.003 ) * 50 );
             },
 
-            // Event handlers
-
+            // You can easily query sketch as to whether a certain key is pressed
             keydown: function() {
                 if ( this.keys.C ) this.clear();
             },
@@ -62,10 +65,11 @@ <h3>Start drawing!</h3>
                     this.fillStyle = this.strokeStyle = COLOURS[ i % COLOURS.length ];
                     this.lineWidth = radius;
 
-                    this.beginPath();
-                    this.moveTo( touch.ox, touch.oy );
-                    this.lineTo( touch.x, touch.y );
-                    this.stroke();
+                    // Draw using chained methods
+                    this.beginPath()
+                        .moveTo( touch.ox, touch.oy )
+                        .lineTo( touch.x, touch.y )
+                        .stroke();
                 }
             }
         });
diff --git a/js/sketch.js b/js/sketch.js
index c4174d9..587fdd6 100755
--- a/js/sketch.js
+++ b/js/sketch.js
@@ -36,6 +36,7 @@ var Sketch = (function() {
         interval: 1,
         globals: true,
         retina: false,
+        chain: false,
         type: CANVAS
     };
 
@@ -101,26 +102,27 @@ var Sketch = (function() {
 
         return function() {
 
-            method.apply( context, arguments );
+            var result = method.apply( context, arguments );
+            return result === void 0 ? context : result;
         };
     }
 
-    function clone( target ) {
+    function clone( target, chain ) {
 
-        var object = {};
+        var result = chain ? target : {};
 
         for ( var key in target ) {
 
             if ( isFunction( target[ key ] ) )
 
-                object[ key ] = proxy( target[ key ], target );
+                result[ key ] = proxy( target[ key ], target );
 
-            else
+            else if ( !chain )
 
-                object[ key ] = target[ key ];
+                result[ key ] = target[ key ];
         }
 
-        return object;
+        return result;
     }
 
     /*
@@ -388,7 +390,7 @@ var Sketch = (function() {
             stop();
         }
 
-        extend( context, {
+        instances.push( extend( context, {
 
             touches: touches,
             mouse: mouse,
@@ -405,11 +407,16 @@ var Sketch = (function() {
             clear: clear,
             start: start,
             stop: stop
-        });
 
-        instances.push( context );
+        }));
 
-        return ( context.autostart && start(), bind( true ), resize(), update(), context );
+        return (
+            context.autostart && start(),
+            bind( true ),
+            resize(),
+            update(),
+            context
+        );
     }
 
     /*
@@ -506,6 +513,10 @@ var Sketch = (function() {
 
             options = extend( options || {}, defaults );
 
+            if ( options.chain )
+
+                clone( context, true );
+
             options.element = context.canvas || context;
             options.element.className += ' sketch';
 
diff --git a/js/sketch.min.js b/js/sketch.min.js
index 29b9b40..3cb77aa 100644
--- a/js/sketch.min.js
+++ b/js/sketch.min.js
@@ -1,2 +1,2 @@
 /* Copyright (C) 2013 Justin Windle, http://soulwire.co.uk */
-var Sketch=function(){"use strict";function e(e){return"[object Array]"==Object.prototype.toString.call(e)}function t(e){return"function"==typeof e}function n(e){return"number"==typeof e}function o(e){return"string"==typeof e}function r(e){return C[e]||String.fromCharCode(e)}function i(e,t,n){for(var o in t)(n||!e.hasOwnProperty(o))&&(e[o]=t[o]);return e}function u(e,t){return function(){e.apply(t,arguments)}}function a(e){var n={};for(var o in e)n[o]=t(e[o])?u(e[o],e):e[o];return n}function c(e){function n(n){t(n)&&n.apply(e,[].splice.call(arguments,1))}function u(e){for(D=0;D<J.length;D++)B=J[D],o(B)?R[(e?"add":"remove")+"EventListener"].call(R,B,k,!1):t(B)?k=B:R=B}function c(){O(T),T=I(c),U||(n(e.setup),U=t(e.setup),n(e.resize)),e.running&&!j&&(e.dt=(z=+new Date)-e.now,e.millis+=e.dt,e.now=z,n(e.update),e.autoclear&&K&&e.clear(),n(e.draw)),j=++j%e.interval}function l(){R=Y?e.style:e.canvas,_=Y?"px":"",e.fullscreen&&(e.height=w.innerHeight,e.width=w.innerWidth),R.height=e.height+_,R.width=e.width+_,e.retina&&K&&X&&(R.height=e.height*X,R.width=e.width*X,R.style.height=e.height+"px",R.style.width=e.width+"px",e.scale(X,X)),U&&n(e.resize)}function s(e,t){return N=t.getBoundingClientRect(),e.x=e.pageX-N.left-w.scrollX,e.y=e.pageY-N.top-w.scrollY,e}function f(t,n){return s(t,e.element),n=n||{},n.ox=n.x||t.x,n.oy=n.y||t.y,n.x=t.x,n.y=t.y,n.dx=n.x-n.ox,n.dy=n.y-n.oy,n}function g(e){if(e.preventDefault(),F=a(e),F.originalEvent=e,F.touches)for(M.length=F.touches.length,D=0;D<F.touches.length;D++)M[D]=f(F.touches[D],M[D]);else M.length=0,M[0]=f(F,V);return i(V,M[0],!0),F}function h(t){for(t=g(t),q=(Q=J.indexOf(G=t.type))-1,e.dragging=/down|start/.test(G)?!0:/up|end/.test(G)?!1:e.dragging;q;)o(J[q])?n(e[J[q--]],t):o(J[Q])?n(e[J[Q++]],t):q=0}function p(t){H=t.keyCode,W="keyup"==t.type,Z[H]=Z[r(H)]=!W,n(e[t.type],t)}function v(t){e.autopause&&("blur"==t.type?b:E)(),n(e[t.type],t)}function E(){e.now=+new Date,e.running=!0}function b(){e.running=!1}function P(){(e.running?b:E)()}function A(){K&&e.clearRect(0,0,e.width,e.height)}function S(){L=e.element.parentNode,D=x.indexOf(e),L&&L.removeChild(e.element),~D&&x.splice(D,1),u(!1),b()}var T,k,R,L,N,D,_,z,B,F,G,H,W,q,Q,j=0,M=[],U=!1,X=w.devicePixelRatio,Y=e.type==m,K=e.type==d,V={x:0,y:0,ox:0,oy:0,dx:0,dy:0},J=[e.element,h,"mousedown","touchstart",h,"mousemove","touchmove",h,"mouseup","touchend",h,"click",y,p,"keydown","keyup",w,v,"focus","blur",l,"resize"],Z={};for(H in C)Z[C[H]]=!1;return i(e,{touches:M,mouse:V,keys:Z,dragging:!1,running:!1,millis:0,now:0/0,dt:0/0,destroy:S,toggle:P,clear:A,start:E,stop:b}),x.push(e),e.autostart&&E(),u(!0),l(),c(),e}for(var l,s,f="E LN10 LN2 LOG2E LOG10E PI SQRT1_2 SQRT2 abs acos asin atan ceil cos exp floor log round sin sqrt tan atan2 pow max min".split(" "),g="__hasSketch",h=Math,d="canvas",p="webgl",m="dom",y=document,w=window,x=[],v={fullscreen:!0,autostart:!0,autoclear:!0,autopause:!0,container:y.body,interval:1,globals:!0,retina:!1,type:d},C={8:"BACKSPACE",9:"TAB",13:"ENTER",16:"SHIFT",27:"ESCAPE",32:"SPACE",37:"LEFT",38:"UP",39:"RIGHT",40:"DOWN"},E={CANVAS:d,WEBGL:p,DOM:m,instances:x,install:function(t){if(!t[g]){for(var o=0;o<f.length;o++)t[f[o]]=h[f[o]];i(t,{TWO_PI:2*h.PI,HALF_PI:h.PI/2,QUATER_PI:h.PI/4,random:function(t,o){return e(t)?t[~~(h.random()*t.length)]:(n(o)||(o=t||1,t=0),t+h.random()*(o-t))},lerp:function(e,t,n){return e+n*(t-e)},map:function(e,t,n,o,r){return(e-t)/(n-t)*(r-o)+o}}),t[g]=!0}},create:function(e){return e=i(e||{},v),e.globals&&E.install(self),l=e.element=e.element||y.createElement(e.type===m?"div":"canvas"),s=e.context=e.context||function(){switch(e.type){case d:return l.getContext("2d",e);case p:return l.getContext("webgl",e)||l.getContext("experimental-webgl",e);case m:return l.canvas=l}}(),e.container.appendChild(l),E.augment(s,e)},augment:function(e,t){return t=i(t||{},v),t.element=e.canvas||e,t.element.className+=" sketch",i(e,t,!0),c(e)}},b=["ms","moz","webkit","o"],P=self,A=0,S="AnimationFrame",T="request"+S,k="cancel"+S,I=P[T],O=P[k],R=0;R<b.length&&!I;R++)I=P[b[R]+"Request"+S],O=P[b[R]+"Cancel"+T];return P[T]=I=I||function(e){var t=+new Date,n=h.max(0,16-(t-A)),o=setTimeout(function(){e(t+n)},n);return A=t+n,o},P[k]=O=O||function(e){clearTimeout(e)},E}();
\ No newline at end of file
+var Sketch=function(){"use strict";function e(e){return"[object Array]"==Object.prototype.toString.call(e)}function t(e){return"function"==typeof e}function n(e){return"number"==typeof e}function r(e){return"string"==typeof e}function o(e){return C[e]||String.fromCharCode(e)}function i(e,t,n){for(var r in t)(n||!e.hasOwnProperty(r))&&(e[r]=t[r]);return e}function u(e,t){return function(){var n=e.apply(t,arguments);return void 0===n?t:n}}function a(e,n){var r=n?e:{};for(var o in e)t(e[o])?r[o]=u(e[o],e):n||(r[o]=e[o]);return r}function c(e){function n(n){t(n)&&n.apply(e,[].splice.call(arguments,1))}function u(e){for(D=0;D<J.length;D++)B=J[D],r(B)?R[(e?"add":"remove")+"EventListener"].call(R,B,k,!1):t(B)?k=B:R=B}function c(){O(T),T=I(c),U||(n(e.setup),U=t(e.setup),n(e.resize)),e.running&&!j&&(e.dt=(z=+new Date)-e.now,e.millis+=e.dt,e.now=z,n(e.update),e.autoclear&&K&&e.clear(),n(e.draw)),j=++j%e.interval}function l(){R=Y?e.style:e.canvas,_=Y?"px":"",e.fullscreen&&(e.height=w.innerHeight,e.width=w.innerWidth),R.height=e.height+_,R.width=e.width+_,e.retina&&K&&X&&(R.height=e.height*X,R.width=e.width*X,R.style.height=e.height+"px",R.style.width=e.width+"px",e.scale(X,X)),U&&n(e.resize)}function s(e,t){return N=t.getBoundingClientRect(),e.x=e.pageX-N.left-w.scrollX,e.y=e.pageY-N.top-w.scrollY,e}function f(t,n){return s(t,e.element),n=n||{},n.ox=n.x||t.x,n.oy=n.y||t.y,n.x=t.x,n.y=t.y,n.dx=n.x-n.ox,n.dy=n.y-n.oy,n}function h(e){if(e.preventDefault(),F=a(e),F.originalEvent=e,F.touches)for(M.length=F.touches.length,D=0;D<F.touches.length;D++)M[D]=f(F.touches[D],M[D]);else M.length=0,M[0]=f(F,V);return i(V,M[0],!0),F}function g(t){for(t=h(t),q=(Q=J.indexOf(G=t.type))-1,e.dragging=/down|start/.test(G)?!0:/up|end/.test(G)?!1:e.dragging;q;)r(J[q])?n(e[J[q--]],t):r(J[Q])?n(e[J[Q++]],t):q=0}function p(t){H=t.keyCode,W="keyup"==t.type,Z[H]=Z[o(H)]=!W,n(e[t.type],t)}function v(t){e.autopause&&("blur"==t.type?b:E)(),n(e[t.type],t)}function E(){e.now=+new Date,e.running=!0}function b(){e.running=!1}function P(){(e.running?b:E)()}function A(){K&&e.clearRect(0,0,e.width,e.height)}function S(){L=e.element.parentNode,D=x.indexOf(e),L&&L.removeChild(e.element),~D&&x.splice(D,1),u(!1),b()}var T,k,R,L,N,D,_,z,B,F,G,H,W,q,Q,j=0,M=[],U=!1,X=w.devicePixelRatio,Y=e.type==m,K=e.type==d,V={x:0,y:0,ox:0,oy:0,dx:0,dy:0},J=[e.element,g,"mousedown","touchstart",g,"mousemove","touchmove",g,"mouseup","touchend",g,"click",y,p,"keydown","keyup",w,v,"focus","blur",l,"resize"],Z={};for(H in C)Z[C[H]]=!1;return x.push(i(e,{touches:M,mouse:V,keys:Z,dragging:!1,running:!1,millis:0,now:0/0,dt:0/0,destroy:S,toggle:P,clear:A,start:E,stop:b})),e.autostart&&E(),u(!0),l(),c(),e}for(var l,s,f="E LN10 LN2 LOG2E LOG10E PI SQRT1_2 SQRT2 abs acos asin atan ceil cos exp floor log round sin sqrt tan atan2 pow max min".split(" "),h="__hasSketch",g=Math,d="canvas",p="webgl",m="dom",y=document,w=window,x=[],v={fullscreen:!0,autostart:!0,autoclear:!0,autopause:!0,container:y.body,interval:1,globals:!0,retina:!1,chain:!1,type:d},C={8:"BACKSPACE",9:"TAB",13:"ENTER",16:"SHIFT",27:"ESCAPE",32:"SPACE",37:"LEFT",38:"UP",39:"RIGHT",40:"DOWN"},E={CANVAS:d,WEBGL:p,DOM:m,instances:x,install:function(t){if(!t[h]){for(var r=0;r<f.length;r++)t[f[r]]=g[f[r]];i(t,{TWO_PI:2*g.PI,HALF_PI:g.PI/2,QUATER_PI:g.PI/4,random:function(t,r){return e(t)?t[~~(g.random()*t.length)]:(n(r)||(r=t||1,t=0),t+g.random()*(r-t))},lerp:function(e,t,n){return e+n*(t-e)},map:function(e,t,n,r,o){return(e-t)/(n-t)*(o-r)+r}}),t[h]=!0}},create:function(e){return e=i(e||{},v),e.globals&&E.install(self),l=e.element=e.element||y.createElement(e.type===m?"div":"canvas"),s=e.context=e.context||function(){switch(e.type){case d:return l.getContext("2d",e);case p:return l.getContext("webgl",e)||l.getContext("experimental-webgl",e);case m:return l.canvas=l}}(),e.container.appendChild(l),E.augment(s,e)},augment:function(e,t){return t=i(t||{},v),t.chain&&a(e,!0),t.element=e.canvas||e,t.element.className+=" sketch",i(e,t,!0),c(e)}},b=["ms","moz","webkit","o"],P=self,A=0,S="AnimationFrame",T="request"+S,k="cancel"+S,I=P[T],O=P[k],R=0;R<b.length&&!I;R++)I=P[b[R]+"Request"+S],O=P[b[R]+"Cancel"+T];return P[T]=I=I||function(e){var t=+new Date,n=g.max(0,16-(t-A)),r=setTimeout(function(){e(t+n)},n);return A=t+n,r},P[k]=O=O||function(e){clearTimeout(e)},E}();
\ No newline at end of file
diff --git a/tests/spec/sketch.js b/tests/spec/sketch.js
index 4c8f18e..6618393 100755
--- a/tests/spec/sketch.js
+++ b/tests/spec/sketch.js
@@ -219,6 +219,26 @@ describe( 'create', function() {
         expect( typeof context.start ).toBe( 'function' );
     });
 
+    // chaining
+
+    it( 'chaining', function() {
+
+        sketch = Sketch.create({
+            type: Sketch.CANVAS,
+            chain: true
+        });
+
+        expect( sketch.beginPath() ).toBe( sketch );
+        expect( sketch.moveTo(0,0) ).toBe( sketch );
+        expect( sketch.lineTo(0,0) ).toBe( sketch );
+        expect( sketch.closePath() ).toBe( sketch );
+        expect( sketch.stroke() ).toBe( sketch );
+        expect( sketch.fill() ).toBe( sketch );
+        expect( sketch.fillRect(0,0,1,1) ).toBe( sketch );
+        expect( sketch.isPointInPath(0,0) ).toBe( false );
+        expect( sketch.getImageData(0,0,1,1) ).toEqual( jasmine.any( ImageData ) );
+    });
+
 });
 
 describe( 'setup and teardown', function() {