feat(event): emit plot events

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

Hide file tree

Showing 3 changed files with 39 additions and 22 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
@@ -22,27 +22,28 @@ export function chartOnItemElement(context) {
     .style('draggable', true)
     .style('droppable', true);
 
-  chart.on('interval:click', log('interval:click'));
-  chart.on('element:click', log('element:click'));
-  chart.on('interval:dblclick', log('interval:dblclick'));
+  // 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'));
-  chart.on('interval:pointerdown', log('interval:pointerdown'));
-  chart.on('interval:pointerup', log('interval:pointerup'));
-  chart.on('interval:pointerover', log('interval:pointerover'));
-  chart.on('interval:pointerout', log('interval:pointerout'));
-  chart.on('interval:pointermove', log('interval:pointermove'));
-  chart.on('interval:pointerenter', log('interval:pointerenter'));
-  chart.on('interval:pointerleave', log('interval:pointerleave'));
-  chart.on('interval:pointerupoutside', log('interval:pointerupoutside'));
+  // chart.on('interval:pointertap', log('interval:pointertap'));
+  // chart.on('interval:pointerdown', log('interval:pointerdown'));
+  // chart.on('interval:pointerup', log('interval:pointerup'));
+  // chart.on('interval:pointerover', log('interval:pointerover'));
+  // chart.on('interval:pointerout', log('interval:pointerout'));
+  // chart.on('interval:pointermove', log('interval:pointermove'));
+  // chart.on('interval:pointerenter', log('interval:pointerenter'));
+  // chart.on('interval:pointerleave', log('interval:pointerleave'));
+  // chart.on('interval:pointerupoutside', log('interval:pointerupoutside'));
 
-  chart.on('interval:dragstart', log('interval:dragstart'));
-  chart.on('interval:drag', log('interval:drag'));
-  chart.on('interval:dragend', log('interval:dragend'));
-  chart.on('interval:dragenter', log('interval:dragenter'));
-  chart.on('interval:dragleave', log('interval:dragleave'));
-  chart.on('interval:dragover', log('interval:dragover'));
-  chart.on('interval:drop', log('interval:drop'));
+  // chart.on('interval:dragstart', log('interval:dragstart'));
+  // chart.on('interval:drag', log('interval:drag'));
+  // chart.on('interval:dragend', log('interval:dragend'));
+  // chart.on('interval:dragenter', log('interval:dragenter'));
+  // chart.on('interval:dragleave', log('interval:dragleave'));
+  // chart.on('interval:dragover', log('interval:dragover'));
+  // chart.on('interval:drop', log('interval:drop'));
 
   const finished = chart.render();
 

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