From 51563b22567018a54711aebbd1f685d183015458 Mon Sep 17 00:00:00 2001
From: netil <netil@netil.local>
Date: Fri, 13 Sep 2024 17:52:02 +0900
Subject: [PATCH] fix(zoom): Fix unzoom after dynamic data load

Fix wrong domain value setting when .load() API is called after zoom and unzoom

Ref #3878
---
 src/ChartInternal/data/load.ts         |  4 ++
 src/ChartInternal/interactions/zoom.ts |  4 +-
 test/interactions/zoom-spec.ts         | 84 +++++++++++++++++++++++++-
 3 files changed, 89 insertions(+), 3 deletions(-)

diff --git a/src/ChartInternal/data/load.ts b/src/ChartInternal/data/load.ts
index 8d9dbb957..44dedbd5b 100644
--- a/src/ChartInternal/data/load.ts
+++ b/src/ChartInternal/data/load.ts
@@ -102,6 +102,10 @@ export default {
 			}
 
 			$$.updateCurrentZoomTransform(zoomState.x, zoomState.currentDomain);
+
+			// https://github.com/naver/billboard.js/issues/3878
+		} else if (org.xScale) {
+			org.xScale.domain(org.xDomain);
 		}
 
 		// Update current state chart type and elements list after redraw
diff --git a/src/ChartInternal/interactions/zoom.ts b/src/ChartInternal/interactions/zoom.ts
index e1db214f5..b67f62da4 100644
--- a/src/ChartInternal/interactions/zoom.ts
+++ b/src/ChartInternal/interactions/zoom.ts
@@ -381,7 +381,7 @@ export default {
 						.attr("height", isRotated ? 0 : state.height);
 				}
 
-				start = getPointer(event, this)[prop.index];
+				start = getPointer(event, <SVGElement>this)[prop.index];
 				end = start;
 
 				zoomRect
@@ -391,7 +391,7 @@ export default {
 				$$.onZoomStart(event);
 			})
 			.on("drag", function(event) {
-				end = getPointer(event, this)[prop.index];
+				end = getPointer(event, <SVGElement>this)[prop.index];
 
 				zoomRect
 					.attr(prop.axis, Math.min(start, end))
diff --git a/test/interactions/zoom-spec.ts b/test/interactions/zoom-spec.ts
index c6c1f6b65..f91f7f161 100644
--- a/test/interactions/zoom-spec.ts
+++ b/test/interactions/zoom-spec.ts
@@ -530,7 +530,7 @@ describe("ZOOM", function() {
 	});
 
 
-	describe("zoom type drag", () => {
+	describe("zoom type drag #1", () => {
 		const spy = sinon.spy();
 		let clickedData;
 
@@ -714,6 +714,88 @@ describe("ZOOM", function() {
 		}));
 	});
 
+	describe("zoom type drag #2: with data loading", () => {
+		const spy = sinon.spy();
+		let clickedData;
+
+		beforeAll(() => {
+			args = {
+				size: {
+					width: 300,
+					height: 250
+				},
+				data: {
+					x: "x",
+					columns: [
+					  ["x", "2013-01-01", "2013-01-02", "2013-01-03", "2013-01-04", "2013-01-05", "2013-01-06"],
+					  ["data1", 30, 200, 100, 400, 150, 250],
+					  ["data2", 130, 340, 200, 500, 250, 350]
+					],
+					type: "line"
+				},
+				zoom: {
+					enabled: true,
+					type: "drag",
+					rescale: true
+				},
+				axis: {
+					x: {
+						type: "timeseries",
+						tick: {
+							format: "%Y-%m-%d"
+						}
+					}
+				}
+			};
+		});
+
+		it("should unzoom with new loaded domain.", () => {
+			let domain;
+
+			// 1) zoom in
+			chart.zoom([
+				"2013-01-01", "2013-01-02"
+			]);
+
+			// 2) unzoom & load new data
+			chart.unzoom();
+			chart.load({
+				columns: [
+				  [
+					"x",
+					"2013-01-01",
+					"2013-01-02",
+					"2013-01-03",
+					"2013-01-04",
+					"2013-01-05",
+					"2013-01-06",
+					"2013-01-07",
+					"2013-01-08",
+					"2013-01-09",
+					"2013-01-10"
+				  ],
+				  ["data1", 30, 200, 100, 400, 150, 250, 200, 200, 200, 200],
+				  ["data2", 130, 340, 200, 500, 250, 350, 300, 300, 300, 300]
+				],
+				done() {
+					domain = this.internal.scale.x.domain();
+				}
+			  });
+
+			// 3) zoom in again
+			chart.zoom([
+				"2013-01-01", "2013-01-02"
+			]);
+
+			// 4) unzoom
+			chart.unzoom();
+
+			// expect to reset with new domain
+			expect(chart.internal.scale.x.domain()).to.be.deep.equal(domain);
+		});
+	});
+	
+
 	describe("zoom on regions", () => {
 		beforeAll(() => {
 			args = {