Separate chaining method that adds a chained set method for passing…

… key, value pairs or a hash of properties to set. Updated drawing example to illustrate this. #18
soulwire · May 28, 2013 · 2bd1566 · 2bd1566
2 parents b02b9cb + 07834e1
commit 2bd1566
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 16 deletions.
diff --git a/examples/drawing.html b/examples/drawing.html
@@ -60,13 +60,17 @@ <h3>Start drawing!</h3>
 
                     touch = this.touches[i];
 
-                    this.lineCap = 'round';
-                    this.lineJoin = 'round';
-                    this.fillStyle = this.strokeStyle = COLOURS[ i % COLOURS.length ];
-                    this.lineWidth = radius;
-
-                    // Draw using chained methods
-                    this.beginPath()
+                    this
+                        // Setup multiple properties using a hash
+                        .set({
+                            lineCap: 'round',
+                            lineJoin: 'round',
+                            lineWidth: radius
+                        })
+                        // ...or set one by passing the property name followed by the value
+                        .set( 'fillStyle', this.strokeStyle = COLOURS[ i % COLOURS.length ] )
+                        // Chain function calls together
+                        .beginPath()
                         .moveTo( touch.ox, touch.oy )
                         .lineTo( touch.x, touch.y )
                         .stroke();

diff --git a/examples/three.html b/examples/three.html
@@ -21,7 +21,7 @@ <h2>Using a THREE.js renderer context with sketch.js</h2>
                 <a href="https://github.com/soulwire/sketch.js" target="_blank">View on Github</a>
             </nav>
         </header>
-        <script src="https://raw.github.com/mrdoob/three.js/r58/build/three.min.js"></script>
+        <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js"></script>
         <script src="../js/sketch.js"></script>
         <script>
 

diff --git a/js/sketch.js b/js/sketch.js
@@ -107,24 +107,44 @@ var Sketch = (function() {
         };
     }
 
-    function clone( target, chain ) {
+    function clone( target ) {
 
-        var result = chain ? target : {};
+        var result = {};
 
         for ( var key in target ) {
 
             if ( isFunction( target[ key ] ) )
 
                 result[ key ] = proxy( target[ key ], target );
 
-            else if ( !chain )
+            else
 
                 result[ key ] = target[ key ];
         }
 
         return result;
     }
 
+    function chain( target ) {
+
+        extend( target, {
+
+            set: function( key, val ) {
+
+                if ( isString( key ) ) target[ key ] = val;
+                else extend( target, key, true );
+            }
+        });
+
+        for ( var key in target )
+
+            if ( isFunction( target[ key ] ) )
+
+                target[ key ] = proxy( target[ key ], target );
+
+        return target;
+    }
+
     /*
     ----------------------------------------------------------------------
 
@@ -430,6 +450,7 @@ var Sketch = (function() {
     var element, context, Sketch = {
 
         CANVAS: CANVAS,
+        WEB_GL: WEBGL,
         WEBGL: WEBGL,
         DOM: DOM,
 
@@ -513,9 +534,7 @@ var Sketch = (function() {
 
             options = extend( options || {}, defaults );
 
-            if ( options.chain )
-
-                clone( context, true );
+            if ( options.chain ) chain( context );
 
             options.element = context.canvas || context;
             options.element.className += ' sketch';

diff --git a/js/sketch.min.js b/js/sketch.min.js
diff --git a/tests/spec/sketch.js b/tests/spec/sketch.js
@@ -228,14 +228,25 @@ describe( 'create', function() {
             chain: true
         });
 
+        sketch.set( 'lineWidth', 10 );
+        sketch.set({
+            globalCompositeOperation: 'lighter',
+            globalAlpha: 0.5,
+            lineCap: 'round'
+        });
+
+        expect( sketch.lineWidth ).toBe( 10 );
+        expect( sketch.globalCompositeOperation ).toBe( 'lighter' );
+        expect( sketch.globalAlpha ).toBe( 0.5 );
+        expect( sketch.lineCap ).toBe( 'round' );
         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.isPointInPath(10,10) ).toBe( false );
         expect( sketch.getImageData(0,0,1,1) ).toEqual( jasmine.any( ImageData ) );
     });