From 29512d734c3b5946d32b71e69f60ab68005af9b6 Mon Sep 17 00:00:00 2001
From: MiniPear <pearminipro@gmail.com>
Date: Fri, 19 May 2023 15:12:22 +0800
Subject: [PATCH] fix(brush): handle brush:highlight once when emit

---
 .../api-chart-render-brush-end.spec.ts        | 18 ++++++++++-----
 __tests__/unit/api/options.spec.ts            | 22 +++++++++++++++++++
 src/interaction/brushHighlight.ts             | 22 ++++++++++---------
 3 files changed, 46 insertions(+), 16 deletions(-)
 create mode 100644 __tests__/unit/api/options.spec.ts

diff --git a/__tests__/integration/api-chart-render-brush-end.spec.ts b/__tests__/integration/api-chart-render-brush-end.spec.ts
index df858ef3e2..c3f15ad711 100644
--- a/__tests__/integration/api-chart-render-brush-end.spec.ts
+++ b/__tests__/integration/api-chart-render-brush-end.spec.ts
@@ -10,18 +10,24 @@ describe('chart.render', () => {
       canvas,
       container: document.createElement('div'),
     });
-    await finished;
-    await sleep(20);
-
     chart.off();
-    const fn = jest.fn();
+
+    const end = jest.fn();
+    const start = jest.fn();
+    chart.on('brush:highlight', () => {
+      start();
+    });
     chart.on('brush:end', () => {
-      fn();
+      end();
     });
+    await finished;
+    await sleep(20);
+
     button.dispatchEvent(new CustomEvent('click'));
     await rerendered;
     await sleep(20);
-    expect(fn).toBeCalledTimes(0);
+    expect(start).toBeCalledTimes(1);
+    expect(end).toBeCalledTimes(0);
   });
 
   afterAll(() => {
diff --git a/__tests__/unit/api/options.spec.ts b/__tests__/unit/api/options.spec.ts
new file mode 100644
index 0000000000..cdd06267a9
--- /dev/null
+++ b/__tests__/unit/api/options.spec.ts
@@ -0,0 +1,22 @@
+import { Chart } from '../../../src';
+
+describe('API and Options', () => {
+  it('', () => {
+    const chart = new Chart({});
+
+    chart.options({
+      type: 'interval',
+      data: [
+        { genre: 'Sports', sold: 275 },
+        { genre: 'Strategy', sold: 115 },
+        { genre: 'Action', sold: 120 },
+        { genre: 'Shooter', sold: 350 },
+        { genre: 'Other', sold: 150 },
+      ],
+      encode: {
+        x: 'genre',
+        y: 'sold',
+      },
+    });
+  });
+});
diff --git a/src/interaction/brushHighlight.ts b/src/interaction/brushHighlight.ts
index 1f673370d0..38e37e1311 100644
--- a/src/interaction/brushHighlight.ts
+++ b/src/interaction/brushHighlight.ts
@@ -315,7 +315,7 @@ export function brush(
   };
 
   // Update mask and invoke brushended callback.
-  const updateMask = (start, end) => {
+  const updateMask = (start, end, emit = true) => {
     const [x, y, x1, y1] = normalizeBounds(
       start[0],
       start[1],
@@ -326,7 +326,7 @@ export function brush(
     const [fx, fy, fx1, fy1] = brushRegion(x, y, x1, y1, extent);
     if (reverse) updateReverseMask(fx, fy, fx1, fy1);
     else updateNormalMask(fx, fy, fx1, fy1);
-    brushed(fx, fy, fx1, fy1);
+    brushed(fx, fy, fx1, fy1, emit);
     return [fx, fy, fx1, fy1];
   };
 
@@ -470,11 +470,11 @@ export function brush(
 
   return {
     mask,
-    move(x, y, x1, y1) {
+    move(x, y, x1, y1, emit = true) {
       if (!mask) initMask(x, y);
       start = [x, y];
       end = [x1, y1];
-      updateMask([x, y], [x1, y1]);
+      updateMask([x, y], [x1, y1], emit);
     },
     remove() {
       if (mask) removeMask();
@@ -632,12 +632,14 @@ export function brushHighlight(
       emitter.emit('brush:end', { nativeEvent: true });
       handler();
     },
-    brushed: (x, y, x1, y1) => {
+    brushed: (x, y, x1, y1, emit) => {
       const selection = selectionOf(x, y, x1, y1, scale, coordinate);
-      emitter.emit('brush:highlight', {
-        nativeEvent: true,
-        data: { selection },
-      });
+      if (emit) {
+        emitter.emit('brush:highlight', {
+          nativeEvent: true,
+          data: { selection },
+        });
+      }
       const handler = series ? seriesBrushed : brushed;
       handler(x, y, x1, y1);
     },
@@ -648,7 +650,7 @@ export function brushHighlight(
     if (nativeEvent) return;
     const { selection } = data;
     const [x, y, x1, y1] = pixelsOf(selection, scale, coordinate);
-    brushHandler.move(x, y, x1, y1);
+    brushHandler.move(x, y, x1, y1, false);
   };
   emitter.on('brush:highlight', onHighlight);