diff --git a/src/core/main.js b/src/core/main.js
index 06d6251afb..37aae7c13f 100644
--- a/src/core/main.js
+++ b/src/core/main.js
@@ -59,9 +59,9 @@ class p5 {
this._initializeInstanceVariables();
this._events = {
// keep track of user-events for unregistering later
- mousemove: null,
- mousedown: null,
- mouseup: null,
+ pointerdown: null,
+ pointerup: null,
+ pointermove: null,
dragend: null,
dragover: null,
click: null,
@@ -72,16 +72,11 @@ class p5 {
keyup: null,
keypress: null,
wheel: null,
- touchstart: null,
- touchmove: null,
- touchend: null,
resize: null,
blur: null
};
this._millisStart = -1;
this._recording = false;
- this._touchstart = false;
- this._touchend = false;
// States used in the custom random generators
this._lcg_random_state = null; // NOTE: move to random.js
@@ -233,6 +228,14 @@ class p5 {
// unhide any hidden canvases that were created
const canvases = document.getElementsByTagName('canvas');
+ // Apply touchAction = 'none' to canvases if pointer events exist
+ if (Object.keys(this._events).some(event => event.startsWith('pointer'))) {
+ for (const k of canvases) {
+ k.style.touchAction = 'none';
+ }
+ }
+
+
for (const k of canvases) {
if (k.dataset.hidden === 'true') {
k.style.visibility = '';
diff --git a/src/events/index.js b/src/events/index.js
index 773424d42b..447f3d0d10 100644
--- a/src/events/index.js
+++ b/src/events/index.js
@@ -1,11 +1,9 @@
import acceleration from './acceleration.js';
import keyboard from './keyboard.js';
-import mouse from './mouse.js';
-import touch from './touch.js';
+import pointer from './pointer.js';
export default function(p5){
p5.registerAddon(acceleration);
p5.registerAddon(keyboard);
- p5.registerAddon(mouse);
- p5.registerAddon(touch);
+ p5.registerAddon(pointer);
}
diff --git a/src/events/mouse.js b/src/events/pointer.js
similarity index 92%
rename from src/events/mouse.js
rename to src/events/pointer.js
index 6e9f4a661e..5d75349899 100644
--- a/src/events/mouse.js
+++ b/src/events/pointer.js
@@ -1,6 +1,6 @@
/**
* @module Events
- * @submodule Mouse
+ * @submodule Pointer
* @for p5
* @requires core
* @requires constants
@@ -8,7 +8,7 @@
import * as constants from '../core/constants';
-function mouse(p5, fn){
+function pointer(p5, fn){
/**
* A `Number` system variable that tracks the mouse's horizontal movement.
*
@@ -758,6 +758,92 @@ function mouse(p5, fn){
*/
fn.mouseButton = 0;
+ /**
+ * An `Array` of all the current touch points on a touchscreen device.
+ *
+ * The `touches` array is empty by default. When the user touches their
+ * screen, a new touch point is tracked and added to the array. Touch points
+ * are `Objects` with the following properties:
+ *
+ * ```js
+ * // Iterate over the touches array.
+ * for (let touch of touches) {
+ * // x-coordinate relative to the top-left
+ * // corner of the canvas.
+ * console.log(touch.x);
+ *
+ * // y-coordinate relative to the top-left
+ * // corner of the canvas.
+ * console.log(touch.y);
+ *
+ * // x-coordinate relative to the top-left
+ * // corner of the browser.
+ * console.log(touch.winX);
+ *
+ * // y-coordinate relative to the top-left
+ * // corner of the browser.
+ * console.log(touch.winY);
+ *
+ * // ID number
+ * console.log(touch.id);
+ * }
+ * ```
+ *
+ * @property {Object[]} touches
+ * @readOnly
+ *
+ * @example
+ *
+ *
+ * // On a touchscreen device, touch the canvas using one or more fingers
+ * // at the same time.
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square. White circles appear where the user touches the square.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw a circle at each touch point.
+ * for (let touch of touches) {
+ * circle(touch.x, touch.y, 40);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // On a touchscreen device, touch the canvas using one or more fingers
+ * // at the same time.
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square. Labels appear where the user touches the square, displaying the coordinates.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw a label above each touch point.
+ * for (let touch of touches) {
+ * text(`${touch.x}, ${touch.y}`, touch.x, touch.y - 40);
+ * }
+ * }
+ *
+ *
+ */
+ fn.touches = [];
+ fn._activeTouches = new Map();
+
/**
* A `Boolean` system variable that's `true` if the mouse is pressed and
* `false` if not.
@@ -817,27 +903,34 @@ function mouse(p5, fn){
*/
fn.mouseIsPressed = false;
- fn._updateNextMouseCoords = function(e) {
- if (this._curElement !== null && (!e.touches || e.touches.length > 0)) {
- const mousePos = getMousePos(
- this._curElement.elt,
- this.width,
- this.height,
- e
- );
- this.movedX = e.movementX;
- this.movedY = e.movementY;
- this.mouseX = mousePos.x;
- this.mouseY = mousePos.y;
- this.winMouseX = mousePos.winX;
- this.winMouseY = mousePos.winY;
- }
- if (!this._hasMouseInteracted) {
- // For first draw, make previous and next equal
- this._updateMouseCoords();
- this._hasMouseInteracted = true;
+ fn._updatePointerCoords = function (e) {
+ if (this._curElement !== null) {
+ const canvas = this._curElement.elt;
+ const sx = canvas.scrollWidth / this.width || 1;
+ const sy = canvas.scrollHeight / this.height || 1;
+
+ if (e.pointerType == 'touch') {
+ const touches = [];
+ for (const touch of this._activeTouches.values()) {
+ touches.push(getTouchInfo(canvas, sx, sy, touch));
+ }
+ this.touches = touches;
+ } else {
+ const mousePos = getMouseInfo(canvas, sx, sy, e);
+ this.movedX = e.movementX || 0;
+ this.movedY = e.movementY || 0;
+ this.mouseX = mousePos.x;
+ this.mouseY = mousePos.y;
+ this.winMouseX = mousePos.winX;
+ this.winMouseY = mousePos.winY;
+ }
+
+ if (!this._hasMouseInteracted) {
+ this._updateMouseCoords();
+ this._hasMouseInteracted = true;
+ }
}
- };
+ };
fn._updateMouseCoords = function() {
this.pmouseX = this.mouseX;
@@ -847,26 +940,26 @@ function mouse(p5, fn){
this._pmouseWheelDeltaY = this._mouseWheelDeltaY;
};
- function getMousePos(canvas, w, h, evt) {
- if (evt && !evt.clientX) {
- // use touches if touch and not mouse
- if (evt.touches) {
- evt = evt.touches[0];
- } else if (evt.changedTouches) {
- evt = evt.changedTouches[0];
- }
- }
+ function getMouseInfo(canvas, sx, sy, evt) {
const rect = canvas.getBoundingClientRect();
- const sx = canvas.scrollWidth / w || 1;
- const sy = canvas.scrollHeight / h || 1;
return {
- x: (evt.clientX - rect.left) / sx,
- y: (evt.clientY - rect.top) / sy,
- winX: evt.clientX,
- winY: evt.clientY,
- id: evt.identifier
+ x: (evt.clientX - rect.left) / sx,
+ y: (evt.clientY - rect.top) / sy,
+ winX: evt.clientX,
+ winY: evt.clientY,
};
- }
+ }
+
+ function getTouchInfo(canvas, sx, sy, touch) {
+ const rect = canvas.getBoundingClientRect();
+ return {
+ x: (touch.clientX - rect.left) / sx,
+ y: (touch.clientY - rect.top) / sy,
+ winX: touch.clientX,
+ winY: touch.clientY,
+ id: touch.pointerId,
+ };
+}
fn._setMouseButton = function(e) {
if (e.button === 1) {
@@ -1004,10 +1097,7 @@ function mouse(p5, fn){
* ```
*
* On touchscreen devices, `mouseDragged()` will run when a user moves a touch
- * point if touchMoved() isn’t declared. If
- * touchMoved() is declared, then
- * touchMoved() will run when a user moves a
- * touch point and `mouseDragged()` won’t.
+ * point.
*
* Browsers may have default behaviors attached to various mouse events. For
* example, some browsers highlight text when the user moves the mouse while
@@ -1054,30 +1144,26 @@ function mouse(p5, fn){
*
*
*/
- fn._onmousemove = function(e) {
+ fn._onpointermove = function(e) {
const context = this._isGlobal ? window : this;
let executeDefault;
- this._updateNextMouseCoords(e);
- if (!this.mouseIsPressed) {
- if (typeof context.mouseMoved === 'function') {
+ this._updatePointerCoords(e);
+
+ if(e.pointerType === 'touch') {
+ this._activeTouches.set(e.pointerId, e);
+ }
+
+ if (!this.mouseIsPressed && typeof context.mouseMoved === 'function') {
executeDefault = context.mouseMoved(e);
if (executeDefault === false) {
e.preventDefault();
}
- }
- } else {
- if (typeof context.mouseDragged === 'function') {
+ } else if (this.mouseIsPressed && typeof context.mouseDragged === 'function') {
executeDefault = context.mouseDragged(e);
if (executeDefault === false) {
e.preventDefault();
}
- } else if (typeof context.touchMoved === 'function') {
- executeDefault = context.touchMoved(e);
- if (executeDefault === false) {
- e.preventDefault();
- }
- }
- }
+ }
};
/**
@@ -1120,10 +1206,7 @@ function mouse(p5, fn){
* ```
*
* On touchscreen devices, `mousePressed()` will run when a user’s touch
- * begins if touchStarted() isn’t declared. If
- * touchStarted() is declared, then
- * touchStarted() will run when a user’s touch
- * begins and `mousePressed()` won’t.
+ * begins.
*
* Browsers may have default behaviors attached to various mouse events. For
* example, some browsers highlight text when the user moves the mouse while
@@ -1225,31 +1308,25 @@ function mouse(p5, fn){
*
*
*/
- fn._onmousedown = function(e) {
+ fn._onpointerdown = function(e) {
const context = this._isGlobal ? window : this;
let executeDefault;
this.mouseIsPressed = true;
- this._setMouseButton(e);
- this._updateNextMouseCoords(e);
- // _ontouchstart triggers first and sets this._touchstart
- if (this._touchstart) {
- return;
- }
+ if (e.pointerType === 'touch') {
+ this._activeTouches.set(e.pointerId, e);
+ } else {
+ this._setMouseButton(e);
+ }
+
+ this._updatePointerCoords(e);
if (typeof context.mousePressed === 'function') {
executeDefault = context.mousePressed(e);
if (executeDefault === false) {
e.preventDefault();
}
- } else if (typeof context.touchStarted === 'function') {
- executeDefault = context.touchStarted(e);
- if (executeDefault === false) {
- e.preventDefault();
- }
- }
-
- this._touchstart = false;
+ }
};
/**
@@ -1293,10 +1370,7 @@ function mouse(p5, fn){
* ```
*
* On touchscreen devices, `mouseReleased()` will run when a user’s touch
- * ends if touchEnded() isn’t declared. If
- * touchEnded() is declared, then
- * touchEnded() will run when a user’s touch
- * ends and `mouseReleased()` won’t.
+ * ends.
*
* Browsers may have default behaviors attached to various mouse events. For
* example, some browsers highlight text when the user moves the mouse while
@@ -1398,32 +1472,27 @@ function mouse(p5, fn){
*
*
*/
- fn._onmouseup = function(e) {
+ fn._onpointerup = function(e) {
const context = this._isGlobal ? window : this;
let executeDefault;
this.mouseIsPressed = false;
- // _ontouchend triggers first and sets this._touchend
- if (this._touchend) {
- return;
+ if(e.pointerType == 'touch'){
+ this._activeTouches.delete(e.pointerId);
}
+ this._updatePointerCoords(e);
+
if (typeof context.mouseReleased === 'function') {
executeDefault = context.mouseReleased(e);
if (executeDefault === false) {
e.preventDefault();
}
- } else if (typeof context.touchEnded === 'function') {
- executeDefault = context.touchEnded(e);
- if (executeDefault === false) {
- e.preventDefault();
- }
}
- this._touchend = false;
};
- fn._ondragend = fn._onmouseup;
- fn._ondragover = fn._onmousemove;
+ fn._ondragend = fn._onpointerup;
+ fn._ondragover = fn._onpointermove;
/**
* A function that's called once after a mouse button is pressed and released.
@@ -1466,10 +1535,7 @@ function mouse(p5, fn){
* ```
*
* On touchscreen devices, `mouseClicked()` will run when a user’s touch
- * ends if touchEnded() isn’t declared. If
- * touchEnded() is declared, then
- * touchEnded() will run when a user’s touch
- * ends and `mouseClicked()` won’t.
+ * ends.
*
* Browsers may have default behaviors attached to various mouse events. For
* example, some browsers highlight text when the user moves the mouse while
@@ -1989,8 +2055,8 @@ function mouse(p5, fn){
};
}
-export default mouse;
+export default pointer;
if(typeof p5 !== 'undefined'){
- mouse(p5, p5.prototype);
-}
+ pointer(p5, p5.prototype);
+}
\ No newline at end of file
diff --git a/src/events/touch.js b/src/events/touch.js
deleted file mode 100644
index 9a9254a511..0000000000
--- a/src/events/touch.js
+++ /dev/null
@@ -1,641 +0,0 @@
-/**
- * @module Events
- * @submodule Touch
- * @for p5
- * @requires core
- */
-
-function touch(p5, fn){
- /**
- * An `Array` of all the current touch points on a touchscreen device.
- *
- * The `touches` array is empty by default. When the user touches their
- * screen, a new touch point is tracked and added to the array. Touch points
- * are `Objects` with the following properties:
- *
- * ```js
- * // Iterate over the touches array.
- * for (let touch of touches) {
- * // x-coordinate relative to the top-left
- * // corner of the canvas.
- * console.log(touch.x);
- *
- * // y-coordinate relative to the top-left
- * // corner of the canvas.
- * console.log(touch.y);
- *
- * // x-coordinate relative to the top-left
- * // corner of the browser.
- * console.log(touch.winX);
- *
- * // y-coordinate relative to the top-left
- * // corner of the browser.
- * console.log(touch.winY);
- *
- * // ID number
- * console.log(touch.id);
- * }
- * ```
- *
- * @property {Object[]} touches
- * @readOnly
- *
- * @example
- *
- *
- * // On a touchscreen device, touch the canvas using one or more fingers
- * // at the same time.
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * describe(
- * 'A gray square. White circles appear where the user touches the square.'
- * );
- * }
- *
- * function draw() {
- * background(200);
- *
- * // Draw a circle at each touch point.
- * for (let touch of touches) {
- * circle(touch.x, touch.y, 40);
- * }
- * }
- *
- *
- *
- *
- *
- * // On a touchscreen device, touch the canvas using one or more fingers
- * // at the same time.
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * describe(
- * 'A gray square. Labels appear where the user touches the square, displaying the coordinates.'
- * );
- * }
- *
- * function draw() {
- * background(200);
- *
- * // Draw a label above each touch point.
- * for (let touch of touches) {
- * text(`${touch.x}, ${touch.y}`, touch.x, touch.y - 40);
- * }
- * }
- *
- *
- */
- fn.touches = [];
-
- fn._updateTouchCoords = function(e) {
- if (this._curElement !== null) {
- const touches = [];
- for (let i = 0; i < e.touches.length; i++) {
- touches[i] = getTouchInfo(
- this._curElement.elt,
- this.width,
- this.height,
- e,
- i
- );
- }
- this.touches = touches;
- }
- };
-
- function getTouchInfo(canvas, w, h, e, i = 0) {
- const rect = canvas.getBoundingClientRect();
- const sx = canvas.scrollWidth / w || 1;
- const sy = canvas.scrollHeight / h || 1;
- const touch = e.touches[i] || e.changedTouches[i];
- return {
- x: (touch.clientX - rect.left) / sx,
- y: (touch.clientY - rect.top) / sy,
- winX: touch.clientX,
- winY: touch.clientY,
- id: touch.identifier
- };
- }
-
- /**
- * A function that's called once each time the user touches the screen.
- *
- * Declaring a function called `touchStarted()` sets a code block to run
- * automatically each time the user begins touching a touchscreen device:
- *
- * ```js
- * function touchStarted() {
- * // Code to run.
- * }
- * ```
- *
- * The touches array will be updated with the most
- * recent touch points when `touchStarted()` is called by p5.js:
- *
- * ```js
- * function touchStarted() {
- * // Paint over the background.
- * background(200);
- *
- * // Mark each touch point once with a circle.
- * for (let touch of touches) {
- * circle(touch.x, touch.y, 40);
- * }
- * }
- * ```
- *
- * The parameter, event, is optional. `touchStarted()` will be passed a
- * TouchEvent
- * object with properties that describe the touch event:
- *
- * ```js
- * function touchStarted(event) {
- * // Code to run that uses the event.
- * console.log(event);
- * }
- * ```
- *
- * On touchscreen devices, mousePressed() will
- * run when a user’s touch starts if `touchStarted()` isn’t declared. If
- * `touchStarted()` is declared, then `touchStarted()` will run when a user’s
- * touch starts and mousePressed() won’t.
- *
- * Note: `touchStarted()`, touchEnded(), and
- * touchMoved() are all related.
- * `touchStarted()` runs as soon as the user touches a touchscreen device.
- * touchEnded() runs as soon as the user ends a
- * touch. touchMoved() runs repeatedly as the
- * user moves any touch points.
- *
- * @method touchStarted
- * @param {TouchEvent} [event] optional `TouchEvent` argument.
- *
- * @example
- *
- *
- * // On a touchscreen device, touch the canvas using one or more fingers
- * // at the same time.
- *
- * let value = 0;
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * describe(
- * 'A gray square with a black square at its center. The inner square switches color between black and white each time the user touches the screen.'
- * );
- * }
- *
- * function draw() {
- * background(200);
- *
- * // Style the square.
- * fill(value);
- *
- * // Draw the square.
- * square(25, 25, 50);
- * }
- *
- * // Toggle colors with each touch.
- * function touchStarted() {
- * if (value === 0) {
- * value = 255;
- * } else {
- * value = 0;
- * }
- * }
- *
- *
- *
- *
- *
- * // On a touchscreen device, touch the canvas using one or more fingers
- * // at the same time.
- *
- * let bgColor = 50;
- * let fillColor = 255;
- * let borderWidth = 0.5;
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * describe(
- * 'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'
- * );
- * }
- *
- * function draw() {
- * background(bgColor);
- *
- * // Style the text.
- * textAlign(CENTER);
- * textSize(16);
- * fill(0);
- * noStroke();
- *
- * // Display the number of touch points.
- * text(touches.length, 50, 20);
- *
- * // Style the touch points.
- * fill(fillColor);
- * stroke(0);
- * strokeWeight(borderWidth);
- *
- * // Display the touch points as circles.
- * for (let touch of touches) {
- * circle(touch.x, touch.y, 40);
- * }
- * }
- *
- * // Set the background color to a random grayscale value.
- * function touchStarted() {
- * bgColor = random(80, 255);
- * }
- *
- * // Set the fill color to a random grayscale value.
- * function touchEnded() {
- * fillColor = random(0, 255);
- * }
- *
- * // Set the stroke weight.
- * function touchMoved() {
- * // Increment the border width.
- * borderWidth += 0.1;
- *
- * // Reset the border width once it's too thick.
- * if (borderWidth > 20) {
- * borderWidth = 0.5;
- * }
- * }
- *
- *
- */
- fn._ontouchstart = function(e) {
- const context = this._isGlobal ? window : this;
- let executeDefault;
- this.mouseIsPressed = true;
- this._updateTouchCoords(e);
- this._updateNextMouseCoords(e);
- this._updateMouseCoords(); // reset pmouseXY at the start of each touch event
-
- if (typeof context.touchStarted === 'function') {
- executeDefault = context.touchStarted(e);
- if (executeDefault === false) {
- e.preventDefault();
- }
- this._touchstart = true;
- }
- };
-
- /**
- * A function that's called when the user touches the screen and moves.
- *
- * Declaring the function `touchMoved()` sets a code block to run
- * automatically when the user touches a touchscreen device and moves:
- *
- * ```js
- * function touchMoved() {
- * // Code to run.
- * }
- * ```
- *
- * The touches array will be updated with the most
- * recent touch points when `touchMoved()` is called by p5.js:
- *
- * ```js
- * function touchMoved() {
- * // Paint over the background.
- * background(200);
- *
- * // Mark each touch point while the user moves.
- * for (let touch of touches) {
- * circle(touch.x, touch.y, 40);
- * }
- * }
- * ```
- *
- * The parameter, event, is optional. `touchMoved()` will be passed a
- * TouchEvent
- * object with properties that describe the touch event:
- *
- * ```js
- * function touchMoved(event) {
- * // Code to run that uses the event.
- * console.log(event);
- * }
- * ```
- *
- * On touchscreen devices, mouseDragged() will
- * run when the user’s touch points move if `touchMoved()` isn’t declared. If
- * `touchMoved()` is declared, then `touchMoved()` will run when a user’s
- * touch points move and mouseDragged() won’t.
- *
- * Note: touchStarted(),
- * touchEnded(), and
- * `touchMoved()` are all related.
- * touchStarted() runs as soon as the user
- * touches a touchscreen device. touchEnded()
- * runs as soon as the user ends a touch. `touchMoved()` runs repeatedly as
- * the user moves any touch points.
- *
- * @method touchMoved
- * @param {TouchEvent} [event] optional TouchEvent argument.
- *
- * @example
- *
- *
- * // On a touchscreen device, touch the canvas using one or more fingers
- * // at the same time.
- *
- * let value = 0;
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * describe(
- * 'A gray square with a black square at its center. The inner square becomes lighter when the user touches the screen and moves.'
- * );
- * }
- *
- * function draw() {
- * background(200);
- *
- * // Style the square.
- * fill(value);
- *
- * // Draw the square.
- * square(25, 25, 50);
- * }
- *
- * function touchMoved() {
- * // Update the grayscale value.
- * value += 5;
- *
- * // Reset the grayscale value.
- * if (value > 255) {
- * value = 0;
- * }
- * }
- *
- *
- *
- *
- *
- * // On a touchscreen device, touch the canvas using one or more fingers
- * // at the same time.
- *
- * let bgColor = 50;
- * let fillColor = 255;
- * let borderWidth = 0.5;
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * describe(
- * 'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'
- * );
- * }
- *
- * function draw() {
- * background(bgColor);
- *
- * // Style the text.
- * textAlign(CENTER);
- * textSize(16);
- * fill(0);
- * noStroke();
- *
- * // Display the number of touch points.
- * text(touches.length, 50, 20);
- *
- * // Style the touch points.
- * fill(fillColor);
- * stroke(0);
- * strokeWeight(borderWidth);
- *
- * // Display the touch points as circles.
- * for (let touch of touches) {
- * circle(touch.x, touch.y, 40);
- * }
- * }
- *
- * // Set the background color to a random grayscale value.
- * function touchStarted() {
- * bgColor = random(80, 255);
- * }
- *
- * // Set the fill color to a random grayscale value.
- * function touchEnded() {
- * fillColor = random(0, 255);
- * }
- *
- * // Set the stroke weight.
- * function touchMoved() {
- * // Increment the border width.
- * borderWidth += 0.1;
- *
- * // Reset the border width once it's too thick.
- * if (borderWidth > 20) {
- * borderWidth = 0.5;
- * }
- * }
- *
- *
- */
- fn._ontouchmove = function(e) {
- const context = this._isGlobal ? window : this;
- let executeDefault;
- this._updateTouchCoords(e);
- this._updateNextMouseCoords(e);
- if (typeof context.touchMoved === 'function') {
- executeDefault = context.touchMoved(e);
- if (executeDefault === false) {
- e.preventDefault();
- }
- } else if (typeof context.mouseDragged === 'function') {
- executeDefault = context.mouseDragged(e);
- if (executeDefault === false) {
- e.preventDefault();
- }
- }
- };
-
- /**
- * A function that's called once each time a screen touch ends.
- *
- * Declaring the function `touchEnded()` sets a code block to run
- * automatically when the user stops touching a touchscreen device:
- *
- * ```js
- * function touchEnded() {
- * // Code to run.
- * }
- * ```
- *
- * The touches array will be updated with the most
- * recent touch points when `touchEnded()` is called by p5.js:
- *
- * ```js
- * function touchEnded() {
- * // Paint over the background.
- * background(200);
- *
- * // Mark each remaining touch point when the user stops
- * // a touch.
- * for (let touch of touches) {
- * circle(touch.x, touch.y, 40);
- * }
- * }
- * ```
- *
- * The parameter, event, is optional. `touchEnded()` will be passed a
- * TouchEvent
- * object with properties that describe the touch event:
- *
- * ```js
- * function touchEnded(event) {
- * // Code to run that uses the event.
- * console.log(event);
- * }
- * ```
- *
- * On touchscreen devices, mouseReleased() will
- * run when the user’s touch ends if `touchEnded()` isn’t declared. If
- * `touchEnded()` is declared, then `touchEnded()` will run when a user’s
- * touch ends and mouseReleased() won’t.
- *
- * Note: touchStarted(),
- * `touchEnded()`, and touchMoved() are all
- * related. touchStarted() runs as soon as the
- * user touches a touchscreen device. `touchEnded()` runs as soon as the user
- * ends a touch. touchMoved() runs repeatedly as
- * the user moves any touch points.
- *
- * @method touchEnded
- * @param {TouchEvent} [event] optional `TouchEvent` argument.
- *
- * @example
- *
- *
- * // On a touchscreen device, touch the canvas using one or more fingers
- * // at the same time.
- *
- * let value = 0;
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * describe(
- * 'A gray square with a black square at its center. The inner square switches color between black and white each time the user stops touching the screen.'
- * );
- * }
- *
- * function draw() {
- * background(200);
- *
- * // Style the square.
- * fill(value);
- *
- * // Draw the square.
- * square(25, 25, 50);
- * }
- *
- * // Toggle colors when a touch ends.
- * function touchEnded() {
- * if (value === 0) {
- * value = 255;
- * } else {
- * value = 0;
- * }
- * }
- *
- *
- *
- *
- *
- * // On a touchscreen device, touch the canvas using one or more fingers
- * // at the same time.
- *
- * let bgColor = 50;
- * let fillColor = 255;
- * let borderWidth = 0.5;
- *
- * function setup() {
- * createCanvas(100, 100);
- *
- * describe(
- * 'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'
- * );
- * }
- *
- * function draw() {
- * background(bgColor);
- *
- * // Style the text.
- * textAlign(CENTER);
- * textSize(16);
- * fill(0);
- * noStroke();
- *
- * // Display the number of touch points.
- * text(touches.length, 50, 20);
- *
- * // Style the touch points.
- * fill(fillColor);
- * stroke(0);
- * strokeWeight(borderWidth);
- *
- * // Display the touch points as circles.
- * for (let touch of touches) {
- * circle(touch.x, touch.y, 40);
- * }
- * }
- *
- * // Set the background color to a random grayscale value.
- * function touchStarted() {
- * bgColor = random(80, 255);
- * }
- *
- * // Set the fill color to a random grayscale value.
- * function touchEnded() {
- * fillColor = random(0, 255);
- * }
- *
- * // Set the stroke weight.
- * function touchMoved() {
- * // Increment the border width.
- * borderWidth += 0.1;
- *
- * // Reset the border width once it's too thick.
- * if (borderWidth > 20) {
- * borderWidth = 0.5;
- * }
- * }
- *
- *
- */
- fn._ontouchend = function(e) {
- this.mouseIsPressed = false;
- this._updateTouchCoords(e);
- this._updateNextMouseCoords(e);
- const context = this._isGlobal ? window : this;
- let executeDefault;
- if (typeof context.touchEnded === 'function') {
- executeDefault = context.touchEnded(e);
- if (executeDefault === false) {
- e.preventDefault();
- }
- this._touchend = true;
- }
- };
-}
-
-export default touch;
-
-if(typeof p5 !== 'undefined'){
- touch(p5, p5.prototype);
-}
diff --git a/test/unit/events/mouse.js b/test/unit/events/mouse.js
index 0165d4199a..baa956925c 100644
--- a/test/unit/events/mouse.js
+++ b/test/unit/events/mouse.js
@@ -47,8 +47,8 @@ suite.todo('Mouse Events', function() {
myp5.remove();
});
- let mouseEvent1 = new MouseEvent('mousemove', { clientX: 100, clientY: 100 });
- let mouseEvent2 = new MouseEvent('mousemove', { clientX: 200, clientY: 200 });
+ let mouseEvent1 = new PointerEvent('pointermove', { clientX: 100, clientY: 100 });
+ let mouseEvent2 = new PointerEvent('pointermove', { clientX: 200, clientY: 200 });
suite('p5.prototype._hasMouseInteracted', function() {
test('_hasMouseInteracted should be a boolean', function() {
@@ -223,17 +223,17 @@ suite.todo('Mouse Events', function() {
});
test('mouseButton should be "left" on left mouse button click', function() {
- window.dispatchEvent(new MouseEvent('mousedown', { button: 0 }));
+ window.dispatchEvent(new PointerEvent('pointerdown', { button: 0 }));
assert.strictEqual(myp5.mouseButton, 'left');
});
test('mouseButton should be "center" on auxillary mouse button click', function() {
- window.dispatchEvent(new MouseEvent('mousedown', { button: 1 }));
+ window.dispatchEvent(new PointerEvent('pointerdown', { button: 1 }));
assert.strictEqual(myp5.mouseButton, 'center');
});
test('mouseButton should be "right" on right mouse button click', function() {
- window.dispatchEvent(new MouseEvent('mousedown', { button: 2 }));
+ window.dispatchEvent(new PointerEvent('pointerdown', { button: 2 }));
assert.strictEqual(myp5.mouseButton, 'right');
});
});
@@ -280,7 +280,7 @@ suite.todo('Mouse Events', function() {
};
let sketches = parallelSketches([sketchFn, sketchFn]); //create two sketches
await sketches.setup; //wait for all sketches to setup
- window.dispatchEvent(new MouseEvent('mousemove')); //dispatch a mouse event to trigger the mouseMoved functions
+ window.dispatchEvent(new PointerEvent('pointermove')); //dispatch a mouse event to trigger the mouseMoved functions
sketches.end(); //resolve all sketches by calling their finish functions
let counts = await sketches.result; //get array holding number of times mouseMoved was called. Rejected sketches also thrown here
assert.deepEqual(counts, [1, 1]);
@@ -295,8 +295,8 @@ suite.todo('Mouse Events', function() {
count += 1;
};
- window.dispatchEvent(new MouseEvent('mousedown')); //dispatch a mousedown event
- window.dispatchEvent(new MouseEvent('mousemove')); //dispatch mousemove event while mouse is down to trigger mouseDragged
+ window.dispatchEvent(new PointerEvent('pointerdown')); //dispatch a mousedown event
+ window.dispatchEvent(new PointerEvent('pointermove')); //dispatch mousemove event while mouse is down to trigger mouseDragged
assert.deepEqual(count, 1);
});
@@ -314,8 +314,8 @@ suite.todo('Mouse Events', function() {
};
let sketches = parallelSketches([sketchFn, sketchFn]); //create two sketches
await sketches.setup; //wait for all sketches to setup
- window.dispatchEvent(new MouseEvent('mousedown')); //dispatch a mousedown event
- window.dispatchEvent(new MouseEvent('mousemove')); //dispatch mousemove event while mouse is down to trigger mouseDragged
+ window.dispatchEvent(new PointerEvent('pointerdown')); //dispatch a mousedown event
+ window.dispatchEvent(new PointerEvent('pointermove')); //dispatch mousemove event while mouse is down to trigger mouseDragged
sketches.end(); //resolve all sketches by calling their finish functions
let counts = await sketches.result; //get array holding number of times mouseDragged was called. Rejected sketches also thrown here
assert.deepEqual(counts, [1, 1]);
@@ -330,7 +330,7 @@ suite.todo('Mouse Events', function() {
count += 1;
};
- window.dispatchEvent(new MouseEvent('mousedown'));
+ window.dispatchEvent(new PointerEvent('pointerdown'));
assert.deepEqual(count, 1);
});
@@ -348,7 +348,7 @@ suite.todo('Mouse Events', function() {
};
let sketches = parallelSketches([sketchFn, sketchFn]); //create two sketches
await sketches.setup; //wait for all sketches to setup
- window.dispatchEvent(new MouseEvent('mousedown'));
+ window.dispatchEvent(new PointerEvent('pointerdown'));
sketches.end(); //resolve all sketches by calling their finish functions
let counts = await sketches.result; //get array holding number of times mouseDragged was called. Rejected sketches also thrown here
assert.deepEqual(counts, [1, 1]);
@@ -363,7 +363,7 @@ suite.todo('Mouse Events', function() {
count += 1;
};
- window.dispatchEvent(new MouseEvent('mouseup'));
+ window.dispatchEvent(new PointerEvent('pointerup'));
assert.deepEqual(count, 1);
});
@@ -381,7 +381,7 @@ suite.todo('Mouse Events', function() {
};
let sketches = parallelSketches([sketchFn, sketchFn]); //create two sketches
await sketches.setup; //wait for all sketches to setup
- window.dispatchEvent(new MouseEvent('mouseup'));
+ window.dispatchEvent(new PointerEvent('pointerup'));
sketches.end(); //resolve all sketches by calling their finish functions
let counts = await sketches.result; //get array holding number of times mouseReleased was called. Rejected sketches also thrown here
assert.deepEqual(counts, [1, 1]);
diff --git a/test/unit/events/touch.js b/test/unit/events/touch.js
index 72d3dd20c6..54677a59cc 100644
--- a/test/unit/events/touch.js
+++ b/test/unit/events/touch.js
@@ -4,9 +4,6 @@ import { parallelSketches } from '../../js/p5_helpers';
suite('Touch Events', function() {
let myp5;
- let canvas;
- let touchObj1;
- let touchObj2;
let touchEvent1;
let touchEvent2;
@@ -14,24 +11,19 @@ suite('Touch Events', function() {
new p5(function(p) {
p.setup = function() {
myp5 = p;
- canvas = myp5._curElement.elt;
- touchObj1 = new Touch({
- target: canvas,
+ touchEvent1 = new PointerEvent('pointerdown', {
+ pointerId: 1,
clientX: 100,
clientY: 100,
- identifier: 36
+ pointerType: 'touch'
});
- touchObj2 = new Touch({
- target: canvas,
+
+ // Simulate second touch event
+ touchEvent2 = new PointerEvent('pointerdown', {
+ pointerId: 2,
clientX: 200,
clientY: 200,
- identifier: 35
- });
- touchEvent1 = new TouchEvent('touchmove', {
- touches: [touchObj1, touchObj2]
- });
- touchEvent2 = new TouchEvent('touchmove', {
- touches: [touchObj2]
+ pointerType: 'touch'
});
};
});
@@ -48,136 +40,12 @@ suite('Touch Events', function() {
test('should be an array of multiple touches', function() {
window.dispatchEvent(touchEvent1);
+ window.dispatchEvent(touchEvent2);
assert.strictEqual(myp5.touches.length, 2);
});
test('should contain the touch registered', function() {
- window.dispatchEvent(touchEvent2);
- assert.strictEqual(myp5.touches[0].id, 35);
- });
- });
-
- suite('touchStarted', function() {
- test('touchStarted should be fired when a touch is registered', function() {
- let count = 0;
- myp5.touchStarted = function() {
- count += 1;
- };
- window.dispatchEvent(new TouchEvent('touchstart'));
- assert.strictEqual(count, 1);
- });
-
- test('should be fired when a touch starts over the element', function() {
- let count = 0;
- let div = myp5.createDiv();
- let divTouchStarted = function() {
- count += 1;
- };
- div.touchStarted(divTouchStarted);
- div.elt.dispatchEvent(new TouchEvent('touchstart'));
- assert.strictEqual(count, 1);
- });
-
- // NOTE: Required review of parallel sketches test method
- test('touchStarted functions on multiple instances must run once', async function() {
- let sketchFn = function(sketch, resolve, reject) {
- let count = 0;
- sketch.touchStarted = function() {
- count += 1;
- };
-
- sketch.finish = function() {
- resolve(count);
- };
- };
- let sketches = parallelSketches([sketchFn, sketchFn]); //create two sketches
- await sketches.setup; //wait for all sketches to setup
- window.dispatchEvent(new TouchEvent('touchstart'));
- sketches.end(); //resolve all sketches by calling their finish functions
- let counts = await sketches.result;
- assert.deepEqual(counts, [1, 1]);
- });
- });
-
- suite('touchMoved', function() {
- test('touchMoved should be fired when a touchmove is registered', function() {
- let count = 0;
- myp5.touchMoved = function() {
- count += 1;
- };
- window.dispatchEvent(touchEvent2);
- assert.strictEqual(count, 1);
- });
-
- test('should be fired when a touchmove is registered over the element', function() {
- let count = 0;
- let div = myp5.createDiv();
- let divTouchMoved = function() {
- count += 1;
- };
- div.touchMoved(divTouchMoved);
- div.elt.dispatchEvent(touchEvent2);
- assert.strictEqual(count, 1);
- });
-
- test('touchMoved functions on multiple instances must run once', async function() {
- let sketchFn = function(sketch, resolve, reject) {
- let count = 0;
- sketch.touchMoved = function() {
- count += 1;
- };
-
- sketch.finish = function() {
- resolve(count);
- };
- };
- let sketches = parallelSketches([sketchFn, sketchFn]); //create two sketches
- await sketches.setup; //wait for all sketches to setup
- window.dispatchEvent(touchEvent2);
- sketches.end(); //resolve all sketches by calling their finish functions
- let counts = await sketches.result;
- assert.deepEqual(counts, [1, 1]);
- });
- });
-
- suite('touchEnded', function() {
- test('touchEnded must run when a touch is registered', function() {
- let count = 0;
- myp5.touchEnded = function() {
- count += 1;
- };
- window.dispatchEvent(new TouchEvent('touchend'));
- assert.strictEqual(count, 1);
- });
-
- test('should be fired when a touch starts over the element', function() {
- let count = 0;
- let div = myp5.createDiv();
- let divTouchEnded = function() {
- count += 1;
- };
- div.touchEnded(divTouchEnded);
- div.elt.dispatchEvent(new TouchEvent('touchend'));
- assert.strictEqual(count, 1);
- });
-
- test('touchEnded functions on multiple instances must run once', async function() {
- let sketchFn = function(sketch, resolve, reject) {
- let count = 0;
- sketch.touchEnded = function() {
- count += 1;
- };
-
- sketch.finish = function() {
- resolve(count);
- };
- };
- let sketches = parallelSketches([sketchFn, sketchFn]); //create two sketches
- await sketches.setup; //wait for all sketches to setup
- window.dispatchEvent(new TouchEvent('touchend'));
- sketches.end(); //resolve all sketches by calling their finish functions
- let counts = await sketches.result;
- assert.deepEqual(counts, [1, 1]);
+ assert.strictEqual(myp5.touches[0].id, 1);
});
});
});