Browse Source

fix: redraw on window focus (#2495)

pull/1364/merge
Yoshiya Hinosawa 6 years ago committed by GitHub
parent
commit
6ebd6f2033
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 6
      spec/c3-helper.js
  2. 16
      spec/core-spec.js
  3. 5
      src/api.chart.js
  4. 30
      src/core.js

6
spec/c3-helper.js

@ -3,8 +3,6 @@ import c3 from '../src';
window.c3 = c3; window.c3 = c3;
window.initDom = function () { window.initDom = function () {
'use strict';
var div = document.createElement('div'); var div = document.createElement('div');
div.id = 'chart'; div.id = 'chart';
div.style.width = '640px'; div.style.width = '640px';
@ -14,8 +12,6 @@ window.initDom = function () {
}; };
window.setMouseEvent = function(chart, name, x, y, element) { window.setMouseEvent = function(chart, name, x, y, element) {
'use strict';
var paddingLeft = chart.internal.main.node().transform.baseVal.getItem(0).matrix.e, var paddingLeft = chart.internal.main.node().transform.baseVal.getItem(0).matrix.e,
event = document.createEvent("MouseEvents"); event = document.createEvent("MouseEvents");
event.initMouseEvent(name, true, true, window, event.initMouseEvent(name, true, true, window,
@ -25,8 +21,6 @@ window.setMouseEvent = function(chart, name, x, y, element) {
}; };
window.initChart = function (chart, args, done) { window.initChart = function (chart, args, done) {
'use strict';
if (typeof chart === 'undefined') { if (typeof chart === 'undefined') {
window.initDom(); window.initDom();
} }

16
spec/core-spec.js

@ -27,6 +27,20 @@ describe('c3 chart', function () {
expect(svg).not.toBeNull(); expect(svg).not.toBeNull();
}); });
it('should bind to window focus event', done => {
const addEventListener = window.addEventListener;
window.addEventListener = (event, handler) => {
if (event === 'focus') {
setTimeout(() => {
expect(handler).toBe(chart.internal.windowFocusHandler);
window.addEventListener = addEventListener; // restore the original
done();
}, 10);
}
};
chart = window.initChart(chart, args, () => {});
});
describe('should set 3rd party property to Function', function () { describe('should set 3rd party property to Function', function () {
beforeAll(function () { beforeAll(function () {
Function.prototype.$extIsFunction = true; Function.prototype.$extIsFunction = true;
@ -194,5 +208,5 @@ describe('c3 chart', function () {
}); });
}); });
}); });
}); });

5
src/api.chart.js

@ -33,9 +33,12 @@ Chart.prototype.destroy = function () {
} }
} }
// remove the inner resize functions // Removes the inner resize functions
$$.resizeFunction.remove(); $$.resizeFunction.remove();
// Unbinds from the window focus event
$$.unbindWindowFocus();
$$.selectChart.classed('c3', false).html(""); $$.selectChart.classed('c3', false).html("");
// MEMO: this is needed because the reference of some elements will not be released, then memory leak will happen. // MEMO: this is needed because the reference of some elements will not be released, then memory leak will happen.

30
src/core.js

@ -336,9 +336,12 @@ ChartInternal.prototype.initWithData = function(data) {
}); });
} }
// Bind resize event // Bind to resize event
$$.bindResize(); $$.bindResize();
// Bind to window focus event
$$.bindWindowFocus();
// export element of the chart // export element of the chart
$$.api.element = $$.selectChart.node(); $$.api.element = $$.selectChart.node();
}; };
@ -979,6 +982,9 @@ ChartInternal.prototype.observeInserted = function(selection) {
}); });
}; };
/**
* Binds handlers to the window resize event.
*/
ChartInternal.prototype.bindResize = function() { ChartInternal.prototype.bindResize = function() {
var $$ = this, var $$ = this,
config = $$.config; config = $$.config;
@ -1049,6 +1055,28 @@ ChartInternal.prototype.bindResize = function() {
} }
}; };
/**
* Binds handlers to the window focus event.
*/
ChartInternal.prototype.bindWindowFocus = function() {
if (this.windowFocusHandler) {
// The handler is already set
return;
}
this.windowFocusHandler = () => { this.redraw(); };
window.addEventListener('focus', this.windowFocusHandler);
};
/**
* Unbinds from the window focus event.
*/
ChartInternal.prototype.unbindWindowFocus = function () {
window.removeEventListener('focus', this.windowFocusHandler);
delete this.windowFocusHandler;
};
ChartInternal.prototype.generateResize = function() { ChartInternal.prototype.generateResize = function() {
var resizeFunctions = []; var resizeFunctions = [];

Loading…
Cancel
Save