Adds color tools.

Michael Bleigh · Michael Bleigh · commit 34290b7bc422 · 2011-08-19T14:49:02.000-03:00
diff --git a/example/colors.html b/example/colors.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+  <head>
+    <script src="http://code.jquery.com/jquery-latest.js"></script>
+    <script src='../src/sketch.js'></script>
+    <script type='text/javascript'>
+      $(function() {
+        $.each(['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#000', '#fff'], function() {
+          $('#tools').append("<a href='#colored_sketch' data-color='" + this + "' style='border: 1px solid black; width: 30px; height: 30px; background: " + this + "; display: inline-block;'></a> ");
+        });
+
+        $('#colored_sketch').sketch();
+      });
+    </script>
+  </head>
+  <body>
+    <div id='tools'></div>
+    <canvas id='colored_sketch' width='600' height='600' style='border: 2px solid black'></canvas>
+  </body>
+</html>
diff --git a/src/sketch.coffee b/src/sketch.coffee
@@ -1,13 +1,17 @@
 (($)->
-  $.fn.sketch = (options)->
+  $.fn.sketch = (opts)->
     $.error('Sketch can only be called on one element at a time.') if this.length > 1
 
+    options = $.extend {
+      toolLinks: true
+    }, opts
     el = this.get(0)
     $el = $(el)
     context = el.getContext '2d'
 
     $el.data 'sketch.clicks', []
     $el.data 'sketch.painting', false
+    $el.data 'sketch.color', '#000000'
 
     painting = ->
       !!$el.data('sketch.painting')
@@ -17,14 +21,15 @@
       $el.data 'sketch.painting', false
     clicks = ->
       $el.data 'sketch.clicks'
+    currentColor = ->
+      $el.data 'sketch.color'
 
     addClick = (x,y,dragging)->
-      clicks().push {x: x, y: y, dragging: dragging}
+      clicks().push {x: x, y: y, dragging: dragging, color: currentColor()}
 
     redraw = ()->
       el.width = el.width
       
-      context.strokeStyle = '#000'
       context.lineJoin = 'round'
       context.lineWidth = 5
 
@@ -38,10 +43,14 @@
 
         context.lineTo this.x, this.y
         context.closePath()
+        context.strokeStyle = this.color
         context.stroke()
 
         previous = this
 
+    $el.bind 'sketch.changecolor', (e, color)->
+      console.log "Setting color to #{color}"
+      $el.data 'sketch.color', color
 
     $el.mousedown (e)->
       mouseX = e.pageX - this.offsetLeft
@@ -62,5 +71,15 @@
     $el.mouseup stopPainting
     $el.mouseleave stopPainting
 
+    if options.toolLinks
+      console.log "Tool links..."
+      $('body').delegate "a[href=\"##{$el.attr('id')}\"]", 'click', (e)->
+        console.log "Tool clicked..."
+        $this = $(this)
+
+        if $this.attr('data-color')
+          $el.trigger 'sketch.changecolor', $(this).attr('data-color')
+
+        false
     this
 )(jQuery)
diff --git a/src/sketch.js b/src/sketch.js
@@ -1,15 +1,19 @@
 (function() {
   (function($) {
-    return $.fn.sketch = function(options) {
-      var $el, addClick, clicks, context, el, painting, redraw, startPainting, stopPainting;
+    return $.fn.sketch = function(opts) {
+      var $el, addClick, clicks, context, currentColor, el, options, painting, redraw, startPainting, stopPainting;
       if (this.length > 1) {
         $.error('Sketch can only be called on one element at a time.');
       }
+      options = $.extend({
+        toolLinks: true
+      }, opts);
       el = this.get(0);
       $el = $(el);
       context = el.getContext('2d');
       $el.data('sketch.clicks', []);
       $el.data('sketch.painting', false);
+      $el.data('sketch.color', '#000000');
       painting = function() {
         return !!$el.data('sketch.painting');
       };
@@ -22,17 +26,20 @@
       clicks = function() {
         return $el.data('sketch.clicks');
       };
+      currentColor = function() {
+        return $el.data('sketch.color');
+      };
       addClick = function(x, y, dragging) {
         return clicks().push({
           x: x,
           y: y,
-          dragging: dragging
+          dragging: dragging,
+          color: currentColor()
         });
       };
       redraw = function() {
         var previous;
         el.width = el.width;
-        context.strokeStyle = '#000';
         context.lineJoin = 'round';
         context.lineWidth = 5;
         previous = null;
@@ -45,10 +52,15 @@
           }
           context.lineTo(this.x, this.y);
           context.closePath();
+          context.strokeStyle = this.color;
           context.stroke();
           return previous = this;
         });
       };
+      $el.bind('sketch.changecolor', function(e, color) {
+        console.log("Setting color to " + color);
+        return $el.data('sketch.color', color);
+      });
       $el.mousedown(function(e) {
         var mouseX, mouseY;
         mouseX = e.pageX - this.offsetLeft;
@@ -68,6 +80,18 @@
       });
       $el.mouseup(stopPainting);
       $el.mouseleave(stopPainting);
+      if (options.toolLinks) {
+        console.log("Tool links...");
+        $('body').delegate("a[href=\"#" + ($el.attr('id')) + "\"]", 'click', function(e) {
+          var $this;
+          console.log("Tool clicked...");
+          $this = $(this);
+          if ($this.attr('data-color')) {
+            $el.trigger('sketch.changecolor', $(this).attr('data-color'));
+          }
+          return false;
+        });
+      }
       return this;
     };
   })(jQuery);
