diff --git a/__tests__/integration/api-chart-render-brush-end.spec.ts b/__tests__/integration/api-chart-render-brush-end.spec.ts new file mode 100644 index 0000000000..50bfbfc1c9 --- /dev/null +++ b/__tests__/integration/api-chart-render-brush-end.spec.ts @@ -0,0 +1,29 @@ +import { chartRenderBrushEnd as render } from '../plots/api/chart-render-brush-end'; +import { createNodeGCanvas } from './utils/createNodeGCanvas'; +import { sleep } from './utils/sleep'; + +describe('chart.options.autoFit', () => { + const canvas = createNodeGCanvas(800, 500); + + it('chart({ autoFit: true }) should fit parent container', async () => { + const { rerendered, finished, button, chart } = render({ + canvas, + container: document.createElement('div'), + }); + await finished; + + chart.off(); + const fn = jest.fn(); + chart.on('brush:end', () => { + fn(); + }); + button.dispatchEvent(new CustomEvent('click')); + await rerendered; + await sleep(20); + expect(fn).toBeCalledTimes(0); + }); + + afterAll(() => { + canvas?.destroy(); + }); +}); diff --git a/__tests__/plots/api/chart-render-brush-end.ts b/__tests__/plots/api/chart-render-brush-end.ts new file mode 100644 index 0000000000..4f7b2e6621 --- /dev/null +++ b/__tests__/plots/api/chart-render-brush-end.ts @@ -0,0 +1,65 @@ +import { Chart } from '../../../src'; + +export function chartRenderBrushEnd(context) { + const { container, canvas } = context; + + // button + const button = document.createElement('button'); + button.innerText = 'Render'; + container.appendChild(button); + + // wrapperDiv + const wrapperDiv = document.createElement('div'); + container.appendChild(wrapperDiv); + + const chart = new Chart({ + theme: 'classic', + container: wrapperDiv, + paddingBottom: 120, + width: 1000, + canvas, + }); + + chart.data([ + { date: '2001-01', value: 100 }, + { date: '2001-02', value: 400 }, + { date: '2001-03', value: 500 }, + { date: '2001-04', value: 600 }, + { date: '2001-05', value: 300 }, + { date: '2001-06', value: 600 }, + { date: '2001-07', value: 300 }, + { date: '2001-08', value: 600 }, + { date: '2001-09', value: 109 }, + { date: '2001-10', value: 100 }, + { date: '2001-11', value: 102 }, + { date: '2001-12', value: 103 }, + { date: '2002-01', value: 102 }, + { date: '2002-02', value: 101 }, + { date: '2002-03', value: 200 }, + { date: '2002-04', value: 500 }, + { date: '2002-05', value: 100 }, + { date: '2002-06', value: 100 }, + { date: '2002-07', value: 102 }, + { date: '2002-08', value: 109 }, + ]); + + chart + .interval() + .encode('x', 'date') + .encode('y', 'value') + .axis('x', { style: { labelTransform: 'rotate(90deg)' } }) + .interaction('brushXHighlight', true); + + chart.on('brush:end', () => console.log('brush:end')); + + const finished = chart.render(); + + let resolve; + const rerendered = new Promise((r) => (resolve = r)); + + button.onclick = () => { + chart.render().then(resolve); + }; + + return { chart, button, finished, rerendered }; +} diff --git a/__tests__/plots/api/index.ts b/__tests__/plots/api/index.ts index 47ec02d5f4..d73a20a58b 100644 --- a/__tests__/plots/api/index.ts +++ b/__tests__/plots/api/index.ts @@ -23,3 +23,4 @@ export { chartEmitPieTooltip } from './chart-emit-pie-tooltip'; export { chartRenderUpdateAttributes } from './chart-render-update-attributes'; export { chartRenderUpdateNonAnimation } from './chart-render-update-non-animation'; export { chartEmitBrushHighlightX } from './chart-emit-brush-highlight-x'; +export { chartRenderBrushEnd } from './chart-render-brush-end'; diff --git a/src/interaction/brushHighlight.ts b/src/interaction/brushHighlight.ts index 12b2ccf92d..4f2f112537 100644 --- a/src/interaction/brushHighlight.ts +++ b/src/interaction/brushHighlight.ts @@ -480,7 +480,7 @@ export function brush( if (mask) removeMask(); }, destroy() { - removeMask(); + if (mask) removeMask(); setCursor(root, 'default'); root.removeEventListener('dragstart', dragstart); root.removeEventListener('drag', drag);