feat(event): emit plot events (#5034)

__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();
   });

__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'));

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));
+```
+
 ### 点击事件
 
 | 事件名                | 说明 | 回调参数 |

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`);
   };
 }