From daa133a049dbfb1411b43741e27e73b653270c91 Mon Sep 17 00:00:00 2001 From: James Shore Date: Fri, 24 Feb 2017 12:22:36 -0800 Subject: [PATCH 1/4] Instrument touch events --- src/client/ui/client.js | 76 ++++++++++++++++++++++++++++------------- 1 file changed, 53 insertions(+), 23 deletions(-) diff --git a/src/client/ui/client.js b/src/client/ui/client.js index 559c89e13..d2d57c79f 100644 --- a/src/client/ui/client.js +++ b/src/client/ui/client.js @@ -49,16 +49,64 @@ network = realTimeConnection; ghostPointerElements = {}; - network.connect(window.location.port); - handlePointerMovement(); - handleClearScreenAction(); - handleDrawing(); + clearScreenButton.toDomElement() debugEl = HtmlElement.appendHtmlToBody( - "

DEBUG

" + "

DEBUG

" ).toDomElement(); + + // documentBody.onMouseMove(function(coordinate) { + // debug("BODY, MOUSE MOVE: " + coordinate); + // }); + // documentBody.onSingleTouchMove(function(coordinate) { + // debug("BODY, TOUCH MOVE: " + coordinate); + // }); + // documentBody.onTouchEnd(function(coordinate) { + // debug("BODY, TOUCH END: " + coordinate); + // }); + documentBody.onMouseDown(function(coordinate) { + debug("BODY, MOUSE DOWN: " + coordinate); + }); + documentBody.onMouseUp(function(coordinate) { + debug("BODY, MOUSE UP: " + coordinate); + }); + documentBody.onMouseClick(function(coordinate) { + debug("BODY, MOUSE CLICK: " + coordinate); + }); + + // clearScreenButton.onMouseMove(function(coordinate) { + // debug("CLEAR BUTTON, MOUSE MOVE: " + coordinate); + // }); + clearScreenButton.onSingleTouchStart(function(coordinate) { + debug("CLEAR BUTTON, TOUCH START: " + coordinate); + }); + clearScreenButton.onSingleTouchMove(function(coordinate) { + debug("CLEAR BUTTON, TOUCH MOVE: " + coordinate); + }); + clearScreenButton.onTouchEnd(function(coordinate) { + debug("CLEAR BUTTON, TOUCH END: " + coordinate); + }); + clearScreenButton.onMouseDown(function(coordinate) { + debug("CLEAR BUTTON, MOUSE DOWN: " + coordinate); + }); + clearScreenButton.onMouseUp(function(coordinate) { + debug("CLEAR BUTTON, MOUSE UP: " + coordinate); + }); + clearScreenButton.onMouseClick(function(coordinate) { + debug("CLEAR BUTTON, MOUSE CLICK: " + coordinate); + }); + + + + + // network.connect(window.location.port); + // + // handlePointerMovement(); + // handleClearScreenAction(); + // handleDrawing(); + return svgCanvas; }; @@ -80,29 +128,11 @@ drawingArea.onTouchEnd(sendRemovePointerEvent); network.onEvent(ServerPointerEvent, displayNetworkPointer); network.onEvent(ServerRemovePointerEvent, removeNetworkPointer); - - - drawingArea.onSingleTouchMove(function(coordinate) { - debug("ON SINGLE TOUCH MOVE: " + coordinate); - }); - drawingArea.onTouchEnd(function(coordinate) { - debug("ON SINGLE TOUCH END: " + coordinate); - }); - documentBody.onMouseMove(function(coordinate) { - debug("ON MOUSE MOVE: " + coordinate); - }); - clearScreenButton.onTouchEnd(function(coordinate) { - debug("CLEAR BUTTON, TOUCH END: " + coordinate); - }); - - } function sendPointerEvent(coordinate) { - debug("SEND POINTER EVENT: " + coordinate); - var relativeOffset = coordinate.toRelativeOffset(drawingArea); network.sendEvent(new ClientPointerEvent(relativeOffset.x, relativeOffset.y)); } From 68d2253b71bec5b59e2864866f447eb2120cb6d1 Mon Sep 17 00:00:00 2001 From: James Shore Date: Fri, 24 Feb 2017 12:55:37 -0800 Subject: [PATCH 2/4] Spike 'touch click' handler --- src/client/ui/client.js | 46 ++++++++++++++++++++++++++++++----------- 1 file changed, 34 insertions(+), 12 deletions(-) diff --git a/src/client/ui/client.js b/src/client/ui/client.js index d2d57c79f..fb42aa7ea 100644 --- a/src/client/ui/client.js +++ b/src/client/ui/client.js @@ -50,22 +50,44 @@ ghostPointerElements = {}; - clearScreenButton.toDomElement() + var clearEl = clearScreenButton.toDomElement() debugEl = HtmlElement.appendHtmlToBody( "

DEBUG

" ).toDomElement(); + function onTouchClick(element, doSomething) { + var clickInProgress; + element.addEventListener("touchstart", function(event) { + if (event.touches.length !== 1) return; + debug("TOUCH-CLICK STARTING"); + + event.preventDefault(); + + clickInProgress = true; + }); + element.addEventListener("touchend", function(event) { + if (!clickInProgress) return; + debug("TOUCH-CLICK ENDING") + + clickInProgress = false; + doSomething(); + }); + } + onTouchClick(clearEl, function() { + debug("CLEAR ELEMENT, TOUCH-CLICKED"); + }); + // documentBody.onMouseMove(function(coordinate) { // debug("BODY, MOUSE MOVE: " + coordinate); // }); - // documentBody.onSingleTouchMove(function(coordinate) { - // debug("BODY, TOUCH MOVE: " + coordinate); - // }); - // documentBody.onTouchEnd(function(coordinate) { - // debug("BODY, TOUCH END: " + coordinate); - // }); + documentBody.onSingleTouchMove(function(coordinate) { + debug("BODY, TOUCH MOVE: " + coordinate); + }); + documentBody.onTouchEnd(function(coordinate) { + debug("BODY, TOUCH END: " + coordinate); + }); documentBody.onMouseDown(function(coordinate) { debug("BODY, MOUSE DOWN: " + coordinate); }); @@ -101,11 +123,11 @@ - // network.connect(window.location.port); - // - // handlePointerMovement(); - // handleClearScreenAction(); - // handleDrawing(); + network.connect(window.location.port); + + handlePointerMovement(); + handleClearScreenAction(); + handleDrawing(); return svgCanvas; }; From 311d01828e972d3577ed3fdfec3bb47fa6866e09 Mon Sep 17 00:00:00 2001 From: James Shore Date: Fri, 24 Feb 2017 13:22:55 -0800 Subject: [PATCH 3/4] Cancel 'touch click' event when finger moves off of button --- src/client/ui/client.js | 37 +++++++++++++++++++++++++------- src/client/ui/html_coordinate.js | 10 +++++++++ src/client/ui/html_element.js | 6 ++++++ 3 files changed, 45 insertions(+), 8 deletions(-) diff --git a/src/client/ui/client.js b/src/client/ui/client.js index fb42aa7ea..b30137775 100644 --- a/src/client/ui/client.js +++ b/src/client/ui/client.js @@ -59,29 +59,50 @@ function onTouchClick(element, doSomething) { var clickInProgress; - element.addEventListener("touchstart", function(event) { + var lastLocation; + var elementDom = element.toDomElement(); + elementDom.addEventListener("touchstart", function(event) { if (event.touches.length !== 1) return; debug("TOUCH-CLICK STARTING"); event.preventDefault(); clickInProgress = true; + lastLocation = HtmlCoordinate.fromPageOffset(event.touches[0].pageX, event.touches[0].pageY); + }); - element.addEventListener("touchend", function(event) { + elementDom.addEventListener("touchmove", function(event) { if (!clickInProgress) return; - debug("TOUCH-CLICK ENDING") + if (event.touches.length !== 1) return; + + lastLocation = HtmlCoordinate.fromPageOffset(event.touches[0].pageX, event.touches[0].pageY); + }); + elementDom.addEventListener("touchend", function(event) { + if (!clickInProgress) return; + debug("TOUCH-CLICK ENDING"); clickInProgress = false; - doSomething(); + + if (element.isMyCoordinate(lastLocation)) { + debug("TOUCH-CLICK SUCCESS"); + doSomething(); + } + else { + debug("TOUCH-CLICK CANCELLED"); + } + }); + elementDom.addEventListener("touchcancel", function(event) { + clickInProgress = false; }); } - onTouchClick(clearEl, function() { + onTouchClick(clearScreenButton, function() { debug("CLEAR ELEMENT, TOUCH-CLICKED"); }); - // documentBody.onMouseMove(function(coordinate) { - // debug("BODY, MOUSE MOVE: " + coordinate); - // }); + documentBody.onMouseMove(function(coordinate) { + debug("BODY, MOUSE MOVE: " + coordinate); + debug(clearScreenButton.isMyCoordinate(coordinate) ? "OVER CLEAR BUTTON" : "NOT OVER CLEAR BUTTON"); + }); documentBody.onSingleTouchMove(function(coordinate) { debug("BODY, TOUCH MOVE: " + coordinate); }); diff --git a/src/client/ui/html_coordinate.js b/src/client/ui/html_coordinate.js index 8265ab1fc..0c2f42dd6 100644 --- a/src/client/ui/html_coordinate.js +++ b/src/client/ui/html_coordinate.js @@ -20,6 +20,16 @@ }; }; + HtmlCoordinate.prototype.toViewportOffset = function(htmlElement) { + failFastIfStylingPresent(htmlElement); + + var scroll = scrollOffset(htmlElement); + return { + x: this._pageX - scroll.x, + y: this._pageY - scroll.y + }; + }; + HtmlCoordinate.fromRelativeOffset = function(htmlElement, relativeX, relativeY) { failFastIfStylingPresent(htmlElement); diff --git a/src/client/ui/html_element.js b/src/client/ui/html_element.js index dfd6aacaa..48dd4aca0 100644 --- a/src/client/ui/html_element.js +++ b/src/client/ui/html_element.js @@ -310,6 +310,12 @@ /* Position and Dimensions */ + HtmlElement.prototype.isMyCoordinate = function(coordinate) { + var offset = coordinate.toViewportOffset(this); + var element = document.elementFromPoint(offset.x, offset.y); + return element === this.toDomElement(); + } + HtmlElement.prototype.getPosition = function() { return HtmlCoordinate.fromRelativeOffset(this, 0, 0); }; From 7cf6bd788a81f87d2ea351b8ddf34466279422a6 Mon Sep 17 00:00:00 2001 From: James Shore Date: Fri, 24 Feb 2017 13:25:35 -0800 Subject: [PATCH 4/4] Wire up 'onTouchClick' spike to clear button--it works --- src/client/ui/client.js | 78 +++++++++++++++++++++-------------------- 1 file changed, 40 insertions(+), 38 deletions(-) diff --git a/src/client/ui/client.js b/src/client/ui/client.js index b30137775..5307842ca 100644 --- a/src/client/ui/client.js +++ b/src/client/ui/client.js @@ -57,44 +57,6 @@ ).toDomElement(); - function onTouchClick(element, doSomething) { - var clickInProgress; - var lastLocation; - var elementDom = element.toDomElement(); - elementDom.addEventListener("touchstart", function(event) { - if (event.touches.length !== 1) return; - debug("TOUCH-CLICK STARTING"); - - event.preventDefault(); - - clickInProgress = true; - lastLocation = HtmlCoordinate.fromPageOffset(event.touches[0].pageX, event.touches[0].pageY); - - }); - elementDom.addEventListener("touchmove", function(event) { - if (!clickInProgress) return; - if (event.touches.length !== 1) return; - - lastLocation = HtmlCoordinate.fromPageOffset(event.touches[0].pageX, event.touches[0].pageY); - }); - elementDom.addEventListener("touchend", function(event) { - if (!clickInProgress) return; - debug("TOUCH-CLICK ENDING"); - - clickInProgress = false; - - if (element.isMyCoordinate(lastLocation)) { - debug("TOUCH-CLICK SUCCESS"); - doSomething(); - } - else { - debug("TOUCH-CLICK CANCELLED"); - } - }); - elementDom.addEventListener("touchcancel", function(event) { - clickInProgress = false; - }); - } onTouchClick(clearScreenButton, function() { debug("CLEAR ELEMENT, TOUCH-CLICKED"); }); @@ -153,6 +115,45 @@ return svgCanvas; }; + function onTouchClick(element, doSomething) { + var clickInProgress; + var lastLocation; + var elementDom = element.toDomElement(); + elementDom.addEventListener("touchstart", function(event) { + if (event.touches.length !== 1) return; + debug("TOUCH-CLICK STARTING"); + + event.preventDefault(); + + clickInProgress = true; + lastLocation = HtmlCoordinate.fromPageOffset(event.touches[0].pageX, event.touches[0].pageY); + + }); + elementDom.addEventListener("touchmove", function(event) { + if (!clickInProgress) return; + if (event.touches.length !== 1) return; + + lastLocation = HtmlCoordinate.fromPageOffset(event.touches[0].pageX, event.touches[0].pageY); + }); + elementDom.addEventListener("touchend", function(event) { + if (!clickInProgress) return; + debug("TOUCH-CLICK ENDING"); + + clickInProgress = false; + + if (element.isMyCoordinate(lastLocation)) { + debug("TOUCH-CLICK SUCCESS"); + doSomething(); + } + else { + debug("TOUCH-CLICK CANCELLED"); + } + }); + elementDom.addEventListener("touchcancel", function(event) { + clickInProgress = false; + }); + } + exports.drawingAreaHasBeenRemovedFromDom = function() { svgCanvas = null; }; @@ -206,6 +207,7 @@ function handleClearScreenAction() { clearScreenButton.onMouseClick(clearDrawingAreaAndSendEvent); + onTouchClick(clearScreenButton, clearDrawingAreaAndSendEvent); network.onEvent(ServerClearScreenEvent, clearDrawingArea); }