diff --git a/msagent.js/src/agent.ts b/msagent.js/src/agent.ts index 78ea25e..f3ff086 100644 --- a/msagent.js/src/agent.ts +++ b/msagent.js/src/agent.ts @@ -174,6 +174,9 @@ export class Agent { private x: number; private y: number; + private lastTouchX: number; + private lastTouchY: number; + private animState: AgentAnimationState | null = null; private wordballoonState: AgentWordBalloonState | null = null; private usernameBalloonState: AgentTextWordBalloonState | null = null; @@ -200,6 +203,10 @@ export class Agent { this.dragging = false; this.x = 0; this.y = 0; + + this.lastTouchX = 0; + this.lastTouchY = 0; + this.setLoc(); this.cnv.addEventListener('mousedown', () => { this.dragging = true; @@ -211,16 +218,47 @@ export class Agent { { once: true } ); }); + + this.cnv.addEventListener('touchstart', (e) => { + const touch = e.touches[0]; + this.lastTouchX = touch.clientX; + this.lastTouchY = touch.clientY; + this.dragging = true; + document.addEventListener( + 'touchend', + () => { + this.dragging = false; + }, + { once: true } + ); + }); + + document.addEventListener('touchmove', (e) => { + if (!this.dragging) return; + + const touch = e.touches[0]; + + const movementX = touch.clientX - this.lastTouchX; + const movementY = touch.clientY - this.lastTouchY; + this.lastTouchX = touch.clientX; + this.lastTouchY = touch.clientY; + this.x += movementX; + this.y += movementY; + this.setLoc(); + }); + this.cnv.addEventListener('contextmenu', (e) => { e.preventDefault(); this.contextMenu.show(e.clientX, e.clientY); }); + document.addEventListener('mousemove', (e) => { if (!this.dragging) return; this.x += e.movementX; this.y += e.movementY; this.setLoc(); }); + window.addEventListener('resize', () => { this.setLoc(); }); diff --git a/webapp/src/css/style.scss b/webapp/src/css/style.scss index 9feca8d..2fced56 100644 --- a/webapp/src/css/style.scss +++ b/webapp/src/css/style.scss @@ -1,6 +1,7 @@ body { background-color: #3a6ea5; font-size: 11px; + overscroll-behavior: contain; } #logonView { @@ -240,6 +241,8 @@ body { margin-bottom: 2px; list-style-type: none; + user-select: none; + &:hover { background-color: navy; color: #fff; @@ -249,3 +252,7 @@ body { .d-none { display: none; } + +button { + user-select: none; +} \ No newline at end of file diff --git a/webapp/src/ts/MSWindow.ts b/webapp/src/ts/MSWindow.ts index 852e145..72fdae1 100644 --- a/webapp/src/ts/MSWindow.ts +++ b/webapp/src/ts/MSWindow.ts @@ -21,6 +21,8 @@ export class MSWindow { dragging: boolean; x: number; y: number; + lastTouchX: number; + lastTouchY: number; constructor(wnd: HTMLDivElement, config: MSWindowConfig) { this.wnd = wnd; this.shown = false; @@ -67,6 +69,48 @@ export class MSWindow { } this.setLoc(); + this.lastTouchX = 0; + this.lastTouchY = 0; + + this.titlebar.addEventListener('mousedown', () => { + this.dragging = true; + document.addEventListener( + 'mouseup', + () => { + this.dragging = false; + }, + { once: true } + ); + }); + + this.titlebar.addEventListener('touchstart', (e) => { + const touch = e.touches[0]; + this.lastTouchX = touch.clientX; + this.lastTouchY = touch.clientY; + this.dragging = true; + document.addEventListener( + 'touchend', + () => { + this.dragging = false; + }, + { once: true } + ); + }); + + document.addEventListener('touchmove', (e) => { + if (!this.dragging) return; + + const touch = e.touches[0]; + + const movementX = touch.clientX - this.lastTouchX; + const movementY = touch.clientY - this.lastTouchY; + this.lastTouchX = touch.clientX; + this.lastTouchY = touch.clientY; + this.x += movementX; + this.y += movementY; + this.setLoc(); + }); + this.titlebar.addEventListener('mousedown', () => { this.dragging = true; document.addEventListener(