Skip to content

Show local cursor and cursor while dragging the clip area #1991

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

Draft
redneck-f25 wants to merge 4 commits into
base: master
Choose a base branch
from
Draft

Show local cursor and cursor while dragging the clip area #1991

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7802e9a
do not test for 'mousedown' on every 'mousemove'
redneck-f25 Sep 8, 2025
40aea41
Optionally show local and drag cursor
redneck-f25 Sep 8, 2025
cca7c7f
fix cursor while dragging when not view-only
redneck-f25 Sep 14, 2025
92c6508
Add rfb.showLocalCursor to vnc_lite.html
redneck-f25 Sep 14, 2025
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
18 changes: 18 additions & 0 deletions app/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,8 @@ const UI = {
UI.initSetting('bell', 'on');
UI.initSetting('view_only', false);
UI.initSetting('show_dot', false);
UI.initSetting('show_local_cursor', false);
UI.initSetting('show_drag_cursor', false);
UI.initSetting('path', 'websockify');
UI.initSetting('repeaterID', '');
UI.initSetting('reconnect', false);
Expand Down Expand Up @@ -371,6 +373,10 @@ const UI = {
UI.addSettingChangeHandler('view_only', UI.updateViewOnly);
UI.addSettingChangeHandler('show_dot');
UI.addSettingChangeHandler('show_dot', UI.updateShowDotCursor);
UI.addSettingChangeHandler('show_local_cursor');
UI.addSettingChangeHandler('show_local_cursor', UI.updateShowLocalCursor);
UI.addSettingChangeHandler('show_drag_cursor');
UI.addSettingChangeHandler('show_drag_cursor', UI.updateShowDragCursor);
UI.addSettingChangeHandler('host');
UI.addSettingChangeHandler('port');
UI.addSettingChangeHandler('path');
Expand Down Expand Up @@ -1101,6 +1107,8 @@ const UI = {
UI.rfb.qualityLevel = parseInt(UI.getSetting('quality'));
UI.rfb.compressionLevel = parseInt(UI.getSetting('compression'));
UI.rfb.showDotCursor = UI.getSetting('show_dot');
UI.rfb.showLocalCursor = UI.getSetting('show_local_cursor');
UI.rfb.showDragCursor = UI.getSetting('show_drag_cursor');

UI.updateViewOnly(); // requires UI.rfb
},
Expand Down Expand Up @@ -1759,6 +1767,16 @@ const UI = {
UI.rfb.showDotCursor = UI.getSetting('show_dot');
},

updateShowLocalCursor() {
if (!UI.rfb) return;
UI.rfb.showLocalCursor = UI.getSetting('show_local_cursor');
},

updateShowDragCursor() {
if (!UI.rfb) return;
UI.rfb.showDragCursor = UI.getSetting('show_drag_cursor');
},

updateLogging() {
WebUtil.initLogging(UI.getSetting('logging'));
},
Expand Down
48 changes: 40 additions & 8 deletions core/rfb.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,16 +290,18 @@ export default class RFB extends EventTargetMixin {

// ===== PROPERTIES =====

this.dragViewport = false;
this.focusOnClick = true;

this._viewOnly = false;
this._clipViewport = false;
this._clippingViewport = false;
this._dragViewport = false;
this._scaleViewport = false;
this._resizeSession = false;

this._showDotCursor = false;
this._showLocalCursor = false;
this._showDragCursor = false;

this._qualityLevel = 6;
this._compressionLevel = 2;
Expand Down Expand Up @@ -342,6 +344,12 @@ export default class RFB extends EventTargetMixin {
this._updateClip();
}

get dragViewport() { return this._dragViewport; }
set dragViewport(dragViewport) {
this._dragViewport = dragViewport;
this._refreshCursor();
}

get scaleViewport() { return this._scaleViewport; }
set scaleViewport(scale) {
this._scaleViewport = scale;
Expand Down Expand Up @@ -370,6 +378,18 @@ export default class RFB extends EventTargetMixin {
this._refreshCursor();
}

get showLocalCursor() { return this._showLocalCursor; }
set showLocalCursor(show) {
this._showLocalCursor = show;
this._refreshCursor();
}

get showDragCursor() { return this._showDragCursor; }
set showDragCursor(show) {
this._showDragCursor = show;
this._refreshCursor();
}

get background() { return this._screen.style.background; }
set background(cssValue) { this._screen.style.background = cssValue; }

Expand Down Expand Up @@ -1111,11 +1131,16 @@ export default class RFB extends EventTargetMixin {

let bmask = RFB._convertButtonMask(ev.buttons);

let down = ev.type == 'mousedown';
let down = false;
switch (ev.type) {
case 'mousedown':
down = true;
// eslint-disable-next-line no-fallthrough
case 'mouseup':
if (this.dragViewport) {
if (this._showDragCursor) {
this._cursor.setLocalCursor(down ? 'grabbing' : 'grab');
}
if (down && !this._viewportDragging) {
this._viewportDragging = true;
this._viewportDragPos = {'x': pos.x, 'y': pos.y};
Expand Down Expand Up @@ -1334,7 +1359,7 @@ export default class RFB extends EventTargetMixin {
this._handleTapEvent(ev, 0x2);
break;
case 'drag':
if (this.dragViewport) {
if (this._dragViewport) {
this._viewportHasMoved = false;
this._viewportDragging = true;
this._viewportDragPos = {'x': pos.x, 'y': pos.y};
Expand All @@ -1344,7 +1369,7 @@ export default class RFB extends EventTargetMixin {
}
break;
case 'longpress':
if (this.dragViewport) {
if (this._dragViewport) {
// If dragViewport is true, we need to wait to see
// if we have dragged outside the threshold before
// sending any events to the server.
Expand Down Expand Up @@ -1376,7 +1401,7 @@ export default class RFB extends EventTargetMixin {
break;
case 'drag':
case 'longpress':
if (this.dragViewport) {
if (this._dragViewport) {
this._viewportDragging = true;
const deltaX = this._viewportDragPos.x - pos.x;
const deltaY = this._viewportDragPos.y - pos.y;
Expand Down Expand Up @@ -1451,7 +1476,7 @@ export default class RFB extends EventTargetMixin {
case 'twodrag':
break;
case 'drag':
if (this.dragViewport) {
if (this._dragViewport) {
this._viewportDragging = false;
} else {
this._fakeMouseMove(ev, pos.x, pos.y);
Expand All @@ -1465,7 +1490,7 @@ export default class RFB extends EventTargetMixin {
break;
}

if (this.dragViewport && !this._viewportHasMoved) {
if (this._dragViewport && !this._viewportHasMoved) {
this._fakeMouseMove(ev, pos.x, pos.y);
// If dragViewport is true, we need to wait to see
// if we have dragged outside the threshold before
Expand Down Expand Up @@ -3032,7 +3057,7 @@ export default class RFB extends EventTargetMixin {

_shouldShowDotCursor() {
// Called when this._cursorImage is updated
if (!this._showDotCursor) {
if (!this._showDotCursor || (this._dragViewport && this._showDragCursor)) {
// User does not want to see the dot, so...
return false;
}
Expand Down Expand Up @@ -3062,6 +3087,13 @@ export default class RFB extends EventTargetMixin {
image.hotx, image.hoty,
image.w, image.h
);
if (this._dragViewport && this._showDragCursor) {
this._cursor.setLocalCursor(this._viewportDragging ? 'grabbing' : 'grab');
} else if (this._showLocalCursor) {
this._cursor.setLocalCursor('default');
} else {
this._cursor.setLocalCursor('none');
}
}

static genDES(password, challenge) {
Expand Down
6 changes: 5 additions & 1 deletion core/util/cursor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ export default class Cursor {
}

clear() {
this._target.style.cursor = 'none';
this.setLocalCursor('none');
this._canvas.width = 0;
this._canvas.height = 0;
this._position.x = this._position.x + this._hotSpot.x;
Expand All @@ -115,6 +115,10 @@ export default class Cursor {
this._hotSpot.y = 0;
}

setLocalCursor(cursor) {
this._target.style.cursor = cursor;
}

// Mouse events might be emulated, this allows
// moving the cursor in such cases
move(clientX, clientY) {
Expand Down
14 changes: 14 additions & 0 deletions vnc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -296,6 +296,20 @@ <h1 class="noVNC_logo" translate="no"><span>no</span><br>VNC</h1>
Show dot when no cursor
</label>
</li>
<li>
<label>
<input id="noVNC_setting_show_local_cursor" type="checkbox"
class="toggle">
Show local cursor
</label>
</li>
<li>
<label>
<input id="noVNC_setting_show_drag_cursor" type="checkbox"
class="toggle">
Show drag cursor
</label>
</li>
<li><hr></li>
<!-- Logging selection dropdown -->
<li>
Expand Down
1 change: 1 addition & 0 deletions vnc_lite.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,7 @@
// Set parameters that can be changed on an active connection
rfb.viewOnly = readQueryVariable('view_only', false);
rfb.scaleViewport = readQueryVariable('scale', false);
rfb.showLocalCursor = readQueryVariable('show_local_cursor', 0);
</script>
</head>

Expand Down