computernewb/MSAgent-Chat
6
0
Fork 0
Code Issues 14 Pull requests 1 Projects Releases Packages Wiki Activity Actions

make agents draggable

Browse source
This commit is contained in:
Elijah R 2024-07-09 23:38:48 -04:00
parent 29d6213134
commit b9099cd635
1 changed files with 33 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
msagent.js/src/agent.ts
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,8 +67,37 @@ 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) {
this.ctx.clearRect(0, 0, this.cnv.width, this.cnv.height); this.ctx.clearRect(0, 0, this.cnv.width, this.cnv.height);
for (const mimg of frame.images) { for (const mimg of frame.images) {