From 689bfdf217923f241e9f5a53dbf03603c0d05562 Mon Sep 17 00:00:00 2001 From: Jae Sung Park <alberto.park@gmail.com> Date: Thu, 27 May 2021 16:14:36 +0900 Subject: [PATCH] fix(zoom): Fix incorrect tooltip position - Update eventReceiver.coords during 'wheel' zoom - Fix tooltip position, to use correct zoom scale Fix #2095 --- src/ChartInternal/interactions/zoom.ts | 7 ++-- src/ChartInternal/internals/tooltip.ts | 2 +- test/interactions/zoom-spec.ts | 56 +++++++++++++++++++------- test/internals/tooltip-spec.ts | 2 +- 4 files changed, 48 insertions(+), 19 deletions(-) diff --git a/src/ChartInternal/interactions/zoom.ts b/src/ChartInternal/interactions/zoom.ts index 05f1c7ce1..5c184a473 100644 --- 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 index 5e6d073c9..fa3e74429 100644 --- 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 index 01d3be22e..09fde3d23 100644 --- 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 index c8843ada6..93b5c8336 100644 --- 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);