fix(regions): Fix regions resizing on zoom (#561)

- Use zoomScale when is available - Refactorings on regions dimension methods Fix #483 Close #561
naver · Aug 24, 2018 · c61960d · c61960d
1 parent 9346e66
commit c61960d
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 74 deletions.
diff --git a/spec/interactions/zoom-spec.js b/spec/interactions/zoom-spec.js
@@ -226,4 +226,45 @@ describe("ZOOM", function() {
 		    expect(resetBtn.text()).to.be.equal("test");
 	    });
     });
+
+	describe("zoom on regions", () => {
+		before(() => {
+			args = {
+				zoom: {
+					enabled: {
+						type: "drag"
+					}
+				},
+				data: {
+					columns: [
+						["sample", 30, 200, 100, 400, 150, 250]
+					]
+				},
+				regions: [
+					{
+						start: "1",
+						end: "2"
+					}
+				],
+			};
+		});
+
+		it("region area should be resized on zoom", done => {
+			const regionRect = chart.$.main.select(`.${CLASS.region}-0 rect`);
+			const size = {
+				width: +regionRect.attr("width"),
+				x: +regionRect.attr("x")
+			};
+
+			// when
+			chart.zoom([1,3]);
+
+			setTimeout(() => {
+				expect(+regionRect.attr("width")).to.be.above(size.width);
+				expect(+regionRect.attr("x")).to.be.below(size.x);
+
+				done();
+			}, 500);
+		});
+	});
 });
diff --git a/src/internals/region.js b/src/internals/region.js
@@ -46,18 +46,13 @@ extend(ChartInternal.prototype, {
 
 	redrawRegion(withTransition) {
 		const $$ = this;
-		const x = $$.regionX.bind($$);
-		const y = $$.regionY.bind($$);
-		const w = $$.regionWidth.bind($$);
-		const h = $$.regionHeight.bind($$);
-
 		let regions = $$.mainRegion.select("rect");
 
 		regions = (withTransition ? regions.transition() : regions)
-			.attr("x", x)
-			.attr("y", y)
-			.attr("width", w)
-			.attr("height", h);
+			.attr("x", $$.regionX.bind($$))
+			.attr("y", $$.regionY.bind($$))
+			.attr("width", $$.regionWidth.bind($$))
+			.attr("height", $$.regionHeight.bind($$));
 
 		return [
 			(withTransition ? regions.transition() : regions)
@@ -71,93 +66,73 @@ extend(ChartInternal.prototype, {
 		];
 	},
 
-	regionX(d) {
+	getRegionXY(type, d) {
 		const $$ = this;
 		const config = $$.config;
-		const yScale = d.axis === "y" ? $$.y : $$.y2;
-		let xPos;
+		const isRotated = config.axis_rotated;
+		const isX = type === "x";
+		let key = "start";
+		let scale;
+		let pos = 0;
 
 		if (d.axis === "y" || d.axis === "y2") {
-			xPos = config.axis_rotated ? (
-				"start" in d ? yScale(d.start) : 0
-			) : 0;
-		} else {
-			xPos = config.axis_rotated ? 0 : (
-				"start" in d ? $$.x(
-					$$.isTimeSeries() ? $$.parseDate(d.start) : d.start
-				) : 0
-			);
+			if (!isX) {
+				key = "end";
+			}
+
+			if ((isX ? isRotated : !isRotated) && key in d) {
+				scale = $$[d.axis];
+				pos = scale(d[key]);
+			}
+		} else if ((isX ? !isRotated : isRotated) && key in d) {
+			scale = $$.zoomScale || $$.x;
+			pos = scale($$.isTimeSeries() ? $$.parseDate(d[key]) : d[key]);
 		}
 
-		return xPos;
+		return pos;
 	},
 
-	regionY(d) {
-		const $$ = this;
-		const config = $$.config;
-		const isRotated = config.axis_rotated;
-		const yScale = d.axis === "y" ? $$.y : $$.y2;
-		let yPos;
-
-		if (d.axis === "y" || d.axis === "y2") {
-			yPos = isRotated ? 0 : (
-				"end" in d ? yScale(d.end) : 0
-			);
-		} else {
-			yPos = isRotated ? (
-				"start" in d ? $$.x(
-					$$.isTimeSeries() ? $$.parseDate(d.start) : d.start
-				) : 0
-			) : 0;
-		}
+	regionX(d) {
+		return this.getRegionXY("x", d);
+	},
 
-		return yPos;
+	regionY(d) {
+		return this.getRegionXY("y", d);
 	},
 
-	regionWidth(d) {
+	getRegionSize(type, d) {
 		const $$ = this;
 		const config = $$.config;
 		const isRotated = config.axis_rotated;
-		const yScale = d.axis === "y" ? $$.y : $$.y2;
-		const start = $$.regionX(d);
-		let end;
+		const isWidth = type === "width";
+		const start = $$[isWidth ? "regionX" : "regionY"](d);
+		let scale;
+		let key = "end";
+		let end = $$[type];
 
 		if (d.axis === "y" || d.axis === "y2") {
-			end = isRotated ? (
-				"end" in d ? yScale(d.end) : $$.width
-			) : $$.width;
-		} else {
-			end = isRotated ?
-				$$.width : "end" in d ?
-					$$.x($$.isTimeSeries() ? $$.parseDate(d.end) : d.end) :
-					$$.width;
+			if (!isWidth) {
+				key = "start";
+			}
+
+			if ((isWidth ? isRotated : !isRotated) && key in d) {
+				scale = $$[d.axis];
+				end = scale(d[key]);
+			}
+		} else if ((isWidth ? !isRotated : isRotated) && key in d) {
+			scale = $$.zoomScale || $$.x;
+			end = scale($$.isTimeSeries() ? $$.parseDate(d[key]) : d[key]);
 		}
 
 		return end < start ? 0 : end - start;
 	},
 
-	regionHeight(d) {
-		const $$ = this;
-		const config = $$.config;
-		const isRotated = config.axis_rotated;
-		const start = this.regionY(d);
-		let end;
-		const yScale = d.axis === "y" ? $$.y : $$.y2;
-
-		if (d.axis === "y" || d.axis === "y2") {
-			end = isRotated ?
-				$$.height : (
-					"start" in d ? yScale(d.start) : $$.height
-				);
-		} else {
-			end = isRotated ? (
-				"end" in d ? $$.x(
-					$$.isTimeSeries() ? $$.parseDate(d.end) : d.end
-				) : $$.height
-			) : $$.height;
-		}
+	regionWidth(d) {
+		return this.getRegionSize("width", d);
+	},
 
-		return end < start ? 0 : end - start;
+	regionHeight(d) {
+		return this.getRegionSize("height", d);
 	},
 
 	isRegionOnX(d) {