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

package/dist/index.js

@@ -40864,6 +40864,20 @@
       }
     }
 
+    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: exports.AttributeUpdateType.ANIMATE_BIND
+      });
+    }
+
     const DefaultAxisAnimation = {
       type: "default",
       duration: 300,
@@ -41189,33 +41203,29 @@
             var _a;
             if ("group" !== el.type && el.id) {
               const oldEl = prevInnerView[el.id];
-              if (el.setFinalAttributes(el.attribute), oldEl) {
+              if (oldEl) {
                 oldEl.release();
-                const oldAttrs = oldEl.attribute,
-                  finalAttrs = el.getFinalAttribute(),
+                const oldAttrs = cloneDeep(oldEl.attribute),
+                  finalAttrs = cloneDeep(el.attribute),
                   diffAttrs = diff(oldAttrs, finalAttrs);
                 let hasDiff = Object.keys(diffAttrs).length > 0;
-                if ("opacity" in oldAttrs && finalAttrs.opacity !== oldAttrs.opacity && (diffAttrs.opacity = null !== (_a = finalAttrs.opacity) && void 0 !== _a ? _a : 1, hasDiff = !0), animationConfig.update && hasDiff) {
-                  this._newElementAttrMap[el.id] = {
-                    state: "update",
-                    node: el,
-                    attrs: el.attribute
-                  };
-                  const oldAttrs = oldEl.attribute;
-                  el.setAttributes(oldAttrs), el.applyAnimationState(["update"], [{
-                    name: "update",
-                    animation: Object.assign(Object.assign({
-                      selfOnly: !0
-                    }, animationConfig.update), {
-                      type: "axisUpdate",
-                      customParameters: {
-                        config: animationConfig.update,
-                        diffAttrs: diffAttrs,
-                        lastScale: lastScale
-                      }
-                    })
-                  }]);
-                }
+                "opacity" in oldAttrs && finalAttrs.opacity !== oldAttrs.opacity && (diffAttrs.opacity = null !== (_a = finalAttrs.opacity) && void 0 !== _a ? _a : 1, hasDiff = !0), animationConfig.update && hasDiff && (this._newElementAttrMap[el.id] = {
+                  state: "update",
+                  node: el,
+                  attrs: finalAttrs
+                }, commitUpdateAnimationTarget(el, finalAttrs, oldAttrs), el.applyAnimationState(["update"], [{
+                  name: "update",
+                  animation: Object.assign(Object.assign({
+                    selfOnly: !0
+                  }, animationConfig.update), {
+                    type: "axisUpdate",
+                    customParameters: {
+                      config: animationConfig.update,
+                      diffAttrs: diffAttrs,
+                      lastScale: lastScale
+                    }
+                  })
+                }]));
               } else animationConfig.enter && (this._newElementAttrMap[el.id] = {
                 state: "enter",
                 node: el,
@@ -41559,7 +41569,10 @@
           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, {
@@ -41587,10 +41600,9 @@
         const duration = this.duration,
           easing = this.easing,
           {
-            config: config,
             diffAttrs: diffAttrs
           } = this.params;
-        animator.animate(this.target, {
+        commitUpdateAnimationTarget(this.target, Object.assign({}, diffAttrs)), animator.animate(this.target, {
           type: "to",
           to: Object.assign({}, diffAttrs),
           duration: duration,
@@ -42475,6 +42487,7 @@
         super(...arguments), this.mode = exports.AnimateMode.NORMAL;
       }
       onBind() {
+        this._started = !1;
         const currentInnerView = this.target.getInnerView(),
           prevInnerView = this.target.getPrevInnerView();
         prevInnerView && (this._newElementAttrMap = {}, traverseGroup(currentInnerView, el => {
@@ -42492,7 +42505,7 @@
                     fillOpacity: null !== (_b = newProps.fillOpacity) && void 0 !== _b ? _b : 1,
                     strokeOpacity: null !== (_c = newProps.strokeOpacity) && void 0 !== _c ? _c : 1
                   })
-                }, el.setAttributes(oldEl.attribute);
+                }, commitUpdateAnimationTarget(el, this._newElementAttrMap[el.id].attrs, cloneDeep(oldEl.attribute));
               }
             } else {
               const finalOpacityAttrs = {
@@ -42504,7 +42517,7 @@
                 state: "enter",
                 node: el,
                 attrs: finalOpacityAttrs
-              }, el.setAttributes({
+              }, commitUpdateAnimationTarget(el, finalOpacityAttrs, {
                 opacity: 0,
                 fillOpacity: 0,
                 strokeOpacity: 0
@@ -42514,6 +42527,8 @@
         }));
       }
       onStart() {
+        if (this._started) return;
+        this._started = !0;
         let duration = this.duration,
           easing = this.easing;
         this._newElementAttrMap && Object.keys(this._newElementAttrMap).forEach(id => {
@@ -44610,7 +44625,7 @@
             text: curText,
             labelLine: curLabelLine
           } = currentLabel;
-        prevText.applyAnimationState(["update"], [{
+        commitUpdateAnimationTarget(prevText, null == curText ? void 0 : curText.attribute), commitUpdateAnimationTarget(prevLabelLine, null == curLabelLine ? void 0 : curLabelLine.attribute), prevText.applyAnimationState(["update"], [{
           name: "update",
           animation: {
             type: "labelUpdate",
@@ -44636,7 +44651,6 @@
       }
       _updateLabel(prevLabel, currentLabel) {
         const {
-            text: prevText,
             labelLine: prevLabelLine
           } = prevLabel,
           {
@@ -47205,7 +47219,10 @@
       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({
+      commitUpdateAnimationTarget(graphic, {
+        fillOpacity: fillOpacityConfig,
+        strokeOpacity: strokeOpacityConfig
+      }, {
         fillOpacity: 0,
         strokeOpacity: 0
       }), graphic.animate().wait(delay).to({
@@ -47221,7 +47238,10 @@
     }
     function graphicFadeOut(graphic, delay, duration, easing) {
       var _a, _b, _c, _d;
-      graphic && (graphic.setAttributes({
+      graphic && (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({
@@ -47241,7 +47261,11 @@
         lineDuration = .7 * duration,
         endSymbolDuration = .1 * duration,
         labelDuration = .1 * duration;
-      graphicFadeIn(line.startSymbol, delay, startSymbolDuration, easing), line.lines.forEach(line => line.setAttribute("clipRange", 0)), line.lines.forEach((l, index) => {
+      graphicFadeIn(line.startSymbol, delay, startSymbolDuration, easing), line.lines.forEach(line => commitUpdateAnimationTarget(line, {
+        clipRange: 1
+      }, {
+        clipRange: 0
+      })), line.lines.forEach((l, index) => {
         const stepDuration = lineDuration / line.lines.length;
         l.animate().wait(delay + startSymbolDuration + index * stepDuration).to({
           clipRange: 1
@@ -47299,7 +47323,11 @@
         decorativeDuration = .05 * duration,
         endSymbolDuration = .1 * duration,
         labelDuration = .1 * duration;
-      graphicFadeIn(itemLine.startSymbol, delay, startSymbolDuration, easing), itemLine.lines.forEach(line => line.setAttribute("clipRange", 0)), itemLine.lines.forEach((l, index) => {
+      graphicFadeIn(itemLine.startSymbol, delay, startSymbolDuration, easing), itemLine.lines.forEach(line => commitUpdateAnimationTarget(line, {
+        clipRange: 1
+      }, {
+        clipRange: 0
+      })), itemLine.lines.forEach((l, index) => {
         const stepDuration = lineDuration / itemLine.lines.length;
         l.animate().wait(delay + startSymbolDuration + index * stepDuration).to({
           clipRange: 1
@@ -49583,12 +49611,18 @@
                 let containerSize;
                 containerSize = this._itemContext.isHorizontal ? this._itemsContainer.AABBBounds.width() : this._itemsContainer.AABBBounds.height();
                 const startOffset = containerSize * start;
-                this.updateScrollMask(), animation ? this._itemsContainer.animate().to({
-                  [channel]: -startOffset
-                }, animationDuration, animationEasing) : this._itemsContainer.setAttribute(channel, -startOffset);
-              } else animation ? this._itemsContainer.animate().to({
-                [channel]: -(newPage - 1) * pageSize
-              }, animationDuration, animationEasing) : this._itemsContainer.setAttribute(channel, -(newPage - 1) * pageSize);
+                if (this.updateScrollMask(), animation) {
+                  const attrs = {
+                    [channel]: -startOffset
+                  };
+                  commitUpdateAnimationTarget(this._itemsContainer, attrs), this._itemsContainer.animate().to(attrs, animationDuration, animationEasing);
+                } else this._itemsContainer.setAttribute(channel, -startOffset);
+              } else if (animation) {
+                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);
             }
           };
         if (this._itemContext.isScrollbar) {
@@ -52612,6 +52646,7 @@
         setActive(labelGroup, activeLabelStyle), setActive(symbolGroup, activeSymbolStyle);
       }
       appearAnimate(animateConfig) {
+        var _a;
         const {
             duration = 1e3,
             easing = "quadOut"
@@ -52627,26 +52662,39 @@
           perSymbolNormalDuration = 90 * percent,
           symbolDelay = 100 * percent,
           symbolNormalDelay = 600 * percent;
-        if (this._line && (this._line.setAttributes({
+        if (this._line && (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;
+          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;
+            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);
           });
         }
@@ -52655,13 +52703,18 @@
             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;
+            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({
@@ -52695,7 +52748,11 @@
             duration = 1e3,
             easing = "quadOut"
           } = animateConfig;
-          this.animate().to({
+          commitUpdateAnimationTarget(this, {
+            clipRange: nextClipRange
+          }, {
+            clipRange: clipRange
+          }), this.animate().to({
             clipRange: nextClipRange
           }, duration, easing);
         } else this.setAttributes({
@@ -54414,7 +54471,7 @@
         return resolveLegacyApp().createStage(params);
     }
 
-    const version = "1.1.0-alpha.7";
+    const version = "1.1.0-alpha.8";
 
     exports.AComponentAnimate = AComponentAnimate;
     exports.ACustomAnimate = ACustomAnimate;