fix(update): set markType for element (#5293)

__tests__/integration/api-chart-render-event.spec.ts

@@ -0,0 +1,28 @@
+import { chartRenderEvent as render } from '../plots/api/chart-render-event';
+import { createDOMGCanvas } from './utils/createDOMGCanvas';
+import {
+  dispatchFirstElementEvent,
+  createPromise,
+  receiveExpectData,
+} 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("element:click", callback) should provide datum for item element', async () => {
+    await finished;
+    const [fired, resolve] = createPromise();
+    chart.on(`element:${ChartEvent.CLICK}`, receiveExpectData(resolve));
+    dispatchFirstElementEvent(canvas, 'click', { detail: 1 });
+    await fired;
+  });
+
+  afterAll(() => {
+    canvas?.destroy();
+  });
+});

__tests__/plots/api/chart-render-event.ts

@@ -0,0 +1,29 @@
+import { Chart } from '../../../src';
+
+export function chartRenderEvent(context) {
+  const { container, canvas } = context;
+
+  const chart = new Chart({ theme: 'classic', container, canvas });
+
+  chart.data([
+    { genre: 'Sports', sold: 275 },
+    { genre: 'Strategy', sold: 115 },
+    { genre: 'Action', sold: 120 },
+    { genre: 'Shooter', sold: 350 },
+    { genre: 'Other', sold: 150 },
+  ]);
+
+  chart
+    .interval()
+    .encode('x', 'genre')
+    .encode('y', 'sold')
+    .encode('color', 'genre');
+
+  chart.on('interval:click', () => {
+    console.log('hello world');
+  });
+
+  const finished = chart.render().then((chart) => chart.render());
+
+  return { chart, finished };
+}

__tests__/plots/api/index.ts

@@ -40,3 +40,4 @@ 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';
+export { chartRenderEvent } from './chart-render-event';

src/animation/morphing.ts

@@ -110,6 +110,8 @@ function shapeToShape(
 function replaceChild(newChild: DisplayObject, oldChild: DisplayObject) {
   newChild['__data__'] = oldChild['__data__'];
   newChild.className = oldChild.className;
+  // @ts-ignore
+  newChild.markType = oldChild.markType;
   oldChild.parentNode.replaceChild(newChild, oldChild);
 }
 

src/runtime/plot.ts

@@ -918,16 +918,23 @@ async function plotView(
               const [x, y] = node.getBounds().min;
               return [x, y];
             });
-            update.transition(function (data, index) {
-              maybeFacetElement(this, parent, origin);
-              const node = shapeFunction(data, index);
-              const animation = updateFunction(data, [this], [node]);
-              if (animation === null) {
+            selection
+              .transition(function (data, index) {
+                maybeFacetElement(this, parent, origin);
+                const node = shapeFunction(data, index);
+                const animation = updateFunction(data, [this], [node]);
+                if (animation !== null) return animation;
                 if (this.nodeName === node.nodeName) copyAttributes(this, node);
-                else this.parentNode.replaceChild(node, this);
-              }
-              return animation;
-            });
+                else {
+                  this.parentNode.replaceChild(node, this);
+                  node.className = ELEMENT_CLASS_NAME;
+                  // @ts-ignore
+                  node.markType = type;
+                }
+                return animation;
+              })
+              .attr('markType', type)
+              .attr('className', ELEMENT_CLASS_NAME);
           }),
         (exit) => {
           return exit