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 /*jslint browser: true, white: false */
   9 /*global window, Util */
  10
  11 import * as Log from '../util/logging.js';
  12 import { isTouchDevice } from '../util/browsers.js';
  13 import { setCapture, stopEvent, getPointerEvent } from '../util/events.js';
  14 import { set_defaults, make_properties } from '../util/properties.js';
  15
  16 var WHEEL_STEP = 10; // Delta threshold for a mouse wheel step
  17 var WHEEL_STEP_TIMEOUT = 50; // ms
  18 var WHEEL_LINE_HEIGHT = 19;
  19
  20 export default function Mouse(defaults) {
  21
  22     this._doubleClickTimer = null;
  23     this._lastTouchPos = null;
  24
  25     this._pos = null;
  26     this._wheelStepXTimer = null;
  27     this._wheelStepYTimer = null;
  28     this._accumulatedWheelDeltaX = 0;
  29     this._accumulatedWheelDeltaY = 0;
  30
  31     // Configuration attributes
  32     set_defaults(this, defaults, {
  33         'target': document,
  34         'touchButton': 1
  35     });
  36
  37     this._eventHandlers = {
  38         'mousedown': this._handleMouseDown.bind(this),
  39         'mouseup': this._handleMouseUp.bind(this),
  40         'mousemove': this._handleMouseMove.bind(this),
  41         'mousewheel': this._handleMouseWheel.bind(this),
  42         'mousedisable': this._handleMouseDisable.bind(this)
  43     };
  44 };
  45
  46 Mouse.prototype = {
  47     // private methods
  48
  49     _resetDoubleClickTimer: function () {
  50         this._doubleClickTimer = null;
  51     },
  52
  53     _handleMouseButton: function (e, down) {
  54         this._updateMousePosition(e);
  55         var pos = this._pos;
  56
  57         var 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                     var xs = this._lastTouchPos.x - pos.x;
  74                     var ys = this._lastTouchPos.y - pos.y;
  75                     var 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                     var 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         if (this._onMouseButton) {
  99             Log.Debug("onMouseButton " + (down ? "down" : "up") +
 100                       ", x: " + pos.x + ", y: " + pos.y + ", bmask: " + bmask);
 101             this._onMouseButton(pos.x, pos.y, down, bmask);
 102         }
 103         stopEvent(e);
 104     },
 105
 106     _handleMouseDown: function (e) {
 107         // Touch events have implicit capture
 108         if (e.type === "mousedown") {
 109             setCapture(this._target);
 110         }
 111
 112         this._handleMouseButton(e, 1);
 113     },
 114
 115     _handleMouseUp: function (e) {
 116         this._handleMouseButton(e, 0);
 117     },
 118
 119     // Mouse wheel events are sent in steps over VNC. This means that the VNC
 120     // protocol can't handle a wheel event with specific distance or speed.
 121     // Therefor, if we get a lot of small mouse wheel events we combine them.
 122     _generateWheelStepX: function () {
 123
 124         if (this._accumulatedWheelDeltaX < 0) {
 125             this._onMouseButton(this._pos.x, this._pos.y, 1, 1 << 5);
 126             this._onMouseButton(this._pos.x, this._pos.y, 0, 1 << 5);
 127         } else if (this._accumulatedWheelDeltaX > 0) {
 128             this._onMouseButton(this._pos.x, this._pos.y, 1, 1 << 6);
 129             this._onMouseButton(this._pos.x, this._pos.y, 0, 1 << 6);
 130         }
 131
 132         this._accumulatedWheelDeltaX = 0;
 133     },
 134
 135     _generateWheelStepY: function () {
 136
 137         if (this._accumulatedWheelDeltaY < 0) {
 138             this._onMouseButton(this._pos.x, this._pos.y, 1, 1 << 3);
 139             this._onMouseButton(this._pos.x, this._pos.y, 0, 1 << 3);
 140         } else if (this._accumulatedWheelDeltaY > 0) {
 141             this._onMouseButton(this._pos.x, this._pos.y, 1, 1 << 4);
 142             this._onMouseButton(this._pos.x, this._pos.y, 0, 1 << 4);
 143         }
 144
 145         this._accumulatedWheelDeltaY = 0;
 146     },
 147
 148     _resetWheelStepTimers: function () {
 149         window.clearTimeout(this._wheelStepXTimer);
 150         window.clearTimeout(this._wheelStepYTimer);
 151         this._wheelStepXTimer = null;
 152         this._wheelStepYTimer = null;
 153     },
 154
 155     _handleMouseWheel: function (e) {
 156         if (!this._onMouseButton) { return; }
 157
 158         this._resetWheelStepTimers();
 159
 160         this._updateMousePosition(e);
 161
 162         var dX = e.deltaX;
 163         var dY = e.deltaY;
 164
 165         // Pixel units unless it's non-zero.
 166         // Note that if deltamode is line or page won't matter since we aren't
 167         // sending the mouse wheel delta to the server anyway.
 168         // The difference between pixel and line can be important however since
 169         // we have a threshold that can be smaller than the line height.
 170         if (e.deltaMode !== 0) {
 171             dX *= WHEEL_LINE_HEIGHT;
 172             dY *= WHEEL_LINE_HEIGHT;
 173         }
 174
 175         this._accumulatedWheelDeltaX += dX;
 176         this._accumulatedWheelDeltaY += dY;
 177
 178         // Generate a mouse wheel step event when the accumulated delta
 179         // for one of the axes is large enough.
 180         // Small delta events that do not pass the threshold get sent
 181         // after a timeout.
 182         if (Math.abs(this._accumulatedWheelDeltaX) > WHEEL_STEP) {
 183             this._generateWheelStepX();
 184         } else {
 185             this._wheelStepXTimer =
 186                 window.setTimeout(this._generateWheelStepX.bind(this),
 187                                   WHEEL_STEP_TIMEOUT);
 188         }
 189         if (Math.abs(this._accumulatedWheelDeltaY) > WHEEL_STEP) {
 190             this._generateWheelStepY();
 191         } else {
 192             this._wheelStepYTimer =
 193                 window.setTimeout(this._generateWheelStepY.bind(this),
 194                                   WHEEL_STEP_TIMEOUT);
 195         }
 196
 197         stopEvent(e);
 198     },
 199
 200     _handleMouseMove: function (e) {
 201         this._updateMousePosition(e);
 202         if (this._onMouseMove) {
 203             this._onMouseMove(this._pos.x, this._pos.y);
 204         }
 205         stopEvent(e);
 206     },
 207
 208     _handleMouseDisable: function (e) {
 209         /*
 210          * Stop propagation if inside canvas area
 211          * Note: This is only needed for the 'click' event as it fails
 212          *       to fire properly for the target element so we have
 213          *       to listen on the document element instead.
 214          */
 215         if (e.target == this._target) {
 216             stopEvent(e);
 217         }
 218     },
 219
 220     // Update coordinates relative to target
 221     _updateMousePosition: function(e) {
 222         e = getPointerEvent(e);
 223         var bounds = this._target.getBoundingClientRect();
 224         var x, y;
 225         // Clip to target bounds
 226         if (e.clientX < bounds.left) {
 227             x = 0;
 228         } else if (e.clientX >= bounds.right) {
 229             x = bounds.width - 1;
 230         } else {
 231             x = e.clientX - bounds.left;
 232         }
 233         if (e.clientY < bounds.top) {
 234             y = 0;
 235         } else if (e.clientY >= bounds.bottom) {
 236             y = bounds.height - 1;
 237         } else {
 238             y = e.clientY - bounds.top;
 239         }
 240         this._pos = {x:x, y:y};
 241     },
 242
 243     // Public methods
 244     grab: function () {
 245         var c = this._target;
 246
 247         if (isTouchDevice) {
 248             c.addEventListener('touchstart', this._eventHandlers.mousedown);
 249             c.addEventListener('touchend', this._eventHandlers.mouseup);
 250             c.addEventListener('touchmove', this._eventHandlers.mousemove);
 251         }
 252         c.addEventListener('mousedown', this._eventHandlers.mousedown);
 253         c.addEventListener('mouseup', this._eventHandlers.mouseup);
 254         c.addEventListener('mousemove', this._eventHandlers.mousemove);
 255         c.addEventListener('wheel', this._eventHandlers.mousewheel);
 256
 257         /* Prevent middle-click pasting (see above for why we bind to document) */
 258         document.addEventListener('click', this._eventHandlers.mousedisable);
 259
 260         /* preventDefault() on mousedown doesn't stop this event for some
 261            reason so we have to explicitly block it */
 262         c.addEventListener('contextmenu', this._eventHandlers.mousedisable);
 263     },
 264
 265     ungrab: function () {
 266         var c = this._target;
 267
 268         this._resetWheelStepTimers();
 269
 270         if (isTouchDevice) {
 271             c.removeEventListener('touchstart', this._eventHandlers.mousedown);
 272             c.removeEventListener('touchend', this._eventHandlers.mouseup);
 273             c.removeEventListener('touchmove', this._eventHandlers.mousemove);
 274         }
 275         c.removeEventListener('mousedown', this._eventHandlers.mousedown);
 276         c.removeEventListener('mouseup', this._eventHandlers.mouseup);
 277         c.removeEventListener('mousemove', this._eventHandlers.mousemove);
 278         c.removeEventListener('wheel', this._eventHandlers.mousewheel);
 279
 280         document.removeEventListener('click', this._eventHandlers.mousedisable);
 281
 282         c.removeEventListener('contextmenu', this._eventHandlers.mousedisable);
 283     }
 284 };
 285
 286 make_properties(Mouse, [
 287     ['target',         'ro', 'dom'],   // DOM element that captures mouse input
 288
 289     ['onMouseButton',  'rw', 'func'],  // Handler for mouse button click/release
 290     ['onMouseMove',    'rw', 'func'],  // Handler for mouse movement
 291     ['touchButton',    'rw', 'int']    // Button mask (1, 2, 4) for touch devices (0 means ignore clicks)
 292 ]);