fix(tooltip): Fix tooltip work on touch zoom

- Make tooltip touch event binding to be 'capture', because d3-zoom stops event propagation. - Fix on event rect element redraw for touch environment. Fix #1056
naver · Sep 2, 2019 · 5d98187 · 5d98187
1 parent 7210bc4
commit 5d98187
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 8 deletions.
diff --git a/spec/interactions/interaction-spec.js b/spec/interactions/interaction-spec.js
@@ -798,6 +798,28 @@ describe("INTERACTION", () => {
 					done();
 				});
 			});
+
+			it("set options zoom.enabled=true", () => {
+				args.zoom = {enabled: true};
+			});
+
+			it("showed each data points tooltip?", done => {
+				chart.tooltip.show({x:1});
+
+				chart.$.tooltip.selectAll(".value").each(function(d, i) {
+					expect(+this.innerHTML).to.be.equal(args.data.columns[i][2]);
+				});
+
+				util.simulator(chart.$.svg.node(), {
+					pos: [250,150],
+					deltaX: -200,
+					deltaY: 0,
+					duration: 500,
+				}, () => {
+					expect(selection).to.deep.equal([5, 4, 3, 2, 1, 0]);
+					done();
+				});
+			});
 		});
 	});
 

diff --git a/src/interactions/interaction.js b/src/interactions/interaction.js
@@ -158,19 +158,21 @@ extend(ChartInternal.prototype, {
 		$$.svg
 			.on("touchstart.eventRect touchmove.eventRect", function() {
 				const eventRect = getEventRect();
+				const event = d3Event;
 
 				if (!eventRect.empty() && eventRect.classed(CLASS.eventRect)) {
-					if ($$.dragging || $$.flowing || $$.hasArcType()) {
+					// if touch points are > 1, means doing zooming interaction. In this case do not execute tooltip codes.
+					if ($$.dragging || $$.flowing || $$.hasArcType() || event.touches.length > 1) {
 						return;
 					}
 
-					preventEvent(d3Event);
+					preventEvent(event);
 					selectRect(this);
 				} else {
 					$$.unselectRect();
 					$$.callOverOutForTouch();
 				}
-			})
+			}, true)
 			.on("touchend.eventRect", () => {
 				const eventRect = getEventRect();
 
@@ -179,7 +181,7 @@ extend(ChartInternal.prototype, {
 						$$.cancelClick && ($$.cancelClick = false);
 					}
 				}
-			});
+			}, true);
 	},
 
 	/**

diff --git a/src/interactions/zoom.js b/src/interactions/zoom.js
@@ -137,17 +137,19 @@ extend(ChartInternal.prototype, {
 		const $$ = this;
 		const config = $$.config;
 		const event = d3Event;
+		const sourceEvent = event.sourceEvent;
 
 		if (
 			!config.zoom_enabled ||
 			!event.sourceEvent ||
-			$$.filterTargetsToShow($$.data.targets).length === 0
+			$$.filterTargetsToShow($$.data.targets).length === 0 ||
+			(!$$.zoomScale && sourceEvent.type.indexOf("touch") > -1 && sourceEvent.touches.length === 1)
 		) {
 			return;
 		}
 
-		const isMousemove = event.sourceEvent.type === "mousemove";
-		const isZoomOut = event.sourceEvent.wheelDelta < 0;
+		const isMousemove = sourceEvent.type === "mousemove";
+		const isZoomOut = sourceEvent.wheelDelta < 0;
 		const transform = event.transform;
 
 		if (!isMousemove && isZoomOut && $$.x.domain().every((v, i) => v !== $$.orgXDomain[i])) {
@@ -178,7 +180,13 @@ extend(ChartInternal.prototype, {
 	 */
 	onZoomEnd() {
 		const $$ = this;
-		const startEvent = $$.zoom.startEvent;
+		let startEvent = $$.zoom.startEvent;
+		let event = d3Event && d3Event.sourceEvent;
+
+		if ((startEvent && startEvent.type.indexOf("touch") > -1)) {
+			startEvent = startEvent.changedTouches[0];
+			event = event.changedTouches[0];
+		}
 
 		// if click, do nothing. otherwise, click interaction will be canceled.
 		if (!startEvent ||