From b2f1961a3a78d98648459827c6868bf500bb9943 Mon Sep 17 00:00:00 2001 From: Samuel Mannehed Date: Tue, 25 Jun 2013 17:45:43 +0200 Subject: [PATCH 1/4] to make double clicking on touch devices easier a double click is now triggered when two mouse clicks occur within 500 milli seconds and closer than 50 pixels together --- include/input.js | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/include/input.js b/include/input.js index b996c7d5..05d05f1a 100644 --- a/include/input.js +++ b/include/input.js @@ -1,6 +1,7 @@ /* * noVNC: HTML5 VNC client * Copyright (C) 2012 Joel Martin + * Copyright (C) 2013 Samuel Mannehed for Cendio AB * Licensed under MPL 2.0 or any later version (see LICENSE.txt) */ @@ -489,6 +490,9 @@ var that = {}, // Public API methods conf = {}, // Configuration attributes mouseCaptured = false; +var doubleClickTimer = null, + lastClickPos = null; + // Configuration attributes Util.conf_defaults(conf, that, defaults, [ ['target', 'ro', 'dom', document, 'DOM element that captures mouse input'], @@ -521,6 +525,10 @@ function releaseMouse() { // Private functions // +function resetDoubleClickTimer() { + doubleClickTimer = null; +} + function onMouseButton(e, down) { var evt, pos, bmask; if (! conf.focused) { @@ -528,6 +536,28 @@ function onMouseButton(e, down) { } evt = (e ? e : window.event); pos = Util.getEventPosition(e, conf.target, conf.scale); + + // When two clicks occur within 500 ms of each other and are + // closer than 50 pixels together a double click is triggered. + if (down == 1) { + if (doubleClickTimer == null) { + lastClickPos = pos; + } else { + clearTimeout(doubleClickTimer); + + var xs = lastClickPos.x - pos.x; + var ys = lastClickPos.y - pos.y; + var d = Math.sqrt((xs * xs) + (ys * ys)); + + // When the distance between the two clicks is less than 50 pixels + // force the position of the latter click to the position of the first + if (d < 50) { + pos = lastClickPos; + } + } + doubleClickTimer = setTimeout(resetDoubleClickTimer, 500); + } + if (e.touches || e.changedTouches) { // Touch device bmask = conf.touchButton; From a4ec2f5c7db27bbbe6376264b840e477ed4dd297 Mon Sep 17 00:00:00 2001 From: samhed Date: Wed, 3 Jul 2013 14:41:09 +0200 Subject: [PATCH 2/4] Limited the double click fix to touch devices. --- include/input.js | 44 ++++++++++++++++++++++---------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/include/input.js b/include/input.js index 05d05f1a..b286a496 100644 --- a/include/input.js +++ b/include/input.js @@ -491,7 +491,7 @@ var that = {}, // Public API methods mouseCaptured = false; var doubleClickTimer = null, - lastClickPos = null; + lastTouchPos = null; // Configuration attributes Util.conf_defaults(conf, that, defaults, [ @@ -537,29 +537,29 @@ function onMouseButton(e, down) { evt = (e ? e : window.event); pos = Util.getEventPosition(e, conf.target, conf.scale); - // When two clicks occur within 500 ms of each other and are - // closer than 50 pixels together a double click is triggered. - if (down == 1) { - if (doubleClickTimer == null) { - lastClickPos = pos; - } else { - clearTimeout(doubleClickTimer); - - var xs = lastClickPos.x - pos.x; - var ys = lastClickPos.y - pos.y; - var d = Math.sqrt((xs * xs) + (ys * ys)); - - // When the distance between the two clicks is less than 50 pixels - // force the position of the latter click to the position of the first - if (d < 50) { - pos = lastClickPos; - } - } - doubleClickTimer = setTimeout(resetDoubleClickTimer, 500); - } - if (e.touches || e.changedTouches) { // Touch device + + // When two touches occur within 500 ms of each other and are + // closer than 50 pixels together a double click is triggered. + if (down == 1) { + if (doubleClickTimer == null) { + lastTouchPos = pos; + } else { + clearTimeout(doubleClickTimer); + + var xs = lastTouchPos.x - pos.x; + var ys = lastTouchPos.y - pos.y; + var d = Math.sqrt((xs * xs) + (ys * ys)); + + // When the distance between the two touches is less than 50 pixels + // force the position of the latter touch to the position of the first + if (d < 50) { + pos = lastTouchPos; + } + } + doubleClickTimer = setTimeout(resetDoubleClickTimer, 500); + } bmask = conf.touchButton; // If bmask is set } else if (evt.which) { From cf19ad37980449eb0a2dbc6714b68abd52a95f29 Mon Sep 17 00:00:00 2001 From: samhed Date: Mon, 8 Jul 2013 17:10:04 +0200 Subject: [PATCH 3/4] * Changed the trigger distance between touches from 50 to 20. * The trigger distance now takes devicePixelRatio into account. --- include/input.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/include/input.js b/include/input.js index b286a496..dd16fa51 100644 --- a/include/input.js +++ b/include/input.js @@ -541,20 +541,25 @@ function onMouseButton(e, down) { // Touch device // When two touches occur within 500 ms of each other and are - // closer than 50 pixels together a double click is triggered. + // closer than 20 pixels together a double click is triggered. if (down == 1) { if (doubleClickTimer == null) { lastTouchPos = pos; } else { clearTimeout(doubleClickTimer); + // When the distance between the two touches is less than + // 20 physical pixels force the position of the latter touch + // to the position of the first. + var xs = lastTouchPos.x - pos.x; var ys = lastTouchPos.y - pos.y; var d = Math.sqrt((xs * xs) + (ys * ys)); - // When the distance between the two touches is less than 50 pixels - // force the position of the latter touch to the position of the first - if (d < 50) { + // The devicePixelRatio is the ratio between logical pixels and + // physical pixels. A devicePixelRatio of 2 means that the + // physical linear resolution is double the logical resolution. + if (d < 20 * window.devicePixelRatio) { pos = lastTouchPos; } } From c6ad20992dddb05b5a76d335bd7008d2d96f72a6 Mon Sep 17 00:00:00 2001 From: samhed Date: Thu, 11 Jul 2013 12:37:01 +0200 Subject: [PATCH 4/4] Improved comments --- include/input.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/include/input.js b/include/input.js index dd16fa51..efd865ac 100644 --- a/include/input.js +++ b/include/input.js @@ -548,17 +548,16 @@ function onMouseButton(e, down) { } else { clearTimeout(doubleClickTimer); - // When the distance between the two touches is less than - // 20 physical pixels force the position of the latter touch - // to the position of the first. + // When the distance between the two touches is small enough + // force the position of the latter touch to the position of + // the first. var xs = lastTouchPos.x - pos.x; var ys = lastTouchPos.y - pos.y; var d = Math.sqrt((xs * xs) + (ys * ys)); - // The devicePixelRatio is the ratio between logical pixels and - // physical pixels. A devicePixelRatio of 2 means that the - // physical linear resolution is double the logical resolution. + // The goal is to trigger on a certain physical width, the + // devicePixelRatio brings us a bit closer but is not optimal. if (d < 20 * window.devicePixelRatio) { pos = lastTouchPos; }