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 var WHEEL_STEP = 10; // Delta threshold for a mouse wheel step
  13 var WHEEL_STEP_TIMEOUT = 50; // ms
  14 var WHEEL_LINE_HEIGHT = 19;
  15
  16 export default function Mouse(target) {
  17     this._target = target || document;
  18
  19     this._doubleClickTimer = null;
  20     this._lastTouchPos = null;
  21
  22     this._pos = null;
  23     this._wheelStepXTimer = null;
  24     this._wheelStepYTimer = null;
  25     this._accumulatedWheelDeltaX = 0;
  26     this._accumulatedWheelDeltaY = 0;
  27
  28     this._eventHandlers = {
  29         'mousedown': this._handleMouseDown.bind(this),
  30         'mouseup': this._handleMouseUp.bind(this),
  31         'mousemove': this._handleMouseMove.bind(this),
  32         'mousewheel': this._handleMouseWheel.bind(this),
  33         'mousedisable': this._handleMouseDisable.bind(this)
  34     };
  35 }
  36
  37 Mouse.prototype = {
  38     // ===== PROPERTIES =====
  39
  40     touchButton: 1,                 // Button mask (1, 2, 4) for touch devices (0 means ignore clicks)
  41
  42     // ===== EVENT HANDLERS =====
  43
  44     onmousebutton: function () {},  // Handler for mouse button click/release
  45     onmousemove: function () {},    // Handler for mouse movement
  46
  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         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: function (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: function (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: function () {
 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: function () {
 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: function () {
 148         window.clearTimeout(this._wheelStepXTimer);
 149         window.clearTimeout(this._wheelStepYTimer);
 150         this._wheelStepXTimer = null;
 151         this._wheelStepYTimer = null;
 152     },
 153
 154     _handleMouseWheel: function (e) {
 155         this._resetWheelStepTimers();
 156
 157         this._updateMousePosition(e);
 158
 159         var dX = e.deltaX;
 160         var 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: function (e) {
 198         this._updateMousePosition(e);
 199         this.onmousemove(this._pos.x, this._pos.y);
 200         stopEvent(e);
 201     },
 202
 203     _handleMouseDisable: function (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: function(e) {
 217         e = getPointerEvent(e);
 218         var bounds = this._target.getBoundingClientRect();
 219         var x, y;
 220         // Clip to target bounds
 221         if (e.clientX < bounds.left) {
 222             x = 0;
 223         } else if (e.clientX >= bounds.right) {
 224             x = bounds.width - 1;
 225         } else {
 226             x = e.clientX - bounds.left;
 227         }
 228         if (e.clientY < bounds.top) {
 229             y = 0;
 230         } else if (e.clientY >= bounds.bottom) {
 231             y = bounds.height - 1;
 232         } else {
 233             y = e.clientY - bounds.top;
 234         }
 235         this._pos = {x:x, y:y};
 236     },
 237
 238     // ===== PUBLIC METHODS =====
 239
 240     grab: function () {
 241         var c = this._target;
 242
 243         if (isTouchDevice) {
 244             c.addEventListener('touchstart', this._eventHandlers.mousedown);
 245             c.addEventListener('touchend', this._eventHandlers.mouseup);
 246             c.addEventListener('touchmove', this._eventHandlers.mousemove);
 247         }
 248         c.addEventListener('mousedown', this._eventHandlers.mousedown);
 249         c.addEventListener('mouseup', this._eventHandlers.mouseup);
 250         c.addEventListener('mousemove', this._eventHandlers.mousemove);
 251         c.addEventListener('wheel', this._eventHandlers.mousewheel);
 252
 253         /* Prevent middle-click pasting (see above for why we bind to document) */
 254         document.addEventListener('click', this._eventHandlers.mousedisable);
 255
 256         /* preventDefault() on mousedown doesn't stop this event for some
 257            reason so we have to explicitly block it */
 258         c.addEventListener('contextmenu', this._eventHandlers.mousedisable);
 259     },
 260
 261     ungrab: function () {
 262         var c = this._target;
 263
 264         this._resetWheelStepTimers();
 265
 266         if (isTouchDevice) {
 267             c.removeEventListener('touchstart', this._eventHandlers.mousedown);
 268             c.removeEventListener('touchend', this._eventHandlers.mouseup);
 269             c.removeEventListener('touchmove', this._eventHandlers.mousemove);
 270         }
 271         c.removeEventListener('mousedown', this._eventHandlers.mousedown);
 272         c.removeEventListener('mouseup', this._eventHandlers.mouseup);
 273         c.removeEventListener('mousemove', this._eventHandlers.mousemove);
 274         c.removeEventListener('wheel', this._eventHandlers.mousewheel);
 275
 276         document.removeEventListener('click', this._eventHandlers.mousedisable);
 277
 278         c.removeEventListener('contextmenu', this._eventHandlers.mousedisable);
 279     }
 280 };