From d7e7e414e903daa4bfe83bce5f83675e04e1159d Mon Sep 17 00:00:00 2001 From: Mariusz Marciniak Date: Wed, 24 Jan 2024 11:36:34 +0100 Subject: [PATCH 1/6] KASM-5489 Disallow display dragging for only one display --- app/ui.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/ui.js b/app/ui.js index f17aca15b..341bb8d41 100644 --- a/app/ui.js +++ b/app/ui.js @@ -2226,7 +2226,7 @@ const UI = { } function myMove(e) { let monitors = UI.sortedMonitors - if (dragok) { + if (dragok && monitors.length > 1) { e.preventDefault(); e.stopPropagation(); From 4edcc14e4be1ca556d02862fa9b2a278a2f4938e Mon Sep 17 00:00:00 2001 From: Mariusz Marciniak Date: Wed, 24 Jan 2024 11:38:08 +0100 Subject: [PATCH 2/6] KASM-5489 Remove decimals from display resolutions when arranging displays --- app/ui.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/ui.js b/app/ui.js index 341bb8d41..6c72e093a 100644 --- a/app/ui.js +++ b/app/ui.js @@ -2102,9 +2102,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) { From 3a2f897c1f40ffd580433f7af51eb50993511634 Mon Sep 17 00:00:00 2001 From: Mariusz Marciniak Date: Wed, 24 Jan 2024 12:03:30 +0100 Subject: [PATCH 3/6] KASM-5489 Remove duplicated mouse event handlers for displays in display viewer --- app/ui.js | 165 +++++++++++++++++++++++++++++------------------------- 1 file changed, 90 insertions(+), 75 deletions(-) diff --git a/app/ui.js b/app/ui.js index 6c72e093a..ae4c0f001 100644 --- a/app/ui.js +++ b/app/ui.js @@ -2161,104 +2161,119 @@ 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 + const { canvas, bb} = UI.multiMonitorSettings(); + + UI.recenter(); + UI.draw(); + + let offsetX = bb.left; + let offsetY = bb.top; 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() + 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; + } + + let x = parseInt(e.clientX - offsetX); + let y = parseInt(e.clientY - offsetY); + + // 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; + UI.selectedMonitor = monitor; + 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; } + + // 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 && monitors.length > 1) { - 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; + }); + + UI.recenter(); + UI.draw(); + } - // redraw the scene with the new rect positions - UI.draw(); + this._onDisplaysViewerMouseMove = this._onDisplaysViewerMouseMove || function(e) { + e.preventDefault(); + e.stopPropagation(); - // reset the starting mouse position for the next mousemove - startX = mx; - startY = my; + if (!isDragging) { + return; + } + // get the current mouse position + const monitors = UI.sortedMonitors; + const x = parseInt(e.clientX - offsetX); + const y = parseInt(e.clientY - offsetY); + + // calculate the distance the mouse has moved + // since the last mousemove + const dx = x - startX; + const dy = y - startY; + + // move each rect that isDragging + // by the distance the mouse has moved + // since the last mousemove + for (let i = 0; i < monitors.length; i++) { + var m = monitors[i]; + if (m.isDragging) { + m.x += dx; + m.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); }, From 526976993f254672a61690bd9f58ef66f7adec84 Mon Sep 17 00:00:00 2001 From: Mariusz Marciniak Date: Wed, 24 Jan 2024 13:01:14 +0100 Subject: [PATCH 4/6] KASM-5489 Highlight displays when hovered in display viewer --- app/ui.js | 35 ++++++++++++++++++++++------------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/app/ui.js b/app/ui.js index ae4c0f001..e2416f690 100644 --- a/app/ui.js +++ b/app/ui.js @@ -64,7 +64,6 @@ const UI = { reconnectPassword: null, monitors: [], sortedMonitors: [], - selectedMonitor: null, refreshRotation: 0, currentDisplay: null, @@ -1990,6 +1989,7 @@ const UI = { scale: 1, fill: '#eeeeeecc', isDragging: false, + isHovering: false, num }) num++ @@ -2092,7 +2092,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"; @@ -2200,7 +2200,7 @@ const UI = { if (x > monX && x < (monX + monW) && y > monY && y < (monY + monH)) { isDragging = true; monitor.isDragging = true; - UI.selectedMonitor = monitor; + monitor.isHovering = false; break; } } @@ -2220,6 +2220,7 @@ const UI = { isDragging = false; for (let i = 0; i < monitors.length; i++) { monitors[i].isDragging = false; + monitors[i].isHovering = false; } // reposition monitors @@ -2238,10 +2239,6 @@ const UI = { e.preventDefault(); e.stopPropagation(); - if (!isDragging) { - return; - } - // get the current mouse position const monitors = UI.sortedMonitors; const x = parseInt(e.clientX - offsetX); @@ -2252,15 +2249,27 @@ const UI = { const dx = x - startX; const dy = y - startY; - // move each rect that isDragging - // by the distance the mouse has moved + // move each rect that is dragging by the distance the mouse has moved // since the last mousemove for (let i = 0; i < monitors.length; i++) { - var m = monitors[i]; - if (m.isDragging) { - m.x += dx; - m.y += dy; + 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 From 6299aac520fd02d48494106e76bbef6fa75b50f8 Mon Sep 17 00:00:00 2001 From: Mariusz Marciniak Date: Wed, 24 Jan 2024 13:03:15 +0100 Subject: [PATCH 5/6] KASM-5489 Fixed display positioning in display viewer --- app/ui.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/app/ui.js b/app/ui.js index e2416f690..38849747b 100644 --- a/app/ui.js +++ b/app/ui.js @@ -2942,12 +2942,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; } } From 2be3bf9d365891d4384bff5aef2087fa2038bb5a Mon Sep 17 00:00:00 2001 From: Mariusz Marciniak Date: Wed, 24 Jan 2024 15:29:01 +0100 Subject: [PATCH 6/6] KASM-5489 Fix incorrect mouse position in display viewer after resizing the window --- app/ui.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/app/ui.js b/app/ui.js index 38849747b..af6340b69 100644 --- a/app/ui.js +++ b/app/ui.js @@ -2161,17 +2161,14 @@ const UI = { displayMonitors() { - const { canvas, bb} = UI.multiMonitorSettings(); - UI.recenter(); UI.draw(); - let offsetX = bb.left; - let offsetY = bb.top; let startX; let startY; let isDragging = false; + const { canvas } = UI.multiMonitorSettings(); canvas.removeEventListener("mousedown", this._onDisplaysViewerMouseDown); canvas.removeEventListener("mouseup", this._onDisplaysViewerMouseUp); canvas.removeEventListener("mousemove", this._onDisplaysViewerMouseMove); @@ -2186,8 +2183,9 @@ const UI = { return; } - let x = parseInt(e.clientX - offsetX); - let y = parseInt(e.clientY - offsetY); + 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++) { @@ -2240,9 +2238,9 @@ const UI = { e.stopPropagation(); // get the current mouse position - const monitors = UI.sortedMonitors; - const x = parseInt(e.clientX - offsetX); - const y = parseInt(e.clientY - offsetY); + 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 @@ -2251,6 +2249,7 @@ const UI = { // 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;