From 72fa6a7b55ecefcccba0fa3dd9c305afa14efad5 Mon Sep 17 00:00:00 2001 From: Patrick Walton Date: Mon, 11 Sep 2017 12:21:50 -0700 Subject: [PATCH] Allow demos to be dragged with the mouse when applicable --- demo/client/css/pathfinder.css | 6 +++ demo/client/html/svg-demo.html.hbs | 2 +- demo/client/html/text-demo.html.hbs | 2 +- demo/client/src/camera.ts | 59 +++++++++++++++++++---------- 4 files changed, 47 insertions(+), 22 deletions(-) diff --git a/demo/client/css/pathfinder.css b/demo/client/css/pathfinder.css index 2de2eb64..ab95b3d6 100644 --- a/demo/client/css/pathfinder.css +++ b/demo/client/css/pathfinder.css @@ -57,6 +57,12 @@ button > svg path { position: absolute; touch-action: none; } +#pf-canvas.pf-draggable { + cursor: grab; +} +#pf-canvas.pf-draggable.pf-grabbing { + cursor: grabbing; +} #pf-fps-label { color: white; background: rgba(0, 0, 0, 0.75); diff --git a/demo/client/html/svg-demo.html.hbs b/demo/client/html/svg-demo.html.hbs index 1d08833d..e1d2ac34 100644 --- a/demo/client/html/svg-demo.html.hbs +++ b/demo/client/html/svg-demo.html.hbs @@ -8,7 +8,7 @@ {{>partials/navbar.html isDemo=true}} - +
0 ms
diff --git a/demo/client/html/text-demo.html.hbs b/demo/client/html/text-demo.html.hbs index 30eae7ae..11ace9d1 100644 --- a/demo/client/html/text-demo.html.hbs +++ b/demo/client/html/text-demo.html.hbs @@ -8,7 +8,7 @@ {{>partials/navbar.html isDemo=true}} - +
0 ms
diff --git a/demo/client/src/camera.ts b/demo/client/src/camera.ts index 3c5f9b14..f0db046d 100644 --- a/demo/client/src/camera.ts +++ b/demo/client/src/camera.ts @@ -42,34 +42,53 @@ export class OrthographicCamera extends Camera { this.scale = 1.0; this.canvas.addEventListener('wheel', event => this.onWheel(event), false); + this.canvas.addEventListener('mousedown', event => this.onMouseDown(event), false); + this.canvas.addEventListener('mouseup', event => this.onMouseUp(event), false); + this.canvas.addEventListener('mousemove', event => this.onMouseMove(event), false); this.onPan = null; this.onZoom = null; } - onWheel(event: MouseWheelEvent) { + onWheel(event: MouseWheelEvent): void { event.preventDefault(); - if (event.ctrlKey) { - // Zoom event: see https://developer.mozilla.org/en-US/docs/Web/Events/wheel - const mouseLocation = glmatrix.vec2.fromValues(event.clientX, event.clientY); - const canvasLocation = this.canvas.getBoundingClientRect(); - mouseLocation[0] -= canvasLocation.left; - mouseLocation[1] = canvasLocation.bottom - mouseLocation[1]; - glmatrix.vec2.scale(mouseLocation, mouseLocation, window.devicePixelRatio); - - const scale = 1.0 - event.deltaY * window.devicePixelRatio * ORTHOGRAPHIC_ZOOM_SPEED; - - this.zoom(scale, mouseLocation); - } else { - // Pan event. - const delta = glmatrix.vec2.fromValues(-event.deltaX, event.deltaY); - glmatrix.vec2.scale(delta, delta, window.devicePixelRatio); - glmatrix.vec2.add(this.translation, this.translation, delta); - - if (this.onPan != null) - this.onPan(); + if (!event.ctrlKey) { + this.pan(glmatrix.vec2.fromValues(-event.deltaX, event.deltaY)); + return; } + + // Zoom event: see https://developer.mozilla.org/en-US/docs/Web/Events/wheel + const mouseLocation = glmatrix.vec2.fromValues(event.clientX, event.clientY); + const canvasLocation = this.canvas.getBoundingClientRect(); + mouseLocation[0] -= canvasLocation.left; + mouseLocation[1] = canvasLocation.bottom - mouseLocation[1]; + glmatrix.vec2.scale(mouseLocation, mouseLocation, window.devicePixelRatio); + + const scale = 1.0 - event.deltaY * window.devicePixelRatio * ORTHOGRAPHIC_ZOOM_SPEED; + this.zoom(scale, mouseLocation); + } + + private onMouseDown(event: MouseEvent): void { + this.canvas.classList.add('pf-grabbing'); + } + + private onMouseUp(event: MouseEvent): void { + this.canvas.classList.remove('pf-grabbing'); + } + + private onMouseMove(event: MouseEvent): void { + if ((event.buttons & 1) !== 0) + this.pan(glmatrix.vec2.fromValues(event.movementX, -event.movementY)); + } + + private pan(delta: glmatrix.vec2): void { + // Pan event. + glmatrix.vec2.scale(delta, delta, window.devicePixelRatio); + glmatrix.vec2.add(this.translation, this.translation, delta); + + if (this.onPan != null) + this.onPan(); } zoomIn(): void {