security_vision/chronodiagram
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

hopefully fix chrome, and handle resizes

Browse source
This commit is contained in:
Ruben van de Ven 2022-01-19 13:32:06 +01:00
parent e831066297
commit a83b05daaa
2 changed files with 13 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
www/draw.html
View file

@ -59,10 +59,13 @@
width: 100%; width: 100%;
margin: 0; margin: 0;
font-family: sans-serif; font-family: sans-serif;
/* prevent reload on scroll in chrome */
position: fixed; position: fixed;
overscroll-behavior: contain; overscroll-behavior: contain;
overflow-y: hidden; overflow-y: hidden;
/* prevent capture of poienter event: https://stackoverflow.com/a/48254578 */
touch-action: none;
} }
#interface { #interface {

11
www/draw.js
View file

@ -24,7 +24,7 @@ class Canvas {
this.resize(); this.resize();
window.addEventListener('resize', this.requestResize); window.addEventListener('resize', (ev) => this.requestResize());
this.paths = []; this.paths = [];
@ -38,6 +38,8 @@ class Canvas {
this.isMoving = false; this.isMoving = false;
document.body.addEventListener('pointermove', (ev) => { document.body.addEventListener('pointermove', (ev) => {
ev.stopPropagation();
ev.preventDefault();
if (ev.pointerType == "touch" || ev.buttons & 4) { // 4: middle mouse button if (ev.pointerType == "touch" || ev.buttons & 4) { // 4: middle mouse button
this.moveCanvas(ev); this.moveCanvas(ev);
} else { // pointerType == pen or mouse } else { // pointerType == pen or mouse
@ -45,6 +47,8 @@ class Canvas {
} }
}); });
document.body.addEventListener('pointerup', (ev) => { document.body.addEventListener('pointerup', (ev) => {
ev.stopPropagation();
ev.preventDefault();
if (ev.pointerType == "touch" || ev.buttons & 4 || this.isMoving) { // buttons is 0 on pointerup if (ev.pointerType == "touch" || ev.buttons & 4 || this.isMoving) { // buttons is 0 on pointerup
this.endMoveCanvas(ev); this.endMoveCanvas(ev);
this.isMoving = false; this.isMoving = false;
@ -53,6 +57,8 @@ class Canvas {
} }
}); });
this.svgEl.addEventListener('pointerdown', (ev) => { this.svgEl.addEventListener('pointerdown', (ev) => {
ev.stopPropagation();
ev.preventDefault();
if (ev.pointerType == "touch" || ev.buttons & 4) { // 4: middle mouse button if (ev.pointerType == "touch" || ev.buttons & 4) { // 4: middle mouse button
this.isMoving = true; this.isMoving = true;
this.startMoveCanvas(ev); this.startMoveCanvas(ev);
@ -185,7 +191,8 @@ class Canvas {
} }
requestResize() { requestResize() {
alert('Resize not implemented yet. Please reloade the page'); this.resize();
// alert('Resize not implemented yet. Please reloade the page');
} }