blaze-2d
Version:
A fast and simple WebGL 2 2D game engine written in TypeScript
116 lines • 4.05 kB
JavaScript
import { vec2 } from "gl-matrix";
import Blaze from "../../blaze";
import { Mouse } from "../../input/mouse";
/**
* Allows the camera to be panned, zoomed and rotated.
*
* By default the middle mouse button is used for panning, scroll for zoom and arrow keys for rotation.
*/
export default class EditorCameraControls {
/**
* Create an {@link EditorCameraControls} instance.
*
* @param camera The camera to control
* @param canvas The canvas to attach event listeners to
*/
constructor(camera, canvas) {
// pan
this.panButton = Mouse.MIDDLE;
this.isPanPressed = false;
// zoom
this.zoomSensitivity = 0.005;
// rotate
this.rotateSpeed = 1;
this.posRotateKey = "ArrowRight";
this.negRotateKey = "ArrowLeft";
/**
* Enables panning when the mouse button is pressed.
*
* @param e The mouse event
*/
this.onMousedown = (e) => {
if (e.button === this.panButton) {
this.isPanPressed = true;
this.last = vec2.fromValues(e.clientX, this.canvas.height - e.clientY);
}
};
/**
* Disables panning when the mouse button is released.
*
* @param e The mouse event
*/
this.onMouseup = (e) => {
if (e.button === this.panButton)
this.isPanPressed = false;
};
/**
* Moves the camera by the difference between the current and last mouse position.
*
* @param e The mouse event
*/
this.onMousemove = (e) => {
if (!this.isPanPressed)
return;
const curr = vec2.fromValues(e.clientX, this.canvas.height - e.clientY);
const diff = vec2.sub(vec2.create(), this.last, curr);
vec2.mul(diff, diff, Blaze.getScene().world.getPixelToWorldSpace());
vec2.rotate(diff, diff, vec2.create(), -this.camera.getRotation());
this.camera.translate(diff);
this.last = curr;
};
/**
* Zooms/unzooms the camera.
*
* @param e The wheel event
*/
this.onWheel = (e) => {
this.camera.zoom(-e.deltaY * this.zoomSensitivity);
};
/**
* Rotates the camera on key down.
*
* @param e The keyboard event
*/
this.onKeydown = (e) => {
if (e.key === this.posRotateKey) {
this.camera.rotate((1 * Math.PI) / 180);
}
else if (e.key === this.negRotateKey) {
this.camera.rotate((-1 * Math.PI) / 180);
}
};
this.camera = camera;
this.setCanvas(canvas);
}
/**
* Set the canvas to be attach event listeners to.
*
* @param canvas The {@link HTMLCanvasElement} to attach event listeners to
*/
setCanvas(canvas) {
// remove events from old canvas
if (this.canvas) {
this.canvas.removeEventListener("mousedown", this.onMousedown);
this.canvas.removeEventListener("mouseup", this.onMouseup);
this.canvas.removeEventListener("mousemove", this.onMousemove);
this.canvas.removeEventListener("wheel", this.onWheel);
this.canvas.removeEventListener("keydown", this.onKeydown);
}
// attach events to new canvas
this.canvas = canvas;
this.canvas.addEventListener("mousedown", this.onMousedown);
this.canvas.addEventListener("mouseup", this.onMouseup);
this.canvas.addEventListener("mousemove", this.onMousemove);
this.canvas.addEventListener("wheel", this.onWheel);
this.canvas.addEventListener("keydown", this.onKeydown);
}
/**
* Get the canvas that event listeners are on.
*
* @returns The canvas that event listeners are attached to
*/
getCanvas() {
return this.canvas;
}
}
//# sourceMappingURL=editorControls.js.map