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');
}