diff --git a/common/changes/@visactor/vchart/fix-resize-and-renormal_2025-07-08-06-51.json b/common/changes/@visactor/vchart/fix-resize-and-renormal_2025-07-08-06-51.json new file mode 100644 index 0000000000..901cd9c7b7 --- /dev/null +++ b/common/changes/@visactor/vchart/fix-resize-and-renormal_2025-07-08-06-51.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix: fix resize error when remake, and re-normal aniamtion bug, fix #4070\n\n", + "type": "none", + "packageName": "@visactor/vchart" + } + ], + "packageName": "@visactor/vchart", + "email": "dingling112@gmail.com" +} \ No newline at end of file diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index 6ad245c650..8c28acbe9d 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -22,8 +22,8 @@ importers: '@visactor/vchart-extension': workspace:2.0.0 '@visactor/vchart-theme': ~1.6.6 '@visactor/vmind': 1.2.4-alpha.5 - '@visactor/vrender': 1.0.3 - '@visactor/vrender-kits': 1.0.3 + '@visactor/vrender': 1.0.7 + '@visactor/vrender-kits': 1.0.7 '@visactor/vtable': 1.19.0-alpha.0 '@visactor/vtable-calendar': 1.19.0-alpha.0 '@visactor/vtable-editors': 1.19.0-alpha.0 @@ -59,8 +59,8 @@ importers: '@visactor/vchart-extension': link:../packages/vchart-extension '@visactor/vchart-theme': 1.6.9 '@visactor/vmind': 1.2.4-alpha.5 - '@visactor/vrender': 1.0.3 - '@visactor/vrender-kits': 1.0.3 + '@visactor/vrender': 1.0.7 + '@visactor/vrender-kits': 1.0.7 '@visactor/vtable': 1.19.0-alpha.0 '@visactor/vtable-calendar': 1.19.0-alpha.0 '@visactor/vtable-editors': 1.19.0-alpha.0 @@ -144,8 +144,8 @@ importers: '@types/offscreencanvas': 2019.6.4 '@types/react-is': ^17.0.3 '@visactor/vchart': workspace:2.0.0 - '@visactor/vrender-core': 1.0.3 - '@visactor/vrender-kits': 1.0.3 + '@visactor/vrender-core': 1.0.7 + '@visactor/vrender-kits': 1.0.7 '@visactor/vutils': ~1.0.6 '@vitejs/plugin-react': 3.1.0 eslint: ~8.18.0 @@ -164,8 +164,8 @@ importers: vite: 3.2.6 dependencies: '@visactor/vchart': link:../vchart - '@visactor/vrender-core': 1.0.3 - '@visactor/vrender-kits': 1.0.3 + '@visactor/vrender-core': 1.0.7 + '@visactor/vrender-kits': 1.0.7 '@visactor/vutils': 1.0.6 react-is: 18.3.1 devDependencies: @@ -208,8 +208,8 @@ importers: '@types/react-is': ^17.0.3 '@visactor/vchart': workspace:2.0.0 '@visactor/vchart-extension': workspace:2.0.0 - '@visactor/vrender-core': 1.0.3 - '@visactor/vrender-kits': 1.0.3 + '@visactor/vrender-core': 1.0.7 + '@visactor/vrender-kits': 1.0.7 '@visactor/vutils': ~1.0.6 '@vitejs/plugin-react': 3.1.0 eslint: ~8.18.0 @@ -230,8 +230,8 @@ importers: dependencies: '@visactor/vchart': link:../vchart '@visactor/vchart-extension': link:../vchart-extension - '@visactor/vrender-core': 1.0.3 - '@visactor/vrender-kits': 1.0.3 + '@visactor/vrender-core': 1.0.7 + '@visactor/vrender-kits': 1.0.7 '@visactor/vutils': 1.0.6 react-is: 18.3.1 devDependencies: @@ -371,10 +371,10 @@ importers: '@types/offscreencanvas': 2019.6.4 '@visactor/vdataset': ~1.0.6 '@visactor/vlayouts': ~1.0.6 - '@visactor/vrender-animate': 1.0.3 - '@visactor/vrender-components': 1.0.3 - '@visactor/vrender-core': 1.0.3 - '@visactor/vrender-kits': 1.0.3 + '@visactor/vrender-animate': 1.0.7 + '@visactor/vrender-components': 1.0.7 + '@visactor/vrender-core': 1.0.7 + '@visactor/vrender-kits': 1.0.7 '@visactor/vscale': ~1.0.6 '@visactor/vutils': ~1.0.6 '@visactor/vutils-extension': workspace:2.0.0 @@ -413,10 +413,10 @@ importers: dependencies: '@visactor/vdataset': 1.0.6 '@visactor/vlayouts': 1.0.6 - '@visactor/vrender-animate': 1.0.3 - '@visactor/vrender-components': 1.0.3 - '@visactor/vrender-core': 1.0.3 - '@visactor/vrender-kits': 1.0.3 + '@visactor/vrender-animate': 1.0.7 + '@visactor/vrender-components': 1.0.7 + '@visactor/vrender-core': 1.0.7 + '@visactor/vrender-kits': 1.0.7 '@visactor/vscale': 1.0.6 '@visactor/vutils': 1.0.6 '@visactor/vutils-extension': link:../vutils-extension @@ -478,10 +478,10 @@ importers: '@visactor/vchart': workspace:2.0.0 '@visactor/vdataset': ~1.0.6 '@visactor/vlayouts': ~1.0.6 - '@visactor/vrender-animate': 1.0.3 - '@visactor/vrender-components': 1.0.3 - '@visactor/vrender-core': 1.0.3 - '@visactor/vrender-kits': 1.0.3 + '@visactor/vrender-animate': 1.0.7 + '@visactor/vrender-components': 1.0.7 + '@visactor/vrender-core': 1.0.7 + '@visactor/vrender-kits': 1.0.7 '@visactor/vutils': ~1.0.6 '@vitejs/plugin-react': 3.1.0 canvas: 2.11.2 @@ -503,10 +503,10 @@ importers: '@visactor/vchart': link:../vchart '@visactor/vdataset': 1.0.6 '@visactor/vlayouts': 1.0.6 - '@visactor/vrender-animate': 1.0.3 - '@visactor/vrender-components': 1.0.3 - '@visactor/vrender-core': 1.0.3 - '@visactor/vrender-kits': 1.0.3 + '@visactor/vrender-animate': 1.0.7 + '@visactor/vrender-components': 1.0.7 + '@visactor/vrender-core': 1.0.7 + '@visactor/vrender-kits': 1.0.7 '@visactor/vutils': 1.0.6 devDependencies: '@internal/bundler': link:../../tools/bundler @@ -878,9 +878,9 @@ importers: '@typescript-eslint/eslint-plugin': 5.30.0 '@typescript-eslint/parser': 5.30.0 '@visactor/vchart': workspace:2.0.0 - '@visactor/vrender': 1.0.3 - '@visactor/vrender-core': 1.0.3 - '@visactor/vrender-kits': 1.0.3 + '@visactor/vrender': 1.0.7 + '@visactor/vrender-core': 1.0.7 + '@visactor/vrender-kits': 1.0.7 '@visactor/vutils': ~1.0.6 cross-env: ^7.0.3 eslint: ~8.18.0 @@ -893,9 +893,9 @@ importers: vite: 3.2.6 dependencies: '@visactor/vchart': link:../../packages/vchart - '@visactor/vrender': 1.0.3 - '@visactor/vrender-core': 1.0.3 - '@visactor/vrender-kits': 1.0.3 + '@visactor/vrender': 1.0.7 + '@visactor/vrender-core': 1.0.7 + '@visactor/vrender-kits': 1.0.7 '@visactor/vutils': 1.0.6 devDependencies: '@internal/bundler': link:../bundler @@ -4884,10 +4884,10 @@ packages: '@visactor/vutils': 1.0.4 dev: false - /@visactor/vrender-animate/1.0.3: - resolution: {integrity: sha512-F6E4ngeFfP//MRd2P8uitDsO9q669bFiNnIbbS06+vjca893kfg2S4HHd6X0DaS9Efz66FINNxqUoDXRzl1gYA==} + /@visactor/vrender-animate/1.0.7: + resolution: {integrity: sha512-G9xyW1+4DaYqa0U3eus4h7yuU3kZAJmsDL9VL+H77YgkaozUdJOUo0qGvwIgB1WzjKwGnxbbygIi7GBzxOZ8YQ==} dependencies: - '@visactor/vrender-core': 1.0.3 + '@visactor/vrender-core': 1.0.7 '@visactor/vutils': 1.0.6 dev: false @@ -4901,12 +4901,12 @@ packages: '@visactor/vutils': 1.0.4 dev: false - /@visactor/vrender-components/1.0.3: - resolution: {integrity: sha512-reQgGRW5/LMm2ArM1m8hM1jg+eDOU5dS/bg/uT3rqayl2ylfa/WHJwemileL6rQKLM+uFyH50RpGXVDV8PQv8w==} + /@visactor/vrender-components/1.0.7: + resolution: {integrity: sha512-EgfCYPf5dNv9xZt8zgJhIxW3GtGIglyyfJjt5pNsv90XDyXplMpCngPwA/kwr8hYRs/gt3Rdynfs49alDnClAQ==} dependencies: - '@visactor/vrender-animate': 1.0.3 - '@visactor/vrender-core': 1.0.3 - '@visactor/vrender-kits': 1.0.3 + '@visactor/vrender-animate': 1.0.7 + '@visactor/vrender-core': 1.0.7 + '@visactor/vrender-kits': 1.0.7 '@visactor/vscale': 1.0.6 '@visactor/vutils': 1.0.6 dev: false @@ -4918,8 +4918,8 @@ packages: color-convert: 2.0.1 dev: false - /@visactor/vrender-core/1.0.3: - resolution: {integrity: sha512-g+aPhX7WK/4FrDiAAX8hZRfoHtG2JmB2/73AaU8SMuWMYBFMPwTSBXQD5oI4vqeZ3/4p0yoSjXXaAL6t0d5ZTw==} + /@visactor/vrender-core/1.0.7: + resolution: {integrity: sha512-1ncnFf6gRQXARDLGuRoqhVOfb8RB0zvBIHlIQ5tqYnjoFSbowgLmQ87xSatt3BlirRqLcPYSRLi48jKYOox0/w==} dependencies: '@visactor/vutils': 1.0.6 color-convert: 2.0.1 @@ -4936,23 +4936,23 @@ packages: roughjs: 4.5.2 dev: false - /@visactor/vrender-kits/1.0.3: - resolution: {integrity: sha512-RKO6zsYMU8ZhFgNa97lmwJEsm34MgV9CZLmDmMZ1Af9FkhwDYYaoMvZLHP47mjgQMGm4dnGUBfhPaZEqk31Dvw==} + /@visactor/vrender-kits/1.0.7: + resolution: {integrity: sha512-SZr0GaQM8JJB7dHr8MmQ4EDMW+m9LAWO0N83i1pD5cvDCzMtc9iIUl8MfEI1tyre08hhCLRZZaM3yW06I5MoIQ==} dependencies: '@resvg/resvg-js': 2.4.1 - '@visactor/vrender-core': 1.0.3 + '@visactor/vrender-core': 1.0.7 '@visactor/vutils': 1.0.6 gifuct-js: 2.1.2 lottie-web: 5.13.0 roughjs: 4.5.2 dev: false - /@visactor/vrender/1.0.3: - resolution: {integrity: sha512-T52M9aE7EEgwP/4/ycEDA7kyhzoZh378bzsZExP7B+zDCgZj0uQLaD7sodhXanBm6wmoNBC6voAg4ufinAM3tQ==} + /@visactor/vrender/1.0.7: + resolution: {integrity: sha512-GI7OgNCsb5/xepqcztx6f8N1dEaojDSVCN9NQ6cN4uTU5F6IvnMaS9K+RUbmK+Y0qaT8aupGC3BK8PMkcWJ3zw==} dependencies: - '@visactor/vrender-animate': 1.0.3 - '@visactor/vrender-core': 1.0.3 - '@visactor/vrender-kits': 1.0.3 + '@visactor/vrender-animate': 1.0.7 + '@visactor/vrender-core': 1.0.7 + '@visactor/vrender-kits': 1.0.7 dev: false /@visactor/vscale/0.18.18: diff --git a/docs/package.json b/docs/package.json index d1085b329d..dde2f21d88 100644 --- a/docs/package.json +++ b/docs/package.json @@ -19,8 +19,8 @@ "@visactor/vchart-theme": "~1.6.6", "@visactor/vmind": "1.2.4-alpha.5", "@visactor/vutils": "~1.0.6", - "@visactor/vrender": "1.0.3", - "@visactor/vrender-kits": "1.0.3", + "@visactor/vrender": "1.0.7", + "@visactor/vrender-kits": "1.0.7", "@visactor/vtable": "1.19.0-alpha.0", "@visactor/vtable-editors": "1.19.0-alpha.0", "@visactor/vtable-gantt": "1.19.0-alpha.0", diff --git a/packages/openinula-vchart/package.json b/packages/openinula-vchart/package.json index b3bf84a41a..0d73ab8ee6 100644 --- a/packages/openinula-vchart/package.json +++ b/packages/openinula-vchart/package.json @@ -30,8 +30,8 @@ "dependencies": { "@visactor/vchart": "workspace:2.0.0", "@visactor/vutils": "~1.0.6", - "@visactor/vrender-core": "1.0.3", - "@visactor/vrender-kits": "1.0.3", + "@visactor/vrender-core": "1.0.7", + "@visactor/vrender-kits": "1.0.7", "react-is": "^18.2.0" }, "devDependencies": { diff --git a/packages/react-vchart/package.json b/packages/react-vchart/package.json index 424c63ff41..f4dec9c2f3 100644 --- a/packages/react-vchart/package.json +++ b/packages/react-vchart/package.json @@ -31,8 +31,8 @@ "@visactor/vchart": "workspace:2.0.0", "@visactor/vchart-extension": "workspace:2.0.0", "@visactor/vutils": "~1.0.6", - "@visactor/vrender-core": "1.0.3", - "@visactor/vrender-kits": "1.0.3", + "@visactor/vrender-core": "1.0.7", + "@visactor/vrender-kits": "1.0.7", "react-is": "^18.2.0" }, "devDependencies": { diff --git a/packages/vchart-extension/package.json b/packages/vchart-extension/package.json index fe5dcd0fca..e0535554fb 100644 --- a/packages/vchart-extension/package.json +++ b/packages/vchart-extension/package.json @@ -21,10 +21,10 @@ "start": "ts-node __tests__/runtime/browser/scripts/initVite.ts && vite serve __tests__/runtime/browser" }, "dependencies": { - "@visactor/vrender-core": "1.0.3", - "@visactor/vrender-kits": "1.0.3", - "@visactor/vrender-components": "1.0.3", - "@visactor/vrender-animate": "1.0.3", + "@visactor/vrender-core": "1.0.7", + "@visactor/vrender-kits": "1.0.7", + "@visactor/vrender-components": "1.0.7", + "@visactor/vrender-animate": "1.0.7", "@visactor/vutils": "~1.0.6", "@visactor/vdataset": "~1.0.6", "@visactor/vlayouts": "~1.0.6", diff --git a/packages/vchart/package.json b/packages/vchart/package.json index aaa64be50a..df37d12a25 100644 --- a/packages/vchart/package.json +++ b/packages/vchart/package.json @@ -122,10 +122,10 @@ "@visactor/vdataset": "~1.0.6", "@visactor/vscale": "~1.0.6", "@visactor/vlayouts": "~1.0.6", - "@visactor/vrender-core": "1.0.3", - "@visactor/vrender-kits": "1.0.3", - "@visactor/vrender-components": "1.0.3", - "@visactor/vrender-animate": "1.0.3", + "@visactor/vrender-core": "1.0.7", + "@visactor/vrender-kits": "1.0.7", + "@visactor/vrender-components": "1.0.7", + "@visactor/vrender-animate": "1.0.7", "@visactor/vutils-extension": "workspace:2.0.0" }, "publishConfig": { diff --git a/packages/vchart/src/compile/compiler.ts b/packages/vchart/src/compile/compiler.ts index dbc054dccf..0cebcf2520 100644 --- a/packages/vchart/src/compile/compiler.ts +++ b/packages/vchart/src/compile/compiler.ts @@ -82,6 +82,9 @@ export class Compiler implements ICompiler { this._option = option; } + getChart() { + return this._compileChart; + } /** * 获取 canvas dom * @returns HTMLCanvasElement | undefined diff --git a/packages/vchart/src/compile/interface/compilable-item.ts b/packages/vchart/src/compile/interface/compilable-item.ts index 7531efb3fe..a53eb9739d 100644 --- a/packages/vchart/src/compile/interface/compilable-item.ts +++ b/packages/vchart/src/compile/interface/compilable-item.ts @@ -67,6 +67,7 @@ export interface ICompiler { updateLayoutTag: () => void; getLayoutState: () => LayoutState; getRootGroup: () => IGroup; + getChart: () => IChart; } export interface ICompilable { diff --git a/packages/vchart/src/core/vchart.ts b/packages/vchart/src/core/vchart.ts index 44f7a28951..7810d29611 100644 --- a/packages/vchart/src/core/vchart.ts +++ b/packages/vchart/src/core/vchart.ts @@ -694,23 +694,19 @@ export class VChart implements IVChart { // 内部模块删除事件时,调用了event Dispatcher.release() 导致用户事件被一起删除 // 外部事件现在需要重新添加 this._userEvents.forEach(e => this._event?.on(e.eType as any, e.query as any, e.handler as any)); + } else if (updateResult.reCompile) { + // recompile + // 清除之前的所有 compile 内容 + this._compiler?.clear({ chart: this._chart, vChart: this }); + // 重新compile + this._compiler?.compile({ chart: this._chart, vChart: this }); + } + if (updateResult.reSize) { + const { width, height } = this.getCurrentSize(); - if (updateResult.reSize) { - this._doResize(); - } - } else { - if (updateResult.reCompile) { - // recompile - // 清除之前的所有 compile 内容 - this._compiler?.clear({ chart: this._chart, vChart: this }); - // 重新compile - this._compiler?.compile({ chart: this._chart, vChart: this }); - } - if (updateResult.reSize) { - const { width, height } = this.getCurrentSize(); - this._chart.onResize(width, height, false); - this._compiler.resize(width, height, false); - } + this._currentSize = { width, height }; + this._chart?.onResize(width, height, false); + this._compiler?.resize(width, height, false); } } @@ -1905,23 +1901,21 @@ export class VChart implements IVChart { /** 停止正在进行的所有动画 */ stopAnimation() { - this.getStage()?.stopAnimation(true); + (this.getStage() as any)?.stopAnimation(true); } reRunNormalAnimation() { - this.getStage()?.reApplyAnimationState('normal', true); + (this.getStage() as any)?.reApplyAnimationState('normal', true); } /** 暂停正在进行的所有动画 */ pauseAnimation() { - this.getStage()?.pauseAnimation(true); - // this._compiler?.getVGrammarView()?.animate?.pause(); + (this.getStage() as any)?.pauseAnimation(true); } /** 恢复暂停时正在进行的所有动画 */ resumeAnimation() { - this.getStage()?.resumeAnimation(true); - // this._compiler?.getVGrammarView()?.animate?.resume(); + (this.getStage() as any)?.resumeAnimation(true); } // TODO: 后续需要考虑滚动场景 diff --git a/packages/vchart/src/mark/base/base-mark.ts b/packages/vchart/src/mark/base/base-mark.ts index 3ce40a90a1..8c795e3df9 100644 --- a/packages/vchart/src/mark/base/base-mark.ts +++ b/packages/vchart/src/mark/base/base-mark.ts @@ -189,9 +189,34 @@ export class BaseMark extends GrammarItem implements IMar getAnimationConfig() { return this._animationConfig; } + setAnimationConfig(config: Partial) { // group mark 动画默认只挂到自己 const defaultPrams = this.type === 'group' ? { selfOnly: true } : {}; + const formatAnimationCfg = (cfg: IAnimationConfig) => { + const options = (cfg as any)!.options ?? {}; + + return { + ...defaultPrams, + ...cfg, + options: (datum: any, graphic: IMarkGraphic, customParams: any) => { + const _options = typeof options === 'function' ? options(datum, graphic, customParams) : options; + + if (graphic && graphic.context && graphic.context.compiler && isValid(graphic.context.modelId)) { + const model = graphic.context.compiler.getChart()?.getModelById(graphic.context.modelId); + + return { + ..._options, + layoutRect: (model as any)?.getLayoutRect?.() + }; + } + + return { + ..._options + }; + } + }; + }; // 封装options,批量添加一些默认参数 const animationConfig: Partial = {}; @@ -199,26 +224,9 @@ export class BaseMark extends GrammarItem implements IMar Object.keys(config).forEach(key => { const value = (config as any)[key]; if (isArray(value)) { - (animationConfig as any)[key] = value.map(item => { - const options = item!.options ?? {}; - - return { - ...defaultPrams, - ...item, - options: (...args: any[]) => { - const _options = typeof options === 'function' ? options(...args) : options; - return { - ..._options, - layoutRect: (this.model as any).getLayoutRect?.() - }; - } - }; - }); - } else { - (animationConfig as any)[key] = { - ...defaultPrams, - ...(config as any)[key] - }; + (animationConfig as any)[key] = value.map(formatAnimationCfg); + } else if (isValid(value)) { + (animationConfig as any)[key] = formatAnimationCfg(value); } }); this._animationConfig = animationConfig; @@ -1061,6 +1069,7 @@ export class BaseMark extends GrammarItem implements IMar protected _getCommonContext() { return { + compiler: this.getCompiler(), markType: this.type as MarkTypeEnum, markId: this.id, modelId: this.model.id, diff --git a/packages/vchart/src/mark/interface/common.ts b/packages/vchart/src/mark/interface/common.ts index 93eb2ff77f..be6fdd7337 100644 --- a/packages/vchart/src/mark/interface/common.ts +++ b/packages/vchart/src/mark/interface/common.ts @@ -14,6 +14,7 @@ import type { Datum, StringOrNumber } from '../../typings'; import type { IGraphic } from '@visactor/vrender-core'; import type { IGroupMark } from './mark'; import type { IAnimationConfig } from '../../animation/interface'; +import type { ICompiler } from '../../compile/interface'; export interface VisualScaleType { scale: IBaseScale; @@ -62,6 +63,13 @@ export type DiffStateValues = 'update' | 'enter' | 'exit'; export type AnimationStateValues = 'appear' | 'enter' | 'update' | 'exit' | 'disappear' | 'none' | 'state'; export interface IGraphicContext { + /** + * 编译器 + */ + compiler: ICompiler; + /** + * mark的类型 + */ markType: MarkTypeEnum; /** * 图形所属mark对应的id,自增id diff --git a/packages/vstory/package.json b/packages/vstory/package.json index 43351c46c3..d750e26255 100644 --- a/packages/vstory/package.json +++ b/packages/vstory/package.json @@ -21,9 +21,9 @@ }, "dependencies": { "@visactor/vchart": "workspace:1.11.0", - "@visactor/vrender-core": "1.0.3", - "@visactor/vrender-kits": "1.0.3", - "@visactor/vrender-components": "1.0.3", + "@visactor/vrender-core": "1.0.7", + "@visactor/vrender-kits": "1.0.7", + "@visactor/vrender-components": "1.0.7", "@visactor/vutils": "~1.0.6" }, "devDependencies": { diff --git a/tools/story-player/package.json b/tools/story-player/package.json index 5aaa9d7849..605cf7b3d4 100644 --- a/tools/story-player/package.json +++ b/tools/story-player/package.json @@ -56,10 +56,10 @@ "vite": "3.2.6" }, "dependencies": { - "@visactor/vrender-core": "1.0.3", - "@visactor/vrender-kits": "1.0.3", + "@visactor/vrender-core": "1.0.7", + "@visactor/vrender-kits": "1.0.7", "@visactor/vchart": "workspace:2.0.0", - "@visactor/vrender": "1.0.3", + "@visactor/vrender": "1.0.7", "@visactor/vutils": "~1.0.6" } } \ No newline at end of file