8/1 master -> stable

samples/paint/index.html

@@ -6,8 +6,9 @@
 </head>
 
 <style>
-body {
+html, body {
   padding: 0; margin: 0;
+  overflow: hidden;
 }
   canvas {
     background: lightgreen;

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)];

samples/scroller/index.html

@@ -23,8 +23,14 @@
       #big {
         height: 1000px;
         width: 1000px;
-        background: -webkit-linear-gradient(45deg, red, blue);
-        background: linear-gradient(45deg, red, blue);
+      }
+      .holder {
+        width: 100%;
+        height: 20px;
+      }
+      .inner {
+        padding: 0 5px;
+        text-align: center;
       }
       button {
         height: 100px;
@@ -43,6 +49,18 @@
     <button onclick="scroll()">Scroll</button>
     <button onclick="none()">None</button>
     <script>
+      var size = 50;
+      for (var i = 0; i < size; i++) {
+        var holder = document.createElement('div');
+        holder.classList.add('holder');
+        for (var j = 0; j < size; j++) {
+          var e = document.createElement('span');
+          e.textContent = i + ',' + j;
+          e.classList.add('inner');
+          holder.appendChild(e);
+        }
+        big.appendChild(holder);
+      }
       function x() {
         scroller.setAttribute('touch-action', 'pan-x');
       }

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;
 

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';
@@ -63,7 +64,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) {
@@ -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);
       }
     },