@visactor/vchart 1.10.2-alpha.3 → 1.10.2

package/build/index.js

@@ -8661,7 +8661,8 @@
       backgroundFit: !0,
       blur: 0,
       cursor: null,
-      html: null
+      html: null,
+      react: null
     }, DefaultFillStyle), DefaultStrokeStyle), DefaultLayout), DefaultPickStyle);
     const DefaultConnectAttribute = {
       connectedType: "none",
@@ -8885,7 +8886,7 @@
     function applyStrokeStyle(ctx, character) {
       const strokeStyle = character && character.stroke || defaultFormatting.stroke;
       if (!strokeStyle) return void (ctx.globalAlpha = 0);
-      ctx.globalAlpha = 1, ctx.lineWidth = character && "number" == typeof character.lineHeight ? character.lineHeight : 1, ctx.strokeStyle = strokeStyle;
+      ctx.globalAlpha = 1, ctx.lineWidth = character && "number" == typeof character.lineWidth ? character.lineWidth : 1, ctx.strokeStyle = strokeStyle;
       let fontSize = character.fontSize || 16;
       switch (character.script) {
         case "super":
@@ -9671,17 +9672,14 @@
       constructor() {
         this.hooks = {
           onChange: new SyncHook(["x", "y", "width", "height"])
+        }, this.active = () => {
+          const global = this.global;
+          if (!global.env || this.actived) return;
+          container.getNamed(WindowHandlerContribution, global.env).configure(this, global), this.actived = !0;
         }, this._uid = Generator.GenAutoIncrementId(), this.global = application.global, this.postInit();
       }
       postInit() {
-        this.global.hooks.onSetEnv.tap("window", () => {
-          this.active();
-        }), this.active();
-      }
-      active() {
-        const global = this.global;
-        if (!global.env || this.actived) return;
-        container.getNamed(WindowHandlerContribution, global.env).configure(this, global), this.actived = !0;
+        this.global.hooks.onSetEnv.tap("window", this.active), this.active();
       }
       get style() {
         var _a;
@@ -9719,7 +9717,7 @@
         throw new Error("暂不支持");
       }
       release() {
-        return this._handler.releaseWindow();
+        return this.global.hooks.onSetEnv.unTap("window", this.active), this._handler.releaseWindow();
       }
       getContext() {
         return this._handler.getContext();
@@ -10803,6 +10801,9 @@
         const pickResult = this.rootTarget.pick(x, y);
         return target = pickResult && pickResult.graphic ? pickResult.graphic : pickResult && pickResult.group ? pickResult.group : this.rootTarget.AABBBounds.contains(x, y) ? this.rootTarget : null, e && (e.pickParams = pickResult.params), target;
       }
+      release() {
+        this.dispatch.removeAllListeners(), this.eventPool.clear(), this.rootTarget = null, this.mappingTable = null, this.mappingState = null, this.cursorTarget = null;
+      }
     }
 
     const EventTarget = {
@@ -10887,7 +10888,7 @@
         }, this.resolution = resolution, this.setTargetElement(targetElement);
       }
       release() {
-        this.setTargetElement(null);
+        this.removeEvents(), this.manager && this.manager.release(), this.domElement = null, this.manager = null, this.globalObj = null;
       }
       setCursor(mode, target) {
         if (!target && !this.manager.rootTarget.window._handler.canvas.controled) return;
@@ -13188,9 +13189,9 @@
                 promises.push(end);
               } else data.loadState = "fail", marks.forEach(mark => mark.imageLoadFail(url));
             }), Promise.all(promises).then(() => {
-              ResourceLoader.isLoading = !1, ResourceLoader.loading();
+              ResourceLoader.isLoading = !1, this.onLoadSuccessCb.forEach(cb => cb()), ResourceLoader.loading();
             }).catch(error => {
-              console.error(error), ResourceLoader.isLoading = !1, ResourceLoader.loading();
+              console.error(error), ResourceLoader.isLoading = !1, this.onLoadSuccessCb.forEach(cb => cb()), ResourceLoader.loading();
             });
           }
         }, 0);
@@ -13210,12 +13211,15 @@
           ResourceLoader.toLoadAueue.unshift(elememt[0]);
         }
       }
+      static onLoadSuccess(cb) {
+        this.onLoadSuccessCb.push(cb);
+      }
     }
     function getIndex(url, arr) {
       for (let i = 0; i < arr.length; i++) if (arr[i].url === url) return i;
       return -1;
     }
-    ResourceLoader.cache = new Map(), ResourceLoader.isLoading = !1, ResourceLoader.toLoadAueue = [];
+    ResourceLoader.cache = new Map(), ResourceLoader.isLoading = !1, ResourceLoader.toLoadAueue = [], ResourceLoader.onLoadSuccessCb = [];
 
     const tempMatrix = new Matrix(),
       tempBounds$1 = new AABBBounds();
@@ -14540,6 +14544,9 @@
       restLayerCount(stage) {
         return "browser" === this.global.env ? 10 : 0;
       }
+      releaseStage(stage) {
+        this.layerMap.delete(stage);
+      }
     };
     DefaultLayerService.idprefix = "visactor_layer", DefaultLayerService.prefix_count = 0, DefaultLayerService = DefaultLayerService_1 = __decorate$1r([injectable(), __metadata$15("design:paramtypes", [])], DefaultLayerService);
 
@@ -14576,7 +14583,9 @@
           fillOpacity = themeAttributes.fillOpacity,
           lineWidth = themeAttributes.lineWidth,
           strokeOpacity = themeAttributes.strokeOpacity,
-          visible = themeAttributes.visible
+          visible = themeAttributes.visible,
+          x: originX = themeAttributes.x,
+          y: originY = themeAttributes.y
         } = graphic.attribute,
         fVisible = fillVisible(opacity, fillOpacity, fill),
         sVisible = strokeVisible(opacity, strokeOpacity),
@@ -14587,7 +14596,7 @@
       if (!(fVisible || sVisible || fillCb || strokeCb)) return !0;
       context.beginPath();
       const path = "function" == typeof graphic.pathProxy ? graphic.pathProxy(graphic.attribute) : graphic.pathProxy;
-      return renderCommandList(path.commandList, context, x, y), context.setShadowBlendStyle && context.setShadowBlendStyle(graphic, graphic.attribute, themeAttributes), doStroke && (strokeCb ? strokeCb(context, graphic.attribute, themeAttributes) : sVisible && (context.setStrokeStyle(graphic, graphic.attribute, x, y, themeAttributes), context.stroke())), doFill && (fillCb ? fillCb(context, graphic.attribute, themeAttributes) : fVisible && (context.setCommonStyle(graphic, graphic.attribute, x, y, themeAttributes), context.fill())), !0;
+      return renderCommandList(path.commandList, context, x, y), context.setShadowBlendStyle && context.setShadowBlendStyle(graphic, graphic.attribute, themeAttributes), doStroke && (strokeCb ? strokeCb(context, graphic.attribute, themeAttributes) : sVisible && (context.setStrokeStyle(graphic, graphic.attribute, x - originX, y - originY, themeAttributes), context.stroke())), doFill && (fillCb ? fillCb(context, graphic.attribute, themeAttributes) : fVisible && (context.setCommonStyle(graphic, graphic.attribute, x - originX, y - originY, themeAttributes), context.fill())), !0;
     }
     function intersect$2(x0, y0, x1, y1, x2, y2, x3, y3) {
       const x10 = x1 - x0,
@@ -17076,7 +17085,8 @@
           fontSize: fontSize,
           fontFamily: fontFamily,
           fontStyle: fontStyle,
-          fontWeight: fontWeight
+          fontWeight: fontWeight,
+          lineWidth: lineWidth
         } = this.attribute;
         return Object.assign({
           fill: fill,
@@ -17084,7 +17094,8 @@
           fontSize: fontSize,
           fontFamily: fontFamily,
           fontStyle: fontStyle,
-          fontWeight: fontWeight
+          fontWeight: fontWeight,
+          lineWidth: lineWidth
         }, config);
       }
       doUpdateFrameCache() {
@@ -20386,7 +20397,9 @@
           const endSeg = segments[segments.length - 1];
           startP = segments[0].points[0], endP = endSeg.points[endSeg.points.length - 1];
         } else startP = points[0], endP = points[points.length - 1];
-        direction = abs$1(endP.x - startP.x) > abs$1(endP.y - startP.y) ? Direction$1.ROW : Direction$1.COLUMN, drawAreaSegments(context.camera ? context : context.nativeContext, cache, clipRange, {
+        const xTotalLength = abs$1(endP.x - startP.x),
+          yTotalLength = abs$1(endP.y - startP.y);
+        direction = Number.isFinite(xTotalLength + yTotalLength) ? xTotalLength > yTotalLength ? Direction$1.ROW : Direction$1.COLUMN : Direction$1.ROW, drawAreaSegments(context.camera ? context : context.nativeContext, cache, clipRange, {
           offsetX: offsetX,
           offsetY: offsetY,
           offsetZ: offsetZ,
@@ -22476,7 +22489,7 @@
 
     class HtmlAttributePlugin {
       constructor() {
-        this.name = "HtmlAttributePlugin", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid;
+        this.name = "HtmlAttributePlugin", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid, this.lastDomContainerSet = new Set(), this.currentDomContainerSet = new Set();
       }
       activate(context) {
         this.pluginService = context, context.stage.hooks.afterRender.tap(this.key, stage => {
@@ -22488,15 +22501,17 @@
         });
       }
       deactivate(context) {
-        context.stage.hooks.afterRender.taps = context.stage.hooks.afterRender.taps.filter(item => item.name !== this.key);
+        context.stage.hooks.afterRender.taps = context.stage.hooks.afterRender.taps.filter(item => item.name !== this.key), application.graphicService.hooks.onRemove.unTap(this.key), application.graphicService.hooks.onRelease.unTap(this.key), this.release();
       }
       drawHTML(renderService) {
-        "browser" === application.global.env && renderService.renderTreeRoots.sort((a, b) => {
+        "browser" === application.global.env && (renderService.renderTreeRoots.sort((a, b) => {
           var _a, _b;
           return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
         }).forEach(group => {
           this.renderGroupHTML(group);
-        });
+        }), this.lastDomContainerSet.forEach(item => {
+          this.currentDomContainerSet.has(item) || item.parentElement && item.parentElement.removeChild(item);
+        }), this.lastDomContainerSet = new Set(this.currentDomContainerSet), this.currentDomContainerSet.clear());
       }
       renderGroupHTML(group) {
         this.renderGraphicHTML(group), group.forEachChildren(g => {
@@ -22523,7 +22538,8 @@
           width: width,
           height: height,
           style: style,
-          anchorType = "boundsLeftTop"
+          anchorType = "boundsLeftTop",
+          pointerEvents: pointerEvents
         } = html;
         graphic.bindDom || (graphic.bindDom = new Map());
         const lastDom = graphic.bindDom.get(dom);
@@ -22549,7 +22565,7 @@
             wrapGroup: wrapGroup
           }));
         } else wrapGroup = lastDom.wrapGroup, nativeContainer = wrapGroup.parentNode;
-        wrapGroup.style.pointerEvents = "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", nativeContainer.style.position = "relative");
+        wrapGroup.style.pointerEvents = pointerEvents || "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", nativeContainer.style.position = "relative");
         let left = 0,
           top = 0;
         const b = graphic.globalAABBBounds;
@@ -22561,7 +22577,15 @@
           windowTL = stage.window.getTopLeft(!1),
           offsetX = left + windowTL.left - containerTL.left,
           offsetTop = top + windowTL.top - containerTL.top;
-        wrapGroup.style.left = `${offsetX}px`, wrapGroup.style.top = `${offsetTop}px`;
+        wrapGroup.style.left = `${offsetX}px`, wrapGroup.style.top = `${offsetTop}px`, this.currentDomContainerSet.add(wrapGroup);
+      }
+      release() {
+        "browser" === application.global.env && (this.removeAllDom(this.pluginService.stage.defaultLayer), this.lastDomContainerSet.clear(), this.currentDomContainerSet.clear());
+      }
+      removeAllDom(g) {
+        this.removeDom(g), g.forEachChildren(item => {
+          item.isContainer && this.removeAllDom(g);
+        });
       }
     }
 
@@ -23003,6 +23027,78 @@
       return env ? "browser" === env : _isBrowserEnv;
     }
 
+    class ReactAttributePlugin extends HtmlAttributePlugin {
+      constructor() {
+        super(...arguments), this.name = "ReactAttributePlugin", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid;
+      }
+      removeDom(graphic) {
+        graphic.bindDom && graphic.bindDom.size && (graphic.bindDom.forEach(item => {
+          item.root && item.root.unmount();
+        }), graphic.bindDom.clear());
+      }
+      renderGraphicHTML(graphic) {
+        const {
+          react: react
+        } = graphic.attribute;
+        if (!react) return void (graphic.bindDom && graphic.bindDom.size && (graphic.bindDom.forEach(item => {
+          item.root && item.root.unmount();
+        }), graphic.bindDom.clear()));
+        const stage = graphic.stage;
+        if (!stage) return;
+        const ReactDOM = stage.params.ReactDOM,
+          {
+            element: element,
+            container: container,
+            width: width,
+            height: height,
+            style: style,
+            anchorType = "boundsLeftTop",
+            pointerEvents: pointerEvents
+          } = react;
+        if (!(element && ReactDOM && ReactDOM.createRoot)) return;
+        graphic.bindDom || (graphic.bindDom = new Map());
+        const lastDom = graphic.bindDom.get(element);
+        let wrapGroup, nativeContainer;
+        if (!lastDom || container && container !== lastDom.container) {
+          graphic.bindDom.forEach(_ref => {
+            let {
+              wrapGroup: wrapGroup
+            } = _ref;
+            application.global.removeDom(wrapGroup);
+          });
+          const _container = container;
+          if (nativeContainer = _container ? "string" == typeof _container ? application.global.getElementById(_container) : _container : graphic.stage.window.getContainer(), wrapGroup = application.global.createDom({
+            tagName: "div",
+            width: width,
+            height: height,
+            style: style,
+            parent: nativeContainer
+          }), wrapGroup) {
+            const root = ReactDOM.createRoot(wrapGroup);
+            root.render(element), graphic.bindDom.set(element, {
+              dom: element,
+              container: container,
+              wrapGroup: wrapGroup,
+              root: root
+            });
+          }
+        } else wrapGroup = lastDom.wrapGroup, nativeContainer = wrapGroup.parentNode;
+        wrapGroup.style.pointerEvents = pointerEvents || "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", nativeContainer.style.position = "relative");
+        let left = 0,
+          top = 0;
+        const b = graphic.globalAABBBounds;
+        if ("position" === anchorType || b.empty()) {
+          const matrix = graphic.globalTransMatrix;
+          left = matrix.e, top = matrix.f;
+        } else left = b.x1, top = b.y1;
+        const containerTL = application.global.getElementTopLeft(nativeContainer, !1),
+          windowTL = stage.window.getTopLeft(!1),
+          offsetX = left + windowTL.left - containerTL.left,
+          offsetTop = top + windowTL.top - containerTL.top;
+        wrapGroup.style.left = `${offsetX}px`, wrapGroup.style.top = `${offsetTop}px`;
+      }
+    }
+
     const DefaultConfig$1 = {
       WIDTH: 500,
       HEIGHT: 500,
@@ -23103,7 +23199,7 @@
           canvas: params.canvas
         }), this.state = "normal", this.renderCount = 0, this.tryInitEventSystem(), this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig$1.BACKGROUND, this.appendChild(this.layerService.createLayer(this, {
           main: !0
-        })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this.ticker = params.ticker || defaultTicker, this.supportInteractiveLayer = !1 !== params.interactiveLayer, this.timeline = new DefaultTimeline(), this.ticker.addTimeline(this.timeline), this.timeline.pause(), params.optimize || (params.optimize = {}), this.optmize(params.optimize), params.background && isString$1(this._background) && this._background.includes("/") && this.setAttributes({
+        })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this.ticker = params.ticker || defaultTicker, this.supportInteractiveLayer = !1 !== params.interactiveLayer, this.timeline = new DefaultTimeline(), this.ticker.addTimeline(this.timeline), this.timeline.pause(), params.optimize || (params.optimize = {}), this.optmize(params.optimize), params.background && isString$1(this._background) && this._background.includes("/") && this.setAttributes({
           background: this._background
         });
       }
@@ -23263,6 +23359,14 @@
           this.pluginService.unRegister(plugin);
         }));
       }
+      enableReactAttribute(container) {
+        this.reactAttribute || (this.reactAttribute = container, this.pluginService.register(new ReactAttributePlugin()));
+      }
+      disableReactAttribute() {
+        this.reactAttribute && (this.reactAttribute = !1, this.pluginService.findPluginsByName("ReactAttributePlugin").forEach(plugin => {
+          this.pluginService.unRegister(plugin);
+        }));
+      }
       getPluginsByName(name) {
         return this.pluginService.findPluginsByName(name);
       }
@@ -23390,7 +23494,7 @@
         throw new Error("暂不支持");
       }
       release() {
-        super.release(), this.eventSystem && this.eventSystem.release(), this.pluginService.release(), this.forEach(layer => {
+        super.release(), this.hooks.beforeRender.unTap("constructor", this.beforeRender), this.hooks.afterRender.unTap("constructor", this.afterRender), this.eventSystem && this.eventSystem.release(), this.layerService.releaseStage(this), this.pluginService.release(), this.forEach(layer => {
           layer.release();
         }), this.interactiveLayer && this.interactiveLayer.release(), this.window.release();
       }
@@ -27064,6 +27168,9 @@
         const Ctor = Factory._interactions[interactionType];
         return Ctor ? new Ctor(view, options) : null;
       }
+      static hasInteraction(interactionType) {
+        return !!Factory._interactions[interactionType];
+      }
     };
     Factory$1._plotMarks = {}, Factory$1._marks = {}, Factory$1._components = {}, Factory$1._graphicComponents = {}, Factory$1._transforms = {}, Factory$1._grammars = {}, Factory$1._glyphs = {}, Factory$1._animations = {}, Factory$1._interactions = {}, Factory$1._graphics = {}, Factory$1.registerGlyph = (glyphType, marks, encoders, defaultEncoder, progressiveChannels) => (Factory$1._glyphs[glyphType] = new GlyphMeta(marks, encoders, defaultEncoder, progressiveChannels), Factory$1._glyphs[glyphType]), Factory$1.registerAnimationType = (animationType, animation) => {
       Factory$1._animations[animationType] = animation;
@@ -27303,9 +27410,9 @@
           return transformAttributes(attrTransforms, attributes, this);
         }), this.clearGraphicAttributes(), this.mark.needAnimate() && (this.setPrevGraphicAttributes(null), this.setNextGraphicAttributes(attributes), this.setFinalGraphicAttributes(attributes)));
       }
-      updateGraphicItem(config) {
+      updateGraphicItem() {
         if (!this.graphicItem) return;
-        isNil$3(config.clip) || this.graphicItem.setAttribute("clip", config.clip), isNil$3(config.zIndex) || this.graphicItem.setAttribute("zIndex", config.zIndex), isNil$3(config.clipPath) || this.graphicItem.setAttribute("path", isArray$3(config.clipPath) ? config.clipPath : config.clipPath([this])), isNil$3(config.interactive) || this.graphicItem.setAttribute("pickable", config.interactive), isNil$3(config.zIndex) || this.graphicItem.setAttribute("zIndex", config.zIndex), this.diffState === DiffState.exit ? this.graphicItem.releaseStatus = "willRelease" : this.graphicItem.releaseStatus = void 0;
+        this.diffState === DiffState.exit ? this.graphicItem.releaseStatus = "willRelease" : this.graphicItem.releaseStatus = void 0;
         const stateAnimation = this.mark.animate.getAnimationConfigs("state");
         0 !== stateAnimation.length && (this.graphicItem.stateAnimateConfig = stateAnimation[0].originConfig);
       }
@@ -27574,6 +27681,9 @@
       constructor(view, options) {
         this.references = new Map(), this.view = view, this.depend(null == options ? void 0 : options.dependency);
       }
+      getStartState() {
+        return null;
+      }
       depend(grammar) {
         this.references.clear(), array(grammar).map(grammar => isString$1(grammar) ? this.view.getGrammarById(grammar) : grammar).filter(ref => !isNil$3(ref)).forEach(ref => {
           var _a;
@@ -27590,16 +27700,16 @@
         const events = this.getEvents();
         (null != events ? events : []).forEach(evt => {
           evt.type && evt.handler && (isArray$3(evt.type) ? evt.type.forEach(evtType => {
-            evtType && this.view.addEventListener(evtType, evt.handler);
-          }) : this.view.addEventListener(evt.type, evt.handler));
+            evtType && "none" !== evtType && this.view.addEventListener(evtType, evt.handler);
+          }) : "none" !== evt.type && this.view.addEventListener(evt.type, evt.handler));
         });
       }
       unbind() {
         const events = this.getEvents();
         (null != events ? events : []).forEach(evt => {
           evt.type && evt.handler && (isArray$3(evt.type) ? evt.type.forEach(evtType => {
-            evtType && this.view.removeEventListener(evtType, evt.handler);
-          }) : this.view.removeEventListener(evt.type, evt.handler));
+            evtType && "none" !== evtType && this.view.removeEventListener(evtType, evt.handler);
+          }) : "none" !== evt.type && this.view.removeEventListener(evt.type, evt.handler));
         });
       }
       start(element) {}
@@ -27626,6 +27736,9 @@
           handler: this.handleReset
         }];
       }
+      getStartState() {
+        return this.options.state;
+      }
       start(element) {
         element && this._marks && this._marks.includes(element.mark) && element.addState(this.options.state);
       }
@@ -27672,6 +27785,9 @@
           this.reset(e.element);
         }, this.options = Object.assign({}, ElementSelect.defaultOptions, options), this._marks = view.getMarksBySelector(this.options.selector), this._stateMarks = groupMarksByState(this._marks, [this.options.state, this.options.reverseState]);
       }
+      getStartState() {
+        return this.options.state;
+      }
       getEvents() {
         const triggerOff = this.options.triggerOff,
           trigger = this.options.trigger,
@@ -27680,7 +27796,7 @@
             handler: this.handleStart
           }];
         let eventName = triggerOff;
-        return "empty" === triggerOff ? (eventName = trigger, this._resetType = "view") : isString$1(triggerOff) ? triggerOff.includes("view:") ? (eventName = triggerOff.replace("view:", ""), this._resetType = "view") : (eventName = triggerOff, this._resetType = "self") : isNumber$3(triggerOff) ? (eventName = null, this._resetType = "timeout") : this._resetType = null, eventName && eventName !== trigger && events.push({
+        return "empty" === triggerOff ? (eventName = trigger, this._resetType = "view") : "none" === triggerOff ? (eventName = null, this._resetType = null) : isString$1(triggerOff) ? triggerOff.includes("view:") ? (eventName = triggerOff.replace("view:", ""), this._resetType = "view") : (eventName = triggerOff, this._resetType = "self") : isNumber$3(triggerOff) ? (eventName = null, this._resetType = "timeout") : this._resetType = null, eventName && eventName !== trigger && events.push({
           type: eventName,
           handler: this.handleReset
         }), events;
@@ -27717,6 +27833,9 @@
           this.reset(e.element);
         }, this.options = Object.assign({}, ElementHighlight.defaultOptions, options), this._marks = view.getMarksBySelector(this.options.selector), this._stateMarks = groupMarksByState(this._marks, [this.options.highlightState, this.options.blurState]);
       }
+      getStartState() {
+        return this.options.highlightState;
+      }
       getEvents() {
         const triggerOff = this.options.triggerOff,
           events = [{
@@ -27773,6 +27892,9 @@
           e.element && this._marks && this._marks.includes(e.element.mark) && this.clearPrevElements();
         }, this.options = Object.assign({}, ElementHighlightByKey.defaultOptions, options), this._marks = view.getMarksBySelector(this.options.selector);
       }
+      getStartState() {
+        return this.options.highlightState;
+      }
       getEvents() {
         return [{
           type: this.options.trigger,
@@ -27827,6 +27949,9 @@
           this.reset(e.element);
         }, this.options = Object.assign({}, ElementHighlightByGroup.defaultOptions, options), this._marks = view.getMarksBySelector(this.options.selector);
       }
+      getStartState() {
+        return this.options.highlightState;
+      }
       getEvents() {
         return [{
           type: this.options.trigger,
@@ -29008,7 +29133,8 @@
         return this.canvas.nativeCanvas.dispatchEvent(event);
       }
       getStyle() {
-        return this.canvas.nativeCanvas.style;
+        var _a;
+        return null !== (_a = this.canvas.nativeCanvas.style) && void 0 !== _a ? _a : {};
       }
       setStyle(style) {
         this.canvas.nativeCanvas.style = style;
@@ -35497,7 +35623,9 @@
             line.name = `${this.name}-line`, line.id = this._getNodeId("line" + index), isEmpty(null == state ? void 0 : state.line) || (line.states = isArray$3(state.line) ? null !== (_b = state.line[index]) && void 0 !== _b ? _b : state.line[state.line.length - 1] : state.line), this.add(line);
           });
         } else {
-          const line = graphicCreator.polygon(Object.assign(Object.assign({
+          let lineCreator = graphicCreator.line;
+          array(lineStyle)[0].cornerRadius && (lineCreator = graphicCreator.polygon);
+          const line = lineCreator(Object.assign(Object.assign({
             points: this._clipPoints(this.attribute.points)
           }, array(lineStyle)[0]), {
             fill: !1,
@@ -35699,6 +35827,43 @@
       }
     };
 
+    const clampRadian = function () {
+      let angle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      if (angle < 0) for (; angle < 0;) angle += tau$1;else if (angle > 0) for (; angle > tau$1;) angle -= tau$1;
+      return angle;
+    };
+    function isInRange(a, min, max) {
+      return !isLess(a, min, 0, 1e-6) && !isGreater(a, max, 0, 1e-6);
+    }
+    function getLabelPosition(tickPosition, tickVector, text, style) {
+      const labelBounds = getTextBounds(Object.assign({
+          text: text
+        }, style)),
+        width = labelBounds.width(),
+        height = labelBounds.height(),
+        angle = clampRadian(Math.atan2(tickVector[1], tickVector[0])) - Math.PI,
+        PI_3_4 = 3 * Math.PI / 4,
+        PI_1_4 = Math.PI / 4,
+        PI_1_2 = Math.PI / 2,
+        baseX = tickPosition.x;
+      let dx = 0;
+      dx = isInRange(angle, -PI_3_4, -PI_1_4) ? ((angle + PI_3_4) / PI_1_2 - .5) * width : isInRange(angle, PI_1_4, PI_3_4) ? (.5 - (angle - PI_1_4) / PI_1_2) * width : Math.cos(angle) >= 0 ? .5 * width : .5 * -width;
+      const x = baseX - dx,
+        baseY = tickPosition.y;
+      let dy = 0;
+      dy = isInRange(angle, -PI_3_4, -PI_1_4) ? .5 * -height : isInRange(angle, PI_1_4, PI_3_4) ? .5 * height : Math.cos(angle) >= 0 ? (.5 - (PI_1_4 - angle) / PI_1_2) * height : (.5 - clampRadian(angle - PI_3_4) / PI_1_2) * height;
+      return {
+        x: x,
+        y: baseY - dy
+      };
+    }
+    function getElMap(g) {
+      const elMap = {};
+      return traverseGroup(g, el => {
+        "group" !== el.type && el.id && (elMap[el.id] = el);
+      }), elMap;
+    }
+
     class AxisBase extends AbstractComponent {
       constructor() {
         super(...arguments), this.name = "axis", this.data = [], this.tickLineItems = [], this.subTickLineItems = [], this.axisLabelLayerSize = {}, this.axisLabelsContainer = null, this._onHover = e => {
@@ -35736,7 +35901,7 @@
         return this.add(offscreenGroup), this._renderInner(offscreenGroup), this.removeChild(offscreenGroup), this.attribute = currentAttribute, offscreenGroup.AABBBounds;
       }
       render() {
-        this.removeAllChild(!0), this._prevInnerView = this._innerView, this._innerView = graphicCreator.group({
+        this._prevInnerView = this._innerView && getElMap(this._innerView), this.removeAllChild(!0), this._innerView = graphicCreator.group({
           x: 0,
           y: 0,
           pickable: !1
@@ -36008,6 +36173,9 @@
           }));
         }), data;
       }
+      release() {
+        super.release(), this._prevInnerView = null, this._innerView = null;
+      }
     }
 
     function rotate(x, y, deg, originX, originY) {
@@ -36170,17 +36338,42 @@
         limitLength: limitLength,
         verticalLimitLength: verticalLimitLength,
         ellipsis = "...",
-        orient: orient
+        orient: orient,
+        axisLength: axisLength
       } = config;
-      !isEmpty(labels) && isValidNumber$1(limitLength) && labels.forEach(label => {
+      if (isEmpty(labels) || !isValidNumber$1(limitLength)) return;
+      const DELTA = Math.sin(Math.PI / 10);
+      labels.forEach(label => {
         var _a;
         const angle = label.attribute.angle,
-          isRotated = !isNil$3(angle) && 0 !== angle;
-        if (("top" === orient || "bottom" === orient) && (isRotated && Math.floor(label.AABBBounds.height()) <= limitLength || !isRotated && Math.floor(label.AABBBounds.width()) <= verticalLimitLength)) return;
+          hasAngle = !isNil$3(angle),
+          cos = hasAngle ? Math.cos(angle) : 1,
+          sin = hasAngle ? Math.sin(angle) : 0,
+          isHorizontal = !hasAngle || Math.abs(sin) <= DELTA,
+          isVertical = hasAngle && Math.abs(cos) <= DELTA,
+          isX = "top" === orient || "bottom" === orient;
+        if (isX) {
+          if (isVertical && Math.floor(label.AABBBounds.height()) <= limitLength) return;
+          if (isHorizontal && Math.floor(label.AABBBounds.width()) <= verticalLimitLength) return;
+        }
         const direction = label.attribute.direction;
-        if (("left" === orient || "right" === orient) && ("vertical" === direction && Math.floor(label.AABBBounds.height()) <= verticalLimitLength || "vertical" !== direction && Math.floor(label.AABBBounds.width()) <= limitLength)) return;
+        if (!isX) {
+          if ("vertical" === direction && Math.floor(label.AABBBounds.height()) <= verticalLimitLength) return;
+          if ("vertical" !== direction) {
+            if (isHorizontal && Math.floor(label.AABBBounds.width()) <= limitLength) return;
+            if (isVertical && Math.floor(label.AABBBounds.height()) <= verticalLimitLength) return;
+          }
+        }
         let limitLabelLength = null;
-        limitLabelLength = isRotated ? Math.abs(limitLength / Math.sin(angle)) : "top" === orient || "bottom" === orient || "vertical" === direction ? verticalLimitLength : limitLength, isValidNumber$1(label.attribute.maxLineWidth) && (limitLabelLength = isValidNumber$1(limitLabelLength) ? Math.min(label.attribute.maxLineWidth, limitLabelLength) : label.attribute.maxLineWidth), label.setAttributes({
+        if (isHorizontal || isVertical) limitLabelLength = isX ? isHorizontal ? verticalLimitLength : limitLength : "vertical" === direction || isVertical ? verticalLimitLength : limitLength;else if (isX) {
+          const {
+              x1: x1,
+              x2: x2
+            } = label.AABBBounds,
+            tan = sin / cos;
+          limitLabelLength = tan > 0 && x1 <= axisLength && limitLength / tan + x1 > axisLength ? (axisLength - x1) / Math.abs(cos) : tan < 0 && x2 >= 0 && limitLength / tan + x2 < 0 ? x2 / Math.abs(cos) : Math.abs(limitLength / sin);
+        } else limitLabelLength = Math.abs(limitLength / cos);
+        isValidNumber$1(label.attribute.maxLineWidth) && (limitLabelLength = isValidNumber$1(limitLabelLength) ? Math.min(label.attribute.maxLineWidth, limitLabelLength) : label.attribute.maxLineWidth), label.setAttributes({
           maxLineWidth: limitLabelLength,
           ellipsis: null !== (_a = label.attribute.ellipsis) && void 0 !== _a ? _a : ellipsis
         });
@@ -36362,9 +36555,10 @@
             autoRotate = !0,
             shape: shape,
             background: background,
-            state = {}
+            state = {},
+            maxWidth: maxWidth
           } = _d,
-          restAttrs = __rest$4(_d, ["position", "space", "textStyle", "autoRotate", "shape", "background", "state"]);
+          restAttrs = __rest$4(_d, ["position", "space", "textStyle", "autoRotate", "shape", "background", "state", "maxWidth"]);
         let percent = .5;
         "start" === position ? percent = 0 : "end" === position && (percent = 1);
         const {
@@ -36415,7 +36609,28 @@
           } = this.attribute;
           textBaseline = 1 === -1 * verticalFactor ? "bottom" : "top";
         } else textAlign = this.getTextAlign(vector), textBaseline = this.getTextBaseline(vector, !1);
+        let maxTagWidth = maxWidth;
+        if (isNil$3(maxTagWidth)) {
+          const {
+              verticalLimitSize: verticalLimitSize,
+              verticalMinSize: verticalMinSize,
+              orient: orient
+            } = this.attribute,
+            limitSize = Math.min(verticalLimitSize || 1 / 0, verticalMinSize || 1 / 0);
+          if (isValidNumber$1(limitSize)) {
+            if ("bottom" === orient || "top" === orient) {
+              if (angle !== Math.PI / 2) {
+                const cosValue = Math.abs(Math.cos(null != angle ? angle : 0));
+                maxTagWidth = cosValue < 1e-6 ? 1 / 0 : this.attribute.end.x / cosValue;
+              } else maxTagWidth = limitSize - offset;
+            } else if (angle && 0 !== angle) {
+              const sinValue = Math.abs(Math.sin(angle));
+              maxTagWidth = sinValue < 1e-6 ? 1 / 0 : this.attribute.end.y / sinValue;
+            } else maxTagWidth = limitSize - offset;
+          }
+        }
         const attrs = Object.assign(Object.assign(Object.assign({}, titlePoint), restAttrs), {
+          maxWidth: maxTagWidth,
           textStyle: Object.assign({
             textAlign: textAlign,
             textBaseline: textBaseline
@@ -36539,12 +36754,15 @@
             labelRotateAngle: autoRotateAngle,
             orient: orient
           }), autoLimit$1 && isValidNumber$1(limitLength) && limitLength > 0) {
-            const verticalLimitLength = "left" === orient || "right" === orient ? Math.abs(this.attribute.start.y - this.attribute.end.y) / labelShapes.length : autoHide$1 || autoRotate$1 ? 1 / 0 : Math.abs(this.attribute.start.x - this.attribute.end.x) / labelShapes.length;
+            const isVertical = "left" === orient || "right" === orient,
+              axisLength = isVertical ? Math.abs(this.attribute.start.y - this.attribute.end.y) : Math.abs(this.attribute.start.x - this.attribute.end.x),
+              verticalLimitLength = isVertical ? axisLength / labelShapes.length : autoHide$1 || autoRotate$1 ? 1 / 0 : axisLength / labelShapes.length;
             autoLimit(labelShapes, {
               limitLength: limitLength,
               verticalLimitLength: verticalLimitLength,
               ellipsis: limitEllipsis,
-              orient: orient
+              orient: orient,
+              axisLength: axisLength
             });
           }
           autoHide$1 && autoHide(labelShapes, {
@@ -36647,37 +36865,6 @@
       }
     }
 
-    const clampRadian = function () {
-      let angle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-      if (angle < 0) for (; angle < 0;) angle += tau$1;else if (angle > 0) for (; angle > tau$1;) angle -= tau$1;
-      return angle;
-    };
-    function isInRange(a, min, max) {
-      return !isLess(a, min, 0, 1e-6) && !isGreater(a, max, 0, 1e-6);
-    }
-    function getLabelPosition(tickPosition, tickVector, text, style) {
-      const labelBounds = getTextBounds(Object.assign({
-          text: text
-        }, style)),
-        width = labelBounds.width(),
-        height = labelBounds.height(),
-        angle = clampRadian(Math.atan2(tickVector[1], tickVector[0])) - Math.PI,
-        PI_3_4 = 3 * Math.PI / 4,
-        PI_1_4 = Math.PI / 4,
-        PI_1_2 = Math.PI / 2,
-        baseX = tickPosition.x;
-      let dx = 0;
-      dx = isInRange(angle, -PI_3_4, -PI_1_4) ? ((angle + PI_3_4) / PI_1_2 - .5) * width : isInRange(angle, PI_1_4, PI_3_4) ? (.5 - (angle - PI_1_4) / PI_1_2) * width : Math.cos(angle) >= 0 ? .5 * width : .5 * -width;
-      const x = baseX - dx,
-        baseY = tickPosition.y;
-      let dy = 0;
-      dy = isInRange(angle, -PI_3_4, -PI_1_4) ? .5 * -height : isInRange(angle, PI_1_4, PI_3_4) ? .5 * height : Math.cos(angle) >= 0 ? (.5 - (PI_1_4 - angle) / PI_1_2) * height : (.5 - clampRadian(angle - PI_3_4) / PI_1_2) * height;
-      return {
-        x: x,
-        y: baseY - dy
-      };
-    }
-
     var __rest$3 = 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]);
@@ -36820,12 +37007,6 @@
     }
     CircleAxis.defaultAttributes = DEFAULT_AXIS_THEME, mixin(CircleAxis, CircleAxisMixin);
 
-    function getElMap(g) {
-      const elMap = {};
-      return traverseGroup(g, el => {
-        "group" !== el.type && el.id && (elMap[el.id] = el);
-      }), elMap;
-    }
     class GroupTransition extends ACustomAnimate {
       constructor() {
         super(...arguments), this.mode = AnimateMode.NORMAL;
@@ -36833,10 +37014,10 @@
       onBind() {
         const currentInnerView = this.target.getInnerView(),
           prevInnerView = this.target.getPrevInnerView();
-        prevInnerView && (this._oldElementMap = getElMap(prevInnerView), this._newElementAttrMap = {}, traverseGroup(currentInnerView, el => {
+        prevInnerView && (this._newElementAttrMap = {}, traverseGroup(currentInnerView, el => {
           var _a, _b, _c, _d, _e, _f;
           if ("group" !== el.type && el.id) {
-            const oldEl = this._oldElementMap[el.id];
+            const oldEl = prevInnerView[el.id];
             if (oldEl) {
               if (!isEqual$1(el.attribute, oldEl.attribute)) {
                 const newProps = cloneDeep(el.attribute);
@@ -36974,7 +37155,7 @@
         return this._prevInnerView;
       }
       render() {
-        this.removeAllChild(!0), this._prevInnerView = this._innerView, this._innerView = graphicCreator.group({
+        this._prevInnerView = this._innerView && getElMap(this._innerView), this.removeAllChild(!0), this._innerView = graphicCreator.group({
           x: 0,
           y: 0,
           pickable: !1
@@ -37079,6 +37260,9 @@
       _getNodeId(id) {
         return `${this.id}-${id}`;
       }
+      release() {
+        super.release(), this._prevInnerView = null, this._innerView = null;
+      }
     }
     BaseGrid.defaultAttributes = {
       style: {
@@ -39214,7 +39398,8 @@
             maxWidth: maxWidth,
             maxHeight: maxHeight,
             defaultSelected = [],
-            lazyload: lazyload
+            lazyload: lazyload,
+            autoPage: autoPage
           } = this.attribute,
           {
             spaceCol = DEFAULT_ITEM_SPACE_COL,
@@ -39224,9 +39409,10 @@
           {
             items: legendItems,
             isHorizontal: isHorizontal,
-            startIndex: startIndex
+            startIndex: startIndex,
+            isScrollbar: isScrollbar
           } = this._itemContext,
-          maxPages = isHorizontal ? maxRow : maxCol;
+          maxPages = isScrollbar ? 1 : isHorizontal ? maxRow : maxCol;
         let item,
           {
             doWrap: doWrap,
@@ -39235,24 +39421,20 @@
             startY: startY,
             pages: pages
           } = this._itemContext;
-        for (let index = startIndex, len = legendItems.length; index < len; index++) {
-          if (lazyload && pages > this._itemContext.currentPage * maxPages) {
-            this._itemContext.startIndex = index;
-            break;
-          }
-          item = legendItems[index], item.id || (item.id = item.label), item.index = index;
+        for (let index = startIndex, len = legendItems.length; index < len && !(lazyload && pages > this._itemContext.currentPage * maxPages); index++) {
+          lazyload && (this._itemContext.startIndex = index + 1), item = legendItems[index], item.id || (item.id = item.label), item.index = index;
           const itemGroup = this._renderEachItem(item, !!isEmpty(defaultSelected) || (null == defaultSelected ? void 0 : defaultSelected.includes(item.label)), index, legendItems),
             itemWidth = itemGroup.attribute.width,
             itemHeight = itemGroup.attribute.height;
-          this._itemHeight = Math.max(this._itemHeight, itemHeight), maxWidthInCol = Math.max(itemWidth, maxWidthInCol), this._itemMaxWidth = Math.max(itemWidth, this._itemMaxWidth), isHorizontal ? (isValid$3(maxWidth) && (itemWidth >= maxWidth ? (doWrap = !0, index > 0 && (startX = 0, startY += itemHeight + spaceRow, pages += 1)) : maxWidth < startX + itemWidth && (doWrap = !0, startX = 0, startY += itemHeight + spaceRow, pages += 1)), index > 0 && itemGroup.setAttributes({
+          this._itemHeight = Math.max(this._itemHeight, itemHeight), maxWidthInCol = Math.max(itemWidth, maxWidthInCol), this._itemMaxWidth = Math.max(itemWidth, this._itemMaxWidth), isHorizontal ? (isValid$3(maxWidth) && (isScrollbar && autoPage ? (pages = Math.ceil((startX + itemWidth) / maxWidth), doWrap = pages > 1) : startX + itemWidth > maxWidth && (doWrap = !0, startX > 0 && (pages += 1, startX = 0, startY += itemHeight + spaceRow))), 0 === startX && 0 === startY || itemGroup.setAttributes({
             x: startX,
             y: startY
-          }), startX += spaceCol + itemWidth) : (isValid$3(maxHeight) && maxHeight < startY + itemHeight && (doWrap = !0, startY = 0, startX += maxWidthInCol + spaceCol, maxWidthInCol = 0, pages += 1), index > 0 && itemGroup.setAttributes({
+          }), startX += spaceCol + itemWidth) : (isValid$3(maxHeight) && (isScrollbar && autoPage ? (pages = Math.ceil((startY + itemHeight) / maxHeight), doWrap = pages > 1) : maxHeight < startY + itemHeight && (pages += 1, doWrap = !0, startY = 0, startX += maxWidthInCol + spaceCol, maxWidthInCol = 0)), 0 === startX && 0 === startY || itemGroup.setAttributes({
             x: startX,
             y: startY
           }), startY += spaceRow + itemHeight), itemsContainer.add(itemGroup);
         }
-        return this._itemContext.doWrap = doWrap, this._itemContext.startX = startX, this._itemContext.startY = startY, this._itemContext.maxWidthInCol = maxWidthInCol, this._itemContext.pages = pages, this._itemContext.maxPages = maxPages, lazyload || (this._itemContext.startIndex = legendItems.length), this._itemContext;
+        return this._itemContext.doWrap = doWrap, this._itemContext.startX = startX, this._itemContext.startY = startY, this._itemContext.maxWidthInCol = maxWidthInCol, this._itemContext.pages = pages, this._itemContext.maxPages = maxPages, isScrollbar && (this._itemContext.totalPage = pages), lazyload || (this._itemContext.startIndex = legendItems.length), this._itemContext;
       }
       _renderContent() {
         const {
@@ -39280,8 +39462,10 @@
             height: itemHeight
           } = item,
           widthsOptions = [];
-        isValid$3(maxItemWidth) && widthsOptions.push(maxItemWidth), isValid$3(itemWidth) && widthsOptions.push(itemWidth), widthsOptions.length && (isValid$3(maxWidth) && widthsOptions.push(maxWidth), this._itemWidthByUser = minInArray(widthsOptions)), isValid$3(itemHeight) && (this._itemHeightByUser = itemHeight), this._itemContext = {
-          currentPage: this.attribute.pager && this.attribute.pager.defaultCurrent || 1,
+        isValid$3(maxItemWidth) && widthsOptions.push(maxItemWidth), isValid$3(itemWidth) && widthsOptions.push(itemWidth), widthsOptions.length && (isValid$3(maxWidth) && widthsOptions.push(maxWidth), this._itemWidthByUser = minInArray(widthsOptions)), isValid$3(itemHeight) && (this._itemHeightByUser = itemHeight);
+        const pager = this.attribute.pager;
+        this._itemContext = {
+          currentPage: pager && pager.defaultCurrent || 1,
           doWrap: !1,
           maxWidthInCol: 0,
           maxPages: 1,
@@ -39291,10 +39475,11 @@
           startIndex: 0,
           items: legendItems,
           isHorizontal: isHorizontal,
-          totalPage: 1 / 0
+          totalPage: 1 / 0,
+          isScrollbar: pager && "scrollbar" === pager.type
         }, this._itemContext = this._renderItems();
         let pagerRendered = !1;
-        this._itemContext.doWrap && autoPage && this._itemContext.pages > this._itemContext.maxPages && (pagerRendered = this._renderPagerComponent(isHorizontal)), pagerRendered || (itemsContainer.setAttribute("y", this._title ? this._title.AABBBounds.height() + get$1(this.attribute, "title.space", 8) : 0), this._innerView.add(itemsContainer));
+        this._itemContext.doWrap && autoPage && this._itemContext.pages > this._itemContext.maxPages && (pagerRendered = this._renderPagerComponent()), pagerRendered || (itemsContainer.setAttribute("y", this._title ? this._title.AABBBounds.height() + get$1(this.attribute, "title.space", 8) : 0), this._innerView.add(itemsContainer));
       }
       _bindEvents() {
         if (this.attribute.disableTriggerEvent) return;
@@ -39443,27 +39628,13 @@
           itemGroupHeight = this._itemHeightByUser || innerGroupHeight + parsedPadding[0] + parsedPadding[2];
         return itemGroup.attribute.width = itemGroupWidth, itemGroup.attribute.height = itemGroupHeight, focusShape && focusShape.setAttribute("visible", !1), innerGroup.translateTo(-innerGroupBounds.x1 + parsedPadding[3], -innerGroupBounds.y1 + parsedPadding[0]), itemGroup;
       }
-      _createPager(isScrollbar, isHorizontal, compStyle, compSize) {
+      _createPager(compStyle) {
         var _a, _b;
         const {
           disableTriggerEvent: disableTriggerEvent,
           maxRow: maxRow
         } = this.attribute;
-        return isScrollbar ? new ScrollBar$1(isHorizontal ? Object.assign(Object.assign({
-          direction: "vertical",
-          width: 12,
-          range: [0, .5]
-        }, compStyle), {
-          height: compSize,
-          disableTriggerEvent: disableTriggerEvent
-        }) : Object.assign(Object.assign({
-          direction: "horizontal",
-          disableTriggerEvent: disableTriggerEvent,
-          range: [0, .5],
-          height: 12
-        }, compStyle), {
-          width: compSize
-        })) : new Pager(isHorizontal ? Object.assign(Object.assign({
+        return this._itemContext.isHorizontal ? new Pager(Object.assign(Object.assign({
           layout: 1 === maxRow ? "horizontal" : "vertical",
           total: 99
         }, merge$2({
@@ -39474,53 +39645,79 @@
         }, compStyle)), {
           defaultCurrent: null === (_a = this.attribute.pager) || void 0 === _a ? void 0 : _a.defaultCurrent,
           disableTriggerEvent: disableTriggerEvent
-        }) : Object.assign({
+        })) : new Pager(Object.assign({
           layout: "horizontal",
           total: 99,
           disableTriggerEvent: disableTriggerEvent,
           defaultCurrent: null === (_b = this.attribute.pager) || void 0 === _b ? void 0 : _b.defaultCurrent
         }, compStyle));
       }
-      _updatePositionOfPager(isScrollbar, isHorizontal, contentSize, renderStartY, compSize) {
+      _createScrollbar(compStyle, compSize) {
+        const {
+          disableTriggerEvent: disableTriggerEvent
+        } = this.attribute;
+        return this._itemContext.isHorizontal ? new ScrollBar$1(Object.assign(Object.assign({
+          direction: "horizontal",
+          disableTriggerEvent: disableTriggerEvent,
+          range: [0, .5],
+          height: 12
+        }, compStyle), {
+          width: compSize
+        })) : new ScrollBar$1(Object.assign(Object.assign({
+          direction: "vertical",
+          width: 12,
+          range: [0, .5]
+        }, compStyle), {
+          height: compSize,
+          disableTriggerEvent: disableTriggerEvent
+        }));
+      }
+      _updatePositionOfPager(contentWidth, contentHeight, renderStartY, compWidth, compHeight) {
         const {
             maxHeight: maxHeight,
             pager: pager
           } = this.attribute,
           {
-            currentPage: currentPage,
-            totalPage: totalPage
-          } = this._itemContext;
-        if (isScrollbar) this._pagerComponent.setScrollRange([(currentPage - 1) / totalPage, currentPage / totalPage]), isHorizontal ? this._pagerComponent.setAttributes({
-          x: contentSize,
-          y: renderStartY
-        }) : this._pagerComponent.setAttributes({
-          x: 0,
-          y: maxHeight - this._pagerComponent.AABBBounds.height()
-        });else {
-          const position = pager && pager.position || "middle";
-          if (this._pagerComponent.setTotal(totalPage), isHorizontal) {
-            let y;
-            y = "start" === position ? renderStartY : "end" === position ? renderStartY + compSize - this._pagerComponent.AABBBounds.height() / 2 : renderStartY + compSize / 2 - this._pagerComponent.AABBBounds.height() / 2, this._pagerComponent.setAttributes({
-              x: contentSize,
-              y: y
-            });
-          } else {
-            let x;
-            x = "start" === position ? 0 : "end" === position ? compSize - this._pagerComponent.AABBBounds.width() : (compSize - this._pagerComponent.AABBBounds.width()) / 2, this._pagerComponent.setAttributes({
-              x: x,
-              y: maxHeight - this._pagerComponent.AABBBounds.height()
-            });
-          }
+            totalPage: totalPage,
+            isHorizontal: isHorizontal
+          } = this._itemContext,
+          position = pager && pager.position || "middle";
+        if (this._pagerComponent.setTotal(totalPage), isHorizontal) {
+          let y;
+          y = "start" === position ? renderStartY : "end" === position ? renderStartY + compHeight - this._pagerComponent.AABBBounds.height() / 2 : renderStartY + compHeight / 2 - this._pagerComponent.AABBBounds.height() / 2, this._pagerComponent.setAttributes({
+            x: contentWidth,
+            y: y
+          });
+        } else {
+          let x;
+          x = "start" === position ? 0 : "end" === position ? compWidth - this._pagerComponent.AABBBounds.width() : (compWidth - this._pagerComponent.AABBBounds.width()) / 2, this._pagerComponent.setAttributes({
+            x: x,
+            y: maxHeight - this._pagerComponent.AABBBounds.height()
+          });
         }
       }
-      _bindEventsOfPager(isScrollbar, isHorizontal, compSize, spaceSize) {
+      _updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY) {
+        const {
+          currentPage: currentPage,
+          totalPage: totalPage,
+          isHorizontal: isHorizontal
+        } = this._itemContext;
+        this._pagerComponent.setScrollRange([(currentPage - 1) / totalPage, currentPage / totalPage]), isHorizontal ? this._pagerComponent.setAttributes({
+          x: 0,
+          y: renderStartY + contentHeight
+        }) : this._pagerComponent.setAttributes({
+          x: contentWidth,
+          y: renderStartY
+        });
+      }
+      _bindEventsOfPager(pageSize, channel) {
         const pager = this.attribute.pager || {},
           {
             animation = !0,
             animationDuration = 450,
             animationEasing = "quadIn"
           } = pager,
-          pageParser = isScrollbar ? e => {
+          pageParser = this._itemContext.isScrollbar ? e => {
             const {
               value: value
             } = e.detail;
@@ -39535,16 +39732,14 @@
                 const newTotalPage = Math.ceil(this._itemContext.pages / this._itemContext.maxPages);
                 this._itemContext.totalPage = newTotalPage, this._pagerComponent.setScrollRange([(newPage - 1) / newTotalPage, newPage / newTotalPage]);
               }
-              animation ? this._itemsContainer.animate().to(isHorizontal ? {
-                y: -(newPage - 1) * (compSize + spaceSize)
-              } : {
-                x: -(newPage - 1) * (compSize + spaceSize)
-              }, animationDuration, animationEasing) : isHorizontal ? this._itemsContainer.setAttribute("y", -(newPage - 1) * (compSize + spaceSize)) : this._itemsContainer.setAttribute("x", -(newPage - 1) * (compSize + spaceSize));
+              animation ? this._itemsContainer.animate().to({
+                [channel]: -(newPage - 1) * pageSize
+              }, animationDuration, animationEasing) : this._itemsContainer.setAttribute(channel, -(newPage - 1) * pageSize);
             }
           };
-        isScrollbar ? (this._pagerComponent.addEventListener("scrollDrag", onPaging), this._pagerComponent.addEventListener("scrollUp", onPaging)) : (this._pagerComponent.addEventListener("toPrev", onPaging), this._pagerComponent.addEventListener("toNext", onPaging));
+        this._itemContext.isScrollbar ? (this._pagerComponent.addEventListener("scrollDrag", onPaging), this._pagerComponent.addEventListener("scrollUp", onPaging)) : (this._pagerComponent.addEventListener("toPrev", onPaging), this._pagerComponent.addEventListener("toNext", onPaging));
       }
-      _renderPagerComponent(isHorizontal) {
+      _renderPager() {
         const renderStartY = this._title ? this._title.AABBBounds.height() + get$1(this.attribute, "title.space", 8) : 0,
           {
             maxWidth: maxWidth,
@@ -39564,51 +39759,105 @@
             defaultCurrent = 1
           } = pager,
           compStyle = __rest(pager, ["space", "defaultCurrent"]),
-          isScrollbar = "scrollbar" === pager.type;
+          {
+            isHorizontal: isHorizontal
+          } = this._itemContext;
         let comp,
-          compSize = 0,
-          contentSize = 0,
+          compWidth = 0,
+          compHeight = 0,
+          contentWidth = 0,
+          contentHeight = 0,
           startX = 0,
           startY = 0,
           pages = 1;
         if (isHorizontal) {
-          if (compSize = (maxRow - 1) * spaceRow + this._itemHeight * maxRow, comp = this._createPager(isScrollbar, isHorizontal, compStyle, compSize), this._pagerComponent = comp, this._innerView.add(comp), contentSize = maxWidth - comp.AABBBounds.width() - pagerSpace, contentSize <= 0) return this._innerView.removeChild(comp), !1;
+          if (compHeight = (maxRow - 1) * spaceRow + this._itemHeight * maxRow, compWidth = maxWidth, comp = this._createPager(compStyle), this._pagerComponent = comp, this._innerView.add(comp), contentWidth = maxWidth - comp.AABBBounds.width() - pagerSpace, contentWidth <= 0) return this._innerView.removeChild(comp), !1;
           itemsContainer.getChildren().forEach((item, index) => {
             const {
               width: width,
               height: height
             } = item.attribute;
-            contentSize < startX + width && (startX = 0, startY += height + spaceRow, pages += 1), index > 0 && item.setAttributes({
+            contentWidth < startX + width && (startX = 0, startY += height + spaceRow, pages += 1), index > 0 && item.setAttributes({
               x: startX,
               y: startY
             }), startX += spaceCol + width;
           }), this._itemContext.startX = startX, this._itemContext.startY = startY, this._itemContext.pages = pages;
           const total = Math.ceil(pages / maxRow);
-          this._itemContext.totalPage = total, this._updatePositionOfPager(isScrollbar, isHorizontal, contentSize, renderStartY, compSize);
+          this._itemContext.totalPage = total, this._updatePositionOfPager(contentWidth, contentHeight, renderStartY, compWidth, compHeight);
         } else {
-          if (compSize = this._itemMaxWidth * maxCol + (maxCol - 1) * spaceCol, comp = this._createPager(isScrollbar, isHorizontal, compStyle, compSize), this._pagerComponent = comp, this._innerView.add(comp), contentSize = maxHeight - comp.AABBBounds.height() - pagerSpace - renderStartY, contentSize <= 0) return this._innerView.removeChild(comp), !1;
+          if (compWidth = this._itemMaxWidth * maxCol + (maxCol - 1) * spaceCol, compHeight = maxHeight, contentWidth = compWidth, comp = this._createPager(compStyle), this._pagerComponent = comp, this._innerView.add(comp), contentHeight = maxHeight - comp.AABBBounds.height() - pagerSpace - renderStartY, contentHeight <= 0) return this._innerView.removeChild(comp), !1;
           itemsContainer.getChildren().forEach((item, index) => {
             const {
               height: height
             } = item.attribute;
-            contentSize < startY + height && (startY = 0, startX += this._itemMaxWidth + spaceCol, pages += 1), index > 0 && item.setAttributes({
+            contentHeight < startY + height && (startY = 0, startX += this._itemMaxWidth + spaceCol, pages += 1), index > 0 && item.setAttributes({
               x: startX,
               y: startY
             }), startY += spaceRow + height;
           });
           const total = Math.ceil(pages / maxCol);
-          this._itemContext.totalPage = total, this._updatePositionOfPager(isScrollbar, isHorizontal, contentSize, renderStartY, compSize);
+          this._itemContext.totalPage = total, this._updatePositionOfPager(contentWidth, contentHeight, renderStartY, compWidth, compHeight);
+        }
+        defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("y", -(defaultCurrent - 1) * (compHeight + spaceRow)) : itemsContainer.setAttribute("x", -(defaultCurrent - 1) * (compWidth + spaceCol)));
+        const clipGroup = graphicCreator.group({
+          x: 0,
+          y: renderStartY,
+          width: isHorizontal ? contentWidth : compWidth,
+          height: isHorizontal ? compHeight : contentHeight,
+          clip: !0,
+          pickable: !1
+        });
+        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._bindEventsOfPager(isHorizontal ? compHeight + spaceRow : compWidth + spaceCol, isHorizontal ? "y" : "x"), !0;
+      }
+      _renderScrollbar() {
+        const renderStartY = this._title ? this._title.AABBBounds.height() + get$1(this.attribute, "title.space", 8) : 0,
+          {
+            maxWidth: maxWidth,
+            maxHeight: maxHeight,
+            item = {},
+            pager = {}
+          } = this.attribute,
+          {
+            spaceCol = DEFAULT_ITEM_SPACE_COL,
+            spaceRow = DEFAULT_ITEM_SPACE_ROW
+          } = item,
+          itemsContainer = this._itemsContainer,
+          {
+            space: pagerSpace = DEFAULT_PAGER_SPACE,
+            defaultCurrent = 1
+          } = pager,
+          compStyle = __rest(pager, ["space", "defaultCurrent"]),
+          {
+            isHorizontal: isHorizontal
+          } = this._itemContext;
+        let comp,
+          compSize = 0,
+          contentWidth = 0,
+          contentHeight = 0,
+          startY = 0,
+          pages = 1;
+        if (isHorizontal) compSize = maxWidth, contentWidth = maxWidth, contentHeight = this._itemHeight, comp = this._createScrollbar(compStyle, compSize), this._pagerComponent = comp, this._innerView.add(comp), this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY);else {
+          if (compSize = maxHeight, comp = this._createScrollbar(compStyle, compSize), this._pagerComponent = comp, this._innerView.add(comp), contentHeight = maxHeight - renderStartY, contentWidth = this._itemMaxWidth, contentHeight <= 0) return this._innerView.removeChild(comp), !1;
+          itemsContainer.getChildren().forEach((item, index) => {
+            const {
+              height: height
+            } = item.attribute;
+            pages = Math.floor((startY + height) / contentHeight) + 1, startY += spaceRow + height;
+          }), this._itemContext.totalPage = pages, this._itemContext.pages = pages, this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY);
         }
-        defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("y", -(defaultCurrent - 1) * (compSize + spaceRow)) : itemsContainer.setAttribute("x", -(defaultCurrent - 1) * (compSize + spaceCol)));
+        defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("x", -(defaultCurrent - 1) * (contentWidth + spaceCol)) : itemsContainer.setAttribute("y", -(defaultCurrent - 1) * (contentHeight + spaceRow)));
         const clipGroup = graphicCreator.group({
           x: 0,
           y: renderStartY,
-          width: isHorizontal ? contentSize : compSize,
-          height: isHorizontal ? compSize : contentSize,
+          width: contentWidth,
+          height: contentHeight,
           clip: !0,
           pickable: !1
         });
-        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._bindEventsOfPager(isScrollbar, isHorizontal, compSize, isHorizontal ? spaceRow : spaceCol), !0;
+        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._bindEventsOfPager(isHorizontal ? contentWidth : contentHeight, isHorizontal ? "x" : "y"), !0;
+      }
+      _renderPagerComponent() {
+        return this._itemContext.isScrollbar ? this._renderScrollbar() : this._renderPager(), !0;
       }
       _hover(legendItem, e) {
         this._lastActiveItem = legendItem;
@@ -43132,6 +43381,9 @@
           handler: this.handleReset
         }];
       }
+      getStartState() {
+        return this.options.state;
+      }
       start(element) {
         const itemKey = element;
         if (isNil$3(itemKey)) return;
@@ -43164,6 +43416,9 @@
           this.reset();
         }, this.options = Object.assign({}, ElementHighlightByLegend.defaultOptions, options), this._marks = view.getMarksBySelector(this.options.selector);
       }
+      getStartState() {
+        return this.options.highlightState;
+      }
       getEvents() {
         return [{
           type: LegendEvent.legendItemHover,
@@ -43207,6 +43462,9 @@
           (this.options.shouldReset ? this.options.shouldReset(e) : this._filterByName(e)) && this.reset();
         }, this.options = Object.assign({}, ElementHighlightByName.defaultOptions, options), this._marks = view.getMarksBySelector(this.options.selector);
       }
+      getStartState() {
+        return this.options.highlightState;
+      }
       getEvents() {
         return [{
           type: this.options.trigger,
@@ -43988,7 +44246,8 @@
             optimize: viewOptions.optimize,
             ticker: viewOptions.ticker,
             supportsTouchEvents: viewOptions.supportsTouchEvents,
-            supportsPointerEvents: viewOptions.supportsPointerEvents
+            supportsPointerEvents: viewOptions.supportsPointerEvents,
+            ReactDOM: viewOptions.ReactDOM
           });
         (null === (_b = viewOptions.options3d) || void 0 === _b ? void 0 : _b.enable) && stage.set3dOptions(viewOptions.options3d), stage.enableIncrementalAutoRender(), this._viewBox = viewOptions.viewBox, this._view.emit(exports.VGRAMMAR_HOOK_EVENT.AFTER_CREATE_VRENDER_STAGE), this._view.emit(exports.VGRAMMAR_HOOK_EVENT.BEFORE_CREATE_VRENDER_LAYER);
         const layer = null !== (_c = viewOptions.layer) && void 0 !== _c ? _c : stage.defaultLayer;
@@ -44609,10 +44868,6 @@
         return this.to;
       }
       onBind() {
-        var _a, _b;
-        this.from = null !== (_a = this.from) && void 0 !== _a ? _a : {}, this.to = null !== (_b = this.to) && void 0 !== _b ? _b : {};
-      }
-      onStart() {
         var _a;
         const excludedChannelMap = null !== (_a = this.target.constructor.NOWORK_ANIMATE_ATTR) && void 0 !== _a ? _a : NOWORK_ANIMATE_ATTR,
           excludedChannels = Object.keys(excludedChannelMap).filter(channel => 0 !== excludedChannelMap[channel]);
@@ -44624,14 +44879,22 @@
           excludedChannels.includes(k) ? (from[k] = to[k], this.from[k] = to[k]) : isNil$3(from[k]) ? from[k] = this.target.getComputedAttribute(k) : animatedChannels.push(k);
         }), this.target.animates.forEach(a => {
           a !== this.subAnimate.animate && a.preventAttrs(animatedChannels);
-        }), this.target.setAttributes(from, !1, {
-          type: AttributeUpdateType.ANIMATE_UPDATE,
-          animationState: {
-            ratio: 0,
-            end: !1
-          }
         }), this._fromAttribute = from, this._toAttribute = to;
       }
+      onStart() {
+        if (this._fromAttribute) {
+          const from = {};
+          Object.keys(this._fromAttribute).forEach(key => {
+            this.subAnimate.animate.validAttr(key) && (from[key] = this._fromAttribute[key]);
+          }), this.target.setAttributes(from, !1, {
+            type: AttributeUpdateType.ANIMATE_UPDATE,
+            animationState: {
+              ratio: 0,
+              end: !1
+            }
+          });
+        }
+      }
       onEnd() {
         if (this._toAttribute) {
           const out = {};
@@ -45304,16 +45567,9 @@
       }
       update(spec) {
         this._context = this.spec.context, this.isUpdated = !0, this.renderContext.progressive || (spec.animation && this.animate.updateConfig(spec.animation), this.animate.updateState(spec.animationState)), this.markType !== GrammarMarkType.group ? (isNil$3(spec.zIndex) || this.graphicItem.setAttribute("zIndex", spec.zIndex), isNil$3(spec.clip) || this.graphicItem.setAttribute("clip", spec.clip), isNil$3(spec.clipPath) || this.graphicItem.setAttribute("path", isArray$3(spec.clipPath) ? spec.clipPath : spec.clipPath(this.elements)), this.elementMap.forEach(element => {
-          element.updateGraphicItem({
-            interactive: spec.interactive
-          });
+          element.updateGraphicItem();
         })) : this.elementMap.forEach(element => {
-          element.updateGraphicItem({
-            clip: spec.clip,
-            zIndex: spec.zIndex,
-            interactive: spec.interactive,
-            clipPath: spec.clipPath
-          });
+          element.updateGraphicItem();
         });
       }
       evaluateJoin(data) {
@@ -45354,15 +45610,6 @@
         });
       }
       evaluateGroupEncode(elements, groupEncode, parameters) {
-        var _a;
-        if (this.markType === GrammarMarkType.group) {
-          const el = this.elements[0],
-            nextAttrs = {},
-            items = [Object.assign({}, null === (_a = el.items) || void 0 === _a ? void 0 : _a[0], {
-              nextAttrs: nextAttrs
-            })];
-          return invokeEncoderToItems(el, items, groupEncode, parameters), this._groupEncodeResult = nextAttrs, nextAttrs;
-        }
         if (!this._groupKeys || !groupEncode) return;
         const res = {};
         return this._groupKeys.forEach(key => {
@@ -45370,7 +45617,14 @@
           el && (res[key] = invokeEncoder(groupEncode, el.items && el.items[0] && el.items[0].datum, el, parameters));
         }), this._groupEncodeResult = res, res;
       }
+      getChannelsFromConfig(element) {
+        const spec = this.spec;
+        return isNil$3(spec.interactive) ? null : {
+          pickable: spec.interactive
+        };
+      }
       evaluateEncode(elements, encoders, parameters, noGroupEncode) {
+        const initAttrs = this.getChannelsFromConfig();
         if (encoders) {
           this.emit(exports.VGRAMMAR_HOOK_EVENT.BEFORE_ELEMENT_ENCODE, {
             encoders: encoders,
@@ -45378,12 +45632,12 @@
           }, this);
           const groupEncodeAttrs = noGroupEncode ? null : this.evaluateGroupEncode(elements, encoders[BuiltInEncodeNames.group], parameters);
           elements.forEach(element => {
-            this.markType === GrammarMarkType.group && groupEncodeAttrs ? element.items.forEach(item => {
-              item.nextAttrs = Object.assign(item.nextAttrs, groupEncodeAttrs);
-            }) : this.markType === GrammarMarkType.glyph && this._groupEncodeResult ? element.items.forEach(item => {
-              item.nextAttrs = Object.assign(item.nextAttrs, this._groupEncodeResult[element.groupKey]);
-            }) : (null == groupEncodeAttrs ? void 0 : groupEncodeAttrs[element.groupKey]) && !this.isCollectionMark() && element.items.forEach(item => {
-              item.nextAttrs = Object.assign(item.nextAttrs, groupEncodeAttrs[element.groupKey]);
+            this.markType === GrammarMarkType.glyph && this._groupEncodeResult ? element.items.forEach(item => {
+              item.nextAttrs = Object.assign(item.nextAttrs, initAttrs, this._groupEncodeResult[element.groupKey]);
+            }) : (null == groupEncodeAttrs ? void 0 : groupEncodeAttrs[element.groupKey]) && !this.isCollectionMark() ? element.items.forEach(item => {
+              item.nextAttrs = Object.assign(item.nextAttrs, initAttrs, groupEncodeAttrs[element.groupKey]);
+            }) : initAttrs && element.items.forEach(item => {
+              item.nextAttrs = Object.assign(item.nextAttrs, initAttrs);
             }), element.encodeItems(element.items, encoders, this._isReentered, parameters);
           }), this._isReentered = !1, this.evaluateTransform(this._getTransformsAfterEncodeItems(), elements, parameters), elements.forEach(element => {
             element.encodeGraphic(this.isCollectionMark() ? null == groupEncodeAttrs ? void 0 : groupEncodeAttrs[element.groupKey] : null);
@@ -45392,7 +45646,7 @@
             parameters: parameters
           }, this);
         } else elements.forEach(element => {
-          element.initGraphicItem();
+          element.initGraphicItem(initAttrs);
         });
       }
       addGraphicItem(attrs, groupKey, newGraphicItem) {
@@ -45562,7 +45816,8 @@
       }
       initEvent() {
         if (this._delegateEvent) {
-          this.view.renderer.stage().on("*", this._delegateEvent);
+          const stage = this.view.renderer.stage();
+          stage && stage.on("*", this._delegateEvent);
         }
       }
       releaseEvent() {
@@ -45573,7 +45828,7 @@
       }
       clear() {
         var _a;
-        super.clear(), this.transforms = null, this.elementMap = null, this.elements = null, this.graphicItem = null, this.animate = null, null === (_a = this.group) || void 0 === _a || _a.removeChild(this), this.group = null;
+        this.releaseEvent(), this.transforms = null, this.elementMap = null, this.elements = null, this.graphicItem = null, this.animate = null, null === (_a = this.group) || void 0 === _a || _a.removeChild(this), this.group = null, super.clear();
       }
       prepareRelease() {
         this.animate.stop(), this.elementMap.forEach(element => element.diffState = DiffState.exit), this._finalParameters = this.parameters();
@@ -45614,9 +45869,49 @@
           el.updateData(DefaultKey, DefaultMarkData, () => "", this.view), this.elements = [el], this.elementMap.set(DefaultKey, el);
         }
       }
+      getChannelsFromConfig(element) {
+        const spec = this.spec,
+          initAttrs = {};
+        return isNil$3(spec.clip) || (initAttrs.clip = spec.clip), isNil$3(spec.zIndex) || (initAttrs.zIndex = spec.zIndex), isNil$3(spec.clipPath) || (initAttrs.path = isFunction$1(spec.clipPath) ? spec.clipPath([element]) : spec.clipPath), isNil$3(spec.interactive) || (initAttrs.pickable = spec.interactive), initAttrs;
+      }
+      evaluateGroupEncode(elements, groupEncode, parameters) {
+        var _a;
+        const el = this.elements[0],
+          nextAttrs = {},
+          items = [Object.assign({}, null === (_a = el.items) || void 0 === _a ? void 0 : _a[0], {
+            nextAttrs: nextAttrs
+          })];
+        return invokeEncoderToItems(el, items, groupEncode, parameters), this._groupEncodeResult = nextAttrs, nextAttrs;
+      }
+      evaluateEncode(elements, encoders, parameters, noGroupEncode) {
+        const initAttrs = this.getChannelsFromConfig();
+        if (encoders) {
+          this.emit(exports.VGRAMMAR_HOOK_EVENT.BEFORE_ELEMENT_ENCODE, {
+            encoders: encoders,
+            parameters: parameters
+          }, this);
+          const groupEncodeAttrs = noGroupEncode ? null : this.evaluateGroupEncode(elements, encoders[BuiltInEncodeNames.group], parameters);
+          elements.forEach(element => {
+            element.items.forEach(item => {
+              item.nextAttrs = Object.assign(item.nextAttrs, initAttrs, groupEncodeAttrs);
+            }), element.encodeItems(element.items, encoders, this._isReentered, parameters);
+          }), this._isReentered = !1, this.evaluateTransform(this._getTransformsAfterEncodeItems(), elements, parameters), elements.forEach(element => {
+            element.encodeGraphic();
+          }), this.emit(exports.VGRAMMAR_HOOK_EVENT.AFTER_ELEMENT_ENCODE, {
+            encoders: encoders,
+            parameters: parameters
+          }, this);
+        } else elements.forEach(element => {
+          element.initGraphicItem(initAttrs);
+        });
+      }
       addGraphicItem(attrs, groupKey, newGraphicItem) {
         const graphicItem = null != newGraphicItem ? newGraphicItem : createGraphicItem(this, this.markType, attrs);
-        if (graphicItem) return this.emit(exports.VGRAMMAR_HOOK_EVENT.BEFORE_ADD_VRENDER_MARK), graphicItem.name = `${this.id() || this.markType}`, this.graphicParent.insertIntoKeepIdx(graphicItem, this.graphicIndex), this.emit(exports.VGRAMMAR_HOOK_EVENT.AFTER_ADD_VRENDER_MARK), graphicItem;
+        if (graphicItem) return this.emit(exports.VGRAMMAR_HOOK_EVENT.BEFORE_ADD_VRENDER_MARK, {
+          graphicItem: graphicItem
+        }), graphicItem.name = `${this.id() || this.markType}`, this.graphicParent.insertIntoKeepIdx(graphicItem, this.graphicIndex), this.emit(exports.VGRAMMAR_HOOK_EVENT.AFTER_ADD_VRENDER_MARK, {
+          graphicItem: graphicItem
+        }), graphicItem;
       }
     };
 
@@ -46226,10 +46521,11 @@
         }, null, !0), this) : this;
       }
       animateAddition(additionMark) {
-        return additionMark.animate.animate(), this._additionalAnimateMarks.push(additionMark), this;
+        const animate = additionMark.animate.animate();
+        return animate && animate.isAnimating() && this._additionalAnimateMarks.push(additionMark), this;
       }
       release() {
-        this._additionalAnimateMarks = [], this._view.removeEventListener(exports.VGRAMMAR_HOOK_EVENT.ALL_ANIMATION_START, this._onAnimationStart), this._view.removeEventListener(exports.VGRAMMAR_HOOK_EVENT.ALL_ANIMATION_END, this._onAnimationEnd);
+        this._additionalAnimateMarks = [], this._animations = [], this._view.removeEventListener(exports.VGRAMMAR_HOOK_EVENT.ALL_ANIMATION_START, this._onAnimationStart), this._view.removeEventListener(exports.VGRAMMAR_HOOK_EVENT.ALL_ANIMATION_END, this._onAnimationEnd), this._view = null;
       }
     }
 
@@ -46924,7 +47220,11 @@
           mode: this.mode,
           skipDefault: this.spec.skipTheme
         });
-        return this.emit(exports.VGRAMMAR_HOOK_EVENT.BEFORE_ADD_VRENDER_MARK), this.graphicParent.appendChild(graphicItem), this.emit(exports.VGRAMMAR_HOOK_EVENT.AFTER_ADD_VRENDER_MARK), graphicItem;
+        return graphicItem && (this.emit(exports.VGRAMMAR_HOOK_EVENT.BEFORE_ADD_VRENDER_MARK, {
+          graphicItem: graphicItem
+        }), this.graphicParent.appendChild(graphicItem), this.emit(exports.VGRAMMAR_HOOK_EVENT.AFTER_ADD_VRENDER_MARK, {
+          graphicItem: graphicItem
+        })), graphicItem;
       }
       join(data) {
         return super.join(data, DefaultKey);
@@ -47613,7 +47913,7 @@
       }
       release() {
         var _a, _b, _c;
-        this.releaseStageEvent(), this._unBindResizeEvent(), this.clearProgressive(), Factory$1.unregisterRuntimeTransforms(), this.animate.stop(), this.grammars.release(), this._cachedGrammars.release(), this._dataflow.release(), this._dataflow = null, null === (_b = null === (_a = this.renderer) || void 0 === _a ? void 0 : _a.release) || void 0 === _b || _b.call(_a), this.renderer = null, this._boundInteractions = null, this.removeAllListeners(), null === (_c = this._eventListeners) || void 0 === _c || _c.forEach(listener => {
+        this.removeAllInteractions(), this.releaseStageEvent(), this._unBindResizeEvent(), this.clearProgressive(), Factory$1.unregisterRuntimeTransforms(), this.animate.stop(), this.grammars.release(), this._cachedGrammars.release(), this._dataflow.release(), this._dataflow = null, null === (_b = null === (_a = this.renderer) || void 0 === _a ? void 0 : _a.release) || void 0 === _b || _b.call(_a), this.renderer = null, this._boundInteractions = null, this.removeAllListeners(), null === (_c = this._eventListeners) || void 0 === _c || _c.forEach(listener => {
           listener.source.removeEventListener(listener.type, listener.handler);
         }), this._eventListeners = null;
       }
@@ -52358,7 +52658,7 @@
             visible: true,
             style: {
                 stroke: { type: 'palette', key: 'markLineStrokeColor' },
-                fill: { type: 'palette', key: 'axisGridColor' },
+                fill: 'transparent',
                 opacity: 0.7,
                 lineDash: [2, 3]
             }
@@ -54132,11 +54432,29 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 };
                 this.dispatch(listenerParams.type, params);
             };
+            this._onDelegateInteractionEvent = (listenerParams) => {
+                const chart = this.globalInstance.getChart();
+                const event = listenerParams.event;
+                let items = null;
+                if (event.elements) {
+                    items = event.elements;
+                }
+                const params = {
+                    event: listenerParams.event,
+                    chart,
+                    items,
+                    datums: items &&
+                        items.map(item => {
+                            return item.getDatum();
+                        })
+                };
+                this.dispatch(listenerParams.type, params);
+            };
             this.globalInstance = vchart;
             this._compiler = compiler;
         }
         register(eType, handler) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             this._parseQuery(handler);
             const bubbles = this.getEventBubble(((_a = handler.filter) === null || _a === void 0 ? void 0 : _a.source) || exports.Event_Source_Type.chart);
             const listeners = this.getEventListeners(((_b = handler.filter) === null || _b === void 0 ? void 0 : _b.source) || exports.Event_Source_Type.chart);
@@ -54150,6 +54468,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._compiler.addEventListener((_d = handler.filter) === null || _d === void 0 ? void 0 : _d.source, eType, callback);
                 listeners.set(eType, callback);
             }
+            else if (this._isInteractionEvent(eType) && !listeners.has(eType)) {
+                const callback = this._onDelegateInteractionEvent.bind(this);
+                this._compiler.addEventListener((_e = handler.filter) === null || _e === void 0 ? void 0 : _e.source, eType, callback);
+                listeners.set(eType, callback);
+            }
             return this;
         }
         unregister(eType, handler) {
@@ -54378,6 +54701,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _isValidEvent(eType) {
             return BASE_EVENTS.includes(eType) || Object.values(exports.VGRAMMAR_HOOK_EVENT).includes(eType);
         }
+        _isInteractionEvent(eType) {
+            let interactionType;
+            return (eType &&
+                ((interactionType = eType.split(':')[0]), interactionType) &&
+                Factory$1.hasInteraction(interactionType));
+        }
     }
 
     function registerDataSetInstanceTransform(dataSet, name, transform) {
@@ -54745,7 +55074,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     if (this._compileChart) {
                         const region = this._compileChart.getRegionsInIds([regionCombindInteractions[key].regionId])[0];
                         if (region) {
-                            region.interaction.addVgrammarInteraction(regionCombindInteractions[key].vchartState, interaction);
+                            region.interaction.addVgrammarInteraction(interaction.getStartState(), interaction);
                         }
                     }
                 });
@@ -55354,6 +55683,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._disableTriggerEvent = false;
         }
         addVgrammarInteraction(state, i) {
+            if (!state) {
+                return;
+            }
             if (!this._vgrammarInteractions.get(state)) {
                 !this._vgrammarInteractions.set(state, [i]);
             }
@@ -57949,15 +58281,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.state.compileState(this._product, this._stateSort);
         }
         compileAnimation() {
-            var _a, _b;
+            var _a, _b, _c, _d;
             if (this._animationConfig) {
                 let stateSignal;
                 if (this.type === 'component') {
                     stateSignal = (_a = this.model.animate) === null || _a === void 0 ? void 0 : _a.getAnimationStateSignalName();
                 }
                 else {
-                    const region = this.model.getRegion();
-                    stateSignal = (_b = region.animate) === null || _b === void 0 ? void 0 : _b.getAnimationStateSignalName();
+                    const region = (_c = (_b = this.model).getRegion) === null || _c === void 0 ? void 0 : _c.call(_b);
+                    stateSignal = (_d = region === null || region === void 0 ? void 0 : region.animate) === null || _d === void 0 ? void 0 : _d.getAnimationStateSignalName();
                 }
                 this._product.animation(this._animationConfig);
                 this._product.animationState({
@@ -58434,7 +58766,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._marks;
         }
         _getDefaultStyle() {
-            const defaultStyle = Object.assign(Object.assign({}, super._getDefaultStyle()), { clip: false });
+            const defaultStyle = Object.assign({}, super._getDefaultStyle());
             return defaultStyle;
         }
         isMarkExist(mark) {
@@ -64190,7 +64522,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         registerComponentPlugin(CanvasTooltipHandler);
     };
 
-    const version = "1.10.2-alpha.3";
+    const version = "1.10.2";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -65209,6 +65541,32 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a;
             return (_a = this._viewStackData) === null || _a === void 0 ? void 0 : _a.latestData;
         }
+        _parseSelectorOfInteraction(interactionSpec, marks) {
+            if (!marks || !marks.length) {
+                return [];
+            }
+            const selector = [];
+            if (interactionSpec.markIds) {
+                marks.filter(mark => {
+                    if (interactionSpec.markIds.includes(mark.getProductId())) {
+                        selector.push(`#${mark.getProductId()}`);
+                    }
+                });
+            }
+            else if (interactionSpec.markNames) {
+                marks.forEach(mark => {
+                    if (interactionSpec.markNames.includes(mark.name)) {
+                        selector.push(`#${mark.getProductId()}`);
+                    }
+                });
+            }
+            else {
+                marks.forEach(mark => {
+                    selector.push(`#${mark.getProductId()}`);
+                });
+            }
+            return selector;
+        }
         _parseDefaultInteractionConfig(mainMarks) {
             var _a;
             if (!(mainMarks === null || mainMarks === void 0 ? void 0 : mainMarks.length)) {
@@ -65235,31 +65593,33 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             const res = [];
             if (finalHoverSpec.enable) {
-                res.push({
-                    vchartState: STATE_VALUE_ENUM.STATE_HOVER,
-                    seriesId: this.id,
-                    regionId: this._region.id,
-                    selector: mainMarks.map(mark => `#${mark.getProductId()}`),
-                    type: 'element-highlight',
-                    trigger: finalHoverSpec.trigger,
-                    triggerOff: finalHoverSpec.triggerOff,
-                    blurState: STATE_VALUE_ENUM.STATE_HOVER_REVERSE,
-                    highlightState: STATE_VALUE_ENUM.STATE_HOVER
-                });
+                const selector = this._parseSelectorOfInteraction(finalHoverSpec, mainMarks);
+                selector.length &&
+                    res.push({
+                        seriesId: this.id,
+                        regionId: this._region.id,
+                        selector,
+                        type: 'element-highlight',
+                        trigger: finalHoverSpec.trigger,
+                        triggerOff: finalHoverSpec.triggerOff,
+                        blurState: STATE_VALUE_ENUM.STATE_HOVER_REVERSE,
+                        highlightState: STATE_VALUE_ENUM.STATE_HOVER
+                    });
             }
             if (finalSelectSpec.enable) {
-                res.push({
-                    vchartState: STATE_VALUE_ENUM.STATE_SELECTED,
-                    type: 'element-select',
-                    seriesId: this.id,
-                    regionId: this._region.id,
-                    selector: mainMarks.map(mark => `#${mark.getProductId()}`),
-                    trigger: finalSelectSpec.trigger,
-                    triggerOff: ((_a = finalSelectSpec.triggerOff) !== null && _a !== void 0 ? _a : 'empty'),
-                    reverseState: STATE_VALUE_ENUM.STATE_SELECTED_REVERSE,
-                    state: STATE_VALUE_ENUM.STATE_SELECTED,
-                    isMultiple: finalSelectSpec.mode === 'multiple'
-                });
+                const selector = this._parseSelectorOfInteraction(finalSelectSpec, mainMarks);
+                selector.length &&
+                    res.push({
+                        type: 'element-select',
+                        seriesId: this.id,
+                        regionId: this._region.id,
+                        selector,
+                        trigger: finalSelectSpec.trigger,
+                        triggerOff: ((_a = finalSelectSpec.triggerOff) !== null && _a !== void 0 ? _a : 'empty'),
+                        reverseState: STATE_VALUE_ENUM.STATE_SELECTED_REVERSE,
+                        state: STATE_VALUE_ENUM.STATE_SELECTED,
+                        isMultiple: finalSelectSpec.mode === 'multiple'
+                    });
             }
             return res;
         }
@@ -65277,26 +65637,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             if (interactions && interactions.length) {
                 interactions.forEach(interaction => {
-                    const selectors = [];
-                    if (interaction.markIds) {
-                        this.getMarks().filter(mark => {
-                            if (interaction.markIds.includes(mark.getProductId())) {
-                                selectors.push(`#${mark.getProductId()}`);
-                            }
-                        });
-                    }
-                    else if (interaction.markNames) {
-                        this.getMarks().forEach(mark => {
-                            if (interaction.markNames.includes(mark.name)) {
-                                selectors.push(`#${mark.getProductId()}`);
-                            }
-                        });
-                    }
-                    else if (mainMarks === null || mainMarks === void 0 ? void 0 : mainMarks.length) {
-                        mainMarks.forEach(mark => {
-                            selectors.push(`#${mark.getProductId()}`);
-                        });
-                    }
+                    const selectors = this._parseSelectorOfInteraction(interaction, this.getMarks());
                     if (selectors.length) {
                         compiler.addInteraction(Object.assign(Object.assign({}, interaction), { selector: selectors, seriesId: this.id, regionId: this._region.id }));
                     }
@@ -94395,7 +94736,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a;
             const series = this._getSeries();
             if ((_a = series.getSpec().totalLabel) === null || _a === void 0 ? void 0 : _a.visible) {
-                const mark = series.getMarksInType(["rect", "symbol"])[0];
+                const mark = series.getMarkInName(series.type);
                 const textMark = this._createMark({ type: "label", name: `${mark.name}-total-label` });
                 this._baseMark = mark;
                 this._textMark = textMark;
@@ -95262,11 +95603,24 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.initMarks();
             this.initEvent();
         }
+        getMarkAttributeContext() {
+            return this._markAttributeContext;
+        }
+        _buildMarkAttributeContext() {
+            this._markAttributeContext = {
+                vchart: this._option.globalInstance,
+                globalScale: (key, value) => {
+                    var _a;
+                    return (_a = this._option.globalScale.getScale(key)) === null || _a === void 0 ? void 0 : _a.scale(value);
+                }
+            };
+        }
         initMarks() {
             if (!this._spec) {
                 return;
             }
             const series = this._option && this._option.getAllSeries();
+            const hasAnimation = this._option.animation !== false;
             const depend = [];
             if (series && series.length) {
                 series.forEach(s => {
@@ -95279,7 +95633,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 });
             }
             this._spec.forEach((m, i) => {
-                this._createExtensionMark(m, null, `${PREFIX}_series_${this.id}_extensionMark`, i, { depend });
+                this._createExtensionMark(m, null, `${PREFIX}_series_${this.id}_extensionMark`, i, { depend, hasAnimation });
             });
         }
         _createExtensionMark(spec, parentMark, namePrefix, index, options) {
@@ -95296,6 +95650,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (!mark) {
                 return;
             }
+            if (options.hasAnimation) {
+                const config = animationConfig({}, userAnimationConfig(spec.type, spec, this._markAttributeContext));
+                mark.setAnimationConfig(config);
+            }
             if (options.depend && options.depend.length) {
                 mark.setDepend(...options.depend);
             }