fix(zoom): Fix incorrect tooltip position

- Update eventReceiver.coords during 'wheel' zoom - Fix tooltip position, to use correct zoom scale Fix #2095
naver · May 27, 2021 · 689bfdf · 689bfdf
1 parent 037ee7a
commit 689bfdf
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 19 deletions.
diff --git a/src/ChartInternal/interactions/zoom.ts b/src/ChartInternal/interactions/zoom.ts
@@ -191,9 +191,10 @@ export default {
 		}
 
 		// if click, do nothing. otherwise, click interaction will be canceled.
-		if (!startEvent ||
-			(e && startEvent.clientX === e.clientX && startEvent.clientY === e.clientY)
-		) {
+		if (config.zoom_type === "drag" && (
+			!startEvent ||
+				(e && startEvent.clientX === e.clientX && startEvent.clientY === e.clientY)
+		)) {
 			return;
 		}
 

diff --git a/src/ChartInternal/internals/tooltip.ts b/src/ChartInternal/internals/tooltip.ts
@@ -290,7 +290,7 @@ export default {
 				chartRight -= svgLeft;
 			} else {
 				y -= 5;
-				x = svgLeft + chartLeft + size + ($$.zoomScale ? x : dataScale);
+				x = svgLeft + chartLeft + size + ($$.scale.zoom ? x : dataScale);
 			}
 		}
 

diff --git a/test/interactions/zoom-spec.ts b/test/interactions/zoom-spec.ts
@@ -273,21 +273,21 @@ describe("ZOOM", function() {
 
 			["x", "y"].forEach(id => {
 				const domain = orgDomain[id];
-
+				
 				expect(
 					chart.internal.scale[id].domain()
-						.every((v, i) => i > 0 ? v < domain[i] : v > domain[i])
-				).to.be.true;
-			});
-
-			// when zoom out
-			util.fireEvent(eventRect, "wheel", {
-				deltaX: 0,
-				deltaY: 100,
-				clientX: 159,
-				clientY: 137
-			});
-
+					.every((v, i) => i > 0 ? v < domain[i] : v > domain[i])
+					).to.be.true;
+				});
+				
+				// when zoom out
+				util.fireEvent(eventRect, "wheel", {
+					deltaX: 0,
+					deltaY: 100,
+					clientX: 159,
+					clientY: 137
+				});
+				
 			["x", "y"].forEach(id => {
 				const domain = orgDomain[id];
 
@@ -313,6 +313,34 @@ describe("ZOOM", function() {
 
 				done();
 			}, 300);
+		});
+
+		it("should eventReceiver size to be updated", done => {
+			const {internal: {$el, state: {eventReceiver}}} = chart;
+			const eventRect = $el.eventRect.node();
+			const {w} = eventReceiver.coords[1];
+
+			// tooltip position
+			chart.tooltip.show({x:2});
+			const tooltipLeft = parseInt(chart.$.tooltip.style("left"), 10);
+			chart.tooltip.hide();
+
+			// when zoom in
+			util.fireEvent(eventRect, "wheel", {
+				deltaX: 0,
+				deltaY: -100,
+				clientX: 159,
+				clientY: 137
+			});
+
+			setTimeout(() => {
+				expect(eventReceiver.coords[1].w).to.be.greaterThan(w);
+
+				chart.tooltip.show({x:2});
+				expect(parseInt(chart.$.tooltip.style("left"), 10)).to.be.below(tooltipLeft);
+
+				done();
+			}, 500);
 		})
 	});
 
@@ -780,7 +808,7 @@ describe("ZOOM", function() {
 			util.fireEvent(eventRect.node(), "wheel", {
 				deltaX: 0,
 				deltaY: -200,
-				clientX: 159,
+				clientX: 259,
 				clientY: 137
 			});
 

diff --git a/test/internals/tooltip-spec.ts b/test/internals/tooltip-spec.ts
@@ -297,7 +297,7 @@ describe("TOOLTIP", function() {
 				const left = Math.floor(+tooltipContainer.style("left").replace(/px/, ""));
 				const tooltipPos = {
 					top: 95,
-					left: 60
+					left: 110
 				};
 
 				expect(top).to.be.equal(tooltipPos.top);