@visactor/vchart 1.11.2 → 1.11.3

package/build/index.js

@@ -16858,6 +16858,7 @@
         var _a;
         if (!states.length) return void this.clearStates(hasAnimation);
         if (!((null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) !== states.length || states.some((stateName, index) => this.currentStates[index] !== stateName))) return;
+        this.stopStateAnimates();
         const stateAttrs = {},
           subAttrs = this.subGraphic.map(() => ({}));
         states.forEach(stateName => {
@@ -16871,9 +16872,9 @@
         }), this.updateNormalAttrs(stateAttrs), this.currentStates = states, this.applyStateAttrs(stateAttrs, states, hasAnimation);
       }
       clearStates(hasAnimation) {
-        this.hasState() && this.normalAttrs && (this.subGraphic.forEach(graphic => {
+        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.normalAttrs = null, this.currentStates = []);
+        }), this.applyStateAttrs(this.normalAttrs, this.currentStates, hasAnimation, !0)) : this.currentStates = [], this.normalAttrs = null;
       }
       clone() {
         const glyph = new Glyph(Object.assign({}, this.attribute));
@@ -18388,7 +18389,7 @@
           onClearIncremental: new SyncHook(["graphic", "group", "stage"]),
           beforeUpdateAABBBounds: new SyncHook(["graphic", "stage", "willUpdate", "aabbBounds"]),
           afterUpdateAABBBounds: new SyncHook(["graphic", "stage", "aabbBounds", "globalAABBBounds", "selfChange"])
-        }, this.tempAABBBounds1 = new AABBBounds(), this.tempAABBBounds2 = new AABBBounds(), this._rectBoundsContribitions = [new DefaultOuterBorderBoundsContribution()], this._symbolBoundsContribitions = [new DefaultSymbolOuterBorderBoundsContribution()], this._circleBoundsContribitions = [new DefaultOuterBorderBoundsContribution()], this._arcBoundsContribitions = [new DefaultOuterBorderBoundsContribution()], this._pathBoundsContribitions = [new DefaultOuterBorderBoundsContribution()];
+        }, this.tempAABBBounds1 = new AABBBounds(), this.tempAABBBounds2 = new AABBBounds(), this._rectBoundsContribitions = [new DefaultOuterBorderBoundsContribution()], this._symbolBoundsContribitions = [new DefaultSymbolOuterBorderBoundsContribution()], this._imageBoundsContribitions = [new DefaultOuterBorderBoundsContribution()], this._circleBoundsContribitions = [new DefaultOuterBorderBoundsContribution()], this._arcBoundsContribitions = [new DefaultOuterBorderBoundsContribution()], this._pathBoundsContribitions = [new DefaultOuterBorderBoundsContribution()];
       }
       onAttributeUpdate(graphic) {
         this.hooks.onAttributeUpdate.taps.length && this.hooks.onAttributeUpdate.call(graphic);
@@ -18789,7 +18790,9 @@
         }
         const tb1 = this.tempAABBBounds1,
           tb2 = this.tempAABBBounds2;
-        return tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), this.transformAABBBounds(attribute, aabbBounds, imageTheme, !1, graphic), aabbBounds;
+        return tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), this._imageBoundsContribitions.length && this._imageBoundsContribitions.forEach(c => {
+          c.updateBounds(attribute, imageTheme, tb1, graphic), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
+        }), this.transformAABBBounds(attribute, aabbBounds, imageTheme, !1, graphic), aabbBounds;
       }
       combindShadowAABBBounds(bounds, graphic) {
         if (graphic && graphic.shadowRoot) {
@@ -19720,70 +19723,6 @@
       return path.closePath(), path;
     }
 
-    class DefaultImageBackgroundRenderContribution extends DefaultBaseBackgroundRenderContribution {
-      constructor() {
-        super(...arguments), this.time = BaseRenderContributionTime.beforeFillStroke;
-      }
-      drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb) {
-        const {
-          background: background,
-          backgroundMode = graphicAttribute.backgroundMode,
-          backgroundFit = graphicAttribute.backgroundFit
-        } = graphic.attribute;
-        if (background) if (graphic.backgroundImg) {
-          const res = graphic.resources.get(background);
-          if ("success" !== res.state || !res.data) return;
-          if (context.save(), graphic.parent && !graphic.transMatrix.onlyTranslate()) {
-            const groupAttribute = getTheme$1(graphic.parent).group,
-              {
-                scrollX = groupAttribute.scrollX,
-                scrollY = groupAttribute.scrollY
-              } = graphic.parent.attribute;
-            context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), context.translate(scrollX, scrollY);
-          }
-          const b = graphic.AABBBounds;
-          this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
-        } else if (isObject$2(background)) {
-          const {
-            stroke: stroke,
-            fill: fill,
-            lineWidth = 1,
-            cornerRadius = 0,
-            expandX = 0,
-            expandY = 0
-          } = background;
-          if (!stroke && !fill) return;
-          context.beginPath();
-          const {
-            x: x,
-            y: y,
-            width: width,
-            height: height
-          } = getActualPosition(graphic);
-          cornerRadius ? createRectPath(context, x - expandX, y - expandY, width + 2 * expandX, height + 2 * expandY, cornerRadius) : context.rect(x - expandX, y - expandY, width + 2 * expandX, height + 2 * expandY), context.globalAlpha = 1, fill && (context.fillStyle = fill, context.fill()), stroke && lineWidth > 0 && (context.lineWidth = lineWidth, context.strokeStyle = stroke, context.stroke());
-        } else {
-          context.beginPath();
-          const b = graphic.AABBBounds;
-          context.rect(x, y, b.width(), b.height()), context.fillStyle = background, context.globalAlpha = 1, context.fill();
-        }
-      }
-    }
-    function getActualPosition(graphic) {
-      const boundsPadding = parsePadding(graphic.attribute.boundsPadding),
-        bounds = graphic.AABBBounds;
-      let x = bounds.x1,
-        y = bounds.y1,
-        width = bounds.width(),
-        height = bounds.height();
-      return isNumber$1(boundsPadding) ? (x += boundsPadding, y += boundsPadding, width -= 2 * boundsPadding, height -= 2 * boundsPadding) : (x += boundsPadding[3], y += boundsPadding[0], width -= boundsPadding[1] + boundsPadding[3], height -= boundsPadding[0] + boundsPadding[2]), {
-        x: x,
-        y: y,
-        width: width,
-        height: height
-      };
-    }
-    const defaultImageBackgroundRenderContribution = new DefaultImageBackgroundRenderContribution();
-
     var __decorate$1w = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
         c = arguments.length,
@@ -19890,6 +19829,79 @@
     const defaultRectTextureRenderContribution = defaultBaseTextureRenderContribution;
     const defaultRectBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
 
+    class DefaultImageBackgroundRenderContribution extends DefaultBaseBackgroundRenderContribution {
+      constructor() {
+        super(...arguments), this.time = BaseRenderContributionTime.beforeFillStroke;
+      }
+      drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb) {
+        const {
+          background: background,
+          backgroundMode = graphicAttribute.backgroundMode,
+          backgroundFit = graphicAttribute.backgroundFit
+        } = graphic.attribute;
+        if (background) if (graphic.backgroundImg) {
+          const res = graphic.resources.get(background);
+          if ("success" !== res.state || !res.data) return;
+          if (context.save(), graphic.parent && !graphic.transMatrix.onlyTranslate()) {
+            const groupAttribute = getTheme$1(graphic.parent).group,
+              {
+                scrollX = groupAttribute.scrollX,
+                scrollY = groupAttribute.scrollY
+              } = graphic.parent.attribute;
+            context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), context.translate(scrollX, scrollY);
+          }
+          const b = graphic.AABBBounds;
+          this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
+        } else if (isObject$2(background)) {
+          const {
+            stroke: stroke,
+            fill: fill,
+            lineWidth = 1,
+            cornerRadius = 0,
+            expandX = 0,
+            expandY = 0
+          } = background;
+          if (!stroke && !fill) return;
+          context.beginPath();
+          const {
+            x: x,
+            y: y,
+            width: width,
+            height: height
+          } = getActualPosition(graphic);
+          cornerRadius ? createRectPath(context, x - expandX, y - expandY, width + 2 * expandX, height + 2 * expandY, cornerRadius) : context.rect(x - expandX, y - expandY, width + 2 * expandX, height + 2 * expandY), context.globalAlpha = 1, fill && (context.fillStyle = fill, context.fill()), stroke && lineWidth > 0 && (context.lineWidth = lineWidth, context.strokeStyle = stroke, context.stroke());
+        } else {
+          context.beginPath();
+          const b = graphic.AABBBounds;
+          context.rect(x, y, b.width(), b.height()), context.fillStyle = background, context.globalAlpha = 1, context.fill();
+        }
+      }
+    }
+    function getActualPosition(graphic) {
+      const boundsPadding = parsePadding(graphic.attribute.boundsPadding),
+        bounds = graphic.AABBBounds;
+      let x = bounds.x1,
+        y = bounds.y1,
+        width = bounds.width(),
+        height = bounds.height();
+      return isNumber$1(boundsPadding) ? (x += boundsPadding, y += boundsPadding, width -= 2 * boundsPadding, height -= 2 * boundsPadding) : (x += boundsPadding[3], y += boundsPadding[0], width -= boundsPadding[1] + boundsPadding[3], height -= boundsPadding[0] + boundsPadding[2]), {
+        x: x,
+        y: y,
+        width: width,
+        height: height
+      };
+    }
+    class DefaultImageRenderContribution extends DefaultRectRenderContribution {
+      constructor() {
+        super(...arguments), this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 0;
+      }
+      drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb) {
+        return super.drawShape(rect, context, x, y, doFill, doStroke, fVisible, sVisible, rectAttribute, drawContext, fillCb, strokeCb);
+      }
+    }
+    const defaultImageRenderContribution = new DefaultImageRenderContribution();
+    const defaultImageBackgroundRenderContribution = new DefaultImageBackgroundRenderContribution();
+
     class DefaultSymbolRenderContribution {
       constructor() {
         this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 0;
@@ -21459,15 +21471,17 @@
     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 = [defaultImageBackgroundRenderContribution], this.init(imageRenderContribitions);
+        super(), this.imageRenderContribitions = imageRenderContribitions, this.numberType = IMAGE_NUMBER_TYPE, this.builtinContributions = [defaultImageRenderContribution, defaultImageBackgroundRenderContribution], this.init(imageRenderContribitions);
       }
-      drawShape(image, context, x, y, drawContext, params, fillCb) {
+      drawShape(image, context, x, y, drawContext, params, fillCb, strokeCb) {
         const imageAttribute = getTheme$1(image).image,
           {
             width = imageAttribute.width,
             height = imageAttribute.height,
             repeatX = imageAttribute.repeatX,
             repeatY = imageAttribute.repeatY,
+            x: originX = imageAttribute.x,
+            y: originY = imageAttribute.y,
             cornerRadius = imageAttribute.cornerRadius,
             image: url
           } = image.attribute,
@@ -21492,7 +21506,7 @@
           } else context.drawImage(res.data, x, y, width, height);
           needRestore && context.restore();
         }
-        this.afterRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
+        doStroke && (strokeCb ? strokeCb(context, image.attribute, imageAttribute) : sVisible && (context.setStrokeStyle(image, image.attribute, originX - x, originY - y, imageAttribute), context.stroke())), this.afterRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
       }
       draw(image, renderService, drawContext) {
         const {
@@ -23524,7 +23538,9 @@
     let _isBrowserEnv;
     function initIsBrowserEnv() {
       if (null == _isBrowserEnv) try {
-        _isBrowserEnv = globalThis === window, _isBrowserEnv && (_isBrowserEnv = !!document.createElement);
+        const canvas = document.createElement("canvas"),
+          ctx = canvas.getContext("2d");
+        _isBrowserEnv = !!(window && canvas.getBoundingClientRect && requestAnimationFrame && window.devicePixelRatio && ctx && ctx.isPointInPath && ctx.isPointInStroke), _isBrowserEnv && (_isBrowserEnv = !!document.createElement);
       } catch (err) {
         _isBrowserEnv = !1;
       }
@@ -37404,11 +37420,11 @@
             start: start,
             end: end
           } = this.state;
-          this._activeState && (this._activeTag === DataZoomActiveTag.middleHandler ? this.moveZoomWithMiddle((this.state.start + this.state.end) / 2 + dis) : this._activeTag === DataZoomActiveTag.startHandler ? start + dis > end ? (start = end, end = start + dis, this._activeTag = DataZoomActiveTag.endHandler) : start += dis : this._activeTag === DataZoomActiveTag.endHandler && (end + dis < start ? (end = start, start = end + dis, this._activeTag = DataZoomActiveTag.startHandler) : end += dis), this._activeCache.lastPos = pos, brushSelect && this.renderDragMask()), start = Math.min(Math.max(start, 0), 1), end = Math.min(Math.max(end, 0), 1), startAttr === start && endAttr === end || this.setStateAttr(start, end, !0), realTime && this._dispatchEvent("change", {
+          this._activeState && (this._activeTag === DataZoomActiveTag.middleHandler ? this.moveZoomWithMiddle((this.state.start + this.state.end) / 2 + dis) : this._activeTag === DataZoomActiveTag.startHandler ? start + dis > end ? (start = end, end = start + dis, this._activeTag = DataZoomActiveTag.endHandler) : start += dis : this._activeTag === DataZoomActiveTag.endHandler && (end + dis < start ? (end = start, start = end + dis, this._activeTag = DataZoomActiveTag.startHandler) : end += dis), this._activeCache.lastPos = pos, brushSelect && this.renderDragMask()), start = Math.min(Math.max(start, 0), 1), end = Math.min(Math.max(end, 0), 1), startAttr === start && endAttr === end || (this.setStateAttr(start, end, !0), realTime && this._dispatchEvent("change", {
             start: start,
             end: end,
             tag: this._activeTag
-          });
+          }));
         }, this._onHandlerPointerMove = 0 === this.attribute.delayTime ? this._pointerMove : delayMap$2[this.attribute.delayType](this._pointerMove, this.attribute.delayTime), this._onHandlerPointerUp = e => {
           e.preventDefault();
           const {
@@ -37421,11 +37437,11 @@
             const pos = this.eventPosToStagePos(e);
             this.backgroundDragZoom(this._activeCache.startPos, pos);
           }
-          this._activeState = !1, brushSelect && this.renderDragMask(), start === this.state.start && end === this.state.end || this.setStateAttr(this.state.start, this.state.end, !0), this._dispatchEvent("change", {
+          this._activeState = !1, brushSelect && this.renderDragMask(), start === this.state.start && end === this.state.end || (this.setStateAttr(this.state.start, this.state.end, !0), this._dispatchEvent("change", {
             start: this.state.start,
             end: this.state.end,
             tag: this._activeTag
-          }), "browser" === vglobal.env && (vglobal.removeEventListener("pointermove", this._onHandlerPointerMove, {
+          })), "browser" === vglobal.env && (vglobal.removeEventListener("pointermove", this._onHandlerPointerMove, {
             capture: !0
           }), vglobal.removeEventListener("pointerup", this._onHandlerPointerUp)), this.removeEventListener("pointermove", this._onHandlerPointerMove, {
             capture: !0
@@ -41515,6 +41531,7 @@
         return inverse && (isHorizontal ? (res.x0 = 1, res.x1 = 0) : (res.y0 = 1, res.y1 = 0)), res;
       }
       _updateColor() {
+        var _a;
         const {
             layout = "horizontal",
             colors: colors,
@@ -41524,7 +41541,8 @@
           {
             startHandler: startHandler,
             endHandler: endHandler,
-            track: track
+            track: track,
+            attribute: attribute
           } = this._slider,
           {
             startValue: startValue,
@@ -41532,9 +41550,15 @@
             startPos: startPos,
             endPos: endPos
           } = this._slider.currentValue,
-          startHandlerColor = this._colorScale.scale(startValue),
-          endHandlerColor = this._colorScale.scale(endValue);
-        null == startHandler || startHandler.setAttribute("fill", startHandlerColor), null == endHandler || endHandler.setAttribute("fill", endHandlerColor);
+          handlerColor = null === (_a = attribute.handlerStyle) || void 0 === _a ? void 0 : _a.fill;
+        if (startHandler && !handlerColor) {
+          const startHandlerColor = this._colorScale.scale(startValue);
+          startHandler.setAttribute("fill", startHandlerColor);
+        }
+        if (endHandler && !handlerColor) {
+          const endHandlerColor = this._colorScale.scale(endValue);
+          endHandler.setAttribute("fill", endHandlerColor);
+        }
         const railLen = "horizontal" === layout ? railWidth : railHeight;
         if (Math.abs(startPos - endPos) !== railLen && colors && colors.length > 1) {
           const stops = this._color.stops,
@@ -41579,6 +41603,7 @@
       },
       handlerSize: 10,
       handlerStyle: {
+        fill: null,
         lineWidth: 4,
         stroke: "#fff",
         outerBorder: {
@@ -42671,6 +42696,7 @@
           this._outOfInteractiveRange(e) || ((this._activeDrawState || this._activeMoveState) && e.stopPropagation(), this._activeDrawState && this._drawing(e), this._activeMoveState && this._moving(e));
         }, this._onBrushingWithDelay = 0 === this.attribute.delayTime ? this._onBrushing : delayMap$1[this.attribute.delayType](this._onBrushing, this.attribute.delayTime), this._onBrushEnd = e => {
           var _a;
+          if (!this._activeDrawState && !this._activeMoveState) return;
           e.preventDefault();
           const {
             removeOnClick = !0
@@ -44259,12 +44285,12 @@
     let Element$1 = class Element {
       constructor(mark) {
         this.data = null, this.states = [], this.diffState = DiffState.enter, this.isReserved = !1, this.runtimeStatesEncoder = null, this.items = [], this.getStateAttrs = (stateName, nextStates) => {
-          var _a, _b, _c;
+          var _a, _b, _c, _d;
           const isRuntimeState = !isNil$1(null === (_a = this.runtimeStatesEncoder) || void 0 === _a ? void 0 : _a[stateName]),
-            encoder = isRuntimeState ? this.runtimeStatesEncoder[stateName] : null === (_b = this.mark.getSpec().encode) || void 0 === _b ? void 0 : _b[stateName];
+            encoder = isRuntimeState ? Object.assign(Object.assign({}, null === (_b = this.mark.getSpec().encode) || void 0 === _b ? void 0 : _b[stateName]), this.runtimeStatesEncoder[stateName]) : null === (_c = this.mark.getSpec().encode) || void 0 === _c ? void 0 : _c[stateName];
           if (!encoder) return {};
           if (isFunction$1(encoder)) return encoder(this.getDatum(), this, stateName, nextStates);
-          if (!isRuntimeState && (null === (_c = this.graphicItem.states) || void 0 === _c ? void 0 : _c[stateName])) return this.graphicItem.states[stateName];
+          if (!isRuntimeState && (null === (_d = this.graphicItem.states) || void 0 === _d ? void 0 : _d[stateName])) return this.graphicItem.states[stateName];
           const stateItems = this.items.map(item => Object.assign({}, item, {
             nextAttrs: {}
           }));
@@ -46060,13 +46086,13 @@
     class GlyphElement extends Element$1 {
       constructor(mark) {
         super(mark), this.getStateAttrs = (stateName, nextStates) => {
-          var _a, _b, _c;
+          var _a, _b, _c, _d;
           const isRuntimeState = !isNil$1(null === (_a = this.runtimeStatesEncoder) || void 0 === _a ? void 0 : _a[stateName]),
-            encoder = isRuntimeState ? this.runtimeStatesEncoder[stateName] : null === (_b = this.mark.getSpec().encode) || void 0 === _b ? void 0 : _b[stateName],
+            encoder = isRuntimeState ? Object.assign(Object.assign({}, null === (_b = this.mark.getSpec().encode) || void 0 === _b ? void 0 : _b[stateName]), this.runtimeStatesEncoder[stateName]) : null === (_c = this.mark.getSpec().encode) || void 0 === _c ? void 0 : _c[stateName],
             glyphStateAttributes = {};
           if (!encoder) return glyphStateAttributes;
           if (isFunction$1(encoder)) return glyphStateAttributes.attributes = encoder(this.getDatum(), this, stateName, nextStates), glyphStateAttributes;
-          if (!isRuntimeState && (null === (_c = this.graphicItem.glyphStates) || void 0 === _c ? void 0 : _c[stateName])) return this.graphicItem.glyphStates[stateName];
+          if (!isRuntimeState && (null === (_d = this.graphicItem.glyphStates) || void 0 === _d ? void 0 : _d[stateName])) return this.graphicItem.glyphStates[stateName];
           if (encoder) {
             const item = this.items[0],
               targetItems = [Object.assign({}, item, {
@@ -47140,9 +47166,18 @@
         this.graphicIndex = markIndex;
       }
       update(spec) {
-        this._context = this.spec.context, this.isUpdated = !0, this.renderContext.progressive || (spec.animation && this.animate.updateConfig(spec.animation), this.animate.updateState(spec.animationState)), this.markType !== GrammarMarkType.group ? (isNil$1(spec.zIndex) || this.graphicItem.setAttribute("zIndex", spec.zIndex), isNil$1(spec.clip) || this.graphicItem.setAttribute("clip", spec.clip), isNil$1(spec.clipPath) || this.graphicItem.setAttribute("path", isArray$1(spec.clipPath) ? spec.clipPath : spec.clipPath(this.elements)), this.elementMap.forEach(element => {
-          element.updateGraphicItem();
-        })) : this.elementMap.forEach(element => {
+        if (this._context = this.spec.context, this.isUpdated = !0, this.renderContext.progressive || (spec.animation && this.animate.updateConfig(spec.animation), this.animate.updateState(spec.animationState)), this.markType !== GrammarMarkType.group) {
+          if (isNil$1(spec.zIndex) || this.graphicItem.setAttribute("zIndex", spec.zIndex), isNil$1(spec.clip) || this.graphicItem.setAttribute("clip", spec.clip), !isNil$1(spec.clipPath)) {
+            const paths = isArray$1(spec.clipPath) ? spec.clipPath : spec.clipPath(this.elements);
+            paths && paths.length ? this.graphicItem.setAttribute("path", paths) : this.graphicItem.setAttributes({
+              path: paths,
+              clip: !1
+            });
+          }
+          this.elementMap.forEach(element => {
+            element.updateGraphicItem();
+          });
+        } else this.elementMap.forEach(element => {
           element.updateGraphicItem();
         });
       }
@@ -47446,7 +47481,11 @@
       getChannelsFromConfig(element) {
         const spec = this.spec,
           initAttrs = {};
-        return isNil$1(spec.clip) || (initAttrs.clip = spec.clip), isNil$1(spec.zIndex) || (initAttrs.zIndex = spec.zIndex), isNil$1(spec.clipPath) || (initAttrs.path = isFunction$1(spec.clipPath) ? spec.clipPath([element]) : spec.clipPath), isNil$1(spec.interactive) || (initAttrs.pickable = spec.interactive), initAttrs;
+        if (isNil$1(spec.clip) || (initAttrs.clip = spec.clip), isNil$1(spec.zIndex) || (initAttrs.zIndex = spec.zIndex), !isNil$1(spec.clipPath)) {
+          const paths = isFunction$1(spec.clipPath) ? spec.clipPath([element]) : spec.clipPath;
+          paths && paths.length ? initAttrs.path = paths : (initAttrs.path = null, initAttrs.clip = !1);
+        }
+        return isNil$1(spec.interactive) || (initAttrs.pickable = spec.interactive), initAttrs;
       }
       evaluateGroupEncode(elements, groupEncode, parameters) {
         var _a;
@@ -55105,6 +55144,30 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         dfs(hierarchyData, []);
         return result;
     };
+    function isHierarchyItem(item, valueField = 'value', childrenField = 'children') {
+        if (!isObject$2(item)) {
+            return false;
+        }
+        if (item.hasOwnProperty(childrenField)) {
+            return Array.isArray(item[childrenField]);
+        }
+        return false;
+    }
+    function filterHierarchyDataByRange(data, minValue, maxValue, valueField = 'value', childrenField = 'children') {
+        if (!Array.isArray(data)) {
+            return data;
+        }
+        return data
+            .map(item => {
+            const newItem = Object.assign({}, item);
+            if (Array.isArray(newItem[childrenField])) {
+                newItem[childrenField] = filterHierarchyDataByRange(newItem[childrenField], minValue, maxValue, valueField, childrenField);
+            }
+            return newItem;
+        })
+            .filter(item => (+item[valueField] >= minValue && +item[valueField] <= maxValue) ||
+            (item[childrenField] && item[childrenField].length > 0));
+    }
 
     function transformComponentStyle(cfg = {}) {
         const newConfig = Object.assign({}, cfg);
@@ -66280,7 +66343,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         registerComponentPlugin(CanvasTooltipHandler);
     };
 
-    const version = "1.11.2";
+    const version = "1.11.3";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -71955,6 +72018,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 result.reMake = true;
                 return result;
             }
+            for (let i = 0; i < currentKeys.length; i++) {
+                const key = currentKeys[i];
+                if (isArray$1(this._spec[key]) && this._spec[key].length !== spec[key].length) {
+                    result.reMake = true;
+                    return result;
+                }
+            }
             const oldSpec = this._spec;
             this._spec = spec;
             this.updateChartConfig(result, oldSpec);
@@ -73636,22 +73706,31 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const xScale = (_b = (_a = this._xAxisHelper) === null || _a === void 0 ? void 0 : _a.getScale) === null || _b === void 0 ? void 0 : _b.call(_a, 0);
             const yScale = (_d = (_c = this._yAxisHelper) === null || _c === void 0 ? void 0 : _c.getScale) === null || _d === void 0 ? void 0 : _d.call(_c, 0);
             if (this.direction === "horizontal") {
-                this.setMarkStyle(this._barMark, {
-                    x: datum => this._getBarXStart(datum, xScale),
-                    x1: datum => this._getBarXEnd(datum, xScale),
-                    y: datum => valueInScaleRange(this.dataToPositionY(datum), yScale),
-                    y1: datum => valueInScaleRange(this.dataToPositionY1(datum), yScale)
-                }, 'normal', exports.AttributeLevel.Series);
+                const yChannels = isValid$1(this._fieldY2)
+                    ? {
+                        y: (datum) => valueInScaleRange(this._dataToPosY(datum), yScale),
+                        y1: (datum) => valueInScaleRange(this._dataToPosY1(datum), yScale)
+                    }
+                    : {
+                        y: (datum) => valueInScaleRange(this._dataToPosY(datum) - this._getBarWidth(this._yAxisHelper) / 2, yScale),
+                        height: (datum) => this._getBarWidth(this._yAxisHelper)
+                    };
+                this.setMarkStyle(this._barMark, Object.assign({ x: (datum) => this._getBarXStart(datum, xScale), x1: (datum) => this._getBarXEnd(datum, xScale) }, yChannels), 'normal', exports.AttributeLevel.Series);
+                this.setMarkStyle(this._barBackgroundMark, Object.assign({ x: () => this._getBarBackgroundXStart(xScale), x1: () => this._getBarBackgroundXEnd(xScale) }, yChannels), 'normal', exports.AttributeLevel.Series);
             }
             else {
-                this.setMarkStyle(this._barMark, {
-                    x: (datum) => valueInScaleRange(this.dataToPositionX(datum), xScale),
-                    x1: (datum) => valueInScaleRange(this.dataToPositionX1(datum), xScale),
-                    y: datum => this._getBarYStart(datum, yScale),
-                    y1: datum => this._getBarYEnd(datum, yScale)
-                }, 'normal', exports.AttributeLevel.Series);
+                const xChannels = isValid$1(this._fieldX2)
+                    ? {
+                        x: (datum) => valueInScaleRange(this._dataToPosX(datum), xScale),
+                        x1: (datum) => valueInScaleRange(this._dataToPosX1(datum), xScale)
+                    }
+                    : {
+                        x: (datum) => valueInScaleRange(this._dataToPosX(datum) - this._getBarWidth(this._xAxisHelper) / 2, xScale),
+                        width: (datum) => this._getBarWidth(this._xAxisHelper)
+                    };
+                this.setMarkStyle(this._barMark, Object.assign(Object.assign({}, xChannels), { y: datum => this._getBarYStart(datum, yScale), y1: datum => this._getBarYEnd(datum, yScale) }), 'normal', exports.AttributeLevel.Series);
+                this.setMarkStyle(this._barBackgroundMark, Object.assign(Object.assign({}, xChannels), { y: () => this._getBarBackgroundYStart(yScale), y1: () => this._getBarBackgroundYEnd(yScale) }), 'normal', exports.AttributeLevel.Series);
             }
-            this._initLinearBarBackgroundMarkStyle();
         }
         _initBandBarBackgroundMarkStyle() {
             var _a, _b, _c, _d, _e;
@@ -73683,27 +73762,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }, 'normal', exports.AttributeLevel.Series);
             }
         }
-        _initLinearBarBackgroundMarkStyle() {
-            var _a, _b, _c, _d;
-            const xScale = (_b = (_a = this._xAxisHelper) === null || _a === void 0 ? void 0 : _a.getScale) === null || _b === void 0 ? void 0 : _b.call(_a, 0);
-            const yScale = (_d = (_c = this._yAxisHelper) === null || _c === void 0 ? void 0 : _c.getScale) === null || _d === void 0 ? void 0 : _d.call(_c, 0);
-            if (this.direction === "horizontal") {
-                this.setMarkStyle(this._barBackgroundMark, {
-                    x: () => this._getBarBackgroundXStart(xScale),
-                    x1: () => this._getBarBackgroundXEnd(xScale),
-                    y: datum => valueInScaleRange(this.dataToPositionY(datum), yScale),
-                    y1: datum => valueInScaleRange(this.dataToPositionY1(datum), yScale)
-                }, 'normal', exports.AttributeLevel.Series);
-            }
-            else {
-                this.setMarkStyle(this._barBackgroundMark, {
-                    x: datum => valueInScaleRange(this.dataToPositionX(datum), xScale),
-                    x1: datum => valueInScaleRange(this.dataToPositionX1(datum), xScale),
-                    y: () => this._getBarBackgroundYStart(yScale),
-                    y1: () => this._getBarBackgroundYEnd(yScale)
-                }, 'normal', exports.AttributeLevel.Series);
-            }
-        }
         initAnimation() {
             var _a, _b;
             const barAnimationParams = {
@@ -85929,7 +85987,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         center: center,
         start: left,
         end: right
-      };
+      },
+      linkClampe = clamper(0, 1);
     class SankeyLayout {
       constructor(options) {
         this._ascendingSourceBreadth = (a, b) => ascendingNodeBreadth(this._nodeMap[a.source], this._nodeMap[b.source]) || a.index - b.index, this._ascendingTargetBreadth = (a, b) => ascendingNodeBreadth(this._nodeMap[a.target], this._nodeMap[b.target]) || a.index - b.index, this.options = Object.assign({}, SankeyLayout.defaultOptions, options);
@@ -86240,7 +86299,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         const isStartGap = "start" === this.options.gapPosition,
           isMiddleGap = !isStartGap && "end" !== this.options.gapPosition,
           getNodeHeight = isNumber$1(this.options.nodeHeight) ? node => this.options.nodeHeight : isFunction$1(this.options.nodeHeight) ? this.options.nodeHeight : forceNodeHeight > 0 ? node => forceNodeHeight : node => Math.max(node.value * ky, minNodeHeight, 0),
-          getLinkHeight = isNumber$1(this.options.linkHeight) ? () => this.options.linkHeight : isFunction$1(this.options.linkHeight) ? this.options.linkHeight : (link, sourceNode, sourceNodeHeight) => Math.max(sourceNode.value ? sourceNodeHeight * link.value / sourceNode.value : 0, minLinkHeight, 0);
+          getLinkHeight = isNumber$1(this.options.linkHeight) ? () => this.options.linkHeight : isFunction$1(this.options.linkHeight) ? this.options.linkHeight : (link, sourceNode, sourceNodeHeight) => Math.max(sourceNode.value ? sourceNodeHeight * linkClampe(link.value / sourceNode.value) : 0, minLinkHeight, 0);
         for (let i = 0, columnCount = columns.length; i < columnCount; i++) {
           const nodes = columns[i];
           if (!nodes || !nodes.length) continue;
@@ -86268,7 +86327,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
               }
             }
           } else if (deltaY < 0 && nodes.length > 1 && (deltaY /= nodes.length - 1, gapY + deltaY > 0)) {
-            gapY += deltaY;
+            gapY += deltaY, this._gapY = Math.min(gapY);
             for (let j = 1, len = nodes.length; j < len; ++j) {
               const node = nodes[j];
               node.y0 += deltaY * j, node.y1 += deltaY * j;
@@ -86366,15 +86425,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
       computeLinkBreadthsNoOverlap(nodes) {
         for (let i = 0, len = nodes.length; i < len; i++) {
           const node = nodes[i];
-          let y0 = node.y0;
+          let y0 = node.y0,
+            reachBottom = !1;
           for (let j = 0, linkLen = node.sourceLinks.length; j < linkLen; j++) {
             const link = node.sourceLinks[j];
-            link.y0 = y0 + link.thickness / 2, link.x0 = node.x1, y0 += link.thickness;
+            reachBottom || (link.y0 = y0 + link.thickness / 2), link.x0 = node.x1, y0 + link.thickness > node.y1 || reachBottom ? (link.y0 = node.y1 - link.thickness / 2, reachBottom = !0) : y0 += link.thickness;
           }
           let y1 = node.y0;
+          reachBottom = !1;
           for (let j = 0, linkLen = node.targetLinks.length; j < linkLen; j++) {
             const link = node.targetLinks[j];
-            link.y1 = y1 + link.thickness / 2, link.x1 = node.x0, y1 += link.thickness;
+            reachBottom || (link.y1 = y1 + link.thickness / 2), link.x1 = node.x0, y1 + link.thickness > node.y1 || reachBottom ? (link.y1 = node.y1 - link.thickness / 2, reachBottom = !0) : y1 += link.thickness;
           }
         }
       }
@@ -87806,6 +87867,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.transformerConstructor = TreemapSeriesSpecTransformer;
             this._viewBox = new Bounds();
             this._enableAnimationHook = this.enableMarkAnimation.bind(this);
+            this.isHierarchyData = () => {
+                return true;
+            };
         }
         getCategoryField() {
             return this._categoryField;
@@ -92023,14 +92087,24 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 r.getSeries().forEach(s => {
                     var _a, _b;
                     let activeNodeOrLink = null;
-                    s.getMarks().forEach(m => {
+                    s.getMarksWithoutRoot().forEach(m => {
+                        if (m.type === 'text') {
+                            return;
+                        }
                         let pickElement = null;
                         const mark = m.getProduct();
                         if (!mark) {
                             return;
                         }
                         if (!filter || (isFunction$1(filter) && filter(s, m))) {
-                            pickElement = mark.elements.find((e) => keys.every(k => { var _a, _b; return activeDatum[k] == ((_b = (_a = e.getDatum()) === null || _a === void 0 ? void 0 : _a.datum) === null || _b === void 0 ? void 0 : _b[k]); }));
+                            pickElement = mark.elements.find((e) => keys.every(k => {
+                                var _a;
+                                let datum = (_a = e.getDatum()) === null || _a === void 0 ? void 0 : _a.datum;
+                                if (isArray$1(datum)) {
+                                    datum = datum[0];
+                                }
+                                return activeDatum[k] == (datum === null || datum === void 0 ? void 0 : datum[k]);
+                            }));
                         }
                         if (pickElement) {
                             hasPick = true;
@@ -92753,18 +92827,26 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         return [];
     };
     const continuousLegendFilter = (data, op) => {
-        const { selected, field, data: legendData } = op;
+        const { selected, field, data: legendData, isHierarchyData } = op;
         const selectedRange = selected();
         const datumField = field();
         const dataRange = legendData();
+        const isHierarchy = isHierarchyData
+            ? isHierarchyData
+            : (data) => data && data.some(d => d && isHierarchyItem(d));
         if (selectedRange === dataRange) {
             return data;
         }
         if (datumField && !isEmpty(selectedRange)) {
             const [min, max] = selectedRange;
-            return data.filter(datum => {
-                return datum[datumField] >= min && datum[datumField] <= max;
-            });
+            if (isHierarchy(data)) {
+                return filterHierarchyDataByRange(data, +min, +max);
+            }
+            else {
+                return data.filter(datum => {
+                    return datum[datumField] >= min && datum[datumField] <= max;
+                });
+            }
         }
         return data;
     };
@@ -92868,7 +92950,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     options: {
                         selected: () => this._selectedData,
                         field: () => this._field,
-                        data: () => this._legendData.getLatestData()
+                        data: () => this._legendData.getLatestData(),
+                        isHierarchyData: s.isHierarchyData
                     },
                     level: TransformLevel.legendFilter
                 });
@@ -95998,13 +96081,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }, orient: this._orient, size: {
                     width: this.getLayoutRect().width,
                     height: this.getLayoutRect().height
-                }, showDetail: spec.showDetail, brushSelect: (_b = spec.brushSelect) !== null && _b !== void 0 ? _b : false, zoomLock: (_c = spec.zoomLock) !== null && _c !== void 0 ? _c : false, minSpan: this._minSpan, maxSpan: this._maxSpan, delayType: spec.delayType, delayTime: isValid$1(spec.delayType) ? (_d = spec.delayTime) !== null && _d !== void 0 ? _d : 30 : 0, realTime: (_e = spec.realTime) !== null && _e !== void 0 ? _e : true, previewData: isNeedPreview && this._data.getLatestData(), previewPointsX: isNeedPreview && this._dataToPositionX, previewPointsY: isNeedPreview && this._dataToPositionY, tolerance: this._spec.tolerance }, this._getComponentAttrs());
+                }, showDetail: spec.showDetail, brushSelect: (_b = spec.brushSelect) !== null && _b !== void 0 ? _b : false, zoomLock: (_c = spec.zoomLock) !== null && _c !== void 0 ? _c : false, minSpan: this._minSpan, maxSpan: this._maxSpan, delayType: spec.delayType, delayTime: isValid$1(spec.delayType) ? (_d = spec.delayTime) !== null && _d !== void 0 ? _d : 30 : 0, realTime: (_e = spec.realTime) !== null && _e !== void 0 ? _e : true, previewData: isNeedPreview && this._data.getLatestData(), previewPointsX: isNeedPreview && this._dataToPositionX, previewPointsY: isNeedPreview && this._dataToPositionY, tolerance: this._spec.tolerance }, this._getComponentAttrs(isNeedPreview));
         }
         _createOrUpdateComponent() {
             if (this._visible) {
                 const xScale = this._isHorizontal ? this._stateScale : this._valueScale;
                 const yScale = this._isHorizontal ? this._valueScale : this._stateScale;
-                const isNeedPreview = this._isScaleValid(xScale) && this._isScaleValid(yScale);
+                const isNeedPreview = this._isScaleValid(xScale) && this._isScaleValid(yScale) && this._spec.showBackgroundChart !== false;
                 const attrs = this._getAttrs(isNeedPreview);
                 if (this._component) {
                     this._component.setAttributes(attrs);
@@ -96068,7 +96151,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
             }
         }
-        _getComponentAttrs() {
+        _getComponentAttrs(isNeedPreview) {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             const { middleHandler = {}, startText = {}, endText = {}, backgroundChart = {}, selectedBackgroundChart = {} } = this._spec;
             return {
@@ -96097,14 +96180,24 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 },
                 selectedBackgroundStyle: transformToGraphic(this._spec.selectedBackground.style),
                 dragMaskStyle: transformToGraphic((_g = this._spec.dragMask) === null || _g === void 0 ? void 0 : _g.style),
-                backgroundChartStyle: {
-                    line: mergeSpec(transformToGraphic((_h = backgroundChart.line) === null || _h === void 0 ? void 0 : _h.style), { fill: false }),
-                    area: Object.assign({ curveType: 'basis', visible: true }, transformToGraphic((_j = backgroundChart.area) === null || _j === void 0 ? void 0 : _j.style))
-                },
-                selectedBackgroundChartStyle: {
-                    line: mergeSpec(transformToGraphic((_k = selectedBackgroundChart.line) === null || _k === void 0 ? void 0 : _k.style), { fill: false }),
-                    area: Object.assign({ curveType: 'basis', visible: true }, transformToGraphic((_l = selectedBackgroundChart.area) === null || _l === void 0 ? void 0 : _l.style))
-                },
+                backgroundChartStyle: isNeedPreview
+                    ? {
+                        line: mergeSpec(transformToGraphic((_h = backgroundChart.line) === null || _h === void 0 ? void 0 : _h.style), { fill: false }),
+                        area: Object.assign({ curveType: 'basis', visible: true }, transformToGraphic((_j = backgroundChart.area) === null || _j === void 0 ? void 0 : _j.style))
+                    }
+                    : {
+                        line: { visible: false },
+                        area: { visible: false }
+                    },
+                selectedBackgroundChartStyle: isNeedPreview
+                    ? {
+                        line: mergeSpec(transformToGraphic((_k = selectedBackgroundChart.line) === null || _k === void 0 ? void 0 : _k.style), { fill: false }),
+                        area: Object.assign({ curveType: 'basis', visible: true }, transformToGraphic((_l = selectedBackgroundChart.area) === null || _l === void 0 ? void 0 : _l.style))
+                    }
+                    : {
+                        line: { visible: false },
+                        area: { visible: false }
+                    },
                 disableTriggerEvent: this._option.disableTriggerEvent
             };
         }
@@ -101381,6 +101474,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     exports.BarChart = BarChart;
     exports.BarSeries = BarSeries;
     exports.BaseChart = BaseChart;
+    exports.BaseChartSpecTransformer = BaseChartSpecTransformer;
     exports.BaseMark = BaseMark;
     exports.BaseSeries = BaseSeries;
     exports.BoxPlotChart = BoxPlotChart;