Fixes Touch Functionality

js/activity.js

@@ -505,9 +505,12 @@ 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 = () => {
+            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);
         };
 
         /*
@@ -554,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;
@@ -1916,62 +1963,56 @@ 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;
 
             /**
              * Handles touch start event on the canvas.
              * @param {TouchEvent} event - The touch event object.
              */
             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;
-                    }
-                }
-            });
-
-            /**
-             * 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];
+                    event.preventDefault();
+                    that.inTwoFingerScroll = true;
 
-                            if (deltaY !== 0) {
-                                closeAnyOpenMenusAndLabels();
-                                that.blocksContainer.y -= deltaY;
-                            }
+                    closeAnyOpenMenusAndLabels();
 
-                            if (deltaX !== 0) {
-                                closeAnyOpenMenusAndLabels();
-                                that.blocksContainer.x -= deltaX;
-                            }
+                    lastTouchY = (event.touches[0].clientY + event.touches[1].clientY) / 2;
+                    lastTouchX = (event.touches[0].clientX + event.touches[1].clientX) / 2;
+                }
+            }, { passive: false });
 
-                            initialTouches[i][0] = touchY;
-                            initialTouches[i][1] = touchX;
-                        }
+            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);
                     }
-
-                    that.refreshCanvas();
+
+                    lastTouchY = currentTouchY;
+                    lastTouchX = currentTouchX;
                 }
-            });
+            }, { passive: false });
 
-            /**
-             * 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;
+
+                // Clear throttle timers
+                if (that.blocks._scrollThrottleTimer) {
+                    clearTimeout(that.blocks._scrollThrottleTimer);
+                    that.blocks._scrollThrottleTimer = null;
                 }
+
+                that.refreshCanvas();
             });
 
             /**

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"];
 
 /**
@@ -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") {
@@ -3077,6 +3086,48 @@ 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);
+            }
+        });
     }
 
     /**

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
@@ -5013,6 +5039,7 @@ class Blocks {
             }
 
             this.inLongPress = true;
+
             piemenuBlockContext(this.blockList[this.activeBlock]);
         };
 

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",