fix(event): emit events for extended shape (#5290)

__tests__/integration/api-chart-on-text-click.spec.ts

@@ -0,0 +1,32 @@
+import { chartOnTextClick as render } from '../plots/api/chart-on-text-click';
+import { createDOMGCanvas } from './utils/createDOMGCanvas';
+import { dispatchFirstElementEvent, createPromise } from './utils/event';
+import './utils/useSnapshotMatchers';
+import { ChartEvent } from '../../src';
+
+describe('chart.on', () => {
+  const canvas = createDOMGCanvas(640, 480);
+  const { finished, chart } = render({ canvas });
+
+  chart.off();
+
+  it('chart.on("text:click", callback) should provide datum for item element', async () => {
+    await finished;
+    const [fired, resolve] = createPromise();
+    chart.on(`text:${ChartEvent.CLICK}`, resolve);
+    dispatchFirstElementEvent(canvas, 'click', { detail: 1 });
+    await fired;
+  });
+
+  it('chart.on("element:click", callback) should provide datum for item element', async () => {
+    await finished;
+    const [fired, resolve] = createPromise();
+    chart.on(`element:${ChartEvent.CLICK}`, resolve);
+    dispatchFirstElementEvent(canvas, 'click', { detail: 1 });
+    await fired;
+  });
+
+  afterAll(() => {
+    canvas?.destroy();
+  });
+});

__tests__/plots/api/chart-on-text-click.ts

@@ -0,0 +1,24 @@
+import { Chart } from '../../../src';
+
+export function chartOnTextClick(context) {
+  const { container, canvas } = context;
+
+  const chart = new Chart({ theme: 'classic', container, canvas });
+
+  chart.text().style({
+    x: 290, // 像素坐标
+    y: 200, // 像素坐标
+    text: 'hello',
+    textAlign: 'center',
+    fontSize: 60,
+    textBaseline: 'middle',
+  });
+
+  chart.on('element:click', () => console.log('click element'));
+
+  chart.on('text:click', () => console.log('click text'));
+
+  const finished = chart.render();
+
+  return { chart, finished };
+}

__tests__/plots/api/index.ts

@@ -39,3 +39,4 @@ export { chartEmitItemTooltipHideContent } from './chart-emit-item-tooltip-hide-
 export { chartEmitClickTooltip } from './chart-emit-click-tooltip';
 export { chartChangeDataLegend } from './chart-change-data-legend';
 export { chartTooltipMultiChart } from './chart-tooltip-multi-chart';
+export { chartOnTextClick } from './chart-on-text-click';

src/interaction/event.ts

@@ -14,6 +14,14 @@ export function dataOf(element, view) {
   return selectedMark.data[index];
 }
 
+// For extended shape.
+function maybeElementRoot(node) {
+  if (node.className === 'element') return node;
+  let root = node.parent;
+  while (root && root.className !== 'element') root = root.parent;
+  return root;
+}
+
 function bubblesEvent(eventType, view, emitter, predicate = (event) => true) {
   return (e) => {
     if (!predicate(e)) return;
@@ -26,17 +34,20 @@ function bubblesEvent(eventType, view, emitter, predicate = (event) => true) {
     // There is no target for pointerupoutside event if out of canvas.
     if (!target) return;
 
-    const { className: elementType, markType } = target;
+    const { className } = target;
 
     // If target area is plot area, do not emit extra events.
-    if (elementType === 'plot') return;
+    if (className === 'plot') return;
 
-    // Emit wrapped events.
+    // If target is element or child of element.
+    const elementRoot = maybeElementRoot(target);
+    if (!elementRoot) return;
+    const { className: elementType, markType } = elementRoot;
     if (elementType === 'element') {
       const e1 = {
         ...e,
         nativeEvent: true,
-        data: { data: dataOf(target, view) },
+        data: { data: dataOf(elementRoot, view) },
       };
       emitter.emit(`element:${eventType}`, e1);
       emitter.emit(`${markType}:${eventType}`, e1);