From abfb016d33daa8aca6669c32283dd9d8b47ccf66 Mon Sep 17 00:00:00 2001
From: MiniPear <pearminipro@gmail.com>
Date: Tue, 16 May 2023 16:38:43 +0800
Subject: [PATCH] feat(event): emit plot events

---
 .../integration/api-chart-on-item-element.spec.ts  |  8 ++++++++
 __tests__/plots/api/chart-on-item-element.ts       |  1 +
 site/docs/manual/event.zh.md                       |  6 ++++++
 src/interaction/event.ts                           | 14 +++++++++++---
 4 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/__tests__/integration/api-chart-on-item-element.spec.ts b/__tests__/integration/api-chart-on-item-element.spec.ts
index 95eccf7d23..3b218593b6 100644
--- a/__tests__/integration/api-chart-on-item-element.spec.ts
+++ b/__tests__/integration/api-chart-on-item-element.spec.ts
@@ -175,6 +175,14 @@ describe('chart.on', () => {
     await fired;
   });
 
+  it('chart.on("plot:click", callback) should emit plot events', async () => {
+    await finished;
+    const [fired, resolve] = createPromise();
+    chart.on(`plot:${ChartEvent.CLICK}`, () => resolve());
+    dispatchFirstElementEvent(canvas, 'click', { detail: 1 });
+    await fired;
+  });
+
   afterAll(() => {
     canvas?.destroy();
   });
diff --git a/__tests__/plots/api/chart-on-item-element.ts b/__tests__/plots/api/chart-on-item-element.ts
index a0522884ea..0207728389 100644
--- a/__tests__/plots/api/chart-on-item-element.ts
+++ b/__tests__/plots/api/chart-on-item-element.ts
@@ -24,6 +24,7 @@ export function chartOnItemElement(context) {
 
   chart.on('interval:click', log('interval:click'));
   chart.on('element:click', log('element:click'));
+  chart.on('plot:click', () => console.log('plot:click'));
   chart.on('interval:dblclick', log('interval:dblclick'));
 
   chart.on('interval:pointertap', log('interval:pointertap'));
diff --git a/site/docs/manual/event.zh.md b/site/docs/manual/event.zh.md
index 6a216afb70..c367373599 100644
--- a/site/docs/manual/event.zh.md
+++ b/site/docs/manual/event.zh.md
@@ -100,6 +100,12 @@ chart.on(`interval:${ChartEvent.CLICK}`, (ev) => {
 });
 ```
 
+- 监听 Plot 区域事件
+
+```js
+chart.on('plot:click', (event) => console.log(event));
+```
+
 ### 点击事件
 
 | 事件名                | 说明 | 回调参数 |
diff --git a/src/interaction/event.ts b/src/interaction/event.ts
index 6aa439ffa9..363f4e215f 100644
--- a/src/interaction/event.ts
+++ b/src/interaction/event.ts
@@ -19,6 +19,14 @@ function bubblesEvent(eventType, view, emitter, predicate = (event) => true) {
     if (!predicate(e)) return;
     const { target } = e;
     const { className: elementType, markType } = target;
+
+    // Emit plot events.
+    emitter.emit(`plot:${eventType}`, e);
+
+    // If target area is plot area, do not emit extra events.
+    if (elementType === 'plot') return;
+
+    // Emit wrapped events.
     if (elementType === 'element') {
       const e1 = {
         ...e,
@@ -27,10 +35,10 @@ function bubblesEvent(eventType, view, emitter, predicate = (event) => true) {
       };
       emitter.emit(`element:${eventType}`, e1);
       emitter.emit(`${markType}:${eventType}`, e1);
-      return;
+    } else {
+      // @todo Handle click axis and legend.
+      emitter.emit(`${elementType}:${eventType}`, e);
     }
-    // @todo Handle click axis and legend.
-    emitter.emit(`${elementType}:click`);
   };
 }