make agents draggable

This commit is contained in:
Elijah R 2024-07-09 23:38:48 -04:00
parent 29d6213134
commit b9099cd635

View file

@ -53,6 +53,10 @@ export class Agent {
private cnv: HTMLCanvasElement; private cnv: HTMLCanvasElement;
private ctx: CanvasRenderingContext2D; private ctx: CanvasRenderingContext2D;
private dragging: boolean;
private x: number;
private y: number;
private animState: AgentAnimationState | null = null; private animState: AgentAnimationState | null = null;
constructor(data: AcsData) { constructor(data: AcsData) {
@ -63,6 +67,35 @@ export class Agent {
this.cnv.height = data.characterInfo.charHeight; this.cnv.height = data.characterInfo.charHeight;
this.cnv.style.position = 'fixed'; this.cnv.style.position = 'fixed';
this.cnv.style.display = 'none'; this.cnv.style.display = 'none';
this.dragging = false;
this.x = 0;
this.y = 0;
this.setLoc();
this.cnv.addEventListener('mousedown', () => {
this.dragging = true;
document.addEventListener('mouseup', () => {
this.dragging = false;
}, {once: true});
});
document.addEventListener('mousemove', e => {
if (!this.dragging) return;
this.x += e.movementX;
this.y += e.movementY;
this.setLoc();
});
window.addEventListener('resize', () => {
this.setLoc();
});
}
private setLoc() {
if (this.x < 0) this.x = 0;
if (this.y < 0) this.y = 0;
if (this.x > document.documentElement.clientWidth - this.cnv.width) this.x = document.documentElement.clientWidth - this.cnv.width;
if (this.y > document.documentElement.clientHeight - this.cnv.height) this.y = document.documentElement.clientHeight - this.cnv.height;
this.cnv.style.top = this.y + "px";
this.cnv.style.left = this.x + "px";
} }
renderFrame(frame: AcsAnimationFrameInfo) { renderFrame(frame: AcsAnimationFrameInfo) {