fix(subchart): Maintain subchart selection on resize

Adjust subchart selection area when resize happens

Fix #778

spec/interactions/subchart-spec.js

@@ -6,6 +6,7 @@
 /* global describe, beforeEach, it, expect */
 import util from "../assets/util";
 import CLASS from "../../src/config/classes";
+import { doesNotReject } from "assert";
 
 describe("SUBCHART", () => {
 	let chart;
@@ -132,4 +133,54 @@ describe("SUBCHART", () => {
 			expect(chart.internal.clipSubchart).to.be.undefined;
 		})
 	});
+
+	describe("generate sbuchart", () => {
+		before(() => {
+			args = {
+				data: {
+					columns: [
+						["sample", 30, 200, 100, 400, 150, 250]
+					]
+				},
+				subchart: {
+					show: true
+				}
+			};
+		});
+
+
+		it("should be select subchart area", done => {
+			const selection = chart.$.svg.select(".selection");
+			const overlay = chart.$.svg.select(".overlay").node();
+			const baseWidth = 100;
+
+			// do mouse selection
+			util.fireEvent(overlay, "mousedown", {
+				clientX: 50,
+				clientY: 50
+			}, chart);
+
+			util.fireEvent(overlay, "mousemove", {
+				clientX: 150,
+				clientY: 150
+			}, chart);
+
+			util.fireEvent(overlay, "mouseup", {
+				clientX: 150,
+				clientY: 150
+			}, chart);
+
+			expect(+selection.attr("width")).to.be.equal(baseWidth);
+
+			// when
+			chart.resize({width:400});
+
+			// should be maintain zoom area after resize
+			setTimeout(() => {
+				expect(+selection.attr("width")).to.be.below(baseWidth);
+				expect(chart.internal.x.domain()).to.not.deep.equal(chart.internal.orgXDomain);
+				done();
+			}, 300);
+		})
+	});
 });

src/api/api.chart.js

@@ -26,7 +26,7 @@ extend(Chart.prototype, {
 		config.size_width = size ? size.width : null;
 		config.size_height = size ? size.height : null;
 
-		this.flush();
+		this.flush(false, true);
 	},
 
 	/**
@@ -35,16 +35,21 @@ extend(Chart.prototype, {
 	 * @instance
 	 * @memberof Chart
 	 * @param {Boolean} [soft] For soft redraw.
+	 * @param {Boolean} [isFromResize] For soft redraw.
 	 * @example
 	 * chart.flush();
 	 *
 	 * // for soft redraw
 	 * chart.flush(true);
 	 */
-	flush(soft) {
+	flush(soft, isFromResize) {
 		const $$ = this.internal;
 
 		// reset possible zoom scale
+		if (isFromResize) {
+			$$.brush && $$.brush.updateResize();
+		}
+
 		$$.zoomScale = null;
 
 		soft ? $$.redraw({

src/interactions/subchart.js

@@ -8,7 +8,8 @@ import {
 } from "d3-selection";
 import {
 	brushX as d3BrushX,
-	brushY as d3BrushY
+	brushY as d3BrushY,
+	brushSelection as d3BrushSelection
 } from "d3-brush";
 import ChartInternal from "../internals/ChartInternal";
 import CLASS from "../config/classes";
@@ -32,12 +33,28 @@ extend(ChartInternal.prototype, {
 			$$.redrawForBrush();
 		};
 
+		let lastDomain;
+		let timeout;
+
 		$$.brush
 			.on("start", () => {
 				$$.inputType === "touch" && $$.hideTooltip();
 				brushHandler();
 			})
-			.on("brush", brushHandler);
+			.on("brush", brushHandler)
+			.on("end", () => {
+				lastDomain = $$.x.domain();
+			});
+
+		$$.brush.updateResize = function() {
+			timeout && clearTimeout(timeout);
+			timeout = setTimeout(() => {
+				const selection = this.getSelection();
+
+				lastDomain && d3BrushSelection(selection.node()) &&
+					this.move(selection, lastDomain.map($$.subX));
+			}, 0);
+		};
 
 		$$.brush.update = function() {
 			const extent = this.extent()();

src/internals/ChartInternal.js

@@ -231,7 +231,7 @@ export default class ChartInternal {
 
 		// Init sizes and scales
 		$$.updateSizes();
-		$$.updateScales();
+		$$.updateScales(true);
 
 		// Set domains for each scale
 		if ($$.x) {
@@ -1212,7 +1212,9 @@ export default class ChartInternal {
 					$$.resizeTimeout = null;
 				}
 
-				$$.resizeTimeout = window.setTimeout($$.api.flush, 100);
+				$$.resizeTimeout = window.setTimeout(() => {
+					$$.api.flush(false, true);
+				}, 200);
 			});
 		}
 

src/internals/legend.js

@@ -67,7 +67,7 @@ extend(ChartInternal.prototype, {
 
 		// Update size and scale
 		$$.updateSizes();
-		$$.updateScales(!optionz.withTransition);
+		$$.updateScales();
 		$$.updateSvgSize();
 
 		// Update g positions