diff --git a/packages/vchart/src/animation/animate-manager.ts b/packages/vchart/src/animation/animate-manager.ts deleted file mode 100644 index c17fb26be2..0000000000 --- a/packages/vchart/src/animation/animate-manager.ts +++ /dev/null @@ -1,65 +0,0 @@ -// import { StateManager } from '../compile/state-manager'; -// import { createID } from '../util/id'; -// import type { IAnimate, IAnimateState } from './interface'; -// // eslint-disable-next-line no-duplicate-imports -// import { AnimationStateEnum } from './interface'; -// import type { StateValueMap } from '../compile/interface/compilable-item'; -// import type { IMarkGraphic } from '../mark/interface/common'; - -// export class AnimateManager extends StateManager implements IAnimate { -// protected declare _stateMap: IAnimateState & StateValueMap; - -// readonly id: number = createID(); - -// updateAnimateState(state: AnimationStateEnum, noRender?: boolean) { -// // when animation state is 'update', do animations by element diffState(enter & update & exit) -// if (state === AnimationStateEnum.update) { -// this.updateState( -// { -// animationState: { -// callback: (datum: any, g: IMarkGraphic) => g.context.diffState -// } -// }, -// noRender -// ); -// } -// // when animation state is 'appear', all valid elements would do appear animation except from exit elements -// else if (state === AnimationStateEnum.appear) { -// this.updateState( -// { -// animationState: { -// callback: (datum: any, g: IMarkGraphic) => { -// return g.context.diffState === 'exit' ? AnimationStateEnum.none : AnimationStateEnum.appear; -// } -// } -// }, -// noRender -// ); -// } -// // when animation state is other types, all elements would do animation by state -// else { -// this.updateState( -// { -// animationState: { -// callback: (datum: any, g: IMarkGraphic) => state -// } -// }, -// noRender -// ); -// } -// } - -// protected _getDefaultStateMap(): IAnimateState & StateValueMap { -// return { -// animationState: { -// callback: (datum: any, g: IMarkGraphic) => { -// return g.context.diffState === 'exit' -// ? AnimationStateEnum.exit -// : g.context.diffState === 'update' -// ? AnimationStateEnum.update -// : AnimationStateEnum.appear; -// } -// } -// }; -// } -// } diff --git a/packages/vchart/src/core/vchart.ts b/packages/vchart/src/core/vchart.ts index bdcac157c5..44f7a28951 100644 --- a/packages/vchart/src/core/vchart.ts +++ b/packages/vchart/src/core/vchart.ts @@ -814,8 +814,12 @@ export class VChart implements IVChart { } return diffState; }; - this._compiler.getRootMarks().forEach(mark => { - mark.updateAnimationState(updateGraphicAnimationState); + + this._chart?.getAllRegions().forEach(region => { + region.updateAnimateStateCallback(updateGraphicAnimationState); + }); + this._chart?.getAllComponents().forEach(component => { + component.updateAnimateStateCallback(updateGraphicAnimationState); }); } } @@ -1901,16 +1905,22 @@ export class VChart implements IVChart { /** 停止正在进行的所有动画 */ stopAnimation() { - // this._compiler?.getVGrammarView()?.animate?.stop(); + this.getStage()?.stopAnimation(true); + } + + reRunNormalAnimation() { + this.getStage()?.reApplyAnimationState('normal', true); } /** 暂停正在进行的所有动画 */ pauseAnimation() { + this.getStage()?.pauseAnimation(true); // this._compiler?.getVGrammarView()?.animate?.pause(); } /** 恢复暂停时正在进行的所有动画 */ resumeAnimation() { + this.getStage()?.resumeAnimation(true); // this._compiler?.getVGrammarView()?.animate?.resume(); } diff --git a/packages/vchart/src/mark/base/base-mark.ts b/packages/vchart/src/mark/base/base-mark.ts index 02081e0e4c..abd7959e22 100644 --- a/packages/vchart/src/mark/base/base-mark.ts +++ b/packages/vchart/src/mark/base/base-mark.ts @@ -1075,7 +1075,6 @@ export class BaseMark extends GrammarItem implements IMar this._dataByKey = (mark as any)._dataByKey; this._prevDataByKey = (mark as any)._prevDataByKey; this.needClear = (mark as any).needClear; - this._aniamtionStateCallback = (mark as any)._aniamtionStateCallback; } private _parseProgressiveContext(data: Datum[]) { @@ -1272,7 +1271,19 @@ export class BaseMark extends GrammarItem implements IMar } protected _setAnimationState(g: IMarkGraphic) { - const customizedState = this._aniamtionStateCallback ? this._aniamtionStateCallback(g) : undefined; + const callback = + (this.type === MarkTypeEnum.component + ? this.model.getAnimationStateCallback() + : (this.model as ISeries).getRegion?.()?.getAnimationStateCallback()) || + ((g: IMarkGraphic) => { + const diffState = g.context?.diffState; + return diffState === AnimationStateEnum.exit + ? AnimationStateEnum.exit + : diffState === AnimationStateEnum.update + ? AnimationStateEnum.update + : AnimationStateEnum.appear; + }); + const customizedState = callback(g); g.context.animationState = customizedState ?? g.context.diffState; @@ -1977,12 +1988,6 @@ export class BaseMark extends GrammarItem implements IMar } } - protected _aniamtionStateCallback: (g: IMarkGraphic) => AnimationStateValues; - - updateAnimationState(callback: (graphic: IMarkGraphic) => AnimationStateValues) { - this._aniamtionStateCallback = callback; - } - hasAnimationByState(state: AnimationStateValues) { if (!state || !this._animationConfig || !(this._animationConfig as any)[state]) { return false; diff --git a/packages/vchart/src/mark/group.ts b/packages/vchart/src/mark/group.ts index 361364f971..c0f86cf163 100644 --- a/packages/vchart/src/mark/group.ts +++ b/packages/vchart/src/mark/group.ts @@ -29,6 +29,7 @@ export class GroupMark extends BaseMark implements IGroupMark { return this._marks; } + protected _diffState = DiffState.enter; protected declare _product: Maybe; declare getProduct: () => Maybe; @@ -117,12 +118,11 @@ export class GroupMark extends BaseMark implements IGroupMark { } const style = this._simpleStyle ?? this.getAttributesOfState({}); - const prevState = this._product.context?.diffState; this._product.context = { ...this._product.context, ...this._getCommonContext(), - diffState: prevState ? DiffState.update : DiffState.enter + diffState: this._diffState }; this._setAnimationState(this._product as unknown as IMarkGraphic); const newAttrs = this._getAttrsFromConfig(style); @@ -147,6 +147,11 @@ export class GroupMark extends BaseMark implements IGroupMark { this.needClear = true; } + clearExitGraphics() { + // group 暂时不需要clear元素，完成首次渲染后 将状态设置为update + this._diffState = DiffState.update; + } + render(): void { if (this._isCommited) { log(`render mark: ${this.getProductId()}, type is ${this.type}`); @@ -159,14 +164,6 @@ export class GroupMark extends BaseMark implements IGroupMark { }); } - updateAnimationState(callback: (g: IMarkGraphic) => AnimationStateValues) { - super.updateAnimationState(callback); - - this.getMarks().forEach(mark => { - mark.updateAnimationState(callback); - }); - } - release() { super.release(); this.removeProduct(); diff --git a/packages/vchart/src/mark/interface/common.ts b/packages/vchart/src/mark/interface/common.ts index 82ea9942a7..c249f4f8d7 100644 --- a/packages/vchart/src/mark/interface/common.ts +++ b/packages/vchart/src/mark/interface/common.ts @@ -228,8 +228,6 @@ export interface IMarkRaw extends ICompilableMark { renderProgressive: () => void; /** 增量流程后，是否执行动画 */ canAnimateAfterProgressive: () => boolean; - /** 更新图元动画状态 */ - updateAnimationState: (callback: (graphic: IMarkGraphic) => AnimationStateValues) => void; /** 执行动画 */ runAnimation: () => void; /** 是否需要清除旧的数据 */ diff --git a/packages/vchart/src/model/base-model.ts b/packages/vchart/src/model/base-model.ts index 6319b31b5c..c1181c35b0 100644 --- a/packages/vchart/src/model/base-model.ts +++ b/packages/vchart/src/model/base-model.ts @@ -6,14 +6,21 @@ import type { IModel, IModelInitOption, IModelOption, - IModelRenderOption, IModelEvaluateOption, IModelSpec, IModelMarkInfo, IModelSpecInfo } from './interface'; import type { CoordinateType } from '../typings/coordinate'; -import type { ICompileMarkConfig, IMark, IMarkOption, IMarkRaw, IMarkStyle } from '../mark/interface'; +import type { + AnimationStateValues, + ICompileMarkConfig, + IMark, + IMarkGraphic, + IMarkOption, + IMarkRaw, + IMarkStyle +} from '../mark/interface'; import type { Datum, StateValueType, @@ -324,4 +331,14 @@ export abstract class BaseModel extends CompilableBase imp } return index; } + + private _aniamtionStateCallback: (graphic: IMarkGraphic) => AnimationStateValues; + + updateAnimateStateCallback(callback: (graphic: IMarkGraphic) => AnimationStateValues) { + this._aniamtionStateCallback = callback; + } + + getAnimationStateCallback() { + return this._aniamtionStateCallback; + } } diff --git a/packages/vchart/src/model/interface.ts b/packages/vchart/src/model/interface.ts index c779a6d11d..b018e3c59c 100644 --- a/packages/vchart/src/model/interface.ts +++ b/packages/vchart/src/model/interface.ts @@ -1,13 +1,12 @@ import type { IBoundsLike } from '@visactor/vutils'; import type { DataSet, DataView } from '@visactor/vdataset'; import type { IEvent, IEventDispatcher } from '../event/interface'; -import type { IMark, IMarkRaw, IMarkStyle, MarkTypeEnum } from '../mark/interface'; +import type { AnimationStateValues, IMark, IMarkGraphic, IMarkRaw, IMarkStyle, MarkTypeEnum } from '../mark/interface'; import type { RenderMode } from '../typings/spec/common'; import type { StringOrNumber } from '../typings/common'; import type { IGroupMarkSpec, ConvertToMarkStyleSpec, ICommonSpec } from '../typings/visual'; import type { IRect } from '../typings/space'; import type { IPoint, CoordinateType } from '../typings/coordinate'; -import type { ITheme } from '../theme/interface'; import type { StateValueType } from '../typings/spec'; import type { ICompilable, ICompilableInitOption } from '../compile/interface'; import type { IGlobalScale } from '../scale/interface'; @@ -23,9 +22,6 @@ import type { IVChart } from '../core/interface'; import type { ICompilableData } from '../compile/data/interface'; import type { IDimensionData, IDimensionInfo } from '../event/events/dimension/interface'; import type { IAxis } from '../component/axis'; -import type { CrossHairStateItem } from '../component/crosshair/interface/common'; -import type { RectCrosshairAttrs } from '@visactor/vrender-components'; - // TODO: // eslint-disable-next-line @typescript-eslint/no-empty-interface export interface IModelInitOption {} @@ -139,6 +135,9 @@ export interface IModel extends ICompilable { initMarkStyleWithSpec: (mark?: IMark, spec?: any) => void; getSpecInfo: () => IModelSpecInfo; + + updateAnimateStateCallback: (callback: (graphic: IMarkGraphic) => AnimationStateValues) => void; + getAnimationStateCallback: () => (graphic: IMarkGraphic) => AnimationStateValues; } export interface ILayoutModel extends IModel { diff --git a/packages/vchart/src/region/region.ts b/packages/vchart/src/region/region.ts index a49d82b174..4c8d9d3cc1 100644 --- a/packages/vchart/src/region/region.ts +++ b/packages/vchart/src/region/region.ts @@ -89,6 +89,7 @@ export class Region extends LayoutModel super.created(); const clip = this._spec.clip ?? this._getClipDefaultValue(); this._groupMark = this._createGroupMark('regionGroup', this.userId, this.layoutZIndex); + if ((this._spec as IGeoRegionSpec).roam) { this._groupMark.setMarkConfig({ interactive: true }); }