Skip to content

Feature/kasm 5489 mutimonitor fixes #92

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MtrXPL wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Feature/kasm 5489 mutimonitor fixes #92

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d7e7e41
KASM-5489 Disallow display dragging for only one display
MtrXPL Jan 24, 2024
4edcc14
KASM-5489 Remove decimals from display resolutions when arranging dis…
MtrXPL Jan 24, 2024
3a2f897
KASM-5489 Remove duplicated mouse event handlers for displays in disp…
MtrXPL Jan 24, 2024
5269769
KASM-5489 Highlight displays when hovered in display viewer
MtrXPL Jan 24, 2024
6299aac
KASM-5489 Fixed display positioning in display viewer
MtrXPL Jan 24, 2024
2be3bf9
KASM-5489 Fix incorrect mouse position in display viewer after resizi…
MtrXPL Jan 24, 2024
7661324
Merge branch 'master' into feature/KASM-5489-mutimonitor-fixes
mattmcclaskey Feb 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
195 changes: 112 additions & 83 deletions app/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,6 @@ const UI = {
reconnectPassword: null,
monitors: [],
sortedMonitors: [],
selectedMonitor: null,
refreshRotation: 0,
currentDisplay: null,

Expand Down Expand Up @@ -1992,6 +1991,7 @@ const UI = {
scale: 1,
fill: '#eeeeeecc',
isDragging: false,
isHovering: false,
num
})
num++
Expand Down Expand Up @@ -2094,7 +2094,7 @@ const UI = {
ctx.fillStyle = m.fill;
ctx.lineWidth = 1;
ctx.lineJoin = "round";
ctx.strokeStyle = m === UI.selectedMonitor ? "#2196F3" : "#aaa";
ctx.strokeStyle = (m.isDragging || m.isHovering) ? "#2196F3" : "#aaa";
UI.rect(ctx, m.x, m.y, (m.w / m.scale), (m.h / m.scale));
ctx.font = "13px sans-serif";
ctx.textAlign = "right";
Expand All @@ -2104,9 +2104,8 @@ const UI = {
ctx.font = "200 11px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(m.w * scale + ' x ' + m.h * scale, m.x + (m.w / 2), m.y + (m.h / 2));
ctx.fillText(Math.floor(m.w * scale) + ' x ' + Math.floor(m.h * scale), m.x + (m.w / 2), m.y + (m.h / 2));
}

},

getSizes(monitors) {
Expand Down Expand Up @@ -2164,104 +2163,127 @@ const UI = {


displayMonitors() {
// const monitors = UI.sortedMonitors
let monitors = UI.sortedMonitors
const { canvas, ctx, bb, canvasWidth, canvasHeight, scale } = UI.multiMonitorSettings()
const { startLeft, startTop } = UI.getSizes(monitors)
let offsetX
let offsetY
let dragok = false
UI.recenter();
UI.draw();

let startX;
let startY;

offsetX = bb.left
offsetY = bb.top
let isDragging = false;

canvas.addEventListener("mousedown", myDown, false);
canvas.addEventListener("mouseup", myUp, false);
canvas.addEventListener("mousemove", myMove, false);
UI.recenter()
UI.draw()
const { canvas } = UI.multiMonitorSettings();
canvas.removeEventListener("mousedown", this._onDisplaysViewerMouseDown);
canvas.removeEventListener("mouseup", this._onDisplaysViewerMouseUp);
canvas.removeEventListener("mousemove", this._onDisplaysViewerMouseMove);

function myDown(e) {
let monitors = UI.sortedMonitors
this._onDisplaysViewerMouseDown = this._onDisplaysViewerMouseDown || function(e) {
e.preventDefault();
e.stopPropagation();
let mx = parseInt(e.clientX - offsetX);
let my = parseInt(e.clientY - offsetY);
for (var i = 0; i < monitors.length; i++) {
var mon = monitors[i];
var monw = mon.w / mon.scale
var monh = mon.h / mon.scale
let monx = mon.x
let mony = mon.y
// Find the closest rect to drag
if (mx > monx && mx < (monx + monw) && my > mony && my < (mony + monh)) {
dragok = true;
mon.isDragging = true;
UI.selectedMonitor = mon
break // get out of the loop rather than dragging multiple

let monitors = UI.sortedMonitors;
if (monitors.length === 1) {
isDragging = false;
return;
}

const { bb } = UI.multiMonitorSettings();
let x = parseInt(e.clientX - bb.left);
let y = parseInt(e.clientY - bb.top);

// find the closest monitor (defined by it's rect) to drag
for (let i = 0; i < monitors.length; i++) {
const monitor = monitors[i];
const monW = monitor.w / monitor.scale;
const monH = monitor.h / monitor.scale;
const monX = monitor.x;
const monY = monitor.y;

if (x > monX && x < (monX + monW) && y > monY && y < (monY + monH)) {
isDragging = true;
monitor.isDragging = true;
monitor.isHovering = false;
break;
}
}
startX = mx;
startY = my;
UI.draw()
}
function myUp(e) {
let monitors = UI.sortedMonitors

startX = x;
startY = y;

UI.draw();
};

this._onDisplaysViewerMouseUp = this._onDisplaysViewerMouseUp || function(e) {
e.preventDefault();
e.stopPropagation();

// clear all the dragging flags
dragok = false;
for (var i = 0; i < monitors.length; i++) {
let monitors = UI.sortedMonitors;
isDragging = false;
for (let i = 0; i < monitors.length; i++) {
monitors[i].isDragging = false;
monitors[i].isHovering = false;
}

// reposition monitors
monitors.sort((a, b) => {
if (a.y >= b.y + (b.h / 2)) {
return 1
}
return a.x - b.x
})
UI.recenter()
UI.draw()
}
function myMove(e) {
let monitors = UI.sortedMonitors
if (dragok) {
e.preventDefault();
e.stopPropagation();

// get the current mouse position
var mx = parseInt(e.clientX - offsetX);
var my = parseInt(e.clientY - offsetY);

// calculate the distance the mouse has moved
// since the last mousemove
var dx = mx - startX;
var dy = my - startY;

// move each rect that isDragging
// by the distance the mouse has moved
// since the last mousemove
for (var i = 0; i < monitors.length; i++) {
var m = monitors[i];
if (m.isDragging) {
m.x += dx;
m.y += dy;
}
return 1;
}
return a.x - b.x;
});

// redraw the scene with the new rect positions
UI.draw();
UI.recenter();
UI.draw();
}

// reset the starting mouse position for the next mousemove
startX = mx;
startY = my;
this._onDisplaysViewerMouseMove = this._onDisplaysViewerMouseMove || function(e) {
e.preventDefault();
e.stopPropagation();

// get the current mouse position
const { bb } = UI.multiMonitorSettings();
const x = parseInt(e.clientX - bb.left);
const y = parseInt(e.clientY - bb.top);

// calculate the distance the mouse has moved
// since the last mousemove
const dx = x - startX;
const dy = y - startY;

// move each rect that is dragging by the distance the mouse has moved
// since the last mousemove
const monitors = UI.sortedMonitors;
for (let i = 0; i < monitors.length; i++) {
const monitor = monitors[i];
const monW = monitor.w / monitor.scale;
const monH = monitor.h / monitor.scale;
const monX = monitor.x;
const monY = monitor.y;

if (isDragging) {
monitor.isHovering = false;
} else if (x > monX && x < (monX + monW) && y > monY && y < (monY + monH)) {
monitor.isHovering = true;
} else {
monitor.isHovering = false;
}

if (monitor.isDragging) {
monitor.x += dx;
monitor.y += dy;
}
}

// redraw the scene with the new rect positions
UI.draw();

// reset the starting mouse position for the next mousemove
startX = x;
startY = y;
}

canvas.addEventListener("mousedown", this._onDisplaysViewerMouseDown, false);
canvas.addEventListener("mouseup", this._onDisplaysViewerMouseUp, false);
canvas.addEventListener("mousemove", this._onDisplaysViewerMouseMove, false);
},


Expand Down Expand Up @@ -2921,12 +2943,19 @@ const UI = {
// When a new display is added, it is defaulted to be placed to the far right relative to existing displays and to the top
if (UI.rfb) {
let screenPlan = UI.rfb.getScreenPlan();

if (e && e.detail) {
const { left, top, screenID } = e.detail
const current = screenPlan.screens.findIndex(el => el.screenID === screenID)
if (current > -1) {
screenPlan.screens[current].x = left
screenPlan.screens[current].y = top
const registered = screenPlan.screens.findIndex(el => el.screenID === screenID)
if (registered !== -1) {
screenPlan.screens[registered].x = left
screenPlan.screens[registered].y = top
}

const main = screenPlan.screens.findIndex(el => el.screenID === this._display._screenID);
if (main !== 1) {
screenPlan.screens[main].x = window.screenX;
screenPlan.screens[main].y = window.screenY;
}
}

Expand Down