feat: upgrade vrender to fix animation issue

docs/package.json

@@ -19,8 +19,8 @@
     "@visactor/vchart-theme": "~1.6.6",
     "@visactor/vmind": "1.2.4-alpha.5",
     "@visactor/vutils": "~1.0.23",
-    "@visactor/vrender": "1.1.0",
-    "@visactor/vrender-kits": "1.1.0",
+    "@visactor/vrender": "1.1.1",
+    "@visactor/vrender-kits": "1.1.1",
     "@visactor/vtable": "1.19.0-alpha.0",
     "@visactor/vtable-editors": "1.19.0-alpha.0",
     "@visactor/vtable-gantt": "1.19.0-alpha.0",

packages/openinula-vchart/package.json

@@ -30,8 +30,8 @@
   "dependencies": {
     "@visactor/vchart": "workspace:2.1.0",
     "@visactor/vutils": "~1.0.23",
-    "@visactor/vrender-core": "1.1.0",
-    "@visactor/vrender-kits": "1.1.0",
+    "@visactor/vrender-core": "1.1.1",
+    "@visactor/vrender-kits": "1.1.1",
     "react-is": "^18.2.0"
   },
   "devDependencies": {

packages/react-vchart/package.json

@@ -36,8 +36,8 @@
     "@visactor/vchart": "workspace:2.1.0",
     "@visactor/vchart-extension": "workspace:2.1.0",
     "@visactor/vutils": "~1.0.23",
-    "@visactor/vrender-core": "1.1.0",
-    "@visactor/vrender-kits": "1.1.0",
+    "@visactor/vrender-core": "1.1.1",
+    "@visactor/vrender-kits": "1.1.1",
     "react-is": "^18.2.0"
   },
   "devDependencies": {

packages/vchart-extension/package.json

@@ -26,10 +26,10 @@
     "start": "ts-node __tests__/runtime/browser/scripts/initVite.ts && vite serve __tests__/runtime/browser"
   },
   "dependencies": {
-    "@visactor/vrender-core": "1.1.0",
-    "@visactor/vrender-kits": "1.1.0",
-    "@visactor/vrender-components": "1.1.0",
-    "@visactor/vrender-animate": "1.1.0",
+    "@visactor/vrender-core": "1.1.1",
+    "@visactor/vrender-kits": "1.1.1",
+    "@visactor/vrender-components": "1.1.1",
+    "@visactor/vrender-animate": "1.1.1",
     "@visactor/vchart": "workspace:2.1.0",
     "@visactor/vutils": "~1.0.23",
     "@visactor/vdataset": "~1.0.23",

packages/vchart/__tests__/unit/component/player/release.test.ts

@@ -0,0 +1,86 @@
+import type { IBarChartSpec } from '../../../../src';
+import VChart from '../../../../src';
+import { createDiv, removeDom } from '../../../util/dom';
+
+const dataSpecs = [1, 2].map(value => ({
+  data: [
+    {
+      id: 'data',
+      values: [{ country: 'USA', value }]
+    }
+  ]
+}));
+
+const createSpec = (): IBarChartSpec =>
+  ({
+    type: 'bar',
+    width: 300,
+    height: 220,
+    data: dataSpecs[0].data,
+    direction: 'horizontal',
+    yField: 'country',
+    xField: 'value',
+    player: {
+      type: 'continuous',
+      orient: 'bottom',
+      auto: true,
+      loop: true,
+      interval: 1000,
+      specs: dataSpecs,
+      slider: {
+        railStyle: {
+          height: 6
+        }
+      },
+      controller: {
+        backward: {
+          style: {
+            size: 12
+          }
+        },
+        forward: {
+          style: {
+            size: 12
+          }
+        },
+        start: {
+          order: 1,
+          position: 'end'
+        }
+      }
+    }
+  } as unknown as IBarChartSpec);
+
+describe('player component release', () => {
+  let container: HTMLElement;
+  let dom: HTMLElement;
+
+  beforeEach(() => {
+    container = createDiv();
+    dom = createDiv(container);
+    container.style.width = '300px';
+    container.style.height = '220px';
+  });
+
+  afterEach(() => {
+    removeDom(container);
+  });
+
+  it('pauses the VRender player and runs base component cleanup', () => {
+    const chart = new VChart(createSpec(), {
+      dom,
+      animation: false
+    });
+
+    chart.renderSync();
+
+    const playerModel = chart.getChart()?.getComponentsByKey('player')[0] as any;
+    const playerComponent = playerModel?._playerComponent;
+    const pauseSpy = jest.spyOn(playerComponent, 'pause');
+
+    chart.release();
+
+    expect(pauseSpy).toHaveBeenCalledTimes(1);
+    expect(playerModel.getOption()).toBeNull();
+  });
+});

packages/vchart/__tests__/unit/core/release-update.test.ts

@@ -0,0 +1,48 @@
+import type { IBarChartSpec } from '../../../src';
+import VChart from '../../../src';
+import { createDiv, removeDom } from '../../util/dom';
+
+const createSpec = (value: number): IBarChartSpec => ({
+  type: 'bar',
+  width: 300,
+  height: 200,
+  data: [
+    {
+      id: 'data',
+      values: [{ country: 'USA', value }]
+    }
+  ],
+  direction: 'horizontal',
+  yField: 'country',
+  xField: 'value'
+});
+
+describe('vchart release update guards', () => {
+  let container: HTMLElement;
+  let dom: HTMLElement;
+
+  beforeEach(() => {
+    container = createDiv();
+    dom = createDiv(container);
+    container.style.width = '300px';
+    container.style.height = '200px';
+  });
+
+  afterEach(() => {
+    removeDom(container);
+  });
+
+  it('ignores updateSpec calls after release', async () => {
+    const chart = new VChart(createSpec(1), {
+      dom,
+      animation: false
+    });
+
+    chart.renderSync();
+    chart.release();
+
+    expect(() => chart.updateSpecSync(createSpec(2))).not.toThrow();
+    await expect(chart.updateSpec(createSpec(3))).resolves.toBe(chart);
+    expect(() => chart.updateFullDataSync({ id: 'data', values: [{ country: 'USA', value: 4 }] })).not.toThrow();
+  });
+});

packages/vchart/package.json

@@ -128,11 +128,11 @@
     "@visactor/vdataset": "~1.0.23",
     "@visactor/vscale": "~1.0.23",
     "@visactor/vlayouts": "~1.0.23",
-    "@visactor/vrender": "1.1.0",
-    "@visactor/vrender-core": "1.1.0",
-    "@visactor/vrender-kits": "1.1.0",
-    "@visactor/vrender-components": "1.1.0",
-    "@visactor/vrender-animate": "1.1.0",
+    "@visactor/vrender": "1.1.1",
+    "@visactor/vrender-core": "1.1.1",
+    "@visactor/vrender-kits": "1.1.1",
+    "@visactor/vrender-components": "1.1.1",
+    "@visactor/vrender-animate": "1.1.1",
     "@visactor/vutils-extension": "workspace:2.1.0"
   },
   "publishConfig": {

packages/vchart/src/component/player/player.ts

@@ -328,7 +328,11 @@ export class Player extends BaseComponent<IPlayer> implements IComponent {
   };
 
   changePlayerIndex(index: number) {
-    const spec = this._specs[index];
+    const spec = this._specs?.[index];
+
+    if (!spec || !this._option?.globalInstance) {
+      return;
+    }
 
     this._option.globalInstance.updateFullData((spec as any).data);
 
@@ -342,7 +346,7 @@ export class Player extends BaseComponent<IPlayer> implements IComponent {
     });
   }
   autoPlayCallback = () => {
-    if (this._spec?.auto) {
+    if (this._spec?.auto && this._playerComponent) {
       this._playerComponent.pause();
       this._playerComponent.play();
     }
@@ -442,8 +446,13 @@ export class Player extends BaseComponent<IPlayer> implements IComponent {
     });
   };
   release(): void {
+    this._playerComponent?.pause?.();
     // 自动播放
-    this._option.globalInstance.off(ChartEvent.rendered, this.autoPlayCallback);
+    this._option?.globalInstance?.off(ChartEvent.rendered, this.autoPlayCallback);
+    super.release();
+    this._playerComponent = null as unknown as DiscretePlayer | ContinuousPlayer;
+    this._cacheAttrs = null as unknown as ContinuousPlayerAttributes | DiscretePlayerAttributes;
+    this._specs = [];
   }
 }
 

packages/vchart/src/core/vchart.ts

@@ -978,6 +978,9 @@ export class VChart implements IVChart {
     parserOptions?: IParserOptions,
     userUpdateOptions?: IUpdateDataResult
   ) {
+    if (this._isReleased) {
+      return this as unknown as IVChart;
+    }
     this._reSetRenderState();
     if (isNil(this._dataSet)) {
       return this as unknown as IVChart;
@@ -1010,6 +1013,9 @@ export class VChart implements IVChart {
     reRender: boolean = true,
     userUpdateOptions?: IUpdateSpecResult
   ) {
+    if (this._isReleased) {
+      return this as unknown as IVChart;
+    }
     this._reSetRenderState();
     if (this._chart) {
       this._chart.updateFullData(data);
@@ -1127,6 +1133,9 @@ export class VChart implements IVChart {
     forceMerge: boolean = false,
     userUpdateOptions?: IUpdateSpecResult
   ): IUpdateSpecResult | undefined => {
+    if (this._isReleased) {
+      return undefined;
+    }
     this._reSetRenderState();
 
     const lastSpec = this._spec;
@@ -2330,6 +2339,9 @@ export class VChart implements IVChart {
   }
 
   private _reSetRenderState() {
+    if (this._isReleased || !this._compiler) {
+      return;
+    }
     this._renderState = RenderStateEnum.render;
     this.getStage()?.eventSystem?.resumeTriggerEvent();
   }

tools/story-player/package.json

@@ -56,10 +56,10 @@
     "vite": "3.2.6"
   },
   "dependencies": {
-    "@visactor/vrender-core": "1.1.0",
-    "@visactor/vrender-kits": "1.1.0",
+    "@visactor/vrender-core": "1.1.1",
+    "@visactor/vrender-kits": "1.1.1",
     "@visactor/vchart": "workspace:2.1.0",
-    "@visactor/vrender": "1.1.0",
+    "@visactor/vrender": "1.1.1",
     "@visactor/vutils": "~1.0.23"
   }
 }