diff --git a/www/draw.html b/www/draw.html index 4a16fe4..24995ed 100644 --- a/www/draw.html +++ b/www/draw.html @@ -59,10 +59,13 @@ width: 100%; margin: 0; font-family: sans-serif; + /* prevent reload on scroll in chrome */ position: fixed; - overscroll-behavior: contain; overflow-y: hidden; + + /* prevent capture of poienter event: https://stackoverflow.com/a/48254578 */ + touch-action: none; } #interface { diff --git a/www/draw.js b/www/draw.js index f0219c0..53804c1 100644 --- a/www/draw.js +++ b/www/draw.js @@ -24,7 +24,7 @@ class Canvas { this.resize(); - window.addEventListener('resize', this.requestResize); + window.addEventListener('resize', (ev) => this.requestResize()); this.paths = []; @@ -38,6 +38,8 @@ class Canvas { this.isMoving = false; document.body.addEventListener('pointermove', (ev) => { + ev.stopPropagation(); + ev.preventDefault(); if (ev.pointerType == "touch" || ev.buttons & 4) { // 4: middle mouse button this.moveCanvas(ev); } else { // pointerType == pen or mouse @@ -45,6 +47,8 @@ class Canvas { } }); document.body.addEventListener('pointerup', (ev) => { + ev.stopPropagation(); + ev.preventDefault(); if (ev.pointerType == "touch" || ev.buttons & 4 || this.isMoving) { // buttons is 0 on pointerup this.endMoveCanvas(ev); this.isMoving = false; @@ -53,6 +57,8 @@ class Canvas { } }); this.svgEl.addEventListener('pointerdown', (ev) => { + ev.stopPropagation(); + ev.preventDefault(); if (ev.pointerType == "touch" || ev.buttons & 4) { // 4: middle mouse button this.isMoving = true; this.startMoveCanvas(ev); @@ -185,7 +191,8 @@ class Canvas { } requestResize() { - alert('Resize not implemented yet. Please reloade the page'); + this.resize(); + // alert('Resize not implemented yet. Please reloade the page'); }