@visactor/vchart 1.10.5-alpha.1 → 1.10.5

package/build/index.js

@@ -937,6 +937,12 @@
       });
     }
 
+    function toValidNumber$1(v) {
+      if (isValidNumber$1(v)) return v;
+      const value = +v;
+      return isValidNumber$1(value) ? value : 0;
+    }
+
     const epsilon$1 = 1e-12;
     const pi$1 = Math.PI;
     const halfPi$2 = pi$1 / 2;
@@ -8794,6 +8800,7 @@
       textBaseline: "top",
       layoutDirection: "horizontal",
       textConfig: [],
+      forceBreakLine: !1,
       maxHeight: void 0,
       maxWidth: void 0,
       singleLine: !1
@@ -9185,13 +9192,14 @@
         });
       }
       clipTextWithSuffix(text, options, width, suffix, wordBreak, position) {
+        let forceSuffix = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : !1;
         if ("" === suffix) return this.clipText(text, options, width, wordBreak);
         if (0 === text.length) return {
           str: "",
           width: 0
         };
         const length = this.measureTextWidth(text, options);
-        if (length <= width) return {
+        if (!forceSuffix && length <= width) return {
           str: text,
           width: length
         };
@@ -9200,12 +9208,16 @@
           str: "",
           width: 0
         };
+        if (forceSuffix && length + suffixWidth <= width) return {
+          str: text + suffix,
+          width: length + suffixWidth
+        };
         width -= suffixWidth;
         const data = this._clipText(text, options, width, 0, text.length - 1, position, suffix);
         if (wordBreak && data.str !== text) {
           const index = testLetter(text, data.str.length);
-          index !== data.str.length && (data.str = text.substring(0, index), data.width = this.measureTextWidth(data.str, options));
-        }
+          index !== data.str.length && (data.result = text.substring(0, index), data.width = this.measureTextWidth(data.str, options));
+        } else forceSuffix && data.str === text && (data.result = text + suffix);
         return data.str = data.result, data.width += suffixWidth, data;
       }
     };
@@ -10606,7 +10618,12 @@
             for (; overTargetAncestor && overTargetAncestor !== this.rootTarget.parent && overTargetAncestor !== e.target;) overTargetAncestor = overTargetAncestor.parent;
             if (!overTargetAncestor || overTargetAncestor === this.rootTarget.parent) {
               const enterEvent = this.clonePointerEvent(e, "pointerenter");
-              for (enterEvent.eventPhase = enterEvent.AT_TARGET; enterEvent.target && enterEvent.target !== outTarget && enterEvent.target !== this.rootTarget.parent;) enterEvent.currentTarget = enterEvent.target, this.notifyTarget(enterEvent), isMouse && this.notifyTarget(enterEvent, "mouseenter"), enterEvent.target = enterEvent.target.parent;
+              enterEvent.eventPhase = enterEvent.AT_TARGET;
+              let currentTarget = enterEvent.target;
+              const outTargetAncestors = new Set();
+              let ancestor = outTarget;
+              for (; ancestor && ancestor !== this.rootTarget;) outTargetAncestors.add(ancestor), ancestor = ancestor.parent;
+              for (; currentTarget && currentTarget !== outTarget && currentTarget !== this.rootTarget.parent;) outTargetAncestors.has(currentTarget) || (enterEvent.currentTarget = currentTarget, this.notifyTarget(enterEvent), isMouse && this.notifyTarget(enterEvent, "mouseenter")), currentTarget = currentTarget.parent;
               this.freeEvent(enterEvent);
             }
             this.freeEvent(overEvent);
@@ -10808,8 +10825,6 @@
     }
 
     const EventTarget = {
-      pickable: !0,
-      visible: !0,
       dispatchEvent(e) {
         var _a;
         if (!(e instanceof FederatedEvent)) throw new Error("DisplayObject cannot propagate events outside of the Federated Events API");
@@ -13549,19 +13564,17 @@
         var _a, _b, _c, _d;
         if (hasAnimation) {
           const keys = Object.keys(attrs),
-            noWorkAAttr = this.getNoWorkAnimateAttr(),
+            noWorkAttrs = this.getNoWorkAnimateAttr(),
             animateAttrs = {};
           let noAnimateAttrs;
-          isClear ? keys.forEach(key => {
-            noWorkAAttr[key] ? (noAnimateAttrs || (noAnimateAttrs = {}), noAnimateAttrs[key] = attrs[key]) : animateAttrs[key] = void 0 === attrs[key] ? this.getDefaultAttribute(key) : attrs[key];
-          }) : keys.forEach(key => {
-            noWorkAAttr[key] ? (noAnimateAttrs || (noAnimateAttrs = {}), noAnimateAttrs[key] = attrs[key]) : animateAttrs[key] = attrs[key];
+          keys.forEach(key => {
+            noWorkAttrs[key] ? (noAnimateAttrs || (noAnimateAttrs = {}), noAnimateAttrs[key] = attrs[key]) : animateAttrs[key] = isClear && void 0 === attrs[key] ? this.getDefaultAttribute(key) : attrs[key];
           });
           const animate = this.animate();
           animate.stateNames = stateNames, animate.to(animateAttrs, null !== (_b = null === (_a = this.stateAnimateConfig) || void 0 === _a ? void 0 : _a.duration) && void 0 !== _b ? _b : DefaultStateAnimateConfig.duration, null !== (_d = null === (_c = this.stateAnimateConfig) || void 0 === _c ? void 0 : _c.easing) && void 0 !== _d ? _d : DefaultStateAnimateConfig.easing), noAnimateAttrs && this.setAttributes(noAnimateAttrs, !1, {
             type: AttributeUpdateType.STATE
           });
-        } else this.setAttributes(attrs, !1, {
+        } else this.stopStateAnimates(), this.setAttributes(attrs, !1, {
           type: AttributeUpdateType.STATE
         });
       }
@@ -13575,6 +13588,12 @@
           newNormalAttrs[key] = this.getNormalAttribute(key);
         }), this.normalAttrs = newNormalAttrs;
       }
+      stopStateAnimates() {
+        let type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "end";
+        this.animates && this.animates.forEach(animate => {
+          animate.stateNames && animate.stop(type);
+        });
+      }
       getNormalAttribute(key) {
         let value = this.attribute[key];
         return this.animates && this.animates.forEach(animate => {
@@ -15128,7 +15147,7 @@
             const str = lines[i];
             let needCut = !0;
             if (i === lineCountLimit - 1) {
-              const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
+              const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition, i !== lines.length - 1);
               linesLayout.push({
                 str: clip.str,
                 width: clip.width
@@ -15498,138 +15517,6 @@
       return new Text$1(attributes);
     }
 
-    const WRAP_TEXT_UPDATE_TAG_KEY = ["heightLimit", "lineClamp"];
-    class WrapText extends Text$1 {
-      constructor(params) {
-        super(Object.assign(Object.assign({}, params), {
-          wrap: !0
-        }));
-      }
-      _isValid() {
-        const {
-          text: text
-        } = this.attribute;
-        return isArray$3(text) ? !text.every(t => null == t || "" === t) : null != text && "" !== text;
-      }
-      updateMultilineAABBBounds(text) {
-        var _a, _b, _c, _d;
-        const textTheme = getTheme$1(this).text,
-          {
-            fontFamily = textTheme.fontFamily,
-            textAlign = textTheme.textAlign,
-            textBaseline = textTheme.textBaseline,
-            fontSize = textTheme.fontSize,
-            ellipsis = textTheme.ellipsis,
-            maxLineWidth: maxLineWidth,
-            stroke = textTheme.stroke,
-            lineWidth = textTheme.lineWidth,
-            wordBreak = textTheme.wordBreak,
-            fontWeight = textTheme.fontWeight,
-            ignoreBuf = textTheme.ignoreBuf,
-            heightLimit = 0,
-            suffixPosition = textTheme.suffixPosition,
-            lineClamp: lineClamp
-          } = this.attribute,
-          lineHeight = null !== (_a = calculateLineHeight(this.attribute.lineHeight, this.attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : this.attribute.fontSize || textTheme.fontSize,
-          buf = ignoreBuf ? 0 : 2;
-        if (!this.shouldUpdateShape() && (null === (_b = this.cache) || void 0 === _b ? void 0 : _b.layoutData)) {
-          const bbox = this.cache.layoutData.bbox;
-          return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-        }
-        const textMeasure = application.graphicUtil.textMeasure,
-          layoutObj = new CanvasTextLayout(fontFamily, {
-            fontSize: fontSize,
-            fontWeight: fontWeight,
-            fontFamily: fontFamily
-          }, textMeasure),
-          lines = text.map(l => l.toString()),
-          linesLayout = [],
-          bboxWH = [0, 0];
-        let lineCountLimit = 1 / 0;
-        if (heightLimit > 0 && (lineCountLimit = Math.max(Math.floor(heightLimit / lineHeight), 1)), lineClamp && (lineCountLimit = Math.min(lineCountLimit, lineClamp)), "number" == typeof maxLineWidth && maxLineWidth !== 1 / 0) {
-          if (maxLineWidth > 0) for (let i = 0; i < lines.length; i++) {
-            const str = lines[i];
-            let needCut = !0;
-            if (i === lineCountLimit - 1) {
-              const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
-              linesLayout.push({
-                str: clip.str,
-                width: clip.width
-              });
-              break;
-            }
-            const clip = layoutObj.textMeasure.clipText(str, layoutObj.textOptions, maxLineWidth, "break-word" === wordBreak);
-            if ("" !== str && "" === clip.str) {
-              if (ellipsis) {
-                const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
-                clip.str = null !== (_c = clipEllipsis.str) && void 0 !== _c ? _c : "", clip.width = null !== (_d = clipEllipsis.width) && void 0 !== _d ? _d : 0;
-              } else clip.str = "", clip.width = 0;
-              needCut = !1;
-            }
-            if (linesLayout.push({
-              str: clip.str,
-              width: clip.width
-            }), clip.str.length === str.length) ;else if (needCut) {
-              const newStr = str.substring(clip.str.length);
-              lines.splice(i + 1, 0, newStr);
-            }
-          }
-          let maxWidth = 0;
-          linesLayout.forEach(layout => {
-            maxWidth = Math.max(maxWidth, layout.width);
-          }), bboxWH[0] = maxWidth;
-        } else {
-          let width,
-            text,
-            lineWidth = 0;
-          for (let i = 0, len = lines.length; i < len; i++) {
-            if (i === lineCountLimit - 1) {
-              const clip = layoutObj.textMeasure.clipTextWithSuffix(lines[i], layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
-              linesLayout.push({
-                str: clip.str,
-                width: clip.width
-              }), lineWidth = Math.max(lineWidth, clip.width);
-              break;
-            }
-            text = lines[i], width = layoutObj.textMeasure.measureTextWidth(text, layoutObj.textOptions, "break-word" === wordBreak), lineWidth = Math.max(lineWidth, width), linesLayout.push({
-              str: text,
-              width: width
-            });
-          }
-          bboxWH[0] = lineWidth;
-        }
-        bboxWH[1] = linesLayout.length * (lineHeight + buf);
-        const bbox = {
-          xOffset: 0,
-          yOffset: 0,
-          width: bboxWH[0],
-          height: bboxWH[1]
-        };
-        layoutObj.LayoutBBox(bbox, textAlign, textBaseline);
-        const layoutData = layoutObj.layoutWithBBox(bbox, linesLayout, textAlign, textBaseline, lineHeight);
-        return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-      }
-      needUpdateTags(keys) {
-        for (let i = 0; i < WRAP_TEXT_UPDATE_TAG_KEY.length; i++) {
-          const attrKey = WRAP_TEXT_UPDATE_TAG_KEY[i];
-          if (-1 !== keys.indexOf(attrKey)) return !0;
-        }
-        return super.needUpdateTags(keys);
-      }
-      needUpdateTag(key) {
-        for (let i = 0; i < WRAP_TEXT_UPDATE_TAG_KEY.length; i++) {
-          if (key === WRAP_TEXT_UPDATE_TAG_KEY[i]) return !0;
-        }
-        return super.needUpdateTag(key);
-      }
-      getNoWorkAnimateAttr() {
-        return WrapText.NOWORK_ANIMATE_ATTR;
-      }
-    }
-    function createWrapText(attributes) {
-      return new WrapText(attributes);
-    }
-
     class BaseSymbol {
       bounds(size, bounds) {
         if (isNumber$3(size)) {
@@ -16556,11 +16443,11 @@
             } = this.lines[i];
             if (top + height < this[this.directionKey.top] || top + height > this[this.directionKey.top] + frameHeight) return lastLineTag;
             let lastLine = !1;
-            this.ellipsis && this.lines[i + 1] && this.lines[i + 1].top + this.lines[i + 1].height > this[this.directionKey.top] + frameHeight && (lastLine = !0, lastLineTag = !0), this.lines[i].draw(ctx, lastLine, this.lines[i][this.directionKey.left] + deltaX, this.lines[i][this.directionKey.top] + deltaY, drawIcon);
+            this.ellipsis && this.lines[i + 1] && this.lines[i + 1].top + this.lines[i + 1].height > this[this.directionKey.top] + frameHeight && (lastLine = !0, lastLineTag = !0), this.lines[i].draw(ctx, lastLine, this.lines[i][this.directionKey.left] + deltaX, this.lines[i][this.directionKey.top] + deltaY, this.ellipsis, drawIcon);
           } else {
             const detalHeight = Math.floor((frameHeight - this.actualHeight) / 2);
             "vertical" === this.layoutDirection ? deltaX += detalHeight : deltaY += detalHeight;
-            for (let i = 0; i < this.lines.length; i++) this.lines[i].draw(ctx, !1, this.lines[i][this.directionKey.left] + deltaX, this.lines[i][this.directionKey.top] + deltaY, drawIcon);
+            for (let i = 0; i < this.lines.length; i++) this.lines[i].draw(ctx, !1, this.lines[i][this.directionKey.left] + deltaX, this.lines[i][this.directionKey.top] + deltaY, this.ellipsis, drawIcon);
           }
         } else if ("bottom" === this.verticalDirection && "vertical" !== this.layoutDirection) for (let i = 0; i < this.lines.length; i++) {
           const {
@@ -16568,11 +16455,11 @@
               height: height
             } = this.lines[i],
             y = frameHeight - this.lines[i].top - this.lines[i].height;
-          if (0 === frameHeight) this.lines[i].draw(ctx, !1, deltaX, y + deltaY, drawIcon);else {
+          if (0 === frameHeight) this.lines[i].draw(ctx, !1, deltaX, y + deltaY, this.ellipsis, drawIcon);else {
             if (y + height > this[this.directionKey.top] + frameHeight || y < this[this.directionKey.top]) return lastLineTag;
             {
               let lastLine = !1;
-              this.ellipsis && this.lines[i + 1] && y - this.lines[i + 1].height < this[this.directionKey.top] && (lastLine = !0, lastLineTag = !0), this.lines[i].draw(ctx, lastLine, deltaX, y + deltaY, drawIcon);
+              this.ellipsis && this.lines[i + 1] && y - this.lines[i + 1].height < this[this.directionKey.top] && (lastLine = !0, lastLineTag = !0), this.lines[i].draw(ctx, lastLine, deltaX, y + deltaY, this.ellipsis, drawIcon);
             }
           }
         } else {
@@ -16583,11 +16470,11 @@
               top: top,
               height: height
             } = this.lines[i];
-            if (0 === frameHeight) this.lines[i].draw(ctx, !1, this.lines[i][this.directionKey.left] + deltaX, this.lines[i][this.directionKey.top] + deltaY, drawIcon);else {
+            if (0 === frameHeight) this.lines[i].draw(ctx, !1, this.lines[i][this.directionKey.left] + deltaX, this.lines[i][this.directionKey.top] + deltaY, this.ellipsis, drawIcon);else {
               if (top + height < this[this.directionKey.top] || top + height > this[this.directionKey.top] + frameHeight) return lastLineTag;
               {
                 let lastLine = !1;
-                this.ellipsis && this.lines[i + 1] && this.lines[i + 1].top + this.lines[i + 1].height > this[this.directionKey.top] + frameHeight && (lastLine = !0, lastLineTag = !0), this.lines[i].draw(ctx, lastLine, this.lines[i][this.directionKey.left] + deltaX, this.lines[i][this.directionKey.top] + deltaY, drawIcon);
+                this.ellipsis && this.lines[i + 1] && this.lines[i + 1].top + this.lines[i + 1].height > this[this.directionKey.top] + frameHeight && (lastLine = !0, lastLineTag = !0), this.lines[i].draw(ctx, lastLine, this.lines[i][this.directionKey.left] + deltaX, this.lines[i][this.directionKey.top] + deltaY, this.ellipsis, drawIcon);
               }
             }
           }
@@ -16890,11 +16777,12 @@
           paragraph instanceof RichTextIcon ? (paragraph["_" + directionKey.x] = x, x += paragraph[directionKey.width] + spacing, paragraph["_" + directionKey.y] = "top" === paragraph.attribute.textBaseline ? 0 : "bottom" === paragraph.attribute.textBaseline ? maxHeight - paragraph.height : (maxHeight - paragraph.height) / 2) : (paragraph[directionKey.left] = x, x += paragraph[directionKey.width] + spacing);
         });
       }
-      draw(ctx, lastLine, x, y, drawIcon) {
-        if (lastLine) {
+      draw(ctx, lastLine, x, y, drawEllipsis, drawIcon) {
+        if (drawEllipsis && (lastLine || this.paragraphs.some(p => p.overflow))) {
           let otherParagraphWidth = 0;
           for (let i = this.paragraphs.length - 1; i >= 0; i--) {
             const paragraph = this.paragraphs[i];
+            if (paragraph.overflow) continue;
             if (paragraph instanceof RichTextIcon) break;
             if ("vertical" === this.direction && "vertical" !== paragraph.direction) {
               paragraph.verticalEllipsis = !0;
@@ -17115,7 +17003,8 @@
             textAlign: textAlign,
             textBaseline: textBaseline,
             layoutDirection: layoutDirection,
-            singleLine: singleLine
+            singleLine: singleLine,
+            forceBreakLine: forceBreakLine
           } = this.attribute,
           paragraphs = [];
         for (let i = 0; i < textConfig.length; i++) if ("image" in textConfig[i]) {
@@ -17141,7 +17030,14 @@
           richTextHeightEnable = "number" == typeof height && Number.isFinite(height) && height > 0 && (!maxHeightFinite || height <= maxHeight),
           frame = new Frame(0, 0, (richTextWidthEnable ? width : maxWidthFinite ? maxWidth : 0) || 0, (richTextHeightEnable ? height : maxHeightFinite ? maxHeight : 0) || 0, ellipsis, wordBreak, verticalDirection, textAlign, textBaseline, layoutDirection || "horizontal", !richTextWidthEnable && maxWidthFinite, !richTextHeightEnable && maxHeightFinite, singleLine || !1, null === (_a = this._frameCache) || void 0 === _a ? void 0 : _a.icons),
           wrapper = new Wrapper(frame);
-        for (let i = 0; i < paragraphs.length; i++) wrapper.deal(paragraphs[i]);
+        if (forceBreakLine) {
+          let lineCount = 0,
+            skip = !1;
+          for (let i = 0; i < paragraphs.length; i++) {
+            const p = paragraphs[i];
+            skip ? (p.overflow = !0, p.left = 1 / 0, p.top = 1 / 0, !p.newLine && frame.lines[frame.lines.length - 1].paragraphs.push(p)) : wrapper.deal(p), frame.lines.length !== lineCount && (lineCount = frame.lines.length, wrapper.lineBuffer.length = 0, p.overflow = !0, p.left = 1e3, p.top = 1e3, frame.lines[frame.lines.length - 1].paragraphs.push(p), skip = !0), p.newLine && (skip = !1);
+          }
+        } else for (let i = 0; i < paragraphs.length; i++) wrapper.deal(paragraphs[i]);
         wrapper.send();
         if (!("horizontal" === frame.layoutDirection ? richTextWidthEnable : richTextHeightEnable)) {
           const frameSize = frame.getActualSizeWidthEllipsis();
@@ -18054,6 +17950,8 @@
         }), this.transformAABBBounds(attribute, aabbBounds, rectTheme, !1, graphic), aabbBounds;
       }
       updateGroupAABBBounds(attribute, groupTheme, aabbBounds, graphic) {
+        const originalAABBBounds = aabbBounds;
+        aabbBounds = aabbBounds.clone();
         const {
           width: width,
           height: height,
@@ -18062,12 +17960,12 @@
         } = attribute;
         path && path.length ? path.forEach(g => {
           aabbBounds.union(g.AABBBounds);
-        }) : null != width && null != height && aabbBounds.set(0, 0, width, height), clip || graphic.forEachChildren(node => {
+        }) : null != width && null != height && aabbBounds.set(0, 0, Math.max(0, width), Math.max(0, height)), clip || graphic.forEachChildren(node => {
           aabbBounds.union(node.AABBBounds);
         });
         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, groupTheme, !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.transformAABBBounds(attribute, aabbBounds, groupTheme, !1, graphic), originalAABBBounds.copy(aabbBounds), originalAABBBounds;
       }
       updateGlyphAABBBounds(attribute, theme, aabbBounds, graphic) {
         return this._validCheck(attribute, theme, aabbBounds, graphic) ? (graphic.getSubGraphic().forEach(node => {
@@ -20664,11 +20562,16 @@
           backgroundMode = graphicAttribute.backgroundMode,
           backgroundFit = graphicAttribute.backgroundFit
         } = graphic.attribute;
-        let b,
+        let matrix,
           {
             background: background
           } = graphic.attribute;
         if (!background) return;
+        const restore = () => {
+          "richtext" === graphic.type && (context.restore(), context.save(), matrix && context.setTransformFromMatrix(matrix, !0, 1));
+        };
+        let b;
+        "richtext" === graphic.type && (matrix = context.currentMatrix.clone(), context.restore(), context.save(), context.setTransformForCurrent());
         const shouldReCalBounds = isObject$2(background) && background.background,
           onlyTranslate = graphic.transMatrix.onlyTranslate();
         if (shouldReCalBounds) {
@@ -20693,7 +20596,7 @@
         })).clone());
         if (graphic.backgroundImg && graphic.resources) {
           const res = graphic.resources.get(background);
-          if ("success" !== res.state || !res.data) return;
+          if ("success" !== res.state || !res.data) return void restore();
           context.highPerformanceSave(), onlyTranslate && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.highPerformanceRestore(), context.setTransformForCurrent();
         } else {
           const {
@@ -20701,7 +20604,7 @@
           } = graphic.attribute;
           context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = background, backgroundCornerRadius ? (createRectPath(context, b.x1, b.y1, b.width(), b.height(), backgroundCornerRadius), context.fill()) : context.fillRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore();
         }
-        shouldReCalBounds && boundsAllocate.free(b);
+        shouldReCalBounds && boundsAllocate.free(b), restore();
       }
     }
     const defaultTextBackgroundRenderContribution = new DefaultTextBackgroundRenderContribution();
@@ -21339,7 +21242,7 @@
       render(groups, params) {
         this.renderTreeRoots = groups, this.drawParams = params;
         const updateBounds = params.updateBounds;
-        this.prepare(updateBounds), this.prepareRenderList(), this.beforeDraw(params), this.draw(params), this.afterDraw(params);
+        this.prepare(updateBounds), this.prepareRenderList(), this.beforeDraw(params), this.draw(params), this.afterDraw(params), this.drawParams = null;
       }
     };
     DefaultRenderService = __decorate$1c([injectable(), __param$z(0, inject(DrawContribution)), __metadata$U("design:paramtypes", [Object])], DefaultRenderService);
@@ -21899,7 +21802,7 @@
           return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
         }).forEach(group => {
           group.isContainer ? this.renderGroup(group, drawContext, matrixAllocate.allocate(1, 0, 0, 1, 0, 0)) : this.renderItem(group, drawContext);
-        }), context.restore(), context.draw(), context.setClearMatrix(1, 0, 0, 1, 0, 0), context.inuse = !1;
+        }), context.restore(), context.setClearMatrix(1, 0, 0, 1, 0, 0), context.inuse = !1, context.draw();
       }
       doRegister() {
         throw new Error("暂不支持");
@@ -22661,7 +22564,7 @@
           }), !isFinite(boundsLegal)) return;
           width = childrenWidth, height = childrenHeight;
         }
-        p.attribute.width = width, p.attribute.height = height, this.tempBounds.copy(p._AABBBounds);
+        null == p.attribute.width ? p.attribute.width = width : width = p.attribute.width, null == p.attribute.height ? p.attribute.height = height : height = p.attribute.height, this.tempBounds.copy(p._AABBBounds);
         const result = {
             main: {
               len: width,
@@ -22704,7 +22607,7 @@
             }), tempMainL = 0, tempCrossL = 0) : (mainList.push({
               idx: i - 1,
               mainLen: tempMainL,
-              crossLen: crossLen
+              crossLen: tempCrossL
             }), tempMainL = mainLen, tempCrossL = crossLen) : (tempMainL += mainLen, tempCrossL = Math.max(tempCrossL, crossLen));
           }), mainList.push({
             idx: mianLenArray.length - 1,
@@ -23500,7 +23403,7 @@
       release() {
         super.release(), this.hooks.beforeRender.unTap("constructor", this.beforeRender), this.hooks.afterRender.unTap("constructor", this.afterRender), this.eventSystem && this.eventSystem.release(), this.layerService.releaseStage(this), this.pluginService.release(), this.forEach(layer => {
           layer.release();
-        }), this.interactiveLayer && this.interactiveLayer.release(), this.window.release();
+        }), this.interactiveLayer && this.interactiveLayer.release(), this.window.release(), this.ticker.remTimeline(this.timeline), this.renderService.renderTreeRoots = [];
       }
       setStage(stage) {}
       dirty(b, matrix) {
@@ -24769,10 +24672,6 @@
       graphicCreator.RegisterGraphicCreator("shadowRoot", createShadowRoot);
     }
 
-    function registerWrapTextGraphic() {
-      graphicCreator.RegisterGraphicCreator("wrapText", createWrapText);
-    }
-
     const warn = (msg, detail) => {
         if (isFunction$1(config.warnHandler)) {
             config.warnHandler.call(null, msg, detail);
@@ -26061,9 +25960,9 @@
               dragstartTriggered = !1;
             function handlePointerMove(moveEvent) {
               if (dragstartTriggered || (moveEvent.type = "dragstart", null == target || target.dispatchEvent(moveEvent), dragstartTriggered = !0), moveEvent.type = "drag", null == target || target.dispatchEvent(moveEvent), !isRoot) {
-                target.pickable = !1;
+                target.attribute.pickable = !1;
                 const elemBelow = (null == rootNode ? void 0 : rootNode.pick(moveEvent.global.x, moveEvent.global.y)).graphic;
-                target.pickable = !0, currentDroppable !== elemBelow && (currentDroppable && (moveEvent.type = "dragleave", moveEvent.target = currentDroppable, currentDroppable.dispatchEvent(moveEvent)), elemBelow && (moveEvent.type = "dragenter", moveEvent.target = elemBelow, elemBelow.dispatchEvent(moveEvent)), currentDroppable = elemBelow, currentDroppable && (moveEvent.type = "dragover", moveEvent.target = currentDroppable, currentDroppable.dispatchEvent(moveEvent)));
+                target.attribute.pickable = !0, currentDroppable !== elemBelow && (currentDroppable && (moveEvent.type = "dragleave", moveEvent.target = currentDroppable, currentDroppable.dispatchEvent(moveEvent)), elemBelow && (moveEvent.type = "dragenter", moveEvent.target = elemBelow, elemBelow.dispatchEvent(moveEvent)), currentDroppable = elemBelow, currentDroppable && (moveEvent.type = "dragover", moveEvent.target = currentDroppable, currentDroppable.dispatchEvent(moveEvent)));
               }
             }
             null == rootNode || rootNode.addEventListener("pointermove", handlePointerMove);
@@ -30600,12 +30499,6 @@
     _registerText.__loaded = !1;
     const registerText = _registerText;
 
-    function _registerWrapText() {
-      _registerWrapText.__loaded || (_registerWrapText.__loaded = !0, registerWrapTextGraphic());
-    }
-    _registerWrapText.__loaded = !1;
-    const registerWrapText = _registerWrapText;
-
     function loadScrollbarComponent() {
       registerGroup(), registerRect();
     }
@@ -31199,7 +31092,7 @@
     };
 
     function loadPoptipComponent() {
-      registerGroup(), registerWrapText(), registerSymbol(), registerRect();
+      registerGroup(), registerText(), registerSymbol(), registerRect();
     }
     function setPoptipTheme(defaultPoptipTheme) {
       merge$2(theme.poptip, DEFAULT_THEME, defaultPoptipTheme);
@@ -31252,7 +31145,8 @@
           titleVisible = isValid$3(title) && !1 !== visible,
           titleAttrs = Object.assign(Object.assign({
             text: isArray$3(title) ? title : [title],
-            visible: titleVisible
+            visible: titleVisible,
+            wrap: !0
           }, titleStyle), {
             x: parsedPadding[3],
             y: parsedPadding[0],
@@ -31260,7 +31154,7 @@
             textAlign: "left",
             textBaseline: "top"
           }),
-          titleShape = group.createOrUpdateChild("poptip-title", titleAttrs, "wrapText");
+          titleShape = group.createOrUpdateChild("poptip-title", titleAttrs, "text");
         isEmpty(null == state ? void 0 : state.title) || (titleShape.states = state.title);
         const titleBounds = titleShape.AABBBounds,
           titleHeight = titleBounds.height(),
@@ -31270,7 +31164,8 @@
         const contentVisible = isValid$3(content) && !1 !== visible,
           contentAttrs = Object.assign(Object.assign({
             text: isArray$3(content) ? content : [content],
-            visible: contentVisible
+            visible: contentVisible,
+            wrap: !0
           }, contentStyle), {
             x: parsedPadding[3],
             y: parsedPadding[0] + height,
@@ -31278,7 +31173,7 @@
             textAlign: "left",
             textBaseline: "top"
           }),
-          contentShape = group.createOrUpdateChild("poptip-content", contentAttrs, "wrapText");
+          contentShape = group.createOrUpdateChild("poptip-content", contentAttrs, "text");
         isEmpty(null == state ? void 0 : state.content) || (contentShape.states = state.content);
         const contentBounds = contentShape.AABBBounds,
           contentHeight = contentBounds.height(),
@@ -35763,7 +35658,7 @@
         super.setAttributes(params, forceUpdateTag), this.setPropsFromAttrs();
       }
       bindEvents() {
-        if (this.attribute.disableTriggerEvent) return;
+        if (this.attribute.disableTriggerEvent) return void this.setAttribute("childrenPickable", !1);
         const {
           showDetail: showDetail,
           brushSelect: brushSelect
@@ -35795,14 +35690,21 @@
         }));
       }
       eventPosToStagePos(e) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d;
         const {
+            x: x,
+            y: y
+          } = vglobal.mapToCanvasPoint(e, null === (_d = null === (_c = null === (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.window) || void 0 === _b ? void 0 : _b.getContext()) || void 0 === _c ? void 0 : _c.canvas) || void 0 === _d ? void 0 : _d.nativeCanvas),
+          layerPosition = {
+            x: x,
+            y: y
+          };
+        return this.parent.globalTransMatrix.transformPoint({
           x: x,
           y: y
-        } = vglobal.mapToCanvasPoint(e, null === (_d = null === (_c = null === (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.window) || void 0 === _b ? void 0 : _b.getContext()) || void 0 === _c ? void 0 : _c.canvas) || void 0 === _d ? void 0 : _d.nativeCanvas);
-        return {
-          x: x - ((null === (_e = this.stage) || void 0 === _e ? void 0 : _e.x) || 0),
-          y: y - ((null === (_f = this.stage) || void 0 === _f ? void 0 : _f.y) || 0)
+        }, layerPosition), {
+          x: layerPosition.x,
+          y: layerPosition.y
         };
       }
       _onHandlerPointerEnter(e) {
@@ -39525,10 +39427,15 @@
         });
       }
       _getHandlers() {
-        let temp,
-          startHandler = this._startHandler,
+        const {
+          inverse: inverse
+        } = this.attribute;
+        let startHandler = this._startHandler,
           endHandler = this._endHandler;
-        return this._isHorizontal ? endHandler && endHandler.attribute.x < (null == startHandler ? void 0 : startHandler.attribute.x) && (temp = startHandler, startHandler = endHandler, endHandler = temp) : endHandler && endHandler.attribute.y < (null == startHandler ? void 0 : startHandler.attribute.y) && (temp = startHandler, startHandler = endHandler, endHandler = temp), {
+        return endHandler ? (this._isHorizontal ? (!inverse && endHandler.attribute.x < (null == startHandler ? void 0 : startHandler.attribute.x) || inverse && endHandler.attribute.x > (null == startHandler ? void 0 : startHandler.attribute.x)) && ([startHandler, endHandler] = [endHandler, startHandler]) : (!inverse && endHandler.attribute.y < (null == startHandler ? void 0 : startHandler.attribute.y) || inverse && endHandler.attribute.y > (null == startHandler ? void 0 : startHandler.attribute.y)) && ([startHandler, endHandler] = [endHandler, startHandler]), {
+          startHandler: startHandler,
+          endHandler: endHandler
+        }) : {
           startHandler: startHandler,
           endHandler: endHandler
         };
@@ -39902,7 +39809,7 @@
     };
 
     function loadTitleComponent() {
-      registerGroup(), registerWrapText(), registerRichtext();
+      registerGroup(), registerText(), registerRichtext();
     }
 
     loadTitleComponent();
@@ -39965,7 +39872,8 @@
           }, textStyle);
           this._mainTitle = group.createOrUpdateChild("mainTitle", attr, "richtext");
         } else isValid$3(text) && (this._mainTitle = group.createOrUpdateChild("mainTitle", Object.assign(Object.assign({
-          text: isArray$3(text) ? text : [text]
+          text: isArray$3(text) ? text : [text],
+          wrap: !0
         }, textStyle), {
           maxLineWidth: null !== (_t = textStyle.maxLineWidth) && void 0 !== _t ? _t : width,
           heightLimit: textStyle.heightLimit,
@@ -39973,7 +39881,7 @@
           ellipsis: null === (_u = textStyle.ellipsis) || void 0 === _u || _u,
           x: 0,
           y: 0
-        }), "wrapText"));
+        }), "text"));
         const maintextHeight = this._mainTitle ? this._mainTitle.AABBBounds.height() : 0,
           maintextWidth = this._mainTitle ? this._mainTitle.AABBBounds.width() : 0;
         if (!1 !== this.attribute.visible && !1 !== subtextStyle.visible) if ("rich" === subtextType || isValid$3(subtextStyle.character)) {
@@ -40006,7 +39914,8 @@
           }, subtextStyle);
           this._subTitle = group.createOrUpdateChild("subTitle", attr, "richtext");
         } else isValid$3(subtext) && (this._subTitle = group.createOrUpdateChild("subTitle", Object.assign(Object.assign({
-          text: isArray$3(subtext) ? subtext : [subtext]
+          text: isArray$3(subtext) ? subtext : [subtext],
+          wrap: !0
         }, subtextStyle), {
           maxLineWidth: null !== (_12 = subtextStyle.maxLineWidth) && void 0 !== _12 ? _12 : width,
           heightLimit: subtextStyle.heightLimit,
@@ -40014,7 +39923,7 @@
           ellipsis: null === (_13 = subtextStyle.ellipsis) || void 0 === _13 || _13,
           x: 0,
           y: maintextHeight
-        }), "wrapText"));
+        }), "text"));
         const subtextHeight = this._subTitle ? this._subTitle.AABBBounds.height() : 0,
           subtextWidth = this._subTitle ? this._subTitle.AABBBounds.width() : 0;
         let titleWidth = Math.max(maintextWidth, subtextWidth),
@@ -40850,15 +40759,16 @@
         }, this._onBrushing = e => {
           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;
           e.preventDefault();
           const {
             removeOnClick = !0
           } = this.attribute;
-          this._activeDrawState && !this._isDrawedBeforeEnd && removeOnClick ? (this._container.incrementalClearChild(), this._brushMaskAABBBoundsDict = {}, this._dispatchEvent(IOperateType.brushClear, {
+          this._activeDrawState && !this._isDrawedBeforeEnd && removeOnClick ? ((null === (_a = this._operatingMask) || void 0 === _a ? void 0 : _a._AABBBounds.empty()) && this._dispatchEvent(IOperateType.brushClear, {
             operateMask: this._operatingMask,
             operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
             event: e
-          })) : (this._activeDrawState && this._dispatchEvent(IOperateType.drawEnd, {
+          }), this._container.incrementalClearChild(), this._brushMaskAABBBoundsDict = {}) : (this._activeDrawState && this._dispatchEvent(IOperateType.drawEnd, {
             operateMask: this._operatingMask,
             operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
             event: e
@@ -40938,28 +40848,29 @@
       _drawing(e) {
         var _a, _b;
         const pos = this.eventPosToStagePos(e),
-          {
-            x1 = 0,
-            x2 = 0,
-            y1 = 0,
-            y2 = 0
-          } = null === (_a = this._operatingMask) || void 0 === _a ? void 0 : _a._AABBBounds,
           {
             sizeThreshold = DEFAULT_SIZE_THRESHOLD,
             brushType: brushType
           } = this.attribute,
           cacheLength = this._cacheDrawPoints.length;
-        if (this._isDrawedBeforeEnd = !!(Math.abs(x2 - x1) > sizeThreshold || Math.abs(y1 - y2) > sizeThreshold), cacheLength > 0) {
-          const lastPos = null !== (_b = this._cacheDrawPoints[this._cacheDrawPoints.length - 1]) && void 0 !== _b ? _b : {};
+        if (cacheLength > 0) {
+          const lastPos = null !== (_a = this._cacheDrawPoints[this._cacheDrawPoints.length - 1]) && void 0 !== _a ? _a : {};
           if (pos.x === lastPos.x && pos.y === lastPos.y) return;
         }
         "polygon" === brushType || cacheLength <= 1 ? this._cacheDrawPoints.push(pos) : this._cacheDrawPoints[cacheLength - 1] = pos;
         const maskPoints = this._computeMaskPoints();
-        this._operatingMask.setAttribute("points", maskPoints), this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds, this._dispatchEvent(IOperateType.drawing, {
+        this._operatingMask.setAttribute("points", maskPoints);
+        const {
+          x1 = 0,
+          x2 = 0,
+          y1 = 0,
+          y2 = 0
+        } = null === (_b = this._operatingMask) || void 0 === _b ? void 0 : _b._AABBBounds;
+        this._isDrawedBeforeEnd = !this._operatingMask._AABBBounds.empty() && !!(Math.abs(x2 - x1) > sizeThreshold || Math.abs(y1 - y2) > sizeThreshold), this._isDrawedBeforeEnd && (this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds, this._dispatchEvent(IOperateType.drawing, {
           operateMask: this._operatingMask,
           operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
           event: e
-        });
+        }));
       }
       _moving(e) {
         const startPos = this._cacheMovePoint,
@@ -41048,14 +40959,20 @@
         return pos.x > maxX || pos.x < minX || pos.y > maxY || pos.y < minY;
       }
       eventPosToStagePos(e) {
-        var _a, _b;
         const {
+            x: x,
+            y: y
+          } = vglobal.mapToCanvasPoint(e, this.stage.window.getContext().canvas.nativeCanvas),
+          layerPosition = {
+            x: x,
+            y: y
+          };
+        return this.parent.globalTransMatrix.transformPoint({
           x: x,
           y: y
-        } = vglobal.mapToCanvasPoint(e, this.stage.window.getContext().canvas.nativeCanvas);
-        return {
-          x: x - ((null === (_a = this.stage) || void 0 === _a ? void 0 : _a.x) || 0),
-          y: y - ((null === (_b = this.stage) || void 0 === _b ? void 0 : _b.y) || 0)
+        }, layerPosition), {
+          x: layerPosition.x,
+          y: layerPosition.y
         };
       }
       render() {
@@ -42073,10 +41990,7 @@
     function distance(p1, p2 = { x: 0, y: 0 }) {
         return PointService.distancePP(p1, p2);
     }
-    function getPercentValue(valueList, idx, precision = 2) {
-        if (!valueList[idx]) {
-            return 0;
-        }
+    function getPercentValue(valueList, precision = 2) {
         const sum = valueList.reduce((a, c) => {
             return (a += isNaN(c) ? 0 : c);
         }, 0);
@@ -42110,7 +42024,7 @@
             remainder[maxId] = 0;
             ++currentSum;
         }
-        return seats[idx] / digits;
+        return seats.map(entry => entry / digits);
     }
 
     function eachSeries(regions, callback, filter) {
@@ -43295,10 +43209,21 @@
         });
       }), res;
     };
+    const parseTriggerOffOfSelect = triggerOff => {
+      const triggerOffArray = array(triggerOff),
+        resetType = [],
+        eventNames = [];
+      return triggerOffArray.forEach(off => {
+        "empty" === off ? resetType.push("view") : isString$1(off) && "none" !== off ? off.includes("view:") ? (eventNames.push(off.replace("view:", "")), resetType.push("view")) : (eventNames.push(off), resetType.push("self")) : isNumber$3(off) && resetType.push("timeout");
+      }), {
+        eventNames: eventNames,
+        resetType: resetType
+      };
+    };
 
     class ElementSelect extends BaseInteraction {
       constructor(view, options) {
-        super(view, options), this.type = ElementSelect.type, this.clearPrevElements = () => {
+        super(view, options), this.type = ElementSelect.type, this._resetType = [], this.clearPrevElements = () => {
           const {
             state: state,
             reverseState: reverseState
@@ -43322,12 +43247,17 @@
           events = [{
             type: trigger,
             handler: this.handleStart
-          }];
-        let eventName = triggerOff;
-        return "empty" === triggerOff ? (eventName = trigger, this._resetType = "view") : "none" === triggerOff ? (eventName = null, this._resetType = null) : isString$1(triggerOff) ? triggerOff.includes("view:") ? (eventName = triggerOff.replace("view:", ""), this._resetType = "view") : (eventName = triggerOff, this._resetType = "self") : isNumber$3(triggerOff) ? (eventName = null, this._resetType = "timeout") : this._resetType = null, eventName && eventName !== trigger && events.push({
-          type: eventName,
-          handler: this.handleReset
-        }), events;
+          }],
+          {
+            eventNames: eventNames,
+            resetType: resetType
+          } = parseTriggerOffOfSelect(triggerOff);
+        return eventNames.forEach(evt => {
+          evt && (isArray$3(trigger) ? !trigger.includes(evt) : evt !== trigger) && events.push({
+            type: evt,
+            handler: this.handleReset
+          });
+        }), this._resetType = resetType, events;
       }
       start(element) {
         const {
@@ -43335,17 +43265,24 @@
           reverseState: reverseState,
           isMultiple: isMultiple
         } = this.options;
-        element && this._marks && this._marks.includes(element.mark) ? element.hasState(state) ? "self" === this._resetType && (this._statedElements = this.updateStates(this._statedElements && this._statedElements.filter(el => el !== element), this._statedElements, state, reverseState)) : (this._timer && clearTimeout(this._timer), element.addState(state), this._statedElements = this.updateStates(isMultiple && this._statedElements ? [...this._statedElements, element] : [element], this._statedElements, state, reverseState), this.dispatchEvent("start", {
-          elements: this._statedElements,
-          options: this.options
-        }), "timeout" === this._resetType && (this._timer = setTimeout(() => {
-          this.clearPrevElements();
-        }, this.options.triggerOff))) : "view" === this._resetType && this._statedElements && this._statedElements.length && this.clearPrevElements();
+        if (element && this._marks && this._marks.includes(element.mark)) {
+          if (element.hasState(state)) {
+            if (this._resetType.includes("self")) {
+              const newStatedElements = this._statedElements && this._statedElements.filter(el => el !== element);
+              newStatedElements && newStatedElements.length ? this._statedElements = this.updateStates(newStatedElements, this._statedElements, state, reverseState) : this.clearPrevElements();
+            }
+          } else this._timer && clearTimeout(this._timer), element.addState(state), this._statedElements = this.updateStates(isMultiple && this._statedElements ? [...this._statedElements, element] : [element], this._statedElements, state, reverseState), this.dispatchEvent("start", {
+            elements: this._statedElements,
+            options: this.options
+          }), this._resetType.includes("timeout") && (this._timer = setTimeout(() => {
+            this.clearPrevElements();
+          }, this.options.triggerOff));
+        } else this._resetType.includes("view") && this._statedElements && this._statedElements.length && this.clearPrevElements();
       }
       reset(element) {
         if (!this._statedElements || !this._statedElements.length) return;
         const hasActiveElement = element && this._marks && this._marks.includes(element.mark);
-        "view" !== this._resetType || hasActiveElement ? "self" === this._resetType && hasActiveElement && this.clearPrevElements() : this.clearPrevElements();
+        (this._resetType.includes("view") && !hasActiveElement || this._resetType.includes("self") && hasActiveElement) && this.clearPrevElements();
       }
     }
     ElementSelect.type = "element-select", ElementSelect.defaultOptions = {
@@ -48068,7 +48005,7 @@
       }
       release() {
         var _a, _b, _c;
-        this.removeAllInteractions(), this.releaseStageEvent(), this._unBindResizeEvent(), this.clearProgressive(), Factory$1.unregisterRuntimeTransforms(), this.animate.stop(), this.grammars.release(), this._cachedGrammars.release(), this._dataflow.release(), this._dataflow = null, null === (_b = null === (_a = this.renderer) || void 0 === _a ? void 0 : _a.release) || void 0 === _b || _b.call(_a), this.renderer = null, this._boundInteractions = null, this.removeAllListeners(), null === (_c = this._eventListeners) || void 0 === _c || _c.forEach(listener => {
+        this.removeAllInteractions(), this.releaseStageEvent(), this._unBindResizeEvent(), this.clearProgressive(), Factory$1.unregisterRuntimeTransforms(), Logger.setInstance(null), this.animate.stop(), this.grammars.release(), this._cachedGrammars.release(), this._dataflow.release(), this._dataflow = null, null === (_b = null === (_a = this.renderer) || void 0 === _a ? void 0 : _a.release) || void 0 === _b || _b.call(_a), this.renderer = null, this._boundInteractions = null, this.removeAllListeners(), null === (_c = this._eventListeners) || void 0 === _c || _c.forEach(listener => {
           listener.source.removeEventListener(listener.type, listener.handler);
         }), this._eventListeners = null;
       }
@@ -50316,12 +50253,16 @@
       const from = Object.assign({}, element.getPrevGraphicAttributes()),
         to = Object.assign({}, element.getNextGraphicAttributes());
       let excludeChannels;
-      return options && array(options.excludeChannels).forEach(key => {
+      options && array(options.excludeChannels).forEach(key => {
         delete from[key], delete to[key];
       }), element.mark && element.mark.markType && (excludeChannels = BUILT_IN_EXCLUDE_CHANNELS[element.mark.markType]) && excludeChannels.forEach(key => {
         delete from[key], delete to[key];
       }), Object.keys(to).forEach(key => {
         isEqual(key, from, to) && (delete from[key], delete to[key]);
+      });
+      const final = element.getFinalGraphicAttributes();
+      return Object.keys(from).forEach(key => {
+        isNil$3(to[key]) && (isNil$3(final[key]) || isEqual$1(from[key], final[key]) ? delete from[key] : to[key] = final[key]);
       }), {
         from: from,
         to: to
@@ -56872,13 +56813,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const chartSpec = this._option.getChart().getSpec();
             const hasDataZoom = (_b = (_a = chartSpec.dataZoom) === null || _a === void 0 ? void 0 : _a.some) === null || _b === void 0 ? void 0 : _b.call(_a, (entry) => {
                 var _a;
-                const filterMode = (_a = entry.filterMode) !== null && _a !== void 0 ? _a : "filter";
-                return filterMode === "axis";
+                const filterMode = (_a = entry.filterMode) !== null && _a !== void 0 ? _a : 'filter';
+                return filterMode === 'axis';
             });
             const hasScrollBar = (_d = (_c = chartSpec.scrollBar) === null || _c === void 0 ? void 0 : _c.some) === null || _d === void 0 ? void 0 : _d.call(_c, (entry) => {
                 var _a;
-                const filterMode = (_a = entry.filterMode) !== null && _a !== void 0 ? _a : "axis";
-                return filterMode === "axis";
+                const filterMode = (_a = entry.filterMode) !== null && _a !== void 0 ? _a : 'axis';
+                return filterMode === 'axis';
             });
             return hasDataZoom || hasScrollBar ? true : this._layout.layoutClip;
         }
@@ -64589,7 +64530,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         registerComponentPlugin(CanvasTooltipHandler);
     };
 
-    const version = "1.10.5-alpha.1";
+    const version = "1.10.5";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -68158,9 +68099,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.updateChartConfig({ change: true, reMake: false }, this._spec);
             this.setLayoutTag(true, null, false);
             this.updateGlobalScaleTheme();
-            this._regions.forEach(r => r.reInit(r.getSpecInfo().spec));
-            this._series.forEach(s => s.reInit(s.getSpecInfo().spec));
-            this._components.forEach(c => c.reInit(c.getSpecInfo().spec));
+            [...this._regions, ...this._series, ...this._components].forEach(model => {
+                const specInfo = model.getSpecInfo();
+                if (specInfo && specInfo.spec) {
+                    model.reInit(specInfo.spec);
+                }
+            });
         }
         clear() {
             this.getAllModels().forEach(i => { var _a; return (_a = i.clear) === null || _a === void 0 ? void 0 : _a.call(i); });
@@ -73775,6 +73719,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         let lastAngle = startAngle;
         let restAngle = angleRange;
         let largeThanMinAngleTotal = 0;
+        const percents = getPercentValue(valueList);
         data.forEach((d, i) => {
             const angleFieldValue = d[ARC_TRANSFORM_VALUE];
             const ratio = total ? angleFieldValue / total : 0;
@@ -73790,7 +73735,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const dEndAngle = lastAngle + radian;
             d[asRatio] = ratio;
             d[asK] = max ? angleFieldValue / max : 0;
-            d._percent_ = getPercentValue(valueList, i);
+            d._percent_ = percents[i];
             appendArcInfo(d, dStartAngle, radian);
             lastAngle = dEndAngle;
         });
@@ -80023,8 +79968,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         if (null === (_b = datum.children) || void 0 === _b ? void 0 : _b.length) {
           node.children = [], node.isLeaf = !1;
           const res = calculateNodeValue$1(datum.children, node.children, depth + 1, prevFlattenIndex, node, getNodeKey);
-          node.value = isNil$3(datum.value) ? res.sum : Math.max(res.sum, node.value), prevFlattenIndex = res.flattenIndex, maxDepth = Math.max(res.maxDepth, maxDepth);
-        } else node.isLeaf = !0, node.value = isNil$3(datum.value) ? 0 : datum.value;
+          node.value = isNil$3(datum.value) ? res.sum : Math.max(res.sum, toValidNumber$1(datum.value)), prevFlattenIndex = res.flattenIndex, maxDepth = Math.max(res.maxDepth, maxDepth);
+        } else node.isLeaf = !0, node.value = toValidNumber$1(datum.value);
         sum += Math.abs(node.value), output.push(node);
       }), {
         sum: sum,
@@ -84615,8 +84560,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             super.transformSpec(spec);
             if (isArray$3(spec.dataZoom) && spec.dataZoom.length > 0) {
                 spec.dataZoom.forEach((zoom) => {
-                    if (zoom.filterMode === "axis") {
-                        zoom.filterMode = "filter";
+                    if (zoom.filterMode === 'axis') {
+                        zoom.filterMode = 'filter';
                     }
                 });
             }
@@ -85095,7 +85040,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         if (dataLength) {
                             ratio = ((seriesSpec === null || seriesSpec === void 0 ? void 0 : seriesSpec.height) || defaultSeriesRowHeight) / (dataLength * 30);
                         }
-                        scrollBar.push(Object.assign({ orient: 'right', visible: seriesSpec.type === exports.SeriesTypeEnum.dot && ratio < 1, id: `scrollBarRightRow${rowNum}`, start: 0, end: Math.min(ratio, 1), filterMode: "axis", regionIndex: region.length - 1, axisId: `axesLeftRow${rowNum}` }, array(spec === null || spec === void 0 ? void 0 : spec.scrollBar)[0]));
+                        scrollBar.push(Object.assign({ orient: 'right', visible: seriesSpec.type === exports.SeriesTypeEnum.dot && ratio < 1, id: `scrollBarRightRow${rowNum}`, start: 0, end: Math.min(ratio, 1), filterMode: 'axis', regionIndex: region.length - 1, axisId: `axesLeftRow${rowNum}` }, array(spec === null || spec === void 0 ? void 0 : spec.scrollBar)[0]));
                     }
                     seriesSpec.regionIndex = region.length - 1;
                     rowNum++;
@@ -86632,6 +86577,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 result.height = Math.ceil(result.height);
                 return this._layout.setRectInSpec(this._layoutCacheProcessing(result));
             };
+            this._updateAxisLayout = () => {
+                const startPoint = this.getLayoutStartPoint();
+                const _a = this._getUpdateAttribute(false), { grid: updateGridAttrs } = _a, updateAxisAttrs = __rest$7(_a, ["grid"]);
+                const axisProduct = this._axisMark.getProduct();
+                const axisAttrs = mergeSpec({ x: startPoint.x, y: startPoint.y }, this._axisStyle, updateAxisAttrs);
+                axisProduct.encode(axisAttrs);
+                if (this._gridMark) {
+                    const gridProduct = this._gridMark.getProduct();
+                    gridProduct.encode(mergeSpec({ x: startPoint.x, y: startPoint.y }, this._getGridAttributes(), updateGridAttrs));
+                }
+            };
             this._fixAxisOnZero = () => {
                 const { onZero, visible } = this._spec.domainLine;
                 if (this.visible && onZero && visible !== false) {
@@ -87009,21 +86965,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             return result;
         }
-        updateLayoutAttribute() {
-            if (!this.visible) {
-                return;
-            }
-            const startPoint = this.getLayoutStartPoint();
-            const _a = this._getUpdateAttribute(false), { grid: updateGridAttrs } = _a, updateAxisAttrs = __rest$7(_a, ["grid"]);
-            const axisProduct = this._axisMark.getProduct();
-            const axisAttrs = mergeSpec({ x: startPoint.x, y: startPoint.y }, this._axisStyle, updateAxisAttrs);
-            axisProduct.encode(axisAttrs);
-            if (this._gridMark) {
-                const gridProduct = this._gridMark.getProduct();
-                gridProduct.encode(mergeSpec({ x: startPoint.x, y: startPoint.y }, this._getGridAttributes(), updateGridAttrs));
-            }
-            super.updateLayoutAttribute();
-        }
         _getTitleLimit(isX) {
             var _a, _b, _c, _d, _e;
             if (this._spec.title.visible && isNil$3((_a = this._spec.title.style) === null || _a === void 0 ? void 0 : _a.maxLineWidth)) {
@@ -87166,6 +87107,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         initEvent() {
             super.initEvent();
             if (this.visible) {
+                this.event.on(exports.ChartEvent.layoutEnd, this._updateAxisLayout);
                 this.event.on(exports.ChartEvent.layoutEnd, this._fixAxisOnZero);
                 this.event.on(exports.ChartEvent.layoutRectUpdate, () => {
                     this._clearLayoutCache();
@@ -88884,15 +88826,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return legendData;
         }
         _getSeriesLegendField(s) {
-            var _a, _b;
+            var _a, _b, _c;
             const defaultField = s.getSeriesField();
-            if (!this._spec.scaleName) {
+            const specifyScaleId = (_a = this._spec.scaleName) !== null && _a !== void 0 ? _a : this._spec.scale;
+            if (isNil$3(specifyScaleId)) {
                 return defaultField;
             }
             if (!s.getRawData()) {
                 return defaultField;
             }
-            const scaleSpec = this._option.globalScale.getScaleSpec(this._spec.scaleName);
+            const scaleSpec = this._option.globalScale.getScaleSpec(specifyScaleId);
             if (!scaleSpec) {
                 return defaultField;
             }
@@ -88906,7 +88849,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (!seriesData) {
                 return defaultField;
             }
-            return (_b = (_a = seriesData.fields) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : defaultField;
+            return (_c = (_b = seriesData.fields) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : defaultField;
         }
         _initSelectedData() {
             if (this._spec.defaultSelected) {
@@ -89021,17 +88964,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         const { series, field, scale } = op;
         const datumField = field();
         if (field && datumField) {
-            let min = Number.MAX_VALUE;
-            let max = Number.MIN_VALUE;
+            let min = Infinity;
+            let max = -Infinity;
             series().forEach(s => {
                 const statisticData = s.getRawDataStatisticsByField(datumField, true);
                 const seriesMin = statisticData === null || statisticData === void 0 ? void 0 : statisticData.min;
                 const seriesMax = statisticData === null || statisticData === void 0 ? void 0 : statisticData.max;
                 if (isValidNumber$1(seriesMin)) {
-                    min = seriesMin;
+                    min = Math.min(seriesMin, min);
                 }
                 if (isValidNumber$1(seriesMax)) {
-                    max = seriesMax;
+                    max = Math.max(seriesMax, max);
                 }
             });
             return [min, max];
@@ -89186,10 +89129,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 type: 'continuousLegendDataMake',
                 options: {
                     series: () => {
-                        return this._regions.reduce((pre, r) => {
-                            pre.push(...r.getSeries());
-                            return pre;
-                        }, []);
+                        return getSeries(this._regions, {
+                            userId: this._seriesUserId,
+                            specIndex: this._seriesIndex
+                        });
                     },
                     field: () => this._field,
                     scale: this._getScaleInGlobal.bind(this)
@@ -91093,13 +91036,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _handleChange(start, end, updateComponent) {
             var _a, _b;
             const zoomLock = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.zoomLock) !== null && _b !== void 0 ? _b : false;
-            if (zoomLock || (end - start !== this._spanCache && (end - start < this._minSpan || end - start > this._maxSpan))) {
+            if (zoomLock ||
+                (end - start !== this._spanCache &&
+                    (end - start < this._minSpan || end - start > this._maxSpan))) {
                 this._shouldChange = false;
             }
             else {
                 this._shouldChange = true;
+                this._spanCache = end - start;
             }
-            this._spanCache = end - start;
         }
         _isReverse() {
             const axis = this._relatedAxisComponent;
@@ -91181,7 +91126,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 onZoomChange: (tag) => {
                     var _a, _b;
                     const axis = this._relatedAxisComponent;
-                    if (axis && this._filterMode === "axis") {
+                    if (axis && this._filterMode === 'axis') {
                         const axisScale = axis.getScale();
                         const axisSpec = axis.getSpec();
                         if (this._auto && this._getAxisBandSize(axisSpec) && this._spec.ignoreBandSize) {
@@ -91265,7 +91210,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if (active) {
                     this._handleChartMove(value, (_a = this._scrollAttr.rate) !== null && _a !== void 0 ? _a : 1);
                 }
-                return active;
+                const hasChange = this._start !== 0 && this._end !== 1;
+                return active && hasChange;
             };
             this._handleChartDrag = (delta, e) => {
                 var _a;
@@ -91291,6 +91237,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         this._handleChange(this._start + moveDelta, this._end + moveDelta, true);
                     }
                 }
+                return false;
             };
             this._orient = getOrient(spec);
             this._isHorizontal = getDirectionByOrient(this._orient) === "horizontal";
@@ -91326,7 +91273,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     this._relatedAxisComponent = bandAxis;
                 }
             }
-            if (this._relatedAxisComponent && this._filterMode === "axis") {
+            if (this._relatedAxisComponent && this._filterMode === 'axis') {
                 this._relatedAxisComponent.autoIndentOnce = true;
             }
         }
@@ -91568,8 +91515,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             this._minSpan = Math.max(0, this._minSpan);
             this._maxSpan = Math.min(this._maxSpan, 1);
-            if ((!this._relatedAxisComponent || this._filterMode !== "axis") &&
-                (this._start !== 0 || this._end !== 1)) {
+            if ((!this._relatedAxisComponent || this._filterMode !== 'axis') && (this._start !== 0 || this._end !== 1)) {
                 this._newDomain = this._parseDomainFromState(this._startValue, this._endValue);
             }
         }
@@ -91607,7 +91553,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         _addTransformToSeries() {
-            if (!this._relatedAxisComponent || this._filterMode !== "axis") {
+            if (!this._relatedAxisComponent || this._filterMode !== 'axis') {
                 registerDataSetInstanceTransform(this._option.dataSet, 'dataFilterWithNewDomain', dataFilterWithNewDomain);
                 eachSeries(this._regions, s => {
                     s.addViewDataFilter({
@@ -91890,7 +91836,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return yScale.scale(min) + this.getLayoutStartPoint().y + offsetTop + offsetHandler;
             };
             this._valueField = 'y';
-            this._filterMode = (_a = spec.filterMode) !== null && _a !== void 0 ? _a : "filter";
+            this._filterMode = (_a = spec.filterMode) !== null && _a !== void 0 ? _a : 'filter';
         }
         created() {
             super.created();
@@ -92100,7 +92046,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     this.event.emit(exports.ChartEvent.dataZoomChange, {
                         model: this,
                         value: {
-                            filterData: this._filterMode !== "axis",
+                            filterData: this._filterMode !== 'axis',
                             start,
                             end,
                             startValue: this._startValue,
@@ -92226,7 +92172,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.layoutZIndex = exports.LayoutZIndex.DataZoom;
             this.layoutLevel = exports.LayoutLevel.DataZoom;
             this.layoutType = 'region-relative';
-            this._filterMode = (_a = spec.filterMode) !== null && _a !== void 0 ? _a : "axis";
+            this._filterMode = (_a = spec.filterMode) !== null && _a !== void 0 ? _a : 'axis';
         }
         setAttrFromSpec() {
             super.setAttrFromSpec();
@@ -92310,7 +92256,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     this.event.emit(exports.ChartEvent.scrollBarChange, {
                         model: this,
                         value: {
-                            filterData: this._filterMode !== "axis",
+                            filterData: this._filterMode !== 'axis',
                             start: this._start,
                             end: this._end,
                             startValue: this._startValue,
@@ -92357,12 +92303,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         Factory.registerComponent(ScrollBar.type, ScrollBar);
     };
 
-    var IFilterMode;
-    (function (IFilterMode) {
-        IFilterMode["filter"] = "filter";
-        IFilterMode["axis"] = "axis";
-    })(IFilterMode || (IFilterMode = {}));
-
     const indicatorMapper = (data, op) => {
         const { datum, title, content } = op;
         const mappedData = [];
@@ -93801,7 +93741,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         const pause = baseToAttribute((_k = (_j = spec === null || spec === void 0 ? void 0 : spec.controller) === null || _j === void 0 ? void 0 : _j.pause) !== null && _k !== void 0 ? _k : {});
         const backward = baseToAttribute((_m = (_l = spec === null || spec === void 0 ? void 0 : spec.controller) === null || _l === void 0 ? void 0 : _l.backward) !== null && _m !== void 0 ? _m : {});
         const forward = baseToAttribute((_p = (_o = spec === null || spec === void 0 ? void 0 : spec.controller) === null || _o === void 0 ? void 0 : _o.forward) !== null && _p !== void 0 ? _p : {});
-        return Object.assign(Object.assign({}, spec), { direction: spec.direction, interval: spec.interval, visible: spec.visible, orient: (_q = spec.orient) !== null && _q !== void 0 ? _q : 'bottom', slider: Object.assign(Object.assign({}, spec.slider), { trackStyle: trackStyle, railStyle: railStyle, handlerStyle: handlerStyle }), controller: Object.assign(Object.assign({}, spec.controller), { start: start, pause: pause, backward: backward, forward: forward }) });
+        const attrs = Object.assign(Object.assign({}, spec), { direction: spec.direction, interval: spec.interval, visible: spec.visible, orient: (_q = spec.orient) !== null && _q !== void 0 ? _q : 'bottom', slider: Object.assign(Object.assign({}, spec.slider), { trackStyle: trackStyle, railStyle: railStyle, handlerStyle: handlerStyle }), controller: Object.assign(Object.assign({}, spec.controller), { start: start, pause: pause, backward: backward, forward: forward }) });
+        if (!spec.visible) {
+            attrs.controller.visible = false;
+            attrs.slider.visible = false;
+        }
+        return attrs;
     };
     const transformContinuousSpecToAttrs = (spec, data) => (Object.assign(Object.assign({}, transformToAttrs(spec)), { data, type: 'continuous' }));
     const transformDiscreteSpecToAttrs = (spec, data) => (Object.assign(Object.assign({}, transformToAttrs(spec)), { data, type: 'discrete' }));
@@ -93880,7 +93825,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         this._playerComponent.play();
                     }
                 });
-                this._playerComponent.addEventListener(PlayerEventEnum.OnEnd, () => {
+                this._playerComponent.addEventListener(PlayerEventEnum.end, () => {
                     var _a;
                     this.event.emit(exports.ChartEvent.playerEnd, { model: this });
                     if (this._alternate && this._spec.type === 'discrete') {
@@ -93894,7 +93839,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         this._playerComponent.play();
                     }
                 });
-                this._playerComponent.addEventListener(PlayerEventEnum.OnChange, (e) => {
+                this._playerComponent.addEventListener(PlayerEventEnum.change, (e) => {
                     const { index } = e.detail;
                     const spec = this._specs[index];
                     array(spec.data).forEach(data => {
@@ -93910,7 +93855,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         }
                     });
                 });
-                this._playerComponent.addEventListener(PlayerEventEnum.OnBackward, (e) => {
+                this._playerComponent.addEventListener(PlayerEventEnum.backward, (e) => {
                     const { index } = e.detail;
                     const spec = this._specs[index];
                     this.event.emit(exports.ChartEvent.playerBackward, {
@@ -93922,7 +93867,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         }
                     });
                 });
-                this._playerComponent.addEventListener(PlayerEventEnum.OnForward, (e) => {
+                this._playerComponent.addEventListener(PlayerEventEnum.forward, (e) => {
                     const { index } = e.detail;
                     const spec = this._specs[index];
                     this.event.emit(exports.ChartEvent.playerForward, {
@@ -93934,7 +93879,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         }
                     });
                 });
-                this._playerComponent.addEventListener(PlayerEventEnum.OnPlay, (e) => {
+                this._playerComponent.addEventListener(PlayerEventEnum.play, (e) => {
                     const { index } = e.detail;
                     const spec = this._specs[index];
                     this.event.emit(exports.ChartEvent.playerPlay, {
@@ -93946,7 +93891,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         }
                     });
                 });
-                this._playerComponent.addEventListener(PlayerEventEnum.OnPause, (e) => {
+                this._playerComponent.addEventListener(PlayerEventEnum.pause, (e) => {
                     const { index } = e.detail;
                     const spec = this._specs[index];
                     this.event.emit(exports.ChartEvent.playerPause, {
@@ -93968,7 +93913,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         static getSpecInfo(chartSpec) {
             const playerSpec = chartSpec[this.specKey];
-            if (isNil$3(playerSpec) || playerSpec.visible === false) {
+            if (isNil$3(playerSpec)) {
                 return null;
             }
             return [
@@ -93981,7 +93926,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             ];
         }
         setAttrFromSpec() {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             super.setAttrFromSpec();
             this._orient = (_a = this._spec.orient) !== null && _a !== void 0 ? _a : 'bottom';
             this._specs = (_b = this._spec.specs) !== null && _b !== void 0 ? _b : [];
@@ -93990,6 +93935,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._dx = (_e = this._spec.dx) !== null && _e !== void 0 ? _e : 0;
             this._dy = (_f = this._spec.dy) !== null && _f !== void 0 ? _f : 0;
             this._position = (_g = this._spec.position) !== null && _g !== void 0 ? _g : 'middle';
+            this._visible = (_h = this._spec.visible) !== null && _h !== void 0 ? _h : true;
         }
         afterSetLayoutStartPoint(pos) {
             super.afterSetLayoutStartPoint(pos);
@@ -94019,6 +93965,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return [this._playerComponent];
         }
         _computeLayoutRect(rect, width, height) {
+            if (this._visible === false) {
+                return { x1: 0, x2: 0, y1: 0, y2: 0 };
+            }
             switch (this._orient) {
                 case 'top': {
                     return { x1: 0, y1: 0, x2: width, y2: height };