Memory leak fix (#2273)

* disable bindResize Memory leak source

* add babel config to prevent rollup error

* Major memory leak fix

* unecessary comment

* run dist

* add rollup back to package.json

* remove babelrc

c3.js

@@ -1960,7 +1960,7 @@ c3_chart_internal_fn.bindResize = function () {
     var $$ = this,
         config = $$.config;
 
-    $$.resizeFunction = $$.generateResize();
+    $$.resizeFunction = $$.generateResize(); // need to call .remove
 
     $$.resizeFunction.add(function () {
         config.onresize.call($$);
@@ -1980,10 +1980,19 @@ c3_chart_internal_fn.bindResize = function () {
         config.onresized.call($$);
     });
 
+    $$.resizeIfElementDisplayed = function () {
+        // if element not displayed skip it
+        if ($$.api == null || !$$.api.element.offsetParent) {
+            return;
+        }
+
+        $$.resizeFunction();
+    };
+
     if (window.attachEvent) {
-        window.attachEvent('onresize', $$.resizeFunction);
+        window.attachEvent('onresize', $$.resizeIfElementDisplayed);
     } else if (window.addEventListener) {
-        window.addEventListener('resize', $$.resizeFunction, false);
+        window.addEventListener('resize', $$.resizeIfElementDisplayed, false);
     } else {
         // fallback to this, if this is a very old browser
         var wrapper = window.onresize;
@@ -1997,7 +2006,14 @@ c3_chart_internal_fn.bindResize = function () {
         }
         // add this graph to the wrapper, we will be removed if the user calls destroy
         wrapper.add($$.resizeFunction);
-        window.onresize = wrapper;
+        window.onresize = function () {
+            // if element not displayed skip it
+            if (!$$.api.element.offsetParent) {
+                return;
+            }
+
+            wrapper();
+        };
     }
 };
 
@@ -3472,9 +3488,9 @@ c3_chart_fn.destroy = function () {
     }
 
     if (window.detachEvent) {
-        window.detachEvent('onresize', $$.resizeFunction);
+        window.detachEvent('onresize', $$.resizeIfElementDisplayed);
     } else if (window.removeEventListener) {
-        window.removeEventListener('resize', $$.resizeFunction);
+        window.removeEventListener('resize', $$.resizeIfElementDisplayed);
     } else {
         var wrapper = window.onresize;
         // check if no one else removed our wrapper and remove our resizeFunction from it
@@ -3483,6 +3499,9 @@ c3_chart_fn.destroy = function () {
         }
     }
 
+    // remove the inner resize functions
+    $$.resizeFunction.remove();
+
     $$.selectChart.classed('c3', false).html("");
 
     // MEMO: this is needed because the reference of some elements will not be released, then memory leak will happen.

package.json

@@ -61,7 +61,7 @@
     "node-static": "^0.7.9",
     "nodemon": "^1.11.0",
     "rollup": "^0.55.0",
-    "rollup-plugin-babel": "^3.0.0",
+    "rollup-plugin-babel": "^3.0.3",
     "uglify-js": "^3.0.15",
     "watchify": "^3.9.0"
   },

src/api.chart.js

@@ -22,9 +22,9 @@ c3_chart_fn.destroy = function () {
     }
 
     if (window.detachEvent) {
-        window.detachEvent('onresize', $$.resizeFunction);
+        window.detachEvent('onresize', $$.resizeIfElementDisplayed);
     } else if (window.removeEventListener) {
-        window.removeEventListener('resize', $$.resizeFunction);
+        window.removeEventListener('resize', $$.resizeIfElementDisplayed);
     } else {
         var wrapper = window.onresize;
         // check if no one else removed our wrapper and remove our resizeFunction from it
@@ -33,6 +33,9 @@ c3_chart_fn.destroy = function () {
         }
     }
 
+    // remove the inner resize functions
+    $$.resizeFunction.remove();
+
     $$.selectChart.classed('c3', false).html("");
 
     // MEMO: this is needed because the reference of some elements will not be released, then memory leak will happen.

src/core.js

@@ -918,7 +918,7 @@ c3_chart_internal_fn.observeInserted = function (selection) {
 c3_chart_internal_fn.bindResize = function () {
     var $$ = this, config = $$.config;
 
-    $$.resizeFunction = $$.generateResize();
+    $$.resizeFunction = $$.generateResize(); // need to call .remove
 
     $$.resizeFunction.add(function () {
         config.onresize.call($$);
@@ -938,9 +938,9 @@ c3_chart_internal_fn.bindResize = function () {
         config.onresized.call($$);
     });
 
-    var resizeIfElementDisplayed = function() {
+    $$.resizeIfElementDisplayed = function() {
         // if element not displayed skip it
-        if (!$$.api.element.offsetParent) {
+        if ($$.api == null || !$$.api.element.offsetParent) {
             return;
         }
 
@@ -948,9 +948,9 @@ c3_chart_internal_fn.bindResize = function () {
     };
 
     if (window.attachEvent) {
-        window.attachEvent('onresize', resizeIfElementDisplayed);
+        window.attachEvent('onresize', $$.resizeIfElementDisplayed);
     } else if (window.addEventListener) {
-        window.addEventListener('resize', resizeIfElementDisplayed, false);
+        window.addEventListener('resize', $$.resizeIfElementDisplayed, false);
     } else {
         // fallback to this, if this is a very old browser
         var wrapper = window.onresize;