core/input/mouse.js

   1 /*
   2  * noVNC: HTML5 VNC client
   3  * Copyright (C) 2012 Joel Martin
   4  * Copyright (C) 2013 Samuel Mannehed for Cendio AB
   5  * Licensed under MPL 2.0 or any later version (see LICENSE.txt)
   6  */
   7
   8 import * as Log from '../util/logging.js';
   9 import { isTouchDevice } from '../util/browser.js';
  10 import { setCapture, stopEvent, getPointerEvent } from '../util/events.js';
  11
  12 const WHEEL_STEP = 10; // Delta threshold for a mouse wheel step
  13 const WHEEL_STEP_TIMEOUT = 50; // ms
  14 const WHEEL_LINE_HEIGHT = 19;
  15
  16 export default class Mouse {
  17     constructor(target) {
  18         this._target = target || document;
  19
  20         this._doubleClickTimer = null;
  21         this._lastTouchPos = null;
  22
  23         this._pos = null;
  24         this._wheelStepXTimer = null;
  25         this._wheelStepYTimer = null;
  26         this._accumulatedWheelDeltaX = 0;
  27         this._accumulatedWheelDeltaY = 0;
  28
  29         this._eventHandlers = {
  30             'mousedown': this._handleMouseDown.bind(this),
  31             'mouseup': this._handleMouseUp.bind(this),
  32             'mousemove': this._handleMouseMove.bind(this),
  33             'mousewheel': this._handleMouseWheel.bind(this),
  34             'mousedisable': this._handleMouseDisable.bind(this)
  35         };
  36
  37         // ===== PROPERTIES =====
  38
  39         this.touchButton = 1;                 // Button mask (1, 2, 4) for touch devices (0 means ignore clicks)
  40
  41         // ===== EVENT HANDLERS =====
  42
  43         this.onmousebutton = () => {}; // Handler for mouse button click/release
  44         this.onmousemove = () => {}; // Handler for mouse movement
  45     }
  46
  47     // ===== PRIVATE METHODS =====
  48
  49     _resetDoubleClickTimer() {
  50         this._doubleClickTimer = null;
  51     }
  52
  53     _handleMouseButton(e, down) {
  54         this._updateMousePosition(e);
  55         let pos = this._pos;
  56
  57         let bmask;
  58         if (e.touches || e.changedTouches) {
  59             // Touch device
  60
  61             // When two touches occur within 500 ms of each other and are
  62             // close enough together a double click is triggered.
  63             if (down == 1) {
  64                 if (this._doubleClickTimer === null) {
  65                     this._lastTouchPos = pos;
  66                 } else {
  67                     clearTimeout(this._doubleClickTimer);
  68
  69                     // When the distance between the two touches is small enough
  70                     // force the position of the latter touch to the position of
  71                     // the first.
  72
  73                     const xs = this._lastTouchPos.x - pos.x;
  74                     const ys = this._lastTouchPos.y - pos.y;
  75                     const d = Math.sqrt((xs * xs) + (ys * ys));
  76
  77                     // The goal is to trigger on a certain physical width, the
  78                     // devicePixelRatio brings us a bit closer but is not optimal.
  79                     const threshold = 20 * (window.devicePixelRatio || 1);
  80                     if (d < threshold) {
  81                         pos = this._lastTouchPos;
  82                     }
  83                 }
  84                 this._doubleClickTimer = setTimeout(this._resetDoubleClickTimer.bind(this), 500);
  85             }
  86             bmask = this.touchButton;
  87             // If bmask is set
  88         } else if (e.which) {
  89             /* everything except IE */
  90             bmask = 1 << e.button;
  91         } else {
  92             /* IE including 9 */
  93             bmask = (e.button & 0x1) +      // Left
  94                     (e.button & 0x2) * 2 +  // Right
  95                     (e.button & 0x4) / 2;   // Middle
  96         }
  97
  98         Log.Debug("onmousebutton " + (down ? "down" : "up") +
  99                   ", x: " + pos.x + ", y: " + pos.y + ", bmask: " + bmask);
 100         this.onmousebutton(pos.x, pos.y, down, bmask);
 101
 102         stopEvent(e);
 103     }
 104
 105     _handleMouseDown(e) {
 106         // Touch events have implicit capture
 107         if (e.type === "mousedown") {
 108             setCapture(this._target);
 109         }
 110
 111         this._handleMouseButton(e, 1);
 112     }
 113
 114     _handleMouseUp(e) {
 115         this._handleMouseButton(e, 0);
 116     }
 117
 118     // Mouse wheel events are sent in steps over VNC. This means that the VNC
 119     // protocol can't handle a wheel event with specific distance or speed.
 120     // Therefor, if we get a lot of small mouse wheel events we combine them.
 121     _generateWheelStepX() {
 122
 123         if (this._accumulatedWheelDeltaX < 0) {
 124             this.onmousebutton(this._pos.x, this._pos.y, 1, 1 << 5);
 125             this.onmousebutton(this._pos.x, this._pos.y, 0, 1 << 5);
 126         } else if (this._accumulatedWheelDeltaX > 0) {
 127             this.onmousebutton(this._pos.x, this._pos.y, 1, 1 << 6);
 128             this.onmousebutton(this._pos.x, this._pos.y, 0, 1 << 6);
 129         }
 130
 131         this._accumulatedWheelDeltaX = 0;
 132     }
 133
 134     _generateWheelStepY() {
 135
 136         if (this._accumulatedWheelDeltaY < 0) {
 137             this.onmousebutton(this._pos.x, this._pos.y, 1, 1 << 3);
 138             this.onmousebutton(this._pos.x, this._pos.y, 0, 1 << 3);
 139         } else if (this._accumulatedWheelDeltaY > 0) {
 140             this.onmousebutton(this._pos.x, this._pos.y, 1, 1 << 4);
 141             this.onmousebutton(this._pos.x, this._pos.y, 0, 1 << 4);
 142         }
 143
 144         this._accumulatedWheelDeltaY = 0;
 145     }
 146
 147     _resetWheelStepTimers() {
 148         window.clearTimeout(this._wheelStepXTimer);
 149         window.clearTimeout(this._wheelStepYTimer);
 150         this._wheelStepXTimer = null;
 151         this._wheelStepYTimer = null;
 152     }
 153
 154     _handleMouseWheel(e) {
 155         this._resetWheelStepTimers();
 156
 157         this._updateMousePosition(e);
 158
 159         let dX = e.deltaX;
 160         let dY = e.deltaY;
 161
 162         // Pixel units unless it's non-zero.
 163         // Note that if deltamode is line or page won't matter since we aren't
 164         // sending the mouse wheel delta to the server anyway.
 165         // The difference between pixel and line can be important however since
 166         // we have a threshold that can be smaller than the line height.
 167         if (e.deltaMode !== 0) {
 168             dX *= WHEEL_LINE_HEIGHT;
 169             dY *= WHEEL_LINE_HEIGHT;
 170         }
 171
 172         this._accumulatedWheelDeltaX += dX;
 173         this._accumulatedWheelDeltaY += dY;
 174
 175         // Generate a mouse wheel step event when the accumulated delta
 176         // for one of the axes is large enough.
 177         // Small delta events that do not pass the threshold get sent
 178         // after a timeout.
 179         if (Math.abs(this._accumulatedWheelDeltaX) > WHEEL_STEP) {
 180             this._generateWheelStepX();
 181         } else {
 182             this._wheelStepXTimer =
 183                 window.setTimeout(this._generateWheelStepX.bind(this),
 184                                   WHEEL_STEP_TIMEOUT);
 185         }
 186         if (Math.abs(this._accumulatedWheelDeltaY) > WHEEL_STEP) {
 187             this._generateWheelStepY();
 188         } else {
 189             this._wheelStepYTimer =
 190                 window.setTimeout(this._generateWheelStepY.bind(this),
 191                                   WHEEL_STEP_TIMEOUT);
 192         }
 193
 194         stopEvent(e);
 195     }
 196
 197     _handleMouseMove(e) {
 198         this._updateMousePosition(e);
 199         this.onmousemove(this._pos.x, this._pos.y);
 200         stopEvent(e);
 201     }
 202
 203     _handleMouseDisable(e) {
 204         /*
 205          * Stop propagation if inside canvas area
 206          * Note: This is only needed for the 'click' event as it fails
 207          *       to fire properly for the target element so we have
 208          *       to listen on the document element instead.
 209          */
 210         if (e.target == this._target) {
 211             stopEvent(e);
 212         }
 213     }
 214
 215     // Update coordinates relative to target
 216     _updateMousePosition(e) {
 217         e = getPointerEvent(e);
 218         const bounds = this._target.getBoundingClientRect();
 219         let x;
 220         let y;
 221         // Clip to target bounds
 222         if (e.clientX < bounds.left) {
 223             x = 0;
 224         } else if (e.clientX >= bounds.right) {
 225             x = bounds.width - 1;
 226         } else {
 227             x = e.clientX - bounds.left;
 228         }
 229         if (e.clientY < bounds.top) {
 230             y = 0;
 231         } else if (e.clientY >= bounds.bottom) {
 232             y = bounds.height - 1;
 233         } else {
 234             y = e.clientY - bounds.top;
 235         }
 236         this._pos = {x:x, y:y};
 237     }
 238
 239     // ===== PUBLIC METHODS =====
 240
 241     grab() {
 242         const c = this._target;
 243
 244         if (isTouchDevice) {
 245             c.addEventListener('touchstart', this._eventHandlers.mousedown);
 246             c.addEventListener('touchend', this._eventHandlers.mouseup);
 247             c.addEventListener('touchmove', this._eventHandlers.mousemove);
 248         }
 249         c.addEventListener('mousedown', this._eventHandlers.mousedown);
 250         c.addEventListener('mouseup', this._eventHandlers.mouseup);
 251         c.addEventListener('mousemove', this._eventHandlers.mousemove);
 252         c.addEventListener('wheel', this._eventHandlers.mousewheel);
 253
 254         /* Prevent middle-click pasting (see above for why we bind to document) */
 255         document.addEventListener('click', this._eventHandlers.mousedisable);
 256
 257         /* preventDefault() on mousedown doesn't stop this event for some
 258            reason so we have to explicitly block it */
 259         c.addEventListener('contextmenu', this._eventHandlers.mousedisable);
 260     }
 261
 262     ungrab() {
 263         const c = this._target;
 264
 265         this._resetWheelStepTimers();
 266
 267         if (isTouchDevice) {
 268             c.removeEventListener('touchstart', this._eventHandlers.mousedown);
 269             c.removeEventListener('touchend', this._eventHandlers.mouseup);
 270             c.removeEventListener('touchmove', this._eventHandlers.mousemove);
 271         }
 272         c.removeEventListener('mousedown', this._eventHandlers.mousedown);
 273         c.removeEventListener('mouseup', this._eventHandlers.mouseup);
 274         c.removeEventListener('mousemove', this._eventHandlers.mousemove);
 275         c.removeEventListener('wheel', this._eventHandlers.mousewheel);
 276
 277         document.removeEventListener('click', this._eventHandlers.mousedisable);
 278
 279         c.removeEventListener('contextmenu', this._eventHandlers.mousedisable);
 280     }
 281 }