Allow demos to be dragged with the mouse when applicable
This commit is contained in:
parent
068e2bd99e
commit
72fa6a7b55
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue