@visactor/vrender-components 1.1.0-alpha.2 → 1.1.0-alpha.21

package/es/animation/axis-animate.d.ts

@@ -5,6 +5,7 @@ export declare class AxisEnter extends AComponentAnimate<any> {
 export declare class AxisUpdate extends AComponentAnimate<any> {
     onBind(): void;
     deleteSelfAttr(key: string): void;
+    deleteSelfAttrs(keys: string[]): void;
     protected tryPreventConflict(): void;
 }
 export declare function registerAxisAnimate(): void;

package/es/animation/axis-animate.js

@@ -1,5 +1,7 @@
 import { AComponentAnimate, AnimateExecutor, createComponentAnimator } from "@visactor/vrender-animate";
 
+import { commitUpdateAnimationTarget } from "./static-truth";
+
 export class AxisEnter extends AComponentAnimate {
     onBind() {
         var _a;
@@ -11,7 +13,10 @@ export class AxisEnter extends AComponentAnimate {
         if (lastScale && getTickCoord && currData) {
             ratio = .7;
             const point = getTickCoord(lastScale.scale(currData.rawValue)), newX = this.target.attribute.x, newY = this.target.attribute.y;
-            this.target.setAttributes({
+            commitUpdateAnimationTarget(this.target, {
+                x: newX,
+                y: newY
+            }, {
                 x: point.x,
                 y: point.y
             }), animator.animate(this.target, {
@@ -37,8 +42,8 @@ export class AxisUpdate extends AComponentAnimate {
     onBind() {
         const animator = createComponentAnimator(this.target);
         this._animator = animator;
-        const duration = this.duration, easing = this.easing, {config: config, diffAttrs: diffAttrs} = this.params;
-        animator.animate(this.target, {
+        const duration = this.duration, easing = this.easing, {diffAttrs: diffAttrs} = this.params;
+        commitUpdateAnimationTarget(this.target, Object.assign({}, diffAttrs)), animator.animate(this.target, {
             type: "to",
             to: Object.assign({}, diffAttrs),
             duration: duration,
@@ -49,7 +54,10 @@ export class AxisUpdate extends AComponentAnimate {
         }), this.completeBind(animator);
     }
     deleteSelfAttr(key) {
-        super.deleteSelfAttr(key), this._animator.deleteSelfAttr(key);
+        this.deleteSelfAttrs([ key ]);
+    }
+    deleteSelfAttrs(keys) {
+        super.deleteSelfAttrs(keys), this._animator.deleteSelfAttrs(keys);
     }
     tryPreventConflict() {}
 }

package/es/animation/axis-animate.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/animation/axis-animate.ts"],"names":[],"mappings":"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","file":"axis-animate.js","sourcesContent":["import { AComponentAnimate, AnimateExecutor, createComponentAnimator } from '@visactor/vrender-animate';\n\n/**\n * AxisEnter class handles the enter animation for Axis components\n */\nexport class AxisEnter extends AComponentAnimate<any> {\n  onBind(): void {\n    const animator = createComponentAnimator(this.target);\n    this._animator = animator;\n    const duration = this.duration;\n    const easing = this.easing;\n    const { config, lastScale, getTickCoord } = this.params;\n\n    let ratio = 1;\n    const currData = this.target.data;\n    if (lastScale && getTickCoord && currData) {\n      ratio = 0.7;\n\n      const oldValue = lastScale.scale(currData.rawValue);\n      const point = getTickCoord(oldValue);\n      const newX = this.target.attribute.x;\n      const newY = this.target.attribute.y;\n\n      this.target.setAttributes({ x: point.x, y: point.y });\n      animator.animate(this.target, {\n        type: 'to',\n        to: { x: newX, y: newY },\n        duration,\n        easing\n      });\n    }\n\n    // if (updateEls && updateEls.length > 1) {\n    //   ratio = 0.5;\n    //   const oldData1 = updateEls[0].oldEl.data;\n    //   const { rawValue: oldRawValue1, value: oldValue1 } = oldData1;\n    //   const oldData2 = updateEls[1].oldEl.data;\n    //   const { rawValue: oldRawValue2, value: oldValue2 } = oldData2;\n    //   const data = this.target.data;\n    //   const { rawValue: newRawValue } = data;\n    //   // rawValue 是原始值，value是映射出来的值，假设是线性映射，计算一下newRawValue在old阶段的value是什么值\n    //   const oldValue =\n    //     oldValue1 + ((oldValue2 - oldValue1) * (newRawValue - oldRawValue1)) / (oldRawValue2 - oldRawValue1);\n    //   // 将 x 和 y 做映射\n    //   const oldX1 = updateEls[0].oldEl.attribute.x;\n    //   const oldY1 = updateEls[0].oldEl.attribute.y;\n    //   const oldX2 = updateEls[1].oldEl.attribute.x;\n    //   const oldY2 = updateEls[1].oldEl.attribute.y;\n    //   const oldX = oldX1 + ((oldX2 - oldX1) * (oldValue - oldValue1)) / (oldValue2 - oldValue1);\n    //   const oldY = oldY1 + ((oldY2 - oldY1) * (oldValue - oldValue1)) / (oldValue2 - oldValue1);\n    //   const newX = this.target.attribute.x;\n    //   const newY = this.target.attribute.y;\n\n    //   this.target.setAttributes({ x: oldX, y: oldY });\n    //   animator.animate(this.target, {\n    //     type: 'to',\n    //     to: { x: newX, y: newY },\n    //     duration,\n    //     easing\n    //   });\n    // }\n\n    animator.animate(this.target, {\n      type: config.type ?? 'fadeIn',\n      to: config.to,\n      duration: duration * ratio,\n      easing\n    });\n    this.completeBind(animator);\n  }\n}\n\n/**\n * AxisUpdate class handles the update animation for Axis components\n */\nexport class AxisUpdate extends AComponentAnimate<any> {\n  onBind(): void {\n    const animator = createComponentAnimator(this.target);\n    this._animator = animator;\n    const duration = this.duration;\n    const easing = this.easing;\n    const { config, diffAttrs } = this.params;\n    // this.target.applyAnimationState(\n    //   ['update'],\n    //   [\n    //     {\n    //       name: 'update',\n    //       animation: {\n    //         type: 'to',\n    //         to: { ...this.props },\n    //         duration,\n    //         easing,\n    //         customParameters: {\n    //           diffAttrs: { ...this.props }\n    //         }\n    //       }\n    //     }\n    //   ]\n    // );\n    // console.log('this.props', this.props, { ...this.target.attribute });\n    animator.animate(this.target, {\n      type: 'to',\n      to: { ...diffAttrs },\n      duration,\n      easing,\n      customParameters: {\n        diffAttrs: { ...diffAttrs }\n      }\n    });\n    this.completeBind(animator);\n  }\n\n  // 轴动画本身没有逻辑，具体通过animator中执行，所以当需要屏蔽自身属性时，需要通过animator中执行\n  deleteSelfAttr(key: string): void {\n    super.deleteSelfAttr(key);\n    this._animator.deleteSelfAttr(key);\n  }\n\n  // 轴动画本身没有逻辑，具体通过animator中执行，所以本身不需要屏蔽冲突\n  protected tryPreventConflict(): void {\n    return;\n  }\n}\n\nexport function registerAxisAnimate() {\n  // Label update animation\n  AnimateExecutor.registerBuiltInAnimate('axisEnter', AxisEnter);\n  AnimateExecutor.registerBuiltInAnimate('axisUpdate', AxisUpdate);\n}\n"]}
+{"version":3,"sources":["../src/animation/axis-animate.ts"],"names":[],"mappings":"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","file":"axis-animate.js","sourcesContent":["import { AComponentAnimate, AnimateExecutor, createComponentAnimator } from '@visactor/vrender-animate';\nimport { commitUpdateAnimationTarget } from './static-truth';\n\n/**\n * AxisEnter class handles the enter animation for Axis components\n */\nexport class AxisEnter extends AComponentAnimate<any> {\n  onBind(): void {\n    const animator = createComponentAnimator(this.target);\n    this._animator = animator;\n    const duration = this.duration;\n    const easing = this.easing;\n    const { config, lastScale, getTickCoord } = this.params;\n\n    let ratio = 1;\n    const currData = this.target.data;\n    if (lastScale && getTickCoord && currData) {\n      ratio = 0.7;\n\n      const oldValue = lastScale.scale(currData.rawValue);\n      const point = getTickCoord(oldValue);\n      const newX = this.target.attribute.x;\n      const newY = this.target.attribute.y;\n\n      commitUpdateAnimationTarget(this.target, { x: newX, y: newY }, { x: point.x, y: point.y });\n      animator.animate(this.target, {\n        type: 'to',\n        to: { x: newX, y: newY },\n        duration,\n        easing\n      });\n    }\n\n    // if (updateEls && updateEls.length > 1) {\n    //   ratio = 0.5;\n    //   const oldData1 = updateEls[0].oldEl.data;\n    //   const { rawValue: oldRawValue1, value: oldValue1 } = oldData1;\n    //   const oldData2 = updateEls[1].oldEl.data;\n    //   const { rawValue: oldRawValue2, value: oldValue2 } = oldData2;\n    //   const data = this.target.data;\n    //   const { rawValue: newRawValue } = data;\n    //   // rawValue 是原始值，value是映射出来的值，假设是线性映射，计算一下newRawValue在old阶段的value是什么值\n    //   const oldValue =\n    //     oldValue1 + ((oldValue2 - oldValue1) * (newRawValue - oldRawValue1)) / (oldRawValue2 - oldRawValue1);\n    //   // 将 x 和 y 做映射\n    //   const oldX1 = updateEls[0].oldEl.attribute.x;\n    //   const oldY1 = updateEls[0].oldEl.attribute.y;\n    //   const oldX2 = updateEls[1].oldEl.attribute.x;\n    //   const oldY2 = updateEls[1].oldEl.attribute.y;\n    //   const oldX = oldX1 + ((oldX2 - oldX1) * (oldValue - oldValue1)) / (oldValue2 - oldValue1);\n    //   const oldY = oldY1 + ((oldY2 - oldY1) * (oldValue - oldValue1)) / (oldValue2 - oldValue1);\n    //   const newX = this.target.attribute.x;\n    //   const newY = this.target.attribute.y;\n\n    //   this.target.setAttributes({ x: oldX, y: oldY });\n    //   animator.animate(this.target, {\n    //     type: 'to',\n    //     to: { x: newX, y: newY },\n    //     duration,\n    //     easing\n    //   });\n    // }\n\n    animator.animate(this.target, {\n      type: config.type ?? 'fadeIn',\n      to: config.to,\n      duration: duration * ratio,\n      easing\n    });\n    this.completeBind(animator);\n  }\n}\n\n/**\n * AxisUpdate class handles the update animation for Axis components\n */\nexport class AxisUpdate extends AComponentAnimate<any> {\n  onBind(): void {\n    const animator = createComponentAnimator(this.target);\n    this._animator = animator;\n    const duration = this.duration;\n    const easing = this.easing;\n    const { diffAttrs } = this.params;\n    // this.target.applyAnimationState(\n    //   ['update'],\n    //   [\n    //     {\n    //       name: 'update',\n    //       animation: {\n    //         type: 'to',\n    //         to: { ...this.props },\n    //         duration,\n    //         easing,\n    //         customParameters: {\n    //           diffAttrs: { ...this.props }\n    //         }\n    //       }\n    //     }\n    //   ]\n    // );\n    // console.log('this.props', this.props, { ...this.target.attribute });\n    commitUpdateAnimationTarget(this.target, { ...diffAttrs });\n    animator.animate(this.target, {\n      type: 'to',\n      to: { ...diffAttrs },\n      duration,\n      easing,\n      customParameters: {\n        diffAttrs: { ...diffAttrs }\n      }\n    });\n    this.completeBind(animator);\n  }\n\n  // 轴动画本身没有逻辑，具体通过animator中执行，所以当需要屏蔽自身属性时，需要通过animator中执行\n  deleteSelfAttr(key: string): void {\n    this.deleteSelfAttrs([key]);\n  }\n\n  deleteSelfAttrs(keys: string[]): void {\n    super.deleteSelfAttrs(keys);\n    this._animator.deleteSelfAttrs(keys);\n  }\n\n  // 轴动画本身没有逻辑，具体通过animator中执行，所以本身不需要屏蔽冲突\n  protected tryPreventConflict(): void {\n    return;\n  }\n}\n\nexport function registerAxisAnimate() {\n  // Label update animation\n  AnimateExecutor.registerBuiltInAnimate('axisEnter', AxisEnter);\n  AnimateExecutor.registerBuiltInAnimate('axisUpdate', AxisUpdate);\n}\n"]}

package/es/animation/exit-release.d.ts

@@ -0,0 +1,13 @@
+import type { IAnimate, IGraphic } from '@visactor/vrender-core';
+export type ExitReleaseCallbackState = {
+    finalized: boolean;
+    removeFromParent: boolean;
+    onComplete: (() => void)[];
+};
+export type AnimateExitReleaseState = ExitReleaseCallbackState & {
+    pendingAnimates: Set<IAnimate>;
+};
+export declare function collectTrackedAnimates(graphic: IGraphic, animates?: IAnimate[], visited?: Set<IAnimate>): IAnimate[];
+export declare function appendExitReleaseCallback(state: ExitReleaseCallbackState | undefined, callback?: () => void): void;
+export declare function runExitReleaseCallbacks(callbacks: (() => void)[]): void;
+export declare function bindExitReleaseAnimates<T extends AnimateExitReleaseState>(exitAnimates: IAnimate[], getState: () => T | undefined, finalize: () => void): void;

package/es/animation/exit-release.js

@@ -0,0 +1,31 @@
+export function collectTrackedAnimates(graphic, animates = [], visited = new Set) {
+    var _a, _b, _c, _d, _e;
+    const trackedAnimates = null !== (_c = null === (_b = (_a = graphic).getTrackedAnimates) || void 0 === _b ? void 0 : _b.call(_a)) && void 0 !== _c ? _c : graphic.animates;
+    return null == trackedAnimates || trackedAnimates.forEach((animate => {
+        animate && !visited.has(animate) && (visited.add(animate), animates.push(animate));
+    })), null === (_e = (_d = graphic).forEachChildren) || void 0 === _e || _e.call(_d, (child => {
+        collectTrackedAnimates(child, animates, visited);
+    })), animates;
+}
+
+export function appendExitReleaseCallback(state, callback) {
+    callback && (null == state || state.onComplete.push(callback));
+}
+
+export function runExitReleaseCallbacks(callbacks) {
+    callbacks.forEach((callback => {
+        callback();
+    }));
+}
+
+export function bindExitReleaseAnimates(exitAnimates, getState, finalize) {
+    const finish = animate => {
+        const state = getState();
+        state && !state.finalized && state.pendingAnimates.has(animate) && (state.pendingAnimates.delete(animate), 
+        state.pendingAnimates.size || finalize());
+    };
+    exitAnimates.forEach((animate => {
+        animate.onEnd((() => finish(animate))), animate.onRemove((() => finish(animate)));
+    }));
+}
+//# sourceMappingURL=exit-release.js.map

package/es/animation/exit-release.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/animation/exit-release.ts"],"names":[],"mappings":"AAYA,MAAM,UAAU,sBAAsB,CACpC,OAAiB,EACjB,WAAuB,EAAE,EACzB,UAAyB,IAAI,GAAG,EAAE;;IAElC,MAAM,eAAe,GAAG,MAAA,MAAA,MAAC,OAAe,EAAC,kBAAkB,kDAAI,mCAAK,OAAe,CAAC,QAAQ,CAAC;IAE7F,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,OAAO,CAAC,CAAC,OAAiB,EAAE,EAAE;QAC7C,IAAI,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACpC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YACrB,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SACxB;IACH,CAAC,CAAC,CAAC;IAEH,MAAA,MAAC,OAAkB,EAAC,eAAe,mDAAG,CAAC,KAAe,EAAE,EAAE;QACxD,sBAAsB,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;IACnD,CAAC,CAAC,CAAC;IAEH,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,MAAM,UAAU,yBAAyB,CAAC,KAA2C,EAAE,QAAqB;IAC1G,IAAI,QAAQ,EAAE;QACZ,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAClC;AACH,CAAC;AAED,MAAM,UAAU,uBAAuB,CAAC,SAAyB;IAC/D,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;QAC3B,QAAQ,EAAE,CAAC;IACb,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,uBAAuB,CACrC,YAAwB,EACxB,QAA6B,EAC7B,QAAoB;IAEpB,MAAM,MAAM,GAAG,CAAC,OAAiB,EAAE,EAAE;QACnC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;QACzB,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,SAAS,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACpE,OAAO;SACR;QAED,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,IAAI,EAAE;YAC/B,QAAQ,EAAE,CAAC;SACZ;IACH,CAAC,CAAC;IAEF,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;QAC7B,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;QACrC,OAAO,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC","file":"exit-release.js","sourcesContent":["import type { IAnimate, IGraphic, IGroup } from '@visactor/vrender-core';\n\nexport type ExitReleaseCallbackState = {\n  finalized: boolean;\n  removeFromParent: boolean;\n  onComplete: (() => void)[];\n};\n\nexport type AnimateExitReleaseState = ExitReleaseCallbackState & {\n  pendingAnimates: Set<IAnimate>;\n};\n\nexport function collectTrackedAnimates(\n  graphic: IGraphic,\n  animates: IAnimate[] = [],\n  visited: Set<IAnimate> = new Set()\n): IAnimate[] {\n  const trackedAnimates = (graphic as any).getTrackedAnimates?.() ?? (graphic as any).animates;\n\n  trackedAnimates?.forEach((animate: IAnimate) => {\n    if (animate && !visited.has(animate)) {\n      visited.add(animate);\n      animates.push(animate);\n    }\n  });\n\n  (graphic as IGroup).forEachChildren?.((child: IGraphic) => {\n    collectTrackedAnimates(child, animates, visited);\n  });\n\n  return animates;\n}\n\nexport function appendExitReleaseCallback(state: ExitReleaseCallbackState | undefined, callback?: () => void) {\n  if (callback) {\n    state?.onComplete.push(callback);\n  }\n}\n\nexport function runExitReleaseCallbacks(callbacks: (() => void)[]) {\n  callbacks.forEach(callback => {\n    callback();\n  });\n}\n\nexport function bindExitReleaseAnimates<T extends AnimateExitReleaseState>(\n  exitAnimates: IAnimate[],\n  getState: () => T | undefined,\n  finalize: () => void\n) {\n  const finish = (animate: IAnimate) => {\n    const state = getState();\n    if (!state || state.finalized || !state.pendingAnimates.has(animate)) {\n      return;\n    }\n\n    state.pendingAnimates.delete(animate);\n    if (!state.pendingAnimates.size) {\n      finalize();\n    }\n  };\n\n  exitAnimates.forEach(animate => {\n    animate.onEnd(() => finish(animate));\n    animate.onRemove(() => finish(animate));\n  });\n}\n"]}

package/es/animation/static-truth.d.ts

@@ -0,0 +1,2 @@
+import { type IGraphic } from '@visactor/vrender-core';
+export declare function commitUpdateAnimationTarget(graphic?: IGraphic, targetAttrs?: Record<string, any>, startAttrs?: Record<string, any>): void;

package/es/animation/static-truth.js

@@ -0,0 +1,14 @@
+import { AttributeUpdateType } from "@visactor/vrender-core";
+
+import { cloneDeep } from "@visactor/vutils";
+
+export function commitUpdateAnimationTarget(graphic, targetAttrs, startAttrs) {
+    var _a, _b, _c, _d;
+    if (!graphic || !targetAttrs) return;
+    const committedTargetAttrs = cloneDeep(targetAttrs), transientStartAttrs = cloneDeep(null != startAttrs ? startAttrs : graphic.attribute);
+    graphic.setAttributes(committedTargetAttrs), null === (_b = (_a = graphic).setFinalAttributes) || void 0 === _b || _b.call(_a, committedTargetAttrs), 
+    null === (_d = (_c = graphic).setAttributesAndPreventAnimate) || void 0 === _d || _d.call(_c, transientStartAttrs, !1, {
+        type: AttributeUpdateType.ANIMATE_BIND
+    });
+}
+//# sourceMappingURL=static-truth.js.map

package/es/animation/static-truth.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/animation/static-truth.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAiB,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,MAAM,UAAU,2BAA2B,CACzC,OAAkB,EAClB,WAAiC,EACjC,UAAgC;;IAEhC,IAAI,CAAC,OAAO,IAAI,CAAC,WAAW,EAAE;QAC5B,OAAO;KACR;IAED,MAAM,oBAAoB,GAAG,SAAS,CAAC,WAAW,CAAC,CAAC;IACpD,MAAM,mBAAmB,GAAG,SAAS,CAAC,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,OAAO,CAAC,SAAS,CAAC,CAAC;IAEvE,OAAO,CAAC,aAAa,CAAC,oBAA2B,CAAC,CAAC;IACnD,MAAA,MAAC,OAAe,EAAC,kBAAkB,mDAAG,oBAAoB,CAAC,CAAC;IAC5D,MAAA,MAAC,OAAe,EAAC,8BAA8B,mDAAG,mBAA0B,EAAE,KAAK,EAAE;QACnF,IAAI,EAAE,mBAAmB,CAAC,YAAY;KACvC,CAAC,CAAC;AACL,CAAC","file":"static-truth.js","sourcesContent":["import { AttributeUpdateType, type IGraphic } from '@visactor/vrender-core';\nimport { cloneDeep } from '@visactor/vutils';\n\nexport function commitUpdateAnimationTarget(\n  graphic?: IGraphic,\n  targetAttrs?: Record<string, any>,\n  startAttrs?: Record<string, any>\n) {\n  if (!graphic || !targetAttrs) {\n    return;\n  }\n\n  const committedTargetAttrs = cloneDeep(targetAttrs);\n  const transientStartAttrs = cloneDeep(startAttrs ?? graphic.attribute);\n\n  graphic.setAttributes(committedTargetAttrs as any);\n  (graphic as any).setFinalAttributes?.(committedTargetAttrs);\n  (graphic as any).setAttributesAndPreventAnimate?.(transientStartAttrs as any, false, {\n    type: AttributeUpdateType.ANIMATE_BIND\n  });\n}\n"]}

package/es/axis/animate/group-transition.d.ts

@@ -1,9 +1,9 @@
-import { AnimateMode } from '@visactor/vrender-core';
-import type { IGroup } from '@visactor/vrender-core';
+import { AnimateMode, type IGroup } from '@visactor/vrender-core';
 import { ACustomAnimate } from '@visactor/vrender-animate';
 export declare class GroupTransition extends ACustomAnimate<any> {
     target: IGroup;
     private _newElementAttrMap;
+    private _started;
     mode: AnimateMode;
     onBind(): void;
     onStart(): void;

package/es/axis/animate/group-transition.js

@@ -6,11 +6,14 @@ import { cloneDeep, interpolateString, isEqual, isValidNumber } from "@visactor/
 
 import { traverseGroup } from "../../util";
 
+import { commitUpdateAnimationTarget } from "../../animation/static-truth";
+
 export class GroupTransition extends ACustomAnimate {
     constructor() {
         super(...arguments), this.mode = AnimateMode.NORMAL;
     }
     onBind() {
+        this._started = !1;
         const currentInnerView = this.target.getInnerView(), prevInnerView = this.target.getPrevInnerView();
         prevInnerView && (this._newElementAttrMap = {}, traverseGroup(currentInnerView, (el => {
             var _a, _b, _c, _d, _e, _f;
@@ -27,7 +30,7 @@ export class GroupTransition extends ACustomAnimate {
                                 fillOpacity: null !== (_b = newProps.fillOpacity) && void 0 !== _b ? _b : 1,
                                 strokeOpacity: null !== (_c = newProps.strokeOpacity) && void 0 !== _c ? _c : 1
                             })
-                        }, el.setAttributes(oldEl.attribute);
+                        }, commitUpdateAnimationTarget(el, this._newElementAttrMap[el.id].attrs, cloneDeep(oldEl.attribute));
                     }
                 } else {
                     const finalOpacityAttrs = {
@@ -39,7 +42,7 @@ export class GroupTransition extends ACustomAnimate {
                         state: "enter",
                         node: el,
                         attrs: finalOpacityAttrs
-                    }, el.setAttributes({
+                    }, commitUpdateAnimationTarget(el, finalOpacityAttrs, {
                         opacity: 0,
                         fillOpacity: 0,
                         strokeOpacity: 0
@@ -49,6 +52,8 @@ export class GroupTransition extends ACustomAnimate {
         })));
     }
     onStart() {
+        if (this._started) return;
+        this._started = !0;
         let duration = this.duration, easing = this.easing;
         this._newElementAttrMap && Object.keys(this._newElementAttrMap).forEach((id => {
             var _a;

package/es/axis/animate/group-transition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/axis/animate/group-transition.ts"],"names":[],"mappings":"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","file":"group-transition.js","sourcesContent":["import { AnimateMode } from '@visactor/vrender-core';\nimport type { EasingType, IGraphic, IGroup } from '@visactor/vrender-core';\nimport { ACustomAnimate } from '@visactor/vrender-animate';\nimport type { Dict } from '@visactor/vutils';\nimport { cloneDeep, interpolateString, isEqual, isValidNumber } from '@visactor/vutils';\nimport { traverseGroup } from '../../util';\n\nexport class GroupTransition extends ACustomAnimate<any> {\n  declare target: IGroup;\n\n  private _newElementAttrMap: Dict<any>;\n  mode = AnimateMode.NORMAL; // 组件的群组动画不需要设置走 AnimateMode.SET_ATTR_IMMEDIATELY\n\n  onBind(): void {\n    // @ts-ignore\n    const currentInnerView = this.target.getInnerView();\n    // @ts-ignore\n    const prevInnerView = this.target.getPrevInnerView();\n    if (!prevInnerView) {\n      return;\n    }\n\n    this._newElementAttrMap = {};\n\n    // 遍历新的场景树，将新节点属性更新为旧节点\n    // TODO: 目前只处理更新场景\n    traverseGroup(currentInnerView, (el: IGraphic) => {\n      if ((el as IGraphic).type !== 'group' && el.id) {\n        const oldEl = prevInnerView[el.id];\n        if (oldEl) {\n          if (!isEqual((el as IGraphic).attribute, (oldEl as IGraphic).attribute)) {\n            // 更新\n            const newProps = cloneDeep((el as IGraphic).attribute);\n            this._newElementAttrMap[el.id] = {\n              state: 'update',\n              node: el,\n              attrs: {\n                ...newProps,\n                opacity: newProps.opacity ?? 1,\n                fillOpacity: newProps.fillOpacity ?? 1,\n                strokeOpacity: newProps.strokeOpacity ?? 1\n              }\n            };\n\n            (el as IGraphic).setAttributes((oldEl as IGraphic).attribute);\n          }\n        } else {\n          // 新入场元素，进行 fadeIn 动画\n          const finalOpacityAttrs = {\n            opacity: el.attribute.opacity ?? 1,\n            fillOpacity: el.attribute.fillOpacity ?? 1,\n            strokeOpacity: el.attribute.strokeOpacity ?? 1\n          };\n          this._newElementAttrMap[el.id] = {\n            state: 'enter',\n            node: el,\n            attrs: finalOpacityAttrs\n          };\n          (el as IGraphic).setAttributes({\n            opacity: 0,\n            fillOpacity: 0,\n            strokeOpacity: 0\n          });\n        }\n      }\n    });\n  }\n\n  onStart(): void {\n    let duration = this.duration;\n    let easing = this.easing;\n\n    // 新的场景树\n    this._newElementAttrMap &&\n      Object.keys(this._newElementAttrMap).forEach(id => {\n        const { node, attrs, state } = this._newElementAttrMap[id];\n        if (state === 'enter') {\n          const { enter = {} } = this.params ?? {};\n          duration = isValidNumber(enter.duration) ? enter.duration : duration;\n          easing = enter.easing ? enter.easing : easing;\n        }\n        if ((node as IGraphic).type === 'path') {\n          (node as IGraphic)\n            .animate({\n              interpolate(key: string, ratio: number, from: any, to: any, nextAttributes: any) {\n                if (key === 'path') {\n                  nextAttributes.path = interpolateString(from, to)(ratio);\n                  return true;\n                }\n\n                return false;\n              }\n            })\n            // .wait(delay)\n            .to(attrs, duration, easing as EasingType);\n        } else {\n          (node as IGraphic)\n            .animate()\n            // .wait(delay)\n            .to(attrs, duration, easing as EasingType);\n        }\n      });\n  }\n\n  onUpdate(end: boolean, ratio: number, out: Record<string, any>): void {\n    // do nothing\n  }\n}\n"]}
+{"version":3,"sources":["../src/axis/animate/group-transition.ts"],"names":[],"mappings":"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","file":"group-transition.js","sourcesContent":["import { AnimateMode, type EasingType, type IGraphic, type IGroup } from '@visactor/vrender-core';\nimport { ACustomAnimate } from '@visactor/vrender-animate';\nimport { cloneDeep, interpolateString, isEqual, isValidNumber, type Dict } from '@visactor/vutils';\nimport { traverseGroup } from '../../util';\nimport { commitUpdateAnimationTarget } from '../../animation/static-truth';\n\nexport class GroupTransition extends ACustomAnimate<any> {\n  declare target: IGroup;\n\n  private _newElementAttrMap: Dict<any>;\n  private _started: boolean;\n  mode = AnimateMode.NORMAL; // 组件的群组动画不需要设置走 AnimateMode.SET_ATTR_IMMEDIATELY\n\n  onBind(): void {\n    this._started = false;\n    // @ts-ignore\n    const currentInnerView = this.target.getInnerView();\n    // @ts-ignore\n    const prevInnerView = this.target.getPrevInnerView();\n    if (!prevInnerView) {\n      return;\n    }\n\n    this._newElementAttrMap = {};\n\n    // 遍历新的场景树，将新节点属性更新为旧节点\n    // TODO: 目前只处理更新场景\n    traverseGroup(currentInnerView, (el: IGraphic) => {\n      if ((el as IGraphic).type !== 'group' && el.id) {\n        const oldEl = prevInnerView[el.id];\n        if (oldEl) {\n          if (!isEqual((el as IGraphic).attribute, (oldEl as IGraphic).attribute)) {\n            // 更新\n            const newProps = cloneDeep((el as IGraphic).attribute);\n            this._newElementAttrMap[el.id] = {\n              state: 'update',\n              node: el,\n              attrs: {\n                ...newProps,\n                opacity: newProps.opacity ?? 1,\n                fillOpacity: newProps.fillOpacity ?? 1,\n                strokeOpacity: newProps.strokeOpacity ?? 1\n              }\n            };\n\n            commitUpdateAnimationTarget(\n              el as IGraphic,\n              this._newElementAttrMap[el.id].attrs,\n              cloneDeep((oldEl as IGraphic).attribute)\n            );\n          }\n        } else {\n          // 新入场元素，进行 fadeIn 动画\n          const finalOpacityAttrs = {\n            opacity: el.attribute.opacity ?? 1,\n            fillOpacity: el.attribute.fillOpacity ?? 1,\n            strokeOpacity: el.attribute.strokeOpacity ?? 1\n          };\n          this._newElementAttrMap[el.id] = {\n            state: 'enter',\n            node: el,\n            attrs: finalOpacityAttrs\n          };\n          commitUpdateAnimationTarget(el as IGraphic, finalOpacityAttrs, {\n            opacity: 0,\n            fillOpacity: 0,\n            strokeOpacity: 0\n          });\n        }\n      }\n    });\n  }\n\n  onStart(): void {\n    if (this._started) {\n      return;\n    }\n    this._started = true;\n\n    let duration = this.duration;\n    let easing = this.easing;\n\n    // 新的场景树\n    this._newElementAttrMap &&\n      Object.keys(this._newElementAttrMap).forEach(id => {\n        const { node, attrs, state } = this._newElementAttrMap[id];\n        if (state === 'enter') {\n          const { enter = {} } = this.params ?? {};\n          duration = isValidNumber(enter.duration) ? enter.duration : duration;\n          easing = enter.easing ? enter.easing : easing;\n        }\n        if ((node as IGraphic).type === 'path') {\n          (node as IGraphic)\n            .animate({\n              interpolate(key: string, ratio: number, from: any, to: any, nextAttributes: any) {\n                if (key === 'path') {\n                  nextAttributes.path = interpolateString(from, to)(ratio);\n                  return true;\n                }\n\n                return false;\n              }\n            })\n            // .wait(delay)\n            .to(attrs, duration, easing as EasingType);\n        } else {\n          (node as IGraphic)\n            .animate()\n            // .wait(delay)\n            .to(attrs, duration, easing as EasingType);\n        }\n      });\n  }\n\n  onUpdate(end: boolean, ratio: number, out: Record<string, any>): void {\n    // do nothing\n  }\n}\n"]}

package/es/axis/base.d.ts

@@ -1,6 +1,6 @@
 import type { IGroup, ITextGraphicAttribute, TextAlignType, TextBaselineType, IGraphic, IText } from '@visactor/vrender-core';
 import type { Dict } from '@visactor/vutils';
-import type { Point } from '../core/type';
+import type { ComponentExitReleaseOptions, Point } from '../core/type';
 import type { TagAttributes } from '../tag';
 import type { AxisBaseAttributes, AxisItem, TransformedAxisItem, TickLineItem } from './type';
 import { AnimateComponent } from '../animation/animate-component';
@@ -30,6 +30,7 @@ export declare abstract class AxisBase<T extends AxisBaseAttributes> extends Ani
     protected axisContainer: IGroup;
     private _lastHover;
     private _lastSelect;
+    private _exitReleaseState?;
     protected _newElementAttrMap: Dict<any>;
     protected abstract renderLine(container: IGroup): void;
     abstract isInValidValue(value: number): boolean;
@@ -45,6 +46,9 @@ export declare abstract class AxisBase<T extends AxisBaseAttributes> extends Ani
         textBaseline: TextBaselineType;
     };
     getBoundsWithoutRender(attributes: Partial<T>): import("@visactor/vutils").IBounds;
+    private _finalizeExitRelease;
+    private _runExitAnimationBeforeRelease;
+    releaseWithExitAnimation(options?: ComponentExitReleaseOptions): boolean;
     protected render(): void;
     protected _prepare(): void;
     private _bindEvent;
@@ -63,5 +67,5 @@ export declare abstract class AxisBase<T extends AxisBaseAttributes> extends Ani
     protected getLabelPosition(point: Point, vector: [number, number], text: string | number, style: Partial<ITextGraphicAttribute>): Point;
     private _transformItems;
     protected runAnimation(): void;
-    release(): void;
+    release(all?: boolean): void;
 }

package/es/axis/base.js

@@ -20,6 +20,10 @@ import { dispatchClickState, dispatchHoverState, dispatchUnHoverState } from "..
 
 import { AnimateComponent } from "../animation/animate-component";
 
+import { commitUpdateAnimationTarget } from "../animation/static-truth";
+
+import { appendExitReleaseCallback, bindExitReleaseAnimates, collectTrackedAnimates, runExitReleaseCallbacks } from "../animation/exit-release";
+
 import { DefaultAxisAnimation } from "./animate/config";
 
 export class AxisBase extends AnimateComponent {
@@ -50,14 +54,65 @@ export class AxisBase extends AnimateComponent {
         return this.add(offscreenGroup), this._renderInner(offscreenGroup), this.removeChild(offscreenGroup), 
         this.attribute = currentAttribute, offscreenGroup.AABBBounds;
     }
+    _finalizeExitRelease() {
+        var _a, _b;
+        const state = this._exitReleaseState;
+        if (null == state ? void 0 : state.finalized) return;
+        state && (state.finalized = !0);
+        const parent = this.parent, removeFromParent = !!(null == state ? void 0 : state.removeFromParent), callbacks = null !== (_a = null == state ? void 0 : state.onComplete) && void 0 !== _a ? _a : [];
+        this._exitReleaseState = void 0, this._prevInnerView = null, this._innerView = null, 
+        this.axisLabelsContainer = null, this.axisContainer = null, this.removeAllChild(!0), 
+        super.release(!0), removeFromParent && (null === (_b = null != parent ? parent : this.parent) || void 0 === _b || _b.removeChild(this)), 
+        runExitReleaseCallbacks(callbacks);
+    }
+    _runExitAnimationBeforeRelease(options = {}) {
+        var _a, _b, _c;
+        if (this._exitReleaseState && !this._exitReleaseState.finalized) return this._exitReleaseState.removeFromParent = this._exitReleaseState.removeFromParent || !!options.removeFromParent, 
+        appendExitReleaseCallback(this._exitReleaseState, options.onComplete), !0;
+        if (!this.stage || !1 === this.attribute.animation || !1 === this.attribute.animationExit || !this._innerView) return !1;
+        if (this._prepare(), !(null === (_a = this._animationConfig) || void 0 === _a ? void 0 : _a.exit)) return !1;
+        const exitTargets = new Set;
+        if (traverseGroup(this._innerView, (el => {
+            "group" !== el.type && exitTargets.add(el);
+        })), !exitTargets.size) return !1;
+        const existingAnimates = collectTrackedAnimates(this), {delay: delay = 0, duration: duration = DefaultAxisAnimation.duration, easing: easing = DefaultAxisAnimation.easing} = this._animationConfig.exit;
+        exitTargets.forEach((target => {
+            var _a, _b, _c;
+            const startAttrs = {
+                opacity: null !== (_a = target.attribute.opacity) && void 0 !== _a ? _a : 1,
+                fillOpacity: null !== (_b = target.attribute.fillOpacity) && void 0 !== _b ? _b : 1,
+                strokeOpacity: null !== (_c = target.attribute.strokeOpacity) && void 0 !== _c ? _c : 1
+            }, endAttrs = {
+                opacity: 0,
+                fillOpacity: 0,
+                strokeOpacity: 0
+            };
+            commitUpdateAnimationTarget(target, endAttrs, startAttrs), target.animate().wait(delay).to(endAttrs, duration, easing);
+        }));
+        const exitAnimates = collectTrackedAnimates(this).filter((animate => !existingAnimates.includes(animate)));
+        if (!exitAnimates.length) return !1;
+        this.setAttribute("childrenPickable", !1), null === (_c = (_b = this._innerView).removeAllEventListeners) || void 0 === _c || _c.call(_b), 
+        this.releaseStatus = "willRelease";
+        const pendingAnimates = new Set(exitAnimates);
+        return this._exitReleaseState = {
+            pendingAnimates: pendingAnimates,
+            finalized: !1,
+            removeFromParent: !!options.removeFromParent,
+            onComplete: options.onComplete ? [ options.onComplete ] : []
+        }, bindExitReleaseAnimates(exitAnimates, (() => this._exitReleaseState), (() => this._finalizeExitRelease())), 
+        !0;
+    }
+    releaseWithExitAnimation(options = {}) {
+        return "released" !== this.releaseStatus && this._runExitAnimationBeforeRelease(options);
+    }
     render() {
-        this._prepare(), this._prevInnerView = this._innerView && getElMap(this._innerView), 
+        this._exitReleaseState || (this._prepare(), this._prevInnerView = this._innerView && getElMap(this._innerView), 
         this.removeAllChild(!0), this._innerView = graphicCreator.group({
             x: 0,
             y: 0,
             pickable: !1
         }), this.add(this._innerView), this._renderInner(this._innerView), this._bindEvent(), 
-        this.runAnimation();
+        this.runAnimation());
     }
     _prepare() {
         this._prepareAnimate(DefaultAxisAnimation);
@@ -293,32 +348,28 @@ export class AxisBase extends AnimateComponent {
                 var _a;
                 if ("group" !== el.type && el.id) {
                     const oldEl = prevInnerView[el.id];
-                    if (el.setFinalAttributes(el.attribute), oldEl) {
+                    if (oldEl) {
                         oldEl.release();
-                        const oldAttrs = oldEl.attribute, finalAttrs = el.getFinalAttribute(), diffAttrs = diff(oldAttrs, finalAttrs);
+                        const oldAttrs = cloneDeep(oldEl.attribute), finalAttrs = cloneDeep(el.attribute), diffAttrs = diff(oldAttrs, finalAttrs);
                         let hasDiff = Object.keys(diffAttrs).length > 0;
-                        if ("opacity" in oldAttrs && finalAttrs.opacity !== oldAttrs.opacity && (diffAttrs.opacity = null !== (_a = finalAttrs.opacity) && void 0 !== _a ? _a : 1, 
-                        hasDiff = !0), animationConfig.update && hasDiff) {
-                            this._newElementAttrMap[el.id] = {
-                                state: "update",
-                                node: el,
-                                attrs: el.attribute
-                            };
-                            const oldAttrs = oldEl.attribute;
-                            el.setAttributes(oldAttrs), el.applyAnimationState([ "update" ], [ {
-                                name: "update",
-                                animation: Object.assign(Object.assign({
-                                    selfOnly: !0
-                                }, animationConfig.update), {
-                                    type: "axisUpdate",
-                                    customParameters: {
-                                        config: animationConfig.update,
-                                        diffAttrs: diffAttrs,
-                                        lastScale: lastScale
-                                    }
-                                })
-                            } ]);
-                        }
+                        "opacity" in oldAttrs && finalAttrs.opacity !== oldAttrs.opacity && (diffAttrs.opacity = null !== (_a = finalAttrs.opacity) && void 0 !== _a ? _a : 1, 
+                        hasDiff = !0), animationConfig.update && hasDiff && (this._newElementAttrMap[el.id] = {
+                            state: "update",
+                            node: el,
+                            attrs: finalAttrs
+                        }, commitUpdateAnimationTarget(el, finalAttrs, oldAttrs), el.applyAnimationState([ "update" ], [ {
+                            name: "update",
+                            animation: Object.assign(Object.assign({
+                                selfOnly: !0
+                            }, animationConfig.update), {
+                                type: "axisUpdate",
+                                customParameters: {
+                                    config: animationConfig.update,
+                                    diffAttrs: diffAttrs,
+                                    lastScale: lastScale
+                                }
+                            })
+                        } ]));
                     } else animationConfig.enter && (this._newElementAttrMap[el.id] = {
                         state: "enter",
                         node: el,
@@ -339,8 +390,10 @@ export class AxisBase extends AnimateComponent {
             }));
         }
     }
-    release() {
-        super.release(), this._prevInnerView = null, this._innerView = null;
+    release(all) {
+        this._exitReleaseState ? this._finalizeExitRelease() : (all && this.removeAllChild(!0), 
+        super.release(all), all && this.removeAllChild(!0), this._prevInnerView = null, 
+        this._innerView = null);
     }
 }
 //# sourceMappingURL=base.js.map