Refactor touch event listeners to prevent page scrolling on touch move (#378)

* Refactor touch event listeners to prevent page scrolling on touch move

Updated touch event listeners to use passive options and prevent default behavior on touchmove.

* Enhance touchmove event handling

Added stopImmediatePropagation to touchmove event.

* Set canvas fill style to red before drawing

* Fix escape characters in fill_style assignment

* Update offscreen_canvas.ipynb

* Simplify touchmove event listener

Refactor touchmove event listener to simplify event handling.

* Update offscreen.ts

* Update offscreen_canvas.ipynb

* prevent defaults

Author: DerThorsten

src/offscreen.ts

@@ -102,6 +102,10 @@ class OffscreenCanvasView extends DOMWidgetView {
       }
     }
     async function sendTouchEvent(event: TouchEvent): Promise<void> {
+
+      event.preventDefault(); 
+      event.stopImmediatePropagation();
+      
       const rect = that.el.getBoundingClientRect();
       const scaleX = that.el.width / rect.width;
       const scaleY = that.el.height / rect.height;
@@ -171,10 +175,12 @@ class OffscreenCanvasView extends DOMWidgetView {
     });
 
     // touch events
-    this.el.addEventListener('touchstart', sendTouchEvent);
-    this.el.addEventListener('touchend', sendTouchEvent);
-    this.el.addEventListener('touchmove', sendTouchEvent);
-    this.el.addEventListener('touchcancel', sendTouchEvent);
+    const opts = { passive: false };
+
+    this.el.addEventListener('touchstart', e => sendTouchEvent(e), opts);
+    this.el.addEventListener('touchend', e => sendTouchEvent(e), opts);
+    this.el.addEventListener('touchcancel', e => sendTouchEvent(e), opts);
+    this.el.addEventListener('touchmove', e => sendTouchEvent(e), opts);
 
     // keyboard events
     this.el.addEventListener('keydown', sendKeyboardEvent);

src/widget.ts

@@ -1377,22 +1377,27 @@ export class CanvasView extends DOMWidgetView {
     });
     this.el.addEventListener('wheel', {
       handleEvent: this.onMouseWheel.bind(this)
-    });
+    }, { passive: false });
+
     this.el.addEventListener('touchstart', {
       handleEvent: this.onTouchStart.bind(this)
-    });
+    }, { passive: false });
+
     this.el.addEventListener('touchend', {
       handleEvent: this.onTouchEnd.bind(this)
-    });
+    }, { passive: false });
+
     this.el.addEventListener('touchmove', {
       handleEvent: this.onTouchMove.bind(this)
-    });
+    }, { passive: false });
+
     this.el.addEventListener('touchcancel', {
       handleEvent: this.onTouchCancel.bind(this)
-    });
+    }, { passive: false });
+
     this.el.addEventListener('keydown', {
       handleEvent: this.onKeyDown.bind(this)
-    });
+    }, { passive: false });
 
     this.el.setAttribute('tabindex', '0');
 
@@ -1441,6 +1446,8 @@ export class CanvasView extends DOMWidgetView {
   }
 
   private onTouchStart(event: TouchEvent) {
+    event.preventDefault(); 
+    event.stopImmediatePropagation();
     const touches: Touch[] = Array.from(event.touches);
     this.model.send(
       {
@@ -1452,6 +1459,8 @@ export class CanvasView extends DOMWidgetView {
   }
 
   private onTouchEnd(event: TouchEvent) {
+    event.preventDefault(); 
+    event.stopImmediatePropagation();
     const touches: Touch[] = Array.from(event.touches);
     this.model.send(
       {
@@ -1463,6 +1472,8 @@ export class CanvasView extends DOMWidgetView {
   }
 
   private onTouchMove(event: TouchEvent) {
+    event.preventDefault(); 
+    event.stopImmediatePropagation();
     const touches: Touch[] = Array.from(event.touches);
     this.model.send(
       {
@@ -1474,6 +1485,8 @@ export class CanvasView extends DOMWidgetView {
   }
 
   private onTouchCancel(event: TouchEvent) {
+    event.preventDefault(); 
+    event.stopImmediatePropagation();
     const touches: Touch[] = Array.from(event.touches);
     this.model.send(
       {