feat(event): emit plot events

antvis · May 16, 2023 · abfb016 · abfb016
1 parent 86052fc
commit abfb016
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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`);
   };
 }