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

Allow dragging of windows and agents on mobile, fix unintended text selection on long press

Browse source
This commit is contained in:
MDMCK10 2024-07-16 01:43:29 +02:00
parent 71fee66673
commit 3f2b776325
3 changed files with 89 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
msagent.js/src/agent.ts
View file

@ -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();
});

7
webapp/src/css/style.scss
View file

@ -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;
}

44
webapp/src/ts/MSWindow.ts
View file

@ -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(