@visactor/vrender-components 0.23.0-alpha.3 → 1.0.0-alpha.2

package/cjs/animation/animate-component.d.ts

@@ -0,0 +1,22 @@
+import type { EasingType } from '@visactor/vrender-core';
+import { AbstractComponent } from '../core/base';
+interface AnimateComponentAttribute {
+    animation?: boolean | any;
+    animationEnter?: boolean | any;
+    animationExit?: boolean | any;
+    animationUpdate?: boolean | any;
+}
+export interface ICommonAnimation {
+    duration?: number;
+    delay?: number;
+    easing?: EasingType;
+}
+export declare abstract class AnimateComponent<T extends AnimateComponentAttribute> extends AbstractComponent<T> {
+    protected _animationConfig?: {
+        enter: ICommonAnimation | false;
+        exit: ICommonAnimation | false;
+        update: ICommonAnimation | false;
+    };
+    _prepareAnimate(defaultAnimation: ICommonAnimation): void;
+}
+export {};

package/cjs/animation/animate-component.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.AnimateComponent = void 0;
+
+const base_1 = require("../core/base"), vutils_1 = require("@visactor/vutils");
+
+class AnimateComponent extends base_1.AbstractComponent {
+    _prepareAnimate(defaultAnimation) {
+        if (!1 !== this.attribute.animation) {
+            const {animation: animation, animationEnter: animationEnter, animationExit: animationExit, animationUpdate: animationUpdate} = this.attribute, animationCfg = (0, 
+            vutils_1.isObject)(animation) ? animation : {};
+            this._animationConfig = {
+                enter: !1 !== animationEnter && (0, vutils_1.merge)({}, defaultAnimation, animationCfg, null != animationEnter ? animationEnter : {}),
+                exit: !1 !== animationExit && (0, vutils_1.merge)({}, defaultAnimation, animationCfg, null != animationExit ? animationExit : {}),
+                update: !1 !== animationUpdate && ((0, vutils_1.isArray)(animationUpdate) ? animationUpdate : (0, 
+                vutils_1.merge)({}, defaultAnimation, animationCfg, null != animationUpdate ? animationUpdate : {}))
+            };
+        } else this._animationConfig = {
+            enter: !1,
+            exit: !1,
+            update: !1
+        };
+    }
+}
+
+exports.AnimateComponent = AnimateComponent;
+//# sourceMappingURL=animate-component.js.map

package/cjs/animation/animate-component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/animation/animate-component.ts"],"names":[],"mappings":";;;AACA,uCAAiD;AACjD,6CAA4D;AA2B5D,MAAsB,gBAAsD,SAAQ,wBAAoB;IAQtG,eAAe,CAAC,gBAAkC;QAChD,IAAI,IAAI,CAAC,SAAS,CAAC,SAAS,KAAK,KAAK,EAAE;YACtC,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,aAAa,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;YACrF,MAAM,YAAY,GAAG,IAAA,iBAAQ,EAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;YAC1D,IAAI,CAAC,gBAAgB,GAAG;gBACtB,KAAK,EAAE,cAAc,KAAK,KAAK,CAAC,CAAC,CAAC,IAAA,cAAK,EAAC,EAAE,EAAE,gBAAgB,EAAE,YAAY,EAAE,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK;gBACzG,IAAI,EAAE,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,IAAA,cAAK,EAAC,EAAE,EAAE,gBAAgB,EAAE,YAAY,EAAE,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK;gBACtG,MAAM,EACJ,eAAe,KAAK,KAAK;oBACvB,CAAC,CAAC,IAAA,gBAAO,EAAC,eAAe,CAAC;wBACxB,CAAC,CAAC,eAAe;wBACjB,CAAC,CAAC,IAAA,cAAK,EAAC,EAAE,EAAE,gBAAgB,EAAE,YAAY,EAAE,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,EAAE,CAAC;oBACpE,CAAC,CAAC,KAAK;aACZ,CAAC;SACH;aAAM;YACL,IAAI,CAAC,gBAAgB,GAAG;gBACtB,KAAK,EAAE,KAAK;gBACZ,IAAI,EAAE,KAAK;gBACX,MAAM,EAAE,KAAK;aACd,CAAC;SACH;IACH,CAAC;CACF;AA9BD,4CA8BC","file":"animate-component.js","sourcesContent":["import type { EasingType } from '@visactor/vrender-core';\nimport { AbstractComponent } from '../core/base';\nimport { isArray, isObject, merge } from '@visactor/vutils';\n\ninterface AnimateComponentAttribute {\n  animation?: boolean | any;\n  animationEnter?: boolean | any;\n  animationExit?: boolean | any;\n  animationUpdate?: boolean | any;\n}\n\n/**\n * 标签的离场动画配置\n */\nexport interface ICommonAnimation {\n  /**\n   * 动画执行的时长\n   */\n  duration?: number;\n  /**\n   * 动画延迟的时长\n   */\n  delay?: number;\n  /**\n   * 动画的缓动函数\n   */\n  easing?: EasingType;\n}\n\nexport abstract class AnimateComponent<T extends AnimateComponentAttribute> extends AbstractComponent<T> {\n  // parsed animation config\n  protected _animationConfig?: {\n    enter: ICommonAnimation | false;\n    exit: ICommonAnimation | false;\n    update: ICommonAnimation | false;\n  };\n\n  _prepareAnimate(defaultAnimation: ICommonAnimation) {\n    if (this.attribute.animation !== false) {\n      const { animation, animationEnter, animationExit, animationUpdate } = this.attribute;\n      const animationCfg = isObject(animation) ? animation : {};\n      this._animationConfig = {\n        enter: animationEnter !== false ? merge({}, defaultAnimation, animationCfg, animationEnter ?? {}) : false,\n        exit: animationExit !== false ? merge({}, defaultAnimation, animationCfg, animationExit ?? {}) : false,\n        update:\n          animationUpdate !== false\n            ? isArray(animationUpdate)\n              ? animationUpdate\n              : merge({}, defaultAnimation, animationCfg, animationUpdate ?? {})\n            : false\n      };\n    } else {\n      this._animationConfig = {\n        enter: false,\n        exit: false,\n        update: false\n      };\n    }\n  }\n}\n"]}

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

@@ -0,0 +1,10 @@
+import { AComponentAnimate } from '@visactor/vrender-animate';
+export declare class AxisEnter extends AComponentAnimate<any> {
+    onBind(): void;
+}
+export declare class AxisUpdate extends AComponentAnimate<any> {
+    onBind(): void;
+    deleteSelfAttr(key: string): void;
+    protected tryPreventConflict(): void;
+}
+export declare function registerAxisAnimate(): void;

package/cjs/animation/axis-animate.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.registerAxisAnimate = exports.AxisUpdate = exports.AxisEnter = void 0;
+
+const vrender_animate_1 = require("@visactor/vrender-animate");
+
+class AxisEnter extends vrender_animate_1.AComponentAnimate {
+    onBind() {
+        var _a;
+        const animator = (0, vrender_animate_1.createComponentAnimator)(this.target);
+        this._animator = animator;
+        const duration = this.duration, easing = this.easing, {config: config, lastScale: lastScale, getTickCoord: getTickCoord} = this.params;
+        let ratio = 1;
+        if (lastScale && getTickCoord) {
+            ratio = .7;
+            const currData = this.target.data, point = getTickCoord(lastScale.scale(currData.rawValue)), newX = this.target.attribute.x, newY = this.target.attribute.y;
+            this.target.setAttributes({
+                x: point.x,
+                y: point.y
+            }), animator.animate(this.target, {
+                type: "to",
+                to: {
+                    x: newX,
+                    y: newY
+                },
+                duration: duration,
+                easing: easing
+            });
+        }
+        animator.animate(this.target, {
+            type: null !== (_a = config.type) && void 0 !== _a ? _a : "fadeIn",
+            to: config.to,
+            duration: duration * ratio,
+            easing: easing
+        }), this.completeBind(animator);
+    }
+}
+
+exports.AxisEnter = AxisEnter;
+
+class AxisUpdate extends vrender_animate_1.AComponentAnimate {
+    onBind() {
+        var _a;
+        const animator = (0, vrender_animate_1.createComponentAnimator)(this.target);
+        this._animator = animator;
+        const duration = this.duration, easing = this.easing, {config: config, diffAttrs: diffAttrs} = this.params;
+        animator.animate(this.target, {
+            type: null !== (_a = config.type) && void 0 !== _a ? _a : "to",
+            to: Object.assign({}, diffAttrs),
+            duration: duration,
+            easing: easing,
+            customParameters: {
+                diffAttrs: Object.assign({}, diffAttrs)
+            }
+        }), this.completeBind(animator);
+    }
+    deleteSelfAttr(key) {
+        super.deleteSelfAttr(key), this._animator.deleteSelfAttr(key);
+    }
+    tryPreventConflict() {}
+}
+
+function registerAxisAnimate() {
+    vrender_animate_1.AnimateExecutor.registerBuiltInAnimate("axisEnter", AxisEnter), 
+    vrender_animate_1.AnimateExecutor.registerBuiltInAnimate("axisUpdate", AxisUpdate);
+}
+
+exports.AxisUpdate = AxisUpdate, exports.registerAxisAnimate = registerAxisAnimate;
+//# sourceMappingURL=axis-animate.js.map

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

@@ -0,0 +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\n    if (lastScale && getTickCoord) {\n      ratio = 0.7;\n      const currData = this.target.data;\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: config.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"]}

package/cjs/animation/label-animate.d.ts

@@ -0,0 +1,10 @@
+import { AComponentAnimate } from '@visactor/vrender-animate';
+export declare class LabelUpdate extends AComponentAnimate<any> {
+    onBind(): void;
+    protected tryPreventConflict(): void;
+}
+export declare class LabelEnter extends AComponentAnimate<any> {
+    onBind(): void;
+    protected tryPreventConflict(): void;
+}
+export declare function registerLabelAnimate(): void;

package/cjs/animation/label-animate.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var __rest = this && this.__rest || function(s, e) {
+    var t = {};
+    for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
+    if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
+        var i = 0;
+        for (p = Object.getOwnPropertySymbols(s); i < p.length; i++) e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
+    }
+    return t;
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.registerLabelAnimate = exports.LabelEnter = exports.LabelUpdate = void 0;
+
+const vrender_animate_1 = require("@visactor/vrender-animate");
+
+class LabelUpdate extends vrender_animate_1.AComponentAnimate {
+    onBind() {
+        const animator = (0, vrender_animate_1.createComponentAnimator)(this.target);
+        this._animator = animator;
+        const duration = this.duration, easing = this.easing, {prevText: prevText, curText: curText, prevLabelLine: prevLabelLine, curLabelLine: curLabelLine} = this.params, diff = {};
+        for (const key in curText.attribute) prevText.attribute[key] !== curText.attribute[key] && (diff[key] = curText.attribute[key]);
+        const {text: text} = diff, rest = __rest(diff, [ "text" ]);
+        animator.animate(prevText, {
+            type: "to",
+            to: rest,
+            duration: duration,
+            easing: easing
+        }), animator.animate(prevText, {
+            type: "increaseCount",
+            to: {
+                text: curText.attribute.text
+            },
+            duration: duration,
+            easing: easing
+        }), prevLabelLine && animator.animate(prevLabelLine, {
+            type: "to",
+            to: curLabelLine.attribute,
+            duration: duration,
+            easing: easing
+        }), this.completeBind(animator);
+    }
+    tryPreventConflict() {}
+}
+
+exports.LabelUpdate = LabelUpdate;
+
+class LabelEnter extends vrender_animate_1.AComponentAnimate {
+    onBind() {
+        const animator = (0, vrender_animate_1.createComponentAnimator)(this.target);
+        this._animator = animator;
+        const duration = this.duration, easing = this.easing, {relatedGraphic: relatedGraphic, relatedGraphics: relatedGraphics, config: config} = this.params, {mode: mode, type: type = "fadeIn"} = config, target = this.target;
+        let startTime = 0;
+        "after" === mode ? relatedGraphic.animates && relatedGraphic.animates.forEach((animate => {
+            startTime = Math.max(startTime, animate.getStartTime() + animate.getTotalDuration());
+        })) : "after-all" === mode ? relatedGraphics && relatedGraphics.forEach((graphic => {
+            graphic.animates && graphic.animates.forEach((animate => {
+                startTime = Math.max(startTime, animate.getStartTime() + animate.getTotalDuration());
+            }));
+        })) : relatedGraphic.animates && relatedGraphic.animates.forEach((animate => {
+            startTime = Math.max(startTime, animate.getStartTime());
+        })), animator.animate(target, Object.assign(Object.assign({}, config), {
+            duration: duration,
+            easing: easing,
+            startTime: startTime,
+            type: type
+        })), this.completeBind(animator);
+    }
+    tryPreventConflict() {}
+}
+
+function registerLabelAnimate() {
+    vrender_animate_1.AnimateExecutor.registerBuiltInAnimate("labelUpdate", LabelUpdate), 
+    vrender_animate_1.AnimateExecutor.registerBuiltInAnimate("labelEnter", LabelEnter);
+}
+
+exports.LabelEnter = LabelEnter, exports.registerLabelAnimate = registerLabelAnimate;
+//# sourceMappingURL=label-animate.js.map

package/cjs/animation/label-animate.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/animation/label-animate.ts"],"names":[],"mappings":"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","file":"label-animate.js","sourcesContent":["import { AComponentAnimate, AnimateExecutor, createComponentAnimator } from '@visactor/vrender-animate';\n\n/**\n * LabelUpdate class handles the update animation for Label components\n */\nexport class LabelUpdate 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\n    const { prevText, curText, prevLabelLine, curLabelLine } = this.params;\n    const diff: Record<string, any> = {};\n\n    for (const key in curText.attribute) {\n      if (prevText.attribute[key] !== curText.attribute[key]) {\n        diff[key] = curText.attribute[key];\n      }\n    }\n\n    const { text, ...rest } = diff;\n\n    animator.animate(prevText, {\n      type: 'to',\n      to: rest,\n      duration,\n      easing\n    });\n\n    animator.animate(prevText, {\n      type: 'increaseCount',\n      to: {\n        text: curText.attribute.text\n      },\n      duration,\n      easing\n    });\n\n    if (prevLabelLine) {\n      animator.animate(prevLabelLine, {\n        type: 'to',\n        to: curLabelLine.attribute,\n        duration,\n        easing\n      });\n    }\n\n    this.completeBind(animator);\n  }\n\n  // 标签动画本身没有逻辑，具体通过animator中执行，所以本身不需要屏蔽冲突\n  protected tryPreventConflict(): void {\n    return;\n  }\n}\n\nexport class LabelEnter 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\n    const { relatedGraphic, relatedGraphics, config } = this.params;\n    const { mode, type = 'fadeIn' } = config;\n\n    const target = this.target;\n\n    let startTime = 0;\n\n    if (mode === 'after') {\n      relatedGraphic.animates &&\n        relatedGraphic.animates.forEach((animate: any) => {\n          startTime = Math.max(startTime, animate.getStartTime() + animate.getTotalDuration());\n        });\n    } else if (mode === 'after-all') {\n      relatedGraphics &&\n        relatedGraphics.forEach((graphic: any) => {\n          graphic.animates &&\n            graphic.animates.forEach((animate: any) => {\n              startTime = Math.max(startTime, animate.getStartTime() + animate.getTotalDuration());\n            });\n        });\n    } else {\n      // 'same-time'\n      relatedGraphic.animates &&\n        relatedGraphic.animates.forEach((animate: any) => {\n          startTime = Math.max(startTime, animate.getStartTime());\n        });\n    }\n\n    animator.animate(target, {\n      ...config,\n      duration,\n      easing,\n      startTime,\n      type\n    });\n\n    this.completeBind(animator);\n  }\n\n  // 标签动画本身没有逻辑，具体通过animator中执行，所以本身不需要屏蔽冲突\n  protected tryPreventConflict(): void {\n    return;\n  }\n}\n\nexport function registerLabelAnimate() {\n  // Label update animation\n  AnimateExecutor.registerBuiltInAnimate('labelUpdate', LabelUpdate);\n  AnimateExecutor.registerBuiltInAnimate('labelEnter', LabelEnter);\n}\n"]}

package/cjs/axis/animate/config.d.ts

@@ -0,0 +1,6 @@
+import type { EasingType } from '@visactor/vrender-core';
+export declare const DefaultAxisAnimation: {
+    type: string;
+    duration: number;
+    easing: EasingType;
+};

package/cjs/axis/animate/config.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.DefaultAxisAnimation = void 0, exports.DefaultAxisAnimation = {
+    type: "default",
+    duration: 300,
+    easing: "linear"
+};
+//# sourceMappingURL=config.js.map

package/cjs/axis/animate/config.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/axis/animate/config.ts"],"names":[],"mappings":";;;AAEa,QAAA,oBAAoB,GAAG;IAClC,IAAI,EAAE,SAAS;IACf,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,QAAsB;CAC/B,CAAC","file":"config.js","sourcesContent":["import type { EasingType } from '@visactor/vrender-core';\n\nexport const DefaultAxisAnimation = {\n  type: 'default',\n  duration: 300,\n  easing: 'linear' as EasingType\n};\n"]}

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

@@ -1,5 +1,6 @@
+import { AnimateMode } from '@visactor/vrender-core';
 import type { IGroup } from '@visactor/vrender-core';
-import { ACustomAnimate, AnimateMode } from '@visactor/vrender-animate';
+import { ACustomAnimate } from '@visactor/vrender-animate';
 export declare class GroupTransition extends ACustomAnimate<any> {
     target: IGroup;
     private _newElementAttrMap;

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

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.GroupTransition = void 0;
 
-const vrender_animate_1 = require("@visactor/vrender-animate"), vutils_1 = require("@visactor/vutils"), util_1 = require("../../util");
+const vrender_core_1 = require("@visactor/vrender-core"), vrender_animate_1 = require("@visactor/vrender-animate"), vutils_1 = require("@visactor/vutils"), util_1 = require("../../util");
 
 class GroupTransition extends vrender_animate_1.ACustomAnimate {
     constructor() {
-        super(...arguments), this.mode = vrender_animate_1.AnimateMode.NORMAL;
+        super(...arguments), this.mode = vrender_core_1.AnimateMode.NORMAL;
     }
     onBind() {
         const currentInnerView = this.target.getInnerView(), prevInnerView = this.target.getPrevInnerView();

package/cjs/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 type { EasingType, IGraphic, IGroup } from '@visactor/vrender-core';\nimport { ACustomAnimate, AnimateMode } 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 } 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"]}

package/cjs/axis/base.d.ts

@@ -1,11 +1,13 @@
 import type { IGroup, ITextGraphicAttribute, TextAlignType, TextBaselineType, IGraphic, IText } from '@visactor/vrender-core';
 import type { Dict } from '@visactor/vutils';
-import { AbstractComponent } from '../core/base';
 import type { Point } from '../core/type';
 import type { TagAttributes } from '../tag';
 import type { AxisBaseAttributes, AxisItem, TransformedAxisItem, TickLineItem } from './type';
-export declare abstract class AxisBase<T extends AxisBaseAttributes> extends AbstractComponent<Required<T>> {
+import { AnimateComponent } from '../animation/animate-component';
+import type { IBaseScale } from '@visactor/vscale';
+export declare abstract class AxisBase<T extends AxisBaseAttributes> extends AnimateComponent<Required<T>> {
     name: string;
+    lastScale: IBaseScale;
     protected _innerView: IGroup;
     getInnerView(): IGroup;
     protected _prevInnerView: {
@@ -28,6 +30,7 @@ export declare abstract class AxisBase<T extends AxisBaseAttributes> extends Abs
     protected axisContainer: IGroup;
     private _lastHover;
     private _lastSelect;
+    protected _newElementAttrMap: Dict<any>;
     protected abstract renderLine(container: IGroup): void;
     abstract isInValidValue(value: number): boolean;
     abstract getTickCoord(value: number): Point;
@@ -43,6 +46,7 @@ export declare abstract class AxisBase<T extends AxisBaseAttributes> extends Abs
     };
     getBoundsWithoutRender(attributes: Partial<T>): import("@visactor/vutils").IBounds;
     protected render(): void;
+    protected _prepare(): void;
     private _bindEvent;
     private _onHover;
     private _onUnHover;
@@ -58,5 +62,6 @@ export declare abstract class AxisBase<T extends AxisBaseAttributes> extends Abs
     private _getLabelAttribute;
     protected getLabelPosition(point: Point, vector: [number, number], text: string | number, style: Partial<ITextGraphicAttribute>): Point;
     private _transformItems;
+    protected runAnimation(): void;
     release(): void;
 }

package/cjs/axis/base.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.AxisBase = void 0;
 
-const vrender_core_1 = require("@visactor/vrender-core"), vutils_1 = require("@visactor/vutils"), base_1 = require("../core/base"), util_1 = require("../util"), constant_1 = require("../constant"), constant_2 = require("./constant"), config_1 = require("./config"), tag_1 = require("../tag/tag"), util_2 = require("./util"), interaction_1 = require("../util/interaction");
+const vrender_core_1 = require("@visactor/vrender-core"), vutils_1 = require("@visactor/vutils"), util_1 = require("../util"), constant_1 = require("../constant"), constant_2 = require("./constant"), config_1 = require("./config"), tag_1 = require("../tag/tag"), util_2 = require("./util"), interaction_1 = require("../util/interaction"), animate_component_1 = require("../animation/animate-component"), config_2 = require("./animate/config");
 
-class AxisBase extends base_1.AbstractComponent {
+class AxisBase extends animate_component_1.AnimateComponent {
     constructor() {
         super(...arguments), this.name = "axis", this.data = [], this.tickLineItems = [], 
         this.subTickLineItems = [], this.axisLabelLayerSize = {}, this.axisLabelsContainer = null, 
@@ -26,7 +26,7 @@ class AxisBase extends base_1.AbstractComponent {
     }
     getBoundsWithoutRender(attributes) {
         const currentAttribute = (0, vutils_1.cloneDeep)(this.attribute);
-        (0, vutils_1.merge)(this.attribute, attributes);
+        currentAttribute.scale = this.attribute.scale, (0, vutils_1.merge)(this.attribute, attributes);
         const offscreenGroup = vrender_core_1.graphicCreator.group({
             x: this.attribute.x,
             y: this.attribute.y
@@ -35,12 +35,16 @@ class AxisBase extends base_1.AbstractComponent {
         this.attribute = currentAttribute, offscreenGroup.AABBBounds;
     }
     render() {
-        this._prevInnerView = this._innerView && (0, util_2.getElMap)(this._innerView), 
+        this._prepare(), this._prevInnerView = this._innerView && (0, util_2.getElMap)(this._innerView), 
         this.removeAllChild(!0), this._innerView = vrender_core_1.graphicCreator.group({
             x: 0,
             y: 0,
             pickable: !1
-        }), this.add(this._innerView), this._renderInner(this._innerView), this._bindEvent();
+        }), this.add(this._innerView), this._renderInner(this._innerView), this._bindEvent(), 
+        this.runAnimation();
+    }
+    _prepare() {
+        this._prepareAnimate(config_2.DefaultAxisAnimation);
     }
     _bindEvent() {
         if (this.attribute.disableTriggerEvent) return;
@@ -260,6 +264,67 @@ class AxisBase extends base_1.AbstractComponent {
             }));
         })), data;
     }
+    runAnimation() {
+        const lastScale = this.lastScale;
+        if (this.attribute.scale) {
+            const scale = this.attribute.scale;
+            this.lastScale = scale.clone(), this.lastScale.range([ 0, 1 ]);
+        }
+        if (this.attribute.animation && this.applyAnimationState) {
+            const currentInnerView = this.getInnerView(), prevInnerView = this.getPrevInnerView();
+            if (!prevInnerView) return;
+            const animationConfig = this._animationConfig;
+            this._newElementAttrMap = {}, (0, util_1.traverseGroup)(currentInnerView, (el => {
+                var _a;
+                if ("group" !== el.type && el.id) {
+                    const oldEl = prevInnerView[el.id];
+                    if (el.setFinalAttribute(el.attribute), oldEl) {
+                        oldEl.release();
+                        const oldAttrs = oldEl.attribute, finalAttrs = el.getFinalAttribute(), diffAttrs = (0, 
+                        vrender_core_1.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
+                                    }
+                                })
+                            } ]);
+                        }
+                    } else animationConfig.enter && (this._newElementAttrMap[el.id] = {
+                        state: "enter",
+                        node: el,
+                        attrs: el.attribute
+                    }, el.applyAnimationState([ "enter" ], [ {
+                        name: "enter",
+                        animation: Object.assign(Object.assign({}, animationConfig.enter), {
+                            type: "axisEnter",
+                            selfOnly: !0,
+                            customParameters: {
+                                config: animationConfig.enter,
+                                lastScale: lastScale,
+                                getTickCoord: this.getTickCoord.bind(this)
+                            }
+                        })
+                    } ]));
+                }
+            }));
+        }
+    }
     release() {
         super.release(), this._prevInnerView = null, this._innerView = null;
     }