fix(animation): shape to shape animation take style.transform into ac…

…count (#4849)

__tests__/integration/api-chart-change-size-polar.spec.ts

@@ -0,0 +1,25 @@
+import { chartChangeSizePolar as render } from '../plots/api/chart-change-size-polar';
+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, resized } = render({
+      canvas,
+      container: document.createElement('div'),
+    });
+    await finished;
+    button.dispatchEvent(new CustomEvent('click'));
+    await resized;
+    const dir = `${__dirname}/snapshots/api`;
+    await sleep(20);
+    await expect(canvas).toMatchCanvasSnapshot(dir, render.name);
+  });
+
+  afterAll(() => {
+    canvas?.destroy();
+  });
+});

__tests__/plots/api/chart-change-size-polar.ts

@@ -0,0 +1,53 @@
+import { Chart } from '../../../src';
+import { scoreByItem } from '../../data/score-by-item';
+
+export function chartChangeSizePolar(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);
+
+  const chart = new Chart({ theme: 'classic', container: div, canvas });
+
+  chart.options({
+    type: 'view',
+    data: scoreByItem,
+    coordinate: { type: 'polar' },
+    encode: { x: 'item', y: 'score', color: 'type' },
+    scale: {
+      x: { padding: 0.5, align: 0 },
+      y: { tickCount: 5, domainMax: 80 },
+    },
+    axis: {
+      x: { grid: true },
+      y: { zIndex: 1, title: false, direction: 'center' },
+    },
+    legend: { color: { layout: { justifyContent: 'flex-start' } } },
+    children: [
+      {
+        type: 'area',
+        style: { fillOpacity: 0.5 },
+      },
+      {
+        type: 'line',
+        style: { lineWidth: 2 },
+      },
+    ],
+  });
+
+  const finished = chart.render();
+
+  let resolve;
+  const resized = new Promise((r) => (resolve = r));
+
+  button.onclick = () => {
+    chart.options({ width: 400, height: 300 }).render().then(resolve);
+  };
+
+  return { chart, button, finished, resized };
+}

__tests__/plots/api/index.ts

@@ -11,3 +11,4 @@ export { chartHOMMark } from './chart-hom-mark';
 export { chartOptions } from './chart-options';
 export { viewFacetCircle } from './view-facetCircle';
 export { chartEmitLegendFilter } from './chart-emit-legend-filter';
+export { chartChangeSizePolar } from './chart-change-size-polar';

src/animation/morphing.ts

@@ -73,6 +73,8 @@ function shapeToShape(
   timeEffect: Record<string, any>,
 ): GAnimation {
   const [x0, y0, w0, h0] = localBBoxOf(from);
+  const { transform: fromTransform } = from.style;
+  const { transform: toTransform } = to.style;
 
   // Replace first to get right bbox after mounting.
   replaceChild(to, from);
@@ -85,11 +87,15 @@ function shapeToShape(
   const sy = h0 / h1;
   const keyframes = [
     {
-      transform: `translate(${dx}, ${dy}) scale(${sx}, ${sy})`,
+      transform: `${
+        fromTransform ? fromTransform + ' ' : ''
+      }translate(${dx}, ${dy}) scale(${sx}, ${sy})`,
       ...attributeOf(from, attributeKeys),
     },
     {
-      transform: `translate(0, 0) scale(1, 1)`,
+      transform: `${
+        toTransform ? toTransform + ' ' : ''
+      }translate(0, 0) scale(1, 1)`,
       ...attributeOf(to, attributeKeys),
     },
   ];