fix(internal): Fix on unexpected resize event firing (#572)

The call of getBoundingClientRect on elements with visibility:hidden w/o defining position, can possibly cause 'resize' event. Fix #571 Close #572
naver · Aug 31, 2018 · dd5af9c · dd5af9c
1 parent 6b81526
commit dd5af9c
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 27 deletions.
diff --git a/spec/internals/bb-spec.js b/spec/internals/bb-spec.js
@@ -166,7 +166,9 @@ describe("Interface & initialization", () => {
 			container.style.width = width + "px";
 
 			// run the resize handler
-			d3.select(window).on("resize.bb")();
+			chart.internal.api.internal.charts.forEach(c => {
+				c.internal.resizeFunction();
+			});
 
 			setTimeout(() => {
 				expect(+chart1.internal.svg.attr("width")).to.be.equal(width);

diff --git a/src/api/api.chart.js b/src/api/api.chart.js
@@ -2,7 +2,6 @@
  * Copyright (c) 2017 NAVER Corp.
  * billboard.js project is licensed under the MIT license
  */
-import {select as d3Select} from "d3-selection";
 import Chart from "../internals/Chart";
 import {window} from "../internals/browser";
 import {notEmpty, isDefined, extend} from "../internals/util";
@@ -77,7 +76,7 @@ extend(Chart.prototype, {
 			// clear timers
 			isDefined($$.resizeTimeout) && window.clearTimeout($$.resizeTimeout);
 
-			d3Select(window).on("resize.bb", null);
+			window.removeEventListener("resize", $$.resizeFunction);
 			$$.selectChart.classed("bb", false).html("");
 
 			// releasing references

diff --git a/src/axis/Axis.js b/src/axis/Axis.js
@@ -418,7 +418,10 @@ export default class Axis {
 			!isYAxis && this.updateXAxisTickValues(targetsToShow, axis);
 
 			const dummy = $$.selectChart.append("svg")
-				.style("visibility", "hidden");
+				.style("visibility", "hidden")
+				.style("position", "fixed")
+				.style("top", "0px")
+				.style("left", "0px");
 
 			dummy.call(axis).selectAll("text")
 				.each(function() {

diff --git a/src/internals/ChartInternal.js b/src/internals/ChartInternal.js
@@ -18,7 +18,7 @@ import {transition as d3Transition} from "d3-transition";
 
 import Axis from "../axis/Axis";
 import CLASS from "../config/classes";
-import {notEmpty, asHalfPixel, getOption, isValue, isArray, isFunction, isDefined, isString, isNumber, isObject, callFn} from "./util";
+import {notEmpty, asHalfPixel, getOption, isValue, isArray, isFunction, isString, isNumber, isObject, callFn} from "./util";
 
 /**
  * Internal chart class.
@@ -1124,24 +1124,19 @@ export default class ChartInternal {
 
 		if (config.resize_auto) {
 			$$.resizeFunction.add(() => {
-				isDefined($$.resizeTimeout) &&
+				if ($$.resizeTimeout) {
 					window.clearTimeout($$.resizeTimeout);
+					$$.resizeTimeout = null;
+				}
 
-				$$.resizeTimeout = window.setTimeout(() => {
-					delete $$.resizeTimeout;
-					$$.api.flush();
-				}, 100);
+				$$.resizeTimeout = window.setTimeout($$.api.flush, 100);
 			});
 		}
 
 		$$.resizeFunction.add(() => config.onresized.call($$));
 
 		// attach resize event
-		// get the possible previous attached
-		const resizeEvents = d3Select(window).on("resize.bb");
-
-		resizeEvents && $$.resizeFunction.add(resizeEvents);
-		d3Select(window).on("resize.bb", $$.resizeFunction);
+		window.addEventListener("resize", $$.resizeFunction);
 	}
 
 	generateResize() {
@@ -1151,18 +1146,8 @@ export default class ChartInternal {
 			resizeFunctions.forEach(f => f());
 		}
 
-		callResizeFunctions.add = function(f) {
-			resizeFunctions.push(f);
-		};
-
-		callResizeFunctions.remove = function(f) {
-			for (let i = 0, len = resizeFunctions.length; i < len; i++) {
-				if (resizeFunctions[i] === f) {
-					resizeFunctions.splice(i, 1);
-					break;
-				}
-			}
-		};
+		callResizeFunctions.add = f => resizeFunctions.push(f);
+		callResizeFunctions.remove = f => resizeFunctions.splice(resizeFunctions.indexOf(f), 1);
 
 		return callResizeFunctions;
 	}