Merge pull request #1471 from mattdesl/fix-mouse-touch-handling

Change mouseX/mouseY handling

Author: Lauren McCarthy

src/core/core.js

@@ -345,9 +345,9 @@ var p5 = function(sketch, node, sync) {
       }
 
       this._setProperty('frameCount', this.frameCount + 1);
+      this.redraw();
       this._updateMouseCoords();
       this._updateTouchCoords();
-      this.redraw();
       this._frameRate = 1000.0/(now - this._lastFrameTime);
       this._lastFrameTime = now;
     }

src/events/mouse.js

@@ -13,15 +13,12 @@ var p5 = require('../core/core');
 var constants = require('../core/constants');
 
 /*
- * These are helper vars that store the mouseX and mouseY vals
- * between the time that a mouse event happens and the next frame
- * of draw. This is done to deal with the asynchronicity of event
- * calls interacting with the draw loop. When a mouse event occurs
- * the _nextMouseX/Y vars are updated, then on each call of draw, mouseX/Y
- * and pmouseX/Y are updated using the _nextMouseX/Y vals.
+ * This is a flag which is false until the first time
+ * we receive a mouse event. The pmouseX and pmouseY
+ * values will match the mouseX and mouseY values until
+ * this interaction takes place.
  */
-p5.prototype._nextMouseX = 0;
-p5.prototype._nextMouseY = 0;
+p5.prototype._hasMouseInteracted = false;
 
 /**
  * The system variable mouseX always contains the current horizontal
@@ -312,27 +309,32 @@ p5.prototype.mouseIsPressed = false;
 p5.prototype.isMousePressed = false; // both are supported
 
 p5.prototype._updateNextMouseCoords = function(e) {
+  var x = this.mouseX;
+  var y = this.mouseY;
   if(e.type === 'touchstart' ||
      e.type === 'touchmove' ||
      e.type === 'touchend' || e.touches) {
-    this._setProperty('_nextMouseX', this._nextTouchX);
-    this._setProperty('_nextMouseY', this._nextTouchY);
-  } else {
-    if(this._curElement !== null) {
-      var mousePos = getMousePos(this._curElement.elt, e);
-      this._setProperty('_nextMouseX', mousePos.x);
-      this._setProperty('_nextMouseY', mousePos.y);
-    }
+    x = this.touchX;
+    y = this.touchY;
+  } else if(this._curElement !== null) {
+    var mousePos = getMousePos(this._curElement.elt, e);
+    x = mousePos.x;
+    y = mousePos.y;
   }
+  this._setProperty('mouseX', x);
+  this._setProperty('mouseY', y);
   this._setProperty('winMouseX', e.pageX);
   this._setProperty('winMouseY', e.pageY);
+  if (!this._hasMouseInteracted) {
+    // For first draw, make previous and next equal
+    this._updateMouseCoords();
+    this._setProperty('_hasMouseInteracted', true);
+  }
 };
 
 p5.prototype._updateMouseCoords = function() {
   this._setProperty('pmouseX', this.mouseX);
   this._setProperty('pmouseY', this.mouseY);
-  this._setProperty('mouseX', this._nextMouseX);
-  this._setProperty('mouseY', this._nextMouseY);
   this._setProperty('pwinMouseX', this.winMouseX);
   this._setProperty('pwinMouseY', this.winMouseY);
 };

src/events/touch.js

@@ -10,15 +10,12 @@
 var p5 = require('../core/core');
 
 /*
- * These are helper vars that store the touchX and touchY vals
- * between the time that a mouse event happens and the next frame
- * of draw. This is done to deal with the asynchronicity of event
- * calls interacting with the draw loop. When a touch event occurs
- * the _nextTouchX/Y vars are updated, then on each call of draw, touchX/Y
- * and ptouchX/Y are updated using the _nextMouseX/Y vals.
+ * This is a flag which is false until the first time
+ * we receive a touch event. The ptouchX and ptouchY
+ * values will match the touchX and touchY values until
+ * this interaction takes place.
  */
-p5.prototype._nextTouchX = 0;
-p5.prototype._nextTouchY = 0;
+p5.prototype._hasTouchInteracted = false;
 
 /**
  * The system variable touchX always contains the horizontal position of
@@ -77,16 +74,18 @@ p5.prototype.touches = [];
 p5.prototype.touchIsDown = false;
 
 p5.prototype._updateNextTouchCoords = function(e) {
+  var x = this.touchX;
+  var y = this.touchY;
   if(e.type === 'mousedown' ||
      e.type === 'mousemove' ||
      e.type === 'mouseup' || !e.touches) {
-    this._setProperty('_nextTouchX', this._nextMouseX);
-    this._setProperty('_nextTouchY', this._nextMouseY);
+    x = this.mouseX;
+    y = this.mouseY;
   } else {
     if(this._curElement !== null) {
       var touchInfo = getTouchInfo(this._curElement.elt, e, 0);
-      this._setProperty('_nextTouchX', touchInfo.x);
-      this._setProperty('_nextTouchY', touchInfo.y);
+      x = touchInfo.x;
+      y = touchInfo.y;
 
       var touches = [];
       for(var i = 0; i < e.touches.length; i++){
@@ -95,13 +94,18 @@ p5.prototype._updateNextTouchCoords = function(e) {
       this._setProperty('touches', touches);
     }
   }
+  this._setProperty('touchX', x);
+  this._setProperty('touchY', y);
+  if (!this._hasTouchInteracted) {
+    // For first draw, make previous and next equal
+    this._updateTouchCoords();
+    this._setProperty('_hasTouchInteracted', true);
+  }
 };
 
 p5.prototype._updateTouchCoords = function() {
   this._setProperty('ptouchX', this.touchX);
   this._setProperty('ptouchY', this.touchY);
-  this._setProperty('touchX', this._nextTouchX);
-  this._setProperty('touchY', this._nextTouchY);
 };
 
 function getTouchInfo(canvas, e, i) {