@visactor/vchart 1.11.3-alpha.0 → 1.11.3

package/build/index.es.js

@@ -16852,6 +16852,7 @@ class Glyph extends Graphic {
     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 => {
@@ -16865,9 +16866,9 @@ class Glyph extends Graphic {
     }), 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));
@@ -18382,7 +18383,7 @@ let DefaultGraphicService = class {
       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);
@@ -18783,7 +18784,9 @@ let DefaultGraphicService = class {
     }
     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) {
@@ -19714,70 +19717,6 @@ function createRectPath(path, x, y, width, height, rectCornerRadius) {
   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,
@@ -19884,6 +19823,79 @@ const defaultRectRenderContribution = new DefaultRectRenderContribution();
 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;
@@ -21453,15 +21465,17 @@ var __decorate$1m = undefined && undefined.__decorate || function (decorators, t
 const repeatStr = ["", "repeat-x", "repeat-y", "repeat"];
 let DefaultCanvasImageRender = class extends BaseRender {
   constructor(imageRenderContribitions) {
-    super(), this.imageRenderContribitions = imageRenderContribitions, this.numberType = IMAGE_NUMBER_TYPE, this.builtinContributions = [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,
@@ -21486,7 +21500,7 @@ let DefaultCanvasImageRender = class extends BaseRender {
       } 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 {
@@ -23518,7 +23532,9 @@ class OrthoCamera {
 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;
   }
@@ -37398,11 +37414,11 @@ let DataZoom$1 = class DataZoom extends AbstractComponent {
         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 {
@@ -37415,11 +37431,11 @@ let DataZoom$1 = class DataZoom extends AbstractComponent {
         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
@@ -41509,6 +41525,7 @@ class ColorContinuousLegend extends LegendBase {
     return inverse && (isHorizontal ? (res.x0 = 1, res.x1 = 0) : (res.y0 = 1, res.y1 = 0)), res;
   }
   _updateColor() {
+    var _a;
     const {
         layout = "horizontal",
         colors: colors,
@@ -41518,7 +41535,8 @@ class ColorContinuousLegend extends LegendBase {
       {
         startHandler: startHandler,
         endHandler: endHandler,
-        track: track
+        track: track,
+        attribute: attribute
       } = this._slider,
       {
         startValue: startValue,
@@ -41526,9 +41544,15 @@ class ColorContinuousLegend extends LegendBase {
         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,
@@ -41573,6 +41597,7 @@ ColorContinuousLegend.defaultAttributes = {
   },
   handlerSize: 10,
   handlerStyle: {
+    fill: null,
     lineWidth: 4,
     stroke: "#fff",
     outerBorder: {
@@ -42665,6 +42690,7 @@ let Brush$1 = class Brush extends AbstractComponent {
       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
@@ -44253,12 +44279,12 @@ function parseCollectionMarkAttributes(itemNextAttrs) {
 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: {}
       }));
@@ -46054,13 +46080,13 @@ function configureEnvironment(options) {
 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, {
@@ -47134,9 +47160,18 @@ class Mark extends GrammarBase {
     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();
     });
   }
@@ -47440,7 +47475,11 @@ let GroupMark$1 = class GroupMark extends Mark {
   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;
@@ -66298,7 +66337,7 @@ const registerCanvasTooltipHandler = () => {
     registerComponentPlugin(CanvasTooltipHandler);
 };
 
-const version = "1.11.3-alpha.0";
+const version = "1.11.3";
 
 const addVChartProperty = (data, op) => {
     const context = op.beforeCall();
@@ -85942,7 +85981,8 @@ const ascendingNodeBreadth = (a, b) => (null == a ? void 0 : a.y0) - (null == b
     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);
@@ -86253,7 +86293,7 @@ class SankeyLayout {
     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;
@@ -86281,7 +86321,7 @@ class SankeyLayout {
           }
         }
       } 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;
@@ -86379,15 +86419,17 @@ class SankeyLayout {
   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;
       }
     }
   }
@@ -92039,14 +92081,24 @@ class SankeyChart extends BaseChart {
             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;