jcarr
/
noVNC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Replace window.onresize with ResizeObserver 

Fixes an issue where if the screen div resizes for a reason other than
window resize, the canvas wouldn't redraw.
This commit is contained in:
Benjamin Leeds 2020-02-07 09:59:58 -05:00 committed by Samuel Mannehed
parent fcb95821b7
commit a9c2ff30b6
1 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
core/rfb.js
View File

@ -134,6 +134,7 @@ export default class RFB extends EventTargetMixin {
this._flushing = false; // Display flushing state this._flushing = false; // Display flushing state
this._keyboard = null; // Keyboard input handler object this._keyboard = null; // Keyboard input handler object
this._gestures = null; // Gesture input handler object this._gestures = null; // Gesture input handler object
this._resizeObserver = null; // Resize observer object
// Timers // Timers
this._disconnTimer = null; // disconnection timer this._disconnTimer = null; // disconnection timer
@ -171,7 +172,7 @@ export default class RFB extends EventTargetMixin {
// Bound event handlers // Bound event handlers
this._eventHandlers = { this._eventHandlers = {
focusCanvas: this._focusCanvas.bind(this), focusCanvas: this._focusCanvas.bind(this),
windowResize: this._windowResize.bind(this), handleResize: this._handleResize.bind(this),
handleMouse: this._handleMouse.bind(this), handleMouse: this._handleMouse.bind(this),
handleWheel: this._handleWheel.bind(this), handleWheel: this._handleWheel.bind(this),
handleGesture: this._handleGesture.bind(this), handleGesture: this._handleGesture.bind(this),
@ -239,6 +240,8 @@ export default class RFB extends EventTargetMixin {
this._sock.on('message', this._handleMessage.bind(this)); this._sock.on('message', this._handleMessage.bind(this));
this._sock.on('error', this._socketError.bind(this)); this._sock.on('error', this._socketError.bind(this));
this._resizeObserver = new ResizeObserver(this._eventHandlers.handleResize);
// All prepared, kick off the connection // All prepared, kick off the connection
this._updateConnectionState('connecting'); this._updateConnectionState('connecting');
@ -488,9 +491,8 @@ export default class RFB extends EventTargetMixin {
this._cursor.attach(this._canvas); this._cursor.attach(this._canvas);
this._refreshCursor(); this._refreshCursor();
// Monitor size changes of the screen // Monitor size changes of the screen element
// FIXME: Use ResizeObserver, or hidden overflow this._resizeObserver.observe(this._screen);
window.addEventListener('resize', this._eventHandlers.windowResize);
// Always grab focus on some kind of click event // Always grab focus on some kind of click event
this._canvas.addEventListener("mousedown", this._eventHandlers.focusCanvas); this._canvas.addEventListener("mousedown", this._eventHandlers.focusCanvas);
@ -531,7 +533,7 @@ export default class RFB extends EventTargetMixin {
this._canvas.removeEventListener('contextmenu', this._eventHandlers.handleMouse); this._canvas.removeEventListener('contextmenu', this._eventHandlers.handleMouse);
this._canvas.removeEventListener("mousedown", this._eventHandlers.focusCanvas); this._canvas.removeEventListener("mousedown", this._eventHandlers.focusCanvas);
this._canvas.removeEventListener("touchstart", this._eventHandlers.focusCanvas); this._canvas.removeEventListener("touchstart", this._eventHandlers.focusCanvas);
window.removeEventListener('resize', this._eventHandlers.windowResize); this._resizeObserver.disconnect();
this._keyboard.ungrab(); this._keyboard.ungrab();
this._gestures.detach(); this._gestures.detach();
this._sock.close(); this._sock.close();
@ -617,7 +619,7 @@ export default class RFB extends EventTargetMixin {
{ detail: { name: this._fbName } })); { detail: { name: this._fbName } }));
} }
_windowResize(event) { _handleResize() {
// If the window resized then our screen element might have // If the window resized then our screen element might have
// as well. Update the viewport dimensions. // as well. Update the viewport dimensions.
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {