@visactor/vchart 1.13.10-alpha.1 → 1.13.11-alpha.0

package/build/index.es.js

@@ -7840,11 +7840,14 @@ class Container {
 const ContributionProvider = Symbol("ContributionProvider");
 class ContributionProviderCache {
   constructor(serviceIdentifier, container) {
-    this.serviceIdentifier = serviceIdentifier, this.container = container;
+    this.serviceIdentifier = serviceIdentifier, this.container = container, ContributionStore.setStore(this.serviceIdentifier, this);
   }
   getContributions() {
     return this.caches || (this.caches = [], this.container && this.container.isBound(this.serviceIdentifier) && this.caches.push(...this.container.getAll(this.serviceIdentifier))), this.caches;
   }
+  refresh() {
+    this.caches && (this.caches.length = 0, this.container && this.container.isBound(this.serviceIdentifier) && this.caches.push(...this.container.getAll(this.serviceIdentifier)));
+  }
 }
 function bindContributionProvider(bind, id) {
   bind(ContributionProvider).toDynamicValue(_ref => {
@@ -7862,6 +7865,20 @@ function bindContributionProviderNoSingletonScope(bind, id) {
     return new ContributionProviderCache(id, container);
   }).whenTargetNamed(id);
 }
+class ContributionStore {
+  static getStore(id) {
+    return this.store.get(id);
+  }
+  static setStore(id, cache) {
+    this.store.set(id, cache);
+  }
+  static refreshAllContributions() {
+    this.store.forEach(cache => {
+      cache.refresh();
+    });
+  }
+}
+ContributionStore.store = new Map();
 
 class Hook {
   constructor(args, name) {
@@ -7928,6 +7945,48 @@ const EnvContribution = Symbol.for("EnvContribution");
 const VGlobal = Symbol.for("VGlobal");
 const DEFAULT_TEXT_FONT_FAMILY$1 = "PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol";
 
+class EventListenerManager {
+  constructor() {
+    this._listenerMap = new Map(), this._eventListenerTransformer = event => event;
+  }
+  setEventListenerTransformer(transformer) {
+    this._eventListenerTransformer = transformer || (event => event);
+  }
+  addEventListener(type, listener, options) {
+    if (!listener) return;
+    const wrappedListener = event => {
+      const transformedEvent = this._eventListenerTransformer(event);
+      "function" == typeof listener ? listener(transformedEvent) : listener.handleEvent && listener.handleEvent(transformedEvent);
+    };
+    this._listenerMap.has(type) || this._listenerMap.set(type, new Map()), this._listenerMap.get(type).set(listener, wrappedListener), this._nativeAddEventListener(type, wrappedListener, options);
+  }
+  removeEventListener(type, listener, options) {
+    var _a;
+    if (!listener) return;
+    const wrappedListener = null === (_a = this._listenerMap.get(type)) || void 0 === _a ? void 0 : _a.get(listener);
+    wrappedListener && (this._nativeRemoveEventListener(type, wrappedListener, options), this._listenerMap.get(type).delete(listener), 0 === this._listenerMap.get(type).size && this._listenerMap.delete(type));
+  }
+  dispatchEvent(event) {
+    return this._nativeDispatchEvent(event);
+  }
+  clearAllEventListeners() {
+    this._listenerMap.forEach((listenersMap, type) => {
+      listenersMap.forEach((wrappedListener, originalListener) => {
+        this._nativeRemoveEventListener(type, wrappedListener, void 0);
+      });
+    }), this._listenerMap.clear();
+  }
+  _nativeAddEventListener(type, listener, options) {
+    throw new Error("_nativeAddEventListener must be implemented by derived classes");
+  }
+  _nativeRemoveEventListener(type, listener, options) {
+    throw new Error("_nativeRemoveEventListener must be implemented by derived classes");
+  }
+  _nativeDispatchEvent(event) {
+    throw new Error("_nativeDispatchEvent must be implemented by derived classes");
+  }
+}
+
 var __decorate$1B = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
@@ -7968,7 +8027,7 @@ var __decorate$1B = undefined && undefined.__decorate || function (decorators, t
       step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
   };
-let DefaultGlobal = class {
+let DefaultGlobal = class extends EventListenerManager {
   get env() {
     return this._env;
   }
@@ -8012,10 +8071,19 @@ let DefaultGlobal = class {
     this._env || this.setEnv("browser"), this.envContribution.applyStyles = support;
   }
   constructor(contributions) {
-    this.contributions = contributions, this._isImageAnonymous = !0, this.id = Generator.GenAutoIncrementId(), this.hooks = {
+    super(), this.contributions = contributions, this._isImageAnonymous = !0, this.eventListenerTransformer = event => event, this.id = Generator.GenAutoIncrementId(), this.hooks = {
       onSetEnv: new SyncHook(["lastEnv", "env", "global"])
     }, this.measureTextMethod = "native", this.optimizeVisible = !1;
   }
+  _nativeAddEventListener(type, listener, options) {
+    return this._env || this.setEnv("browser"), this.envContribution.addEventListener(type, listener, options);
+  }
+  _nativeRemoveEventListener(type, listener, options) {
+    return this._env || this.setEnv("browser"), this.envContribution.removeEventListener(type, listener, options);
+  }
+  _nativeDispatchEvent(event) {
+    return this._env || this.setEnv("browser"), this.envContribution.dispatchEvent(event);
+  }
   bindContribution(params) {
     const promiseArr = [];
     if (this.contributions.getContributions().forEach(contribution => {
@@ -8056,15 +8124,6 @@ let DefaultGlobal = class {
   releaseCanvas(canvas) {
     return this._env || this.setEnv("browser"), this.envContribution.releaseCanvas(canvas);
   }
-  addEventListener(type, listener, options) {
-    return this._env || this.setEnv("browser"), this.envContribution.addEventListener(type, listener, options);
-  }
-  removeEventListener(type, listener, options) {
-    return this._env || this.setEnv("browser"), this.envContribution.removeEventListener(type, listener, options);
-  }
-  dispatchEvent(event) {
-    return this._env || this.setEnv("browser"), this.envContribution.dispatchEvent(event);
-  }
   getRequestAnimationFrame() {
     return this._env || this.setEnv("browser"), this.envContribution.getRequestAnimationFrame();
   }
@@ -11093,7 +11152,7 @@ var __decorate$1y = undefined && undefined.__decorate || function (decorators, t
   };
 const VWindow = Symbol.for("VWindow");
 const WindowHandlerContribution = Symbol.for("WindowHandlerContribution");
-let DefaultWindow = class {
+let DefaultWindow = class extends EventListenerManager {
   get width() {
     if (this._handler) {
       const wh = this._handler.getWH();
@@ -11112,7 +11171,7 @@ let DefaultWindow = class {
     return this._handler.getDpr();
   }
   constructor() {
-    this.hooks = {
+    super(), this.hooks = {
       onChange: new SyncHook(["x", "y", "width", "height"])
     }, this.active = () => {
       const global = this.global;
@@ -11120,6 +11179,15 @@ let DefaultWindow = class {
       container.getNamed(WindowHandlerContribution, global.env).configure(this, global), this.actived = !0;
     }, this._uid = Generator.GenAutoIncrementId(), this.global = application.global, this.postInit();
   }
+  _nativeAddEventListener(type, listener, options) {
+    return this._handler.addEventListener(type, listener, options);
+  }
+  _nativeRemoveEventListener(type, listener, options) {
+    return this._handler.removeEventListener(type, listener, options);
+  }
+  _nativeDispatchEvent(event) {
+    return this._handler.dispatchEvent(event);
+  }
   postInit() {
     this.global.hooks.onSetEnv.tap("window", this.active), this.active();
   }
@@ -11159,7 +11227,7 @@ let DefaultWindow = class {
     throw new Error("暂不支持");
   }
   release() {
-    return this.global.hooks.onSetEnv.unTap("window", this.active), this._handler.releaseWindow();
+    return this.global.hooks.onSetEnv.unTap("window", this.active), this.clearAllEventListeners(), this._handler.releaseWindow();
   }
   getContext() {
     return this._handler.getContext();
@@ -11170,15 +11238,6 @@ let DefaultWindow = class {
   getImageBuffer(type) {
     return this._handler.getImageBuffer ? this._handler.getImageBuffer(type) : null;
   }
-  addEventListener(type, listener, options) {
-    return this._handler.addEventListener(type, listener, options);
-  }
-  removeEventListener(type, listener, options) {
-    return this._handler.removeEventListener(type, listener, options);
-  }
-  dispatchEvent(event) {
-    return this._handler.dispatchEvent(event);
-  }
   getBoundingClientRect() {
     return this._handler.getBoundingClientRect();
   }
@@ -12387,19 +12446,17 @@ class EventSystem {
       globalObj: globalObj,
       domElement: domElement
     } = this;
-    this.supportsPointerEvents ? (globalObj.getDocument() ? (globalObj.getDocument().addEventListener("pointermove", this.onPointerMove, !0), globalObj.getDocument().addEventListener("pointerup", this.onPointerUp, !0)) : (domElement.addEventListener("pointermove", this.onPointerMove, !0), domElement.addEventListener("pointerup", this.onPointerUp, !0)), domElement.addEventListener("pointerdown", this.onPointerDown, !0), domElement.addEventListener("pointerleave", this.onPointerOverOut, !0), domElement.addEventListener("pointerover", this.onPointerOverOut, !0)) : (globalObj.getDocument() ? (globalObj.getDocument().addEventListener("mousemove", this.onPointerMove, !0), globalObj.getDocument().addEventListener("mouseup", this.onPointerUp, !0)) : (domElement.addEventListener("mousemove", this.onPointerMove, !0), domElement.addEventListener("mouseup", this.onPointerUp, !0)), domElement.addEventListener("mousedown", this.onPointerDown, !0), domElement.addEventListener("mouseout", this.onPointerOverOut, !0), domElement.addEventListener("mouseover", this.onPointerOverOut, !0)), this.supportsTouchEvents && (domElement.addEventListener("touchstart", this.onPointerDown, !0), domElement.addEventListener("touchend", this.onPointerUp, !0), domElement.addEventListener("touchmove", this.onPointerMove, !0)), domElement.addEventListener("wheel", this.onWheel, {
+    this.supportsPointerEvents ? (globalObj.getDocument() ? (globalObj.addEventListener("pointermove", this.onPointerMove, !0), globalObj.addEventListener("pointerup", this.onPointerUp, !0)) : (domElement.addEventListener("pointermove", this.onPointerMove, !0), domElement.addEventListener("pointerup", this.onPointerUp, !0)), domElement.addEventListener("pointerdown", this.onPointerDown, !0), domElement.addEventListener("pointerleave", this.onPointerOverOut, !0), domElement.addEventListener("pointerover", this.onPointerOverOut, !0)) : (globalObj.getDocument() ? (globalObj.addEventListener("mousemove", this.onPointerMove, !0), globalObj.addEventListener("mouseup", this.onPointerUp, !0)) : (domElement.addEventListener("mousemove", this.onPointerMove, !0), domElement.addEventListener("mouseup", this.onPointerUp, !0)), domElement.addEventListener("mousedown", this.onPointerDown, !0), domElement.addEventListener("mouseout", this.onPointerOverOut, !0), domElement.addEventListener("mouseover", this.onPointerOverOut, !0)), this.supportsTouchEvents && (domElement.addEventListener("touchstart", this.onPointerDown, !0), domElement.addEventListener("touchend", this.onPointerUp, !0), domElement.addEventListener("touchmove", this.onPointerMove, !0)), domElement.addEventListener("wheel", this.onWheel, {
       capture: !0
     }), this.eventsAdded = !0;
   }
   removeEvents() {
-    var _a;
     if (!this.eventsAdded || !this.domElement) return;
     const {
-        globalObj: globalObj,
-        domElement: domElement
-      } = this,
-      globalDocument = null !== (_a = globalObj.getDocument()) && void 0 !== _a ? _a : domElement;
-    this.supportsPointerEvents ? (globalDocument.removeEventListener("pointermove", this.onPointerMove, !0), globalDocument.removeEventListener("pointerup", this.onPointerUp, !0), domElement.removeEventListener("pointerdown", this.onPointerDown, !0), domElement.removeEventListener("pointerleave", this.onPointerOverOut, !0), domElement.removeEventListener("pointerover", this.onPointerOverOut, !0)) : (globalDocument.removeEventListener("mousemove", this.onPointerMove, !0), globalDocument.removeEventListener("mouseup", this.onPointerUp, !0), domElement.removeEventListener("mousedown", this.onPointerDown, !0), domElement.removeEventListener("mouseout", this.onPointerOverOut, !0), domElement.removeEventListener("mouseover", this.onPointerOverOut, !0)), this.supportsTouchEvents && (domElement.removeEventListener("touchstart", this.onPointerDown, !0), domElement.removeEventListener("touchend", this.onPointerUp, !0), domElement.removeEventListener("touchmove", this.onPointerMove, !0)), domElement.removeEventListener("wheel", this.onWheel, !0), this.domElement = null, this.eventsAdded = !1;
+      globalObj: globalObj,
+      domElement: domElement
+    } = this;
+    this.supportsPointerEvents ? (globalObj.getDocument() ? (globalObj.removeEventListener("pointermove", this.onPointerMove, !0), globalObj.removeEventListener("pointerup", this.onPointerUp, !0)) : (domElement.removeEventListener("pointermove", this.onPointerMove, !0), domElement.removeEventListener("pointerup", this.onPointerUp, !0)), domElement.removeEventListener("pointerdown", this.onPointerDown, !0), domElement.removeEventListener("pointerleave", this.onPointerOverOut, !0), domElement.removeEventListener("pointerover", this.onPointerOverOut, !0)) : (globalObj.getDocument() ? (globalObj.removeEventListener("mousemove", this.onPointerMove, !0), globalObj.removeEventListener("mouseup", this.onPointerUp, !0)) : (domElement.removeEventListener("mousemove", this.onPointerMove, !0), domElement.removeEventListener("mouseup", this.onPointerUp, !0)), domElement.removeEventListener("mousedown", this.onPointerDown, !0), domElement.removeEventListener("mouseout", this.onPointerOverOut, !0), domElement.removeEventListener("mouseover", this.onPointerOverOut, !0)), this.supportsTouchEvents && (domElement.removeEventListener("touchstart", this.onPointerDown, !0), domElement.removeEventListener("touchend", this.onPointerUp, !0), domElement.removeEventListener("touchmove", this.onPointerMove, !0)), domElement.removeEventListener("wheel", this.onWheel, !0), this.domElement = null, this.eventsAdded = !1;
   }
   mapToViewportPoint(event) {
     return this.domElement.pointTransform ? this.domElement.pointTransform(event.x, event.y) : event;
@@ -12656,6 +12713,60 @@ class DefaultTicker extends EventEmitter {
   }
 }
 
+class ManualTickHandler {
+  constructor() {
+    this.time = 0;
+  }
+  static Avaliable() {
+    return !0;
+  }
+  avaliable() {
+    return ManualTickHandler.Avaliable();
+  }
+  tick(interval, cb) {
+    this.time = Math.max(0, interval + this.time), cb(this, {
+      once: !0
+    });
+  }
+  tickTo(t, cb) {
+    this.time = Math.max(0, t), cb(this, {
+      once: !0
+    });
+  }
+  release() {
+    this.timerId > 0 && (this.timerId = -1);
+  }
+  getTime() {
+    return this.time;
+  }
+}
+
+class ManualTicker extends DefaultTicker {
+  set mode(m) {
+    this.setupTickHandler();
+  }
+  get mode() {
+    return this._mode;
+  }
+  initHandler() {
+    return this.mode = "manual", null;
+  }
+  setupTickHandler() {
+    const handler = new ManualTickHandler();
+    return this._mode = "manual", this.tickerHandler && this.tickerHandler.release(), this.tickerHandler = handler, !0;
+  }
+  tickAt(time) {
+    this.tickerHandler.tick(time - Math.max(this.lastFrameTime, 0), handler => {
+      this.handleTick(handler, {
+        once: !0
+      });
+    });
+  }
+  ifCanStop() {
+    return !1;
+  }
+}
+
 class Easing {
   constructor() {}
   static linear(t) {
@@ -13365,6 +13476,186 @@ class InputText extends ACustomAnimate {
     } else out.text = this.toText.substr(0, count);
   }
 }
+class StreamLight extends ACustomAnimate {
+  constructor(from, to, duration, easing, params) {
+    super(from, to, duration, easing, params);
+  }
+  getEndProps() {
+    return {};
+  }
+  onStart() {
+    this.target && ("rect" === this.target.type ? this.onStartRect() : "line" === this.target.type ? this.onStartLineOrArea("line") : "area" === this.target.type && this.onStartLineOrArea("area"));
+  }
+  onStartLineOrArea(type) {
+    var _a;
+    const root = this.target.attachShadow(),
+      line = application.graphicService.creator[type](Object.assign({}, null === (_a = this.params) || void 0 === _a ? void 0 : _a.attribute));
+    this[type] = line, line.pathProxy = new CustomPath2D(), root.add(line);
+  }
+  onStartRect() {
+    var _a, _b, _c;
+    const root = this.target.attachShadow(),
+      isHorizontal = null === (_b = null === (_a = this.params) || void 0 === _a ? void 0 : _a.isHorizontal) || void 0 === _b || _b,
+      sizeAttr = isHorizontal ? "height" : "width",
+      otherSizeAttr = isHorizontal ? "width" : "height",
+      size = this.target.AABBBounds[sizeAttr](),
+      y = isHorizontal ? 0 : this.target.AABBBounds.y1,
+      rect = application.graphicService.creator.rect(Object.assign(Object.assign({
+        [sizeAttr]: size,
+        fill: "#bcdeff",
+        shadowBlur: 30,
+        shadowColor: "#bcdeff"
+      }, null === (_c = this.params) || void 0 === _c ? void 0 : _c.attribute), {
+        x: 0,
+        y: y,
+        [otherSizeAttr]: 0
+      }));
+    this.rect = rect, root.add(rect);
+  }
+  onBind() {}
+  onEnd() {
+    this.target.detachShadow();
+  }
+  onUpdate(end, ratio, out) {
+    return this.rect ? this.onUpdateRect(end, ratio, out) : this.line || this.area ? this.onUpdateLineOrArea(end, ratio, out) : void 0;
+  }
+  onUpdateRect(end, ratio, out) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    const isHorizontal = null === (_b = null === (_a = this.params) || void 0 === _a ? void 0 : _a.isHorizontal) || void 0 === _b || _b,
+      parentAttr = this.target.attribute;
+    if (isHorizontal) {
+      const parentWidth = null !== (_d = null !== (_c = parentAttr.width) && void 0 !== _c ? _c : Math.abs(parentAttr.x1 - parentAttr.x)) && void 0 !== _d ? _d : 250,
+        streamLength = null !== (_f = null === (_e = this.params) || void 0 === _e ? void 0 : _e.streamLength) && void 0 !== _f ? _f : parentWidth,
+        maxLength = null !== (_j = null === (_h = null === (_g = this.params) || void 0 === _g ? void 0 : _g.attribute) || void 0 === _h ? void 0 : _h.width) && void 0 !== _j ? _j : 60,
+        startX = -maxLength,
+        currentX = startX + (streamLength - startX) * ratio,
+        x = Math.max(currentX, 0),
+        w = Math.min(Math.min(currentX + maxLength, maxLength), streamLength - currentX),
+        width = w + x > parentWidth ? Math.max(parentWidth - x, 0) : w;
+      this.rect.setAttributes({
+        x: x,
+        width: width,
+        dx: Math.min(parentAttr.x1 - parentAttr.x, 0)
+      }, !1, {
+        type: AttributeUpdateType.ANIMATE_PLAY,
+        animationState: {
+          ratio: ratio,
+          end: end
+        }
+      });
+    } else {
+      const parentHeight = null !== (_l = null !== (_k = parentAttr.height) && void 0 !== _k ? _k : Math.abs(parentAttr.y1 - parentAttr.y)) && void 0 !== _l ? _l : 250,
+        streamLength = null !== (_o = null === (_m = this.params) || void 0 === _m ? void 0 : _m.streamLength) && void 0 !== _o ? _o : parentHeight,
+        maxLength = null !== (_r = null === (_q = null === (_p = this.params) || void 0 === _p ? void 0 : _p.attribute) || void 0 === _q ? void 0 : _q.height) && void 0 !== _r ? _r : 60,
+        currentY = parentHeight - (streamLength + maxLength) * ratio;
+      let y = Math.min(currentY, parentHeight);
+      const h = Math.min(parentHeight - currentY, maxLength);
+      let height;
+      y <= 0 ? (height = Math.max(y + h, 0), y = 0) : height = h, this.rect.setAttributes({
+        y: y,
+        height: height,
+        dy: Math.min(parentAttr.y1 - parentAttr.y, 0)
+      }, !1, {
+        type: AttributeUpdateType.ANIMATE_PLAY,
+        animationState: {
+          ratio: ratio,
+          end: end
+        }
+      });
+    }
+  }
+  onUpdateLineOrArea(end, ratio, out) {
+    const target = this.line || this.area;
+    if (!target) return;
+    const customPath = target.pathProxy,
+      targetLine = this.target;
+    targetLine.cache || targetLine.cacheArea ? this._onUpdateLineOrAreaWithCache(customPath, targetLine, end, ratio, out) : this._onUpdateLineWithoutCache(customPath, targetLine, end, ratio, out);
+    const targetAttrs = targetLine.attribute;
+    target.setAttributes(Object.assign({
+      stroke: targetAttrs.stroke
+    }, target.attribute)), target.addUpdateBoundTag();
+  }
+  _onUpdateLineOrAreaWithCache(customPath, g, end, ratio, out) {
+    var _a, _b;
+    if (customPath.clear(), "line" === g.type) {
+      let cache = g.cache;
+      Array.isArray(cache) || (cache = [cache]);
+      const totalLen = cache.reduce((l, c) => l + c.getLength(), 0),
+        curves = [];
+      return cache.forEach(c => {
+        c.curves.forEach(ci => curves.push(ci));
+      }), this._updateCurves(customPath, curves, totalLen, ratio);
+    }
+    if ("area" === g.type && (null === (_b = null === (_a = g.cacheArea) || void 0 === _a ? void 0 : _a.top) || void 0 === _b ? void 0 : _b.curves)) {
+      const cache = g.cacheArea,
+        totalLen = cache.top.curves.reduce((a, b) => a + b.getLength(), 0);
+      return this._updateCurves(customPath, cache.top.curves, totalLen, ratio);
+    }
+  }
+  _updateCurves(customPath, curves, totalLen, ratio) {
+    var _a, _b;
+    const startLen = totalLen * ratio,
+      endLen = Math.min(null !== (_b = startLen + (null === (_a = this.params) || void 0 === _a ? void 0 : _a.streamLength)) && void 0 !== _b ? _b : 10, totalLen);
+    let lastLen = 0,
+      start = !1;
+    for (let i = 0; i < curves.length; i++) if (!1 !== curves[i].defined) {
+      const curveItem = curves[i],
+        len = curveItem.getLength(),
+        startPercent = 1 - (lastLen + len - startLen) / len;
+      let curveForStart,
+        endPercent = 1 - (lastLen + len - endLen) / len;
+      if (lastLen < startLen && lastLen + len > startLen) if (start = !0, curveItem.p2 && curveItem.p3) {
+        const [_, curve2] = divideCubic(curveItem, startPercent);
+        customPath.moveTo(curve2.p0.x, curve2.p0.y), curveForStart = curve2;
+      } else {
+        const p = curveItem.getPointAt(startPercent);
+        customPath.moveTo(p.x, p.y);
+      }
+      if (lastLen < endLen && lastLen + len > endLen) {
+        if (curveItem.p2 && curveItem.p3) {
+          curveForStart && (endPercent = (endLen - startLen) / curveForStart.getLength());
+          const [curve1] = divideCubic(curveForStart || curveItem, endPercent);
+          customPath.bezierCurveTo(curve1.p1.x, curve1.p1.y, curve1.p2.x, curve1.p2.y, curve1.p3.x, curve1.p3.y);
+        } else {
+          const p = curveItem.getPointAt(endPercent);
+          customPath.lineTo(p.x, p.y);
+        }
+        break;
+      }
+      if (start) if (curveItem.p2 && curveItem.p3) {
+        const curve = curveForStart || curveItem;
+        customPath.bezierCurveTo(curve.p1.x, curve.p1.y, curve.p2.x, curve.p2.y, curve.p3.x, curve.p3.y);
+      } else customPath.lineTo(curveItem.p1.x, curveItem.p1.y);
+      lastLen += len;
+    }
+  }
+  _onUpdateLineWithoutCache(customPath, line, end, ratio, out) {
+    var _a, _b;
+    const {
+      points: points,
+      curveType: curveType
+    } = line.attribute;
+    if (!points || points.length < 2 || "linear" !== curveType) return;
+    let totalLen = 0;
+    for (let i = 1; i < points.length; i++) totalLen += PointService.distancePP(points[i], points[i - 1]);
+    const startLen = totalLen * ratio,
+      endLen = Math.min(null !== (_b = startLen + (null === (_a = this.params) || void 0 === _a ? void 0 : _a.streamLength)) && void 0 !== _b ? _b : 10, totalLen),
+      nextPoints = [];
+    let lastLen = 0;
+    for (let i = 1; i < points.length; i++) {
+      const len = PointService.distancePP(points[i], points[i - 1]);
+      if (lastLen < startLen && lastLen + len > startLen && nextPoints.push(PointService.pointAtPP(points[i - 1], points[i], 1 - (lastLen + len - startLen) / len)), lastLen < endLen && lastLen + len > endLen) {
+        nextPoints.push(PointService.pointAtPP(points[i - 1], points[i], 1 - (lastLen + len - endLen) / len));
+        break;
+      }
+      nextPoints.length && nextPoints.push(points[i]), lastLen += len;
+    }
+    if (nextPoints.length && !(nextPoints.length < 2)) {
+      customPath.clear(), customPath.moveTo(nextPoints[0].x, nextPoints[0].y);
+      for (let i = 1; i < nextPoints.length; i++) customPath.lineTo(nextPoints[i].x, nextPoints[i].y);
+    }
+  }
+}
 class TagPointsUpdate extends ACustomAnimate {
   constructor(from, to, duration, easing, params) {
     var _a, _b;
@@ -13419,23 +13710,27 @@ class TagPointsUpdate extends ACustomAnimate {
     isValidNumber$1(lastClipRange * this.clipRange) && (this.clipRange *= lastClipRange);
   }
   onUpdate(end, ratio, out) {
-    if (this.points = this.points.map((point, index) => {
-      const newPoint = pointInterpolation(this.interpolatePoints[index][0], this.interpolatePoints[index][1], ratio);
-      return newPoint.context = point.context, newPoint;
-    }), this.clipRange) {
-      if (this.shrinkClipRange) return void (end ? (out.points = this.toPoints, out.clipRange = 1) : (out.points = this.fromPoints, out.clipRange = this.clipRange - (this.clipRange - this.shrinkClipRange) * ratio));
-      out.clipRange = this.clipRange + (1 - this.clipRange) * ratio;
-    }
-    if (this.segmentsCache && this.to.segments) {
-      let start = 0;
-      out.segments = this.to.segments.map((segment, index) => {
-        const end = start + this.segmentsCache[index],
-          points = this.points.slice(start, end);
-        return start = end, Object.assign(Object.assign({}, segment), {
-          points: points
+    if (end) Object.keys(this.to).forEach(k => {
+      out[k] = this.to[k];
+    });else {
+      if (this.points = this.points.map((point, index) => {
+        const newPoint = pointInterpolation(this.interpolatePoints[index][0], this.interpolatePoints[index][1], ratio);
+        return newPoint.context = point.context, newPoint;
+      }), this.clipRange) {
+        if (this.shrinkClipRange) return void (end ? (out.points = this.toPoints, out.clipRange = 1) : (out.points = this.fromPoints, out.clipRange = this.clipRange - (this.clipRange - this.shrinkClipRange) * ratio));
+        out.clipRange = this.clipRange + (1 - this.clipRange) * ratio;
+      }
+      if (this.segmentsCache && this.to.segments) {
+        let start = 0;
+        out.segments = this.to.segments.map((segment, index) => {
+          const end = start + this.segmentsCache[index],
+            points = this.points.slice(start, end);
+          return start = end, Object.assign(Object.assign({}, segment), {
+            points: points
+          });
         });
-      });
-    } else out.points = this.points;
+      } else out.points = this.points;
+    }
   }
 }
 class ClipGraphicAnimate extends ACustomAnimate {
@@ -20840,6 +21135,9 @@ class BaseRender {
   init(contributions) {
     contributions && (this._renderContribitions = contributions.getContributions()), this._renderContribitions || (this._renderContribitions = []), this.builtinContributions || (this.builtinContributions = []), this.builtinContributions.push(defaultBaseClipRenderBeforeContribution), this.builtinContributions.push(defaultBaseClipRenderAfterContribution), this.builtinContributions.forEach(item => this._renderContribitions.push(item)), this._renderContribitions.length && (this._renderContribitions.sort((a, b) => b.order - a.order), this._beforeRenderContribitions = this._renderContribitions.filter(c => c.time === BaseRenderContributionTime.beforeFillStroke), this._afterRenderContribitions = this._renderContribitions.filter(c => c.time === BaseRenderContributionTime.afterFillStroke));
   }
+  reInit() {
+    this.init(this.graphicRenderContributions);
+  }
   beforeRenderStep(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, params) {
     this._beforeRenderContribitions && this._beforeRenderContribitions.forEach(c => {
       if (c.supportedAppName && graphic.stage && graphic.stage.params && graphic.stage.params.context && graphic.stage.params.context.appName) {
@@ -21009,8 +21307,8 @@ var __decorate$1s = undefined && undefined.__decorate || function (decorators, t
     };
   };
 let DefaultCanvasArcRender = class extends BaseRender {
-  constructor(arcRenderContribitions) {
-    super(), this.arcRenderContribitions = arcRenderContribitions, this.numberType = ARC_NUMBER_TYPE, this.builtinContributions = [defaultArcRenderContribution, defaultArcBackgroundRenderContribution, defaultArcTextureRenderContribution], this.init(arcRenderContribitions);
+  constructor(graphicRenderContributions) {
+    super(), this.graphicRenderContributions = graphicRenderContributions, this.numberType = ARC_NUMBER_TYPE, this.builtinContributions = [defaultArcRenderContribution, defaultArcBackgroundRenderContribution, defaultArcTextureRenderContribution], this.init(graphicRenderContributions);
   }
   drawArcTailCapPath(arc, context, cx, cy, outerRadius, innerRadius, _sa, _ea) {
     const capAngle = _ea - _sa,
@@ -21185,8 +21483,8 @@ var __decorate$1r = undefined && undefined.__decorate || function (decorators, t
     };
   };
 let DefaultCanvasCircleRender = class extends BaseRender {
-  constructor(circleRenderContribitions) {
-    super(), this.circleRenderContribitions = circleRenderContribitions, this.numberType = CIRCLE_NUMBER_TYPE, this.builtinContributions = [defaultCircleRenderContribution, defaultCircleBackgroundRenderContribution, defaultCircleTextureRenderContribution], this.init(circleRenderContribitions);
+  constructor(graphicRenderContributions) {
+    super(), this.graphicRenderContributions = graphicRenderContributions, this.numberType = CIRCLE_NUMBER_TYPE, this.builtinContributions = [defaultCircleRenderContribution, defaultCircleBackgroundRenderContribution, defaultCircleTextureRenderContribution], this.init(graphicRenderContributions);
   }
   drawShape(circle, context, x, y, drawContext, params, fillCb, strokeCb) {
     const circleAttribute = getTheme$1(circle, null == params ? void 0 : params.theme).circle,
@@ -21572,8 +21870,8 @@ var __decorate$1p = undefined && undefined.__decorate || function (decorators, t
     };
   };
 let DefaultCanvasAreaRender = class extends BaseRender {
-  constructor(areaRenderContribitions) {
-    super(), this.areaRenderContribitions = areaRenderContribitions, this.numberType = AREA_NUMBER_TYPE, this.builtinContributions = [defaultAreaTextureRenderContribution, defaultAreaBackgroundRenderContribution], this.init(areaRenderContribitions);
+  constructor(graphicRenderContributions) {
+    super(), this.graphicRenderContributions = graphicRenderContributions, this.numberType = AREA_NUMBER_TYPE, this.builtinContributions = [defaultAreaTextureRenderContribution, defaultAreaBackgroundRenderContribution], this.init(graphicRenderContributions);
   }
   drawLinearAreaHighPerformance(area, context, fill, stroke, fillOpacity, strokeOpacity, offsetX, offsetY, areaAttribute, drawContext, params, fillCb, strokeCb) {
     var _a, _b, _c;
@@ -21816,8 +22114,8 @@ var __decorate$1o = undefined && undefined.__decorate || function (decorators, t
     };
   };
 let DefaultCanvasPathRender = class extends BaseRender {
-  constructor(pathRenderContribitions) {
-    super(), this.pathRenderContribitions = pathRenderContribitions, this.numberType = PATH_NUMBER_TYPE, this.builtinContributions = [defaultPathBackgroundRenderContribution, defaultPathTextureRenderContribution], this.init(pathRenderContribitions);
+  constructor(graphicRenderContributions) {
+    super(), this.graphicRenderContributions = graphicRenderContributions, this.numberType = PATH_NUMBER_TYPE, this.builtinContributions = [defaultPathBackgroundRenderContribution, defaultPathTextureRenderContribution], this.init(graphicRenderContributions);
   }
   drawShape(path, context, x, y, drawContext, params, fillCb, strokeCb) {
     var _a, _b, _c;
@@ -21872,8 +22170,8 @@ var __decorate$1n = undefined && undefined.__decorate || function (decorators, t
     };
   };
 let DefaultCanvasRectRender = class extends BaseRender {
-  constructor(rectRenderContribitions) {
-    super(), this.rectRenderContribitions = rectRenderContribitions, this.type = "rect", this.numberType = RECT_NUMBER_TYPE, this.builtinContributions = [defaultRectRenderContribution, defaultRectBackgroundRenderContribution, defaultRectTextureRenderContribution], this.init(rectRenderContribitions);
+  constructor(graphicRenderContributions) {
+    super(), this.graphicRenderContributions = graphicRenderContributions, this.type = "rect", this.numberType = RECT_NUMBER_TYPE, this.builtinContributions = [defaultRectRenderContribution, defaultRectBackgroundRenderContribution, defaultRectTextureRenderContribution], this.init(graphicRenderContributions);
   }
   drawShape(rect, context, x, y, drawContext, params, fillCb, strokeCb) {
     var _a;
@@ -21944,8 +22242,8 @@ var __decorate$1m = undefined && undefined.__decorate || function (decorators, t
     };
   };
 let DefaultCanvasSymbolRender = class extends BaseRender {
-  constructor(symbolRenderContribitions) {
-    super(), this.symbolRenderContribitions = symbolRenderContribitions, this.numberType = SYMBOL_NUMBER_TYPE, this.builtinContributions = [defaultSymbolRenderContribution, defaultSymbolBackgroundRenderContribution, defaultSymbolTextureRenderContribution, defaultSymbolClipRangeStrokeRenderContribution], this.init(symbolRenderContribitions);
+  constructor(graphicRenderContributions) {
+    super(), this.graphicRenderContributions = graphicRenderContributions, this.numberType = SYMBOL_NUMBER_TYPE, this.builtinContributions = [defaultSymbolRenderContribution, defaultSymbolBackgroundRenderContribution, defaultSymbolTextureRenderContribution, defaultSymbolClipRangeStrokeRenderContribution], this.init(graphicRenderContributions);
   }
   drawShape(symbol, context, x, y, drawContext, params, fillCb, strokeCb) {
     var _a;
@@ -22116,8 +22414,8 @@ var __decorate$1l = undefined && undefined.__decorate || function (decorators, t
     };
   };
 let DefaultCanvasTextRender = class extends BaseRender {
-  constructor(textRenderContribitions) {
-    super(), this.textRenderContribitions = textRenderContribitions, this.numberType = TEXT_NUMBER_TYPE, this.builtinContributions = [defaultTextBackgroundRenderContribution], this.init(textRenderContribitions);
+  constructor(graphicRenderContributions) {
+    super(), this.graphicRenderContributions = graphicRenderContributions, this.numberType = TEXT_NUMBER_TYPE, this.builtinContributions = [defaultTextBackgroundRenderContribution], this.init(graphicRenderContributions);
   }
   drawShape(text, context, x, y, drawContext, params, fillCb, strokeCb) {
     var _a, _b, _c;
@@ -22321,8 +22619,8 @@ var __decorate$1k = undefined && undefined.__decorate || function (decorators, t
     };
   };
 let DefaultCanvasPolygonRender = class extends BaseRender {
-  constructor(polygonRenderContribitions) {
-    super(), this.polygonRenderContribitions = polygonRenderContribitions, this.numberType = POLYGON_NUMBER_TYPE, this.builtinContributions = [defaultPolygonBackgroundRenderContribution, defaultPolygonTextureRenderContribution], this.init(polygonRenderContribitions);
+  constructor(graphicRenderContributions) {
+    super(), this.graphicRenderContributions = graphicRenderContributions, this.numberType = POLYGON_NUMBER_TYPE, this.builtinContributions = [defaultPolygonBackgroundRenderContribution, defaultPolygonTextureRenderContribution], this.init(graphicRenderContributions);
   }
   drawShape(polygon, context, x, y, drawContext, params, fillCb, strokeCb) {
     const polygonAttribute = getTheme$1(polygon, null == params ? void 0 : params.theme).polygon,
@@ -22377,6 +22675,9 @@ let DefaultCanvasGroupRender = class {
   constructor(groupRenderContribitions) {
     this.groupRenderContribitions = groupRenderContribitions, this.numberType = GROUP_NUMBER_TYPE;
   }
+  reInit() {
+    this._groupRenderContribitions = this.groupRenderContribitions.getContributions() || [], this._groupRenderContribitions.push(defaultGroupBackgroundRenderContribution);
+  }
   drawShape(group, context, x, y, drawContext, params, fillCb, strokeCb) {
     const groupAttribute = getTheme$1(group, null == params ? void 0 : params.theme).group,
       {
@@ -22507,8 +22808,8 @@ var __decorate$1i = undefined && undefined.__decorate || function (decorators, t
   };
 const repeatStr = ["", "repeat-x", "repeat-y", "repeat"];
 let DefaultCanvasImageRender = class extends BaseRender {
-  constructor(imageRenderContribitions) {
-    super(), this.imageRenderContribitions = imageRenderContribitions, this.numberType = IMAGE_NUMBER_TYPE, this.builtinContributions = [defaultImageRenderContribution, defaultImageBackgroundRenderContribution], this.init(imageRenderContribitions);
+  constructor(graphicRenderContributions) {
+    super(), this.graphicRenderContributions = graphicRenderContributions, this.numberType = IMAGE_NUMBER_TYPE, this.builtinContributions = [defaultImageRenderContribution, defaultImageBackgroundRenderContribution], this.init(graphicRenderContributions);
   }
   drawShape(image, context, x, y, drawContext, params, fillCb, strokeCb) {
     const imageAttribute = getTheme$1(image).image,
@@ -22835,6 +23136,9 @@ let DefaultRenderService = class {
   afterDraw(params) {
     this.drawContribution.afterDraw && this.drawContribution.afterDraw(this, Object.assign({}, this.drawParams));
   }
+  reInit() {
+    this.drawContribution.reInit();
+  }
   render(groups, params) {
     this.renderTreeRoots = groups, this.drawParams = params;
     const updateBounds = params.updateBounds;
@@ -23236,6 +23540,11 @@ let DefaultDrawContribution = class {
   constructor(contributions, drawItemInterceptorContributions) {
     this.contributions = contributions, this.drawItemInterceptorContributions = drawItemInterceptorContributions, this.currentRenderMap = new Map(), this.defaultRenderMap = new Map(), this.styleRenderMap = new Map(), this.dirtyBounds = new Bounds(), this.backupDirtyBounds = new Bounds(), this.global = application.global, this.layerService = application.layerService, isArray$1(this.contributions) || (this.contributions = [this.contributions]), this.init();
   }
+  reInit() {
+    this.init(), this.contributions.forEach(item => {
+      item.reInit();
+    });
+  }
   init() {
     this.contributions.forEach(item => {
       if (item.style) {
@@ -24355,6 +24664,9 @@ class Stage extends Group$1 {
   getPickerService() {
     return this.pickerService || (this.pickerService = container.get(PickerService)), this.pickerService;
   }
+  reInit() {
+    this.renderService.reInit(), this.pickerService.reInit();
+  }
 }
 
 function createStage(params) {
@@ -24952,6 +25264,9 @@ let DefaultPickService = class {
   constructor(pickItemInterceptorContributions, pickServiceInterceptorContributions) {
     this.pickItemInterceptorContributions = pickItemInterceptorContributions, this.pickServiceInterceptorContributions = pickServiceInterceptorContributions, this.type = "default", this.global = application.global;
   }
+  reInit() {
+    this._init();
+  }
   _init() {
     this.InterceptorContributions = this.pickItemInterceptorContributions.getContributions().sort((a, b) => a.order - b.order), this.pickerServiceInterceptorContributions = this.pickServiceInterceptorContributions.getContributions().sort((a, b) => a.order - b.order);
   }
@@ -25120,6 +25435,7 @@ let DefaultCanvasGlyphRender = class {
   constructor() {
     this.numberType = GLYPH_NUMBER_TYPE;
   }
+  reInit() {}
   drawShape(glyph, context, x, y, drawContext, params, fillCb, strokeCb) {
     drawContext.drawContribution && glyph.getSubGraphic().forEach(item => {
       const renderer = drawContext.drawContribution.getRenderContribution(item);
@@ -48437,9 +48753,9 @@ function stackMosaic(s, stackCache, mosaicData) {
                 var _a, _b;
                 const groupValues = stackCache.nodes[group];
                 let value;
-                if (s.bandField) {
+                if (s.bandWidthField) {
                     value =
-                        (_b = (_a = groupValues.values.find(v => isValid$1(v[s.bandField]))) === null || _a === void 0 ? void 0 : _a[s.bandField]) !== null && _b !== void 0 ? _b : groupValues.total;
+                        (_b = (_a = groupValues.values.find(v => isValid$1(v[s.bandWidthField]))) === null || _a === void 0 ? void 0 : _a[s.bandWidthField]) !== null && _b !== void 0 ? _b : groupValues.total;
                 }
                 else {
                     value = groupValues.total;
@@ -49327,6 +49643,7 @@ const isStopsEqual = (prev, next) => {
     if (prev === next) return !0;
     if (typeof prev != typeof next) return !1;
     if (isString$1(prev)) return !1;
+    if (isArray$1(prev)) return prev.length === next.length && prev.every((prevEntry, index) => isColorAttrEqual(prevEntry, next[index]));
     if (prev.gradient !== next.gradient) return !1;
     const prevKeys = Object.keys(prev),
       nextKeys = Object.keys(next);
@@ -49924,7 +50241,7 @@ class ElementHighlight extends BaseInteraction {
       if (element) {
         const hasActiveElement = this._marks && this._marks.includes(element.mark);
         "view" !== this._resetType || hasActiveElement ? "self" === this._resetType && hasActiveElement && this.resetAll() : this.resetAll();
-      }
+      } else "view" === this._resetType && this.resetAll();
     }, 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() {
@@ -55906,26 +56223,29 @@ const growPointsOut = (element, options, animationParameters) => ({
     points: getCenterPoints(element, options)
   }
 });
-const changePointsX = (element, options, animationParameters) => element.getGraphicAttribute("points", !1).map(point => {
+const changePointsX = (element, options, animationParameters) => {
   var _a;
-  if (options && "negative" === options.orient) {
-    let groupRight = animationParameters.width;
-    return animationParameters.group && (groupRight = null !== (_a = animationParameters.groupWidth) && void 0 !== _a ? _a : animationParameters.group.getBounds().width(), animationParameters.groupWidth = groupRight), Object.assign(Object.assign({}, point), {
-      x: groupRight,
+  return (null !== (_a = element.getGraphicAttribute("points", !1)) && void 0 !== _a ? _a : []).map(point => {
+    var _a;
+    if (options && "negative" === options.orient) {
+      let groupRight = animationParameters.width;
+      return animationParameters.group && (groupRight = null !== (_a = animationParameters.groupWidth) && void 0 !== _a ? _a : animationParameters.group.getBounds().width(), animationParameters.groupWidth = groupRight), Object.assign(Object.assign({}, point), {
+        x: groupRight,
+        y: point.y,
+        x1: groupRight,
+        y1: point.y1,
+        defined: !1 !== point.defined
+      });
+    }
+    return Object.assign(Object.assign({}, point), {
+      x: 0,
       y: point.y,
-      x1: groupRight,
+      x1: 0,
       y1: point.y1,
       defined: !1 !== point.defined
     });
-  }
-  return Object.assign(Object.assign({}, point), {
-    x: 0,
-    y: point.y,
-    x1: 0,
-    y1: point.y1,
-    defined: !1 !== point.defined
   });
-});
+};
 const growPointsXIn = (element, options, animationParameters) => ({
   from: {
     points: changePointsX(element, options, animationParameters)
@@ -55942,26 +56262,29 @@ const growPointsXOut = (element, options, animationParameters) => ({
     points: changePointsX(element, options, animationParameters)
   }
 });
-const changePointsY = (element, options, animationParameters) => element.getGraphicAttribute("points", !1).map(point => {
+const changePointsY = (element, options, animationParameters) => {
   var _a;
-  if (options && "negative" === options.orient) {
-    let groupBottom = animationParameters.height;
-    return animationParameters.group && (groupBottom = null !== (_a = animationParameters.groupHeight) && void 0 !== _a ? _a : animationParameters.group.getBounds().height(), animationParameters.groupHeight = groupBottom), Object.assign(Object.assign({}, point), {
+  return (null !== (_a = element.getGraphicAttribute("points", !1)) && void 0 !== _a ? _a : []).map(point => {
+    var _a;
+    if (options && "negative" === options.orient) {
+      let groupBottom = animationParameters.height;
+      return animationParameters.group && (groupBottom = null !== (_a = animationParameters.groupHeight) && void 0 !== _a ? _a : animationParameters.group.getBounds().height(), animationParameters.groupHeight = groupBottom), Object.assign(Object.assign({}, point), {
+        x: point.x,
+        y: groupBottom,
+        x1: point.x1,
+        y1: groupBottom,
+        defined: !1 !== point.defined
+      });
+    }
+    return Object.assign(Object.assign({}, point), {
       x: point.x,
-      y: groupBottom,
+      y: 0,
       x1: point.x1,
-      y1: groupBottom,
+      y1: 0,
       defined: !1 !== point.defined
     });
-  }
-  return Object.assign(Object.assign({}, point), {
-    x: point.x,
-    y: 0,
-    x1: point.x1,
-    y1: 0,
-    defined: !1 !== point.defined
   });
-});
+};
 const growPointsYIn = (element, options, animationParameters) => ({
   from: {
     points: changePointsY(element, options, animationParameters)
@@ -63876,7 +64199,7 @@ const registerVChartCore = () => {
 };
 registerVChartCore();
 
-const version = "1.13.10-alpha.1";
+const version = "1.13.11-alpha.0";
 
 const addVChartProperty = (data, op) => {
     const context = op.beforeCall();
@@ -90012,8 +90335,8 @@ class MosaicSeries extends BarSeries {
         this.type = SeriesTypeEnum.mosaic;
         this.transformerConstructor = BarSeriesSpecTransformer;
     }
-    get bandField() {
-        return this._bandField;
+    get bandWidthField() {
+        return this._bandWidthField;
     }
     getStack() {
         return true;
@@ -90043,8 +90366,8 @@ class MosaicSeries extends BarSeries {
             this.setFieldX(MOSAIC_CAT_END_PERCENT);
             this.setFieldX2(MOSAIC_CAT_START_PERCENT);
         }
-        if (this._spec.bandField) {
-            this._bandField = this._spec.bandField;
+        if (this._spec.bandWidthField) {
+            this._bandWidthField = this._spec.bandWidthField;
         }
     }
     parseLabelStyle(labelStyle, labelSpec) {
@@ -94271,18 +94594,17 @@ class Tooltip extends BaseComponent {
         if (!this._needInitEventOfTooltip) {
             return;
         }
-        const container = (_b = (_a = this.tooltipHandler).getTooltipContainer) === null || _b === void 0 ? void 0 : _b.call(_a);
-        const element = container === null || container === void 0 ? void 0 : container.firstChild;
-        if (element) {
-            element.addEventListener('pointerenter', () => {
+        const container = (_b = (_a = this.tooltipHandler).getRootDom) === null || _b === void 0 ? void 0 : _b.call(_a);
+        if (container) {
+            container.addEventListener('pointerenter', () => {
                 var _a;
                 if (!this._enterable) {
                     return;
                 }
                 this._isEnterTooltip = true;
-                const rect = (_a = element.getBoundingClientRect) === null || _a === void 0 ? void 0 : _a.call(element);
+                const rect = (_a = container.getBoundingClientRect) === null || _a === void 0 ? void 0 : _a.call(container);
                 if (rect) {
-                    this._cacheEnterableRect = { x: rect.x, y: rect.y, width: rect.width, height: rect.height };
+                    this._cacheEnterableRect = { width: rect.width, height: rect.height };
                 }
                 if (this._outTimer) {
                     clearTimeout(this._outTimer);
@@ -94293,14 +94615,14 @@ class Tooltip extends BaseComponent {
                     this._showTimer = null;
                 }
             });
-            element.addEventListener('pointerleave', () => {
+            container.addEventListener('pointerleave', () => {
                 var _a, _b, _c;
                 if (!this._enterable) {
                     return;
                 }
                 this._isEnterTooltip = false;
                 if (this._cacheEnterableRect) {
-                    const newRect = (_a = element.getBoundingClientRect) === null || _a === void 0 ? void 0 : _a.call(element);
+                    const newRect = (_a = container.getBoundingClientRect) === null || _a === void 0 ? void 0 : _a.call(container);
                     if (newRect &&
                         Object.keys(this._cacheEnterableRect).every(k => this._cacheEnterableRect[k] === newRect[k])) {
                         this._cacheEnterableRect = null;
@@ -102714,6 +103036,9 @@ class DomTooltipHandler extends BaseTooltipHandler {
             this._rootDom.style.visibility = _value ? 'visible' : 'hidden';
         }
     }
+    getRootDom() {
+        return this._rootDom;
+    }
     constructor() {
         super(DomTooltipHandler.type);
         this.type = TooltipHandlerType.dom;
@@ -103647,7 +103972,7 @@ class MosaicChartSpecTransformer extends CartesianChartSpecTransformer {
             'barMinHeight',
             'stackCornerRadius',
             'bar',
-            'bandField'
+            'bandWidthField'
         ]);
     }
     transformSpec(spec) {
@@ -104120,4 +104445,4 @@ const registerMediaQuery = () => {
     registerChartPlugin(MediaQuery);
 };
 
-export { Arc3dMark, ArcMark, AreaChart, AreaMark, AreaSeries, AxisSyncPlugin, Bar3dChart, Bar3dSeries, BarChart, BarSeries, BaseChart, BaseChartSpecTransformer, BaseMark, BaseSeries, BoxPlotChart, BoxPlotSeries, Brush, CanvasTooltipHandler, CartesianAxis, CartesianBandAxis, CartesianChartSpecTransformer, CartesianCrossHair, CartesianLinearAxis, CartesianLogAxis, CartesianMarkArea, CartesianMarkLine, CartesianMarkPoint, CartesianSeries, CartesianSymlogAxis, CartesianTimeAxis, CirclePackingChart, CirclePackingSeries, CircularProgressChart, CircularProgressSeries, CommonChart, CommonChartSpecTransformer, ComponentMark, ComposedEventMapper, ContinuousLegend, CorrelationChart, CorrelationSeries, CustomMark, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, DEFAULT_DATA_INDEX, DEFAULT_DATA_KEY, DEFAULT_DATA_SERIES_FIELD, DEFAULT_MEASURE_CANVAS_ID, DEFAULT_SERIES_STYLE_NAME, DataZoom, DimensionClickEvent, DimensionEventEnum, DimensionHoverEvent, DiscreteLegend, DomTooltipHandler, DotSeries, Event$1 as Event, Factory$1 as Factory, FormatterPlugin, Funnel3dChart, Funnel3dSeries, FunnelChart, FunnelSeries, GaugeChart, GaugePointerSeries, GaugeSeries, GeoCoordinate, GeoMarkPoint, GridLayout, GroupMark, HeatmapChart, HeatmapSeries, Histogram3dChart, HistogramChart, ImageMark, Indicator, Label, Layout$1 as Layout, Layout3d, LineChart, LineMark, LineSeries, LinearProgressChart, LinearProgressSeries, LinkSeries, LiquidChart, LiquidSeries, MOSAIC_CAT_END_PERCENT, MOSAIC_CAT_START_PERCENT, MOSAIC_VALUE_END_PERCENT, MOSAIC_VALUE_START_PERCENT, MapChart, MapLabelComponent, MapSeries, MediaQuery, MosaicChart, MosaicSeries, PREFIX, PathMark, PictogramChart, PictogramSeries, Pie3dChart, Pie3dSeries, PieChart, PieSeries, Player, PolarAxis, PolarBandAxis, PolarCrossHair, PolarLinearAxis, PolarMarkArea, PolarMarkLine, PolarMarkPoint, PolarSeries, PolygonMark, ProgressLikeSeries, Pyramid3dMark, RadarChart, RadarSeries, RangeAreaChart, RangeAreaSeries, RangeColumn3dChart, RangeColumn3dSeries, RangeColumnChart, RangeColumnSeries, Rect3dMark, RectMark, RenderModeEnum, RippleMark, RoseChart, RoseLikeSeries, RoseSeries, RuleMark, SEGMENT_FIELD_END, SEGMENT_FIELD_START, STACK_FIELD_END, STACK_FIELD_END_OffsetSilhouette, STACK_FIELD_END_PERCENT, STACK_FIELD_KEY, STACK_FIELD_START, STACK_FIELD_START_OffsetSilhouette, STACK_FIELD_START_PERCENT, STACK_FIELD_TOTAL, STACK_FIELD_TOTAL_BOTTOM, STACK_FIELD_TOTAL_PERCENT, STACK_FIELD_TOTAL_TOP, SankeyChart, SankeySeries, ScatterChart, ScatterSeries, ScrollBar, SequenceChart, SeriesMarkNameEnum, SeriesTypeEnum, SeriesTypeForThemeEnum, SunburstChart, SunburstSeries, SymbolMark, TextMark, ThemeManager$1 as ThemeManager, Title, Tooltip, TooltipResult, TotalLabel, TreemapChart, TreemapSeries, VChart, VennChart, VennSeries, WaterfallChart, WaterfallSeries, WordCloud3dChart, WordCloud3dSeries, WordCloudChart, WordCloudSeries, alternatingWave, builtinThemes, centerToCorner, columnCenterToEdge, columnEdgeToCenter, columnLeftToRight, columnRightToLeft, computeActualDataScheme, cornerToCenter, createArc, createArea, createGroup, createLine, createRect, createRichText, createSymbol, createText, darkTheme$1 as darkTheme, dataScheme, VChart as default, defaultThemeName, diagonalCenterToEdge, diagonalTopLeftToBottomRight, functionTransform, getActualColor, getCartesianDimensionInfo, getColorSchemeBySeries, getDataScheme, getFieldAlias, getMergedTheme, getPolarDimensionInfo, getRegionStackGroup, getTheme, hasThemeMerged, isColorKey, isProgressiveDataColorScheme, isTokenKey, lightTheme, mergeFields, particleEffect, pulseWave, queryColorFromColorScheme, queryToken, randomOpacity, register3DPlugin, registerAllEnv, registerAllMarks, registerAnimate, registerArc3dMark, registerArcMark, registerAreaChart, registerAreaMark, registerAreaSeries, registerBar3dChart, registerBar3dSeries, registerBarChart, registerBarSeries, registerBoxplotChart, registerBoxplotSeries, registerBrowserEnv, registerBrush, registerCanvasTooltipHandler, registerCartesianBandAxis, registerCartesianCrossHair, registerCartesianLinearAxis, registerCartesianLogAxis, registerCartesianSymlogAxis, registerCartesianTimeAxis, registerChartPlugin, registerCirclePackingChart, registerCirclePackingSeries, registerCircularProgressChart, registerCircularProgressSeries, registerCommonChart, registerComponentMark, registerContinuousLegend, registerCorrelationChart, registerCustomMark, registerDataZoom, registerDiscreteLegend, registerDomTooltipHandler, registerDotSeries, registerDragPlugin, registerFormatPlugin, registerFunnel3dChart, registerFunnel3dSeries, registerFunnelChart, registerFunnelSeries, registerGaugeChart, registerGaugePointerSeries, registerGaugeSeries, registerGeoCoordinate, registerGeoMarkPoint, registerGesturePlugin, registerGridLayout, registerGroupMark, registerHarmonyEnv, registerHeatmapChart, registerHeatmapSeries, registerHistogram3dChart, registerHistogramChart, registerHtmlAttributePlugin, registerImageMark, registerIndicator, registerLabel, registerLarkEnv, registerLayout3d, registerLineChart, registerLineMark, registerLineSeries, registerLinearProgressChart, registerLinearProgressSeries, registerLinkSeries, registerLiquidChart, registerLiquidSeries, registerLynxEnv, registerMapChart, registerMapLabel, registerMapSeries, registerMarkArea, registerMarkLine, registerMarkPoint, registerMediaQuery, registerMorph, registerMosaicChart, registerMosaicSeries, registerNodeEnv, registerPathMark, registerPictogramChart, registerPictogramSeries, registerPie3dChart, registerPie3dSeries, registerPieChart, registerPieSeries, registerPlayer, registerPolarBandAxis, registerPolarCrossHair, registerPolarLinearAxis, registerPolarMarkArea, registerPolarMarkLine, registerPolarMarkPoint, registerPolygonMark, registerPoptip, registerPyramid3dMark, registerRadarChart, registerRadarSeries, registerRangeAreaChart, registerRangeAreaSeries, registerRangeColumn3dChart, registerRangeColumn3dSeries, registerRangeColumnChart, registerRangeColumnSeries, registerReactAttributePlugin, registerRect3dMark, registerRectMark, registerRippleMark, registerRoseChart, registerRoseSeries, registerRuleMark, registerSankeyChart, registerSankeySeries, registerScatterChart, registerScatterSeries, registerScrollBar, registerSequenceChart, registerSunBurstSeries, registerSunburstChart, registerSymbolMark, registerTTEnv, registerTaroEnv, registerTextMark, registerTheme, registerTitle, registerTooltip, registerTotalLabel, registerTreemapChart, registerTreemapSeries, registerVennChart, registerVennSeries, registerWXEnv, registerWaterfallChart, registerWaterfallSeries, registerWordCloud3dChart, registerWordCloud3dSeries, registerWordCloudChart, registerWordCloudSeries, registerWordCloudShapeChart, removeTheme, rippleEffect, rotationScan, rowBottomToTop, rowCenterToEdge, rowEdgeToCenter, rowTopToBottom, snakeWave, sortStackValueGroup, specTransform, spiralEffect, stack, stackGroup, stackMosaic, stackMosaicTotal, stackOffsetSilhouette, stackTotal, themeExist, themes, token, transformColorSchemeToStandardStruct, version, vglobal };
+export { Arc3dMark, ArcMark, AreaChart, AreaMark, AreaSeries, AxisSyncPlugin, Bar3dChart, Bar3dSeries, BarChart, BarSeries, BaseChart, BaseChartSpecTransformer, BaseMark, BaseSeries, BoxPlotChart, BoxPlotSeries, Brush, CanvasTooltipHandler, CartesianAxis, CartesianBandAxis, CartesianChartSpecTransformer, CartesianCrossHair, CartesianLinearAxis, CartesianLogAxis, CartesianMarkArea, CartesianMarkLine, CartesianMarkPoint, CartesianSeries, CartesianSymlogAxis, CartesianTimeAxis, CirclePackingChart, CirclePackingSeries, CircularProgressChart, CircularProgressSeries, CommonChart, CommonChartSpecTransformer, ComponentMark, ComposedEventMapper, ContinuousLegend, CorrelationChart, CorrelationSeries, CustomMark, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, DEFAULT_DATA_INDEX, DEFAULT_DATA_KEY, DEFAULT_DATA_SERIES_FIELD, DEFAULT_MEASURE_CANVAS_ID, DEFAULT_SERIES_STYLE_NAME, DataZoom, DimensionClickEvent, DimensionEventEnum, DimensionHoverEvent, DiscreteLegend, DomTooltipHandler, DotSeries, Event$1 as Event, Factory$1 as Factory, FormatterPlugin, Funnel3dChart, Funnel3dSeries, FunnelChart, FunnelSeries, GaugeChart, GaugePointerSeries, GaugeSeries, GeoCoordinate, GeoMarkPoint, GridLayout, GroupMark, HeatmapChart, HeatmapSeries, Histogram3dChart, HistogramChart, ImageMark, Indicator, Label, Layout$1 as Layout, Layout3d, LineChart, LineMark, LineSeries, LinearProgressChart, LinearProgressSeries, LinkSeries, LiquidChart, LiquidSeries, MOSAIC_CAT_END_PERCENT, MOSAIC_CAT_START_PERCENT, MOSAIC_VALUE_END_PERCENT, MOSAIC_VALUE_START_PERCENT, ManualTicker, MapChart, MapLabelComponent, MapSeries, MediaQuery, MosaicChart, MosaicSeries, PREFIX, PathMark, PictogramChart, PictogramSeries, Pie3dChart, Pie3dSeries, PieChart, PieSeries, Player, PolarAxis, PolarBandAxis, PolarCrossHair, PolarLinearAxis, PolarMarkArea, PolarMarkLine, PolarMarkPoint, PolarSeries, PolygonMark, ProgressLikeSeries, Pyramid3dMark, RadarChart, RadarSeries, RangeAreaChart, RangeAreaSeries, RangeColumn3dChart, RangeColumn3dSeries, RangeColumnChart, RangeColumnSeries, Rect3dMark, RectMark, RenderModeEnum, RippleMark, RoseChart, RoseLikeSeries, RoseSeries, RuleMark, SEGMENT_FIELD_END, SEGMENT_FIELD_START, STACK_FIELD_END, STACK_FIELD_END_OffsetSilhouette, STACK_FIELD_END_PERCENT, STACK_FIELD_KEY, STACK_FIELD_START, STACK_FIELD_START_OffsetSilhouette, STACK_FIELD_START_PERCENT, STACK_FIELD_TOTAL, STACK_FIELD_TOTAL_BOTTOM, STACK_FIELD_TOTAL_PERCENT, STACK_FIELD_TOTAL_TOP, SankeyChart, SankeySeries, ScatterChart, ScatterSeries, ScrollBar, SequenceChart, SeriesMarkNameEnum, SeriesTypeEnum, SeriesTypeForThemeEnum, StreamLight, SunburstChart, SunburstSeries, SymbolMark, TextMark, ThemeManager$1 as ThemeManager, Title, Tooltip, TooltipResult, TotalLabel, TreemapChart, TreemapSeries, VChart, VennChart, VennSeries, WaterfallChart, WaterfallSeries, WordCloud3dChart, WordCloud3dSeries, WordCloudChart, WordCloudSeries, alternatingWave, builtinThemes, centerToCorner, columnCenterToEdge, columnEdgeToCenter, columnLeftToRight, columnRightToLeft, computeActualDataScheme, cornerToCenter, createArc, createArea, createGroup, createLine, createRect, createRichText, createSymbol, createText, darkTheme$1 as darkTheme, dataScheme, VChart as default, defaultThemeName, diagonalCenterToEdge, diagonalTopLeftToBottomRight, functionTransform, getActualColor, getCartesianDimensionInfo, getColorSchemeBySeries, getDataScheme, getFieldAlias, getMergedTheme, getPolarDimensionInfo, getRegionStackGroup, getTheme, hasThemeMerged, isColorKey, isProgressiveDataColorScheme, isTokenKey, lightTheme, mergeFields, particleEffect, pulseWave, queryColorFromColorScheme, queryToken, randomOpacity, register3DPlugin, registerAllEnv, registerAllMarks, registerAnimate, registerArc3dMark, registerArcMark, registerAreaChart, registerAreaMark, registerAreaSeries, registerBar3dChart, registerBar3dSeries, registerBarChart, registerBarSeries, registerBoxplotChart, registerBoxplotSeries, registerBrowserEnv, registerBrush, registerCanvasTooltipHandler, registerCartesianBandAxis, registerCartesianCrossHair, registerCartesianLinearAxis, registerCartesianLogAxis, registerCartesianSymlogAxis, registerCartesianTimeAxis, registerChartPlugin, registerCirclePackingChart, registerCirclePackingSeries, registerCircularProgressChart, registerCircularProgressSeries, registerCommonChart, registerComponentMark, registerContinuousLegend, registerCorrelationChart, registerCustomMark, registerDataZoom, registerDiscreteLegend, registerDomTooltipHandler, registerDotSeries, registerDragPlugin, registerFormatPlugin, registerFunnel3dChart, registerFunnel3dSeries, registerFunnelChart, registerFunnelSeries, registerGaugeChart, registerGaugePointerSeries, registerGaugeSeries, registerGeoCoordinate, registerGeoMarkPoint, registerGesturePlugin, registerGridLayout, registerGroupMark, registerHarmonyEnv, registerHeatmapChart, registerHeatmapSeries, registerHistogram3dChart, registerHistogramChart, registerHtmlAttributePlugin, registerImageMark, registerIndicator, registerLabel, registerLarkEnv, registerLayout3d, registerLineChart, registerLineMark, registerLineSeries, registerLinearProgressChart, registerLinearProgressSeries, registerLinkSeries, registerLiquidChart, registerLiquidSeries, registerLynxEnv, registerMapChart, registerMapLabel, registerMapSeries, registerMarkArea, registerMarkLine, registerMarkPoint, registerMediaQuery, registerMorph, registerMosaicChart, registerMosaicSeries, registerNodeEnv, registerPathMark, registerPictogramChart, registerPictogramSeries, registerPie3dChart, registerPie3dSeries, registerPieChart, registerPieSeries, registerPlayer, registerPolarBandAxis, registerPolarCrossHair, registerPolarLinearAxis, registerPolarMarkArea, registerPolarMarkLine, registerPolarMarkPoint, registerPolygonMark, registerPoptip, registerPyramid3dMark, registerRadarChart, registerRadarSeries, registerRangeAreaChart, registerRangeAreaSeries, registerRangeColumn3dChart, registerRangeColumn3dSeries, registerRangeColumnChart, registerRangeColumnSeries, registerReactAttributePlugin, registerRect3dMark, registerRectMark, registerRippleMark, registerRoseChart, registerRoseSeries, registerRuleMark, registerSankeyChart, registerSankeySeries, registerScatterChart, registerScatterSeries, registerScrollBar, registerSequenceChart, registerSunBurstSeries, registerSunburstChart, registerSymbolMark, registerTTEnv, registerTaroEnv, registerTextMark, registerTheme, registerTitle, registerTooltip, registerTotalLabel, registerTreemapChart, registerTreemapSeries, registerVennChart, registerVennSeries, registerWXEnv, registerWaterfallChart, registerWaterfallSeries, registerWordCloud3dChart, registerWordCloud3dSeries, registerWordCloudChart, registerWordCloudSeries, registerWordCloudShapeChart, removeTheme, rippleEffect, rotationScan, rowBottomToTop, rowCenterToEdge, rowEdgeToCenter, rowTopToBottom, snakeWave, sortStackValueGroup, specTransform, spiralEffect, stack, stackGroup, stackMosaic, stackMosaicTotal, stackOffsetSilhouette, stackTotal, themeExist, themes, token, transformColorSchemeToStandardStruct, version, vglobal };