Pinch zoom

app/ui.js

@@ -229,8 +229,9 @@ const UI = {
         document.getElementById("noVNC_control_bar")
             .addEventListener('keydown', UI.keepControlbar);
 
-        document.getElementById("noVNC_view_drag_button")
-            .addEventListener('click', UI.toggleViewDrag);
+        // // Agilicus Modified
+        // document.getElementById("noVNC_view_drag_button")
+        //     .addEventListener('click', UI.toggleViewDrag);
 
         document.getElementById("noVNC_control_bar_handle")
             .addEventListener('mousedown', UI.controlbarHandleMouseDown);
@@ -1050,7 +1051,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("clippingviewport", UI.updateViewDrag);
         UI.rfb.addEventListener("capabilities", UI.updatePowerButton);
         UI.rfb.addEventListener("clipboard", UI.clipboardReceive);
         UI.rfb.addEventListener("bell", UI.bell);
@@ -1104,6 +1105,9 @@ const UI = {
     connectFinished(e) {
         UI.connected = true;
         UI.inhibitReconnect = false;
+        // Agilicus modified from original file
+        // UI.toggleViewDrag();
+        UI.rfb.dragViewport = true;
 
         let msg;
         if (UI.getSetting('encrypt')) {
@@ -1355,7 +1359,7 @@ const UI = {
 
         // Changing the viewport may change the state of
         // the dragging button
-        UI.updateViewDrag();
+        // UI.updateViewDrag();
     },
 
 /* ------^-------
@@ -1364,12 +1368,12 @@ const UI = {
  *    VIEWDRAG
  * ------v------*/
 
-    toggleViewDrag() {
-        if (!UI.rfb) return;
+    // toggleViewDrag() {
+    //     if (!UI.rfb) return;
 
-        UI.rfb.dragViewport = !UI.rfb.dragViewport;
-        UI.updateViewDrag();
-    },
+    //     UI.rfb.dragViewport = !UI.rfb.dragViewport;
+    //     // UI.updateViewDrag();
+    // },
 
     updateViewDrag() {
         if (!UI.connected) return;

core/display.js

@@ -433,6 +433,10 @@ export default class Display {
         this._rescale(scaleRatio);
     }
 
+    customrescale(factor) {
+        this._rescale(factor);
+    }
+
     // ===== PRIVATE METHODS =====
 
     _rescale(factor) {

core/input/gesturehandler.js

@@ -34,7 +34,8 @@
 const GH_TWOTOUCH_TIMEOUT = 50;
 
 export default class GestureHandler {
-    constructor() {
+    constructor(display) {
+        this._display = display;
         this._target = null;
 
         this._state = GH_INITSTATE;
@@ -49,6 +50,10 @@
         this._twoTouchTimeoutId = null;
 
         this._boundEventHandler = this._eventHandler.bind(this);
+
+        this.initialDistance = 0;
+        this.initialScale = 1;
+        this.currentScale = 1;
     }
 
     attach(target) {
@@ -432,6 +437,61 @@
         this._pushEvent('gesturemove');
     }
 
+    onGestureStart(detail) {
+        this.initialDistance = Math.sqrt(detail.magnitudeX**2 + detail.magnitudeY**2);
+
+        if (!this._initialCanvasWidth) {
+            this._initialCanvasWidth = this._target.width;
+        }
+        if (!this._initialCanvasHeight) {
+            this._initialCanvasHeight = this._target.height;
+        }
+
+        const viewer = document.getElementById('noVNC_container');
+        this.MIN_SCALE_WIDTH = viewer.clientWidth / this._initialCanvasWidth;
+        this.MIN_SCALE_HEIGHT = viewer.clientHeight / this._initialCanvasHeight;
+        this.MIN_SCALE = Math.max(this.MIN_SCALE_WIDTH, this.MIN_SCALE_HEIGHT);
+    }  
+
+    onGestureMove(detail) {
+        if (this.initialDistance === 0) return;
+
+        let currentDistance = Math.sqrt(detail.magnitudeX**2 + detail.magnitudeY**2);
+        let scaleFactor = 1 / (currentDistance / this.initialDistance);
+
+        this.currentScale = this.initialScale * scaleFactor;
+
+        // Basic constraints
+        if (this.currentScale < 0.5) this.currentScale = 0.5;
+        if (this.currentScale > 4) this.currentScale = 4;
+
+        this.applyZoom(this.currentScale, detail.clientX, detail.clientY);
+    }
+
+
+    onGestureEnd(detail) {
+        this.initialScale = this.currentScale;
+        this.initialDistance = 0;
+    }    
+
+    applyZoom(scale, centerX, centerY) {
+        let newWidth = this._initialCanvasWidth * scale;
+        let newHeight = this._initialCanvasHeight * scale;
+
+        this._display.viewportChangeSize(newWidth, newHeight);
+
+        const viewer = document.getElementById('noVNC_container');
+        const viewerWidth = viewer.clientWidth;
+        const viewerHeight = viewer.clientHeight;
+
+        const widthScale = viewerWidth / newWidth;
+        const heightScale = viewerHeight / newHeight;
+
+        const visualScale = Math.min(widthScale, heightScale);
+        this._display.customrescale(visualScale);
+    }
+
+
     _pushEvent(type) {
         let detail = { type: this._stateToGesture(this._state) };
 
@@ -480,6 +540,16 @@
                 detail['magnitudeY'] = movement.y;
             }
         }
+
+        if (this._state === GH_PINCH) {
+            if (type === 'gesturestart') {
+                this.onGestureStart(detail);
+            } else if (type === 'gesturemove') {
+                this.onGestureMove(detail);
+            } else if (type === 'gestureend') {
+                this.onGestureEnd(detail);
+            }
+        }
 
         let gev = new CustomEvent(type, { detail: detail });
         this._target.dispatchEvent(gev);

core/rfb.js

@@ -263,7 +263,7 @@ export default class RFB extends EventTargetMixin {
         this._remoteCapsLock = null; // Null indicates unknown or irrelevant
         this._remoteNumLock = null;
 
-        this._gestures = new GestureHandler();
+        this._gestures = new GestureHandler(this._display);
 
         this._sock = new Websock();
         this._sock.on('open', this._socketOpen.bind(this));
@@ -282,6 +282,8 @@ export default class RFB extends EventTargetMixin {
 
         // ===== PROPERTIES =====
 
+        this.gestures = this._gestures;
+
         this.dragViewport = false;
         this.focusOnClick = true;
 
@@ -1443,7 +1445,7 @@ export default class RFB extends EventTargetMixin {
         ];
 
         return clientTypes.includes(type);
-    }
+    }  
 
     _negotiateSecurity() {
         if (this._rfbVersion >= 3.7) {