Export clipping state externally

So that UI can reflect if it is currently possible to drag the viewport
or not.

app/ui.js

@@ -1049,6 +1049,7 @@ const UI = {
         UI.rfb.addEventListener("serververification", UI.serverVerify);
         UI.rfb.addEventListener("credentialsrequired", UI.credentials);
         UI.rfb.addEventListener("securityfailure", UI.securityFailed);
+        UI.rfb.addEventListener("clippingviewport", UI.updateViewDrag);
         UI.rfb.addEventListener("capabilities", UI.updatePowerButton);
         UI.rfb.addEventListener("clipboard", UI.clipboardReceive);
         UI.rfb.addEventListener("bell", UI.bell);
@@ -1362,7 +1363,8 @@ const UI = {
 
         const viewDragButton = document.getElementById('noVNC_view_drag_button');
 
-        if (!UI.rfb.clipViewport && UI.rfb.dragViewport) {
+        if ((!UI.rfb.clipViewport || !UI.rfb.clippingViewport) &&
+            UI.rfb.dragViewport) {
             // We are no longer clipping the viewport. Make sure
             // viewport drag isn't active when it can't be used.
             UI.rfb.dragViewport = false;
@@ -1379,6 +1381,8 @@ const UI = {
         } else {
             viewDragButton.classList.add("noVNC_hidden");
         }
+
+        viewDragButton.disabled = !UI.rfb.clippingViewport;
     },
 
 /* ------^-------

core/rfb.js

@@ -287,6 +287,7 @@ export default class RFB extends EventTargetMixin {
 
         this._viewOnly = false;
         this._clipViewport = false;
+        this._clippingViewport = false;
         this._scaleViewport = false;
         this._resizeSession = false;
 
@@ -318,6 +319,16 @@ export default class RFB extends EventTargetMixin {
 
     get capabilities() { return this._capabilities; }
 
+    get clippingViewport() { return this._clippingViewport; }
+    _setClippingViewport(on) {
+        if (on === this._clippingViewport) {
+            return;
+        }
+        this._clippingViewport = on;
+        this.dispatchEvent(new CustomEvent("clippingviewport",
+                                           { detail: this._clippingViewport }));
+    }
+
     get touchButton() { return 0; }
     set touchButton(button) { Log.Warn("Using old API!"); }
 
@@ -749,6 +760,10 @@ export default class RFB extends EventTargetMixin {
             const size = this._screenSize();
             this._display.viewportChangeSize(size.w, size.h);
             this._fixScrollbars();
+            this._setClippingViewport(size.w < this._display.width ||
+                                      size.h < this._display.height);
+        } else {
+            this._setClippingViewport(false);
         }
 
         // When changing clipping we might show or hide scrollbars.

docs/API.md

@@ -31,6 +31,11 @@ protocol stream.
     | -------- | --------- | -----------
     | `power`  | `boolean` | Machine power control is available
 
+`clippingViewport` *Read only*
+  - Is a `boolean` indicating if the remote session is currently being
+    clipped to its container. Only relevant if `clipViewport` is
+    enabled.
+
 `clipViewport`
   - Is a `boolean` indicating if the remote session should be clipped
     to its container. When disabled scrollbars will be shown to handle
@@ -94,6 +99,10 @@ protocol stream.
   - The `clipboard` event is fired when clipboard data is received from
     the server.
 
+[`clippingviewport`](#clippingviewport)
+  - The `clippingviewport` event is fired when `RFB.clippingViewport` is
+    updated.
+
 [`connect`](#connect)
   - The `connect` event is fired when the `RFB` object has completed
     the connection and handshaking with the server.
@@ -227,6 +236,12 @@ The `capabilities` event is fired whenever an entry is added or removed
 from `RFB.capabilities`. The `detail` property is an `Object` with the
 property `capabilities` containing the new value of `RFB.capabilities`.
 
+#### clippingviewport
+
+The `clippingviewport` event is fired whenever `RFB.clippingViewport`
+changes between `true` and `false`. The `detail` property is a `boolean`
+with the new value of `RFB.clippingViewport`.
+
 #### clipboard
 
 The `clipboard` event is fired when the server has sent clipboard data.