fix(data): Correct onover/out callback on touch (#769)

- Re-arranged touch event binding calles - Refactored setOver() to handle over & out functionality Fix #768 Close #769
naver · Feb 14, 2019 · 9ad9817 · 9ad9817
1 parent e37c47f
commit 9ad9817
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 24 deletions.
diff --git a/spec/interactions/interaction-spec.js b/spec/interactions/interaction-spec.js
@@ -568,7 +568,7 @@ describe("INTERACTION", () => {
 			});
 
 			it("showed each data points tooltip?", done => {
-				util.simulator(chart.internal.svg.node(), {
+				util.simulator(chart.$.svg.node(), {
 					pos: [250,150],
 					deltaX: -200,
 					deltaY: 0,
@@ -580,4 +580,62 @@ describe("INTERACTION", () => {
 			});
 		});
 	});
+
+	describe("check for data.over/out", () => {
+		const spy1 = sinon.spy();
+		const spy2 = sinon.spy();
+
+		before(() => {
+			args = {
+				data: {
+					columns: [
+						["data1", 10, 20, 30],
+						["data2", 20, 10, 25]
+					],
+					type: "bar",
+					onover: spy1,
+					onout: spy2
+				},
+				interaction: {
+					inputType: {
+						mouse: true
+					}
+				}
+			};
+		});
+
+		beforeEach(() => {
+			spy1.resetHistory();
+			spy2.resetHistory();
+		});
+
+		it("should be called callbacks for mouse events", () => {
+			const main = chart.$.main;
+			const eventRect = main.select(`.${CLASS.eventRect}-1`).node();
+
+			util.fireEvent(eventRect, "mouseover");
+			util.fireEvent(eventRect, "mouseout");
+
+			expect(spy1.calledTwice).to.be.true;
+			expect(spy2.calledTwice).to.be.true;
+		});
+
+		it("set options interaction.inputType.touch=true", () => {
+			args.interaction.inputType.touch = true;
+		});
+
+		it("should be called callbacks for touch events", done => {
+			util.simulator(chart.$.svg.node(), {
+				pos: [250,150],
+				deltaX: -100,
+				deltaY: 0,
+				duration: 500,
+			}, () => {
+				expect(spy1.callCount).to.be.equal(4);
+				expect(spy2.calledTwice).to.be.true;
+
+				done();
+			});
+		});
+	});
 });
diff --git a/src/interactions/interaction.js b/src/interactions/interaction.js
@@ -10,7 +10,7 @@ import {
 import {drag as d3Drag} from "d3-drag";
 import ChartInternal from "../internals/ChartInternal";
 import CLASS from "../config/classes";
-import {emulateEvent, extend, isBoolean} from "../internals/util";
+import {emulateEvent, extend, isBoolean, isNumber} from "../internals/util";
 
 extend(ChartInternal.prototype, {
 	/**
@@ -84,6 +84,7 @@ extend(ChartInternal.prototype, {
 	bindTouchOnEventRect(isMultipleX) {
 		const $$ = this;
 		const config = $$.config;
+		let lastRectIndex;
 
 		const getEventRect = () => {
 			const touch = d3Event.changedTouches[0];
@@ -102,14 +103,24 @@ extend(ChartInternal.prototype, {
 			return index;
 		};
 
+		// call onover/onout callback for touch event
+		const callOverOut = index => {
+			if (index !== lastRectIndex) {
+				isNumber(lastRectIndex) && $$.setOverOut(lastRectIndex, false);
+				isNumber(index) && $$.setOverOut(index, true);
+
+				lastRectIndex = index;
+			}
+		};
+
 		const selectRect = context => {
 			if (isMultipleX) {
 				$$.selectRectForMultipleXs(context);
 			} else {
 				const eventRect = getEventRect();
 				const index = getIndex(eventRect);
 
-				$$.setOver(index);
+				callOverOut(index);
 
 				index === -1 ?
 					$$.unselectRect() :
@@ -161,6 +172,7 @@ extend(ChartInternal.prototype, {
 					selectRect(this);
 				} else {
 					$$.unselectRect();
+					callOverOut();
 				}
 			})
 			.on("touchend.eventRect", () => {
@@ -169,16 +181,7 @@ extend(ChartInternal.prototype, {
 				if (!eventRect.empty() && eventRect.classed(CLASS.eventRect)) {
 					if ($$.hasArcType() || !$$.toggleShape || $$.cancelClick) {
 						$$.cancelClick && ($$.cancelClick = false);
-
-						return;
 					}
-
-					// Call event handler
-					const index = getIndex(eventRect);
-
-					!isMultipleX && index !== -1 &&
-					$$.main.selectAll(`.${CLASS.shape}-${index}`)
-						.each(d2 => config.data_onout.call($$.api, d2));
 				}
 			});
 	},
@@ -400,15 +403,17 @@ extend(ChartInternal.prototype, {
 		$$.unexpandBars();
 	},
 
-	setOver(index) {
+	setOverOut(index, isOver) {
 		const $$ = this;
 		const config = $$.config;
 
-		$$.expandCirclesBars(index, null, true);
-
 		// Call event handler
-		index !== -1 && $$.main.selectAll(`.${CLASS.shape}-${index}`)
-			.each(d2 => config.data_onover.call($$.api, d2));
+		if (index !== -1) {
+			isOver && $$.expandCirclesBars(index, null, true);
+			const callback = config[isOver ? "data_onover" : "data_onout"].bind($$.api);
+
+			!$$.isMultipleX() && $$.main.selectAll(`.${CLASS.shape}-${index}`).each(callback);
+		}
 	},
 
 	/**
@@ -454,7 +459,7 @@ extend(ChartInternal.prototype, {
 						return;
 					}
 
-					$$.setOver(d.index);
+					$$.setOverOut(d.index, true);
 				})
 				.on("mousemove", function(d) {
 					// do nothing while dragging/flowing
@@ -481,13 +486,8 @@ extend(ChartInternal.prototype, {
 						return;
 					}
 
-					const index = d.index;
-
 					$$.unselectRect();
-
-					// Call event handler
-					$$.main.selectAll(`.${CLASS.shape}-${index}`)
-						.each(d2 => config.data_onout.call($$.api, d2));
+					$$.setOverOut(d.index, false);
 				});
 		}