From 466ce77677bf0b871295c5257ff2ef28c3ee474d Mon Sep 17 00:00:00 2001 From: jivansh77 Date: Tue, 31 Dec 2024 03:49:44 +0530 Subject: [PATCH 01/11] Fixes #4096 touch functionality --- js/activity.js | 76 ++++++++++++++++++++++++-------------------------- js/blocks.js | 26 +++++++++++++++++ 2 files changed, 63 insertions(+), 39 deletions(-) diff --git a/js/activity.js b/js/activity.js index 77a3c5f61f..c4ac1eeea4 100644 --- a/js/activity.js +++ b/js/activity.js @@ -1916,7 +1916,9 @@ class Activity { // Assuming you have defined 'that' and 'closeAnyOpenMenusAndLabels' elsewhere in your code const myCanvas = document.getElementById("myCanvas"); - const initialTouches = [[null, null], [null, null]]; // Array to track two fingers (Y and X coordinates) + let lastTouchY = null; + let lastTouchX = null; + let initialTouchDistance = null; /** * Handles touch start event on the canvas. @@ -1924,54 +1926,50 @@ class Activity { */ myCanvas.addEventListener("touchstart", (event) => { if (event.touches.length === 2) { - for (let i = 0; i < 2; i++) { - initialTouches[i][0] = event.touches[i].clientY; - initialTouches[i][1] = event.touches[i].clientX; - } + that.inTwoFingerScroll = true; + + lastTouchY = (event.touches[0].clientY + event.touches[1].clientY) / 2; + lastTouchX = (event.touches[0].clientX + event.touches[1].clientX) / 2; + + // Calculate initial distance between fingers for potential zoom detection + initialTouchDistance = Math.hypot( + event.touches[0].clientX - event.touches[1].clientX, + event.touches[0].clientY - event.touches[1].clientY + ); } }); - /** - * Handles touch move event on the canvas. - * @param {TouchEvent} event - The touch event object. - */ myCanvas.addEventListener("touchmove", (event) => { - if (event.touches.length === 2) { - for (let i = 0; i < 2; i++) { - const touchY = event.touches[i].clientY; - const touchX = event.touches[i].clientX; - - if (initialTouches[i][0] !== null && initialTouches[i][1] !== null) { - const deltaY = touchY - initialTouches[i][0]; - const deltaX = touchX - initialTouches[i][1]; - - if (deltaY !== 0) { - closeAnyOpenMenusAndLabels(); - that.blocksContainer.y -= deltaY; - } - - if (deltaX !== 0) { - closeAnyOpenMenusAndLabels(); - that.blocksContainer.x -= deltaX; - } - - initialTouches[i][0] = touchY; - initialTouches[i][1] = touchX; - } + if (event.touches.length === 2 && that.inTwoFingerScroll) { + + // Calculate center point + const currentTouchY = (event.touches[0].clientY + event.touches[1].clientY) / 2; + const currentTouchX = (event.touches[0].clientX + event.touches[1].clientX) / 2; + + if (lastTouchY !== null && lastTouchX !== null) { + const deltaY = currentTouchY - lastTouchY; + const deltaX = currentTouchX - lastTouchX; + that.blocks.moveContainer(deltaX, deltaY); } - - that.refreshCanvas(); + + lastTouchY = currentTouchY; + lastTouchX = currentTouchX; } }); - /** - * Handles touch end event on the canvas. - */ myCanvas.addEventListener("touchend", () => { - for (let i = 0; i < 2; i++) { - initialTouches[i][0] = null; - initialTouches[i][1] = null; + that.inTwoFingerScroll = false; + lastTouchY = null; + lastTouchX = null; + initialTouchDistance = null; + + // Clear throttle timers + if (that.blocks._scrollThrottleTimer) { + clearTimeout(that.blocks._scrollThrottleTimer); + that.blocks._scrollThrottleTimer = null; } + + that.refreshCanvas(); }); /** diff --git a/js/blocks.js b/js/blocks.js index 121c0db872..1f8ee3e050 100644 --- a/js/blocks.js +++ b/js/blocks.js @@ -2379,6 +2379,11 @@ class Blocks { * @returns {void} */ this._moveBlock = (blk, x, y) => { + // If doing two-finger scroll, don't process any block movements + if (this.activity.inTwoFingerScroll) { + return; + } + const myBlock = this.blockList[blk]; if (myBlock.container != null) { /** Round position so font renders clearly. */ @@ -2401,6 +2406,11 @@ class Blocks { * @returns {void} */ this.moveBlockRelative = (blk, dx, dy) => { + // If doing two-finger scroll, don't allow block disconnection + if (this.activity.inTwoFingerScroll) { + return; + } + this.inLongPress = false; this.isBlockMoving = true; const myBlock = this.blockList[blk]; @@ -2415,6 +2425,22 @@ class Blocks { } }; + this.moveContainer = (dx, dy) => { + if (!this.activity.scrollBlockContainer && dx !== 0) { + dx = 0; + } + + this.activity.blocksContainer.x += dx; + this.activity.blocksContainer.y += dy; + + if (!this._scrollThrottleTimer) { + this._scrollThrottleTimer = setTimeout(() => { + this.checkBounds(); + this._scrollThrottleTimer = null; + }, 50); + } + }; + /** * Moves the blocks in a stack to a new position. * @param blk - block From 21cbb10cc62c4268ed6b3314711090ae513b540f Mon Sep 17 00:00:00 2001 From: jivansh77 Date: Tue, 31 Dec 2024 18:09:38 +0530 Subject: [PATCH 02/11] Long-press opens context menus --- js/activity.js | 4 +++- js/piemenus.js | 34 ++++++++++++++++++++++++++++++++++ 2 files changed, 37 insertions(+), 1 deletion(-) diff --git a/js/activity.js b/js/activity.js index c4ac1eeea4..59c772b1b6 100644 --- a/js/activity.js +++ b/js/activity.js @@ -505,7 +505,7 @@ class Activity { /* * Sets up right click functionality opening the context menus - * (if block is right clicked) + * (if block is right clicked or long-pressed) */ this.doContextMenus = () => { document.addEventListener( @@ -1928,6 +1928,8 @@ class Activity { if (event.touches.length === 2) { that.inTwoFingerScroll = true; + closeAnyOpenMenusAndLabels(); + lastTouchY = (event.touches[0].clientY + event.touches[1].clientY) / 2; lastTouchX = (event.touches[0].clientX + event.touches[1].clientX) / 2; diff --git a/js/piemenus.js b/js/piemenus.js index c7df75f46b..d38cb5c090 100644 --- a/js/piemenus.js +++ b/js/piemenus.js @@ -3502,6 +3502,40 @@ const piemenuBlockContext = (block) => { setTimeout(() => { that.blocks.stageClick = false; }, 500); + + // Long-press on blocks + let longPressTimer = null; + const LONG_PRESS_DURATION = 500; + + block.container.on("touchstart", (event) => { + if (event.touches.length !== 1) return; + + longPressTimer = setTimeout(() => { + docById("contextWheelDiv").style.position = "absolute"; + docById("contextWheelDiv").style.display = ""; + + const x = block.container.x; + const y = block.container.y; + const canvasLeft = block.activity.canvas.offsetLeft + 28 * block.blocks.blockScale; + const canvasTop = block.activity.canvas.offsetTop + 6 * block.blocks.blockScale; + + docById("contextWheelDiv").style.left = Math.round((x + block.activity.blocksContainer.x) * + block.activity.getStageScale() + canvasLeft) + "px"; + docById("contextWheelDiv").style.top = Math.round((y + block.activity.blocksContainer.y) * + block.activity.getStageScale() + canvasTop) + "px"; + }, LONG_PRESS_DURATION); + }); + + const clearTimer = () => { + if (longPressTimer) { + clearTimeout(longPressTimer); + longPressTimer = null; + } + }; + + block.container.on("touchend", clearTimer); + block.container.on("touchcancel", clearTimer); + block.container.on("touchmove", clearTimer); }; /** From dcfd68f8bb3afac5eb27ce822d354bd82a1fee69 Mon Sep 17 00:00:00 2001 From: jivansh77 Date: Wed, 1 Jan 2025 03:39:39 +0530 Subject: [PATCH 03/11] Removing overlap on long-press --- js/blocks.js | 4 ++++ js/piemenus.js | 8 +++++++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/js/blocks.js b/js/blocks.js index 1f8ee3e050..d434f5c4c2 100644 --- a/js/blocks.js +++ b/js/blocks.js @@ -5039,6 +5039,10 @@ class Blocks { } this.inLongPress = true; + + const helpfulWheel = docById("helpfulWheelDiv"); + helpfulWheel.style.display = "none"; + piemenuBlockContext(this.blockList[this.activeBlock]); }; diff --git a/js/piemenus.js b/js/piemenus.js index d38cb5c090..5f42cc9bd6 100644 --- a/js/piemenus.js +++ b/js/piemenus.js @@ -3508,6 +3508,9 @@ const piemenuBlockContext = (block) => { const LONG_PRESS_DURATION = 500; block.container.on("touchstart", (event) => { + event.preventDefault(); + event.stopPropagation(); + if (event.touches.length !== 1) return; longPressTimer = setTimeout(() => { @@ -3533,9 +3536,12 @@ const piemenuBlockContext = (block) => { } }; + block.container.on("touchmove", (event) => { + event.preventDefault(); + clearTimer(); + }); block.container.on("touchend", clearTimer); block.container.on("touchcancel", clearTimer); - block.container.on("touchmove", clearTimer); }; /** From af89c3e7b811ab68d098268c9d0546fde9df29e9 Mon Sep 17 00:00:00 2001 From: jivansh77 Date: Sun, 5 Jan 2025 15:44:58 +0530 Subject: [PATCH 04/11] Removing unnecessary code --- js/blocks.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/js/blocks.js b/js/blocks.js index d434f5c4c2..072dd4a826 100644 --- a/js/blocks.js +++ b/js/blocks.js @@ -5039,9 +5039,6 @@ class Blocks { } this.inLongPress = true; - - const helpfulWheel = docById("helpfulWheelDiv"); - helpfulWheel.style.display = "none"; piemenuBlockContext(this.blockList[this.activeBlock]); }; From a2f1aeaa6b8c7bdc735acdf75647b1ef6143cf7a Mon Sep 17 00:00:00 2001 From: jivansh77 Date: Sun, 5 Jan 2025 16:07:06 +0530 Subject: [PATCH 05/11] Fixes long press touch opens menus --- js/activity.js | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/js/activity.js b/js/activity.js index 59c772b1b6..f0f63524e2 100644 --- a/js/activity.js +++ b/js/activity.js @@ -508,6 +508,9 @@ class Activity { * (if block is right clicked or long-pressed) */ this.doContextMenus = () => { + let longPressTimer = null; + const LONG_PRESS_DURATION = 500; + document.addEventListener( "contextmenu", (event) => { @@ -521,6 +524,38 @@ class Activity { }, false ); + + // Add touch event handlers + document.addEventListener("touchstart", (event) => { + if (event.touches.length !== 1) return; + + const touch = event.touches[0]; + if (!this.beginnerMode && touch.target.id === "myCanvas" && + !this.blocks.isCoordinateOnBlock(touch.clientX, touch.clientY)) { + longPressTimer = setTimeout(() => { + const touchEvent = { + clientX: touch.clientX, + clientY: touch.clientY, + preventDefault: () => {}, + stopPropagation: () => {}, + target: touch.target + }; + this._displayHelpfulWheel(touchEvent); + }, LONG_PRESS_DURATION); + } + }, false); + + // Clear timer if touch ends or moves + const clearTimer = () => { + if (longPressTimer) { + clearTimeout(longPressTimer); + longPressTimer = null; + } + }; + + document.addEventListener("touchend", clearTimer, false); + document.addEventListener("touchcancel", clearTimer, false); + document.addEventListener("touchmove", clearTimer, false); }; /* From fc25ba0a86baa797a7053630fbeadb260aa84946 Mon Sep 17 00:00:00 2001 From: jivansh77 Date: Sun, 5 Jan 2025 16:42:36 +0530 Subject: [PATCH 06/11] Preventing the event propagation to blocks for touch --- js/activity.js | 12 ++++++++++++ js/piemenus.js | 12 ++++++++++++ 2 files changed, 24 insertions(+) diff --git a/js/activity.js b/js/activity.js index f0f63524e2..47bd62dab4 100644 --- a/js/activity.js +++ b/js/activity.js @@ -589,6 +589,18 @@ class Activity { docById("helpfulWheelDiv").style.display = ""; + docById("helpfulWheelDiv").addEventListener('touchstart', (e) => { + e.stopPropagation(); + }, true); + + docById("helpfulWheelDiv").addEventListener('touchend', (e) => { + e.stopPropagation(); + }, true); + + docById("helpfulWheelDiv").addEventListener('touchmove', (e) => { + e.stopPropagation(); + }, true); + const wheel = new wheelnav("helpfulWheelDiv", null, 300, 300); wheel.colors = platformColor.wheelcolors; wheel.slicePathFunction = slicePath().DonutSlice; diff --git a/js/piemenus.js b/js/piemenus.js index 5f42cc9bd6..f7510245ed 100644 --- a/js/piemenus.js +++ b/js/piemenus.js @@ -3341,6 +3341,18 @@ const piemenuBlockContext = (block) => { docById("contextWheelDiv").style.display = ""; + docById("contextWheelDiv").addEventListener('touchstart', (e) => { + e.stopPropagation(); + }, true); + + docById("contextWheelDiv").addEventListener('touchend', (e) => { + e.stopPropagation(); + }, true); + + docById("contextWheelDiv").addEventListener('touchmove', (e) => { + e.stopPropagation(); + }, true); + const labels = [ "imgsrc:header-icons/copy-button.svg", "imgsrc:header-icons/extract-button.svg", From 04850dbc4130b753f5a6f4a9b8f58c7874191aa2 Mon Sep 17 00:00:00 2001 From: jivansh77 Date: Sun, 5 Jan 2025 20:50:31 +0530 Subject: [PATCH 07/11] Fixes zoom on scroll for certain browsers --- js/activity.js | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/js/activity.js b/js/activity.js index 47bd62dab4..f42d18c55a 100644 --- a/js/activity.js +++ b/js/activity.js @@ -1965,7 +1965,6 @@ class Activity { const myCanvas = document.getElementById("myCanvas"); let lastTouchY = null; let lastTouchX = null; - let initialTouchDistance = null; /** * Handles touch start event on the canvas. @@ -1973,23 +1972,19 @@ class Activity { */ myCanvas.addEventListener("touchstart", (event) => { if (event.touches.length === 2) { + event.preventDefault(); that.inTwoFingerScroll = true; closeAnyOpenMenusAndLabels(); lastTouchY = (event.touches[0].clientY + event.touches[1].clientY) / 2; lastTouchX = (event.touches[0].clientX + event.touches[1].clientX) / 2; - - // Calculate initial distance between fingers for potential zoom detection - initialTouchDistance = Math.hypot( - event.touches[0].clientX - event.touches[1].clientX, - event.touches[0].clientY - event.touches[1].clientY - ); } - }); + }, { passive: false }); myCanvas.addEventListener("touchmove", (event) => { if (event.touches.length === 2 && that.inTwoFingerScroll) { + event.preventDefault(); // Calculate center point const currentTouchY = (event.touches[0].clientY + event.touches[1].clientY) / 2; @@ -2004,13 +1999,12 @@ class Activity { lastTouchY = currentTouchY; lastTouchX = currentTouchX; } - }); + }, { passive: false }); myCanvas.addEventListener("touchend", () => { that.inTwoFingerScroll = false; lastTouchY = null; lastTouchX = null; - initialTouchDistance = null; // Clear throttle timers if (that.blocks._scrollThrottleTimer) { From 498f8efa6aca0aed68f39c0a0f1a3c20cfb2344f Mon Sep 17 00:00:00 2001 From: jivansh77 Date: Mon, 6 Jan 2025 23:49:55 +0530 Subject: [PATCH 08/11] Moved touch event handling to block.js --- js/block.js | 32 +++++++++++++++++++++++++++++++- js/piemenus.js | 40 ---------------------------------------- 2 files changed, 31 insertions(+), 41 deletions(-) diff --git a/js/block.js b/js/block.js index 6420103b6b..b8943c9c48 100644 --- a/js/block.js +++ b/js/block.js @@ -91,7 +91,7 @@ const STRINGLEN = 9; * Length of a long touch in milliseconds. * @type {number} */ -const LONGPRESSTIME = 1500; +const LONGPRESSTIME = 500; const INLINECOLLAPSIBLES = ["newnote", "interval", "osctime", "definemode"]; /** @@ -3077,6 +3077,36 @@ class Block { moved = false; }); + + this.container.on("touchstart", (event) => { + event.preventDefault(); + event.stopPropagation(); + that.blocks.mouseDownTime = new Date().getTime(); + that.blocks.longPressTimeout = setTimeout(() => { + that.blocks.activeBlock = that.blocks.blockList.indexOf(that); + piemenuBlockContext(that); + }, LONGPRESSTIME); + }, { passive: false }); + + this.container.on("touchstart", (event) => { + if (event.touches.length > 1) { + if (that.blocks.longPressTimeout) { + clearTimeout(that.blocks.longPressTimeout); + } + } + }); + + this.container.on("touchmove", () => { + if (that.blocks.longPressTimeout) { + clearTimeout(that.blocks.longPressTimeout); + } + }); + + this.container.on("touchend touchcancel", () => { + if (that.blocks.longPressTimeout) { + clearTimeout(that.blocks.longPressTimeout); + } + }); } /** diff --git a/js/piemenus.js b/js/piemenus.js index f7510245ed..bd978c0ba4 100644 --- a/js/piemenus.js +++ b/js/piemenus.js @@ -3514,46 +3514,6 @@ const piemenuBlockContext = (block) => { setTimeout(() => { that.blocks.stageClick = false; }, 500); - - // Long-press on blocks - let longPressTimer = null; - const LONG_PRESS_DURATION = 500; - - block.container.on("touchstart", (event) => { - event.preventDefault(); - event.stopPropagation(); - - if (event.touches.length !== 1) return; - - longPressTimer = setTimeout(() => { - docById("contextWheelDiv").style.position = "absolute"; - docById("contextWheelDiv").style.display = ""; - - const x = block.container.x; - const y = block.container.y; - const canvasLeft = block.activity.canvas.offsetLeft + 28 * block.blocks.blockScale; - const canvasTop = block.activity.canvas.offsetTop + 6 * block.blocks.blockScale; - - docById("contextWheelDiv").style.left = Math.round((x + block.activity.blocksContainer.x) * - block.activity.getStageScale() + canvasLeft) + "px"; - docById("contextWheelDiv").style.top = Math.round((y + block.activity.blocksContainer.y) * - block.activity.getStageScale() + canvasTop) + "px"; - }, LONG_PRESS_DURATION); - }); - - const clearTimer = () => { - if (longPressTimer) { - clearTimeout(longPressTimer); - longPressTimer = null; - } - }; - - block.container.on("touchmove", (event) => { - event.preventDefault(); - clearTimer(); - }); - block.container.on("touchend", clearTimer); - block.container.on("touchcancel", clearTimer); }; /** From 0fa93e8b644052eb090f968650ed1a7f48d0c505 Mon Sep 17 00:00:00 2001 From: jivansh77 Date: Wed, 8 Jan 2025 20:23:13 +0530 Subject: [PATCH 09/11] Better event handling --- js/block.js | 37 +++++++++++++++++++++++++++++-------- 1 file changed, 29 insertions(+), 8 deletions(-) diff --git a/js/block.js b/js/block.js index b8943c9c48..d704d6563e 100644 --- a/js/block.js +++ b/js/block.js @@ -2883,6 +2883,11 @@ class Block { * @param {Event} event - The mousedown event. */ this.container.on("mousedown", (event) =>{ + if (event.nativeEvent) { + event.nativeEvent.preventDefault(); + } + event.stopPropagation(); + docById("contextWheelDiv").style.display = "none"; // Track time for detecting long pause... @@ -2926,7 +2931,11 @@ class Block { */ this.container.on("pressmove", (event) =>{ // FIXME: More voodoo - event.nativeEvent.preventDefault(); + if (event.nativeEvent) { + event.nativeEvent.preventDefault(); + } else { + event.preventDefault(); + } // Don't allow silence block to be dragged out of a note. if (that.name === "rest2") { @@ -3079,13 +3088,25 @@ class Block { }); this.container.on("touchstart", (event) => { - event.preventDefault(); - event.stopPropagation(); - that.blocks.mouseDownTime = new Date().getTime(); - that.blocks.longPressTimeout = setTimeout(() => { - that.blocks.activeBlock = that.blocks.blockList.indexOf(that); - piemenuBlockContext(that); - }, LONGPRESSTIME); + if (event.touches.length === 1) { + event.preventDefault(); + event.stopPropagation(); + + const touch = event.touches[0]; + const mouseEvent = new MouseEvent('mousedown', { + clientX: touch.clientX, + clientY: touch.clientY, + screenX: touch.screenX, + screenY: touch.screenY + }); + this.container.dispatchEvent(mouseEvent); + + that.blocks.mouseDownTime = new Date().getTime(); + that.blocks.longPressTimeout = setTimeout(() => { + that.blocks.activeBlock = that.blocks.blockList.indexOf(that); + piemenuBlockContext(that); + }, LONGPRESSTIME); + } }, { passive: false }); this.container.on("touchstart", (event) => { From 495f414b0f602f8cc1ff55d990ea80f1414e3b4d Mon Sep 17 00:00:00 2001 From: jivansh77 Date: Sun, 26 Jan 2025 01:56:14 +0530 Subject: [PATCH 10/11] Fixes 2 finger scrolling --- js/activity.js | 58 ++++++++++++++++++++++++++------------------------ js/block.js | 2 +- js/blocks.js | 16 -------------- 3 files changed, 31 insertions(+), 45 deletions(-) diff --git a/js/activity.js b/js/activity.js index f42d18c55a..7756075703 100644 --- a/js/activity.js +++ b/js/activity.js @@ -1963,8 +1963,7 @@ class Activity { // Assuming you have defined 'that' and 'closeAnyOpenMenusAndLabels' elsewhere in your code const myCanvas = document.getElementById("myCanvas"); - let lastTouchY = null; - let lastTouchX = null; + const initialTouches = [[null, null], [null, null]]; /** * Handles touch start event on the canvas. @@ -1973,45 +1972,48 @@ class Activity { myCanvas.addEventListener("touchstart", (event) => { if (event.touches.length === 2) { event.preventDefault(); + for (let i = 0; i < 2; i++) { + initialTouches[i][0] = event.touches[i].clientY; + initialTouches[i][1] = event.touches[i].clientX; + } that.inTwoFingerScroll = true; - - closeAnyOpenMenusAndLabels(); - - lastTouchY = (event.touches[0].clientY + event.touches[1].clientY) / 2; - lastTouchX = (event.touches[0].clientX + event.touches[1].clientX) / 2; } }, { passive: false }); myCanvas.addEventListener("touchmove", (event) => { if (event.touches.length === 2 && that.inTwoFingerScroll) { - event.preventDefault(); - - // Calculate center point - const currentTouchY = (event.touches[0].clientY + event.touches[1].clientY) / 2; - const currentTouchX = (event.touches[0].clientX + event.touches[1].clientX) / 2; - - if (lastTouchY !== null && lastTouchX !== null) { - const deltaY = currentTouchY - lastTouchY; - const deltaX = currentTouchX - lastTouchX; - that.blocks.moveContainer(deltaX, deltaY); + for (let i = 0; i < 2; i++) { + const touchY = event.touches[i].clientY; + const touchX = event.touches[i].clientX; + + if (initialTouches[i][0] !== null && initialTouches[i][1] !== null) { + const deltaY = touchY - initialTouches[i][0]; + const deltaX = touchX - initialTouches[i][1]; + + if (deltaY !== 0) { + closeAnyOpenMenusAndLabels(); + that.blocksContainer.y += deltaY; + } + + if (deltaX !== 0) { + closeAnyOpenMenusAndLabels(); + that.blocksContainer.x += deltaX; + } + + initialTouches[i][0] = touchY; + initialTouches[i][1] = touchX; + } + that.refreshCanvas(); } - - lastTouchY = currentTouchY; - lastTouchX = currentTouchX; } }, { passive: false }); myCanvas.addEventListener("touchend", () => { that.inTwoFingerScroll = false; - lastTouchY = null; - lastTouchX = null; - - // Clear throttle timers - if (that.blocks._scrollThrottleTimer) { - clearTimeout(that.blocks._scrollThrottleTimer); - that.blocks._scrollThrottleTimer = null; + for (let i = 0; i < 2; i++) { + initialTouches[i][0] = null; + initialTouches[i][1] = null; } - that.refreshCanvas(); }); diff --git a/js/block.js b/js/block.js index d704d6563e..9c5f72b180 100644 --- a/js/block.js +++ b/js/block.js @@ -2882,7 +2882,7 @@ class Block { * Handles the mousedown event on the block container. * @param {Event} event - The mousedown event. */ - this.container.on("mousedown", (event) =>{ + this.container.on("mousedown", (event) => { if (event.nativeEvent) { event.nativeEvent.preventDefault(); } diff --git a/js/blocks.js b/js/blocks.js index 072dd4a826..da8737aa61 100644 --- a/js/blocks.js +++ b/js/blocks.js @@ -2425,22 +2425,6 @@ class Blocks { } }; - this.moveContainer = (dx, dy) => { - if (!this.activity.scrollBlockContainer && dx !== 0) { - dx = 0; - } - - this.activity.blocksContainer.x += dx; - this.activity.blocksContainer.y += dy; - - if (!this._scrollThrottleTimer) { - this._scrollThrottleTimer = setTimeout(() => { - this.checkBounds(); - this._scrollThrottleTimer = null; - }, 50); - } - }; - /** * Moves the blocks in a stack to a new position. * @param blk - block From 020eb7d4df395ab3378637ac1d10094baa6eb4c3 Mon Sep 17 00:00:00 2001 From: jivansh77 Date: Sun, 26 Jan 2025 18:13:18 +0530 Subject: [PATCH 11/11] fixes long-press --- js/activity.js | 78 +++++++++++++++++++++++++++++++------------------- js/block.js | 42 --------------------------- 2 files changed, 48 insertions(+), 72 deletions(-) diff --git a/js/activity.js b/js/activity.js index 7756075703..a149d14bfc 100644 --- a/js/activity.js +++ b/js/activity.js @@ -510,38 +510,56 @@ class Activity { this.doContextMenus = () => { let longPressTimer = null; const LONG_PRESS_DURATION = 500; - - document.addEventListener( - "contextmenu", - (event) => { - event.preventDefault(); - event.stopPropagation(); - if (this.beginnerMode) return; - if (!this.blocks.isCoordinateOnBlock(event.clientX, event.clientY) && - event.target.id === "myCanvas") { - this._displayHelpfulWheel(event); - } - }, - false - ); - - // Add touch event handlers + + // Handle right-click (contextmenu event) + document.addEventListener("contextmenu", (event) => { + event.preventDefault(); + event.stopPropagation(); + if (!this.beginnerMode && !this.blocks.isCoordinateOnBlock(event.clientX, event.clientY) && + event.target.id === "myCanvas") { + this._displayHelpfulWheel(event); + } + }, false); + + // Handle touch start (long-press) document.addEventListener("touchstart", (event) => { if (event.touches.length !== 1) return; + event.preventDefault(); const touch = event.touches[0]; - if (!this.beginnerMode && touch.target.id === "myCanvas" && - !this.blocks.isCoordinateOnBlock(touch.clientX, touch.clientY)) { - longPressTimer = setTimeout(() => { - const touchEvent = { - clientX: touch.clientX, - clientY: touch.clientY, - preventDefault: () => {}, - stopPropagation: () => {}, - target: touch.target - }; - this._displayHelpfulWheel(touchEvent); - }, LONG_PRESS_DURATION); + const isOnBlock = this.blocks.isCoordinateOnBlock(touch.clientX, touch.clientY); + + if (touch.target.id === "myCanvas") { + if (!isOnBlock && !this.beginnerMode) { + // Handle canvas long press for helpful wheel + longPressTimer = setTimeout(() => { + this._displayHelpfulWheel({ + clientX: touch.clientX, + clientY: touch.clientY, + preventDefault: () => {}, + stopPropagation: () => {}, + target: touch.target + }); + }, LONG_PRESS_DURATION); + } else { + // Handle block long press for block menu + longPressTimer = setTimeout(() => { + const block = this.blocks.blockList.find(b => { + // Manual coordinate transformation + const containerX = b.container.x; + const containerY = b.container.y; + const scaleX = b.container.scaleX || 1; + const scaleY = b.container.scaleY || 1; + + const localX = (touch.clientX - containerX) / scaleX; + const localY = (touch.clientY - containerY) / scaleY; + + const isHit = b.container.hitTest(localX, localY); + return isHit; + }); + piemenuBlockContext(block); + }, LONG_PRESS_DURATION); + } } }, false); @@ -552,10 +570,10 @@ class Activity { longPressTimer = null; } }; - + + document.addEventListener("touchmove", clearTimer, false); document.addEventListener("touchend", clearTimer, false); document.addEventListener("touchcancel", clearTimer, false); - document.addEventListener("touchmove", clearTimer, false); }; /* diff --git a/js/block.js b/js/block.js index 9c5f72b180..42dcba8581 100644 --- a/js/block.js +++ b/js/block.js @@ -3086,48 +3086,6 @@ class Block { moved = false; }); - - this.container.on("touchstart", (event) => { - if (event.touches.length === 1) { - event.preventDefault(); - event.stopPropagation(); - - const touch = event.touches[0]; - const mouseEvent = new MouseEvent('mousedown', { - clientX: touch.clientX, - clientY: touch.clientY, - screenX: touch.screenX, - screenY: touch.screenY - }); - this.container.dispatchEvent(mouseEvent); - - that.blocks.mouseDownTime = new Date().getTime(); - that.blocks.longPressTimeout = setTimeout(() => { - that.blocks.activeBlock = that.blocks.blockList.indexOf(that); - piemenuBlockContext(that); - }, LONGPRESSTIME); - } - }, { passive: false }); - - this.container.on("touchstart", (event) => { - if (event.touches.length > 1) { - if (that.blocks.longPressTimeout) { - clearTimeout(that.blocks.longPressTimeout); - } - } - }); - - this.container.on("touchmove", () => { - if (that.blocks.longPressTimeout) { - clearTimeout(that.blocks.longPressTimeout); - } - }); - - this.container.on("touchend touchcancel", () => { - if (that.blocks.longPressTimeout) { - clearTimeout(that.blocks.longPressTimeout); - } - }); } /**