From a9d88b84f90ad33238f7681134a35e505e5a5edc Mon Sep 17 00:00:00 2001 From: Jakub Osika Date: Sat, 22 Oct 2016 23:38:28 +0200 Subject: [PATCH 1/3] Touch support for tooltip - Android --- src/factories/Container.ts | 13 +++++++++---- src/factories/Tooltip.ts | 1 + src/utils/EventManager.ts | 3 ++- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/factories/Container.ts b/src/factories/Container.ts index cd8e86d2..489b404e 100644 --- a/src/factories/Container.ts +++ b/src/factories/Container.ts @@ -61,6 +61,9 @@ module n3Charts.Factory { element.addEventListener('mouseout', (event) => { eventMgr.triggerDataAndOptions.apply(eventMgr, ['container-out', event]); }); + element.addEventListener('touchstart', function (event) { + eventMgr.triggerDataAndOptions.apply(eventMgr, ['container-tap', event]); + }); } getCoordinatesFromEvent(event): ICoordinates { @@ -69,11 +72,13 @@ module n3Charts.Factory { var {left, top} = event.currentTarget.getBoundingClientRect(); var xScale = (this.factoryMgr.get('x-axis')); - var x = xScale.invert(event.clientX - left - dim.margin.left); - + var clientX = event.clientX || event.touches[0].clientX + var x = xScale.invert(clientX - left - dim.margin.left); + var yScale = (this.factoryMgr.get('y-axis')); - var y = yScale.invert(event.clientY - top - dim.margin.top); - + var clientY = event.clientY || event.touches[0].clientY + var y = yScale.invert(clientY - top - dim.margin.top); + return {y, x}; } diff --git a/src/factories/Tooltip.ts b/src/factories/Tooltip.ts index 01728112..27c38122 100644 --- a/src/factories/Tooltip.ts +++ b/src/factories/Tooltip.ts @@ -29,6 +29,7 @@ module n3Charts.Factory { this.createTooltip(); this.eventMgr.on('container-move.tooltip', this.show.bind(this)); this.eventMgr.on('container-out.tooltip', this.hide.bind(this)); + this.eventMgr.on('container-tap.tooltip', this.show.bind(this)); this.eventMgr.on('outer-world-hover.tooltip', this.showFromCoordinates.bind(this)); this.hide(); diff --git a/src/utils/EventManager.ts b/src/utils/EventManager.ts index 667e41ea..1a9482ed 100644 --- a/src/utils/EventManager.ts +++ b/src/utils/EventManager.ts @@ -30,6 +30,7 @@ module n3Charts.Utils { 'container-over', // on mouse over on the container 'container-move', // on mouse move on the container + 'container-tap', // on tap on the container 'container-out', // on mouse out on the container 'focus', // on focus of a data point from a snappy tooltip @@ -163,7 +164,7 @@ module n3Charts.Utils { })(d3.event), 300); } }); - + return selection; } } From b8e3c7e20cd2d9c9aa9ce9e54c0d20e1d2233b4a Mon Sep 17 00:00:00 2001 From: Jakub Osika Date: Sun, 23 Oct 2016 16:23:26 +0200 Subject: [PATCH 2/3] Touch support for pan - Android --- src/factories/Pan.ts | 35 +++++++++++++++++++++++++++++++---- src/utils/EventManager.ts | 12 +++++++++++- 2 files changed, 42 insertions(+), 5 deletions(-) diff --git a/src/factories/Pan.ts b/src/factories/Pan.ts index f453c2b7..a25b9318 100644 --- a/src/factories/Pan.ts +++ b/src/factories/Pan.ts @@ -77,10 +77,27 @@ module n3Charts.Factory { this.eventMgr.on(k('window-mouseup'), null); this.eventMgr.on(k('window-mousemove'), null); }; - - let onMouseMove = () => { + + let onTouchEnd = () => { + if (this.hasMoved) { + this.eventMgr.trigger('pan-end'); + } + if (turnBackOn) { + turnBackOn(); + } + this.isActive = this.hasMoved = false; + turnBackOn = undefined; + this.eventMgr.on(k('window-touchend'), null); + this.eventMgr.on(k('window-touchmove'), null); + }; + + let onMove = () => { if (this.isActive) { - let [xEnd, yEnd] = d3.mouse(container.svg.node()); + let eventCoordinate = d3.touches(container.svg.node())[0]; + if(eventCoordinate === undefined){ + eventCoordinate = d3.mouse(container.svg.node()); + } + let [xEnd, yEnd] = eventCoordinate; let newDomains = this.getNewDomains( xStart - xEnd, xStart - xEnd, @@ -117,9 +134,19 @@ module n3Charts.Factory { this.isActive = true; [xStart, yStart] = d3.mouse(event.currentTarget); this.eventMgr.on(k('window-mouseup'), onMouseUp); - this.eventMgr.on(k('window-mousemove'), onMouseMove); + this.eventMgr.on(k('window-mousemove'), onMove); } }); + + container.svg + .on(k('touchstart'), () => { + var event = d3.event; + + this.isActive = true; + [xStart, yStart] = d3.touches(event.currentTarget)[0]; + this.eventMgr.on(k('window-touchend'), onTouchEnd); + this.eventMgr.on(k('window-touchmove'), onMove); + }); } } } diff --git a/src/utils/EventManager.ts b/src/utils/EventManager.ts index 1a9482ed..929d3f5a 100644 --- a/src/utils/EventManager.ts +++ b/src/utils/EventManager.ts @@ -48,6 +48,8 @@ module n3Charts.Utils { 'window-mouseup', 'window-mousemove', + 'window-touchend', + 'window-touchmove' ]; init(events:string[]): EventManager { @@ -65,7 +67,15 @@ module n3Charts.Utils { // (d3.event).preventDefault(); this.trigger('window-mousemove') }); - + d3.select(window).on('touchmove.' + id, () => { + (d3.event).preventDefault(); + this.trigger('window-touchmove'); + }); + d3.select(window).on('touchend.' + id, () => { + (d3.event).preventDefault(); + this.trigger('window-touchend'); + }); + // Support chaining return this; } From 82f95bd43b2d044f30eb3b82088389e1ad9c7b16 Mon Sep 17 00:00:00 2001 From: Jakub Osika Date: Sun, 23 Oct 2016 17:15:47 +0200 Subject: [PATCH 3/3] Touch support for double click - Android --- src/utils/EventManager.ts | 34 ++++++++++++++++++++++++++++++---- 1 file changed, 30 insertions(+), 4 deletions(-) diff --git a/src/utils/EventManager.ts b/src/utils/EventManager.ts index 929d3f5a..35da0391 100644 --- a/src/utils/EventManager.ts +++ b/src/utils/EventManager.ts @@ -144,9 +144,10 @@ module n3Charts.Utils { // That would be so cool to have native dblclick support in D3... listenForDblClick(selection: d3.Selection, callback: Function, listenerSuffix:string): d3.Selection { let down, + up, tolerance = 5, - last, - wait = null; + wait = null, + touchWait = null; let dist = (a:number[], b:number[]):number => { return Math.sqrt(Math.pow(a[0] - b[0], 2) + Math.pow(a[1] - b[1], 2)); @@ -154,7 +155,11 @@ module n3Charts.Utils { selection.on('mousedown.dbl.' + listenerSuffix, function() { down = d3.mouse(document.body); - last = new Date().getTime(); + }); + + selection.on('touchstart.dbl.' + listenerSuffix, function () { + down = d3.touches(document.body)[0]; + up = d3.touches(document.body)[0]; }); selection.on('mouseup.dbl.' + listenerSuffix, () => { @@ -172,9 +177,30 @@ module n3Charts.Utils { wait = null; }; })(d3.event), 300); - } + }; }); + selection.on('touchmove.dbl.' + listenerSuffix, function () { + up = d3.touches(document.body)[0]; + }); + + selection.on('touchend.dbl.' + listenerSuffix, () => { + if (!down || dist(down, up) > tolerance) { + return; + } + if (touchWait && this.options.doubleClickEnabled) { + window.clearTimeout(touchWait); + touchWait = null; + callback(d3.event); + } else { + touchWait = window.setTimeout((function(e) { + return function() { + touchWait = null; + }; + })(d3.event), 300); + } + }); + return selection; } }