From a49624b9a7a6503989e8e08d8dfa5937999f8a21 Mon Sep 17 00:00:00 2001 From: MiniPear Date: Thu, 7 Sep 2023 11:14:17 +0800 Subject: [PATCH] fix(shape): update group shape without animation (#5514) --- ...api-chart-change-size-custom-shape.spec.ts | 25 +++++++ .../api/chartChangeSizeCustomShape.png | Bin 0 -> 23710 bytes .../api/chart-change-size-custom-shape.ts | 63 ++++++++++++++++++ __tests__/plots/api/index.ts | 1 + src/interaction/tooltip.ts | 1 - src/runtime/plot.ts | 9 ++- 6 files changed, 96 insertions(+), 3 deletions(-) create mode 100644 __tests__/integration/api-chart-change-size-custom-shape.spec.ts create mode 100644 __tests__/integration/snapshots/api/chartChangeSizeCustomShape.png create mode 100644 __tests__/plots/api/chart-change-size-custom-shape.ts diff --git a/__tests__/integration/api-chart-change-size-custom-shape.spec.ts b/__tests__/integration/api-chart-change-size-custom-shape.spec.ts new file mode 100644 index 0000000000..1cc9e535ae --- /dev/null +++ b/__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((resolve) => chart.on('afterchangesize', resolve)); + const dir = `${__dirname}/snapshots/api`; + await sleep(20); + await expect(canvas).toMatchCanvasSnapshot(dir, render.name); + }); + + afterAll(() => { + canvas?.destroy(); + }); +}); diff --git a/__tests__/integration/snapshots/api/chartChangeSizeCustomShape.png b/__tests__/integration/snapshots/api/chartChangeSizeCustomShape.png new file mode 100644 index 0000000000000000000000000000000000000000..f9344dc71f115539684b28e5af3da9366c0b76c0 GIT binary patch literal 23710 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 { + 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 }; +} diff --git a/__tests__/plots/api/index.ts b/__tests__/plots/api/index.ts index db8cc1baa5..69937a1608 100644 --- a/__tests__/plots/api/index.ts +++ b/__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'; diff --git a/src/interaction/tooltip.ts b/src/interaction/tooltip.ts index 07be1f8223..f23fa65dbc 100644 --- a/src/interaction/tooltip.ts +++ b/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; } diff --git a/src/runtime/plot.ts b/src/runtime/plot.ts index f3f0f21997..c0c7cacc99 100644 --- a/src/runtime/plot.ts +++ b/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; })