Merge 6288cdaab3 into d80e3bfa2f

app/ui.js

@@ -229,8 +229,9 @@ const UI = {
         document.getElementById("noVNC_control_bar")
             .addEventListener('keydown', UI.keepControlbar);
 
-        document.getElementById("noVNC_view_drag_button")
+        // // Agilicus Modified
-            .addEventListener('click', UI.toggleViewDrag);
+        // document.getElementById("noVNC_view_drag_button")
+        //     .addEventListener('click', UI.toggleViewDrag);
 
         document.getElementById("noVNC_control_bar_handle")
             .addEventListener('mousedown', UI.controlbarHandleMouseDown);
@@ -1058,7 +1059,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);
@@ -1112,6 +1113,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')) {
@@ -1363,7 +1367,7 @@ const UI = {
 
         // Changing the viewport may change the state of
         // the dragging button
-        UI.updateViewDrag();
+        // UI.updateViewDrag();
     },
 
 /* ------^-------
@@ -1372,12 +1376,12 @@ const UI = {
  *    VIEWDRAG
  * ------v------*/
 
-    toggleViewDrag() {
+    // toggleViewDrag() {
-        if (!UI.rfb) return;
+    //     if (!UI.rfb) return;
 
-        UI.rfb.dragViewport = !UI.rfb.dragViewport;
+    //     UI.rfb.dragViewport = !UI.rfb.dragViewport;
-        UI.updateViewDrag();
+    //     // 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_LONGPRESS_TIMEOUT = 1000;
 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 @@ 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 +437,61 @@ export default class GestureHandler {
         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 @@ export default class GestureHandler {
                 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) {

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@novnc/novnc",
+  "name": "@agilicus/novnc",
   "version": "1.4.0",
   "description": "An HTML5 VNC client",
   "browser": "lib/rfb",
@@ -23,7 +23,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/novnc/noVNC.git"
+    "url": "git+https://github.com/agilicus/noVNC.git"
   },
   "author": "Joel Martin <github@martintribe.org> (https://github.com/kanaka)",
   "contributors": [

vnc.html

@@ -71,9 +71,9 @@
             <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"> -->
 
             <!--noVNC Touch Device only buttons-->
             <div id="noVNC_mobile_buttons">
@@ -324,7 +324,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