@visactor/vchart 2.0.4-alpha.6 → 2.0.4-alpha.8

package/build/index.es.js

@@ -9493,7 +9493,8 @@ const DefaultRectAttribute = Object.assign(Object.assign({}, DefaultAttribute),
   y1: 0,
   strokeBoundsBuffer: 0,
   cornerRadius: 0,
-  cornerType: "round"
+  cornerType: "round",
+  drawStrokeWhenZeroWH: !1
 });
 Object.assign(Object.assign({}, DefaultAttribute), {
   width: 0,
@@ -9502,7 +9503,8 @@ Object.assign(Object.assign({}, DefaultAttribute), {
   y1: 0,
   cornerRadius: 0,
   length: 0,
-  cornerType: "round"
+  cornerType: "round",
+  drawStrokeWhenZeroWH: !1
 });
 const DefaultSymbolAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
   symbolType: "circle",
@@ -14175,7 +14177,7 @@ class Graphic extends Node {
     });
   }
   setAttributes(params, forceUpdateTag = !1, context) {
-    (params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params).background ? this.loadImage(params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._setAttributes(params, forceUpdateTag, context);
+    params && ((params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params).background ? this.loadImage(params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._setAttributes(params, forceUpdateTag, context));
   }
   _setAttributes(params, forceUpdateTag = !1, context) {
     const keys = Object.keys(params);
@@ -15000,8 +15002,8 @@ function rectFillVisible(opacity, fillOpacity, width, height, fill) {
 function strokeVisible(opacity, strokeOpacity) {
   return opacity * strokeOpacity > 0;
 }
-function rectStrokeVisible(opacity, strokeOpacity, width, height) {
-  return opacity * strokeOpacity > 0 && 0 !== width && 0 !== height;
+function rectStrokeVisible(opacity, strokeOpacity, width, height, drawStrokeWhenZeroWH) {
+  return drawStrokeWhenZeroWH ? opacity * strokeOpacity > 0 : opacity * strokeOpacity > 0 && 0 !== width && 0 !== height;
 }
 function intersect(x0, y0, x1, y1, x2, y2, x3, y3) {
   const x10 = x1 - x0,
@@ -16371,14 +16373,10 @@ class Glyph extends Graphic {
       attrs && (Object.assign(stateAttrs, attrs.attributes), (null === (_a = attrs.subAttributes) || void 0 === _a ? void 0 : _a.length) && subAttrs.forEach((subAttrs, index) => {
         Object.assign(subAttrs, attrs.subAttributes[index]);
       }));
-    }), this.subGraphic.forEach((graphic, index) => {
-      graphic.updateNormalAttrs(subAttrs[index]), graphic.applyStateAttrs(subAttrs[index], states, hasAnimation);
     }), this.updateNormalAttrs(stateAttrs), this.currentStates = states, this.applyStateAttrs(stateAttrs, states, hasAnimation);
   }
   clearStates(hasAnimation) {
-    this.stopStateAnimates(), this.hasState() && this.normalAttrs ? (this.currentStates = [], this.subGraphic.forEach(graphic => {
-      graphic.applyStateAttrs(graphic.normalAttrs, this.currentStates, hasAnimation, !0), graphic.normalAttrs = null;
-    }), this.applyStateAttrs(this.normalAttrs, this.currentStates, hasAnimation, !0)) : this.currentStates = [], this.normalAttrs = null;
+    this.stopStateAnimates(), this.hasState() && this.normalAttrs ? (this.currentStates = [], this.applyStateAttrs(this.normalAttrs, this.currentStates, hasAnimation, !0)) : this.currentStates = [], this.normalAttrs = null;
   }
   clone() {
     const glyph = new Glyph(Object.assign({}, this.attribute));
@@ -19637,7 +19635,8 @@ let DefaultCanvasRectRender = class extends BaseRender {
       y1: y1,
       x: originX = rectAttribute.x,
       y: originY = rectAttribute.y,
-      fillStrokeOrder = rectAttribute.fillStrokeOrder
+      fillStrokeOrder = rectAttribute.fillStrokeOrder,
+      drawStrokeWhenZeroWH = rectAttribute.drawStrokeWhenZeroWH
     } = rect.attribute;
     let {
       width: width,
@@ -19645,7 +19644,7 @@ let DefaultCanvasRectRender = class extends BaseRender {
     } = rect.attribute;
     width = (null != width ? width : x1 - originX) || 0, height = (null != height ? height : y1 - originY) || 0;
     const fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill),
-      sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height),
+      sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height, drawStrokeWhenZeroWH),
       doFill = runFill(fill, background),
       doStroke = runStroke(stroke, lineWidth);
     if (!rect.valid || !visible) return;
@@ -21703,13 +21702,13 @@ class Stage extends Group$1 {
         this._skipRender > 1 && this.renderNextFrame(), this._skipRender = 0;
       } else this._skipRender = 1;
     }, this.beforeRender = stage => {
-      this._beforeRender && this._beforeRender(stage);
+      this._beforeRenderList.forEach(cb => cb(stage));
     }, this.afterClearScreen = drawParams => {
       this._afterClearScreen && this._afterClearScreen(drawParams);
     }, this.afterClearRect = drawParams => {
       this._afterClearRect && this._afterClearRect(drawParams);
     }, this.afterRender = stage => {
-      this.renderCount++, this._afterRender && this._afterRender(stage), this._afterNextRenderCbs && this._afterNextRenderCbs.forEach(cb => cb(stage)), this._afterNextRenderCbs = null, this.tickedBeforeRender = !1;
+      this.renderCount++, this._afterRenderList.forEach(cb => cb(stage)), this._afterNextRenderCbs && this._afterNextRenderCbs.forEach(cb => cb(stage)), this._afterNextRenderCbs = null, this.tickedBeforeRender = !1;
     }, this.afterTickCb = () => {
       this.tickedBeforeRender = !0, "rendering" !== this.state && this.renderNextFrame();
     }, this.params = params, this.theme = new Theme(), this.hooks = {
@@ -21717,7 +21716,7 @@ class Stage extends Group$1 {
       afterRender: new SyncHook(["stage"]),
       afterClearScreen: new SyncHook(["stage"]),
       afterClearRect: new SyncHook(["stage"])
-    }, this.global = application.global, !this.global.env && isBrowserEnv() && this.global.setEnv("browser"), this.window = container.get(VWindow), this.renderService = container.get(RenderService), this.pluginService = container.get(PluginService), this.layerService = container.get(LayerService), this.graphicService = container.get(GraphicService), this.pluginService.active(this, params), this.window.create({
+    }, this.global = application.global, !this.global.env && isBrowserEnv() && this.global.setEnv("browser"), this.window = container.get(VWindow), this.renderService = container.get(RenderService), this.pluginService = container.get(PluginService), this.layerService = container.get(LayerService), this.graphicService = container.get(GraphicService), this.pluginService.active(this, params), this._beforeRenderList = [], this._afterRenderList = [], this.window.create({
       width: params.width,
       height: params.height,
       viewBox: params.viewBox,
@@ -21728,7 +21727,7 @@ class Stage extends Group$1 {
       canvas: params.canvas
     }), this.state = "normal", this.renderCount = 0, this.tryInitEventSystem(), this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig.BACKGROUND, this.appendChild(this.layerService.createLayer(this, {
       main: !0
-    })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this.hooks.afterClearScreen.tap("constructor", this.afterClearScreen), this.hooks.afterClearRect.tap("constructor", this.afterClearRect), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this._afterClearScreen = params.afterClearScreen, this._afterClearRect = params.afterClearRect, this.supportInteractiveLayer = !1 !== params.interactiveLayer, params.optimize || (params.optimize = {
+    })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), params.beforeRender && this._beforeRenderList.push(params.beforeRender), params.afterRender && this._afterRenderList.push(params.afterRender), this.hooks.afterClearScreen.tap("constructor", this.afterClearScreen), this.hooks.afterClearRect.tap("constructor", this.afterClearRect), this._afterClearScreen = params.afterClearScreen, this._afterClearRect = params.afterClearRect, this.supportInteractiveLayer = !1 !== params.interactiveLayer, params.optimize || (params.optimize = {
       tickRenderMode: "effect"
     }), this.optmize(params.optimize), params.background && isString$1(this._background) && this._background.includes("/") && this.setAttributes({
       background: this._background
@@ -21843,10 +21842,16 @@ class Stage extends Group$1 {
     options.enableView3dTransform && this.enableView3dTransform();
   }
   setBeforeRender(cb) {
-    this._beforeRender = cb;
+    this._beforeRenderList.push(cb);
+  }
+  removeBeforeRender(cb) {
+    this._beforeRenderList = this._beforeRenderList.filter(c => c !== cb);
   }
   setAfterRender(cb) {
-    this._afterRender = cb;
+    this._afterRenderList.push(cb);
+  }
+  removeAfterRender(cb) {
+    this._afterRenderList = this._afterRenderList.filter(c => c !== cb);
   }
   afterNextRender(cb) {
     this._afterNextRenderCbs || (this._afterNextRenderCbs = []), this._afterNextRenderCbs.push(cb);
@@ -31713,6 +31718,7 @@ class Step {
     return this.getEndProps();
   }
   stop() {}
+  release() {}
 }
 class WaitStep extends Step {
   constructor(type, props, duration, easing) {
@@ -31930,7 +31936,9 @@ class Animate {
     this.status !== AnimateStatus.END && this.onEnd(), this.status = AnimateStatus.END, this.target && ("start" === type ? this.target.setAttributes(this._startProps) : "end" === type ? this.target.setAttributes(this._endProps) : type && this.target.setAttributes(type));
   }
   release() {
-    this.status = AnimateStatus.END, this._onRemove && this._onRemove.forEach(cb => cb()), this._onStart = [], this._onFrame = [], this._onEnd = [], this._onRemove = [];
+    this.status = AnimateStatus.END, this._onRemove && this._onRemove.forEach(cb => cb()), this._onStart = [], this._onFrame = [], this._onEnd = [], this._onRemove = [], this.forEachStep(step => {
+      step.release();
+    });
   }
   getDuration() {
     return this._duration;
@@ -32004,6 +32012,10 @@ class Animate {
   getLoop() {
     return this._loopCount;
   }
+  forEachStep(cb) {
+    let step = this._firstStep;
+    for (; step;) cb(step), step = step.next;
+  }
 }
 
 const performanceRAF = new PerformanceRAF();
@@ -32283,6 +32295,9 @@ class AnimateExecutor {
   constructor(target) {
     this._animates = [], this._startCallbacks = [], this._endCallbacks = [], this._started = !1, this._activeCount = 0, this._target = target;
   }
+  get started() {
+    return this._started;
+  }
   onStart(cb) {
     cb ? (this._startCallbacks.push(cb), this._started && this._activeCount > 0 && cb()) : this._startCallbacks.forEach(cb => {
       cb();
@@ -32423,14 +32438,14 @@ class AnimateExecutor {
     return delayAfterValue > 0 && (totalDelay += delayAfterValue), totalDelay > 0 && animate.wait(totalDelay), loop && loop > 0 && animate.loop(loop), bounce && animate.bounce(!0), animate;
   }
   _handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     if (custom && customType) {
       const customParams = Object.assign({
-          width: graphic.stage.width,
-          height: graphic.stage.height,
+          width: (null === (_a = graphic.stage) || void 0 === _a ? void 0 : _a.width) || 0,
+          height: (null === (_b = graphic.stage) || void 0 === _b ? void 0 : _b.height) || 0,
           group: this._target.parent
         }, this.resolveValue(customParameters, graphic)),
-        objOptions = isFunction$1(options) ? options.call(null, null !== (_b = customParams && (null === (_a = customParams.data) || void 0 === _a ? void 0 : _a[0])) && void 0 !== _b ? _b : null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, customParams) : options;
+        objOptions = isFunction$1(options) ? options.call(null, null !== (_d = customParams && (null === (_c = customParams.data) || void 0 === _c ? void 0 : _c[0])) && void 0 !== _d ? _d : null === (_f = null === (_e = graphic.context) || void 0 === _e ? void 0 : _e.data) || void 0 === _f ? void 0 : _f[0], graphic, customParams) : options;
       customParams.options = objOptions, customParams.controlOptions = controlOptions, 1 === customType ? this.createCustomAnimation(animate, custom, from, props, duration, easing, customParams) : 2 === customType && this.createCustomInterpolatorAnimation(animate, custom, props, duration, easing, customParams);
     } else "to" === type ? animate.to(props, duration, easing) : "from" === type && animate.from(props, duration, easing);
   }
@@ -32650,7 +32665,7 @@ class AnimationStateManager {
   reApplyState(state) {
     var _a;
     const stateInfo = null === (_a = this.stateList) || void 0 === _a ? void 0 : _a.find(stateInfo => stateInfo.state === state);
-    if (stateInfo) {
+    if (stateInfo && stateInfo.executor.started) {
       const stateList = this.stateList.slice();
       stateInfo.executor.stop(), this.stateList = stateList, stateInfo.executor.execute(stateInfo.animationConfig);
     }
@@ -33694,7 +33709,7 @@ class GrowAngleBase extends ACustomAnimate {
 }
 class GrowAngleIn extends GrowAngleBase {
   onBind() {
-    var _a, _b;
+    var _a, _b, _c;
     super.onBind();
     const {
         from: from,
@@ -33703,7 +33718,7 @@ class GrowAngleIn extends GrowAngleBase {
       fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
     this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to;
     const finalAttribute = this.target.getFinalAttribute();
-    finalAttribute && this.target.setAttributes(finalAttribute), this.target.setAttributes(fromAttrs), this.determineUpdateFunction();
+    finalAttribute && this.target.setAttributes(finalAttribute), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(fromAttrs), this.determineUpdateFunction();
   }
 }
 class GrowAngleOut extends GrowAngleBase {
@@ -34311,7 +34326,7 @@ class GrowPointsBase extends ACustomAnimate {
 }
 class GrowRadiusIn extends GrowPointsBase {
   onBind() {
-    var _a, _b;
+    var _a, _b, _c;
     super.onBind();
     const {
         from: from,
@@ -34320,7 +34335,7 @@ class GrowRadiusIn extends GrowPointsBase {
       fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
     this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to;
     const finalAttribute = this.target.getFinalAttribute();
-    finalAttribute && this.target.setAttributes(finalAttribute), this.target.setAttributes(fromAttrs);
+    finalAttribute && this.target.setAttributes(finalAttribute), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(fromAttrs);
   }
 }
 class GrowRadiusOut extends GrowPointsBase {
@@ -34435,7 +34450,7 @@ class GrowWidthIn extends ACustomAnimate {
     super(from, to, duration, easing, params);
   }
   onBind() {
-    var _a, _b;
+    var _a, _b, _c;
     super.onBind();
     const {
         from: from,
@@ -34444,7 +34459,7 @@ class GrowWidthIn extends ACustomAnimate {
       fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
     this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to;
     const finalAttribute = this.target.getFinalAttribute();
-    finalAttribute && this.target.setAttributes(finalAttribute), this.target.setAttributes(fromAttrs);
+    finalAttribute && this.target.setAttributes(finalAttribute), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(fromAttrs);
   }
   onEnd(cb) {
     super.onEnd(cb);
@@ -49136,7 +49151,7 @@ function transformIndicatorStyle(style, datum) {
 }
 function transformToGraphic(style) {
     if (style === null || style === void 0 ? void 0 : style.angle) {
-        return Object.assign(Object.assign({}, style), { angle: degreeToRadian(style.angle) });
+        style.angle = degreeToRadian(style.angle);
     }
     return style;
 }
@@ -49702,13 +49717,21 @@ class EventDispatcher {
         }
         return true;
     }
+    _prepareParams(filter, params) {
+        var _a, _b, _c;
+        if (filter.markName && params.mark) {
+            const markGraphic = (_c = (_b = (_a = params.mark).getGraphics) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c[0];
+            return Object.assign(Object.assign({}, params), { item: markGraphic, datum: getDatumOfGraphic(markGraphic) });
+        }
+        return Object.assign({}, params);
+    }
     _invoke(handlers, type, params) {
         const result = handlers.map(handler => {
             var _a, _b, _c;
             const filter = handler.filter;
             if (!handler.prevented && (!handler.query || this._filter(filter, type, params))) {
                 const callback = handler.wrappedCallback || handler.callback;
-                const stopBubble = callback.call(null, Object.assign({}, params));
+                const stopBubble = callback.call(null, this._prepareParams(filter, params));
                 const doStopBubble = stopBubble !== null && stopBubble !== void 0 ? stopBubble : (_a = handler.query) === null || _a === void 0 ? void 0 : _a.consume;
                 if (doStopBubble) {
                     (_b = params.event) === null || _b === void 0 ? void 0 : _b.stopPropagation();
@@ -50238,7 +50261,7 @@ class Compiler {
             (_b = (_a = this._compileChart) === null || _a === void 0 ? void 0 : _a.getEvent()) === null || _b === void 0 ? void 0 : _b.emit(ChartEvent.afterRender, { chart: this._compileChart });
         };
         this._handleAfterNextRender = () => {
-            var _a, _b, _c, _d;
+            var _a, _b;
             if (this._stage && !this._option.disableDirtyBounds) {
                 this._stage.enableDirtyBounds();
             }
@@ -50248,7 +50271,6 @@ class Compiler {
                     vchart: (_b = this._compileChart.getOption()) === null || _b === void 0 ? void 0 : _b.globalInstance
                 });
             }
-            (_d = (_c = this._option.performanceHook) === null || _c === void 0 ? void 0 : _c.afterVRenderDraw) === null || _d === void 0 ? void 0 : _d.call(_c, this._compileChart.getOption().globalInstance);
         };
         this.handleProgressiveFrame = () => {
             if (this._progressiveMarks.length) {
@@ -50398,7 +50420,6 @@ class Compiler {
         });
     }
     _doRender(immediately) {
-        var _a, _b;
         if (this._stage) {
             this._rootMarks.forEach(g => {
                 traverseGroupMark(g, m => {
@@ -50415,7 +50436,6 @@ class Compiler {
             this._stage.afterNextRender(this._handleAfterNextRender);
             if (immediately) {
                 this._stage.render();
-                (_b = (_a = this._option.performanceHook) === null || _a === void 0 ? void 0 : _a.afterVRenderDraw) === null || _b === void 0 ? void 0 : _b.call(_a, this._compileChart.getOption().globalInstance);
             }
         }
     }
@@ -56921,7 +56941,7 @@ const lookup = (data, opt) => {
     });
 };
 
-const version = "2.0.4-alpha.6";
+const version = "2.0.4-alpha.8";
 
 const addVChartProperty = (data, op) => {
     const context = op.beforeCall();
@@ -57670,7 +57690,7 @@ function traverseSpec(spec, transform, excludeKeys = []) {
             traverseSpec(spec[index], transform, excludeKeys);
         });
     }
-    else if (isObject$2(spec)) {
+    else if (isObject$2(spec) && typeof spec !== 'function') {
         for (const key in spec) {
             if (!excludeKeys.includes(key)) {
                 spec[key] = transform(spec[key], key);
@@ -84223,7 +84243,7 @@ class TreemapSeries extends CartesianSeries {
         });
         [this._labelMark, this._nonLeafLabelMark].forEach(m => {
             if (m && m.getComponent()) {
-                m.getComponent().getProduct().enableAnimation();
+                m.getComponent().getProduct().getGroupGraphicItem().enableAnimation();
             }
         });
         this.event.off(HOOK_EVENT.AFTER_DO_RENDER, this._enableAnimationHook);
@@ -84233,7 +84253,7 @@ class TreemapSeries extends CartesianSeries {
         });
         [this._labelMark, this._nonLeafLabelMark].forEach(m => {
             if (m && m.getComponent()) {
-                m.getComponent().getProduct().disableAnimation();
+                m.getComponent().getProduct().getGroupGraphicItem().disableAnimation();
             }
         });
     }
@@ -97101,13 +97121,14 @@ class CustomMark extends BaseComponent {
     getVRenderComponents() {
         const comps = [];
         const checkFunc = (m) => {
+            var _a;
             if (m && m.type === "group") {
                 m.getMarks().forEach(child => {
                     checkFunc(child);
                 });
             }
             else if (m.type === "component") {
-                const comp = m === null || m === void 0 ? void 0 : m.getComponent();
+                const comp = (_a = m === null || m === void 0 ? void 0 : m.getProduct()) === null || _a === void 0 ? void 0 : _a.getGroupGraphicItem();
                 if (comp) {
                     comps.push(comp);
                 }