@visactor/react-vchart 2.1.0 → 2.1.2-alpha.0

package/build/index.js

@@ -13828,9 +13828,10 @@
           } else assignFallbackAttr(this.getStateTransitionDefaultAttribute(key, staticTargetAttrs));
         }), extraAttrs;
       }
-      syncObjectToSnapshot(target, snapshot) {
+      syncObjectToSnapshot(target, snapshot, excludedKeys) {
         const delta = new Map();
         return new Set([...Object.keys(target), ...Object.keys(snapshot)]).forEach(key => {
+          if (!0 === (null == excludedKeys ? void 0 : excludedKeys[key])) return;
           const hasNext = Object.prototype.hasOwnProperty.call(snapshot, key),
             previousValue = target[key];
           if (!hasNext) return void (Object.prototype.hasOwnProperty.call(target, key) && (delta.set(key, {
@@ -13844,17 +13845,17 @@
           }), target[key] = cloneAttributeValue(nextValue));
         }), delta;
       }
-      _syncAttribute() {
+      _syncAttribute(excludedKeys) {
         this.attribute === this.baseAttributes && this.resolvedStatePatch && this.detachAttributeFromBaseAttributes();
         const snapshot = this.buildStaticAttributeSnapshot(),
-          delta = this.syncObjectToSnapshot(this.attribute, snapshot);
-        return this.valid = this.isValid(), this.attributeMayContainTransientAttrs = !1, delta;
+          delta = this.syncObjectToSnapshot(this.attribute, snapshot, excludedKeys);
+        return this.valid = this.isValid(), this.attributeMayContainTransientAttrs = !!excludedKeys, delta;
       }
-      _syncFinalAttributeFromStaticTruth() {
+      _syncFinalAttributeFromStaticTruth(excludedKeys) {
         const target = this.finalAttribute;
         if (!target) return;
         const snapshot = this.buildStaticAttributeSnapshot();
-        this.syncObjectToSnapshot(target, snapshot);
+        this.syncObjectToSnapshot(target, snapshot, excludedKeys);
       }
       mergeAttributeDeltaCategory(category, key, prev, next) {
         var _a;
@@ -13911,6 +13912,25 @@
           this.getBaseAttributesStorage()[key] = params[key];
         }
       }
+      _commitAnimationStaticAttributes(params, context) {
+        if (!params) return;
+        const source = params,
+          baseAttributes = this.getBaseAttributesStorage(),
+          target = this.attribute,
+          delta = new Map();
+        let hasKeys = !1;
+        for (const key in source) {
+          if (!Object.prototype.hasOwnProperty.call(source, key)) continue;
+          hasKeys = !0;
+          const previousValue = target[key],
+            nextValue = source[key];
+          baseAttributes[key] = nextValue, target[key] = nextValue, areAttributeValuesEqual(previousValue, nextValue) || delta.set(key, {
+            prev: previousValue,
+            next: nextValue
+          });
+        }
+        hasKeys && (this.valid = this.isValid(), this.attributeMayContainTransientAttrs = !0, this.submitUpdateByDelta(delta), this.onAttributeUpdate(context));
+      }
       applyAnimationTransientAttributes(params, forceUpdateTag = !1, context) {
         const source = params;
         let target,
@@ -13933,9 +13953,9 @@
         }
         delta.size && (this.attributeMayContainTransientAttrs = !0), this.valid = this.isValid(), this.submitUpdateByDelta(delta, forceUpdateTag), this.onAttributeUpdate(context);
       }
-      _restoreAttributeFromStaticTruth(context) {
-        this._syncFinalAttributeFromStaticTruth();
-        const delta = this._syncAttribute();
+      _restoreAttributeFromStaticTruth(context, excludedKeys) {
+        this._syncFinalAttributeFromStaticTruth(excludedKeys);
+        const delta = this._syncAttribute(excludedKeys);
         this.submitUpdateByDelta(delta), this.onAttributeUpdate(context);
       }
       collectStatePatchDeltaKeys(previousPatch, nextPatch) {
@@ -20746,14 +20766,18 @@
     }
     class ContributionStore {
       static getStore(id) {
-        return this.store.get(id);
+        var _a;
+        return null === (_a = this.store.get(id)) || void 0 === _a ? void 0 : _a.values().next().value;
       }
       static setStore(id, cache) {
-        this.store.set(id, cache);
+        let caches = this.store.get(id);
+        caches || (caches = new Set(), this.store.set(id, caches)), caches.add(cache);
       }
       static refreshAllContributions() {
-        this.store.forEach(cache => {
-          cache.refresh();
+        this.store.forEach(caches => {
+          caches.forEach(cache => {
+            cache.refresh();
+          });
         });
       }
     }
@@ -22054,6 +22078,9 @@
     }
     const defaultGroupBackgroundRenderContribution = new DefaultGroupBackgroundRenderContribution();
 
+    function hasDisabledStrokeSide(stroke) {
+      return Array.isArray(stroke) && stroke.some(s => !1 === s || null === s);
+    }
     class DefaultRectRenderContribution {
       constructor() {
         this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 0;
@@ -22109,7 +22136,7 @@
         const {
           stroke = groupAttribute.stroke
         } = group.attribute;
-        Array.isArray(stroke) && stroke.some(s => !1 === s) && (doFillOrStroke.doStroke = !1);
+        hasDisabledStrokeSide(stroke) && (doFillOrStroke.doStroke = !1);
       }
     }
     class SplitRectAfterRenderContribution {
@@ -22130,7 +22157,7 @@
           width: width,
           height: height
         } = rect.attribute;
-        if (width = (null != width ? width : x1 - originX) || 0, height = (null != height ? height : y1 - originY) || 0, Array.isArray(stroke) && stroke.some(s => !1 === s)) {
+        if (width = (null != width ? width : x1 - originX) || 0, height = (null != height ? height : y1 - originY) || 0, hasDisabledStrokeSide(stroke)) {
           if (context.setStrokeStyle(rect, rect.attribute, x, y, groupAttribute), !(0 === cornerRadius || isArray$1(cornerRadius) && cornerRadius.every(num => 0 === num))) {
             let lastStroke,
               lastStrokeI = 0;
@@ -23165,6 +23192,199 @@
       }
     }
 
+    function drawArcPath(arc, context, cx, cy, z, outerRadius, innerRadius) {
+      const {
+          startAngle: startAngle,
+          endAngle: endAngle
+        } = arc.getParsedAngle(),
+        deltaAngle = abs$1(endAngle - startAngle),
+        clockwise = endAngle > startAngle;
+      let collapsedToLine = !1;
+      if (outerRadius < innerRadius) {
+        const temp = outerRadius;
+        outerRadius = innerRadius, innerRadius = temp;
+      }
+      if (outerRadius <= epsilon$1) context.moveTo(cx, cy, z);else if (deltaAngle >= pi2 - epsilon$1) context.moveTo(cx + outerRadius * cos$1(startAngle), cy + outerRadius * sin$1(startAngle), z), context.arc(cx, cy, outerRadius, startAngle, endAngle, !clockwise, z), innerRadius > epsilon$1 && (context.moveTo(cx + innerRadius * cos$1(endAngle), cy + innerRadius * sin$1(endAngle), z), context.arc(cx, cy, innerRadius, endAngle, startAngle, clockwise, z));else {
+        const {
+            outerDeltaAngle: outerDeltaAngle,
+            innerDeltaAngle: innerDeltaAngle,
+            outerStartAngle: outerStartAngle,
+            outerEndAngle: outerEndAngle,
+            innerEndAngle: innerEndAngle,
+            innerStartAngle: innerStartAngle
+          } = arc.getParsePadAngle(startAngle, endAngle),
+          xors = outerRadius * cos$1(outerStartAngle),
+          yors = outerRadius * sin$1(outerStartAngle),
+          xire = innerRadius * cos$1(innerEndAngle),
+          yire = innerRadius * sin$1(innerEndAngle);
+        outerDeltaAngle < .001 ? collapsedToLine = !0 : (context.moveTo(cx + xors, cy + yors, z), context.arc(cx, cy, outerRadius, outerStartAngle, outerEndAngle, !clockwise, z)), !(innerRadius > epsilon$1) || innerDeltaAngle < .001 ? (context.lineTo(cx + xire, cy + yire, z), collapsedToLine = !0) : (context.lineTo(cx + xire, cy + yire, z), context.arc(cx, cy, innerRadius, innerEndAngle, innerStartAngle, clockwise, z));
+      }
+      return context.closePath(), collapsedToLine;
+    }
+    function drawInnerOuterArcPath(arc, context, cx, cy, z1, z2, radius, getParsePadAngle) {
+      const {
+          startAngle: startAngle,
+          endAngle: endAngle
+        } = arc.getParsedAngle(),
+        deltaAngle = abs$1(endAngle - startAngle),
+        clockwise = endAngle > startAngle;
+      let collapsedToLine = !1;
+      if (radius <= epsilon$1) context.moveTo(cx, cy, z1);else if (deltaAngle >= pi2 - epsilon$1) context.moveTo(cx + radius * cos$1(startAngle), cy + radius * sin$1(startAngle), z1), context.arc(cx, cy, radius, startAngle, endAngle, !clockwise, z1), context.lineTo(cx + radius * cos$1(endAngle), cy + radius * sin$1(endAngle), z2), context.arc(cx, cy, radius, endAngle, startAngle, clockwise, z2);else {
+        const {
+            innerouterDeltaAngle: innerouterDeltaAngle,
+            innerouterStartAngle: innerouterStartAngle,
+            innerouterEndAngle: innerouterEndAngle
+          } = getParsePadAngle(startAngle, endAngle),
+          xors = radius * cos$1(innerouterStartAngle),
+          yors = radius * sin$1(innerouterStartAngle),
+          xore = radius * cos$1(innerouterEndAngle),
+          yore = radius * sin$1(innerouterEndAngle);
+        innerouterDeltaAngle < .001 ? collapsedToLine = !0 : (context.moveTo(cx + xors, cy + yors, z1), context.arc(cx, cy, radius, innerouterStartAngle, innerouterEndAngle, !clockwise, z1), context.lineTo(cx + xore, cy + yore, z2), context.arc(cx, cy, radius, innerouterEndAngle, innerouterStartAngle, clockwise, z2));
+      }
+      return context.closePath(), collapsedToLine;
+    }
+    class DefaultCanvasArc3DRender extends BaseRender {
+      constructor() {
+        super(...arguments), this.numberType = ARC3D_NUMBER_TYPE;
+      }
+      drawShape(arc, context, x, y, drawContext, params, fillCb, strokeCb) {
+        var _a;
+        const arcAttribute = getTheme$1(arc, null == params ? void 0 : params.theme).arc,
+          {
+            fill = arcAttribute.fill
+          } = arc.attribute,
+          data = this.valid(arc, arcAttribute, fillCb, strokeCb);
+        if (!data) return;
+        const {
+            fVisible: fVisible,
+            sVisible: sVisible,
+            doFill: doFill,
+            doStroke: doStroke
+          } = data,
+          z = null !== (_a = this.z) && void 0 !== _a ? _a : 0,
+          {
+            outerPadding = arcAttribute.outerPadding,
+            innerPadding = arcAttribute.innerPadding,
+            height = 10
+          } = arc.attribute;
+        let {
+          outerRadius = arcAttribute.outerRadius,
+          innerRadius = arcAttribute.innerRadius
+        } = arc.attribute;
+        outerRadius += outerPadding, innerRadius -= innerPadding;
+        const rgbArray = ColorStore.Get(fill, ColorType.Color255),
+          {
+            light: light
+          } = drawContext.stage || {},
+          face = drawContext.hack_pieFace,
+          z_face = {
+            top: z,
+            bottom: z + height
+          },
+          n_face = {
+            top: [0, 1, 0],
+            bottom: [0, -1, 0],
+            outside: [1, 0, -1],
+            inside: [1, 0, -1]
+          };
+        "bottom" === face || "top" === face ? (context.beginPath(), drawArcPath(arc, context, x, y, z_face[face], outerRadius, innerRadius), context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute), doFill && (fillCb ? fillCb(context, arc.attribute, arcAttribute) : fVisible && (context.setCommonStyle(arc, arc.attribute, x, y, arcAttribute), context.fillStyle = light ? light.computeColor(n_face[face], rgbArray) : fill, context.fill())), doStroke && (strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke()))) : "outside" !== face && "inside" !== face || ("inside" === face && (context.save(), context.beginPath(), context.arc(x, y, innerRadius, 0, pi2, !0, z_face.top), context.clip()), context.beginPath(), drawInnerOuterArcPath(arc, context, x, y, z_face.top, z_face.bottom, "outside" === face ? outerRadius : innerRadius, (startAngle, endAngle) => {
+          const {
+            outerDeltaAngle: outerDeltaAngle,
+            innerDeltaAngle: innerDeltaAngle,
+            outerStartAngle: outerStartAngle,
+            outerEndAngle: outerEndAngle,
+            innerEndAngle: innerEndAngle,
+            innerStartAngle: innerStartAngle
+          } = arc.getParsePadAngle(startAngle, endAngle);
+          return "outside" === face ? {
+            innerouterDeltaAngle: outerDeltaAngle,
+            innerouterEndAngle: outerEndAngle,
+            innerouterStartAngle: outerStartAngle
+          } : {
+            innerouterDeltaAngle: innerDeltaAngle,
+            innerouterEndAngle: innerEndAngle,
+            innerouterStartAngle: innerStartAngle
+          };
+        }), context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute), doFill && (fillCb ? fillCb(context, arc.attribute, arcAttribute) : fVisible && (context.setCommonStyle(arc, arc.attribute, x, y, arcAttribute), context.fillStyle = light ? light.computeColor(n_face[face], rgbArray) : fill, context.fill())), doStroke && (strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke())), "inside" === face && context.restore());
+      }
+      draw(arc, renderService, drawContext, params) {
+        const arcAttribute = getTheme$1(arc, null == params ? void 0 : params.theme).arc;
+        this._draw(arc, arcAttribute, !1, drawContext, params);
+      }
+    }
+
+    class Base3dRender extends BaseRender {
+      stroke(x, y, z, face3d, context) {
+        const vertices = face3d.vertices;
+        face3d.edges.forEach(edge => {
+          const p1 = vertices[edge[0]],
+            v1 = {
+              x: x + p1[0],
+              y: y + p1[1],
+              z: z + p1[2]
+            },
+            p2 = vertices[edge[1]],
+            v2 = {
+              x: x + p2[0],
+              y: y + p2[1],
+              z: z + p2[2]
+            };
+          context.beginPath(), context.moveTo(v1.x, v1.y, v1.z), context.lineTo(v2.x, v2.y, v2.z), context.stroke();
+        });
+      }
+      fill(x, y, z, face3d, faces, fillColor, context, light, graphic3d, graphic3dAttribute, fillCb) {
+        const rgbArray = ColorStore.Get(fillColor, ColorType.Color255),
+          vertices = face3d.vertices,
+          viewdVerticesZ = vertices.map(v => context.view(v[0], v[1], v[2])[2]),
+          sortFace = [];
+        face3d.polygons.forEach((p, i) => {
+          if (faces && !faces[i]) return;
+          sortFace.push({
+            faceIdx: i,
+            polygon: p
+          });
+          const {
+              polygon: polygon
+            } = p,
+            z1 = viewdVerticesZ[polygon[0]],
+            z2 = viewdVerticesZ[polygon[1]],
+            z3 = viewdVerticesZ[polygon[2]],
+            z4 = viewdVerticesZ[polygon[3]];
+          p.ave_z = z1 + z2 + z3 + z4;
+        }), sortFace.sort((a, b) => b.polygon.ave_z - a.polygon.ave_z), sortFace.forEach(item => {
+          const {
+              polygon: polygon,
+              normal: normal
+            } = item.polygon,
+            p1 = vertices[polygon[0]],
+            p2 = vertices[polygon[1]],
+            p3 = vertices[polygon[2]],
+            p4 = vertices[polygon[3]],
+            v1 = {
+              x: x + p1[0],
+              y: y + p1[1],
+              z: z + p1[2]
+            },
+            v2 = {
+              x: x + p2[0],
+              y: y + p2[1],
+              z: z + p2[2]
+            },
+            v3 = {
+              x: x + p3[0],
+              y: y + p3[1],
+              z: z + p3[2]
+            },
+            v4 = {
+              x: x + p4[0],
+              y: y + p4[1],
+              z: z + p4[2]
+            };
+          context.beginPath(), context.moveTo(v1.x, v1.y, v1.z), context.lineTo(v2.x, v2.y, v2.z), context.lineTo(v3.x, v3.y, v3.z), context.lineTo(v4.x, v4.y, v4.z), context.closePath(), fillCb ? fillCb(context, graphic3d && graphic3d.attribute, graphic3dAttribute) : (context.fillStyle = light ? light.computeColor(normal, rgbArray) : fillColor, context.fill());
+        });
+      }
+    }
+
     class DefaultCanvasCircleRender extends BaseRender {
       constructor(graphicRenderContributions) {
         super(), this.graphicRenderContributions = graphicRenderContributions, this.numberType = CIRCLE_NUMBER_TYPE, this.builtinContributions = [defaultCircleRenderContribution, defaultCircleBackgroundRenderContribution, defaultCircleTextureRenderContribution], this.init(graphicRenderContributions);
@@ -23851,6 +24071,57 @@
       }
     }
 
+    class DefaultCanvasRect3dRender extends Base3dRender {
+      constructor() {
+        super(...arguments), this.type = "rect3d", this.numberType = RECT3D_NUMBER_TYPE;
+      }
+      drawShape(rect, context, x, y, drawContext, params, fillCb, strokeCb) {
+        var _a, _b;
+        const rectAttribute = getTheme$1(rect, null == params ? void 0 : params.theme).rect,
+          {
+            fill = rectAttribute.fill,
+            stroke = rectAttribute.stroke,
+            x1: x1,
+            y1: y1,
+            x: originX,
+            y: originY,
+            opacity = rectAttribute.opacity,
+            fillOpacity = rectAttribute.fillOpacity,
+            lineWidth = rectAttribute.lineWidth,
+            strokeOpacity = rectAttribute.strokeOpacity,
+            visible = rectAttribute.visible,
+            drawStrokeWhenZeroWH = null !== (_a = rectAttribute.drawStrokeWhenZeroWH) && void 0 !== _a && _a
+          } = rect.attribute;
+        let {
+          width: width,
+          height: height
+        } = rect.attribute;
+        width = (null != width ? width : x1 - originX) || 0, height = (null != height ? height : y1 - originY) || 0;
+        const z = null !== (_b = this.z) && void 0 !== _b ? _b : 0,
+          fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill),
+          sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height, drawStrokeWhenZeroWH),
+          doFill = runFill(fill),
+          doStroke = runStroke(stroke, lineWidth);
+        if (!rect.valid || !visible) return;
+        if (!doFill && !doStroke) return;
+        if (!(fVisible || sVisible || fillCb || strokeCb)) return;
+        const {
+            light: light
+          } = drawContext.stage || {},
+          face3d = rect.findFace();
+        if (!1 !== fill) {
+          context.setCommonStyle(rect, rect.attribute, x, y, rectAttribute);
+          let fc = fill;
+          "string" != typeof fc && (fc = "black"), this.fill(x, y, z, face3d, null, fc, context, light, null, null, fillCb);
+        }
+        !1 !== stroke && (context.setStrokeStyle(rect, rect.attribute, x, y, rectAttribute), this.stroke(x, y, z, face3d, context));
+      }
+      draw(rect, renderService, drawContext) {
+        const rectAttribute = getTheme$1(rect).rect;
+        this._draw(rect, rectAttribute, !1, drawContext);
+      }
+    }
+
     class DefaultCanvasSymbolRender extends BaseRender {
       constructor(graphicRenderContributions) {
         super(), this.graphicRenderContributions = graphicRenderContributions, this.numberType = SYMBOL_NUMBER_TYPE, this.builtinContributions = [defaultSymbolRenderContribution, defaultSymbolBackgroundRenderContribution, defaultSymbolTextureRenderContribution, defaultSymbolClipRangeStrokeRenderContribution], this.init(graphicRenderContributions);
@@ -24215,6 +24486,37 @@
       }
     }
 
+    class DefaultCanvasPyramid3dRender extends Base3dRender {
+      constructor() {
+        super(...arguments), this.type = "pyramid3d", this.numberType = PYRAMID3D_NUMBER_TYPE;
+      }
+      drawShape(pyramid3d, context, x, y, drawContext, params, fillCb, strokeCb) {
+        var _a;
+        const pyramidAttribute = getTheme$1(pyramid3d, null == params ? void 0 : params.theme).polygon,
+          {
+            fill = pyramidAttribute.fill,
+            stroke = pyramidAttribute.stroke,
+            face = [!0, !0, !0, !0, !0, !0]
+          } = pyramid3d.attribute,
+          z = null !== (_a = this.z) && void 0 !== _a ? _a : 0;
+        if (!this.valid(pyramid3d, pyramidAttribute, fillCb, strokeCb)) return;
+        const {
+            light: light
+          } = drawContext.stage || {},
+          face3d = pyramid3d.findFace();
+        if (!1 !== fill) {
+          context.setCommonStyle(pyramid3d, pyramid3d.attribute, x, y, pyramidAttribute);
+          let fc = fill;
+          "string" != typeof fc && (fc = "black"), this.fill(x, y, z, face3d, face, fc, context, light, pyramid3d, pyramidAttribute, fillCb);
+        }
+        !1 !== stroke && (context.setStrokeStyle(pyramid3d, pyramid3d.attribute, x, y, pyramidAttribute), this.stroke(x, y, z, face3d, context));
+      }
+      draw(pyramid3d, renderService, drawContext) {
+        const pyramid3dAttribute = getTheme$1(pyramid3d).polygon;
+        this._draw(pyramid3d, pyramid3dAttribute, !1, drawContext);
+      }
+    }
+
     const repeatStr = ["", "repeat-x", "repeat-y", "repeat"];
     function resolveImageRepeatMode(repeatX, repeatY) {
       let repeat = 0;
@@ -24929,8 +25231,13 @@
     const runtimeInstallerContext = createLegacyBindingContext();
     let runtimeGlobal,
       runtimeInstallerPreloaded = !1;
-    const runtimeEntryKeys = new WeakMap(),
-      runtimeDrawContributions = new WeakMap();
+    const RUNTIME_RENDERER_NAMESPACE = "vrender:runtime-renderer",
+      RUNTIME_PICKER_NAMESPACE = "vrender:runtime-picker",
+      runtimeEntryKeys = new WeakMap(),
+      runtimeDrawContributions = new WeakMap(),
+      loadedRuntimeContributionModules = new WeakMap(),
+      DEFAULT_RUNTIME_CONTRIBUTION_TARGETS = ["graphic-renderer"],
+      noopUnbindRuntimeContributionService = () => {};
     function ensureRuntimeInstallerPreloaded() {
       runtimeInstallerPreloaded || (runtimeInstallerPreloaded = !0, bindCoreModules({
         bind: runtimeInstallerContext.bind
@@ -24991,11 +25298,11 @@
       const bindingContext = getRuntimeInstallerBindingContext();
       refreshRuntimeInstallerContributions();
       const renderers = bindingContext.getAll(GraphicRender),
-        registeredKeys = getTrackedEntryKeys$1(app.registry.renderer, "vrender:runtime-renderer");
-      clearTrackedEntryKeys$1(app.registry.renderer, "vrender:runtime-renderer", null === (_a = app.registry.renderer.unregister) || void 0 === _a ? void 0 : _a.bind(app.registry.renderer)), registerRuntimeEntries((key, renderer) => {
+        registeredKeys = getTrackedEntryKeys$1(app.registry.renderer, RUNTIME_RENDERER_NAMESPACE);
+      clearTrackedEntryKeys$1(app.registry.renderer, RUNTIME_RENDERER_NAMESPACE, null === (_a = app.registry.renderer.unregister) || void 0 === _a ? void 0 : _a.bind(app.registry.renderer)), registerRuntimeEntries((key, renderer) => {
         var _a;
         null === (_a = null == renderer ? void 0 : renderer.reInit) || void 0 === _a || _a.call(renderer), app.registry.renderer.register(key, renderer), registeredKeys.add(key);
-      }, renderers, "vrender:runtime-renderer");
+      }, renderers, RUNTIME_RENDERER_NAMESPACE);
     }
     function installRuntimeDrawContributionsToApp(app) {
       var _a;
@@ -25017,10 +25324,45 @@
       const bindingContext = getRuntimeInstallerBindingContext();
       refreshRuntimeInstallerContributions();
       const pickers = bindingContext.getAll(serviceIdentifier),
-        registeredKeys = getTrackedEntryKeys$1(app.registry.picker, "vrender:runtime-picker");
-      clearTrackedEntryKeys$1(app.registry.picker, "vrender:runtime-picker", null === (_a = app.registry.picker.unregister) || void 0 === _a ? void 0 : _a.bind(app.registry.picker)), registerRuntimeEntries((key, picker) => {
+        registeredKeys = getTrackedEntryKeys$1(app.registry.picker, RUNTIME_PICKER_NAMESPACE);
+      clearTrackedEntryKeys$1(app.registry.picker, RUNTIME_PICKER_NAMESPACE, null === (_a = app.registry.picker.unregister) || void 0 === _a ? void 0 : _a.bind(app.registry.picker)), registerRuntimeEntries((key, picker) => {
         app.registry.picker.register(key, picker), registeredKeys.add(key);
-      }, pickers, "vrender:runtime-picker");
+      }, pickers, RUNTIME_PICKER_NAMESPACE);
+    }
+    function getRuntimeContributionModuleIdentity(module) {
+      return module;
+    }
+    function hasLoadedRuntimeContributionModule(context, module) {
+      var _a, _b;
+      return null !== (_b = null === (_a = loadedRuntimeContributionModules.get(context)) || void 0 === _a ? void 0 : _a.has(getRuntimeContributionModuleIdentity(module))) && void 0 !== _b && _b;
+    }
+    function markRuntimeContributionModuleLoaded(context, module) {
+      let modules = loadedRuntimeContributionModules.get(context);
+      modules || (modules = new WeakSet(), loadedRuntimeContributionModules.set(context, modules)), modules.add(getRuntimeContributionModuleIdentity(module));
+    }
+    function loadRuntimeContributionModuleToContext(context, module) {
+      hasLoadedRuntimeContributionModule(context, module) || ("function" == typeof module ? module(context) : module.registry(context.bind, noopUnbindRuntimeContributionService, context.isBound, context.rebind), markRuntimeContributionModuleLoaded(context, module));
+    }
+    function isRuntimePickerTarget(target) {
+      return "object" == typeof target && null !== target && "picker" in target;
+    }
+    function installRuntimeContributionTargetsToApp(app, targets) {
+      const resolvedTargets = null != targets ? targets : DEFAULT_RUNTIME_CONTRIBUTION_TARGETS;
+      let installGraphicRenderers = !1,
+        installDrawContributions = !1;
+      const pickerTargets = new Set();
+      resolvedTargets.forEach(target => {
+        "graphic-renderer" === target ? installGraphicRenderers = !0 : "draw-contribution" === target ? installDrawContributions = !0 : isRuntimePickerTarget(target) && pickerTargets.add(target.picker);
+      }), installDrawContributions && installRuntimeDrawContributionsToApp(app), installGraphicRenderers && installRuntimeGraphicRenderersToApp(app), pickerTargets.forEach(serviceIdentifier => {
+        installRuntimePickersToApp(app, serviceIdentifier);
+      });
+    }
+    function installRuntimeContributionModule(module, {
+      app: app,
+      legacy = !0,
+      targets: targets
+    } = {}) {
+      loadRuntimeContributionModuleToContext(getRuntimeInstallerBindingContext(), module), legacy && (preLoadAllModule(), loadRuntimeContributionModuleToContext(getLegacyBindingContext(), module)), refreshRuntimeInstallerContributions(), app && installRuntimeContributionTargetsToApp(app, targets);
     }
 
     function simplifyRadialDist(points, sqTolerance) {
@@ -27022,129 +27364,6 @@
     }
     const imageModule = bindImageRenderModule;
 
-    class Base3dRender extends BaseRender {
-      stroke(x, y, z, face3d, context) {
-        const vertices = face3d.vertices;
-        face3d.edges.forEach(edge => {
-          const p1 = vertices[edge[0]],
-            v1 = {
-              x: x + p1[0],
-              y: y + p1[1],
-              z: z + p1[2]
-            },
-            p2 = vertices[edge[1]],
-            v2 = {
-              x: x + p2[0],
-              y: y + p2[1],
-              z: z + p2[2]
-            };
-          context.beginPath(), context.moveTo(v1.x, v1.y, v1.z), context.lineTo(v2.x, v2.y, v2.z), context.stroke();
-        });
-      }
-      fill(x, y, z, face3d, faces, fillColor, context, light, graphic3d, graphic3dAttribute, fillCb) {
-        const rgbArray = ColorStore.Get(fillColor, ColorType.Color255),
-          vertices = face3d.vertices,
-          viewdVerticesZ = vertices.map(v => context.view(v[0], v[1], v[2])[2]),
-          sortFace = [];
-        face3d.polygons.forEach((p, i) => {
-          if (faces && !faces[i]) return;
-          sortFace.push({
-            faceIdx: i,
-            polygon: p
-          });
-          const {
-              polygon: polygon
-            } = p,
-            z1 = viewdVerticesZ[polygon[0]],
-            z2 = viewdVerticesZ[polygon[1]],
-            z3 = viewdVerticesZ[polygon[2]],
-            z4 = viewdVerticesZ[polygon[3]];
-          p.ave_z = z1 + z2 + z3 + z4;
-        }), sortFace.sort((a, b) => b.polygon.ave_z - a.polygon.ave_z), sortFace.forEach(item => {
-          const {
-              polygon: polygon,
-              normal: normal
-            } = item.polygon,
-            p1 = vertices[polygon[0]],
-            p2 = vertices[polygon[1]],
-            p3 = vertices[polygon[2]],
-            p4 = vertices[polygon[3]],
-            v1 = {
-              x: x + p1[0],
-              y: y + p1[1],
-              z: z + p1[2]
-            },
-            v2 = {
-              x: x + p2[0],
-              y: y + p2[1],
-              z: z + p2[2]
-            },
-            v3 = {
-              x: x + p3[0],
-              y: y + p3[1],
-              z: z + p3[2]
-            },
-            v4 = {
-              x: x + p4[0],
-              y: y + p4[1],
-              z: z + p4[2]
-            };
-          context.beginPath(), context.moveTo(v1.x, v1.y, v1.z), context.lineTo(v2.x, v2.y, v2.z), context.lineTo(v3.x, v3.y, v3.z), context.lineTo(v4.x, v4.y, v4.z), context.closePath(), fillCb ? fillCb(context, graphic3d && graphic3d.attribute, graphic3dAttribute) : (context.fillStyle = light ? light.computeColor(normal, rgbArray) : fillColor, context.fill());
-        });
-      }
-    }
-
-    class DefaultCanvasRect3dRender extends Base3dRender {
-      constructor() {
-        super(...arguments), this.type = "rect3d", this.numberType = RECT3D_NUMBER_TYPE;
-      }
-      drawShape(rect, context, x, y, drawContext, params, fillCb, strokeCb) {
-        var _a, _b;
-        const rectAttribute = getTheme$1(rect, null == params ? void 0 : params.theme).rect,
-          {
-            fill = rectAttribute.fill,
-            stroke = rectAttribute.stroke,
-            x1: x1,
-            y1: y1,
-            x: originX,
-            y: originY,
-            opacity = rectAttribute.opacity,
-            fillOpacity = rectAttribute.fillOpacity,
-            lineWidth = rectAttribute.lineWidth,
-            strokeOpacity = rectAttribute.strokeOpacity,
-            visible = rectAttribute.visible,
-            drawStrokeWhenZeroWH = null !== (_a = rectAttribute.drawStrokeWhenZeroWH) && void 0 !== _a && _a
-          } = rect.attribute;
-        let {
-          width: width,
-          height: height
-        } = rect.attribute;
-        width = (null != width ? width : x1 - originX) || 0, height = (null != height ? height : y1 - originY) || 0;
-        const z = null !== (_b = this.z) && void 0 !== _b ? _b : 0,
-          fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill),
-          sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height, drawStrokeWhenZeroWH),
-          doFill = runFill(fill),
-          doStroke = runStroke(stroke, lineWidth);
-        if (!rect.valid || !visible) return;
-        if (!doFill && !doStroke) return;
-        if (!(fVisible || sVisible || fillCb || strokeCb)) return;
-        const {
-            light: light
-          } = drawContext.stage || {},
-          face3d = rect.findFace();
-        if (!1 !== fill) {
-          context.setCommonStyle(rect, rect.attribute, x, y, rectAttribute);
-          let fc = fill;
-          "string" != typeof fc && (fc = "black"), this.fill(x, y, z, face3d, null, fc, context, light, null, null, fillCb);
-        }
-        !1 !== stroke && (context.setStrokeStyle(rect, rect.attribute, x, y, rectAttribute), this.stroke(x, y, z, face3d, context));
-      }
-      draw(rect, renderService, drawContext) {
-        const rectAttribute = getTheme$1(rect).rect;
-        this._draw(rect, rectAttribute, !1, drawContext);
-      }
-    }
-
     const loadedRect3dModuleContexts = new WeakSet();
     function bindRect3dRenderModule({
       bind: bind
@@ -27153,127 +27372,6 @@
     }
     const rect3dModule = bindRect3dRenderModule;
 
-    function drawArcPath(arc, context, cx, cy, z, outerRadius, innerRadius) {
-      const {
-          startAngle: startAngle,
-          endAngle: endAngle
-        } = arc.getParsedAngle(),
-        deltaAngle = abs$1(endAngle - startAngle),
-        clockwise = endAngle > startAngle;
-      let collapsedToLine = !1;
-      if (outerRadius < innerRadius) {
-        const temp = outerRadius;
-        outerRadius = innerRadius, innerRadius = temp;
-      }
-      if (outerRadius <= epsilon$1) context.moveTo(cx, cy, z);else if (deltaAngle >= pi2 - epsilon$1) context.moveTo(cx + outerRadius * cos$1(startAngle), cy + outerRadius * sin$1(startAngle), z), context.arc(cx, cy, outerRadius, startAngle, endAngle, !clockwise, z), innerRadius > epsilon$1 && (context.moveTo(cx + innerRadius * cos$1(endAngle), cy + innerRadius * sin$1(endAngle), z), context.arc(cx, cy, innerRadius, endAngle, startAngle, clockwise, z));else {
-        const {
-            outerDeltaAngle: outerDeltaAngle,
-            innerDeltaAngle: innerDeltaAngle,
-            outerStartAngle: outerStartAngle,
-            outerEndAngle: outerEndAngle,
-            innerEndAngle: innerEndAngle,
-            innerStartAngle: innerStartAngle
-          } = arc.getParsePadAngle(startAngle, endAngle),
-          xors = outerRadius * cos$1(outerStartAngle),
-          yors = outerRadius * sin$1(outerStartAngle),
-          xire = innerRadius * cos$1(innerEndAngle),
-          yire = innerRadius * sin$1(innerEndAngle);
-        outerDeltaAngle < .001 ? collapsedToLine = !0 : (context.moveTo(cx + xors, cy + yors, z), context.arc(cx, cy, outerRadius, outerStartAngle, outerEndAngle, !clockwise, z)), !(innerRadius > epsilon$1) || innerDeltaAngle < .001 ? (context.lineTo(cx + xire, cy + yire, z), collapsedToLine = !0) : (context.lineTo(cx + xire, cy + yire, z), context.arc(cx, cy, innerRadius, innerEndAngle, innerStartAngle, clockwise, z));
-      }
-      return context.closePath(), collapsedToLine;
-    }
-    function drawInnerOuterArcPath(arc, context, cx, cy, z1, z2, radius, getParsePadAngle) {
-      const {
-          startAngle: startAngle,
-          endAngle: endAngle
-        } = arc.getParsedAngle(),
-        deltaAngle = abs$1(endAngle - startAngle),
-        clockwise = endAngle > startAngle;
-      let collapsedToLine = !1;
-      if (radius <= epsilon$1) context.moveTo(cx, cy, z1);else if (deltaAngle >= pi2 - epsilon$1) context.moveTo(cx + radius * cos$1(startAngle), cy + radius * sin$1(startAngle), z1), context.arc(cx, cy, radius, startAngle, endAngle, !clockwise, z1), context.lineTo(cx + radius * cos$1(endAngle), cy + radius * sin$1(endAngle), z2), context.arc(cx, cy, radius, endAngle, startAngle, clockwise, z2);else {
-        const {
-            innerouterDeltaAngle: innerouterDeltaAngle,
-            innerouterStartAngle: innerouterStartAngle,
-            innerouterEndAngle: innerouterEndAngle
-          } = getParsePadAngle(startAngle, endAngle),
-          xors = radius * cos$1(innerouterStartAngle),
-          yors = radius * sin$1(innerouterStartAngle),
-          xore = radius * cos$1(innerouterEndAngle),
-          yore = radius * sin$1(innerouterEndAngle);
-        innerouterDeltaAngle < .001 ? collapsedToLine = !0 : (context.moveTo(cx + xors, cy + yors, z1), context.arc(cx, cy, radius, innerouterStartAngle, innerouterEndAngle, !clockwise, z1), context.lineTo(cx + xore, cy + yore, z2), context.arc(cx, cy, radius, innerouterEndAngle, innerouterStartAngle, clockwise, z2));
-      }
-      return context.closePath(), collapsedToLine;
-    }
-    class DefaultCanvasArc3DRender extends BaseRender {
-      constructor() {
-        super(...arguments), this.numberType = ARC3D_NUMBER_TYPE;
-      }
-      drawShape(arc, context, x, y, drawContext, params, fillCb, strokeCb) {
-        var _a;
-        const arcAttribute = getTheme$1(arc, null == params ? void 0 : params.theme).arc,
-          {
-            fill = arcAttribute.fill
-          } = arc.attribute,
-          data = this.valid(arc, arcAttribute, fillCb, strokeCb);
-        if (!data) return;
-        const {
-            fVisible: fVisible,
-            sVisible: sVisible,
-            doFill: doFill,
-            doStroke: doStroke
-          } = data,
-          z = null !== (_a = this.z) && void 0 !== _a ? _a : 0,
-          {
-            outerPadding = arcAttribute.outerPadding,
-            innerPadding = arcAttribute.innerPadding,
-            height = 10
-          } = arc.attribute;
-        let {
-          outerRadius = arcAttribute.outerRadius,
-          innerRadius = arcAttribute.innerRadius
-        } = arc.attribute;
-        outerRadius += outerPadding, innerRadius -= innerPadding;
-        const rgbArray = ColorStore.Get(fill, ColorType.Color255),
-          {
-            light: light
-          } = drawContext.stage || {},
-          face = drawContext.hack_pieFace,
-          z_face = {
-            top: z,
-            bottom: z + height
-          },
-          n_face = {
-            top: [0, 1, 0],
-            bottom: [0, -1, 0],
-            outside: [1, 0, -1],
-            inside: [1, 0, -1]
-          };
-        "bottom" === face || "top" === face ? (context.beginPath(), drawArcPath(arc, context, x, y, z_face[face], outerRadius, innerRadius), context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute), doFill && (fillCb ? fillCb(context, arc.attribute, arcAttribute) : fVisible && (context.setCommonStyle(arc, arc.attribute, x, y, arcAttribute), context.fillStyle = light ? light.computeColor(n_face[face], rgbArray) : fill, context.fill())), doStroke && (strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke()))) : "outside" !== face && "inside" !== face || ("inside" === face && (context.save(), context.beginPath(), context.arc(x, y, innerRadius, 0, pi2, !0, z_face.top), context.clip()), context.beginPath(), drawInnerOuterArcPath(arc, context, x, y, z_face.top, z_face.bottom, "outside" === face ? outerRadius : innerRadius, (startAngle, endAngle) => {
-          const {
-            outerDeltaAngle: outerDeltaAngle,
-            innerDeltaAngle: innerDeltaAngle,
-            outerStartAngle: outerStartAngle,
-            outerEndAngle: outerEndAngle,
-            innerEndAngle: innerEndAngle,
-            innerStartAngle: innerStartAngle
-          } = arc.getParsePadAngle(startAngle, endAngle);
-          return "outside" === face ? {
-            innerouterDeltaAngle: outerDeltaAngle,
-            innerouterEndAngle: outerEndAngle,
-            innerouterStartAngle: outerStartAngle
-          } : {
-            innerouterDeltaAngle: innerDeltaAngle,
-            innerouterEndAngle: innerEndAngle,
-            innerouterStartAngle: innerStartAngle
-          };
-        }), context.setShadowBlendStyle && context.setShadowBlendStyle(arc, arc.attribute, arcAttribute), doFill && (fillCb ? fillCb(context, arc.attribute, arcAttribute) : fVisible && (context.setCommonStyle(arc, arc.attribute, x, y, arcAttribute), context.fillStyle = light ? light.computeColor(n_face[face], rgbArray) : fill, context.fill())), doStroke && (strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, x, y, arcAttribute), context.stroke())), "inside" === face && context.restore());
-      }
-      draw(arc, renderService, drawContext, params) {
-        const arcAttribute = getTheme$1(arc, null == params ? void 0 : params.theme).arc;
-        this._draw(arc, arcAttribute, !1, drawContext, params);
-      }
-    }
-
     const loadedArc3dModuleContexts = new WeakSet();
     function bindArc3dRenderModule({
       bind: bind
@@ -27282,37 +27380,6 @@
     }
     const arc3dModule = bindArc3dRenderModule;
 
-    class DefaultCanvasPyramid3dRender extends Base3dRender {
-      constructor() {
-        super(...arguments), this.type = "pyramid3d", this.numberType = PYRAMID3D_NUMBER_TYPE;
-      }
-      drawShape(pyramid3d, context, x, y, drawContext, params, fillCb, strokeCb) {
-        var _a;
-        const pyramidAttribute = getTheme$1(pyramid3d, null == params ? void 0 : params.theme).polygon,
-          {
-            fill = pyramidAttribute.fill,
-            stroke = pyramidAttribute.stroke,
-            face = [!0, !0, !0, !0, !0, !0]
-          } = pyramid3d.attribute,
-          z = null !== (_a = this.z) && void 0 !== _a ? _a : 0;
-        if (!this.valid(pyramid3d, pyramidAttribute, fillCb, strokeCb)) return;
-        const {
-            light: light
-          } = drawContext.stage || {},
-          face3d = pyramid3d.findFace();
-        if (!1 !== fill) {
-          context.setCommonStyle(pyramid3d, pyramid3d.attribute, x, y, pyramidAttribute);
-          let fc = fill;
-          "string" != typeof fc && (fc = "black"), this.fill(x, y, z, face3d, face, fc, context, light, pyramid3d, pyramidAttribute, fillCb);
-        }
-        !1 !== stroke && (context.setStrokeStyle(pyramid3d, pyramid3d.attribute, x, y, pyramidAttribute), this.stroke(x, y, z, face3d, context));
-      }
-      draw(pyramid3d, renderService, drawContext) {
-        const pyramid3dAttribute = getTheme$1(pyramid3d).polygon;
-        this._draw(pyramid3d, pyramid3dAttribute, !1, drawContext);
-      }
-    }
-
     const loadedPyramid3dModuleContexts = new WeakSet();
     function bindPyramid3dRenderModule({
       bind: bind
@@ -27976,6 +28043,7 @@
         AreaRenderContribution: AreaRenderContribution,
         get AttributeUpdateType () { return AttributeUpdateType; },
         AutoEnablePlugins: AutoEnablePlugins,
+        Base3dRender: Base3dRender,
         BaseCanvas: BaseCanvas,
         BaseEnvContribution: BaseEnvContribution,
         BaseRender: BaseRender,
@@ -28024,6 +28092,7 @@
         DefaultBaseInteractiveRenderContribution: DefaultBaseInteractiveRenderContribution,
         DefaultBaseTextureRenderContribution: DefaultBaseTextureRenderContribution,
         DefaultCanvasAllocate: DefaultCanvasAllocate,
+        DefaultCanvasArc3DRender: DefaultCanvasArc3DRender,
         DefaultCanvasArcRender: DefaultCanvasArcRender,
         DefaultCanvasAreaRender: DefaultCanvasAreaRender,
         DefaultCanvasCircleRender: DefaultCanvasCircleRender,
@@ -28032,6 +28101,8 @@
         DefaultCanvasLineRender: DefaultCanvasLineRender,
         DefaultCanvasPathRender: DefaultCanvasPathRender,
         DefaultCanvasPolygonRender: DefaultCanvasPolygonRender,
+        DefaultCanvasPyramid3dRender: DefaultCanvasPyramid3dRender,
+        DefaultCanvasRect3dRender: DefaultCanvasRect3dRender,
         DefaultCanvasRectRender: DefaultCanvasRectRender,
         DefaultCanvasSymbolRender: DefaultCanvasSymbolRender,
         DefaultCanvasTextRender: DefaultCanvasTextRender,
@@ -28405,6 +28476,7 @@
         identityMat4: identityMat4,
         imageModule: imageModule,
         incrementalAddTo: incrementalAddTo,
+        installRuntimeContributionModule: installRuntimeContributionModule,
         installRuntimeDrawContributionsToApp: installRuntimeDrawContributionsToApp,
         installRuntimeGraphicRenderersToApp: installRuntimeGraphicRenderersToApp,
         installRuntimePickersToApp: installRuntimePickersToApp,
@@ -37390,6 +37462,30 @@
       return 2;
     }
 
+    function buildAnimationStaticCommitAttrs(target, keys, animate, fallbackAttrs) {
+      var _a;
+      const commitTarget = target,
+        contextFinalAttrs = null === (_a = commitTarget.context) || void 0 === _a ? void 0 : _a.finalAttrs,
+        finalAttribute = commitTarget.getFinalAttribute();
+      let commitAttrs = null;
+      for (let i = 0; i < keys.length; i++) {
+        const key = keys[i];
+        animate && !animate.validAttr(key) || (contextFinalAttrs && Object.prototype.hasOwnProperty.call(contextFinalAttrs, key) ? (null != commitAttrs || (commitAttrs = {}), commitAttrs[key] = contextFinalAttrs[key]) : finalAttribute && Object.prototype.hasOwnProperty.call(finalAttribute, key) ? (null != commitAttrs || (commitAttrs = {}), commitAttrs[key] = finalAttribute[key]) : fallbackAttrs && Object.prototype.hasOwnProperty.call(fallbackAttrs, key) && (null != commitAttrs || (commitAttrs = {}), commitAttrs[key] = fallbackAttrs[key]));
+      }
+      return commitAttrs;
+    }
+    function commitAnimationStaticAttrs(target, keys, animate, fallbackAttrs) {
+      const commitAttrs = buildAnimationStaticCommitAttrs(target, keys, animate, fallbackAttrs);
+      if (!commitAttrs) return !1;
+      target.setFinalAttributes(commitAttrs);
+      const commitStaticAttributes = target._commitAnimationStaticAttributes;
+      return "function" == typeof commitStaticAttributes ? commitStaticAttributes.call(target, commitAttrs, {
+        type: AttributeUpdateType.ANIMATE_END
+      }) : target.setAttributes(commitAttrs, !1, {
+        type: AttributeUpdateType.ANIMATE_END
+      }), !0;
+    }
+
     class AnimateExecutor {
       static registerBuiltInAnimate(name, animate) {
         AnimateExecutor.builtInAnimateMap[name] = animate;
@@ -37569,7 +37665,7 @@
           props = params.to,
           from = params.from;
         const commitAttrOutChannel = this.shouldCommitAttrOutChannel(type);
-        props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic, commitAttrOutChannel, this.getAttrOutChannelExcludedKeys(graphic))), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic, commitAttrOutChannel, this.getAttrOutChannelExcludedKeys(graphic))), from = parsedFromProps.from), parsedFromProps.attrOutChannel && graphic.setAttributes(parsedFromProps.attrOutChannel), this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic);
+        props || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic, commitAttrOutChannel, this.getAttrOutChannelExcludedKeys(graphic))), props = parsedFromProps.props), from || (parsedFromProps || (parsedFromProps = this.createPropsFromChannel(channel, graphic, commitAttrOutChannel, this.getAttrOutChannelExcludedKeys(graphic))), from = parsedFromProps.from), parsedFromProps.attrOutChannel && graphic.setAttributes(parsedFromProps.attrOutChannel), this._handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic), this.commitAnimatedUpdateDiffAttrsOnEnd(animate, graphic, type, props);
         let totalDelay = 0;
         oneByOneDelay && (totalDelay = oneByOneDelay * (count - index - 1));
         const delayAfterValue = isFunction$1(delayAfter) ? delayAfter(null === (_h = null === (_g = graphic.context) || void 0 === _g ? void 0 : _g.data) || void 0 === _h ? void 0 : _h[0], graphic, {}) : delayAfter;
@@ -37651,6 +37747,25 @@
       shouldCommitAttrOutChannel(type) {
         return "update" !== type;
       }
+      commitAnimatedUpdateDiffAttrsOnEnd(animate, graphic, type, props) {
+        if ("update" === type || !props || !this.isUpdateDiffContext(graphic)) return;
+        const keys = this.collectAnimatedUpdateDiffAttrKeys(graphic, props);
+        (null == keys ? void 0 : keys.length) && animate.onEnd(() => {
+          commitAnimationStaticAttrs(graphic, keys, animate, props);
+        });
+      }
+      isUpdateDiffContext(graphic) {
+        const context = graphic.context;
+        return "update" === (null == context ? void 0 : context.diffState) || "update" === (null == context ? void 0 : context.animationState);
+      }
+      collectAnimatedUpdateDiffAttrKeys(graphic, props) {
+        var _a;
+        const diffAttrs = null === (_a = graphic.context) || void 0 === _a ? void 0 : _a.diffAttrs;
+        if (!diffAttrs) return null;
+        let keys = null;
+        for (const key in props) Object.prototype.hasOwnProperty.call(props, key) && Object.prototype.hasOwnProperty.call(diffAttrs, key) && void 0 !== diffAttrs[key] && (null != keys || (keys = []), keys.push(key));
+        return keys;
+      }
       createCustomAnimation(animate, CustomAnimateConstructor, from, props, duration, easing, customParams) {
         const customAnimate = new CustomAnimateConstructor(from, props, duration, easing, customParams);
         animate.play(customAnimate);
@@ -39682,25 +39797,6 @@
       }
     }
 
-    function buildAnimationStaticCommitAttrs(target, keys, animate, fallbackAttrs) {
-      var _a;
-      const commitTarget = target,
-        contextFinalAttrs = null === (_a = commitTarget.context) || void 0 === _a ? void 0 : _a.finalAttrs,
-        finalAttribute = commitTarget.getFinalAttribute();
-      let commitAttrs = null;
-      for (let i = 0; i < keys.length; i++) {
-        const key = keys[i];
-        animate && !animate.validAttr(key) || (contextFinalAttrs && Object.prototype.hasOwnProperty.call(contextFinalAttrs, key) ? (null != commitAttrs || (commitAttrs = {}), commitAttrs[key] = contextFinalAttrs[key]) : finalAttribute && Object.prototype.hasOwnProperty.call(finalAttribute, key) ? (null != commitAttrs || (commitAttrs = {}), commitAttrs[key] = finalAttribute[key]) : fallbackAttrs && Object.prototype.hasOwnProperty.call(fallbackAttrs, key) && (null != commitAttrs || (commitAttrs = {}), commitAttrs[key] = fallbackAttrs[key]));
-      }
-      return commitAttrs;
-    }
-    function commitAnimationStaticAttrs(target, keys, animate, fallbackAttrs) {
-      const commitAttrs = buildAnimationStaticCommitAttrs(target, keys, animate, fallbackAttrs);
-      return !!commitAttrs && (target.setFinalAttributes(commitAttrs), target.setAttributes(commitAttrs, !1, {
-        type: AttributeUpdateType.ANIMATE_END
-      }), !0);
-    }
-
     const clipPathGeometryAttrs = {
       x: !0,
       y: !0,
@@ -42972,6 +43068,24 @@
       for (const key in record) Object.prototype.hasOwnProperty.call(record, key) && !includesKey(keys, key) && (nextRecord[key] = record[key]);
       return nextRecord;
     }
+    function collectActiveSiblingAttrKeys(target, currentAnimate) {
+      var _a;
+      const getTrackedAnimates = null == target ? void 0 : target.getTrackedAnimates;
+      if ("function" == typeof getTrackedAnimates) {
+        const trackedAnimates = getTrackedAnimates.call(target);
+        if (trackedAnimates && trackedAnimates.size <= 1) return;
+      }
+      const forEachTrackedAnimate = null == target ? void 0 : target.forEachTrackedAnimate;
+      if ("function" != typeof forEachTrackedAnimate) return;
+      let keys;
+      const currentEndProps = null === (_a = currentAnimate.getEndProps) || void 0 === _a ? void 0 : _a.call(currentAnimate);
+      return forEachTrackedAnimate.call(target, animate => {
+        var _a;
+        if (animate === currentAnimate || animate.status === AnimateStatus.END) return;
+        const endProps = null === (_a = animate.getEndProps) || void 0 === _a ? void 0 : _a.call(animate);
+        if (endProps) for (const key in endProps) !Object.prototype.hasOwnProperty.call(endProps, key) || currentEndProps && Object.prototype.hasOwnProperty.call(currentEndProps, key) || ((null != keys ? keys : keys = Object.create(null))[key] = !0);
+      }), keys;
+    }
     class Animate {
       constructor(id = Generator.GenAutoIncrementId(), timeline = defaultTimeline, slience) {
         this.id = id, this.status = AnimateStatus.INITIAL, this._timeline = timeline, timeline.addAnimate(this), this.slience = slience, this._startTime = 0, this._duration = 0, this._totalDuration = 0, this._loopCount = 0, this._currentLoop = 0, this._bounce = !1, this._firstStep = null, this._lastStep = null, this._startProps = {}, this._endProps = {}, this._preventAttrs = new Set(), this.currentTime = 0, this.interpolateUpdateFunction = null, this.priority = 0;
@@ -42995,7 +43109,7 @@
         this.target = target;
         const trackerTarget = this.target;
         return trackerTarget.detachAttributeFromBaseAttributes(), trackerTarget.trackAnimate(this), this.onRemove(() => {
-          this.stop(), this.__skipRestoreStaticAttributeOnRemove || trackerTarget.restoreStaticAttribute(), trackerTarget.untrackAnimate(this.id);
+          this.stop(), this.__skipRestoreStaticAttributeOnRemove || trackerTarget.restoreStaticAttribute(collectActiveSiblingAttrKeys(trackerTarget, this)), trackerTarget.untrackAnimate(this.id);
         }), this.target.onAnimateBind && !this.slience && this.target.onAnimateBind(this), this.target.animationAttribute || (this.target.animationAttribute = {}), this;
       }
       to(props, duration = 300, easing = "linear") {
@@ -43132,7 +43246,8 @@
         if (nextTime < this._startTime) return void (this.currentTime = nextTime);
         if (nextTime >= this._startTime + this._totalDuration) {
           null === (_a = this._lastStep) || void 0 === _a || _a.onUpdate(!0, 1, {}), null === (_b = this._lastStep) || void 0 === _b || _b.onEnd(), this.onEnd(), this.status = AnimateStatus.END;
-          return this.target.restoreStaticAttribute(), void (this.__skipRestoreStaticAttributeOnRemove = !0);
+          const trackerTarget = this.target;
+          return trackerTarget.restoreStaticAttribute(collectActiveSiblingAttrKeys(trackerTarget, this)), void (this.__skipRestoreStaticAttributeOnRemove = !0);
         }
         this.status = AnimateStatus.RUNNING, this.currentTime <= this._startTime && this.onStart(), this.currentTime = nextTime;
         let cycleTime = nextTime - this._startTime,
@@ -43346,10 +43461,10 @@
           type: AttributeUpdateType.ANIMATE_BIND
         });
       }
-      restoreStaticAttribute() {
+      restoreStaticAttribute(excludedKeys) {
         this._restoreAttributeFromStaticTruth({
           type: AttributeUpdateType.ANIMATE_END
-        });
+        }, excludedKeys);
       }
       executeAnimation(config) {
         return this.initAnimateExecutor(), this._animateExecutor.execute(config), this;
@@ -43481,6 +43596,86 @@
       return bootstrap.installEnv(app, envParams), installDefaultGraphicsToApp(app), installMathPickersToApp(app), bootstrap.loadEnv(), legacyGraphicRegistrations.forEach(register => register()), syncLegacyRenderersToApp(app), syncLegacyPickersToApp(app, MathPickerContribution), registerDefaultPipeline(), app;
     }
 
+    const SHARED_APP_REGISTRY_KEY = Symbol.for("visactor.vrender.sharedAppRegistry");
+    function getSharedAppRegistry() {
+      var _a;
+      const target = globalThis,
+        registry = null !== (_a = target[SHARED_APP_REGISTRY_KEY]) && void 0 !== _a ? _a : new Map();
+      return target[SHARED_APP_REGISTRY_KEY] = registry, registry;
+    }
+    function getSharedAppEnvRegistry(env, create) {
+      const registry = getSharedAppRegistry(),
+        envRegistry = registry.get(env);
+      if (envRegistry || !create) return envRegistry;
+      const nextEnvRegistry = new Map();
+      return registry.set(env, nextEnvRegistry), nextEnvRegistry;
+    }
+    function getOrCreateSharedAppEnvRegistry(env) {
+      return getSharedAppEnvRegistry(env, !0);
+    }
+    function removeSharedAppRecord(env, key, record) {
+      const registry = getSharedAppRegistry(),
+        envRegistry = registry.get(env);
+      (null == envRegistry ? void 0 : envRegistry.get(key)) === record && (envRegistry.delete(key), envRegistry.size || registry.delete(env));
+    }
+    function releaseSharedAppRecord(env, key, record) {
+      record.released || (record.released = !0, record.refCount = 0, removeSharedAppRecord(env, key, record), record.releaseApp());
+    }
+    function createSharedAppRecord(env, key, options, createApp) {
+      const app = createApp(options),
+        originalRelease = app.release.bind(app),
+        record = {
+          app: app,
+          refCount: 0,
+          released: !1,
+          releaseApp: originalRelease
+        };
+      return app.release = () => releaseSharedAppRecord(env, key, record), record;
+    }
+    function createSharedAppHandle(registryEnv, handleEnv, key, record) {
+      let released = !1;
+      return {
+        app: record.app,
+        env: handleEnv,
+        key: key,
+        release() {
+          if (released) return;
+          released = !0;
+          const envRegistry = getSharedAppEnvRegistry(registryEnv, !1);
+          (null == envRegistry ? void 0 : envRegistry.get(key)) !== record || record.released || (record.refCount -= 1, record.refCount <= 0 && releaseSharedAppRecord(registryEnv, key, record));
+        }
+      };
+    }
+    function acquireSharedApp(registryEnv, options, createApp, handleEnv = registryEnv) {
+      var _a;
+      const key = null !== (_a = options.key) && void 0 !== _a ? _a : "default",
+        envRegistry = getOrCreateSharedAppEnvRegistry(registryEnv);
+      let record = envRegistry.get(key);
+      return (null == record ? void 0 : record.app.released) && (releaseSharedAppRecord(registryEnv, key, record), record = void 0), record || (record = createSharedAppRecord(registryEnv, key, options, createApp), envRegistry.set(key, record)), record.refCount += 1, createSharedAppHandle(registryEnv, handleEnv, key, record);
+    }
+
+    undefined && undefined.__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;
+    };
+    const installCoreRuntimeContributionModule = installRuntimeContributionModule,
+      pendingRuntimeContributionModules = [];
+    function installPendingRuntimeContributionModulesToApp(app) {
+      pendingRuntimeContributionModules.forEach(({
+        module: module,
+        options: options
+      }) => {
+        installCoreRuntimeContributionModule(module, Object.assign(Object.assign({}, options), {
+          app: app
+        }));
+      });
+    }
+
     var __rest$y = undefined && undefined.__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]);
@@ -43494,8 +43689,9 @@
       const {
           envParams: envParams
         } = options,
-        entryOptions = __rest$y(options, ["envParams"]);
-      return bootstrapVRenderBrowserApp(createBrowserApp(entryOptions), envParams);
+        entryOptions = __rest$y(options, ["envParams"]),
+        app = bootstrapVRenderBrowserApp(createBrowserApp(entryOptions), envParams);
+      return installPendingRuntimeContributionModulesToApp(app), app;
     }
 
     var __rest$x = undefined && undefined.__rest || function (s, e) {
@@ -43514,8 +43710,9 @@
       const {
           envParams: envParams
         } = options,
-        entryOptions = __rest$x(options, ["envParams"]);
-      return bootstrapVRenderMiniApp(createMiniappApp(entryOptions), env, envParams);
+        entryOptions = __rest$x(options, ["envParams"]),
+        app = bootstrapVRenderMiniApp(createMiniappApp(entryOptions), env, envParams);
+      return installPendingRuntimeContributionModulesToApp(app), app;
     }
     function createTaroVRenderApp(options = {}) {
       return createMiniEnvVRenderApp("taro", options);
@@ -43552,66 +43749,9 @@
       const {
           envParams: envParams
         } = options,
-        entryOptions = __rest$w(options, ["envParams"]);
-      return bootstrapVRenderNodeApp(createNodeApp(entryOptions), envParams);
-    }
-
-    const SHARED_APP_REGISTRY_KEY = Symbol.for("visactor.vrender.sharedAppRegistry");
-    function getSharedAppRegistry() {
-      var _a;
-      const target = globalThis,
-        registry = null !== (_a = target[SHARED_APP_REGISTRY_KEY]) && void 0 !== _a ? _a : new Map();
-      return target[SHARED_APP_REGISTRY_KEY] = registry, registry;
-    }
-    function getSharedAppEnvRegistry(env, create) {
-      const registry = getSharedAppRegistry(),
-        envRegistry = registry.get(env);
-      if (envRegistry || !create) return envRegistry;
-      const nextEnvRegistry = new Map();
-      return registry.set(env, nextEnvRegistry), nextEnvRegistry;
-    }
-    function getOrCreateSharedAppEnvRegistry(env) {
-      return getSharedAppEnvRegistry(env, !0);
-    }
-    function removeSharedAppRecord(env, key, record) {
-      const registry = getSharedAppRegistry(),
-        envRegistry = registry.get(env);
-      (null == envRegistry ? void 0 : envRegistry.get(key)) === record && (envRegistry.delete(key), envRegistry.size || registry.delete(env));
-    }
-    function releaseSharedAppRecord(env, key, record) {
-      record.released || (record.released = !0, record.refCount = 0, removeSharedAppRecord(env, key, record), record.releaseApp());
-    }
-    function createSharedAppRecord(env, key, options, createApp) {
-      const app = createApp(options),
-        originalRelease = app.release.bind(app),
-        record = {
-          app: app,
-          refCount: 0,
-          released: !1,
-          releaseApp: originalRelease
-        };
-      return app.release = () => releaseSharedAppRecord(env, key, record), record;
-    }
-    function createSharedAppHandle(registryEnv, handleEnv, key, record) {
-      let released = !1;
-      return {
-        app: record.app,
-        env: handleEnv,
-        key: key,
-        release() {
-          if (released) return;
-          released = !0;
-          const envRegistry = getSharedAppEnvRegistry(registryEnv, !1);
-          (null == envRegistry ? void 0 : envRegistry.get(key)) !== record || record.released || (record.refCount -= 1, record.refCount <= 0 && releaseSharedAppRecord(registryEnv, key, record));
-        }
-      };
-    }
-    function acquireSharedApp(registryEnv, options, createApp, handleEnv = registryEnv) {
-      var _a;
-      const key = null !== (_a = options.key) && void 0 !== _a ? _a : "default",
-        envRegistry = getOrCreateSharedAppEnvRegistry(registryEnv);
-      let record = envRegistry.get(key);
-      return (null == record ? void 0 : record.app.released) && (releaseSharedAppRecord(registryEnv, key, record), record = void 0), record || (record = createSharedAppRecord(registryEnv, key, options, createApp), envRegistry.set(key, record)), record.refCount += 1, createSharedAppHandle(registryEnv, handleEnv, key, record);
+        entryOptions = __rest$w(options, ["envParams"]),
+        app = bootstrapVRenderNodeApp(createNodeApp(entryOptions), envParams);
+      return installPendingRuntimeContributionModulesToApp(app), app;
     }
 
     function createAppForSharedEnv(options) {
@@ -48604,6 +48744,7 @@
           return this._beforeRender(option) ? (null === (_a = this._compiler) || void 0 === _a || _a.render(option.morphConfig), this._updateAnimateState(!1), this._afterRender(), self) : self;
         }, this._updateSpec = (spec, forceMerge = !1, userUpdateOptions) => {
           var _a;
+          if (this._isReleased) return;
           this._reSetRenderState();
           const lastSpec = this._spec,
             result = {
@@ -48874,9 +49015,10 @@
         });
       }
       updateDataSync(id, data, parserOptions, userUpdateOptions) {
-        return this._reSetRenderState(), isNil$1(this._dataSet) ? this : this._chart ? (this._chart.updateData(id, data, !0, parserOptions), (null == userUpdateOptions ? void 0 : userUpdateOptions.reAnimate) && (this.stopAnimation(), this._updateAnimateState(!0)), this._compiler.render(), this) : (this._spec.data = array(this._spec.data), this._updateDataById(id, data, parserOptions), this);
+        return this._isReleased ? this : (this._reSetRenderState(), isNil$1(this._dataSet) ? this : this._chart ? (this._chart.updateData(id, data, !0, parserOptions), (null == userUpdateOptions ? void 0 : userUpdateOptions.reAnimate) && (this.stopAnimation(), this._updateAnimateState(!0)), this._compiler.render(), this) : (this._spec.data = array(this._spec.data), this._updateDataById(id, data, parserOptions), this));
       }
       updateFullDataSync(data, reRender = !0, userUpdateOptions) {
+        if (this._isReleased) return this;
         if (this._reSetRenderState(), this._chart) return this._chart.updateFullData(data), reRender && ((null == userUpdateOptions ? void 0 : userUpdateOptions.reAnimate) && (this.stopAnimation(), this._updateAnimateState(!0)), this._compiler.render()), this;
         const prevData = array(this._spec.data);
         return array(data).forEach(d => {
@@ -49370,7 +49512,7 @@
       }
       _reSetRenderState() {
         var _a, _b;
-        this._renderState = RenderStateEnum.render, null === (_b = null === (_a = this.getStage()) || void 0 === _a ? void 0 : _a.eventSystem) || void 0 === _b || _b.resumeTriggerEvent();
+        !this._isReleased && this._compiler && (this._renderState = RenderStateEnum.render, null === (_b = null === (_a = this.getStage()) || void 0 === _a ? void 0 : _a.eventSystem) || void 0 === _b || _b.resumeTriggerEvent());
       }
     };
     VChart$1.InstanceManager = InstanceManager, VChart$1.ThemeManager = ThemeManager, VChart$1.globalConfig = {
@@ -94374,7 +94516,7 @@
           return sliderHeight >= controllersHeight ? sliderHeight - controllersHeight : 0;
         }, this.autoPlayCallback = () => {
           var _a;
-          (null === (_a = this._spec) || void 0 === _a ? void 0 : _a.auto) && (this._playerComponent.pause(), this._playerComponent.play());
+          (null === (_a = this._spec) || void 0 === _a ? void 0 : _a.auto) && this._playerComponent && (this._playerComponent.pause(), this._playerComponent.play());
         }, this._initEvent = () => {
           this._option.disableTriggerEvent || (this._option.globalInstance.off(ChartEvent.rendered, this.autoPlayCallback), this._option.globalInstance.on(ChartEvent.rendered, this.autoPlayCallback), this._playerComponent.addEventListener(PlayerEventEnum.end, () => {
             var _a;
@@ -94526,18 +94668,20 @@
         return isHorizontal(this._orient) || "start" === this._position ? 0 : "middle" === this._position ? (rect.height - this._height) / 2 : rect.height - this._height;
       }
       changePlayerIndex(index) {
-        const spec = this._specs[index];
-        this._option.globalInstance.updateFullData(spec.data), this.event.emit(ChartEvent.playerChange, {
+        var _a, _b;
+        const spec = null === (_a = this._specs) || void 0 === _a ? void 0 : _a[index];
+        spec && (null === (_b = this._option) || void 0 === _b ? void 0 : _b.globalInstance) && (this._option.globalInstance.updateFullData(spec.data), this.event.emit(ChartEvent.playerChange, {
           model: this,
           value: {
             spec: spec,
             index: index,
             specs: this._specs
           }
-        });
+        }));
       }
       release() {
-        this._option.globalInstance.off(ChartEvent.rendered, this.autoPlayCallback);
+        var _a, _b, _c, _d;
+        null === (_b = null === (_a = this._playerComponent) || void 0 === _a ? void 0 : _a.pause) || void 0 === _b || _b.call(_a), null === (_d = null === (_c = this._option) || void 0 === _c ? void 0 : _c.globalInstance) || void 0 === _d || _d.off(ChartEvent.rendered, this.autoPlayCallback), super.release(), this._playerComponent = null, this._cacheAttrs = null, this._specs = [];
       }
     };
     Player$1.builtInTheme = {
@@ -100769,7 +100913,7 @@
 
     const VChartSimple = createChart('VChartSimple');
 
-    const version = "2.1.0";
+    const version = "2.1.1";
 
     exports.Area = Area;
     exports.AreaChart = AreaChart;