michael/pathfinder
michael
/
pathfinder
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Allow demos to be dragged with the mouse when applicable

This commit is contained in:
Patrick Walton 2017-09-11 12:21:50 -07:00
parent 068e2bd99e
commit 72fa6a7b55
4 changed files with 47 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
demo/client/css/pathfinder.css
View File

@ -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);

2
demo/client/html/svg-demo.html.hbs
View File

@ -8,7 +8,7 @@
</head>
<body>
{{>partials/navbar.html isDemo=true}}
<canvas id="pf-canvas" width="400" height="300"></canvas>
<canvas id="pf-canvas" class="pf-draggable" width="400" height="300"></canvas>
<svg id="pf-svg" xmlns="http://www.w3.org/2000/svg" width="400" height="300"></svg>
<div class="fixed-bottom mb-3 d-flex justify-content-between align-items-end pf-pointer-events-none">
<div class="rounded py-1 px-3 ml-3" id="pf-fps-label">0 ms</div>

2
demo/client/html/text-demo.html.hbs
View File

@ -8,7 +8,7 @@
</head>
<body>
{{>partials/navbar.html isDemo=true}}
<canvas id="pf-canvas" width="400" height="300"></canvas>
<canvas id="pf-canvas" class="pf-draggable" width="400" height="300"></canvas>
<div class="fixed-bottom mb-3 d-flex justify-content-between align-items-end pf-pointer-events-none">
<div class="rounded py-1 px-3 ml-3" id="pf-fps-label">0 ms</div>
<div id="pf-toolbar">

59
demo/client/src/camera.ts
View File

@ -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 {