@visactor/vrender-components 1.1.0-alpha.7 → 1.1.0-alpha.8

package/cjs/marker/animate/common.js

@@ -1,11 +1,20 @@
 "use strict";
 
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.tagFadeOut = exports.segmentFadeOut = exports.graphicFadeOut = exports.tagFadeIn = exports.segmentFadeIn = exports.graphicFadeIn = void 0;
+
+const static_truth_1 = require("../../animation/static-truth");
+
 function graphicFadeIn(graphic, delay, duration, easing) {
     var _a, _b, _c, _d, _e;
     if (!graphic) return;
     null === (_a = null == graphic ? void 0 : graphic.animates) || void 0 === _a || _a.forEach((a => a.stop("end")));
     const fillOpacityConfig = null !== (_c = null === (_b = graphic.attribute) || void 0 === _b ? void 0 : _b.fillOpacity) && void 0 !== _c ? _c : 1, strokeOpacityConfig = null !== (_e = null === (_d = graphic.attribute) || void 0 === _d ? void 0 : _d.strokeOpacity) && void 0 !== _e ? _e : 1;
-    graphic.setAttributes({
+    (0, static_truth_1.commitUpdateAnimationTarget)(graphic, {
+        fillOpacity: fillOpacityConfig,
+        strokeOpacity: strokeOpacityConfig
+    }, {
         fillOpacity: 0,
         strokeOpacity: 0
     }), graphic.animate().wait(delay).to({
@@ -25,7 +34,10 @@ function tagFadeIn(tag, delay, duration, easing) {
 
 function graphicFadeOut(graphic, delay, duration, easing) {
     var _a, _b, _c, _d;
-    graphic && (graphic.setAttributes({
+    graphic && ((0, static_truth_1.commitUpdateAnimationTarget)(graphic, {
+        fillOpacity: 0,
+        strokeOpacity: 0
+    }, {
         fillOpacity: null !== (_b = null === (_a = graphic.attribute) || void 0 === _a ? void 0 : _a.fillOpacity) && void 0 !== _b ? _b : 1,
         strokeOpacity: null !== (_d = null === (_c = graphic.attribute) || void 0 === _c ? void 0 : _c.strokeOpacity) && void 0 !== _d ? _d : 1
     }), graphic.animate().wait(delay).to({
@@ -43,9 +55,6 @@ function tagFadeOut(tag, delay, duration, easing) {
     tag && (graphicFadeOut(tag.getTextShape(), delay, duration, easing), graphicFadeOut(tag.getBgRect(), delay, duration, easing));
 }
 
-Object.defineProperty(exports, "__esModule", {
-    value: !0
-}), exports.tagFadeOut = exports.segmentFadeOut = exports.graphicFadeOut = exports.tagFadeIn = exports.segmentFadeIn = exports.graphicFadeIn = void 0, 
 exports.graphicFadeIn = graphicFadeIn, exports.segmentFadeIn = segmentFadeIn, exports.tagFadeIn = tagFadeIn, 
 exports.graphicFadeOut = graphicFadeOut, exports.segmentFadeOut = segmentFadeOut, 
 exports.tagFadeOut = tagFadeOut;

package/cjs/marker/animate/common.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/marker/animate/common.ts"],"names":[],"mappings":"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","file":"common.js","sourcesContent":["import type { EasingType, IGraphic } from '@visactor/vrender-core';\nimport type { ArcSegment, Segment } from '../../segment';\nimport type { Tag } from '../../tag';\n\n/** fade-in */\nexport function graphicFadeIn(graphic: IGraphic, delay: number, duration: number, easing: EasingType) {\n  if (!graphic) {\n    return;\n  }\n  graphic?.animates?.forEach(a => a.stop('end'));\n  const fillOpacityConfig = graphic.attribute?.fillOpacity ?? 1;\n  const strokeOpacityConfig = graphic.attribute?.strokeOpacity ?? 1;\n\n  graphic.setAttributes({\n    fillOpacity: 0,\n    strokeOpacity: 0\n  });\n\n  graphic.animate().wait(delay).to(\n    {\n      fillOpacity: fillOpacityConfig,\n      strokeOpacity: strokeOpacityConfig\n    },\n    duration,\n    easing\n  );\n}\n\nexport function segmentFadeIn(segment: Segment, delay: number, duration: number, easing: EasingType) {\n  if (!segment) {\n    return;\n  }\n\n  // start symbol\n  graphicFadeIn(segment.startSymbol, delay, duration, easing);\n\n  // line\n  segment.lines.forEach(line => graphicFadeIn(line, delay, duration, easing));\n  graphicFadeIn((segment as ArcSegment).line, delay, duration, easing);\n\n  // end symbol\n  graphicFadeIn(segment.endSymbol, delay, duration, easing);\n}\n\nexport function tagFadeIn(tag: Tag, delay: number, duration: number, easing: EasingType) {\n  if (!tag) {\n    return;\n  }\n\n  // text\n  graphicFadeIn(tag.getTextShape(), delay, duration, easing);\n\n  // text background\n  graphicFadeIn(tag.getBgRect(), delay, duration, easing);\n}\n\n/** fade-out */\nexport function graphicFadeOut(graphic: IGraphic, delay: number, duration: number, easing: EasingType) {\n  if (!graphic) {\n    return;\n  }\n\n  graphic.setAttributes({\n    fillOpacity: graphic.attribute?.fillOpacity ?? 1,\n    strokeOpacity: graphic.attribute?.strokeOpacity ?? 1\n  });\n\n  graphic.animate().wait(delay).to({ fillOpacity: 0, strokeOpacity: 0 }, duration, easing);\n}\n\nexport function segmentFadeOut(segment: Segment | ArcSegment, delay: number, duration: number, easing: EasingType) {\n  if (!segment) {\n    return;\n  }\n\n  // start symbol\n  graphicFadeOut(segment.startSymbol, delay, duration, easing);\n\n  // line\n  segment.lines.forEach(line => graphicFadeOut(line, delay, duration, easing));\n  graphicFadeOut((segment as ArcSegment).line, delay, duration, easing);\n\n  // end symbol\n  graphicFadeOut(segment.endSymbol, delay, duration, easing);\n}\n\nexport function tagFadeOut(tag: Tag, delay: number, duration: number, easing: EasingType) {\n  if (!tag) {\n    return;\n  }\n\n  // text\n  graphicFadeOut(tag.getTextShape(), delay, duration, easing);\n\n  // text background\n  graphicFadeOut(tag.getBgRect(), delay, duration, easing);\n}\n"]}
+{"version":3,"sources":["../src/marker/animate/common.ts"],"names":[],"mappings":";;;AAGA,+DAA2E;AAG3E,SAAgB,aAAa,CAAC,OAAiB,EAAE,KAAa,EAAE,QAAgB,EAAE,MAAkB;;IAClG,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO;KACR;IACD,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,0CAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAC/C,MAAM,iBAAiB,GAAG,MAAA,MAAA,OAAO,CAAC,SAAS,0CAAE,WAAW,mCAAI,CAAC,CAAC;IAC9D,MAAM,mBAAmB,GAAG,MAAA,MAAA,OAAO,CAAC,SAAS,0CAAE,aAAa,mCAAI,CAAC,CAAC;IAElE,IAAA,0CAA2B,EACzB,OAAO,EACP;QACE,WAAW,EAAE,iBAAiB;QAC9B,aAAa,EAAE,mBAAmB;KACnC,EACD;QACE,WAAW,EAAE,CAAC;QACd,aAAa,EAAE,CAAC;KACjB,CACF,CAAC;IAEF,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAC9B;QACE,WAAW,EAAE,iBAAiB;QAC9B,aAAa,EAAE,mBAAmB;KACnC,EACD,QAAQ,EACR,MAAM,CACP,CAAC;AACJ,CAAC;AA5BD,sCA4BC;AAED,SAAgB,aAAa,CAAC,OAAgB,EAAE,KAAa,EAAE,QAAgB,EAAE,MAAkB;IACjG,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO;KACR;IAGD,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;IAG5D,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IAC5E,aAAa,CAAE,OAAsB,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;IAGrE,aAAa,CAAC,OAAO,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;AAC5D,CAAC;AAdD,sCAcC;AAED,SAAgB,SAAS,CAAC,GAAQ,EAAE,KAAa,EAAE,QAAgB,EAAE,MAAkB;IACrF,IAAI,CAAC,GAAG,EAAE;QACR,OAAO;KACR;IAGD,aAAa,CAAC,GAAG,CAAC,YAAY,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;IAG3D,aAAa,CAAC,GAAG,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;AAC1D,CAAC;AAVD,8BAUC;AAGD,SAAgB,cAAc,CAAC,OAAiB,EAAE,KAAa,EAAE,QAAgB,EAAE,MAAkB;;IACnG,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO;KACR;IAED,IAAA,0CAA2B,EACzB,OAAO,EACP;QACE,WAAW,EAAE,CAAC;QACd,aAAa,EAAE,CAAC;KACjB,EACD;QACE,WAAW,EAAE,MAAA,MAAA,OAAO,CAAC,SAAS,0CAAE,WAAW,mCAAI,CAAC;QAChD,aAAa,EAAE,MAAA,MAAA,OAAO,CAAC,SAAS,0CAAE,aAAa,mCAAI,CAAC;KACrD,CACF,CAAC;IAEF,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;AAC3F,CAAC;AAlBD,wCAkBC;AAED,SAAgB,cAAc,CAAC,OAA6B,EAAE,KAAa,EAAE,QAAgB,EAAE,MAAkB;IAC/G,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO;KACR;IAGD,cAAc,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;IAG7D,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,cAAc,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IAC7E,cAAc,CAAE,OAAsB,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;IAGtE,cAAc,CAAC,OAAO,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;AAC7D,CAAC;AAdD,wCAcC;AAED,SAAgB,UAAU,CAAC,GAAQ,EAAE,KAAa,EAAE,QAAgB,EAAE,MAAkB;IACtF,IAAI,CAAC,GAAG,EAAE;QACR,OAAO;KACR;IAGD,cAAc,CAAC,GAAG,CAAC,YAAY,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;IAG5D,cAAc,CAAC,GAAG,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;AAC3D,CAAC;AAVD,gCAUC","file":"common.js","sourcesContent":["import type { EasingType, IGraphic } from '@visactor/vrender-core';\nimport type { ArcSegment, Segment } from '../../segment';\nimport type { Tag } from '../../tag';\nimport { commitUpdateAnimationTarget } from '../../animation/static-truth';\n\n/** fade-in */\nexport function graphicFadeIn(graphic: IGraphic, delay: number, duration: number, easing: EasingType) {\n  if (!graphic) {\n    return;\n  }\n  graphic?.animates?.forEach(a => a.stop('end'));\n  const fillOpacityConfig = graphic.attribute?.fillOpacity ?? 1;\n  const strokeOpacityConfig = graphic.attribute?.strokeOpacity ?? 1;\n\n  commitUpdateAnimationTarget(\n    graphic,\n    {\n      fillOpacity: fillOpacityConfig,\n      strokeOpacity: strokeOpacityConfig\n    },\n    {\n      fillOpacity: 0,\n      strokeOpacity: 0\n    }\n  );\n\n  graphic.animate().wait(delay).to(\n    {\n      fillOpacity: fillOpacityConfig,\n      strokeOpacity: strokeOpacityConfig\n    },\n    duration,\n    easing\n  );\n}\n\nexport function segmentFadeIn(segment: Segment, delay: number, duration: number, easing: EasingType) {\n  if (!segment) {\n    return;\n  }\n\n  // start symbol\n  graphicFadeIn(segment.startSymbol, delay, duration, easing);\n\n  // line\n  segment.lines.forEach(line => graphicFadeIn(line, delay, duration, easing));\n  graphicFadeIn((segment as ArcSegment).line, delay, duration, easing);\n\n  // end symbol\n  graphicFadeIn(segment.endSymbol, delay, duration, easing);\n}\n\nexport function tagFadeIn(tag: Tag, delay: number, duration: number, easing: EasingType) {\n  if (!tag) {\n    return;\n  }\n\n  // text\n  graphicFadeIn(tag.getTextShape(), delay, duration, easing);\n\n  // text background\n  graphicFadeIn(tag.getBgRect(), delay, duration, easing);\n}\n\n/** fade-out */\nexport function graphicFadeOut(graphic: IGraphic, delay: number, duration: number, easing: EasingType) {\n  if (!graphic) {\n    return;\n  }\n\n  commitUpdateAnimationTarget(\n    graphic,\n    {\n      fillOpacity: 0,\n      strokeOpacity: 0\n    },\n    {\n      fillOpacity: graphic.attribute?.fillOpacity ?? 1,\n      strokeOpacity: graphic.attribute?.strokeOpacity ?? 1\n    }\n  );\n\n  graphic.animate().wait(delay).to({ fillOpacity: 0, strokeOpacity: 0 }, duration, easing);\n}\n\nexport function segmentFadeOut(segment: Segment | ArcSegment, delay: number, duration: number, easing: EasingType) {\n  if (!segment) {\n    return;\n  }\n\n  // start symbol\n  graphicFadeOut(segment.startSymbol, delay, duration, easing);\n\n  // line\n  segment.lines.forEach(line => graphicFadeOut(line, delay, duration, easing));\n  graphicFadeOut((segment as ArcSegment).line, delay, duration, easing);\n\n  // end symbol\n  graphicFadeOut(segment.endSymbol, delay, duration, easing);\n}\n\nexport function tagFadeOut(tag: Tag, delay: number, duration: number, easing: EasingType) {\n  if (!tag) {\n    return;\n  }\n\n  // text\n  graphicFadeOut(tag.getTextShape(), delay, duration, easing);\n\n  // text background\n  graphicFadeOut(tag.getBgRect(), delay, duration, easing);\n}\n"]}

package/cjs/timeline/timeline.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.Timeline = void 0;
 
-const vutils_1 = require("@visactor/vutils"), base_1 = require("../core/base"), register_1 = require("./register");
+const vutils_1 = require("@visactor/vutils"), base_1 = require("../core/base"), register_1 = require("./register"), static_truth_1 = require("../animation/static-truth");
 
 (0, register_1.loadTimelineComponent)();
 
@@ -65,38 +65,57 @@ class Timeline extends base_1.AbstractComponent {
         setActive(labelGroup, activeLabelStyle), setActive(symbolGroup, activeSymbolStyle);
     }
     appearAnimate(animateConfig) {
+        var _a;
         const {duration: duration = 1e3, easing: easing = "quadOut"} = animateConfig, {activeLabelStyle: activeLabelStyle, activeSymbolStyle: activeSymbolStyle} = this.attribute, percent = duration / 1e3, lineDuration = 500 * percent, activeLineDuration = 200 * percent, perSymbolDuration = 100 * percent, perSymbolNormalDuration = 90 * percent, symbolDelay = 100 * percent, symbolNormalDelay = 600 * percent;
-        if (this._line && (this._line.setAttributes({
+        if (this._line && ((0, static_truth_1.commitUpdateAnimationTarget)(this._line, {
+            clipRange: 1
+        }, {
             clipRange: 0
         }), this._line.animate().to({
             clipRange: 1
-        }, lineDuration, easing)), this._activeLine && (this._activeLine.setAttributes({
-            opacity: 0
-        }), this._activeLine.animate().wait(500).to({
-            opacity: 1
-        }, activeLineDuration, easing)), this._symbolGroup) {
+        }, lineDuration, easing)), this._activeLine) {
+            const opacity = null !== (_a = this._activeLine.attribute.opacity) && void 0 !== _a ? _a : 1;
+            (0, static_truth_1.commitUpdateAnimationTarget)(this._activeLine, {
+                opacity: opacity
+            }, {
+                opacity: 0
+            }), this._activeLine.animate().wait(500).to({
+                opacity: opacity
+            }, activeLineDuration, easing);
+        }
+        if (this._symbolGroup) {
             const size = this._symbolGroup.count - 1, delay = percent * (1 === size ? 0 : 400 / (size - 1)), delayNormal = percent * (1 === size ? 0 : 240 / (size - 1));
             this._symbolGroup.forEachChildren(((symbol, i) => {
+                var _a;
                 const originAttrs = {};
                 Object.keys(activeSymbolStyle).forEach((k => {
                     originAttrs[k] = symbol.attribute[k];
-                })), symbol.setAttributes({
+                }));
+                const opacity = null !== (_a = symbol.attribute.opacity) && void 0 !== _a ? _a : 1;
+                (0, static_truth_1.commitUpdateAnimationTarget)(symbol, {
+                    opacity: opacity
+                }, {
                     opacity: 0
                 }), symbol.animate().wait(symbolDelay + delay * i).to({
-                    opacity: 1
+                    opacity: opacity
                 }, perSymbolDuration, easing), symbol.animate().wait(symbolNormalDelay + delayNormal * i).to(Object.assign({}, activeSymbolStyle), perSymbolNormalDuration, easing).to(Object.assign({}, originAttrs), perSymbolNormalDuration, easing);
             }));
         }
         if (this._labelGroup) {
             const size = this._labelGroup.count - 1, delay = percent * (1 === size ? 0 : 400 / (size - 1)), delayNormal = percent * (1 === size ? 0 : 240 / (size - 1));
             this._labelGroup.forEachChildren(((label, i) => {
+                var _a;
                 const originAttrs = {};
                 Object.keys(activeLabelStyle).forEach((k => {
                     originAttrs[k] = label.attribute[k];
-                })), label.setAttributes({
+                }));
+                const opacity = null !== (_a = label.attribute.opacity) && void 0 !== _a ? _a : 1;
+                (0, static_truth_1.commitUpdateAnimationTarget)(label, {
+                    opacity: opacity
+                }, {
                     opacity: 0
                 }), label.animate().wait(symbolDelay + delay * i).to({
-                    opacity: 1
+                    opacity: opacity
                 }, perSymbolDuration, easing), label.animate().wait(symbolNormalDelay + delayNormal * i).to(Object.assign({
                     dy: 10
                 }, activeLabelStyle), perSymbolNormalDuration, easing).to(Object.assign({
@@ -123,7 +142,11 @@ class Timeline extends base_1.AbstractComponent {
         const nextClipRange = flag > 0 ? this._timesPercent[i] || 1 : this._timesPercent[i - 1] || 0;
         if (animation) {
             const {duration: duration = 1e3, easing: easing = "quadOut"} = animateConfig;
-            this.animate().to({
+            (0, static_truth_1.commitUpdateAnimationTarget)(this, {
+                clipRange: nextClipRange
+            }, {
+                clipRange: clipRange
+            }), this.animate().to({
                 clipRange: nextClipRange
             }, duration, easing);
         } else this.setAttributes({

package/cjs/timeline/timeline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/timeline/timeline.ts"],"names":[],"mappings":"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","file":"timeline.js","sourcesContent":["import { isArray, merge } from '@visactor/vutils';\nimport { AbstractComponent } from '../core/base';\nimport { loadTimelineComponent } from './register';\nimport type { TimelineAttrs } from './type';\nimport type { ComponentOptions } from '../interface';\nimport { getTheme, type IGraphicAttribute, type IGroup, type ILine, type IText } from '@visactor/vrender-core';\nimport type { ISymbol } from '@visactor/vrender-core';\n\nloadTimelineComponent();\n\nexport class Timeline extends AbstractComponent<Required<TimelineAttrs>> {\n  name = 'timeline';\n\n  private _line?: ILine;\n  private _activeLine?: ILine;\n  private _symbolGroup?: IGroup;\n  private _labelGroup?: IGroup;\n  private _timesPercent?: number[];\n\n  static defaultAttributes: Partial<TimelineAttrs> = {\n    labelSpace: 10,\n    pointLayoutMode: 'space-around',\n    animation: true,\n    symbolStyle: {\n      fill: 'black',\n      size: 12,\n      symbolType: 'circle'\n    },\n    activeSymbolStyle: {\n      fill: 'orange',\n      size: 16\n    },\n    lineStyle: {\n      lineDash: [2, 2],\n      lineCap: 'butt',\n      stroke: 'black',\n      lineWidth: 2\n    },\n    activeLineStyle: {\n      stroke: 'orange',\n      lineWidth: 4\n    },\n    labelStyle: {\n      fontSize: 12,\n      fill: 'black',\n      textAlign: 'center',\n      textBaseline: 'top'\n    },\n    activeLabelStyle: {\n      fontSize: 14,\n      fill: 'orange'\n    },\n    clipRange: 0\n  };\n\n  constructor(attributes: TimelineAttrs, options?: ComponentOptions) {\n    super(options?.skipDefault ? attributes : merge({}, Timeline.defaultAttributes, attributes));\n  }\n\n  protected render(): void {\n    const {\n      width,\n      lineStyle,\n      activeLineStyle,\n      symbolStyle,\n      activeSymbolStyle,\n      labelStyle,\n      activeLabelStyle,\n      times,\n      pointLayoutMode,\n      labelSpace,\n      clipRange,\n      animation\n    } = this.attribute;\n\n    if (!(times && times.length)) {\n      return;\n    }\n\n    // 计算线段中心的y位置，考虑线宽和symbol宽度\n    const symbolHeight = (isArray(symbolStyle.size) ? symbolStyle.size[1] : symbolStyle.size) || 0;\n    const activeSymbolHeight =\n      (isArray(activeSymbolStyle.size) ? activeSymbolStyle.size[1] : activeSymbolStyle.size) || 0;\n    const lineSymbolHeight = Math.max(\n      lineStyle.lineWidth || 0,\n      activeLineStyle.lineWidth || 0,\n      symbolHeight,\n      activeSymbolHeight\n    );\n    const lineY = lineSymbolHeight / 2;\n    const lineAttr = {\n      y: lineY,\n      points: [\n        { x: 0, y: 0 },\n        { x: width, y: 0 }\n      ]\n    };\n    this._line = this.createOrUpdateChild(\n      'line-axes',\n      {\n        ...lineStyle,\n        ...lineAttr\n      },\n      'line'\n    ) as ILine;\n    this._activeLine = this.createOrUpdateChild(\n      'active-line-axes',\n      {\n        ...activeLineStyle,\n        ...lineAttr,\n        clipRange\n      },\n      'line'\n    ) as ILine;\n\n    const activeWidth = width * clipRange;\n\n    const symbolGroup = this.createOrUpdateChild(\n      'symbol-group',\n      {\n        y: lineY\n      },\n      'group'\n    ) as IGroup;\n    const symbolSpace =\n      times.length === 1\n        ? width\n        : pointLayoutMode === 'space-between'\n        ? width / (times.length - 1)\n        : width / times.length;\n    const symbolStartX = pointLayoutMode === 'space-between' ? 0 : symbolSpace / 2;\n    this._timesPercent = times.map((_, i) => (symbolStartX + symbolSpace * i) / width);\n\n    times.forEach((item, i) => {\n      const x = this._timesPercent[i] * width;\n      symbolGroup.createOrUpdateChild(\n        item.label,\n        {\n          ...symbolStyle,\n          x\n        },\n        'symbol'\n      );\n    });\n    this._symbolGroup = symbolGroup;\n\n    const labelY = lineSymbolHeight + labelSpace;\n    const labelGroup = this.createOrUpdateChild(\n      'label-group',\n      {\n        y: labelY\n      },\n      'group'\n    ) as IGroup;\n\n    times.forEach((item, i) => {\n      const x = this._timesPercent[i] * width;\n      labelGroup.createOrUpdateChild(\n        item.label,\n        {\n          ...labelStyle,\n          x,\n          text: item.label\n        },\n        'text'\n      );\n    });\n    this._labelGroup = labelGroup;\n\n    const setActive = (group: IGroup, activeStyle: Partial<IGraphicAttribute>) => {\n      group.forEachChildren((label: IText) => {\n        if (label.currentStates) {\n          const currentStates = label.currentStates;\n          label.clearStates();\n          label.useStates(currentStates, false);\n        }\n        label.states = {\n          active: activeStyle\n        };\n        if (label.attribute.x <= activeWidth) {\n          label.useStates(['active'], animation);\n        }\n      });\n    };\n\n    setActive(labelGroup, activeLabelStyle);\n    setActive(symbolGroup, activeSymbolStyle);\n  }\n\n  appearAnimate(animateConfig: { duration?: number; easing?: string }) {\n    // 基准时间，line[0, 500], point[100, 600] 100 onebyone, pointNormal[600, 1000] 90+90 onebyone, activeLine[500, 700]\n    // line和activeLine的clipRange\n    const { duration = 1000, easing = 'quadOut' } = animateConfig;\n    const { activeLabelStyle, activeSymbolStyle } = this.attribute;\n    const percent = duration / 1000;\n    const lineDuration = percent * 500;\n    const activeLineDuration = percent * 200;\n    const perSymbolDuration = percent * 100;\n    const perSymbolNormalDuration = percent * 90;\n    const symbolDelay = percent * 100;\n    const symbolNormalDelay = percent * 600;\n    if (this._line) {\n      this._line.setAttributes({ clipRange: 0 });\n      this._line.animate().to({ clipRange: 1 }, lineDuration, easing as any);\n    }\n    if (this._activeLine) {\n      this._activeLine.setAttributes({ opacity: 0 });\n      this._activeLine\n        .animate()\n        .wait(500)\n        .to({ opacity: 1 }, activeLineDuration, easing as any);\n    }\n    if (this._symbolGroup) {\n      const size = this._symbolGroup.count - 1;\n      const delay = percent * (size === 1 ? 0 : (500 - 100) / (size - 1));\n      const delayNormal = percent * (size === 1 ? 0 : (400 - 160) / (size - 1));\n      this._symbolGroup.forEachChildren((symbol: ISymbol, i) => {\n        const originAttrs: Record<string, any> = {};\n        Object.keys(activeSymbolStyle).forEach(k => {\n          originAttrs[k] = (symbol.attribute as any)[k];\n        });\n\n        symbol.setAttributes({ opacity: 0 });\n        symbol\n          .animate()\n          .wait(symbolDelay + delay * i)\n          .to({ opacity: 1 }, perSymbolDuration, easing as any);\n        symbol\n          .animate()\n          .wait(symbolNormalDelay + delayNormal * i)\n          .to({ ...activeSymbolStyle }, perSymbolNormalDuration, easing as any)\n          .to({ ...originAttrs }, perSymbolNormalDuration, easing as any);\n      });\n    }\n    if (this._labelGroup) {\n      const size = this._labelGroup.count - 1;\n      const delay = percent * (size === 1 ? 0 : (500 - 100) / (size - 1));\n      const delayNormal = percent * (size === 1 ? 0 : (400 - 160) / (size - 1));\n      this._labelGroup.forEachChildren((label: IText, i) => {\n        const originAttrs: Record<string, any> = {};\n        Object.keys(activeLabelStyle).forEach(k => {\n          originAttrs[k] = (label.attribute as any)[k];\n        });\n        label.setAttributes({ opacity: 0 });\n        label\n          .animate()\n          .wait(symbolDelay + delay * i)\n          .to({ opacity: 1 }, perSymbolDuration, easing as any);\n        label\n          .animate()\n          .wait(symbolNormalDelay + delayNormal * i)\n          .to({ dy: 10, ...activeLabelStyle }, perSymbolNormalDuration, easing as any)\n          .to({ dy: 0, ...originAttrs }, perSymbolNormalDuration, easing as any);\n      });\n    }\n  }\n\n  goto(flag: 1 | -1, animateConfig: { duration?: number; easing?: string }) {\n    let { clipRange } = this.attribute;\n    const { animation } = this.attribute;\n\n    // 合法性判断\n    if (flag > 0) {\n      if (clipRange >= 1) {\n        return;\n      } else if (clipRange < 0) {\n        clipRange = 0;\n      }\n    } else {\n      if (clipRange <= 0) {\n        return;\n      } else if (clipRange > 1) {\n        clipRange = 1;\n      }\n    }\n\n    if (clipRange !== this.attribute.clipRange) {\n      this.setAttributes({ clipRange });\n    }\n\n    // 判断区间\n    let i = 0;\n    for (; i < this._timesPercent.length; i++) {\n      if (clipRange < this._timesPercent[i]) {\n        break;\n      }\n    }\n\n    const nextClipRange = flag > 0 ? this._timesPercent[i] || 1 : this._timesPercent[i - 1] || 0;\n    if (animation) {\n      const { duration = 1000, easing = 'quadOut' } = animateConfig;\n      // const actDuration =\n      //   (Math.abs(nextClipRange - clipRange) / ((this._timesPercent[i] ?? 1) - (this._timesPercent[i - 1] ?? 0))) *\n      //   duration;\n      this.animate().to({ clipRange: nextClipRange }, duration, easing as any);\n    } else {\n      this.setAttributes({ clipRange: nextClipRange });\n    }\n  }\n\n  forward(animateConfig: { duration?: number; easing?: string }) {\n    this.goto(1, animateConfig);\n  }\n\n  backward(animateConfig: { duration?: number; easing?: string }) {\n    this.goto(-1, animateConfig);\n  }\n}\n"]}
+{"version":3,"sources":["../src/timeline/timeline.ts"],"names":[],"mappings":"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","file":"timeline.js","sourcesContent":["import { isArray, merge } from '@visactor/vutils';\nimport { AbstractComponent } from '../core/base';\nimport { loadTimelineComponent } from './register';\nimport type { TimelineAttrs } from './type';\nimport type { ComponentOptions } from '../interface';\nimport type { IGraphicAttribute, IGroup, ILine, ISymbol, IText } from '@visactor/vrender-core';\nimport { commitUpdateAnimationTarget } from '../animation/static-truth';\n\nloadTimelineComponent();\n\nexport class Timeline extends AbstractComponent<Required<TimelineAttrs>> {\n  name = 'timeline';\n\n  private _line?: ILine;\n  private _activeLine?: ILine;\n  private _symbolGroup?: IGroup;\n  private _labelGroup?: IGroup;\n  private _timesPercent?: number[];\n\n  static defaultAttributes: Partial<TimelineAttrs> = {\n    labelSpace: 10,\n    pointLayoutMode: 'space-around',\n    animation: true,\n    symbolStyle: {\n      fill: 'black',\n      size: 12,\n      symbolType: 'circle'\n    },\n    activeSymbolStyle: {\n      fill: 'orange',\n      size: 16\n    },\n    lineStyle: {\n      lineDash: [2, 2],\n      lineCap: 'butt',\n      stroke: 'black',\n      lineWidth: 2\n    },\n    activeLineStyle: {\n      stroke: 'orange',\n      lineWidth: 4\n    },\n    labelStyle: {\n      fontSize: 12,\n      fill: 'black',\n      textAlign: 'center',\n      textBaseline: 'top'\n    },\n    activeLabelStyle: {\n      fontSize: 14,\n      fill: 'orange'\n    },\n    clipRange: 0\n  };\n\n  constructor(attributes: TimelineAttrs, options?: ComponentOptions) {\n    super(options?.skipDefault ? attributes : merge({}, Timeline.defaultAttributes, attributes));\n  }\n\n  protected render(): void {\n    const {\n      width,\n      lineStyle,\n      activeLineStyle,\n      symbolStyle,\n      activeSymbolStyle,\n      labelStyle,\n      activeLabelStyle,\n      times,\n      pointLayoutMode,\n      labelSpace,\n      clipRange,\n      animation\n    } = this.attribute;\n\n    if (!(times && times.length)) {\n      return;\n    }\n\n    // 计算线段中心的y位置，考虑线宽和symbol宽度\n    const symbolHeight = (isArray(symbolStyle.size) ? symbolStyle.size[1] : symbolStyle.size) || 0;\n    const activeSymbolHeight =\n      (isArray(activeSymbolStyle.size) ? activeSymbolStyle.size[1] : activeSymbolStyle.size) || 0;\n    const lineSymbolHeight = Math.max(\n      lineStyle.lineWidth || 0,\n      activeLineStyle.lineWidth || 0,\n      symbolHeight,\n      activeSymbolHeight\n    );\n    const lineY = lineSymbolHeight / 2;\n    const lineAttr = {\n      y: lineY,\n      points: [\n        { x: 0, y: 0 },\n        { x: width, y: 0 }\n      ]\n    };\n    this._line = this.createOrUpdateChild(\n      'line-axes',\n      {\n        ...lineStyle,\n        ...lineAttr\n      },\n      'line'\n    ) as ILine;\n    this._activeLine = this.createOrUpdateChild(\n      'active-line-axes',\n      {\n        ...activeLineStyle,\n        ...lineAttr,\n        clipRange\n      },\n      'line'\n    ) as ILine;\n\n    const activeWidth = width * clipRange;\n\n    const symbolGroup = this.createOrUpdateChild(\n      'symbol-group',\n      {\n        y: lineY\n      },\n      'group'\n    ) as IGroup;\n    const symbolSpace =\n      times.length === 1\n        ? width\n        : pointLayoutMode === 'space-between'\n        ? width / (times.length - 1)\n        : width / times.length;\n    const symbolStartX = pointLayoutMode === 'space-between' ? 0 : symbolSpace / 2;\n    this._timesPercent = times.map((_, i) => (symbolStartX + symbolSpace * i) / width);\n\n    times.forEach((item, i) => {\n      const x = this._timesPercent[i] * width;\n      symbolGroup.createOrUpdateChild(\n        item.label,\n        {\n          ...symbolStyle,\n          x\n        },\n        'symbol'\n      );\n    });\n    this._symbolGroup = symbolGroup;\n\n    const labelY = lineSymbolHeight + labelSpace;\n    const labelGroup = this.createOrUpdateChild(\n      'label-group',\n      {\n        y: labelY\n      },\n      'group'\n    ) as IGroup;\n\n    times.forEach((item, i) => {\n      const x = this._timesPercent[i] * width;\n      labelGroup.createOrUpdateChild(\n        item.label,\n        {\n          ...labelStyle,\n          x,\n          text: item.label\n        },\n        'text'\n      );\n    });\n    this._labelGroup = labelGroup;\n\n    const setActive = (group: IGroup, activeStyle: Partial<IGraphicAttribute>) => {\n      group.forEachChildren((label: IText) => {\n        if (label.currentStates) {\n          const currentStates = label.currentStates;\n          label.clearStates();\n          label.useStates(currentStates, false);\n        }\n        label.states = {\n          active: activeStyle\n        };\n        if (label.attribute.x <= activeWidth) {\n          label.useStates(['active'], animation);\n        }\n      });\n    };\n\n    setActive(labelGroup, activeLabelStyle);\n    setActive(symbolGroup, activeSymbolStyle);\n  }\n\n  appearAnimate(animateConfig: { duration?: number; easing?: string }) {\n    // 基准时间，line[0, 500], point[100, 600] 100 onebyone, pointNormal[600, 1000] 90+90 onebyone, activeLine[500, 700]\n    // line和activeLine的clipRange\n    const { duration = 1000, easing = 'quadOut' } = animateConfig;\n    const { activeLabelStyle, activeSymbolStyle } = this.attribute;\n    const percent = duration / 1000;\n    const lineDuration = percent * 500;\n    const activeLineDuration = percent * 200;\n    const perSymbolDuration = percent * 100;\n    const perSymbolNormalDuration = percent * 90;\n    const symbolDelay = percent * 100;\n    const symbolNormalDelay = percent * 600;\n    if (this._line) {\n      commitUpdateAnimationTarget(this._line, { clipRange: 1 }, { clipRange: 0 });\n      this._line.animate().to({ clipRange: 1 }, lineDuration, easing as any);\n    }\n    if (this._activeLine) {\n      const opacity = this._activeLine.attribute.opacity ?? 1;\n      commitUpdateAnimationTarget(this._activeLine, { opacity }, { opacity: 0 });\n      this._activeLine\n        .animate()\n        .wait(500)\n        .to({ opacity }, activeLineDuration, easing as any);\n    }\n    if (this._symbolGroup) {\n      const size = this._symbolGroup.count - 1;\n      const delay = percent * (size === 1 ? 0 : (500 - 100) / (size - 1));\n      const delayNormal = percent * (size === 1 ? 0 : (400 - 160) / (size - 1));\n      this._symbolGroup.forEachChildren((symbol: ISymbol, i) => {\n        const originAttrs: Record<string, any> = {};\n        Object.keys(activeSymbolStyle).forEach(k => {\n          originAttrs[k] = (symbol.attribute as any)[k];\n        });\n\n        const opacity = symbol.attribute.opacity ?? 1;\n        commitUpdateAnimationTarget(symbol, { opacity }, { opacity: 0 });\n        symbol\n          .animate()\n          .wait(symbolDelay + delay * i)\n          .to({ opacity }, perSymbolDuration, easing as any);\n        symbol\n          .animate()\n          .wait(symbolNormalDelay + delayNormal * i)\n          .to({ ...activeSymbolStyle }, perSymbolNormalDuration, easing as any)\n          .to({ ...originAttrs }, perSymbolNormalDuration, easing as any);\n      });\n    }\n    if (this._labelGroup) {\n      const size = this._labelGroup.count - 1;\n      const delay = percent * (size === 1 ? 0 : (500 - 100) / (size - 1));\n      const delayNormal = percent * (size === 1 ? 0 : (400 - 160) / (size - 1));\n      this._labelGroup.forEachChildren((label: IText, i) => {\n        const originAttrs: Record<string, any> = {};\n        Object.keys(activeLabelStyle).forEach(k => {\n          originAttrs[k] = (label.attribute as any)[k];\n        });\n        const opacity = label.attribute.opacity ?? 1;\n        commitUpdateAnimationTarget(label, { opacity }, { opacity: 0 });\n        label\n          .animate()\n          .wait(symbolDelay + delay * i)\n          .to({ opacity }, perSymbolDuration, easing as any);\n        label\n          .animate()\n          .wait(symbolNormalDelay + delayNormal * i)\n          .to({ dy: 10, ...activeLabelStyle }, perSymbolNormalDuration, easing as any)\n          .to({ dy: 0, ...originAttrs }, perSymbolNormalDuration, easing as any);\n      });\n    }\n  }\n\n  goto(flag: 1 | -1, animateConfig: { duration?: number; easing?: string }) {\n    let { clipRange } = this.attribute;\n    const { animation } = this.attribute;\n\n    // 合法性判断\n    if (flag > 0) {\n      if (clipRange >= 1) {\n        return;\n      } else if (clipRange < 0) {\n        clipRange = 0;\n      }\n    } else {\n      if (clipRange <= 0) {\n        return;\n      } else if (clipRange > 1) {\n        clipRange = 1;\n      }\n    }\n\n    if (clipRange !== this.attribute.clipRange) {\n      this.setAttributes({ clipRange });\n    }\n\n    // 判断区间\n    let i = 0;\n    for (; i < this._timesPercent.length; i++) {\n      if (clipRange < this._timesPercent[i]) {\n        break;\n      }\n    }\n\n    const nextClipRange = flag > 0 ? this._timesPercent[i] || 1 : this._timesPercent[i - 1] || 0;\n    if (animation) {\n      const { duration = 1000, easing = 'quadOut' } = animateConfig;\n      // const actDuration =\n      //   (Math.abs(nextClipRange - clipRange) / ((this._timesPercent[i] ?? 1) - (this._timesPercent[i - 1] ?? 0))) *\n      //   duration;\n      commitUpdateAnimationTarget(this as any, { clipRange: nextClipRange }, { clipRange });\n      this.animate().to({ clipRange: nextClipRange }, duration, easing as any);\n    } else {\n      this.setAttributes({ clipRange: nextClipRange });\n    }\n  }\n\n  forward(animateConfig: { duration?: number; easing?: string }) {\n    this.goto(1, animateConfig);\n  }\n\n  backward(animateConfig: { duration?: number; easing?: string }) {\n    this.goto(-1, animateConfig);\n  }\n}\n"]}

package/dist/index.es.js

@@ -18330,6 +18330,26 @@ class AnimateComponent extends AbstractComponent {
     }
 }
 
+function commitUpdateAnimationTarget(graphic, targetAttrs, startAttrs) {
+    var _a, _b, _c, _d;
+    if (!graphic || !targetAttrs) {
+        return;
+    }
+    const committedTargetAttrs = cloneDeep(targetAttrs);
+    const transientStartAttrs = cloneDeep(startAttrs !== null && startAttrs !== void 0 ? startAttrs : graphic.attribute);
+    graphic.setAttributes(committedTargetAttrs);
+    const baseAttributes = graphic.baseAttributes;
+    if (baseAttributes && typeof baseAttributes === 'object') {
+        Object.keys(committedTargetAttrs).forEach(key => {
+            baseAttributes[key] = cloneDeep(committedTargetAttrs[key]);
+        });
+    }
+    (_b = (_a = graphic).setFinalAttributes) === null || _b === void 0 ? void 0 : _b.call(_a, committedTargetAttrs);
+    (_d = (_c = graphic).setAttributesAndPreventAnimate) === null || _d === void 0 ? void 0 : _d.call(_c, transientStartAttrs, false, {
+        type: AttributeUpdateType.ANIMATE_BIND
+    });
+}
+
 const DefaultAxisAnimation = {
     type: 'default',
     duration: 300,
@@ -18731,11 +18751,10 @@ class AxisBase extends AnimateComponent {
                 var _a;
                 if (el.type !== 'group' && el.id) {
                     const oldEl = prevInnerView[el.id];
-                    el.setFinalAttributes(el.attribute);
                     if (oldEl) {
                         oldEl.release();
-                        const oldAttrs = oldEl.attribute;
-                        const finalAttrs = el.getFinalAttribute();
+                        const oldAttrs = cloneDeep(oldEl.attribute);
+                        const finalAttrs = cloneDeep(el.attribute);
                         const diffAttrs = diff(oldAttrs, finalAttrs);
                         let hasDiff = Object.keys(diffAttrs).length > 0;
                         if ('opacity' in oldAttrs && finalAttrs.opacity !== oldAttrs.opacity) {
@@ -18746,10 +18765,9 @@ class AxisBase extends AnimateComponent {
                             this._newElementAttrMap[el.id] = {
                                 state: 'update',
                                 node: el,
-                                attrs: el.attribute
+                                attrs: finalAttrs
                             };
-                            const oldAttrs = oldEl.attribute;
-                            el.setAttributes(oldAttrs);
+                            commitUpdateAnimationTarget(el, finalAttrs, oldAttrs);
                             el.applyAnimationState(['update'], [
                                 {
                                     name: 'update',
@@ -20932,7 +20950,7 @@ class AxisEnter extends AComponentAnimate {
             const point = getTickCoord(oldValue);
             const newX = this.target.attribute.x;
             const newY = this.target.attribute.y;
-            this.target.setAttributes({ x: point.x, y: point.y });
+            commitUpdateAnimationTarget(this.target, { x: newX, y: newY }, { x: point.x, y: point.y });
             animator.animate(this.target, {
                 type: 'to',
                 to: { x: newX, y: newY },
@@ -20955,7 +20973,8 @@ class AxisUpdate extends AComponentAnimate {
         this._animator = animator;
         const duration = this.duration;
         const easing = this.easing;
-        const { config, diffAttrs } = this.params;
+        const { diffAttrs } = this.params;
+        commitUpdateAnimationTarget(this.target, Object.assign({}, diffAttrs));
         animator.animate(this.target, {
             type: 'to',
             to: Object.assign({}, diffAttrs),
@@ -22002,6 +22021,7 @@ class GroupTransition extends ACustomAnimate {
         this.mode = AnimateMode.NORMAL;
     }
     onBind() {
+        this._started = false;
         const currentInnerView = this.target.getInnerView();
         const prevInnerView = this.target.getPrevInnerView();
         if (!prevInnerView) {
@@ -22020,7 +22040,7 @@ class GroupTransition extends ACustomAnimate {
                             node: el,
                             attrs: Object.assign(Object.assign({}, newProps), { opacity: (_a = newProps.opacity) !== null && _a !== void 0 ? _a : 1, fillOpacity: (_b = newProps.fillOpacity) !== null && _b !== void 0 ? _b : 1, strokeOpacity: (_c = newProps.strokeOpacity) !== null && _c !== void 0 ? _c : 1 })
                         };
-                        el.setAttributes(oldEl.attribute);
+                        commitUpdateAnimationTarget(el, this._newElementAttrMap[el.id].attrs, cloneDeep(oldEl.attribute));
                     }
                 }
                 else {
@@ -22034,7 +22054,7 @@ class GroupTransition extends ACustomAnimate {
                         node: el,
                         attrs: finalOpacityAttrs
                     };
-                    el.setAttributes({
+                    commitUpdateAnimationTarget(el, finalOpacityAttrs, {
                         opacity: 0,
                         fillOpacity: 0,
                         strokeOpacity: 0
@@ -22044,6 +22064,10 @@ class GroupTransition extends ACustomAnimate {
         });
     }
     onStart() {
+        if (this._started) {
+            return;
+        }
+        this._started = true;
         let duration = this.duration;
         let easing = this.easing;
         this._newElementAttrMap &&
@@ -24159,6 +24183,8 @@ class LabelBase extends AnimateComponent {
     _runUpdateAnimation(prevLabel, currentLabel) {
         const { text: prevText, labelLine: prevLabelLine } = prevLabel;
         const { text: curText, labelLine: curLabelLine } = currentLabel;
+        commitUpdateAnimationTarget(prevText, curText === null || curText === void 0 ? void 0 : curText.attribute);
+        commitUpdateAnimationTarget(prevLabelLine, curLabelLine === null || curLabelLine === void 0 ? void 0 : curLabelLine.attribute);
         prevText.applyAnimationState(['update'], [
             {
                 name: 'update',
@@ -24190,7 +24216,7 @@ class LabelBase extends AnimateComponent {
         this.runEnterAnimation(text, labelLine);
     }
     _updateLabel(prevLabel, currentLabel) {
-        const { text: prevText, labelLine: prevLabelLine } = prevLabel;
+        const { labelLine: prevLabelLine } = prevLabel;
         const { text: curText, labelLine: curLabelLine } = currentLabel;
         if (this._enableAnimation === false || this._animationConfig.update === false) {
             prevLabel.text.setAttributes(curText.attribute);
@@ -27086,7 +27112,10 @@ function graphicFadeIn(graphic, delay, duration, easing) {
     (_a = graphic === null || graphic === void 0 ? void 0 : graphic.animates) === null || _a === void 0 ? void 0 : _a.forEach(a => a.stop('end'));
     const fillOpacityConfig = (_c = (_b = graphic.attribute) === null || _b === void 0 ? void 0 : _b.fillOpacity) !== null && _c !== void 0 ? _c : 1;
     const strokeOpacityConfig = (_e = (_d = graphic.attribute) === null || _d === void 0 ? void 0 : _d.strokeOpacity) !== null && _e !== void 0 ? _e : 1;
-    graphic.setAttributes({
+    commitUpdateAnimationTarget(graphic, {
+        fillOpacity: fillOpacityConfig,
+        strokeOpacity: strokeOpacityConfig
+    }, {
         fillOpacity: 0,
         strokeOpacity: 0
     });
@@ -27116,7 +27145,10 @@ function graphicFadeOut(graphic, delay, duration, easing) {
     if (!graphic) {
         return;
     }
-    graphic.setAttributes({
+    commitUpdateAnimationTarget(graphic, {
+        fillOpacity: 0,
+        strokeOpacity: 0
+    }, {
         fillOpacity: (_b = (_a = graphic.attribute) === null || _a === void 0 ? void 0 : _a.fillOpacity) !== null && _b !== void 0 ? _b : 1,
         strokeOpacity: (_d = (_c = graphic.attribute) === null || _c === void 0 ? void 0 : _c.strokeOpacity) !== null && _d !== void 0 ? _d : 1
     });
@@ -27145,7 +27177,7 @@ function commonLineClipIn(line, label, duration, delay, easing) {
     const endSymbolDuration = 0.1 * duration;
     const labelDuration = 0.1 * duration;
     graphicFadeIn(line.startSymbol, delay, startSymbolDuration, easing);
-    line.lines.forEach(line => line.setAttribute('clipRange', 0));
+    line.lines.forEach(line => commitUpdateAnimationTarget(line, { clipRange: 1 }, { clipRange: 0 }));
     line.lines.forEach((l, index) => {
         const stepDuration = lineDuration / line.lines.length;
         l.animate()
@@ -27228,7 +27260,7 @@ function pointCallIn(itemLine, decorativeLine, item, duration, delay, easing) {
     const endSymbolDuration = 0.1 * duration;
     const labelDuration = 0.1 * duration;
     graphicFadeIn(itemLine.startSymbol, delay, startSymbolDuration, easing);
-    itemLine.lines.forEach(line => line.setAttribute('clipRange', 0));
+    itemLine.lines.forEach(line => commitUpdateAnimationTarget(line, { clipRange: 1 }, { clipRange: 0 }));
     itemLine.lines.forEach((l, index) => {
         const stepDuration = lineDuration / itemLine.lines.length;
         l.animate()
@@ -29727,9 +29759,9 @@ class DiscreteLegend extends LegendBase {
             }
             if (!this._itemContext.isScrollbar) {
                 if (animation) {
-                    this._itemsContainer
-                        .animate()
-                        .to({ [channel]: -(newPage - 1) * pageSize }, animationDuration, animationEasing);
+                    const attrs = { [channel]: -(newPage - 1) * pageSize };
+                    commitUpdateAnimationTarget(this._itemsContainer, attrs);
+                    this._itemsContainer.animate().to(attrs, animationDuration, animationEasing);
                 }
                 else {
                     this._itemsContainer.setAttribute(channel, -(newPage - 1) * pageSize);
@@ -29747,7 +29779,9 @@ class DiscreteLegend extends LegendBase {
                 const startOffset = containerSize * start;
                 this.updateScrollMask();
                 if (animation) {
-                    this._itemsContainer.animate().to({ [channel]: -startOffset }, animationDuration, animationEasing);
+                    const attrs = { [channel]: -startOffset };
+                    commitUpdateAnimationTarget(this._itemsContainer, attrs);
+                    this._itemsContainer.animate().to(attrs, animationDuration, animationEasing);
                 }
                 else {
                     this._itemsContainer.setAttribute(channel, -startOffset);
@@ -33700,6 +33734,7 @@ class Timeline extends AbstractComponent {
         setActive(symbolGroup, activeSymbolStyle);
     }
     appearAnimate(animateConfig) {
+        var _a;
         const { duration = 1000, easing = 'quadOut' } = animateConfig;
         const { activeLabelStyle, activeSymbolStyle } = this.attribute;
         const percent = duration / 1000;
@@ -33710,30 +33745,33 @@ class Timeline extends AbstractComponent {
         const symbolDelay = percent * 100;
         const symbolNormalDelay = percent * 600;
         if (this._line) {
-            this._line.setAttributes({ clipRange: 0 });
+            commitUpdateAnimationTarget(this._line, { clipRange: 1 }, { clipRange: 0 });
             this._line.animate().to({ clipRange: 1 }, lineDuration, easing);
         }
         if (this._activeLine) {
-            this._activeLine.setAttributes({ opacity: 0 });
+            const opacity = (_a = this._activeLine.attribute.opacity) !== null && _a !== void 0 ? _a : 1;
+            commitUpdateAnimationTarget(this._activeLine, { opacity }, { opacity: 0 });
             this._activeLine
                 .animate()
                 .wait(500)
-                .to({ opacity: 1 }, activeLineDuration, easing);
+                .to({ opacity }, activeLineDuration, easing);
         }
         if (this._symbolGroup) {
             const size = this._symbolGroup.count - 1;
             const delay = percent * (size === 1 ? 0 : (500 - 100) / (size - 1));
             const delayNormal = percent * (size === 1 ? 0 : (400 - 160) / (size - 1));
             this._symbolGroup.forEachChildren((symbol, i) => {
+                var _a;
                 const originAttrs = {};
                 Object.keys(activeSymbolStyle).forEach(k => {
                     originAttrs[k] = symbol.attribute[k];
                 });
-                symbol.setAttributes({ opacity: 0 });
+                const opacity = (_a = symbol.attribute.opacity) !== null && _a !== void 0 ? _a : 1;
+                commitUpdateAnimationTarget(symbol, { opacity }, { opacity: 0 });
                 symbol
                     .animate()
                     .wait(symbolDelay + delay * i)
-                    .to({ opacity: 1 }, perSymbolDuration, easing);
+                    .to({ opacity }, perSymbolDuration, easing);
                 symbol
                     .animate()
                     .wait(symbolNormalDelay + delayNormal * i)
@@ -33746,15 +33784,17 @@ class Timeline extends AbstractComponent {
             const delay = percent * (size === 1 ? 0 : (500 - 100) / (size - 1));
             const delayNormal = percent * (size === 1 ? 0 : (400 - 160) / (size - 1));
             this._labelGroup.forEachChildren((label, i) => {
+                var _a;
                 const originAttrs = {};
                 Object.keys(activeLabelStyle).forEach(k => {
                     originAttrs[k] = label.attribute[k];
                 });
-                label.setAttributes({ opacity: 0 });
+                const opacity = (_a = label.attribute.opacity) !== null && _a !== void 0 ? _a : 1;
+                commitUpdateAnimationTarget(label, { opacity }, { opacity: 0 });
                 label
                     .animate()
                     .wait(symbolDelay + delay * i)
-                    .to({ opacity: 1 }, perSymbolDuration, easing);
+                    .to({ opacity }, perSymbolDuration, easing);
                 label
                     .animate()
                     .wait(symbolNormalDelay + delayNormal * i)
@@ -33794,6 +33834,7 @@ class Timeline extends AbstractComponent {
         const nextClipRange = flag > 0 ? this._timesPercent[i] || 1 : this._timesPercent[i - 1] || 0;
         if (animation) {
             const { duration = 1000, easing = 'quadOut' } = animateConfig;
+            commitUpdateAnimationTarget(this, { clipRange: nextClipRange }, { clipRange });
             this.animate().to({ clipRange: nextClipRange }, duration, easing);
         }
         else {
@@ -35640,6 +35681,6 @@ TableSeriesNumber.defaultAttributes = {
     select: true
 };
 
-const version = "1.1.0-alpha.7";
+const version = "1.1.0-alpha.8";
 
 export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IDataZoomEvent, IDataZoomInteractiveEvent, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PolygonSectorCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SeriesNumberCellStateValue, SeriesNumberEvent, SizeContinuousLegend, Slider, StoryLabelItem, Switch, SymbolLabel, TableSeriesNumber, Tag, Timeline, Title, Tooltip, TopZIndex, VTag, WeatherBox, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, hasOverlap, htmlAttributeTransform, initTextMeasure, installPoptipToApp, installScrollbarToApp, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, loadScrollbar, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, textIntersect, ticks, traverseGroup, version };

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,

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    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/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,18 @@
+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);
+    const baseAttributes = graphic.baseAttributes;
+    baseAttributes && "object" == typeof baseAttributes && Object.keys(committedTargetAttrs).forEach((key => {
+        baseAttributes[key] = cloneDeep(committedTargetAttrs[key]);
+    })), 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,MAAM,cAAc,GAAI,OAAe,CAAC,cAAc,CAAC;IACvD,IAAI,cAAc,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE;QACxD,MAAM,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAC9C,cAAc,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,CAAC;QAC7D,CAAC,CAAC,CAAC;KACJ;IACD,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  const baseAttributes = (graphic as any).baseAttributes;\n  if (baseAttributes && typeof baseAttributes === 'object') {\n    Object.keys(committedTargetAttrs).forEach(key => {\n      baseAttributes[key] = cloneDeep(committedTargetAttrs[key]);\n    });\n  }\n  (graphic as any).setFinalAttributes?.(committedTargetAttrs);\n  (graphic as any).setAttributesAndPreventAnimate?.(transientStartAttrs as any, false, {\n    type: AttributeUpdateType.ANIMATE_BIND\n  });\n}\n"]}