From 3d833d1c49765b7c44752beb4d7758082c5eafcf Mon Sep 17 00:00:00 2001 From: Diya Solanki Date: Tue, 19 Nov 2024 00:10:18 +0530 Subject: [PATCH] Removed touchStarted/Ended --- src/core/main.js | 2 +- src/events/mouse.js | 19 +- src/events/touch.js | 489 +------------------------------------- test/unit/events/touch.js | 124 ---------- 4 files changed, 4 insertions(+), 630 deletions(-) diff --git a/src/core/main.js b/src/core/main.js index 0e2492a158..c0c9948e07 100644 --- a/src/core/main.js +++ b/src/core/main.js @@ -65,7 +65,7 @@ class p5 { pointerdown: null, pointerup: null, pointermove: null, - pointercancle:null, + pointercancel:null, dragend: null, dragover: null, click: null, diff --git a/src/events/mouse.js b/src/events/mouse.js index 58404fd79b..32feca2d9e 100644 --- a/src/events/mouse.js +++ b/src/events/mouse.js @@ -1071,12 +1071,7 @@ function mouse(p5, fn){ if (executeDefault === false) { e.preventDefault(); } - } else if (typeof context.touchMoved === 'function') { - executeDefault = context.touchMoved(e); - if (executeDefault === false) { - e.preventDefault(); - } - } + } } }; @@ -1237,12 +1232,7 @@ function mouse(p5, fn){ if (executeDefault === false) { e.preventDefault(); } - } else if (typeof context.touchStarted === 'function') { - executeDefault = context.touchStarted(e); - if (executeDefault === false) { - e.preventDefault(); - } - } + } }; /** @@ -1401,11 +1391,6 @@ function mouse(p5, fn){ if (executeDefault === false) { e.preventDefault(); } - } else if (typeof context.touchEnded === 'function') { - executeDefault = context.touchEnded(e); - if (executeDefault === false) { - e.preventDefault(); - } } }; diff --git a/src/events/touch.js b/src/events/touch.js index 9a9254a511..4d21696377 100644 --- a/src/events/touch.js +++ b/src/events/touch.js @@ -120,343 +120,19 @@ function touch(p5, fn){ 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') { + if (typeof context.mouseDragged === 'function') { executeDefault = context.mouseDragged(e); if (executeDefault === false) { e.preventDefault(); @@ -464,173 +140,10 @@ function touch(p5, fn){ } }; - /** - * 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; - } }; } diff --git a/test/unit/events/touch.js b/test/unit/events/touch.js index 72d3dd20c6..d7d5f12b9b 100644 --- a/test/unit/events/touch.js +++ b/test/unit/events/touch.js @@ -56,128 +56,4 @@ suite('Touch Events', function() { 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]); - }); - }); });