@visactor/vchart 1.12.10 → 1.12.12-alpha.0

package/build/index.js

@@ -9579,6 +9579,14 @@
         return data;
       }
       _clipTextEnd(text, options, width, leftIdx, rightIdx) {
+        if (leftIdx === rightIdx) {
+          Logger.getInstance().warn(`【_clipTextEnd】不应该走到这里${text}, ${leftIdx}, ${rightIdx}`);
+          const subText = text.substring(0, rightIdx + 1);
+          return {
+            str: subText,
+            width: this.measureTextWidth(subText, options)
+          };
+        }
         const middleIdx = Math.floor((leftIdx + rightIdx) / 2),
           subText = text.substring(0, middleIdx + 1),
           strWidth = this.measureTextWidth(subText, options);
@@ -9612,7 +9620,7 @@
       }
       _clipTextStart(text, options, width, leftIdx, rightIdx) {
         const middleIdx = Math.ceil((leftIdx + rightIdx) / 2),
-          subText = text.substring(middleIdx - 1, text.length - 1),
+          subText = text.substring(middleIdx - 1, text.length),
           strWidth = this.measureTextWidth(subText, options);
         let length;
         if (strWidth > width) {
@@ -9620,18 +9628,18 @@
             str: "",
             width: 0
           };
-          const str = text.substring(middleIdx, text.length - 1);
+          const str = text.substring(middleIdx, text.length);
           return length = this.measureTextWidth(str, options), length <= width ? {
             str: str,
             width: length
-          } : this._clipTextStart(text, options, width, middleIdx, text.length - 1);
+          } : this._clipTextStart(text, options, width, middleIdx, text.length);
         }
         if (strWidth < width) {
           if (middleIdx <= 0) return {
             str: text,
             width: this.measureTextWidth(text, options)
           };
-          const str = text.substring(middleIdx - 2, text.length - 1);
+          const str = text.substring(middleIdx - 2, text.length);
           return length = this.measureTextWidth(str, options), length >= width ? {
             str: subText,
             width: strWidth
@@ -11213,7 +11221,7 @@
               timeStamp: now
             });
             const clickHistory = trackingData.clicksByButton[from.button];
-            clickHistory.target === clickEvent.target && now - clickHistory.timeStamp < (null !== (_a = this._config.clickInterval) && void 0 !== _a ? _a : 200) ? ++clickHistory.clickCount : clickHistory.clickCount = 1, clickHistory.target = clickEvent.target, clickHistory.timeStamp = now, clickEvent.detail = clickHistory.clickCount, isMouseLike(clickEvent.pointerType) ? (this.dispatchEvent(clickEvent, "click"), 2 === clickHistory.clickCount && this.dispatchEvent(clickEvent, "dblclick")) : "touch" === clickEvent.pointerType && (this.dispatchEvent(clickEvent, "tap"), 2 === clickHistory.clickCount && this.dispatchEvent(clickEvent, "dbltap")), this.dispatchEvent(clickEvent, "pointertap"), this.freeEvent(clickEvent);
+            clickHistory.target === clickEvent.target && now - clickHistory.timeStamp < (null !== (_a = this._config.clickInterval) && void 0 !== _a ? _a : 200) ? ++clickHistory.clickCount : clickHistory.clickCount = 1, clickHistory.target = clickEvent.target, clickHistory.timeStamp = now, clickEvent.detail = clickHistory.clickCount, isMouseLike(clickEvent.pointerType) ? (this.dispatchEvent(clickEvent, "click"), 2 === clickHistory.clickCount && this.dispatchEvent(clickEvent, "dblclick")) : "touch" === clickEvent.pointerType && this._config.supportsTouchEvents && (this.dispatchEvent(clickEvent, "tap"), 2 === clickHistory.clickCount && this.dispatchEvent(clickEvent, "dbltap")), this.dispatchEvent(clickEvent, "pointertap"), this.freeEvent(clickEvent);
           }
           this.freeEvent(e);
         }, this.onPointerUpOutside = (from, target) => {
@@ -11430,7 +11438,8 @@
           supportsPointerEvents = global.supportsPointerEvents
         } = params;
         this.manager = new EventManager(rootNode, {
-          clickInterval: clickInterval
+          clickInterval: clickInterval,
+          supportsTouchEvents: supportsTouchEvents
         }), this.globalObj = global, this.supportsPointerEvents = supportsPointerEvents, this.supportsTouchEvents = supportsTouchEvents, this.supportsMouseEvents = global.supportsMouseEvents, this.applyStyles = global.applyStyles, this.autoPreventDefault = autoPreventDefault, this.eventsAdded = !1, this.rootPointerEvent = new FederatedPointerEvent(), this.rootWheelEvent = new FederatedWheelEvent(), this.cursorStyles = {
           default: "inherit",
           pointer: "pointer"
@@ -22750,6 +22759,42 @@
       }
     }
 
+    class AutoRefreshPlugin {
+      constructor() {
+        this.name = "AutoRefreshPlugin", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid, this.handleChange = graphic => {
+          graphic.glyphHost && (graphic = graphic.glyphHost), graphic.stage === this.pluginService.stage && null != graphic.stage && graphic.stage.renderNextFrame();
+        };
+      }
+      activate(context) {
+        this.pluginService = context, this.dpr = application.global.devicePixelRatio, this.refresh();
+      }
+      refresh() {
+        this._refreshByMediaQuery() || this._refreshByRaf();
+      }
+      _refreshByRaf() {
+        const raf = application.global.getRequestAnimationFrame();
+        this.rafId = raf(() => {
+          application.global.devicePixelRatio !== this.dpr && (this.dpr = application.global.devicePixelRatio, this.pluginService.stage.setDpr(this.dpr, !0)), this.refresh();
+        });
+      }
+      _refreshByMediaQuery() {
+        try {
+          const mqString = `(resolution: ${window.devicePixelRatio}dppx)`,
+            updatePixelRatio = () => {
+              window.devicePixelRatio !== this.dpr && (this.dpr = window.devicePixelRatio, this.pluginService.stage.setDpr(this.dpr, !0));
+            };
+          matchMedia(mqString).addEventListener("change", updatePixelRatio);
+        } catch (err) {
+          return !1;
+        }
+        return !0;
+      }
+      deactivate(context) {
+        const craf = application.global.getCancelAnimationFrame();
+        craf && this.rafId && craf(this.rafId);
+      }
+    }
+
     class IncrementalAutoRenderPlugin {
       constructor() {
         this.name = "IncrementalAutoRenderPlugin", this.activeEvent = "onRegister", this.nextFrameRenderGroupSet = new Set(), this.willNextFrameRender = !1, this.nextUserParams = {}, this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid;
@@ -22942,7 +22987,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.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({
+        })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !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
         });
       }
@@ -23077,6 +23122,14 @@
           this.pluginService.unRegister(plugin);
         }));
       }
+      enableAutoRefresh() {
+        this.autoRefresh || (this.autoRefresh = !0, this.pluginService.register(new AutoRefreshPlugin()));
+      }
+      disableAutoRefresh() {
+        this.autoRefresh && (this.autoRefresh = !1, this.pluginService.findPluginsByName("AutoRefreshPlugin").forEach(plugin => {
+          this.pluginService.unRegister(plugin);
+        }));
+      }
       enableIncrementalAutoRender() {
         this.increaseAutoRender || (this.increaseAutoRender = !0, this.pluginService.register(new IncrementalAutoRenderPlugin()));
       }
@@ -24830,7 +24883,7 @@
         const result = [];
         for (let index = 0; index < domains.length; index++) {
             const domain = domains[index];
-            if (index === 0) {
+            if (index === 0 || domain[0] !== result[result.length - 1]) {
                 result.push(domain[0]);
             }
             result.push(domain[1]);
@@ -25375,7 +25428,7 @@
         let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         super(), this.cachedEvents = [], this.startPoints = [], this.processEvent = {}, this.throttleTimer = 0, this.emitThrottles = [], this.lastTapTarget = null, this.onStart = ev => {
-          this.reset(), this.startTime = clock.now();
+          this.cachedEvents = [], this.startPoints = [], this.reset(), this.startTime = clock.now();
           const {
             cachedEvents: cachedEvents,
             startPoints: startPoints
@@ -25395,7 +25448,7 @@
           if (1 !== startPoints.length) this.startDistance = calcDistance(startPoints[0], startPoints[1]), this.center = getCenter([startPoints[0], startPoints[1]]);else {
             const event = cachedEvents[0];
             this.pressTimeout = setTimeout(() => {
-              event.direction = "none", event.deltaX = 0, event.deltaY = 0, event.points = startPoints, this.triggerStartEvent("press", event), this.triggerEvent("press", event), this.eventType = "press", this.direction = "none";
+              event.direction = "none", event.deltaX = 0, event.deltaY = 0, event.points = startPoints, this.triggerStartEvent("press", event), this.triggerEvent("press", event), this.eventType = "press", this.direction = "none", this.pressTimeout = null;
             }, this.config.press.time);
           }
         }, this.onMove = ev => {
@@ -25458,10 +25511,10 @@
                   lastMovePoint = this.lastMovePoint || startPoints[0],
                   distance = calcDistance(prevMovePoint, lastMovePoint),
                   velocity = distance / intervalTime;
-                velocity > this.config.swipe.velocity && distance > this.config.swipe.threshold && (endEvent.velocity = velocity, endEvent.direction = calcDirection(prevMovePoint, lastMovePoint), this.triggerEvent("swipe", endEvent));
+                if (velocity > this.config.swipe.velocity && distance > this.config.swipe.threshold) return endEvent.velocity = velocity, endEvent.direction = calcDirection(prevMovePoint, lastMovePoint), this.triggerEvent("swipe", endEvent), this.cachedEvents = [], this.startPoints = [], void this.reset();
               }
             }
-            now - this.lastTapTime < this.config.tap.interval && ev.target === this.lastTapTarget ? this.tapCount++ : this.tapCount = 1, this.lastTapTime = now, this.lastTapTarget = ev.target, 1 === this.tapCount ? this.triggerEvent("tap", endEvent) : 2 === this.tapCount && (this.triggerEvent("doubletap", endEvent), this.tapCount = 0);
+            now - this.startTime < this.config.press.time && (now - this.lastTapTime < this.config.tap.interval && ev.target === this.lastTapTarget ? this.tapCount++ : this.tapCount = 1, this.lastTapTime = now, this.lastTapTarget = ev.target, 1 === this.tapCount ? this.triggerEvent("tap", endEvent) : 2 === this.tapCount && (this.triggerEvent("doubletap", endEvent), this.tapCount = 0));
           }
           for (let i = 0, len = cachedEvents.length; i < len; i++) if (cachedEvents[i].pointerId === endEvent.pointerId) {
             cachedEvents.splice(i, 1), startPoints.splice(i, 1);
@@ -25537,6 +25590,7 @@
           emitThrottles: emitThrottles
         } = this;
         throttleTimer || (this.throttleTimer = application.global.getRequestAnimationFrame()(() => {
+          application.global.getCancelAnimationFrame()(this.throttleTimer), this.throttleTimer = null;
           for (let i = 0, len = emitThrottles.length; i < len; i++) {
             const {
               type: type,
@@ -25544,7 +25598,7 @@
             } = emitThrottles[i];
             this.emitEvent(type, ev);
           }
-          this.throttleTimer = 0, this.emitThrottles.length = 0;
+          this.emitThrottles.length = 0;
         }));
       }
       triggerStartEvent(type, ev) {
@@ -32576,7 +32630,7 @@
         return listener;
       }
       _smartInvert(labels) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
         const option = isObject$2(this.attribute.smartInvert) ? this.attribute.smartInvert : {},
           {
             textType: textType,
@@ -32593,10 +32647,14 @@
         if ("null" !== fillStrategy || "null" !== strokeStrategy) for (let i = 0; i < labels.length; i++) {
           const label = labels[i];
           if (!label) continue;
-          const baseMark = this.getRelatedGraphic(label.attribute),
-            backgroundColor = baseMark.attribute.fill,
-            foregroundColor = label.attribute.fill,
-            invertColor = labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors, mode),
+          const baseMark = this.getRelatedGraphic(label.attribute);
+          let backgroundColor = baseMark.attribute.fill,
+            foregroundColor = label.attribute.fill;
+          if (isObject$2(backgroundColor) && backgroundColor.gradient) {
+            const firstStopColor = null === (_g = null === (_f = backgroundColor.stops) || void 0 === _f ? void 0 : _f[0]) || void 0 === _g ? void 0 : _g.color;
+            firstStopColor && (backgroundColor = firstStopColor, foregroundColor = firstStopColor);
+          }
+          const invertColor = labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors, mode),
             similarColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor,
             isInside = this._canPlaceInside(label.AABBBounds, baseMark.AABBBounds),
             isIntersect = !isInside && label.AABBBounds && baseMark.AABBBounds && baseMark.AABBBounds.intersects(label.AABBBounds);
@@ -39852,20 +39910,20 @@
       render() {
         this.removeAllChild(!0);
         const {
-            interactive = !0,
-            title: title,
-            padding = 0
-          } = this.attribute,
-          parsedPadding = normalizePadding$1(padding),
-          innerView = graphicCreator.group({
-            x: parsedPadding[3],
-            y: parsedPadding[0],
-            pickable: interactive,
-            childrenPickable: interactive
-          });
+          interactive = !0,
+          title: title,
+          padding = 0
+        } = this.attribute;
+        this._parsedPadding = normalizePadding$1(padding);
+        const innerView = graphicCreator.group({
+          x: this._parsedPadding[3],
+          y: this._parsedPadding[0],
+          pickable: interactive,
+          childrenPickable: interactive
+        });
         innerView.name = LEGEND_ELEMENT_NAME.innerView, this.add(innerView), this._innerView = innerView, (null == title ? void 0 : title.visible) && this._renderTitle(title), this._renderContent(), this._adjustLayout(), interactive && this._bindEvents();
         const viewBounds = this._innerView.AABBBounds;
-        this.attribute.width = viewBounds.width() + parsedPadding[1] + parsedPadding[3], this.attribute.height = viewBounds.height() + parsedPadding[0] + parsedPadding[2];
+        this.attribute.width = viewBounds.width() + this._parsedPadding[1] + this._parsedPadding[3], this.attribute.height = viewBounds.height() + this._parsedPadding[0] + this._parsedPadding[2];
       }
       _renderTitle(title) {
         const {
@@ -39941,7 +39999,7 @@
     loadDiscreteLegendComponent();
     let DiscreteLegend$1 = class DiscreteLegend extends LegendBase {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, DiscreteLegend.defaultAttributes, attributes)), this.name = "discreteLegend", this._itemsContainer = null, this._itemHeightByUser = void 0, this._itemHeight = 0, this._itemMaxWidth = 0, this._onHover = e => {
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, DiscreteLegend.defaultAttributes, attributes)), this.name = "discreteLegend", this._itemsContainer = null, this._itemHeightByUser = void 0, this._itemHeight = 0, this._itemMaxWidth = 0, this._contentMaxHeight = 0, this._onHover = e => {
           const target = e.target;
           if (target && target.name && target.name.startsWith(LEGEND_ELEMENT_NAME.item)) {
             const legendItem = target.delegate;
@@ -40004,7 +40062,6 @@
             maxCol = 1,
             maxRow = 2,
             maxWidth: maxWidth,
-            maxHeight: maxHeight,
             defaultSelected: defaultSelected,
             lazyload: lazyload,
             autoPage: autoPage
@@ -40020,7 +40077,8 @@
             startIndex: startIndex,
             isScrollbar: isScrollbar
           } = this._itemContext,
-          maxPages = isScrollbar ? 1 : isHorizontal ? maxRow : maxCol;
+          maxPages = isScrollbar ? 1 : isHorizontal ? maxRow : maxCol,
+          maxHeight = this._contentMaxHeight;
         let item,
           {
             doWrap: doWrap,
@@ -40052,11 +40110,12 @@
           item = {},
           items: items,
           reversed: reversed,
-          maxWidth: maxWidth
+          maxWidth: maxWidth,
+          maxHeight: maxHeight
         } = this.attribute;
         if (!1 === item.visible || isEmpty(items)) return;
         let legendItems = items;
-        reversed && (legendItems = null == items ? void 0 : items.reverse());
+        reversed && (legendItems = null == items ? void 0 : items.reverse()), this._contentMaxHeight = Math.max(0, maxHeight - this._parsedPadding[0] - this._parsedPadding[2]);
         const itemsContainer = graphicCreator.group({
           x: 0,
           y: 0
@@ -40087,7 +40146,8 @@
           items: legendItems,
           isHorizontal: isHorizontal,
           totalPage: 1 / 0,
-          isScrollbar: pager && "scrollbar" === pager.type
+          isScrollbar: pager && "scrollbar" === pager.type,
+          clipContainer: void 0
         }, this._itemContext = this._renderItems();
         let pagerRendered = !1;
         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));
@@ -40099,7 +40159,15 @@
           hover = !0,
           select = !0
         } = this.attribute;
-        hover && (this._itemsContainer.addEventListener("pointermove", this._onHover), this._itemsContainer.addEventListener("pointerleave", this._onUnHover)), select && this._itemsContainer.addEventListener("pointerdown", this._onClick);
+        if (hover) {
+          let trigger = "pointermove",
+            triggerOff = "pointerleave";
+          isObject$2(hover) && (hover.trigger && (trigger = hover.trigger), hover.triggerOff && (triggerOff = hover.triggerOff)), this._itemsContainer.addEventListener(trigger, this._onHover), this._itemsContainer.addEventListener(triggerOff, this._onUnHover);
+        }
+        if (select) {
+          let trigger = "pointerdown";
+          isObject$2(select) && select.trigger && (trigger = select.trigger), this._itemsContainer.addEventListener(trigger, this._onClick);
+        }
       }
       _autoEllipsis(autoEllipsisStrategy, layoutWidth, labelShape, valueShape) {
         var _a, _b;
@@ -40274,12 +40342,12 @@
           direction: "horizontal",
           disableTriggerEvent: disableTriggerEvent,
           range: [0, .5],
-          height: 12
+          height: !1 === compStyle.visible ? 0 : 12
         }, compStyle), {
           width: compSize
         })) : new ScrollBar$1(Object.assign(Object.assign({
           direction: "vertical",
-          width: 12,
+          width: !1 === compStyle.visible ? 0 : 12,
           range: [0, .5]
         }, compStyle), {
           height: compSize,
@@ -40309,13 +40377,24 @@
           });
         }
       }
+      _computeScrollbarDelta() {
+        const {
+            isHorizontal: isHorizontal,
+            clipContainer: clipContainer
+          } = this._itemContext,
+          itemContainerBounds = this._itemsContainer.AABBBounds,
+          clipContainerBounds = clipContainer.AABBBounds;
+        let delta, innerViewSize;
+        return isHorizontal ? (innerViewSize = clipContainerBounds.width(), delta = innerViewSize / itemContainerBounds.width()) : (innerViewSize = clipContainerBounds.height(), delta = innerViewSize / itemContainerBounds.height()), delta;
+      }
       _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({
+            isHorizontal: isHorizontal,
+            currentPage: currentPage,
+            totalPage: totalPage
+          } = this._itemContext,
+          start = (currentPage - 1) / totalPage;
+        this._pagerComponent.setScrollRange([start, start + this._computeScrollbarDelta()]), isHorizontal ? this._pagerComponent.setAttributes({
           x: 0,
           y: renderStartY + contentHeight
         }) : this._pagerComponent.setAttributes({
@@ -40335,7 +40414,7 @@
               value: value
             } = e.detail;
             let newPage;
-            return 0 === value[0] ? newPage = 1 : 1 === value[1] ? newPage = this._itemContext.totalPage : (newPage = value[0] * this._itemContext.totalPage, pager.scrollByPosition ? newPage += 1 : newPage = Math.floor(newPage) + 1), newPage;
+            return newPage = 0 === value[0] ? 1 : 1 === value[1] ? this._itemContext.totalPage : value[0] * this._itemContext.totalPage + 1, newPage;
           } : e => e.detail.current,
           onScroll = e => {
             const scrollComponent = this._pagerComponent,
@@ -40348,7 +40427,7 @@
                 height: height
               } = scrollComponent.getSliderRenderBounds(),
               currentScrollValue = "vertical" === direction ? e.deltaY / height : e.deltaX / width;
-            scrollComponent.setScrollRange([preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue], !0);
+            scrollComponent.setScrollRange([preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue], !0), this.updateScrollMask();
           },
           onPaging = e => {
             const newPage = pageParser(e);
@@ -40356,9 +40435,21 @@
               if (this._itemContext.currentPage = newPage, this._itemContext && this._itemContext.startIndex < this._itemContext.items.length) {
                 this._renderItems();
                 const newTotalPage = Math.ceil(this._itemContext.pages / this._itemContext.maxPages);
-                this._itemContext.totalPage = newTotalPage, this._pagerComponent.setScrollRange([(newPage - 1) / newTotalPage, newPage / newTotalPage]);
+                if (this._itemContext.totalPage = newTotalPage, this._itemContext.isScrollbar && this._pagerComponent) {
+                  const newDelta = this._computeScrollbarDelta(),
+                    [start] = this._pagerComponent.getScrollRange();
+                  this._pagerComponent.setScrollRange([start, start + newDelta]);
+                }
               }
-              animation ? this._itemsContainer.animate().to({
+              if (this._itemContext.isScrollbar) {
+                const [start] = this._pagerComponent.getScrollRange();
+                let containerSize;
+                containerSize = this._itemContext.isHorizontal ? this._itemsContainer.AABBBounds.width() : this._itemsContainer.AABBBounds.height();
+                const startOffset = containerSize * start;
+                this.updateScrollMask(), animation ? this._itemsContainer.animate().to({
+                  [channel]: -startOffset
+                }, animationDuration, animationEasing) : this._itemsContainer.setAttribute(channel, -startOffset);
+              } else animation ? this._itemsContainer.animate().to({
                 [channel]: -(newPage - 1) * pageSize
               }, animationDuration, animationEasing) : this._itemsContainer.setAttribute(channel, -(newPage - 1) * pageSize);
             }
@@ -40374,7 +40465,6 @@
         const renderStartY = this._title ? this._title.AABBBounds.height() + get$1(this.attribute, "title.space", 8) : 0,
           {
             maxWidth: maxWidth,
-            maxHeight: maxHeight,
             maxCol = 1,
             maxRow = 2,
             item = {},
@@ -40392,7 +40482,8 @@
           compStyle = __rest$1(pager, ["space", "defaultCurrent"]),
           {
             isHorizontal: isHorizontal
-          } = this._itemContext;
+          } = this._itemContext,
+          maxHeight = this._contentMaxHeight;
         let comp,
           compWidth = 0,
           compHeight = 0,
@@ -40438,13 +40529,13 @@
           clip: !0,
           pickable: !1
         });
-        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._bindEventsOfPager(isHorizontal ? compHeight + spaceRow : compWidth + spaceCol, isHorizontal ? "y" : "x"), !0;
+        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._itemContext.clipContainer = clipGroup, this._bindEventsOfPager(isHorizontal ? compHeight + spaceRow : compWidth + spaceCol, isHorizontal ? "y" : "x"), !0;
       }
       _renderScrollbar() {
+        var _a;
         const renderStartY = this._title ? this._title.AABBBounds.height() + get$1(this.attribute, "title.space", 8) : 0,
           {
             maxWidth: maxWidth,
-            maxHeight: maxHeight,
             item = {},
             pager = {}
           } = this.attribute,
@@ -40460,15 +40551,15 @@
           compStyle = __rest$1(pager, ["space", "defaultCurrent"]),
           {
             isHorizontal: isHorizontal
-          } = this._itemContext;
+          } = this._itemContext,
+          maxHeight = this._contentMaxHeight;
         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;
+        if (isHorizontal) contentWidth = maxWidth, contentHeight = this._itemHeight, comp = this._createScrollbar(compStyle, contentWidth), this._pagerComponent = comp, this._innerView.add(comp);else {
+          if (contentHeight = maxHeight - renderStartY, contentWidth = this._itemMaxWidth, comp = this._createScrollbar(compStyle, contentHeight), this._pagerComponent = comp, this._innerView.add(comp), contentHeight <= 0) return this._innerView.removeChild(comp), !1;
           const items = itemsContainer.getChildren(),
             itemsHeightArr = items.map(item => item.attribute.height);
           if (1 === itemsHeightArr.length || itemsHeightArr.every(entry => entry === itemsHeightArr[0])) {
@@ -40484,9 +40575,15 @@
               preStartY = startY;
             pages = Math.floor((startY + height) / contentHeight) + 1, startY += spaceRow + height, prePages !== pages && index === itemsContainer.getChildren().length - 1 && startY - contentHeight >= 1 / 3 * height && (contentHeight = preStartY + height, pages -= 1);
           });
-          this._itemContext.totalPage = pages, this._itemContext.pages = pages, this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY);
+          this._itemContext.totalPage = pages, this._itemContext.pages = pages;
+        }
+        if (defaultCurrent > 1) if (isHorizontal) {
+          const maxOffset = this._itemsContainer.AABBBounds.width() - contentWidth;
+          itemsContainer.setAttribute("x", -Math.min((defaultCurrent - 1) * (contentWidth + spaceCol), maxOffset));
+        } else {
+          const maxOffset = this._itemsContainer.AABBBounds.height() - contentHeight;
+          itemsContainer.setAttribute("y", -Math.min((defaultCurrent - 1) * (contentHeight + spaceRow), maxOffset));
         }
-        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,
@@ -40495,7 +40592,64 @@
           clip: !0,
           pickable: !1
         });
-        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._bindEventsOfPager(isHorizontal ? contentWidth : contentHeight, isHorizontal ? "x" : "y"), !0;
+        return clipGroup.add(itemsContainer), this._innerView.add(clipGroup), this._itemContext.clipContainer = clipGroup, this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY), (null === (_a = pager.scrollMask) || void 0 === _a ? void 0 : _a.visible) && this.renderScrollMask(clipGroup), this._bindEventsOfPager(isHorizontal ? contentWidth : contentHeight, isHorizontal ? "x" : "y"), !0;
+      }
+      renderScrollMask(clipGroup) {
+        const {
+            scrollMask = {}
+          } = this.attribute.pager,
+          {
+            visible = !0,
+            gradientLength = 16,
+            gradientStops: gradientStops
+          } = scrollMask;
+        if (!visible || !gradientStops) return;
+        const width = clipGroup.AABBBounds.width(),
+          height = clipGroup.AABBBounds.height(),
+          totalLength = this._itemContext.isHorizontal ? width : height,
+          startStops = gradientStops.map(stop => ({
+            offset: gradientLength * stop.offset / totalLength,
+            color: stop.color
+          })),
+          endStops = gradientStops.map(stop => ({
+            offset: (totalLength - gradientLength * stop.offset) / totalLength,
+            color: stop.color
+          })),
+          mask = graphicCreator.rect({
+            x: 0,
+            y: 0,
+            width: width,
+            height: height
+          });
+        this._scrollMask = mask, this._scrollMaskContext = {
+          startStops: startStops,
+          endStops: endStops
+        }, this.updateScrollMask(), clipGroup.add(mask);
+      }
+      updateScrollMask() {
+        if (!this._scrollMask || !this._pagerComponent) return;
+        if (!this._itemContext.isScrollbar) return;
+        const [start, end] = this._pagerComponent.getScrollRange(),
+          stops = [];
+        isNumberClose(clamp$1(end, 0, 1), 1) || stops.push(...this._scrollMaskContext.endStops), isNumberClose(clamp$1(start, 0, 1), 0) || stops.push(...this._scrollMaskContext.startStops), stops.length && (this._itemContext.isHorizontal ? this._scrollMask.setAttributes({
+          fill: {
+            gradient: "linear",
+            x0: 0,
+            y0: 0,
+            x1: 1,
+            y1: 0,
+            stops: stops
+          }
+        }) : this._scrollMask.setAttributes({
+          fill: {
+            gradient: "linear",
+            x0: 0,
+            y0: 0,
+            x1: 0,
+            y1: 1,
+            stops: stops
+          }
+        }));
       }
       _renderPagerComponent() {
         return this._itemContext.isScrollbar ? this._renderScrollbar() : this._renderPager(), !0;
@@ -56237,7 +56391,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 });
             }
             this._view = new View(Object.assign(Object.assign({ width: this._width, height: this._height, container: (_c = this._container.dom) !== null && _c !== void 0 ? _c : null, renderCanvas: (_d = this._container.canvas) !== null && _d !== void 0 ? _d : null, hooks: this._option.performanceHook }, this._option), { mode: toRenderMode(this._option.mode), autoFit: false, eventConfig: {
-                    gesture: isMobileLikeMode(this._option.mode),
+                    gesture: isValid$1(this._option.gestureConfig)
+                        ? this._option.gestureConfig
+                        : isMobileLikeMode(this._option.mode),
                     disable: this._option.interactive === false
                 }, doLayout: () => {
                     var _a;
@@ -61579,7 +61735,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     registerVChartCore();
 
-    const version = "1.12.10";
+    const version = "1.12.12-alpha.0";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -63158,12 +63314,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         setValueFieldToStackOffsetSilhouette() {
         }
         initRootMark() {
-            var _a, _b;
+            var _a, _b, _c;
             this._rootMark = this._createMark({ type: "group", name: `seriesGroup_${this.type}_${this.id}` }, {
                 parent: (_b = (_a = this._region).getGroupMark) === null || _b === void 0 ? void 0 : _b.call(_a),
                 dataView: false
             });
-            this._rootMark.setMarkConfig({ zIndex: this.layoutZIndex });
+            this._rootMark.setMarkConfig({ zIndex: (_c = this._spec.zIndex) !== null && _c !== void 0 ? _c : this.layoutZIndex });
         }
         _getExtensionMarkNamePrefix() {
             return `${this.type}_${this.id}_extensionMark`;
@@ -64660,9 +64816,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     }
 
     function isValidAlignDomain(domain) {
-        return domain.length === 2 && isValidNumber$1(domain[0]) && isValidNumber$1(last(domain)) && last(domain) >= domain[0];
+        return domain.length >= 2 && isValidNumber$1(domain[0]) && isValidNumber$1(last(domain)) && last(domain) >= domain[0];
     }
     function getScaleInfo(axis, domain) {
+        var _a;
         const total = last(domain) - domain[0];
         const includeZero = last(domain) * domain[0] < 0;
         let negative = domain[0] <= 0 ? 0 - domain[0] : 0;
@@ -64682,7 +64839,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             positive = positive / total;
         }
         const domainSpec = axis.getDomainSpec();
-        return {
+        const result = {
             total,
             negative,
             positive,
@@ -64691,6 +64848,35 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             extendable_min: !isValidNumber$1(domainSpec.min),
             extendable_max: !isValidNumber$1(domainSpec.max)
         };
+        if ((_a = axis._break) === null || _a === void 0 ? void 0 : _a.scope) {
+            const index = domain.findIndex(value => value >= 0);
+            let scope;
+            let domainTemp;
+            if (index === 0) {
+                scope = axis._break.scope[index];
+                domainTemp = [domain[0], domain[1]];
+                result.positive = 1;
+                result.negative = 0;
+            }
+            else {
+                if (last(domain) <= 0) {
+                    result.positive = 0;
+                    result.negative = 1;
+                    domainTemp = [domain[domain.length - 2], domain[domain.length - 1]];
+                }
+                else {
+                    scope = axis._break.scope[index - 1];
+                    domainTemp = [domain[index - 1], domain[index]];
+                    result.negative = scope[0] + ((0 - domainTemp[0]) / (domainTemp[1] - domainTemp[0])) * (scope[1] - scope[0]);
+                    result.positive = 1 - result.negative;
+                }
+            }
+            result.break = true;
+            result.extendable_max = false;
+            result.extendable_min = false;
+            result.domain = domainTemp;
+        }
+        return result;
     }
     function inDifferentCrossZero(info1, info2) {
         const { positive: positive1, negative: negative1, extendable_min: s1Extendable_min, extendable_max: s1Extendable_max, domain: domain1 } = info1;
@@ -64780,6 +64966,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         const info1 = getScaleInfo(targetAxis, domain1);
         const info2 = getScaleInfo(currentAxis, domain2);
+        if (info1.break === true && info2.break === true) {
+            return;
+        }
         const { positive: positive1, negative: negative1, extendable_min: s1Extendable_min, extendable_max: s1Extendable_max, includeZero: includeZero1 } = info1;
         const { positive: positive2, negative: negative2, extendable_min: s2Extendable_min, extendable_max: s2Extendable_max, includeZero: includeZero2 } = info2;
         if (positive1 === 0 && negative1 === 0) {
@@ -66698,42 +66887,58 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     }
     const sorter = (a, b) => a - b;
     const fillBins = (data, points) => {
-        const bins = [0];
+        const bins = [
+            { count: 0, sub: [], max: points[0], min: points[0] }
+        ];
         let i = 0;
         let j = 0;
         while (i < points.length) {
             if (data[j] <= points[i]) {
-                bins[i] += 1;
+                bins[i].count += 1;
+                bins[i].sub.push(data[j]);
                 j += 1;
             }
             else {
                 i += 1;
-                bins[i] = 0;
+                bins[i] = { count: 0, sub: [], max: points[i], min: points[i] };
             }
         }
-        bins[i] = data.slice(j).length;
+        bins.forEach(bin => {
+            if (bin.count) {
+                bin.min = Math.min.apply(null, bin.sub);
+            }
+        });
+        const remain = data.slice(j);
+        bins[i] = { count: remain.length, sub: remain, min: points[points.length - 1], max: Math.max.apply(null, remain) };
         return bins;
     };
-    function breakScope(data, points) {
+    function breakScope(data, points, scopeType = 'length') {
         const bins = fillBins(data, points);
-        const count = data.length;
-        return bins
-            .reduce((res, bin, i) => {
-            const last = res[i - 1] ? res[i - 1][1] : 0;
-            const next = (last * 100 + +(bin / count).toFixed(2) * 100) / 100;
-            res.push([last, next > 1 ? 1 : next > 0.95 ? 1 : next]);
-            return res;
-        }, [])
-            .filter(s => {
-            return !(s[0] === 0 && s[1] === 0) && !(s[0] === 1 && s[1] === 1);
+        const totalLength = scopeType === 'count'
+            ? data.length
+            : bins.reduce((res, bin, i) => {
+                return bin.count > 0 ? res + bin.max - bin.min : res;
+            }, 0);
+        const res = [];
+        let acc = 0;
+        bins.forEach((bin, i) => {
+            if (totalLength === 0) {
+                res.push([0, i / bins.length - 1]);
+            }
+            else {
+                const length = scopeType === 'count' ? bin.count : bin.max - bin.min;
+                res.push([res[i - 1] ? res[i - 1][1] : 0, i === bins.length - 1 ? 1 : Math.min((acc + length) / totalLength, 1)]);
+                acc += length;
+            }
         });
+        return res;
     }
-    function breakData(data, points) {
+    function breakData(data, points, scopeType) {
         data.sort(sorter);
         points.sort(sorter);
         return {
             domain: breakDomain(data, points),
-            scope: breakScope(data, points)
+            scope: breakScope(data, points, scopeType)
         };
     }
 
@@ -66854,7 +67059,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     }
                     breakRanges.sort((a, b) => a[0] - b[0]);
                     if (breakRanges.length) {
-                        const { domain: breakDomains, scope: breakScopes } = breakData(values, combineDomains(breakRanges));
+                        const { domain: breakDomains, scope: breakScopes } = breakData(values, combineDomains(breakRanges), this._spec.breaks[0].scopeType);
                         domain = combineDomains(breakDomains);
                         this._break = {
                             domain: breakDomains,
@@ -71644,7 +71849,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             const event = this._isGestureListener ? params : params.event.clone();
             this._zoomableTrigger.parserZoomEvent(event);
-            const { zoomDelta, zoomX, zoomY } = event;
+            const { zoomDelta, zoomX, zoomY, path } = event;
+            if (!path.some((node) => node.name && node.name.includes('region'))) {
+                return;
+            }
             if (isNil$1(zoomDelta)) {
                 return;
             }
@@ -78214,14 +78422,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (!isValidNumber$1(width) || !isValidNumber$1(height) || !(height > 0 && width > 0)) {
                 return;
             }
-            const wordCloudTransforms = [];
-            if (!this._isWordCloudShape) {
-                wordCloudTransforms.push(Object.assign({ type: 'wordcloud' }, this._wordCloudTransformOption()));
-            }
-            else {
-                wordCloudTransforms.push(Object.assign({ type: 'wordcloudShape' }, this._wordCloudShapeTransformOption()));
+            const product = this._wordMark.getProduct();
+            if (product) {
+                const wordCloudTransforms = [];
+                if (!this._isWordCloudShape) {
+                    wordCloudTransforms.push(Object.assign({ type: 'wordcloud' }, this._wordCloudTransformOption()));
+                }
+                else {
+                    wordCloudTransforms.push(Object.assign({ type: 'wordcloudShape' }, this._wordCloudShapeTransformOption()));
+                }
+                product.transform(wordCloudTransforms);
             }
-            this._wordMark.getProduct().transform(wordCloudTransforms);
         }
         _getCommonTransformOptions() {
             var _a, _b, _c, _d, _e, _f;
@@ -78589,7 +78800,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         });
         if (this.originalData = data, this.data = data, this.progressiveRun(), !this.options.clip && this.options.enlarge && this._bounds && this.shrinkBoard(this._bounds), this._bounds && ["cardioid", "triangle", "triangle-upright"].includes(this.options.shape)) {
           const currentCenterY = (this._bounds[0].y + this._bounds[1].y) / 2;
-          this._dy = -(currentCenterY - this._size[1] / 2);
+          this._dy = -(currentCenterY - this._originSize[1] / 2);
         }
         return this.result;
       }
@@ -78648,10 +78859,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
       }
       getContext(canvas) {
         canvas.width = 1, canvas.height = 1;
-        const imageData = canvas.getContext("2d").getImageData(0, 0, 1, 1),
+        const imageData = canvas.getContext("2d", {
+            willReadFrequently: !0
+          }).getImageData(0, 0, 1, 1),
           ratio = Math.sqrt(imageData.data.length >> 2);
         canvas.width = (this.cw << 5) / ratio, canvas.height = this.ch / ratio;
-        const context = canvas.getContext("2d");
+        const context = canvas.getContext("2d", {
+          willReadFrequently: !0
+        });
         return context.fillStyle = context.strokeStyle = "red", context.textAlign = "center", {
           context: context,
           ratio: ratio,
@@ -90613,7 +90828,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return { spec: newSpec, theme };
         }
         _transformSpecAfterMergingTheme(spec, chartSpec, chartSpecInfo) {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+            var _a, _b, _c, _d, _e, _f, _g;
             super._transformSpecAfterMergingTheme(spec, chartSpec, chartSpecInfo);
             spec.visible = (_a = spec.visible) !== null && _a !== void 0 ? _a : true;
             spec.activeType = getTooltipActualActiveType(spec);
@@ -90623,8 +90838,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             spec.className = (_d = spec.className) !== null && _d !== void 0 ? _d : TOOLTIP_EL_CLASS_NAME;
             spec.enterable = (_e = spec.enterable) !== null && _e !== void 0 ? _e : false;
             spec.transitionDuration = (_f = spec.transitionDuration) !== null && _f !== void 0 ? _f : 150;
-            spec.triggerOff = (_g = spec.triggerOff) !== null && _g !== void 0 ? _g : spec.trigger;
-            spec.confine = (_h = spec.confine) !== null && _h !== void 0 ? _h : spec.renderMode === 'canvas';
+            spec.confine = (_g = spec.confine) !== null && _g !== void 0 ? _g : spec.renderMode === 'canvas';
             if (isValid$1(spec.parentElement)) {
                 if (isString$1(spec.parentElement)) {
                     spec.parentElement = vglobal.getElementById(spec.parentElement);
@@ -90925,7 +91139,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _initEventOfTooltipContent() {
             var _a, _b;
-            if (!this._needInitEventOfTooltip || !this._enterable) {
+            if (!this._needInitEventOfTooltip) {
                 return;
             }
             const container = (_b = (_a = this.tooltipHandler).getTooltipContainer) === null || _b === void 0 ? void 0 : _b.call(_a);
@@ -90933,6 +91147,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (element) {
                 element.addEventListener('pointerenter', () => {
                     var _a;
+                    if (!this._enterable) {
+                        return;
+                    }
                     const rect = (_a = element.getBoundingClientRect) === null || _a === void 0 ? void 0 : _a.call(element);
                     if (rect) {
                         this._cacheEnterableRect = { x: rect.x, y: rect.y, width: rect.width, height: rect.height };
@@ -90948,6 +91165,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 });
                 element.addEventListener('pointerleave', () => {
                     var _a, _b;
+                    if (!this._enterable) {
+                        return;
+                    }
                     if (this._cacheEnterableRect) {
                         const newRect = (_a = element.getBoundingClientRect) === null || _a === void 0 ? void 0 : _a.call(element);
                         if (newRect &&
@@ -90979,21 +91199,33 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return;
             }
             const trigger = array((_a = this._spec.trigger) !== null && _a !== void 0 ? _a : 'hover');
+            const triggerOff = array(this._spec.triggerOff);
             const mode = this._option.mode;
-            if (trigger.includes('hover')) {
-                this._handleMouseMove = this._throttle(this._getMouseMoveHandler(false));
-                this._mountEvent('pointermove', { source: 'chart' }, this._handleMouseMove);
-                if (isMobileLikeMode(mode) || isMiniAppLikeMode(mode)) {
-                    this._mountEvent('pointerdown', { source: 'chart' }, this._getMouseMoveHandler(false));
+            trigger.forEach(triggerType => {
+                var _a;
+                if (triggerType === 'hover') {
+                    this._handleMouseMove = this._throttle(this._getMouseMoveHandler(false));
+                    this._mountEvent('pointermove', { source: 'chart' }, this._handleMouseMove);
+                    if (isMobileLikeMode(mode) || isMiniAppLikeMode(mode)) {
+                        this._mountEvent('pointerdown', { source: 'chart' }, this._getMouseMoveHandler(false));
+                        this._mountEvent('pointerup', { source: 'window' }, this._getMouseOutHandler(true));
+                    }
+                    this._mountEvent('pointerleave', { source: 'chart' }, this._getMouseOutHandler(false));
+                }
+                else if (triggerType === 'click') {
+                    this._mountEvent('pointertap', { source: 'chart' }, this._getMouseMoveHandler(true));
                     this._mountEvent('pointerup', { source: 'window' }, this._getMouseOutHandler(true));
                 }
-                this._mountEvent('pointerleave', { source: 'chart' }, this._getMouseOutHandler(false));
-            }
-            if (trigger.includes('click')) {
-                this._mountEvent('pointertap', { source: 'chart' }, this._getMouseMoveHandler(true));
-                this._mountEvent('pointerup', { source: 'window' }, this._getMouseOutHandler(true));
-            }
-            else if (this._spec.lockAfterClick) {
+                else if (isObject$2(triggerType)) {
+                    this._mountEvent(triggerType.eventType, { source: (_a = triggerType.source) !== null && _a !== void 0 ? _a : 'chart', consume: triggerType.consume }, this._getMouseMoveHandler(true));
+                }
+            });
+            const offEvents = triggerOff.filter(entry => isObject$2(entry));
+            offEvents.forEach(entry => {
+                var _a, _b;
+                this._mountEvent(entry.eventType, { source: (_a = entry.source) !== null && _a !== void 0 ? _a : 'chart', consume: entry.consume }, this._getMouseOutHandler((_b = entry.checkOutside) !== null && _b !== void 0 ? _b : false));
+            });
+            if (!trigger.includes('click') && this._spec.lockAfterClick) {
                 this._mountEvent('pointertap', { source: 'chart' }, this._handleClickToLock);
             }
         }
@@ -91013,10 +91245,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return throttle(callback, wait);
         }
         reInit(spec) {
-            var _a, _b;
+            var _a, _b, _c;
             super.reInit(spec);
             if (this.tooltipHandler) {
-                (_b = (_a = this.tooltipHandler).reInit) === null || _b === void 0 ? void 0 : _b.call(_a);
+                const renderMode = (_a = this._spec.renderMode) !== null && _a !== void 0 ? _a : 'html';
+                const newEnterable = this._spec.enterable && renderMode === 'html';
+                if (newEnterable && !this._enterable) {
+                    this._needInitEventOfTooltip = true;
+                }
+                this._enterable = newEnterable;
+                (_c = (_b = this.tooltipHandler).reInit) === null || _c === void 0 ? void 0 : _c.call(_b);
             }
             else {
                 this._initHandler();
@@ -91055,19 +91293,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
                 const prevInfo = this._cacheInfo;
                 const isSameAsCacheInfo = prevInfo.length === nextInfo.length && nextInfo.every((info, i) => isSameDimensionInfo(info, prevInfo[i]));
-                if (!isSameAsCacheInfo) {
-                    return false;
-                }
+                return isSameAsCacheInfo;
             }
-            else {
-                if (isDimensionInfo(this._cacheInfo)) {
-                    return false;
-                }
-                const prevInfo = this._cacheInfo;
-                const isSameAsCacheInfo = (nextInfo === null || nextInfo === void 0 ? void 0 : nextInfo.datum) === prevInfo.datum && (nextInfo === null || nextInfo === void 0 ? void 0 : nextInfo.mark) === prevInfo.mark && (nextInfo === null || nextInfo === void 0 ? void 0 : nextInfo.series) === prevInfo.series;
-                if (!isSameAsCacheInfo) {
-                    return false;
-                }
+            if (isDimensionInfo(this._cacheInfo)) {
+                return false;
+            }
+            const prevInfo = this._cacheInfo;
+            const isSameAsCacheInfo = (nextInfo === null || nextInfo === void 0 ? void 0 : nextInfo.datum) === prevInfo.datum && (nextInfo === null || nextInfo === void 0 ? void 0 : nextInfo.mark) === prevInfo.mark && (nextInfo === null || nextInfo === void 0 ? void 0 : nextInfo.series) === prevInfo.series;
+            if (!isSameAsCacheInfo) {
+                return false;
             }
             const prevParams = this._cacheParams;
             if (isNil$1(prevParams) || isNil$1(nextParams)) {
@@ -95581,12 +95815,20 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             };
         }
         _getTitleAttrs() {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-            const realWidth = Math.max(0, (_a = this._spec.width) !== null && _a !== void 0 ? _a : this.getLayoutRect().width);
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             if (this._spec.visible === false) {
                 return { visible: false };
             }
-            return Object.assign(Object.assign({}, pickWithout(this._spec, ['padding'])), { textType: (_b = this._spec.textType) !== null && _b !== void 0 ? _b : 'text', text: (_c = this._spec.text) !== null && _c !== void 0 ? _c : '', subtextType: (_d = this._spec.subtextType) !== null && _d !== void 0 ? _d : 'text', subtext: (_e = this._spec.subtext) !== null && _e !== void 0 ? _e : '', x: (_f = this._spec.x) !== null && _f !== void 0 ? _f : 0, y: (_g = this._spec.y) !== null && _g !== void 0 ? _g : 0, width: realWidth, height: this._spec.height, minWidth: this._spec.minWidth, maxWidth: this._spec.maxWidth, minHeight: this._spec.minHeight, maxHeight: this._spec.maxHeight, padding: this._spec.innerPadding, align: (_h = this._spec.align) !== null && _h !== void 0 ? _h : 'left', verticalAlign: (_j = this._spec.verticalAlign) !== null && _j !== void 0 ? _j : 'top', textStyle: Object.assign({ width: realWidth }, this._spec.textStyle), subtextStyle: Object.assign({ width: realWidth }, this._spec.subtextStyle) });
+            const layoutRect = this.getLayoutRect();
+            const titleWidth = calcLayoutNumber(this._spec.width, layoutRect.width, null, layoutRect.width);
+            const titleMaxWidth = calcLayoutNumber(this._spec.maxWidth, layoutRect.width, null, layoutRect.width);
+            const maxWidth = Math.max(Math.min(titleWidth, titleMaxWidth, layoutRect.width), 0);
+            const attrs = Object.assign(Object.assign({}, pickWithout(this._spec, ['padding'])), { textType: (_a = this._spec.textType) !== null && _a !== void 0 ? _a : 'text', text: (_b = this._spec.text) !== null && _b !== void 0 ? _b : '', subtextType: (_c = this._spec.subtextType) !== null && _c !== void 0 ? _c : 'text', subtext: (_d = this._spec.subtext) !== null && _d !== void 0 ? _d : '', x: (_e = this._spec.x) !== null && _e !== void 0 ? _e : 0, y: (_f = this._spec.y) !== null && _f !== void 0 ? _f : 0, height: this._spec.height, minWidth: this._spec.minWidth, maxWidth, minHeight: this._spec.minHeight, maxHeight: this._spec.maxHeight, padding: this._spec.innerPadding, align: (_g = this._spec.align) !== null && _g !== void 0 ? _g : 'left', verticalAlign: (_h = this._spec.verticalAlign) !== null && _h !== void 0 ? _h : 'top', textStyle: Object.assign({ width: maxWidth, maxLineWidth: maxWidth }, this._spec.textStyle), subtextStyle: Object.assign({ maxLineWidth: maxWidth }, this._spec.subtextStyle) });
+            if (isValid$1(this._spec.width)) {
+                attrs.textStyle.width = Math.max(titleWidth, layoutRect.width);
+                attrs.subtextStyle.width = attrs.textStyle.width;
+            }
+            return attrs;
         }
         _createOrUpdateTitleComponent(attrs) {
             if (this._titleComponent) {
@@ -99243,8 +99485,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         if (posType > 0) {
                             result[dim] = value0 + offset;
                         }
+                        else if (posType === 0) {
+                            result[dim] = value0 - (boxSize * tooltipSizeScale) / 2;
+                        }
                         else {
-                            result[dim] = value0 - (boxSize * tooltipSizeScale) / 2 + (posType < 0 ? -1 : 0) * offset;
+                            result[dim] = value0 - boxSize * tooltipSizeScale - offset;
                         }
                     }
                     result[dim] *= chartElementScale;
@@ -99664,12 +99909,20 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         const createSymbol = (symbolType) => new Symbol$1({ symbolType, size: sizeNumber, fill: true });
         let symbol = createSymbol(symbolType);
         const parsedPath = symbol.getParsedPath();
-        if (!parsedPath.path) {
+        if (!parsedPath.path && parsedPath.pathStr) {
             symbol = createSymbol(parsedPath.pathStr);
         }
-        const pathModel = symbol.getParsedPath().path;
-        const path = pathModel.toString();
-        const bounds = pathModel.bounds;
+        let bounds;
+        let path;
+        if (symbol.getParsedPath().path) {
+            const pathModel = symbol.getParsedPath().path;
+            path = pathModel.toString();
+            bounds = pathModel.bounds;
+        }
+        else if (parsedPath.isSvg && parsedPath.svgCache) {
+            path = parsedPath.svgCache.map(s => s.path.toString()).join();
+            bounds = parsedPath.svgCache.reduce((acc, cur) => acc.union(cur.path.bounds), new Bounds());
+        }
         let viewBox = `${bounds.x1} ${bounds.y1} ${bounds.width()} ${bounds.height()}`;
         if (lineWidth !== '0px') {
             const [x, y, w, h] = viewBox.split(' ').map(n => Number(n));