@visactor/vchart 2.0.0-alpha.1 → 2.0.0-alpha.3

package/build/index.es.js

@@ -7618,11 +7618,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 => {
@@ -7640,6 +7643,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) {
@@ -7728,6 +7745,48 @@ class PerformanceRAF {
   }
 }
 
+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$1v = undefined && undefined.__decorate || function (decorators, target, key, desc) {
     var d,
       c = arguments.length,
@@ -7768,7 +7827,7 @@ var __decorate$1v = 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;
   }
@@ -7812,10 +7871,19 @@ let DefaultGlobal = class {
     this._env || this.setEnv("browser"), this.envContribution.applyStyles = support;
   }
   constructor(contributions) {
-    this.contributions = contributions, this._isImageAnonymous = !0, this._performanceRAFList = [], this.id = Generator.GenAutoIncrementId(), this.hooks = {
+    super(), this.contributions = contributions, this._isImageAnonymous = !0, this._performanceRAFList = [], 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 => {
@@ -7856,15 +7924,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();
   }
@@ -10914,7 +10973,7 @@ var __decorate$1s = 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();
@@ -10933,7 +10992,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;
@@ -10941,6 +11000,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();
   }
@@ -10980,7 +11048,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();
@@ -10991,15 +11059,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();
   }
@@ -12208,19 +12267,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;
@@ -18787,6 +18844,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) {
@@ -18956,8 +19016,8 @@ var __decorate$1l = 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,
@@ -19128,8 +19188,8 @@ var __decorate$1k = 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,
@@ -19515,8 +19575,8 @@ var __decorate$1i = 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;
@@ -19759,8 +19819,8 @@ var __decorate$1h = 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;
@@ -19815,8 +19875,8 @@ var __decorate$1g = 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, rectAttribute) {
     rectAttribute = null != rectAttribute ? rectAttribute : getTheme$1(rect, null == params ? void 0 : params.theme).rect;
@@ -19885,8 +19945,8 @@ var __decorate$1f = 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, symbolAttribute) {
     var _a;
@@ -20056,8 +20116,8 @@ var __decorate$1e = 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;
@@ -20261,8 +20321,8 @@ var __decorate$1d = 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,
@@ -20317,6 +20377,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, groupAttribute) {
     const {
       clip: clip,
@@ -20459,8 +20522,8 @@ var __decorate$1b = 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,
@@ -20785,6 +20848,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;
@@ -21193,6 +21259,11 @@ let DefaultDrawContribution = class {
       }, !1, !!(null === (_a = drawContext.context) || void 0 === _a ? void 0 : _a.camera));
     }, 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) {
@@ -22328,6 +22399,9 @@ class Stage extends Group$1 {
   getPickerService() {
     return this.pickerService || (this.pickerService = container.get(PickerService)), this.pickerService;
   }
+  reInit() {
+    this.renderService.reInit(), this.pickerService.reInit();
+  }
 }
 
 var __decorate$11 = undefined && undefined.__decorate || function (decorators, target, key, desc) {
@@ -22513,6 +22587,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);
   }
@@ -23193,6 +23270,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);
@@ -28823,7 +28901,9 @@ const delayMap$3 = {
 loadScrollbarComponent();
 let ScrollBar$1 = class ScrollBar extends AbstractComponent {
   constructor(attributes, options) {
-    super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, ScrollBar.defaultAttributes, attributes)), this.name = "scrollbar", this._onRailPointerDown = e => {
+    super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, ScrollBar.defaultAttributes, attributes)), this.name = "scrollbar", this._handleTouchMove = e => {
+      isValid$1(this._prePos) && e.preventDefault();
+    }, this._onRailPointerDown = e => {
       const {
           viewX: viewX,
           viewY: viewY
@@ -28867,8 +28947,7 @@ let ScrollBar$1 = class ScrollBar extends AbstractComponent {
       const triggers = getEndTriggersOfDrag(),
         obj = "browser" === vglobal.env ? vglobal : this.stage;
       obj.addEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
-        capture: !0,
-        passive: !0
+        capture: !0
       }), triggers.forEach(trigger => {
         obj.addEventListener(trigger, this._onSliderPointerUp);
       });
@@ -28889,7 +28968,6 @@ let ScrollBar$1 = class ScrollBar extends AbstractComponent {
       } = this.getSliderRenderBounds();
       return "vertical" === direction ? (currentPos = y, delta = currentPos - this._prePos, currentScrollValue = delta / height) : (currentPos = x, delta = currentPos - this._prePos, currentScrollValue = delta / width), [currentPos, currentScrollValue];
     }, this._onSliderPointerMove = e => {
-      e.preventDefault();
       const {
         stopSliderMovePropagation = !0
       } = this.attribute;
@@ -28905,7 +28983,7 @@ let ScrollBar$1 = class ScrollBar extends AbstractComponent {
         preScrollRange = this.getScrollRange(),
         [currentPos, currentScrollValue] = this._computeScrollValue(e),
         range = [preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue];
-      this._dispatchEvent(SCROLLBAR_END_EVENT$1, {
+      this._prePos = null, this._dispatchEvent(SCROLLBAR_END_EVENT$1, {
         pre: preRange,
         value: clampRange$1(range, limitRange[0], limitRange[1])
       }), this._clearDragEvents();
@@ -28947,7 +29025,9 @@ let ScrollBar$1 = class ScrollBar extends AbstractComponent {
       delayType = "throttle",
       delayTime = 0
     } = this.attribute;
-    this._rail && this._rail.addEventListener("pointerdown", delayMap$3[delayType](this._onRailPointerDown, delayTime)), this._slider && this._slider.addEventListener("pointerdown", this._onSliderPointerDown);
+    this._rail && this._rail.addEventListener("pointerdown", delayMap$3[delayType](this._onRailPointerDown, delayTime)), this._slider && this._slider.addEventListener("pointerdown", this._onSliderPointerDown), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+      passive: !1
+    });
   }
   render() {
     this._reset();
@@ -29061,8 +29141,7 @@ let ScrollBar$1 = class ScrollBar extends AbstractComponent {
     const triggers = getEndTriggersOfDrag(),
       obj = "browser" === vglobal.env ? vglobal : this.stage;
     obj.removeEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
-      capture: !0,
-      passive: !1
+      capture: !0
     }), triggers.forEach(trigger => {
       obj.removeEventListener(trigger, this._onSliderPointerUp);
     });
@@ -29070,6 +29149,11 @@ let ScrollBar$1 = class ScrollBar extends AbstractComponent {
   _reset() {
     this._sliderRenderBounds = null, this._sliderLimitRange = null;
   }
+  release(all) {
+    super.release(all), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+      passive: !1
+    }), this._clearDragEvents();
+  }
 };
 ScrollBar$1.defaultAttributes = {
   direction: "horizontal",
@@ -33697,6 +33781,9 @@ class TagPointsUpdate extends ACustomAnimate {
     isValidNumber$1(lastClipRange * this.clipRange) && (this.clipRange *= lastClipRange);
   }
   onUpdate(end, ratio, out) {
+    if (end) return Object.keys(this.to).forEach(k => {
+      this.target.attribute[k] = this.to[k];
+    }), this.target.addUpdatePositionTag(), void this.target.addUpdateShapeAndBoundsTag();
     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;
@@ -41350,7 +41437,6 @@ let DataZoom$1 = class DataZoom extends AbstractComponent {
         evtTarget.addEventListener(trigger, this._onHandlerPointerUp);
       });
     }, this._pointerMove = e => {
-      e.preventDefault();
       const {
           start: startAttr,
           end: endAttr,
@@ -44919,14 +45005,13 @@ class Slider extends AbstractComponent {
       const triggers = getEndTriggersOfDrag(),
         obj = "browser" === vglobal.env ? vglobal : this.stage;
       obj.addEventListener("pointermove", this._onHandlerPointerMove, {
-        capture: !0,
-        passive: !1
+        capture: !0
       }), triggers.forEach(trigger => {
         obj.addEventListener(trigger, this._onHandlerPointerUp);
       });
     }, this._onHandlerPointerMove = e => {
       var _a, _b;
-      e.preventDefault(), this._isChanging = !0;
+      this._isChanging = !0;
       const {
         railWidth: railWidth,
         railHeight: railHeight,
@@ -44960,13 +45045,12 @@ class Slider extends AbstractComponent {
       const triggers = getEndTriggersOfDrag(),
         obj = "browser" === vglobal.env ? vglobal : this.stage;
       obj.addEventListener("pointermove", this._onTrackPointerMove, {
-        capture: !0,
-        passive: !1
+        capture: !0
       }), triggers.forEach(trigger => {
         obj.addEventListener(trigger, this._onTrackPointerUp);
       });
     }, this._onTrackPointerMove = e => {
-      e.preventDefault(), this._isChanging = !0;
+      this._isChanging = !0;
       const {
         railWidth: railWidth,
         railHeight: railHeight,
@@ -45341,13 +45425,11 @@ class Slider extends AbstractComponent {
     const triggers = getEndTriggersOfDrag(),
       obj = "browser" === vglobal.env ? vglobal : this.stage;
     obj.removeEventListener("pointermove", this._onHandlerPointerMove, {
-      capture: !0,
-      passive: !1
+      capture: !0
     }), triggers.forEach(trigger => {
       obj.removeEventListener(trigger, this._onHandlerPointerUp);
     }), obj.removeEventListener("pointermove", this._onTrackPointerMove, {
-      capture: !0,
-      passive: !1
+      capture: !0
     }), triggers.forEach(trigger => {
       obj.removeEventListener(trigger, this._onTrackPointerUp);
     });
@@ -49116,11 +49198,20 @@ function stackMosaic(s, stackCache, mosaicData) {
         const mosaicStackData = {
             key: `${stackCache.groupField}`,
             values: groupValues.map(group => {
+                var _a, _b;
                 const groupValues = stackCache.nodes[group];
+                let value;
+                if (s.bandWidthField) {
+                    value =
+                        (_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;
+                }
                 return {
                     groupValue: group,
-                    value: groupValues.total,
-                    end: groupValues.total
+                    value,
+                    end: value
                 };
             })
         };
@@ -54568,12 +54659,9 @@ class BaseMark extends GrammarItem {
         });
         return this.runTransforms(transforms, data);
     }
-    _runMainTasks() {
+    renderInner() {
         var _a, _b, _c;
-        if (!this.getVisible() ||
-            (this._skipBeforeLayouted && this.getCompiler().getLayoutState() === LayoutState.before)) {
-            return;
-        }
+        this._updateEncoderByState();
         const data = (_b = (_a = this._data) === null || _a === void 0 ? void 0 : _a.getProduct()) !== null && _b !== void 0 ? _b : [{}];
         const transformData = this._runBeforeTransform(data);
         let markData;
@@ -54607,10 +54695,12 @@ class BaseMark extends GrammarItem {
         this._updateAttrsOfGroup();
     }
     render() {
-        if (this._isCommited) {
-            this._updateEncoderByState();
-            log(`render mark: ${this.getProductId()}, type is ${this.type}`);
-            this._runMainTasks();
+        if (this.isCommited()) {
+            if (this.getVisible() &&
+                (!this._skipBeforeLayouted || this.getCompiler().getLayoutState() !== LayoutState.before)) {
+                log(`render mark: ${this.getProductId()}, type is ${this.type}`);
+                this.renderInner();
+            }
             this.uncommit();
         }
     }
@@ -54896,9 +54986,6 @@ class GroupMark extends BaseMark {
         const style = (_a = this._simpleStyle) !== null && _a !== void 0 ? _a : this.getAttributesOfState({});
         this._product.context = Object.assign(Object.assign({}, this._product.context), this._getCommonContext());
         this._product.setAttributes(this._getAttrsFromConfig(style));
-        if (this.getCompiler().getLayoutState() !== LayoutState.before) {
-            this._runStateAnimation(this.getGraphics());
-        }
     }
     render() {
         if (this._isCommited) {
@@ -55921,7 +56008,7 @@ class VChart {
         this._updateCurrentTheme();
         this._currentSize = this.getCurrentSize();
         const pluginList = [];
-        if (!poptip !== false) {
+        if (poptip !== false) {
             pluginList.push('poptipForText');
         }
         if (spec.type === "sankey") {
@@ -57126,7 +57213,7 @@ const lookup = (data, opt) => {
     });
 };
 
-const version = "2.0.0-alpha.1";
+const version = "2.0.0-alpha.3";
 
 const addVChartProperty = (data, op) => {
     const context = op.beforeCall();
@@ -61397,14 +61484,6 @@ class ComponentMark extends BaseMark {
             model: this.model
         });
     }
-    render() {
-        if (!this._isCommited) {
-            return;
-        }
-        log(`render mark: ${this.getProductId()}, type is ${this.type}`);
-        this.renderInner();
-        this.uncommit();
-    }
     release() {
         super.release();
         this.removeProduct();
@@ -68456,6 +68535,11 @@ class BarSeries extends CartesianSeries {
             this.compile();
         }
     }
+    onDataUpdate() {
+        super.onDataUpdate();
+        const region = this.getRegion();
+        region._bar_series_position_calculated = false;
+    }
     compile() {
         super.compile();
         if (this._spec.sampling) {
@@ -86588,11 +86672,14 @@ class MosaicSeries extends BarSeries {
         this.type = SeriesTypeEnum.mosaic;
         this.transformerConstructor = BarSeriesSpecTransformer;
     }
+    get bandWidthField() {
+        return this._bandWidthField;
+    }
     getStack() {
         return true;
     }
     getPercent() {
-        return !!this.getSeriesField();
+        return this._spec.percent;
     }
     getGroupFields() {
         return this.direction === 'vertical' ? this._specXField : this._specYField;
@@ -86616,6 +86703,9 @@ class MosaicSeries extends BarSeries {
             this.setFieldX(MOSAIC_CAT_END_PERCENT);
             this.setFieldX2(MOSAIC_CAT_START_PERCENT);
         }
+        if (this._spec.bandWidthField) {
+            this._bandWidthField = this._spec.bandWidthField;
+        }
     }
     parseLabelStyle(labelStyle, labelSpec) {
         if ((labelSpec === null || labelSpec === void 0 ? void 0 : labelSpec.filterByGroup) && isNil$1(labelStyle.dataFilter)) {
@@ -90206,18 +90296,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);
@@ -90228,14 +90317,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;
@@ -91568,6 +91657,7 @@ const dataFilterComputeDomain = (data, op) => {
     const { stateField, valueField } = op.output;
     const resultObj = {};
     const resultData = [];
+    const stateValues = [];
     dataCollection.forEach((dv, i) => {
         var _a;
         if (isNil$1(stateFields[i])) {
@@ -91576,13 +91666,17 @@ const dataFilterComputeDomain = (data, op) => {
         const stateFieldInfo = (_a = dv.getFields()) === null || _a === void 0 ? void 0 : _a[stateFields[i]];
         if (stateFieldInfo && stateFieldInfo.lockStatisticsByDomain) {
             stateFieldInfo.domain.forEach((d) => {
-                resultObj[d] = 0;
+                if (isNil$1(resultObj[d])) {
+                    stateValues.push(d);
+                    resultObj[d] = 0;
+                }
             });
         }
         dv.latestData.forEach((d) => {
             array(stateFields[i]).forEach(state => {
                 if (!isNil$1(d[state])) {
                     if (isNil$1(resultObj[d[state]])) {
+                        stateValues.push(d[state]);
                         resultObj[d[state]] = 0;
                     }
                     if (!isNil$1(valueFields[i])) {
@@ -91592,10 +91686,10 @@ const dataFilterComputeDomain = (data, op) => {
             });
         });
     });
-    Object.keys(resultObj).forEach((d, i) => {
-        const res = { [stateField]: d };
+    stateValues.forEach(state => {
+        const res = { [stateField]: state };
         if (valueField) {
-            res[valueField] = resultObj[d];
+            res[valueField] = resultObj[state];
         }
         resultData.push(res);
     });
@@ -95586,7 +95680,7 @@ class Player extends BaseComponent {
         });
     }
 }
-Player.builtinThemes = {
+Player.builtInTheme = {
     player
 };
 Player.specKey = 'player';
@@ -98270,6 +98364,9 @@ class DomTooltipHandler extends BaseTooltipHandler {
             this._rootDom.style.visibility = _value ? 'visible' : 'hidden';
         }
     }
+    getRootDom() {
+        return this._rootDom;
+    }
     constructor() {
         super(DomTooltipHandler.type);
         this.type = TooltipHandlerType.dom;
@@ -99609,7 +99706,8 @@ class MosaicChartSpecTransformer extends CartesianChartSpecTransformer {
             'barBackground',
             'barMinHeight',
             'stackCornerRadius',
-            'bar'
+            'bar',
+            'bandWidthField'
         ]);
     }
     transformSpec(spec) {