fix(shape): update group shape without animation (#5514)

__tests__/integration/api-chart-change-size-custom-shape.spec.ts

@@ -0,0 +1,25 @@
+import { chartChangeSizeCustomShape as render } from '../plots/api/chart-change-size-custom-shape';
+import { createNodeGCanvas } from './utils/createNodeGCanvas';
+import { sleep } from './utils/sleep';
+import './utils/useSnapshotMatchers';
+
+describe('mark.changeSize', () => {
+  const canvas = createNodeGCanvas(640, 480);
+
+  it('mark.changeSize(width, height) should rerender expected chart', async () => {
+    const { finished, button, chart } = render({
+      canvas,
+      container: document.createElement('div'),
+    });
+    await finished;
+    button.dispatchEvent(new CustomEvent('click'));
+    await new Promise<void>((resolve) => chart.on('afterchangesize', resolve));
+    const dir = `${__dirname}/snapshots/api`;
+    await sleep(20);
+    await expect(canvas).toMatchCanvasSnapshot(dir, render.name);
+  });
+
+  afterAll(() => {
+    canvas?.destroy();
+  });
+});

__tests__/plots/api/chart-change-size-custom-shape.ts

@@ -0,0 +1,63 @@
+import { Chart, register } from '../../../src';
+
+export function chartChangeSizeCustomShape(context) {
+  const { container, canvas } = context;
+
+  const button = document.createElement('button');
+  button.innerText = 'Update Size';
+  button.style.display = 'block';
+  container.appendChild(button);
+
+  const div = document.createElement('div');
+  container.appendChild(div);
+
+  register('shape.interval.triangle', (style, context) => {
+    const { document } = context;
+    return (P, value, defaults) => {
+      const { color: defaultColor } = defaults;
+      const [p0, p1, p2, p3] = P;
+      const pm = [(p0[0] + p1[0]) / 2, p0[1]];
+      const { color = defaultColor } = value;
+      const group = document.createElement('g');
+      const polygon = document.createElement('polygon', {
+        style: {
+          ...style,
+          fill: color,
+          points: [pm, p2, p3],
+        },
+      });
+      group.appendChild(polygon);
+      return group;
+    };
+  });
+
+  const chart = new Chart({
+    container: div,
+    canvas,
+  });
+
+  chart
+    .interval()
+    .data([
+      { genre: 'Sports', sold: 275 },
+      { genre: 'Strategy', sold: 115 },
+      { genre: 'Action', sold: 120 },
+      { genre: 'Shooter', sold: 350 },
+      { genre: 'Infantry', sold: 220 },
+      { genre: 'Logistics', sold: 330 },
+      { genre: 'Other', sold: 150 },
+    ])
+    .encode('x', 'genre')
+    .encode('y', 'sold')
+    .encode('color', 'genre')
+    .style('shape', 'triangle')
+    .animate(false);
+
+  const finished = chart.render();
+
+  button.onclick = () => {
+    chart.changeSize(400, 300);
+  };
+
+  return { chart, button, finished };
+}

__tests__/plots/api/index.ts

@@ -48,3 +48,4 @@ export { chartRender3dScatterPlotLegend } from './chart-render-3d-scatter-plot-l
 export { chartRender3dLinePlot } from './chart-render-3d-line-plot';
 export { chartRender3dLinePlotPerspective } from './chart-render-3d-line-plot-perspective';
 export { chartOnBrushHighlightTooltip } from './chart-on-brush-highlight-tooltip';
+export { chartChangeSizeCustomShape } from './chart-change-size-custom-shape';

src/interaction/tooltip.ts

@@ -158,7 +158,6 @@ function destroyTooltip({ root, single }) {
   if (!parent) return;
   const { tooltipElement } = parent;
   if (tooltipElement) {
-    console.log('destroyTooltip');
     tooltipElement.destroy();
     parent.tooltipElement = undefined;
   }

src/runtime/plot.ts

@@ -961,13 +961,18 @@ async function plotView(
                 const node = shapeFunction(data, index);
                 const animation = updateFunction(data, [element], [node]);
                 if (animation !== null) return animation;
-                if (element.nodeName === node.nodeName)
+                if (
+                  element.nodeName === node.nodeName &&
+                  node.nodeName !== 'g'
+                ) {
                   copyAttributes(element, node);
-                else {
+                } else {
                   element.parentNode.replaceChild(node, element);
                   node.className = ELEMENT_CLASS_NAME;
                   // @ts-ignore
                   node.markType = type;
+                  // @ts-ignore
+                  node.__data__ = element.__data__;
                 }
                 return animation;
               })