removed eraser ( and lineJoin (buggy - temporary)

index.html

@@ -34,7 +34,7 @@
         <div class='general'>
           <button id='settype'>Brush Type<span>Sketch</span></button>
           <button id='setcolor'>Color<span>#000000</span></button>
-          <button id='setlineJoin'>Line Join<span>Round</span></button>
+          <!--<button id='setlineJoin'>Line Join<span>Round</span></button>-->
           <button id='setlineCap'>Line Cap<span>Round</span></button>
           <p id='lineWidth'>Line Width <span>2</span></p>
            <div role="slider" class='lineWidth'>
@@ -90,7 +90,7 @@
           <li><label><span>Fur</span></label></li>
           <li><label><span>Pen</span></label></li>
           <li><label><span>Line</span></label></li>
-          <li><label><span>Eraser</span></label></li>
+          <!--<li><label><span>Eraser</span></label></li>-->
         </ol>
       </section>
       <menu>
@@ -164,7 +164,6 @@
 
     <script src='js/libs/yepnope.min.js'></script>
     <script src='js/libs/zepto.min.js'></script>
-    <script src='js/libs/touch.js'></script>
     <script src='js/functions.js'></script>
     <script src='js/main.js'></script>
 

js/events.js

@@ -1,5 +1,7 @@
 "use strict";
 
+$(window).resize(sizeAndPos);
+
 function save() {
   switch(save.background) {
     case 'white': {
@@ -55,7 +57,7 @@ function save() {
     window.active = false;
   
   
-    if( settings.type = 'eraser' ) return;
+    if( settings.type == 'eraser' ) return;
     if(window.points.history.last < window.points.history.length-1) {
       window.points.history.splice(window.points.history.last+1);
     }

js/functions.js

@@ -3,14 +3,14 @@
 
 function sizeAndPos() {
 
-  var data = c.getImageData(0,0, $c.width(), $c.height());
+  var data = window.points.history[window.points.history.last].data || c.getImageData(0,0, $c.width(), $c.height());
   var w = $(window).width(),
-      h = $(window).height();
+      h = $(window).height() - 53;
   $c.attr('width', w * window.devicePixelRatio);
-  $c.attr('height',(h - 53) * window.devicePixelRatio);
+  $c.attr('height',h * window.devicePixelRatio);
   $c.css({
     'width' : w,
-    'height' : h - 53
+    'height' : h
   });
   c.clearRect(0,0, width(), height());
   c.putImageData(data, 0, 0);
@@ -29,7 +29,7 @@ function threshold(x1, y1, x2, y2, threshold) {
   return false;
 }
 
-function line(x1, y1, x2, y2, opts, overlay) {
+function draw(x1, y1, x2, y2, opts, overlay) {
   opts = opts || {};
   var c = window.c;
   if( overlay ) var c = window.o;
@@ -114,11 +114,15 @@ function startPoint(x, y) {
   }
 
   if( old.type == 'line' && current.type == 'line' ) {
-    if( points[points.indexOf(old)-1].type !== 'line' ) erase(old.x-5, old.y-5, old.x+5, old.y+5, true);
-    line(old.x, old.y, x, y);
+    if( points[points.indexOf(old)-1].type !== 'line' ) {
+      o.clearRect(old.x-3, old.y-3, 6, 6, true);
+      draw(old.x, old.y, x, y);
+    } else
+      draw(old.x, old.y, x, y);
   }
 
-  if( points.length > 1 && ((start && threshold(start.x, start.y, x, y)) || threshold(old.x, old.y, x, y, 2)) ) {
+  var thresholds = window.mobile ? [10, 5] : [5, 2];
+  if( points.length > 1 && ((start && threshold(start.x, start.y, x, y, thresholds[0])) || threshold(old.x, old.y, x, y, thresholds[1])) ) {
     window.active = false;
     points[points.length-1].type = '';
     points[points.length-1].start = undefined;
@@ -135,7 +139,7 @@ function drawPoint(x,y) {
       capture.type = 'pen';
     }
     case 'pen': {
-      line(capture.x, capture.y, x, y);
+      draw(capture.x, capture.y, x, y);
 
       var current = {
         x : x,
@@ -148,7 +152,7 @@ function drawPoint(x,y) {
       break;
     }
     case 'sketch': {
-      line(capture.x, capture.y, x, y);
+      draw(capture.x, capture.y, x, y);
       var current = {
         x : x,
         y : y,
@@ -162,13 +166,13 @@ function drawPoint(x,y) {
           var x = points[i].x - current.x,
               y = points[i].y - current.y;
 
-          line(points[i].x - x*0.2, points[i].y - y*0.2, current.x + x*0.2, current.y + y*0.2, {strokeStyle: 'rgba(0,0,0,0.4)', lineWidth: settings.lineWidth/20})
+          draw(points[i].x - x*0.2, points[i].y - y*0.2, current.x + x*0.2, current.y + y*0.2, {strokeStyle: 'rgba(0,0,0,0.4)', lineWidth: settings.lineWidth/20})
         }
       }
       break; 
     }
     case 'fur': {
-      line(capture.x, capture.y, x, y);
+      draw(capture.x, capture.y, x, y);
       var current = {
         x : x,
         y : y,
@@ -182,7 +186,7 @@ function drawPoint(x,y) {
           var x = points[i].x - current.x,
               y = points[i].y - current.y;
           var l = settings.furLength / 100 || 0.2;
-          line(points[i].x + x*l, points[i].y + y*l, current.x - x*l, current.y - y*l, {strokeStyle: 'rgba(0,0,0,0.4)', lineWidth: settings.lineWidth/2})
+          draw(points[i].x + x*l, points[i].y + y*l, current.x - x*l, current.y - y*l, {strokeStyle: 'rgba(0,0,0,0.4)', lineWidth: settings.lineWidth/2})
         }
       }
       break;

js/libs/touch.js

@@ -17,6 +17,7 @@
     longTapTimeout = null
     if (touch.last) {
       touch.el.trigger('longTap')
+      window.touchEl = touch.el;
       touch = {}
     }
   }
@@ -90,7 +91,7 @@
         if((_isPointerType = isPointerEventType(e, 'move')) &&
           !isPrimaryTouch(e)) return
         firstTouch = _isPointerType ? e : e.touches[0]
-        cancelLongTap()
+        if( $.moveCancel ) cancelLongTap()
         touch.x2 = firstTouch.pageX
         touch.y2 = firstTouch.pageY
 

js/main.js

@@ -17,6 +17,7 @@ $(document).ready(function() {
   window.points = [];
   window.$c = $('canvas');
   window.points.history = [{ data: c.createImageData($c.width(), $c.height()), points: []}];
+  window.points.history.last = 0;
 
   sizeAndPos();
   //$(window).resize(sizeAndPos);
@@ -30,7 +31,7 @@ $(document).ready(function() {
 
   yepnope({
     test: window.mobile,
-    yep : ['js/mobile-events.js', 'js/libs/color-picker-touch.js'],
+    yep : ['js/libs/touch.js', 'js/mobile-events.js', 'js/libs/color-picker-touch.js'],
     nope: ['js/events.js', 'js/libs/color-picker.js']
   })
 

js/mobile-events.js

@@ -48,19 +48,15 @@ function save() {
     $('#save').removeClass('hidden');
   })
   $c.last().on('touchstart', function(e) {
-    e.preventDefault();
     var xy = relative(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
     startPoint(xy.x, xy.y);
     window.active = true;
   }).on('touchmove', function(e) {
-    e.preventDefault();
     if (!window.active || settings.type == 'line') return;
     var xy = relative(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
     drawPoint(xy.x, xy.y);
   }).on('touchend', function(e) {
-    e.preventDefault();
     window.active = false;
-
     if( settings.type == 'eraser' ) return;
 
     if(window.points.history.last < window.points.history.length-1) {
@@ -72,6 +68,12 @@ function save() {
       points: window.points.slice(0)
     })
     window.points.history.last = window.points.history.length-1;
+  }).on('longTap', function(e) {
+    if( points[points.length-1].type == 'line' ) {
+      window.active = false;
+      points[points.length-1].type = '';
+      points[points.length-1].start = undefined;
+    }
   })
   
   // Value Selector