From 84f7a1e63f70026cd5dd5cf96469363bc93d30ea Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Tue, 16 Jul 2013 02:21:49 -0700
Subject: [PATCH 1/7] fix small typo

---
 src/touch.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/touch.js b/src/touch.js
index 9aa803b4..a1277512 100644
--- a/src/touch.js
+++ b/src/touch.js
@@ -63,7 +63,7 @@
     },
     elementChanged: function(el, oldValue) {
       var a = el.getAttribute(ATTRIB);
-      var st = this.touchActiontoScrollType(a);
+      var st = this.touchActionToScrollType(a);
       var oldSt = this.touchActionToScrollType(oldValue);
       // simply update scrollType if listeners are already established
       if (st && oldSt) {

From 71de5effff71fdd7d2752280b81859034b755706 Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Tue, 16 Jul 2013 03:40:39 -0700
Subject: [PATCH 2/7] use numbers instead of gradient

---
 samples/scroller/index.html | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/samples/scroller/index.html b/samples/scroller/index.html
index fd9b8e4f..e1f9f759 100644
--- a/samples/scroller/index.html
+++ b/samples/scroller/index.html
@@ -23,8 +23,16 @@
       #big {
         height: 1000px;
         width: 1000px;
-        background: -webkit-linear-gradient(45deg, red, blue);
-        background: linear-gradient(45deg, red, blue);
+      }
+      .flex {
+        display: -webkit-flex;
+        display: flex;
+        -webkit-flex: 1;
+        flex: 1;
+      }
+      .inner {
+        -wekbit-flex-direction: column;
+        flex-direction: column;
       }
       button {
         height: 100px;
@@ -43,6 +51,18 @@
     <button onclick="scroll()">Scroll</button>
     <button onclick="none()">None</button>
     <script>
+      var size = 25;
+      for (var i = 0; i < size; i++) {
+        var holder = document.createElement('div');
+        holder.classList.add('flex');
+        for (var j = 0; j < size; j++) {
+          var e = document.createElement('div');
+          e.textContent = i + ',' + j;
+          e.classList.add('flex', 'inner');
+          holder.appendChild(e);
+        }
+        big.appendChild(holder);
+      }
       function x() {
         scroller.setAttribute('touch-action', 'pan-x');
       }

From f07e554e574c01d40b0d693988f4dd9bd029aa38 Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Wed, 17 Jul 2013 03:46:52 -0700
Subject: [PATCH 3/7] make the scrollable area contain more elements to scroll
 more

---
 samples/scroller/index.html | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/samples/scroller/index.html b/samples/scroller/index.html
index e1f9f759..52b3e87b 100644
--- a/samples/scroller/index.html
+++ b/samples/scroller/index.html
@@ -24,15 +24,13 @@
         height: 1000px;
         width: 1000px;
       }
-      .flex {
-        display: -webkit-flex;
-        display: flex;
-        -webkit-flex: 1;
-        flex: 1;
+      .holder {
+        width: 100%;
+        height: 20px;
       }
       .inner {
-        -wekbit-flex-direction: column;
-        flex-direction: column;
+        padding: 0 5px;
+        text-align: center;
       }
       button {
         height: 100px;
@@ -51,14 +49,14 @@
     <button onclick="scroll()">Scroll</button>
     <button onclick="none()">None</button>
     <script>
-      var size = 25;
+      var size = 50;
       for (var i = 0; i < size; i++) {
         var holder = document.createElement('div');
-        holder.classList.add('flex');
+        holder.classList.add('holder');
         for (var j = 0; j < size; j++) {
-          var e = document.createElement('div');
+          var e = document.createElement('span');
           e.textContent = i + ',' + j;
-          e.classList.add('flex', 'inner');
+          e.classList.add('inner');
           holder.appendChild(e);
         }
         big.appendChild(holder);

From 4ee39066c950fd5cdda4fd08ffb2744fa10300e5 Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Wed, 17 Jul 2013 07:16:30 -0700
Subject: [PATCH 4/7] fix sizing by removing scrollbars

---
 samples/paint/index.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/samples/paint/index.html b/samples/paint/index.html
index ee4b9418..de1f7be6 100755
--- a/samples/paint/index.html
+++ b/samples/paint/index.html
@@ -6,8 +6,9 @@
 </head>
 
 <style>
-body {
+html, body {
   padding: 0; margin: 0;
+  overflow: hidden;
 }
   canvas {
     background: lightgreen;

From a8bd9d71edaf4f1aa2634871d8f5d446d589f1df Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Wed, 17 Jul 2013 09:23:39 -0700
Subject: [PATCH 5/7] handle pointer cancel

---
 samples/tracker/index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/samples/tracker/index.html b/samples/tracker/index.html
index e6f8ae9e..d6b49383 100755
--- a/samples/tracker/index.html
+++ b/samples/tracker/index.html
@@ -60,6 +60,7 @@
 canvas.addEventListener( 'pointerdown', onPointerDown, false );
 canvas.addEventListener( 'pointermove', onPointerMove, false );
 canvas.addEventListener( 'pointerup', onPointerUp, false );
+canvas.addEventListener( 'pointercancel', onPointerUp, false );
 window.onorientationchange = resetCanvas;
 window.onresize = resetCanvas;
 

From d29a149b08103f94052c9d686a26fbc27347cab6 Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Wed, 17 Jul 2013 09:29:46 -0700
Subject: [PATCH 6/7] use width of pointer if possible

---
 samples/paint/paint.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/samples/paint/paint.js b/samples/paint/paint.js
index 0a657e76..ae56a60a 100755
--- a/samples/paint/paint.js
+++ b/samples/paint/paint.js
@@ -18,7 +18,7 @@ var Paint = function(options) {
 
   // Set the default line style.
   var ctx = canvas.getContext("2d");
-  ctx.lineWidth = options.size || Math.ceil(Math.random() * 35);
+  // ctx.lineWidth = options.size || Math.ceil(Math.random() * 35);
   ctx.lineCap = options.lineCap || "round";
 
 
@@ -41,10 +41,12 @@ Paint.prototype.initEvents = function() {
   canvas.addEventListener('pointerdown', this.onPointerDown.bind(this));
   canvas.addEventListener('pointermove', this.onPointerMove.bind(this));
   canvas.addEventListener('pointerup', this.onPointerUp.bind(this));
+  canvas.addEventListener('pointercancel', this.onPointerUp.bind(this));
 };
 
 Paint.prototype.onPointerDown = function(event) {
-  this.pointers[event.pointerId] = new Pointer({x: event.clientX, y: event.clientY});
+  var width = event.pointerType === 'touch' ? (event.width || 10) : 4;
+  this.pointers[event.pointerId] = new Pointer({x: event.clientX, y: event.clientY, width: width});
 };
 
 Paint.prototype.onPointerMove = function(event) {
@@ -67,6 +69,7 @@ Paint.prototype.renderLoop = function(lastRender) {
     if (pointer.isDelta()) {
       //console.log('rendering', pointer.targetX);
       var ctx = this.ctx;
+      ctx.lineWidth = pointer.width;
       ctx.strokeStyle = pointer.color;
       ctx.beginPath();
       ctx.moveTo(pointer.x, pointer.y);
@@ -84,6 +87,7 @@ Paint.prototype.renderLoop = function(lastRender) {
 function Pointer(options) {
   this.x = options.x;
   this.y = options.y;
+  this.width = options.width;
 
   // Pick a random color.
   this.color = Pointer.COLORS[Math.floor(Math.random() * Pointer.COLORS.length)];

From 2100bc7471bf19c9aac79431ec14dc71d95a354a Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Mon, 22 Jul 2013 16:09:37 -0700
Subject: [PATCH 7/7] First try at detail click count for touch

- 200ms reset timer, started when last finger ends
- click count increments with each new finger added
---
 src/touch.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/touch.js b/src/touch.js
index a1277512..f19c72c5 100644
--- a/src/touch.js
+++ b/src/touch.js
@@ -12,6 +12,7 @@
   var touchMap = Array.prototype.map.call.bind(Array.prototype.map);
   // This should be long enough to ignore compat mouse events made by touch
   var DEDUP_TIMEOUT = 2500;
+  var CLICK_COUNT_TIMEOUT = 200;
   var ATTRIB = 'touch-action';
   var INSTALLER;
   var HAS_TOUCH_ACTION = (typeof document.head.style.touchAction) === 'string';
@@ -106,12 +107,28 @@
         this.firstTouch = inTouch.identifier;
         this.firstXY = {X: inTouch.clientX, Y: inTouch.clientY};
         this.scrolling = false;
+        this.cancelResetClickCount();
       }
     },
     removePrimaryTouch: function(inTouch) {
       if (this.isPrimaryTouch(inTouch)) {
         this.firstTouch = null;
         this.firstXY = null;
+        this.resetClickCount();
+      }
+    },
+    clickCount: 0,
+    resetId: null,
+    resetClickCount: function() {
+      var fn = function() {
+        this.clickCount = 0;
+        this.resetId = null;
+      }.bind(this);
+      this.resetId = setTimeout(fn, CLICK_COUNT_TIMEOUT);
+    },
+    cancelResetClickCount: function() {
+      if (this.resetId) {
+        clearTimeout(this.resetId);
       }
     },
     touchToPointer: function(inTouch) {
@@ -123,6 +140,7 @@
       e.target = findTarget(e);
       e.bubbles = true;
       e.cancelable = true;
+      e.detail = this.clickCount;
       e.button = 0;
       e.buttons = 1;
       e.width = inTouch.webkitRadiusX || inTouch.radiusX || 0;
@@ -200,6 +218,7 @@
       this.setPrimaryTouch(inEvent.changedTouches[0]);
       this.dedupSynthMouse(inEvent);
       if (!this.scrolling) {
+        this.clickCount++;
         this.processTouches(inEvent, this.overDown);
       }
     },