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

package/build/index.js

@@ -7624,11 +7624,14 @@
     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 => {
@@ -7646,6 +7649,20 @@
         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) {
@@ -7734,6 +7751,48 @@
       }
     }
 
+    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,
@@ -7774,7 +7833,7 @@
           step((generator = generator.apply(thisArg, _arguments || [])).next());
         });
       };
-    let DefaultGlobal = class {
+    let DefaultGlobal = class extends EventListenerManager {
       get env() {
         return this._env;
       }
@@ -7818,10 +7877,19 @@
         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 => {
@@ -7862,15 +7930,6 @@
       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();
       }
@@ -10920,7 +10979,7 @@
       };
     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();
@@ -10939,7 +10998,7 @@
         return this._handler.getDpr();
       }
       constructor() {
-        this.hooks = {
+        super(), this.hooks = {
           onChange: new SyncHook(["x", "y", "width", "height"])
         }, this.active = () => {
           const global = this.global;
@@ -10947,6 +11006,15 @@
           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();
       }
@@ -10986,7 +11054,7 @@
         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();
@@ -10997,15 +11065,6 @@
       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();
       }
@@ -12214,19 +12273,17 @@
           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;
@@ -18793,6 +18850,9 @@
       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) {
@@ -18962,8 +19022,8 @@
         };
       };
     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,
@@ -19134,8 +19194,8 @@
         };
       };
     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,
@@ -19521,8 +19581,8 @@
         };
       };
     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;
@@ -19765,8 +19825,8 @@
         };
       };
     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;
@@ -19821,8 +19881,8 @@
         };
       };
     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;
@@ -19891,8 +19951,8 @@
         };
       };
     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;
@@ -20062,8 +20122,8 @@
         };
       };
     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;
@@ -20267,8 +20327,8 @@
         };
       };
     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,
@@ -20323,6 +20383,9 @@
       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,
@@ -20465,8 +20528,8 @@
       };
     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,
@@ -20791,6 +20854,9 @@
       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;
@@ -21199,6 +21265,11 @@
           }, !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) {
@@ -22334,6 +22405,9 @@
       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) {
@@ -22519,6 +22593,9 @@
       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);
       }
@@ -23199,6 +23276,7 @@
       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);
@@ -28829,7 +28907,9 @@
     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
@@ -28873,8 +28953,7 @@
           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);
           });
@@ -28895,7 +28974,6 @@
           } = 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;
@@ -28911,7 +28989,7 @@
             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();
@@ -28953,7 +29031,9 @@
           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();
@@ -29067,8 +29147,7 @@
         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);
         });
@@ -29076,6 +29155,11 @@
       _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",
@@ -33703,6 +33787,9 @@
         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;
@@ -41356,7 +41443,6 @@
             evtTarget.addEventListener(trigger, this._onHandlerPointerUp);
           });
         }, this._pointerMove = e => {
-          e.preventDefault();
           const {
               start: startAttr,
               end: endAttr,
@@ -44925,14 +45011,13 @@
           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,
@@ -44966,13 +45051,12 @@
           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,
@@ -45347,13 +45431,11 @@
         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);
         });
@@ -49122,11 +49204,20 @@
             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
                     };
                 })
             };
@@ -54574,12 +54665,9 @@
             });
             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;
@@ -54613,10 +54701,12 @@
             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();
             }
         }
@@ -54902,9 +54992,6 @@
             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) {
@@ -55927,7 +56014,7 @@
             this._updateCurrentTheme();
             this._currentSize = this.getCurrentSize();
             const pluginList = [];
-            if (!poptip !== false) {
+            if (poptip !== false) {
                 pluginList.push('poptipForText');
             }
             if (spec.type === "sankey") {
@@ -57132,7 +57219,7 @@
         });
     };
 
-    const version = "2.0.0-alpha.2";
+    const version = "2.0.0-alpha.3";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -61403,14 +61490,6 @@
                 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();
@@ -86599,11 +86678,14 @@
             this.type = exports.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;
@@ -86627,6 +86709,9 @@
                 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)) {
@@ -90217,18 +90302,17 @@
             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);
@@ -90239,14 +90323,14 @@
                         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;
@@ -91579,6 +91663,7 @@
         const { stateField, valueField } = op.output;
         const resultObj = {};
         const resultData = [];
+        const stateValues = [];
         dataCollection.forEach((dv, i) => {
             var _a;
             if (isNil$1(stateFields[i])) {
@@ -91587,13 +91672,17 @@
             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])) {
@@ -91603,10 +91692,10 @@
                 });
             });
         });
-        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);
         });
@@ -98281,6 +98370,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._rootDom.style.visibility = _value ? 'visible' : 'hidden';
             }
         }
+        getRootDom() {
+            return this._rootDom;
+        }
         constructor() {
             super(DomTooltipHandler.type);
             this.type = TooltipHandlerType.dom;
@@ -99620,7 +99712,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 'barBackground',
                 'barMinHeight',
                 'stackCornerRadius',
-                'bar'
+                'bar',
+                'bandWidthField'
             ]);
         }
         transformSpec(spec) {