fix(brush): emit brush remove

__tests__/integration/api-chart-emit-brush-highlight-x.spec.ts

@@ -4,12 +4,12 @@ import { sleep } from './utils/sleep';
 import { kebabCase } from './utils/kebabCase';
 import './utils/useSnapshotMatchers';
 
-describe('chart.options.autoFit', () => {
+describe('chart.emit', () => {
   const dir = `${__dirname}/snapshots/api/${kebabCase(render.name)}`;
   const canvas = createNodeGCanvas(800, 500);
 
-  it('chart({ autoFit: true }) should fit parent container', async () => {
-    const { highlighted, finished, button } = render({
+  it('chart.emit(brushX) should emit brushX events', async () => {
+    const { highlighted, finished, button, button1, removed } = render({
       canvas,
       container: document.createElement('div'),
     });
@@ -19,6 +19,11 @@ describe('chart.options.autoFit', () => {
     await highlighted;
     await sleep(20);
     await expect(canvas).toMatchCanvasSnapshot(dir, 'step0');
+
+    button1.dispatchEvent(new CustomEvent('click'));
+    await removed;
+    await sleep(20);
+    await expect(canvas).toMatchCanvasSnapshot(dir, 'step1');
   });
 
   afterAll(() => {

__tests__/plots/api/chart-emit-brush-highlight-x.ts

@@ -8,6 +8,10 @@ export function chartEmitBrushHighlightX(context) {
   button.innerText = 'Highlight';
   container.appendChild(button);
 
+  const button1 = document.createElement('button');
+  button1.innerText = 'Remove';
+  container.appendChild(button1);
+
   // wrapperDiv
   const wrapperDiv = document.createElement('div');
   container.appendChild(wrapperDiv);
@@ -55,6 +59,11 @@ export function chartEmitBrushHighlightX(context) {
   let resolve;
   const highlighted = new Promise((r) => (resolve = r));
 
+  chart.on('brush:remove', ({ nativeEvent } = {}) => {
+    if (!nativeEvent) return;
+    console.log('remove');
+  });
+
   button.onclick = () => {
     const X = ['2001-01', '2001-03'];
     chart.emit('brush:highlight', {
@@ -63,5 +72,12 @@ export function chartEmitBrushHighlightX(context) {
     resolve();
   };
 
-  return { chart, button, finished, highlighted };
+  let resolve1;
+  const removed = new Promise((r) => (resolve1 = r));
+  button1.onclick = () => {
+    chart.emit('brush:remove');
+    resolve1();
+  };
+
+  return { chart, button, finished, highlighted, button1, removed };
 }

site/examples/interaction/interaction/demo/focus-context.ts

@@ -93,7 +93,7 @@ focus.on('brush:filter', (e) => {
   const [[x1, x2]] = selection;
   const domainX = scaleX.getOptions().domain;
   if (x1 === domainX[0] && x2 === domainX[1]) {
-    context.emit('brush:remove');
+    context.emit('brush:remove', {});
   } else {
     context.emit('brush:highlight', { data: { selection } });
   }

src/interaction/brushHighlight.ts

@@ -476,8 +476,8 @@ export function brush(
       end = [x1, y1];
       updateMask([x, y], [x1, y1], emit);
     },
-    remove() {
-      if (mask) removeMask(false);
+    remove(emit = true) {
+      if (mask) removeMask(emit);
     },
     destroy() {
       // Do not emit brush:end event.
@@ -657,7 +657,10 @@ export function brushHighlight(
   emitter.on('brush:highlight', onHighlight);
 
   // Remove brush and reset data.
-  const onRemove = () => brushHandler.remove();
+  const onRemove = ({ nativeEvent }: any = {}) => {
+    if (nativeEvent) return;
+    brushHandler.remove(false);
+  };
   emitter.on('brush:remove', onRemove);
 
   // Remove event handlers.