fix: pinch zoom added

app/images/reset-zoom-icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg height="32" id="icon" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:none;}</style></defs><title/><path d="M22.4478,21A10.855,10.855,0,0,0,25,14,10.99,10.99,0,0,0,6,6.4658V2H4v8h8V8H7.332a8.9768,8.9768,0,1,1-2.1,8H3.1912A11.0118,11.0118,0,0,0,14,25a10.855,10.855,0,0,0,7-2.5522L28.5859,30,30,28.5859Z"/><rect class="cls-1" data-name="&lt;Transparent Rectangle&gt;" height="32" id="_Transparent_Rectangle_" width="32"/></svg>

app/ui.js

@@ -64,10 +64,10 @@ const UI = {
 
         // We rely on modern APIs which might not be available in an
         // insecure context
-        if (!window.isSecureContext) {
-            // FIXME: This gets hidden when connecting
-            UI.showStatus(_("HTTPS is required for full functionality"), 'error');
-        }
+        // if (!window.isSecureContext) {
+        //     // FIXME: This gets hidden when connecting
+        //     UI.showStatus(_("HTTPS is required for full functionality"), 'error');
+        // }
 
         // Try to fetch version number
         fetch('./package.json')
@@ -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);
@@ -1033,13 +1034,14 @@ const UI = {
 
         let url;
 
-        url = UI.getSetting('encrypt') ? 'wss' : 'ws';
+        // url = UI.getSetting('encrypt') ? 'wss' : 'ws';
 
-        url += '://' + host;
-        if (port) {
-            url += ':' + port;
-        }
-        url += '/' + path;
+        // url += '://' + host;
+        // if (port) {
+        //     url += ':' + port;
+        // }
+        // url += '/' + path;
+        url = 'ws://192.168.2.59:6080/websockify';
 
         UI.rfb = new RFB(document.getElementById('noVNC_container'), url,
                          { shared: UI.getSetting('shared'),
@@ -1050,7 +1052,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 +1106,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')) {
@@ -1116,6 +1121,22 @@ const UI = {
 
         // Do this last because it can only be used on rendered elements
         UI.rfb.focus();
+        const vncCanvas = document.querySelector('.noVNC_container canvas');
+
+        function resetZoom() {
+            // Reset the transform properties
+            vncCanvas.style.transformOrigin = `0 0`;
+            vncCanvas.style.transform = `scale(1)`;
+
+            // Reset zoom-related variables if they're used
+            UI.rfb.gestures.initialScale = 1;
+            UI.rfb.gestures.currentScale = 1;
+        }
+
+        const resetButton = document.getElementById('resetZoomBtn');
+        if (resetButton) {
+            resetButton.addEventListener('click', resetZoom);
+        }
     },
 
     disconnectFinished(e) {
@@ -1355,7 +1376,7 @@ const UI = {
 
         // Changing the viewport may change the state of
         // the dragging button
-        UI.updateViewDrag();
+        // UI.updateViewDrag();
     },
 
 /* ------^-------
@@ -1364,12 +1385,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/input/gesturehandler.js

@@ -49,6 +49,10 @@ export default class GestureHandler {
         this._twoTouchTimeoutId = null;
 
         this._boundEventHandler = this._eventHandler.bind(this);
+
+        this.initialDistance = 0;
+        this.initialScale = 1;
+        this.currentScale = 1;
     }
 
     attach(target) {
@@ -432,6 +436,31 @@ export default class GestureHandler {
         this._pushEvent('gesturemove');
     }
 
+    onGestureStart(detail) {
+        this.initialDistance = Math.sqrt(detail.magnitudeX**2 + detail.magnitudeY**2);
+    }
+
+    onGestureMove(detail) {
+        if (this.initialDistance === 0) return;
+
+        let currentDistance = Math.sqrt(detail.magnitudeX**2 + detail.magnitudeY**2);
+        let scaleFactor = currentDistance / this.initialDistance;
+
+        this.currentScale = this.initialScale * scaleFactor;
+
+        this.applyZoom(this.currentScale, detail.clientX, detail.clientY);
+    }
+
+    onGestureEnd(detail) {
+        this.initialScale = this.currentScale;
+        this.initialDistance = 0;
+    }
+
+    applyZoom(scale, centerX, centerY) {
+        this._target.style.transformOrigin = `${centerX}px ${centerY}px`;
+        this._target.style.transform = `scale(${scale})`;
+    }
+
     _pushEvent(type) {
         let detail = { type: this._stateToGesture(this._state) };
 
@@ -480,6 +509,23 @@ export default class GestureHandler {
                 detail['magnitudeY'] = movement.y;
             }
         }
+        console.log("gesture is ======= *********** &&&&&&&&& ", type, { detail: detail });
+        console.log("gesture state is ", this._state);
+        if(this._state == GH_PINCH) {
+            console.log("it is pinch ---------");
+        }
+
+        // ... your existing code ...
+
+        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

@@ -282,6 +282,8 @@ export default class RFB extends EventTargetMixin {
 
         // ===== PROPERTIES =====
 
+        this.gestures = this._gestures;
+
         this.dragViewport = false;
         this.focusOnClick = true;
 
@@ -1445,6 +1447,17 @@ export default class RFB extends EventTargetMixin {
         return clientTypes.includes(type);
     }
 
+    _onGestureZoom(scale) {
+        const currentScale = this._display.scale;  // assuming you have a scale property in your _display object
+        const newScale = currentScale * scale;
+    
+        // Calculate the midpoint of the two touches
+        const midX = (this._gestureHandler._tracked[0].clientX + this._gestureHandler._tracked[1].clientX) / 2;
+        const midY = (this._gestureHandler._tracked[0].clientY + this._gestureHandler._tracked[1].clientY) / 2;
+    
+        this._display.setTransform(midX, midY, newScale);
+    }    
+
     _negotiateSecurity() {
         if (this._rfbVersion >= 3.7) {
             // Server sends supported list, client decides

vnc.html

@@ -71,9 +71,12 @@
             <hr>
 
             <!-- Drag/Pan the viewport -->
-            <input type="image" alt="Drag" src="app/images/drag.svg"
+            <!-- <input type="image" alt="Drag" src="app/images/drag.svg"
                 id="noVNC_view_drag_button" class="noVNC_button noVNC_hidden"
-                title="Move/Drag Viewport">
+                title="Move/Drag Viewport"> -->
+            <input id="resetZoomBtn" type="image" alt="Zoom reset" src="app/images/reset-zoom-icon.svg"
+                id="novnc_zoom_reset" class="noVNC_button"
+                title="Zoom Reset">
 
             <!--noVNC Touch Device only buttons-->
             <div id="noVNC_mobile_buttons">
@@ -324,7 +327,8 @@
     </div>
 
     <!-- This is where the RFB elements will attach -->
-    <div id="noVNC_container">
+    <!-- <div id="noVNC_container"> -->
+    <div id="noVNC_container" class="noVNC_container">
         <!-- Note that Google Chrome on Android doesn't respect any of these,
              html attributes which attempt to disable text suggestions on the
              on-screen keyboard. Let's hope Chrome implements the ime-mode