@visactor/vchart 1.12.9 → 1.12.10

package/build/index.js

@@ -1251,7 +1251,7 @@
       return steps.forEach(step => {
         const sin = Math.sin(step),
           cos = Math.cos(step);
-        1 === sin ? radiusList.push(height - y) : -1 === sin ? radiusList.push(y) : 1 === cos ? radiusList.push(width - x) : -1 === cos ? radiusList.push(x) : (sin > 0 ? radiusList.push(Math.abs((height - y) / cos)) : radiusList.push(Math.abs(y / cos)), cos > 0 ? radiusList.push(Math.abs((width - x) / sin)) : radiusList.push(Math.abs(x / sin)));
+        1 === sin ? radiusList.push(height - y) : -1 === sin ? radiusList.push(y) : 1 === cos ? radiusList.push(width - x) : -1 === cos ? radiusList.push(x) : (sin > 0 ? radiusList.push(Math.abs((height - y) / sin)) : radiusList.push(Math.abs(y / sin)), cos > 0 ? radiusList.push(Math.abs((width - x) / cos)) : radiusList.push(Math.abs(x / cos)));
       }), Math.min.apply(null, radiusList);
     }
     function computeQuadrant(angle) {
@@ -18490,7 +18490,9 @@
             path = groupAttribute.path,
             lineWidth = groupAttribute.lineWidth,
             visible = groupAttribute.visible,
-            fillStrokeOrder = groupAttribute.fillStrokeOrder
+            fillStrokeOrder = groupAttribute.fillStrokeOrder,
+            x: originX = groupAttribute.x,
+            y: originY = groupAttribute.y
           } = group.attribute,
           fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill),
           sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height),
@@ -18518,10 +18520,10 @@
           c.time === BaseRenderContributionTime.beforeFillStroke && c.drawShape(group, context, x, y, doFill, doStroke, fVisible, sVisible, groupAttribute, drawContext, fillCb, strokeCb, doFillOrStroke);
         }), clip && context.clip(), context.setShadowBlendStyle && context.setShadowBlendStyle(group, group.attribute, groupAttribute);
         const _runFill = () => {
-            doFillOrStroke.doFill && (fillCb ? fillCb(context, group.attribute, groupAttribute) : fVisible && (context.setCommonStyle(group, group.attribute, x, y, groupAttribute), context.fill()));
+            doFillOrStroke.doFill && (fillCb ? fillCb(context, group.attribute, groupAttribute) : fVisible && (context.setCommonStyle(group, group.attribute, originX - x, originY - y, groupAttribute), context.fill()));
           },
           _runStroke = () => {
-            doFillOrStroke.doStroke && (strokeCb ? strokeCb(context, group.attribute, groupAttribute) : sVisible && (context.setStrokeStyle(group, group.attribute, x, y, groupAttribute), context.stroke()));
+            doFillOrStroke.doStroke && (strokeCb ? strokeCb(context, group.attribute, groupAttribute) : sVisible && (context.setStrokeStyle(group, group.attribute, originX - x, originY - y, groupAttribute), context.stroke()));
           };
         fillStrokeOrder ? (_runStroke(), _runFill()) : (_runFill(), _runStroke()), this._groupRenderContribitions.forEach(c => {
           c.time === BaseRenderContributionTime.afterFillStroke && c.drawShape(group, context, x, y, doFill, doStroke, fVisible, sVisible, groupAttribute, drawContext, fillCb, strokeCb);
@@ -24005,27 +24007,9 @@
       for (let i = 1, len = points.length; i < len; i++) deltaX = points[i].x - lastX, deltaY = points[i].y - lastY, deltaX * deltaX + deltaY * deltaY > sqTolerance && (lastX = points[i].x, lastY = points[i].y, newPoints.push(points[i]));
       return points[points.length - 1].x === lastX && points[points.length - 1].y === lastY || newPoints.push(points[points.length - 1]), newPoints;
     }
-    function simplifyDPStep(points, startIdx, endIdx, sqTolerance, simplified) {
-      let maxSqDist = sqTolerance,
-        nextIdx = startIdx;
-      const startX = points[startIdx].x,
-        startY = points[startIdx].y,
-        vecX2 = points[endIdx].x - startX,
-        vecY2 = points[endIdx].y - startY,
-        sqLength = vecX2 * vecX2 + vecY2 * vecY2;
-      let area, sqArea, sqDistance, vecX1, vecY1;
-      for (let i = startIdx + 1, len = endIdx - 1; i < len; i++) vecX1 = points[i].x - startX, vecY1 = points[i].y - startY, area = vecX1 * vecY2 - vecX2 * vecY1, sqArea = area * area, sqDistance = sqArea / sqLength, sqDistance > maxSqDist && (maxSqDist = sqDistance, nextIdx = i);
-      maxSqDist > sqTolerance && (nextIdx - startIdx > 2 && simplifyDPStep(points, startIdx, nextIdx, sqTolerance, simplified), simplified.push(points[nextIdx], points[nextIdx + 1]), endIdx - nextIdx > 2 && simplifyDPStep(points, nextIdx, endIdx, sqTolerance, simplified));
-    }
-    function simplifyDouglasPeucker(points, sqTolerance) {
-      const lastIdx = points.length - 1,
-        simplified = [points[0]];
-      return simplifyDPStep(points, 0, lastIdx, sqTolerance, simplified), simplified.push(points[lastIdx]), simplified;
-    }
     function flatten_simplify(points, tolerance, highestQuality) {
       if (points.length <= 10) return points;
-      const sqTolerance = void 0 !== tolerance ? tolerance * tolerance : 1;
-      return points = simplifyDouglasPeucker(points = highestQuality ? points : simplifyRadialDist(points, sqTolerance), sqTolerance);
+      return points = highestQuality ? points : simplifyRadialDist(points, void 0 !== tolerance ? tolerance * tolerance : 1);
     }
 
     let loadArcModule = !1;
@@ -34383,21 +34367,23 @@
         axisLength: axisLength
       } = config;
       if (isEmpty(labels) || !isValidNumber$1(limitLength)) return;
-      const overflowLimitLength = normalizeOverflowLimitLength(config.overflowLimitLength);
+      const overflowLimitLength = normalizeOverflowLimitLength(config.overflowLimitLength),
+        firstLabel = labels[0],
+        angle = firstLabel.attribute.angle,
+        hasAngle = !isNil$1(angle),
+        cos = hasAngle ? Math.cos(angle) : 1,
+        sin = hasAngle ? Math.sin(angle) : 0,
+        isHorizontal = isAngleHorizontal(angle),
+        isVertical = isAngleVertical(angle),
+        isX = "top" === orient || "bottom" === orient,
+        direction = firstLabel.attribute.direction,
+        checkBox = !isHorizontal && !isVertical && isX && (labels.length < 2 || labels.some(label => Math.abs(label.AABBBounds.width() - firstLabel.AABBBounds.width()) >= 2)) && firstLabel.AABBBounds.width() > Math.abs(limitLength / sin);
       labels.forEach(label => {
         var _a;
-        const angle = label.attribute.angle,
-          hasAngle = !isNil$1(angle),
-          cos = hasAngle ? Math.cos(angle) : 1,
-          sin = hasAngle ? Math.sin(angle) : 0,
-          isHorizontal = isAngleHorizontal(angle),
-          isVertical = isAngleVertical(angle),
-          isX = "top" === orient || "bottom" === orient;
         if (isX) {
           if (isVertical && Math.floor(label.AABBBounds.height()) <= limitLength) return;
           if (isHorizontal && Math.floor(label.AABBBounds.width()) <= verticalLimitLength) return;
         }
-        const direction = label.attribute.direction;
         if (!isX) {
           if ("vertical" === direction && Math.floor(label.AABBBounds.height()) <= verticalLimitLength) return;
           if ("vertical" !== direction) {
@@ -34413,11 +34399,11 @@
             } = label.AABBBounds,
             tan = sin / cos,
             verticalSizeLimit = Math.abs(limitLength / sin);
-          if (tan > 0 && x1 <= axisLength && limitLength / tan + x1 > axisLength) {
-            const lengthLimit = (axisLength - x1) / Math.abs(cos) + overflowLimitLength.right;
+          if (checkBox && tan > 0 && x1 <= axisLength + overflowLimitLength.right && limitLength / tan + x1 > axisLength + overflowLimitLength.right) {
+            const lengthLimit = (axisLength - x1 + overflowLimitLength.right) / Math.abs(cos);
             limitLabelLength = Math.min(lengthLimit, verticalSizeLimit);
-          } else if (tan < 0 && x2 >= 0 && limitLength / tan + x2 < 0) {
-            const lengthLimit = x2 / Math.abs(cos) + overflowLimitLength.left;
+          } else if (checkBox && tan < 0 && x2 >= -overflowLimitLength.left && limitLength / tan + x2 < -overflowLimitLength.left) {
+            const lengthLimit = (x2 + overflowLimitLength.left) / Math.abs(cos);
             limitLabelLength = Math.min(lengthLimit, verticalSizeLimit);
           } else limitLabelLength = verticalSizeLimit;
         } else limitLabelLength = Math.abs(limitLength / cos);
@@ -34436,30 +34422,40 @@
         orient: orient
       } = config;
       if (isEmpty(labels) || !isValidNumber$1(limitLength)) return;
-      const verticalLimitLength = axisLength / labels.length;
-      labels.forEach(label => {
-        var _a;
-        const angle = label.attribute.angle,
-          isHorizontal = isAngleHorizontal(angle),
-          isVertical = isAngleVertical(angle),
-          isX = "top" === orient || "bottom" === orient;
+      const angle = labels[0].attribute.angle,
+        isHorizontal = isAngleHorizontal(angle),
+        isVertical = isAngleVertical(angle),
+        isX = "top" === orient || "bottom" === orient;
+      let verticalLimitLength = axisLength / labels.length;
+      labels.forEach((label, index) => {
+        var _a, _b, _c, _d, _e;
         if (isX) {
           if (isVertical && Math.floor(label.AABBBounds.height()) <= limitLength) return;
-          if (isHorizontal && Math.floor(label.AABBBounds.width()) <= verticalLimitLength) return;
+          if (isHorizontal) {
+            const minGap = getLabelMinGap(label.attribute.x, null === (_a = labels[index + 1]) || void 0 === _a ? void 0 : _a.attribute.x, null === (_b = labels[index - 1]) || void 0 === _b ? void 0 : _b.attribute.x);
+            isValidNumber$1(minGap) && (verticalLimitLength = min$1(verticalLimitLength, minGap));
+          }
         } else {
-          if (isVertical && Math.floor(label.AABBBounds.height()) <= verticalLimitLength) return;
+          if (isVertical) {
+            const minGap = getLabelMinGap(label.attribute.y, null === (_c = labels[index + 1]) || void 0 === _c ? void 0 : _c.attribute.y, null === (_d = labels[index - 1]) || void 0 === _d ? void 0 : _d.attribute.y);
+            isValidNumber$1(minGap) && (verticalLimitLength = min$1(verticalLimitLength, minGap));
+          }
           if (isHorizontal && Math.floor(label.AABBBounds.width()) <= limitLength) return;
         }
         let limitLabelLength = null,
           heightLimit = null;
         isX ? isVertical ? (limitLabelLength = limitLength, heightLimit = verticalLimitLength) : (limitLabelLength = verticalLimitLength, heightLimit = limitLength) : isVertical ? (limitLabelLength = verticalLimitLength, heightLimit = limitLength) : (limitLabelLength = limitLength, heightLimit = verticalLimitLength), label.setAttributes({
           maxLineWidth: limitLabelLength,
-          ellipsis: null !== (_a = label.attribute.ellipsis) && void 0 !== _a ? _a : ellipsis,
+          ellipsis: null !== (_e = label.attribute.ellipsis) && void 0 !== _e ? _e : ellipsis,
           whiteSpace: "normal",
           heightLimit: heightLimit
         });
       });
     }
+    function getLabelMinGap(current, next, prev) {
+      let minGap;
+      return isValidNumber$1(next) && (minGap = Math.abs(next - current)), isValidNumber$1(prev) && (minGap = isValidNumber$1(minGap) ? Math.min(Math.abs(current - prev), minGap) : Math.abs(current - prev)), minGap;
+    }
 
     function alignAxisLabels(labels, start, containerSize, orient, align) {
       "left" === orient || "right" === orient ? "left" === align ? labels.forEach(label => {
@@ -35188,16 +35184,15 @@
             inside: inside,
             radius: radius,
             center: center,
-            width: width,
-            height: height,
+            size: size,
             label: label,
             orient: orient
           } = this.attribute,
-          bounds = width && height ? {
+          bounds = size ? {
             x1: 0,
             y1: 0,
-            x2: width,
-            y2: height
+            x2: size.width,
+            y2: size.height
           } : {
             x1: center.x - radius,
             y1: center.y - radius,
@@ -40474,12 +40469,22 @@
           pages = 1;
         if (isHorizontal) compSize = maxWidth, contentWidth = maxWidth, contentHeight = this._itemHeight, comp = this._createScrollbar(compStyle, compSize), this._pagerComponent = comp, this._innerView.add(comp), this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY);else {
           if (compSize = maxHeight, comp = this._createScrollbar(compStyle, compSize), this._pagerComponent = comp, this._innerView.add(comp), contentHeight = maxHeight - renderStartY, contentWidth = this._itemMaxWidth, contentHeight <= 0) return this._innerView.removeChild(comp), !1;
-          itemsContainer.getChildren().forEach((item, index) => {
+          const items = itemsContainer.getChildren(),
+            itemsHeightArr = items.map(item => item.attribute.height);
+          if (1 === itemsHeightArr.length || itemsHeightArr.every(entry => entry === itemsHeightArr[0])) {
+            const itemHeight = itemsHeightArr[0],
+              maxContentHeight = contentHeight,
+              pageItemsCount = Math.floor(maxContentHeight / (spaceRow + itemHeight));
+            contentHeight = pageItemsCount * (spaceRow + itemHeight), pages = Math.ceil(items.length / pageItemsCount);
+          } else items.forEach((item, index) => {
             const {
-              height: height
-            } = item.attribute;
-            pages = Math.floor((startY + height) / contentHeight) + 1, startY += spaceRow + height;
-          }), this._itemContext.totalPage = pages, this._itemContext.pages = pages, this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY);
+                height: height
+              } = item.attribute,
+              prePages = pages,
+              preStartY = startY;
+            pages = Math.floor((startY + height) / contentHeight) + 1, startY += spaceRow + height, prePages !== pages && index === itemsContainer.getChildren().length - 1 && startY - contentHeight >= 1 / 3 * height && (contentHeight = preStartY + height, pages -= 1);
+          });
+          this._itemContext.totalPage = pages, this._itemContext.pages = pages, this._updatePositionOfScrollbar(contentWidth, contentHeight, renderStartY);
         }
         defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("x", -(defaultCurrent - 1) * (contentWidth + spaceCol)) : itemsContainer.setAttribute("y", -(defaultCurrent - 1) * (contentHeight + spaceRow)));
         const clipGroup = graphicCreator.group({
@@ -45851,7 +45856,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const MarkConstructor = Factory._marks[markType];
             const markInstance = new MarkConstructor(name, options);
             if (markInstance.type === "group") {
-                markInstance.setInteractive(false);
+                markInstance.setMarkConfig({ interactive: false });
             }
             return markInstance;
         }
@@ -57612,10 +57617,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 m.compile({ group });
             });
         }
-        _createMark(markInfo, option = {}) {
+        _createMark(markInfo, option = {}, config) {
             const { type, name } = markInfo;
             const m = Factory$1.createMark(type, name, Object.assign({ model: this, map: this._option.map, getCompiler: this.getCompiler, globalScale: this._option.globalScale }, option));
-            m === null || m === void 0 ? void 0 : m.created();
+            if (m) {
+                m.created();
+                config && m.setMarkConfig(config);
+            }
             return m;
         }
         _getDataIdKey() {
@@ -58173,8 +58181,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         this._groupMark.addMark(mark);
                     }
                 });
-                this._backgroundMark && this._backgroundMark.setZIndex(LayoutZIndex.SeriesGroup - 1);
-                this._foregroundMark && this._foregroundMark.setZIndex(LayoutZIndex.Mark + 1);
+                this._backgroundMark && this._backgroundMark.setMarkConfig({ zIndex: LayoutZIndex.SeriesGroup - 1 });
+                this._foregroundMark && this._foregroundMark.setMarkConfig({ zIndex: LayoutZIndex.Mark + 1 });
             }
             this.createTrigger();
         }
@@ -58182,7 +58190,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a, _b;
             const groupMark = this._createMark({ type: "group", name });
             groupMark.setUserId(userId);
-            groupMark.setZIndex(zIndex);
+            groupMark.setMarkConfig({ zIndex });
             const clip = (_a = this._spec.clip) !== null && _a !== void 0 ? _a : this._getClipDefaultValue();
             this.setMarkStyle(groupMark, {
                 x: () => this.getLayoutStartPoint().x,
@@ -59356,29 +59364,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     }
 
     class CompilableMark extends GrammarItem {
-        getSkipTheme() {
-            return this._skipTheme;
-        }
-        setSkipTheme(skipTheme) {
-            this._skipTheme = skipTheme;
+        getMarkConfig() {
+            return this._markConfig;
         }
-        getSupport3d() {
-            return this._support3d;
-        }
-        setSupport3d(support3d) {
-            this._support3d = support3d;
-        }
-        getInteractive() {
-            return this._interactive;
-        }
-        setInteractive(interactive) {
-            this._interactive = interactive;
-        }
-        getZIndex() {
-            return this._zIndex;
-        }
-        setZIndex(zIndex) {
-            this._zIndex = zIndex;
+        setMarkConfig(config) {
+            Object.keys(config).forEach(key => {
+                this._markConfig[key] = config[key];
+            });
         }
         getVisible() {
             return this._visible;
@@ -59431,48 +59423,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         getSkipBeforeLayouted() {
             return this._skipBeforeLayouted;
         }
-        getMorph() {
-            return this._morph;
-        }
-        setMorph(morph) {
-            this._morph = morph;
-        }
-        getMorphKey() {
-            return this._morphKey;
-        }
-        setMorphKey(morphKey) {
-            this._morphKey = morphKey;
-        }
-        getMorphElementKey() {
-            return this._morphElementKey;
-        }
-        setMorphElementKey(key) {
-            this._morphElementKey = key;
-        }
         getGroupKey() {
             return this._groupKey;
         }
         setGroupKey(groupKey) {
             this._groupKey = groupKey;
         }
-        getProgressiveConfig() {
-            return this._progressiveConfig;
-        }
-        setProgressiveConfig(config) {
-            this._progressiveConfig = config;
-        }
-        setCustomizedShapeCallback(callback) {
-            this._setCustomizedShape = callback;
-        }
-        setEnableSegments(enable) {
-            this._enableSegments = enable;
-        }
-        getClip() {
-            return this._clip;
-        }
-        setClip(clip) {
-            this._clip = clip;
-        }
         setStateSortCallback(stateSort) {
             this._stateSort = stateSort;
         }
@@ -59481,19 +59437,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.grammarType = GrammarType.mark;
             this.type = undefined;
             this.name = 'mark';
-            this._interactive = true;
-            this._zIndex = LayoutZIndex.Mark;
+            this._markConfig = {
+                zIndex: LayoutZIndex.Mark,
+                morph: false
+            };
             this._visible = true;
             this.stateStyle = {};
             this._unCompileChannel = {};
             this._skipBeforeLayouted = false;
-            this._morph = false;
             this.name = name;
             this.model = model;
             this.key = option.key;
             this.state = new MarkStateManager(Object.assign(Object.assign({}, option), { stateKeyToSignalName: this.stateKeyToSignalName.bind(this) }), this);
-            this._option.support3d && this.setSupport3d(true);
-            this._option.skipTheme && this.setSkipTheme(true);
             this._event = new Event$1(model.getOption().eventDispatcher, model.getOption().mode);
         }
         setTransform(transform) {
@@ -59647,28 +59602,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         compileContext(extraContext) {
-            const config = {
-                interactive: this.getInteractive(),
-                zIndex: this.getZIndex(),
-                context: Object.assign({ markId: this.id, modelId: this.model.id, markUserId: this._userId, modelUserId: this.model.userId }, extraContext),
-                skipTheme: this.getSkipTheme(),
-                support3d: this.getSupport3d(),
-                enableSegments: !!this._enableSegments,
-                clip: this._clip ? true : this._clip === false ? false : undefined,
-                clipPath: this._clip || undefined
-            };
-            if (this._progressiveConfig) {
-                config.progressiveStep = this._progressiveConfig.progressiveStep;
-                config.progressiveThreshold = this._progressiveConfig.progressiveThreshold;
-                config.large = this._progressiveConfig.large;
-                config.largeThreshold = this._progressiveConfig.largeThreshold;
-            }
-            config.morph = this._morph;
-            config.morphKey = this._morphKey;
-            config.morphElementKey = this._morphElementKey;
-            if (this._setCustomizedShape) {
-                config.setCustomizedShape = this._setCustomizedShape;
-            }
+            const config = Object.assign(Object.assign({}, this._markConfig), { context: Object.assign({ markId: this.id, modelId: this.model.id, markUserId: this._userId, modelUserId: this.model.userId }, extraContext) });
             this._product.configure(config);
         }
         compileSignal() {
@@ -59774,10 +59708,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._userId = spec.id;
             }
             if (isBoolean$1(spec.interactive)) {
-                this._interactive = spec.interactive;
+                this._markConfig.interactive = spec.interactive;
             }
             if (isValid$1(spec.zIndex)) {
-                this.setZIndex(spec.zIndex);
+                this._markConfig.zIndex = spec.zIndex;
             }
             if (isBoolean$1(spec.visible)) {
                 this.setVisible(spec.visible);
@@ -60153,7 +60087,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _compileProduct(option) {
             super._compileProduct(option);
             this._product.configure({
-                zIndex: this.getZIndex()
+                zIndex: this._markConfig.zIndex
             });
             if (!(option === null || option === void 0 ? void 0 : option.ignoreChildren)) {
                 this.getMarks().forEach(mark => {
@@ -61645,7 +61579,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     registerVChartCore();
 
-    const version = "1.12.9";
+    const version = "1.12.10";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -62652,7 +62586,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         let animationThreshold = (_a = seriesSpec.animationThreshold) !== null && _a !== void 0 ? _a : Number.MAX_SAFE_INTEGER;
         (_b = series.getMarks()) === null || _b === void 0 ? void 0 : _b.forEach(m => {
-            const config = m.getProgressiveConfig();
+            const config = m.getMarkConfig();
             if (config) {
                 if (config.large && config.largeThreshold) {
                     animationThreshold = Math.min(animationThreshold, config.largeThreshold);
@@ -63229,7 +63163,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 parent: (_b = (_a = this._region).getGroupMark) === null || _b === void 0 ? void 0 : _b.call(_a),
                 dataView: false
             });
-            this._rootMark.setZIndex(this.layoutZIndex);
+            this._rootMark.setMarkConfig({ zIndex: this.layoutZIndex });
         }
         _getExtensionMarkNamePrefix() {
             return `${this.type}_${this.id}_extensionMark`;
@@ -63252,10 +63186,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 markSpec: spec,
                 parent: parentMark,
                 dataView: false,
-                customShape: spec === null || spec === void 0 ? void 0 : spec.customShape,
                 componentType: spec.componentType,
                 depend: options.depend,
                 key: spec.dataKey
+            }, {
+                setCustomizedShape: spec === null || spec === void 0 ? void 0 : spec.customShape
             });
             if (!mark) {
                 return;
@@ -63710,18 +63645,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         onMarkTreePositionUpdate(marks) {
         }
-        _createMark(markInfo, option = {}) {
-            var _a, _b, _c, _d;
-            const { key, groupKey, skipBeforeLayouted, themeSpec = {}, markSpec, dataView, dataProductId, parent, isSeriesMark, depend, progressive, support3d = this._spec.support3d || !!this._spec.zField, morph = false, clip, customShape, stateSort, noSeparateStyle = false } = option;
+        _createMark(markInfo, option = {}, config = {}) {
+            var _a, _b, _c, _d, _e, _f;
+            const { key, groupKey, skipBeforeLayouted, themeSpec = {}, markSpec, dataView, dataProductId, parent, isSeriesMark, depend, stateSort, noSeparateStyle = false } = option;
             const m = super._createMark(markInfo, {
                 key: key !== null && key !== void 0 ? key : this._getDataIdKey(),
-                support3d,
                 seriesId: this.id,
                 attributeContext: this._markAttributeContext,
                 componentType: option.componentType,
                 noSeparateStyle
             });
             if (isValid$1(m)) {
+                const spec = this.getSpec() || {};
                 this._marks.addMark(m, { name: markInfo.name });
                 if (isSeriesMark) {
                     this._seriesMark = m;
@@ -63745,25 +63680,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if (isValid$1(depend)) {
                     m.setDepend(...array(depend));
                 }
-                const spec = this.getSpec() || {};
-                m.setMorph(morph);
-                m.setMorphKey(((_b = spec.morph) === null || _b === void 0 ? void 0 : _b.morphKey) || `${this.getSpecIndex()}_${this.getMarks().length}`);
-                m.setMorphElementKey((_d = (_c = spec.morph) === null || _c === void 0 ? void 0 : _c.morphElementKey) !== null && _d !== void 0 ? _d : option.defaultMorphElementKey);
-                if (!isNil$1(progressive)) {
-                    m.setProgressiveConfig(progressive);
-                }
                 if (!isNil$1(groupKey)) {
                     m.setGroupKey(groupKey);
                 }
-                if (customShape) {
-                    m.setCustomizedShapeCallback(customShape);
-                }
                 if (stateSort) {
                     m.setStateSortCallback(stateSort);
                 }
-                if (clip) {
-                    m.setClip(clip);
-                }
+                const markConfig = Object.assign(Object.assign({}, config), { morph: (_b = config.morph) !== null && _b !== void 0 ? _b : false, support3d: (_c = config.support3d) !== null && _c !== void 0 ? _c : (spec.support3d || !!spec.zField), morphKey: ((_d = spec.morph) === null || _d === void 0 ? void 0 : _d.morphKey) || `${this.getSpecIndex()}_${this.getMarks().length}`, morphElementKey: (_f = (_e = spec.morph) === null || _e === void 0 ? void 0 : _e.morphElementKey) !== null && _f !== void 0 ? _f : config.morphElementKey });
+                m.setMarkConfig(markConfig);
                 this.initMarkStyleWithSpec(m, mergeSpec({}, themeSpec, markSpec || spec[m.name]));
             }
             return m;
@@ -64393,13 +64317,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         initLineMark(progressive, isSeriesMark) {
             var _a, _b;
             this._lineMark = this._createMark(lineLikeSeriesMark.line, {
-                defaultMorphElementKey: this.getDimensionField()[0],
                 groupKey: this._seriesField,
                 isSeriesMark: isSeriesMark !== null && isSeriesMark !== void 0 ? isSeriesMark : true,
-                progressive,
-                customShape: (_a = this._spec.line) === null || _a === void 0 ? void 0 : _a.customShape,
-                stateSort: (_b = this._spec.line) === null || _b === void 0 ? void 0 : _b.stateSort
-            });
+                stateSort: (_a = this._spec.line) === null || _a === void 0 ? void 0 : _a.stateSort
+            }, Object.assign(Object.assign({}, progressive), { setCustomizedShape: (_b = this._spec.line) === null || _b === void 0 ? void 0 : _b.customShape, morphElementKey: this.getDimensionField()[0] }));
             return this._lineMark;
         }
         initLineMarkStyle(direction, areaCurveType) {
@@ -64474,26 +64395,23 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const pointSpec = this._spec.point || {};
             if (pointSpec.visible !== false) {
                 this._symbolMark = this._createMark(lineLikeSeriesMark.point, {
-                    morph: shouldMarkDoMorph(this._spec, lineLikeSeriesMark.point.name),
-                    defaultMorphElementKey: this.getDimensionField()[0],
                     groupKey: this._seriesField,
-                    progressive,
                     isSeriesMark: !!isSeriesMark,
-                    customShape: pointSpec.customShape,
                     stateSort: pointSpec.stateSort
-                });
+                }, Object.assign(Object.assign({}, progressive), { setCustomizedShape: pointSpec.customShape, morph: shouldMarkDoMorph(this._spec, lineLikeSeriesMark.point.name), morphElementKey: this.getDimensionField()[0] }));
             }
             if (this._spec.activePoint === true) {
                 const activeData = new DataView(this._option.dataSet, { name: `${PREFIX}_series_${this.id}_active_point` });
                 activeData.parse([]);
                 this._symbolActiveMark = this._createMark({ name: `active_point_${this.id}`, type: "symbol" }, {
-                    morph: false,
                     groupKey: this._seriesField,
                     isSeriesMark: false,
                     dataView: activeData,
                     parent: this._region.getInteractionMark(),
-                    customShape: pointSpec.customShape,
                     stateSort: pointSpec.stateSort
+                }, {
+                    setCustomizedShape: pointSpec.customShape,
+                    morph: false
                 });
                 this._symbolActiveMark.setVisible(false);
             }
@@ -64512,6 +64430,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 for (const state in this._symbolMark.stateStyle) {
                     this._symbolActiveMark.stateStyle[state] = {};
                     for (const key in this._symbolMark.stateStyle[state]) {
+                        if (key === 'visible') {
+                            continue;
+                        }
                         this._symbolActiveMark.stateStyle[state][key] = {
                             style: null,
                             level: AttributeLevel.Series,
@@ -64675,7 +64596,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this.setAttribute(attr, styleConverter, state, level, stateStyle);
             });
             if (enableSegments) {
-                this.setEnableSegments(enableSegments);
+                this.setMarkConfig({
+                    enableSegments: true
+                });
             }
         }
     }
@@ -65506,7 +65429,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             ].filter(isValid$1);
         }
         created() {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
             super.created();
             this.setSeriesAndRegionsFromSpec();
             this.initEvent();
@@ -65517,39 +65440,41 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const axisMark = this._createMark({ type: 'component', name: `axis-${this.getOrient()}` }, {
                     componentType: this.getOrient() === 'angle' ? 'circleAxis' : 'axis',
                     mode: this._spec.mode,
-                    noSeparateStyle: true,
+                    noSeparateStyle: true
+                }, {
                     skipTheme: true
                 });
                 this._axisMark = axisMark;
-                axisMark.setZIndex(this.layoutZIndex);
+                axisMark.setMarkConfig({ zIndex: this.layoutZIndex });
                 if (isValid$1(this._spec.id)) {
                     axisMark.setUserId(this._spec.id);
                 }
+                axisMark.setMarkConfig({ interactive: (_a = this._spec.interactive) !== null && _a !== void 0 ? _a : this.getDefaultInteractive() });
                 this._marks.addMark(axisMark);
-                if ((_a = this._spec.grid) === null || _a === void 0 ? void 0 : _a.visible) {
+                if ((_b = this._spec.grid) === null || _b === void 0 ? void 0 : _b.visible) {
                     const gridMark = this._createMark({ type: 'component', name: `axis-${this.getOrient()}-grid` }, {
                         componentType: this.getOrient() === 'angle' ? GridEnum.circleAxisGrid : GridEnum.lineAxisGrid,
                         mode: this._spec.mode,
-                        noSeparateStyle: true,
+                        noSeparateStyle: true
+                    }, {
                         skipTheme: true
                     });
-                    gridMark.setZIndex((_f = (_d = (_c = (_b = this._spec.grid) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.zIndex) !== null && _d !== void 0 ? _d : (_e = this._spec.grid) === null || _e === void 0 ? void 0 : _e.zIndex) !== null && _f !== void 0 ? _f : LayoutZIndex.Axis_Grid);
-                    gridMark.setInteractive(false);
+                    gridMark.setMarkConfig({
+                        zIndex: (_g = (_e = (_d = (_c = this._spec.grid) === null || _c === void 0 ? void 0 : _c.style) === null || _d === void 0 ? void 0 : _d.zIndex) !== null && _e !== void 0 ? _e : (_f = this._spec.grid) === null || _f === void 0 ? void 0 : _f.zIndex) !== null && _g !== void 0 ? _g : LayoutZIndex.Axis_Grid,
+                        interactive: false
+                    });
                     this._marks.addMark(gridMark);
                     this._gridMark = gridMark;
                 }
-                if (isBoolean$1(this._spec.interactive)) {
-                    this._marks.forEach(m => m.setInteractive(this._spec.interactive));
-                }
                 if (this._option.animation !== false &&
                     get$1(this._option.getChart().getSpec(), 'animation') !== false &&
                     this._spec.animation === true) {
-                    const axisAnimateConfig = animationConfig((_g = Factory$1.getAnimationInKey('axis')) === null || _g === void 0 ? void 0 : _g(), {
-                        appear: (_j = (_h = this._spec.animationAppear) !== null && _h !== void 0 ? _h : get$1(this._option.getChart().getSpec(), 'animationAppear.axis')) !== null && _j !== void 0 ? _j : get$1(this._option.getChart().getSpec(), 'animationAppear'),
-                        disappear: (_l = (_k = this._spec.animationDisappear) !== null && _k !== void 0 ? _k : get$1(this._option.getChart().getSpec(), 'animationDisappear.axis')) !== null && _l !== void 0 ? _l : get$1(this._option.getChart().getSpec(), 'animationDisappear'),
-                        enter: (_o = (_m = this._spec.animationEnter) !== null && _m !== void 0 ? _m : get$1(this._option.getChart().getSpec(), 'animationEnter.axis')) !== null && _o !== void 0 ? _o : get$1(this._option.getChart().getSpec(), 'animationEnter'),
-                        exit: (_q = (_p = this._spec.animationExit) !== null && _p !== void 0 ? _p : get$1(this._option.getChart().getSpec(), 'animationExit.axis')) !== null && _q !== void 0 ? _q : get$1(this._option.getChart().getSpec(), 'animationExit'),
-                        update: (_s = (_r = this._spec.animationUpdate) !== null && _r !== void 0 ? _r : get$1(this._option.getChart().getSpec(), 'animationUpdate.axis')) !== null && _s !== void 0 ? _s : get$1(this._option.getChart().getSpec(), 'animationUpdate')
+                    const axisAnimateConfig = animationConfig((_h = Factory$1.getAnimationInKey('axis')) === null || _h === void 0 ? void 0 : _h(), {
+                        appear: (_k = (_j = this._spec.animationAppear) !== null && _j !== void 0 ? _j : get$1(this._option.getChart().getSpec(), 'animationAppear.axis')) !== null && _k !== void 0 ? _k : get$1(this._option.getChart().getSpec(), 'animationAppear'),
+                        disappear: (_m = (_l = this._spec.animationDisappear) !== null && _l !== void 0 ? _l : get$1(this._option.getChart().getSpec(), 'animationDisappear.axis')) !== null && _m !== void 0 ? _m : get$1(this._option.getChart().getSpec(), 'animationDisappear'),
+                        enter: (_p = (_o = this._spec.animationEnter) !== null && _o !== void 0 ? _o : get$1(this._option.getChart().getSpec(), 'animationEnter.axis')) !== null && _p !== void 0 ? _p : get$1(this._option.getChart().getSpec(), 'animationEnter'),
+                        exit: (_r = (_q = this._spec.animationExit) !== null && _q !== void 0 ? _q : get$1(this._option.getChart().getSpec(), 'animationExit.axis')) !== null && _r !== void 0 ? _r : get$1(this._option.getChart().getSpec(), 'animationExit'),
+                        update: (_t = (_s = this._spec.animationUpdate) !== null && _s !== void 0 ? _s : get$1(this._option.getChart().getSpec(), 'animationUpdate.axis')) !== null && _t !== void 0 ? _t : get$1(this._option.getChart().getSpec(), 'animationUpdate')
                     });
                     if (axisAnimateConfig.enter) {
                         axisAnimateConfig.update[0].customParameters = {
@@ -65671,7 +65596,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             super.onLayoutEnd(ctx);
         }
         computeData(updateType) {
-            if (this._tickData && this._tickData.length && (updateType === 'force' || !isEqual(this._scale.range(), [0, 1]))) {
+            if (updateType === 'force' && (!this._tickData || !this._tickData.length)) {
+                eachSeries(this._regions, s => {
+                    var _a;
+                    (_a = s.getViewData()) === null || _a === void 0 ? void 0 : _a.reRunAllTransform();
+                }, {
+                    userId: this._seriesUserId,
+                    specIndex: this._seriesIndex
+                });
+            }
+            else if (this._tickData &&
+                this._tickData.length &&
+                (updateType === 'force' || !isEqual(this._scale.range(), [0, 1]))) {
                 this._tickData.forEach(tickData => {
                     tickData.getDataView().reRunAllTransform();
                     tickData.updateData();
@@ -65947,6 +65883,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         getOrient() {
             return this._orient;
         }
+        getDefaultInteractive() {
+            return true;
+        }
         set autoIndentOnce(v) {
             this._autoIndentOnce = v;
         }
@@ -69772,12 +69711,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const seriesMark = (_b = this._spec.seriesMark) !== null && _b !== void 0 ? _b : 'area';
             this._areaMark = this._createMark(AreaSeries.mark.area, {
                 groupKey: this._seriesField,
-                defaultMorphElementKey: this.getDimensionField()[0],
-                progressive,
                 isSeriesMark: isAreaVisible && seriesMark !== 'point',
-                customShape: areaSpec.customShape,
                 stateSort: areaSpec.stateSort
-            });
+            }, Object.assign(Object.assign({}, progressive), { morphElementKey: this.getDimensionField()[0], setCustomizedShape: areaSpec.customShape }));
             this.initSymbolMark(progressive, seriesMark === 'point');
         }
         initMarkStyle() {
@@ -70175,31 +70111,33 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initMark() {
             var _a, _b;
-            const progressive = {
+            this._initBarBackgroundMark();
+            this._barMark = this._createMark(Object.assign(Object.assign({}, BarSeries.mark.bar), { name: this._barMarkName, type: this._barMarkType }), {
+                groupKey: this._seriesField,
+                isSeriesMark: true,
+                stateSort: (_a = this._spec.bar) === null || _a === void 0 ? void 0 : _a.stateSort
+            }, {
                 progressiveStep: this._spec.progressiveStep,
                 progressiveThreshold: this._spec.progressiveThreshold,
                 large: this._spec.large,
-                largeThreshold: this._spec.largeThreshold
-            };
-            this._initBarBackgroundMark(progressive);
-            this._barMark = this._createMark(Object.assign(Object.assign({}, BarSeries.mark.bar), { name: this._barMarkName, type: this._barMarkType }), {
+                largeThreshold: this._spec.largeThreshold,
+                morphElementKey: this.getDimensionField()[0],
                 morph: shouldMarkDoMorph(this._spec, this._barMarkName),
-                defaultMorphElementKey: this.getDimensionField()[0],
-                groupKey: this._seriesField,
-                isSeriesMark: true,
-                progressive,
-                customShape: (_a = this._spec.bar) === null || _a === void 0 ? void 0 : _a.customShape,
-                stateSort: (_b = this._spec.bar) === null || _b === void 0 ? void 0 : _b.stateSort
+                setCustomizedShape: (_b = this._spec.bar) === null || _b === void 0 ? void 0 : _b.customShape
             });
         }
-        _initBarBackgroundMark(progressive) {
+        _initBarBackgroundMark() {
             if (this._spec.barBackground && this._spec.barBackground.visible) {
                 this._barBackgroundMark = this._createMark(BarSeries.mark.barBackground, {
                     dataView: this._barBackgroundViewData.getDataView(),
                     dataProductId: this._barBackgroundViewData.getProductId(),
-                    progressive,
-                    customShape: this._spec.barBackground.customShape,
                     stateSort: this._spec.barBackground.stateSort
+                }, {
+                    setCustomizedShape: this._spec.barBackground.customShape,
+                    progressiveStep: this._spec.progressiveStep,
+                    progressiveThreshold: this._spec.progressiveThreshold,
+                    large: this._spec.large,
+                    largeThreshold: this._spec.largeThreshold
                 });
             }
         }
@@ -70452,51 +70390,54 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             const xScale = (_b = (_a = this._xAxisHelper) === null || _a === void 0 ? void 0 : _a.getScale) === null || _b === void 0 ? void 0 : _b.call(_a, 0);
             const yScale = (_d = (_c = this._yAxisHelper) === null || _c === void 0 ? void 0 : _c.getScale) === null || _d === void 0 ? void 0 : _d.call(_c, 0);
-            this._barMark.setClip(() => {
-                const rectPaths = [];
-                this._forEachStackGroup(node => {
-                    let min = Infinity;
-                    let max = -Infinity;
-                    let hasPercent = false;
-                    let minPercent = Infinity;
-                    let maxPercent = -Infinity;
-                    node.values.forEach(datum => {
-                        const start = datum[STACK_FIELD_START];
-                        const end = datum[STACK_FIELD_END];
-                        const startPercent = datum[STACK_FIELD_START_PERCENT];
-                        const endPercent = datum[STACK_FIELD_END_PERCENT];
-                        min = Math.min(min, start, end);
-                        max = Math.max(max, start, end);
-                        if (isValid$1(startPercent) && isValid$1(endPercent)) {
-                            hasPercent = true;
-                            minPercent = Math.min(minPercent, startPercent, endPercent);
-                            maxPercent = Math.max(maxPercent, startPercent, endPercent);
-                        }
+            this._barMark.setMarkConfig({
+                clip: true,
+                clipPath: () => {
+                    const rectPaths = [];
+                    this._forEachStackGroup(node => {
+                        let min = Infinity;
+                        let max = -Infinity;
+                        let hasPercent = false;
+                        let minPercent = Infinity;
+                        let maxPercent = -Infinity;
+                        node.values.forEach(datum => {
+                            const start = datum[STACK_FIELD_START];
+                            const end = datum[STACK_FIELD_END];
+                            const startPercent = datum[STACK_FIELD_START_PERCENT];
+                            const endPercent = datum[STACK_FIELD_END_PERCENT];
+                            min = Math.min(min, start, end);
+                            max = Math.max(max, start, end);
+                            if (isValid$1(startPercent) && isValid$1(endPercent)) {
+                                hasPercent = true;
+                                minPercent = Math.min(minPercent, startPercent, endPercent);
+                                maxPercent = Math.max(maxPercent, startPercent, endPercent);
+                            }
+                        });
+                        const mockDatum = Object.assign(Object.assign(Object.assign({}, node.values[0]), { [STACK_FIELD_START]: min, [STACK_FIELD_END]: max }), (hasPercent
+                            ? {
+                                [STACK_FIELD_START_PERCENT]: minPercent,
+                                [STACK_FIELD_END_PERCENT]: maxPercent
+                            }
+                            : undefined));
+                        const rectAttr = this.direction === "horizontal"
+                            ? {
+                                x: this._getBarXStart(mockDatum, xScale),
+                                x1: this._getBarXEnd(mockDatum, xScale),
+                                y: this._getPosition(this.direction, mockDatum),
+                                height: this._getBarWidth(this._yAxisHelper)
+                            }
+                            : {
+                                y: this._getBarYStart(mockDatum, yScale),
+                                y1: this._getBarYEnd(mockDatum, yScale),
+                                x: this._getPosition(this.direction, mockDatum),
+                                width: this._getBarWidth(this._xAxisHelper)
+                            };
+                        rectPaths.push(createRect(Object.assign(Object.assign({}, rectAttr), { cornerRadius: isFunction$1(this._spec.stackCornerRadius)
+                                ? this._spec.stackCornerRadius(rectAttr, mockDatum, this._markAttributeContext)
+                                : this._spec.stackCornerRadius, fill: true })));
                     });
-                    const mockDatum = Object.assign(Object.assign(Object.assign({}, node.values[0]), { [STACK_FIELD_START]: min, [STACK_FIELD_END]: max }), (hasPercent
-                        ? {
-                            [STACK_FIELD_START_PERCENT]: minPercent,
-                            [STACK_FIELD_END_PERCENT]: maxPercent
-                        }
-                        : undefined));
-                    const rectAttr = this.direction === "horizontal"
-                        ? {
-                            x: this._getBarXStart(mockDatum, xScale),
-                            x1: this._getBarXEnd(mockDatum, xScale),
-                            y: this._getPosition(this.direction, mockDatum),
-                            height: this._getBarWidth(this._yAxisHelper)
-                        }
-                        : {
-                            y: this._getBarYStart(mockDatum, yScale),
-                            y1: this._getBarYEnd(mockDatum, yScale),
-                            x: this._getPosition(this.direction, mockDatum),
-                            width: this._getBarWidth(this._xAxisHelper)
-                        };
-                    rectPaths.push(createRect(Object.assign(Object.assign({}, rectAttr), { cornerRadius: isFunction$1(this._spec.stackCornerRadius)
-                            ? this._spec.stackCornerRadius(rectAttr, mockDatum, this._markAttributeContext)
-                            : this._spec.stackCornerRadius, fill: true })));
-                });
-                return rectPaths;
+                    return rectPaths;
+                }
             });
         }
         initLinearRectMarkStyle() {
@@ -70968,20 +70909,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initMark() {
             var _a, _b;
-            const progressive = {
+            this._symbolMark = this._createMark(ScatterSeries.mark.point, {
+                groupKey: this._seriesField,
+                isSeriesMark: true,
+                stateSort: (_a = this._spec.point) === null || _a === void 0 ? void 0 : _a.stateSort
+            }, {
                 progressiveStep: this._spec.progressiveStep,
                 progressiveThreshold: this._spec.progressiveThreshold,
                 large: this._spec.large,
-                largeThreshold: this._spec.largeThreshold
-            };
-            this._symbolMark = this._createMark(ScatterSeries.mark.point, {
+                largeThreshold: this._spec.largeThreshold,
                 morph: shouldMarkDoMorph(this._spec, ScatterSeries.mark.point.name),
-                defaultMorphElementKey: this.getDimensionField()[0],
-                groupKey: this._seriesField,
-                progressive,
-                isSeriesMark: true,
-                customShape: (_a = this._spec.point) === null || _a === void 0 ? void 0 : _a.customShape,
-                stateSort: (_b = this._spec.point) === null || _b === void 0 ? void 0 : _b.stateSort
+                morphElementKey: this.getDimensionField()[0],
+                setCustomizedShape: (_b = this._spec.point) === null || _b === void 0 ? void 0 : _b.customShape
             });
         }
         initMarkStyle() {
@@ -72273,6 +72212,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 });
             });
         }
+        _compareSpec(spec, prevSpec) {
+            const result = super._compareSpec(spec, prevSpec);
+            if (!result.reMake) {
+                result.reMake = ['roam', 'longitudeField', 'latitudeField', 'projection', 'zoomLimit'].some(k => {
+                    return !isEqual(prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec[k], spec[k]);
+                });
+            }
+            return result;
+        }
         release() {
             super.release();
             this._centerCache && this._centerCache.clear();
@@ -72370,13 +72318,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initMark() {
             this._pathMark = this._createMark(MapSeries.mark.area, {
-                morph: shouldMarkDoMorph(this._spec, MapSeries.mark.area.name),
-                defaultMorphElementKey: this.getDimensionField()[0],
                 groupKey: this.getDimensionField()[0],
                 isSeriesMark: true,
                 skipBeforeLayouted: true,
                 dataView: this._mapViewData.getDataView(),
                 dataProductId: this._mapViewData.getProductId()
+            }, {
+                morph: shouldMarkDoMorph(this._spec, MapSeries.mark.area.name),
+                morphElementKey: this.getDimensionField()[0]
             });
         }
         initMarkStyle() {
@@ -73412,8 +73361,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             super.initMark();
             const leaderLine = this._createMark(WaterfallSeries.mark.leaderLine, {
                 key: 'index',
-                customShape: (_a = this._spec.leaderLine) === null || _a === void 0 ? void 0 : _a.customShape,
-                stateSort: (_b = this._spec.leaderLine) === null || _b === void 0 ? void 0 : _b.stateSort
+                stateSort: (_a = this._spec.leaderLine) === null || _a === void 0 ? void 0 : _a.stateSort
+            }, {
+                setCustomizedShape: (_b = this._spec.leaderLine) === null || _b === void 0 ? void 0 : _b.customShape
             });
             if (leaderLine) {
                 this._leaderLineMark = leaderLine;
@@ -73805,15 +73755,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 largeThreshold: this._spec.largeThreshold
             };
             this._boxPlotMark = this._createMark(BoxPlotSeries.mark.boxPlot, {
-                isSeriesMark: true,
-                progressive
-            });
+                isSeriesMark: true
+            }, progressive);
             this._outlierMark = this._createMark(BoxPlotSeries.mark.outlier, {
-                progressive,
                 key: DEFAULT_DATA_INDEX,
                 dataView: this._outlierDataView.getDataView(),
                 dataProductId: this._outlierDataView.getProductId()
-            });
+            }, progressive);
         }
         initMarkStyle() {
             var _a, _b, _c, _d, _e;
@@ -74257,12 +74205,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._initBarBackgroundMark();
             const labelPosition = (_a = this._spec.label) === null || _a === void 0 ? void 0 : _a.position;
             this._barMark = this._createMark(RangeColumnSeries.mark.bar, {
-                morph: shouldMarkDoMorph(this._spec, RangeColumnSeries.mark.bar.name),
-                defaultMorphElementKey: this.getDimensionField()[0],
                 groupKey: this._seriesField,
                 isSeriesMark: true,
-                customShape: (_b = this._spec.bar) === null || _b === void 0 ? void 0 : _b.customShape,
-                stateSort: (_c = this._spec.bar) === null || _c === void 0 ? void 0 : _c.stateSort
+                stateSort: (_b = this._spec.bar) === null || _b === void 0 ? void 0 : _b.stateSort
+            }, {
+                setCustomizedShape: (_c = this._spec.bar) === null || _c === void 0 ? void 0 : _c.customShape,
+                morph: shouldMarkDoMorph(this._spec, RangeColumnSeries.mark.bar.name),
+                morphElementKey: this.getDimensionField()[0]
             });
             if (((_d = this._spec.label) === null || _d === void 0 ? void 0 : _d.visible) !== false && labelPosition === "bothEnd") {
                 if (((_f = (_e = this._spec.label) === null || _e === void 0 ? void 0 : _e.minLabel) === null || _f === void 0 ? void 0 : _f.visible) !== false) {
@@ -74449,11 +74398,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a;
             const { customShape, stateSort } = (_a = this._spec.area) !== null && _a !== void 0 ? _a : {};
             this._areaMark = this._createMark(RangeAreaSeries.mark.area, {
-                defaultMorphElementKey: this.getDimensionField()[0],
                 groupKey: this._seriesField,
                 isSeriesMark: true,
-                customShape,
                 stateSort
+            }, {
+                setCustomizedShape: customShape,
+                morphElementKey: this.getDimensionField()[0]
             });
         }
         initMarkStyle() {
@@ -75118,11 +75068,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._pieMarkName = "pie";
             this._pieMarkType = "arc";
             this.getCenter = () => {
-                var _a, _b, _c, _d;
-                const { width, height } = this._region.getLayoutRect();
+                var _a, _b;
+                const layoutRect = this._region.getLayoutRect();
                 return {
-                    x: (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.centerX) !== null && _b !== void 0 ? _b : width / 2,
-                    y: (_d = (_c = this._spec) === null || _c === void 0 ? void 0 : _c.centerY) !== null && _d !== void 0 ? _d : height / 2
+                    x: calcLayoutNumber((_a = this._spec) === null || _a === void 0 ? void 0 : _a.centerX, layoutRect.width, layoutRect, layoutRect.width / 2),
+                    y: calcLayoutNumber((_b = this._spec) === null || _b === void 0 ? void 0 : _b.centerY, layoutRect.height, layoutRect, layoutRect.height / 2)
                 };
             };
             this._startAngle = POLAR_START_RADIAN;
@@ -75211,14 +75161,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         initMark() {
             var _a, _b;
             this._pieMark = this._createMark(Object.assign(Object.assign({}, BasePieSeries.mark.pie), { name: this._pieMarkName, type: this._pieMarkType }), {
-                morph: shouldMarkDoMorph(this._spec, this._pieMarkName),
-                defaultMorphElementKey: this._seriesField,
                 key: DEFAULT_DATA_KEY,
                 groupKey: this._seriesField,
                 skipBeforeLayouted: true,
                 isSeriesMark: true,
-                customShape: (_a = this._spec.pie) === null || _a === void 0 ? void 0 : _a.customShape,
-                stateSort: (_b = this._spec.pie) === null || _b === void 0 ? void 0 : _b.stateSort
+                stateSort: (_a = this._spec.pie) === null || _a === void 0 ? void 0 : _a.stateSort
+            }, {
+                setCustomizedShape: (_b = this._spec.pie) === null || _b === void 0 ? void 0 : _b.customShape,
+                morph: shouldMarkDoMorph(this._spec, this._pieMarkName),
+                morphElementKey: this._seriesField
             });
             if (this._showEmptyCircle) {
                 this._emptyArcMark = this._createMark({
@@ -75526,7 +75477,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             super.initLabelMarkStyle(textMark);
             const params3d = {};
-            textMark.setSupport3d(true);
+            textMark.setMarkConfig({ support3d: true });
             params3d.beta = this._angle3d;
             params3d.anchor3d = (datum) => {
                 const { x, y } = this.getCenter();
@@ -75675,6 +75626,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         getOrient() {
             return this._orient;
         }
+        getDefaultInteractive() {
+            return this._orient !== 'angle';
+        }
         getGroupScales() {
             return this._groupScales;
         }
@@ -75948,7 +75902,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 innerRadius, startAngle: this._startAngle, endAngle: this._endAngle, sides: ((_c = (_b = (_a = this._getRelatedAxis(this._option.radiusAxisIndex)) === null || _a === void 0 ? void 0 : _a.getSpec()) === null || _b === void 0 ? void 0 : _b.grid) === null || _c === void 0 ? void 0 : _c.smooth)
                     ? undefined
                     : this.getScale().domain().length });
-            const attrs = Object.assign(Object.assign(Object.assign({}, commonAttrs), this.getRefLayoutRect()), { title: {
+            const attrs = Object.assign(Object.assign({}, commonAttrs), { size: this.getRefLayoutRect(), title: {
                     text: this._spec.title.text || this._dataFieldText
                 }, items, orient: 'angle' });
             if (this._spec.grid.visible) {
@@ -76161,12 +76115,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         initRoseMark() {
             var _a, _b;
             this._roseMark = this._createMark(RoseSeries.mark.rose, {
-                morph: shouldMarkDoMorph(this._spec, RoseSeries.mark.rose.name),
-                defaultMorphElementKey: this.getDimensionField()[0],
                 groupKey: this._seriesField,
                 isSeriesMark: true,
-                customShape: (_a = this._spec.rose) === null || _a === void 0 ? void 0 : _a.customShape,
-                stateSort: (_b = this._spec.rose) === null || _b === void 0 ? void 0 : _b.stateSort
+                stateSort: (_a = this._spec.rose) === null || _a === void 0 ? void 0 : _a.stateSort
+            }, {
+                setCustomizedShape: (_b = this._spec.rose) === null || _b === void 0 ? void 0 : _b.customShape,
+                morph: shouldMarkDoMorph(this._spec, RoseSeries.mark.rose.name),
+                morphElementKey: this.getDimensionField()[0]
             });
         }
         getRoseAngle() {
@@ -76515,11 +76470,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a, _b;
             this._areaMark = this._createMark(RadarSeries.mark.area, {
                 groupKey: this._seriesField,
-                progressive,
                 isSeriesMark,
-                customShape: (_a = this._spec.area) === null || _a === void 0 ? void 0 : _a.customShape,
-                stateSort: (_b = this._spec.area) === null || _b === void 0 ? void 0 : _b.stateSort
-            });
+                stateSort: (_a = this._spec.area) === null || _a === void 0 ? void 0 : _a.stateSort
+            }, Object.assign(Object.assign({}, progressive), { setCustomizedShape: (_b = this._spec.area) === null || _b === void 0 ? void 0 : _b.customShape }));
         }
         initAreaMarkStyle() {
             const areaMark = this._areaMark;
@@ -76839,17 +76792,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     x: -this._spec.leftAppendPadding,
                     y: 0,
                     width: 10000,
-                    height: this._spec.clipHeight,
-                    clip: true
+                    height: this._spec.clipHeight
                 }, 'normal', AttributeLevel.Series);
-                clipMark.setInteractive(false);
+                clipMark.setMarkConfig({ interactive: false, clip: true });
             }
             const containerMark = this._containerMark;
             if (containerMark) {
                 this.setMarkStyle(containerMark, {
                     x: this._spec.leftAppendPadding
                 }, 'normal', AttributeLevel.Series);
-                containerMark.setInteractive(false);
+                containerMark.setMarkConfig({ interactive: false });
             }
             const gridBackgroundMark = this._gridBackgroundMark;
             if (gridBackgroundMark) {
@@ -77201,10 +77153,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     x: -this._spec.leftAppendPadding,
                     y: 0,
                     width: 10000,
-                    height: this._spec.clipHeight,
-                    clip: true
+                    height: this._spec.clipHeight
                 }, 'normal', AttributeLevel.Series);
-                clipMark.setInteractive(false);
+                clipMark.setMarkConfig({ interactive: false, clip: true });
             }
             const containerMark = this._containerMark;
             if (containerMark) {
@@ -77212,7 +77163,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     x: this._spec.leftAppendPadding,
                     width: this.getLayoutRect().width
                 }, 'normal', AttributeLevel.Series);
-                containerMark.setInteractive(false);
+                containerMark.setMarkConfig({ interactive: false });
             }
             const linkMark = this._linkMark;
             if (linkMark) {
@@ -77510,38 +77461,41 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _initArcGroupMarkStyle() {
             const groupMark = this._arcGroupMark;
-            groupMark.setZIndex(this.layoutZIndex);
             groupMark.created();
             this.setMarkStyle(groupMark, {
                 x: 0,
                 y: 0
             }, 'normal', AttributeLevel.Series);
-            groupMark.setClip(() => {
-                const axis = this._getAngleAxis();
-                if (this._isTickMaskVisible(axis)) {
-                    const { tickMask } = this._spec;
-                    const { angle, offsetAngle, style = {} } = tickMask;
-                    const subTickData = this._getAngleAxisSubTickData(axis);
-                    const { x, y } = this.angleAxisHelper.center();
-                    const radius = this._computeLayoutRadius();
-                    const markStyle = style;
-                    return subTickData.map(({ value }) => {
-                        const pos = this.angleAxisHelper.dataToPosition([value]) + degreeToRadian(offsetAngle);
-                        const angleUnit = degreeToRadian(angle) / 2;
-                        return createArc(Object.assign(Object.assign({}, markStyle), { x,
-                            y, startAngle: pos - angleUnit, endAngle: pos + angleUnit, innerRadius: radius * this._innerRadius, outerRadius: radius * this._outerRadius, fill: true }));
-                    });
+            this._arcGroupMark.setMarkConfig({
+                interactive: false,
+                zIndex: this.layoutZIndex,
+                clip: true,
+                clipPath: () => {
+                    const axis = this._getAngleAxis();
+                    if (this._isTickMaskVisible(axis)) {
+                        const { tickMask } = this._spec;
+                        const { angle, offsetAngle, style = {} } = tickMask;
+                        const subTickData = this._getAngleAxisSubTickData(axis);
+                        const { x, y } = this.angleAxisHelper.center();
+                        const radius = this._computeLayoutRadius();
+                        const markStyle = style;
+                        return subTickData.map(({ value }) => {
+                            const pos = this.angleAxisHelper.dataToPosition([value]) + degreeToRadian(offsetAngle);
+                            const angleUnit = degreeToRadian(angle) / 2;
+                            return createArc(Object.assign(Object.assign({}, markStyle), { x,
+                                y, startAngle: pos - angleUnit, endAngle: pos + angleUnit, innerRadius: radius * this._innerRadius, outerRadius: radius * this._outerRadius, fill: true }));
+                        });
+                    }
+                    const { width, height } = this.getLayoutRect();
+                    return [
+                        createRect({
+                            width,
+                            height,
+                            fill: true
+                        })
+                    ];
                 }
-                const { width, height } = this.getLayoutRect();
-                return [
-                    createRect({
-                        width,
-                        height,
-                        fill: true
-                    })
-                ];
             });
-            this._arcGroupMark.setInteractive(false);
         }
         _getAngleAxis() {
             if (!this.angleAxisHelper) {
@@ -77677,8 +77631,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._progressMark = this._createMark(CircularProgressSeries.mark.progress, {
                 parent: this._arcGroupMark,
                 isSeriesMark: true,
-                customShape: (_a = this._spec.progress) === null || _a === void 0 ? void 0 : _a.customShape,
-                stateSort: (_b = this._spec.progress) === null || _b === void 0 ? void 0 : _b.stateSort
+                stateSort: (_a = this._spec.progress) === null || _a === void 0 ? void 0 : _a.stateSort
+            }, {
+                setCustomizedShape: (_b = this._spec.progress) === null || _b === void 0 ? void 0 : _b.customShape
             });
             return this._progressMark;
         }
@@ -77720,8 +77675,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a, _b;
             this._trackMark = this._createMark(CircularProgressSeries.mark.track, {
                 parent: this._arcGroupMark,
-                customShape: (_a = this._spec.track) === null || _a === void 0 ? void 0 : _a.customShape,
-                stateSort: (_b = this._spec.track) === null || _b === void 0 ? void 0 : _b.stateSort
+                stateSort: (_a = this._spec.track) === null || _a === void 0 ? void 0 : _a.stateSort
+            }, {
+                setCustomizedShape: (_b = this._spec.track) === null || _b === void 0 ? void 0 : _b.customShape
             });
             return this._trackMark;
         }
@@ -77914,8 +77870,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a, _b, _c;
             this._progressMark = this._createMark(LinearProgressSeries.mark.progress, {
                 isSeriesMark: true,
-                customShape: (_b = (_a = this._spec.progress) === null || _a === void 0 ? void 0 : _a.customShape) !== null && _b !== void 0 ? _b : this._defaultProgressCustomShape,
-                stateSort: (_c = this._spec.progress) === null || _c === void 0 ? void 0 : _c.stateSort
+                stateSort: (_a = this._spec.progress) === null || _a === void 0 ? void 0 : _a.stateSort
+            }, {
+                setCustomizedShape: (_c = (_b = this._spec.progress) === null || _b === void 0 ? void 0 : _b.customShape) !== null && _c !== void 0 ? _c : this._defaultProgressCustomShape
             });
             return this._progressMark;
         }
@@ -77964,8 +77921,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _initTrackMark() {
             var _a, _b;
             this._trackMark = this._createMark(LinearProgressSeries.mark.track, {
-                customShape: (_a = this._spec.track) === null || _a === void 0 ? void 0 : _a.customShape,
-                stateSort: (_b = this._spec.track) === null || _b === void 0 ? void 0 : _b.stateSort
+                stateSort: (_a = this._spec.track) === null || _a === void 0 ? void 0 : _a.stateSort
+            }, {
+                setCustomizedShape: (_b = this._spec.track) === null || _b === void 0 ? void 0 : _b.customShape
             });
             return this._trackMark;
         }
@@ -78154,9 +78112,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             this._wordMark = this._createMark(BaseWordCloudSeries.mark.word, {
                 key: DEFAULT_DATA_KEY,
-                defaultMorphElementKey: this._seriesField,
                 groupKey: this._seriesField,
                 isSeriesMark: true
+            }, {
+                morphElementKey: this._seriesField
             });
         }
         initMarkStyle() {
@@ -80350,8 +80309,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         initMark() {
             this._wordMark = this._createMark(BaseWordCloudSeries.mark.word, {
                 groupKey: this._seriesField,
-                support3d: true,
                 isSeriesMark: true
+            }, {
+                support3d: true
             });
         }
         initMarkStyle() {
@@ -80624,13 +80584,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
             this._funnelMark = this._createMark(Object.assign(Object.assign({}, FunnelSeries.mark.funnel), { name: this._funnelMarkName, type: this._funnelMarkType }), {
                 themeSpec: (_a = this._theme) === null || _a === void 0 ? void 0 : _a.funnel,
-                morph: shouldMarkDoMorph(this._spec, this._funnelMarkName),
-                defaultMorphElementKey: this._seriesField,
                 groupKey: this._seriesField,
                 isSeriesMark: true,
-                customShape: (_b = this._spec.funnel) === null || _b === void 0 ? void 0 : _b.customShape,
-                stateSort: (_c = this._spec.funnel) === null || _c === void 0 ? void 0 : _c.stateSort,
+                stateSort: (_b = this._spec.funnel) === null || _b === void 0 ? void 0 : _b.stateSort,
                 noSeparateStyle: true
+            }, {
+                setCustomizedShape: (_c = this._spec.funnel) === null || _c === void 0 ? void 0 : _c.customShape,
+                morph: shouldMarkDoMorph(this._spec, this._funnelMarkName),
+                morphElementKey: this._seriesField
             });
             if (this._spec.isTransform) {
                 this._funnelTransformMark = this._createMark(Object.assign(Object.assign({}, FunnelSeries.mark.transform), { name: this._transformMarkName, type: this._transformMarkType }), {
@@ -80638,9 +80599,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     skipBeforeLayouted: false,
                     dataView: this._viewDataTransform.getDataView(),
                     dataProductId: this._viewDataTransform.getProductId(),
-                    customShape: (_e = this._spec.transform) === null || _e === void 0 ? void 0 : _e.customShape,
-                    stateSort: (_f = this._spec.transform) === null || _f === void 0 ? void 0 : _f.stateSort,
+                    stateSort: (_e = this._spec.transform) === null || _e === void 0 ? void 0 : _e.stateSort,
                     noSeparateStyle: true
+                }, {
+                    setCustomizedShape: (_f = this._spec.transform) === null || _f === void 0 ? void 0 : _f.customShape
                 });
             }
             if ((_h = (_g = this._spec) === null || _g === void 0 ? void 0 : _g.outerLabel) === null || _h === void 0 ? void 0 : _h.visible) {
@@ -81205,7 +81167,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._funnelMark = this._createMark(Object.assign(Object.assign({}, Funnel3dSeries.mark.funnel3d), { name: this._funnelMarkName, type: this._funnelMarkType }), {
                 themeSpec: (_a = this._theme) === null || _a === void 0 ? void 0 : _a.funnel3d,
                 key: this._seriesField,
-                isSeriesMark: true,
+                isSeriesMark: true
+            }, {
                 support3d: true
             });
             if (this._spec.isTransform) {
@@ -82425,8 +82388,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             const sunburstMark = this._createMark(SunburstSeries.mark.sunburst, {
                 isSeriesMark: true,
-                customShape: (_a = this._spec.sunburst) === null || _a === void 0 ? void 0 : _a.customShape,
-                stateSort: (_b = this._spec.sunburst) === null || _b === void 0 ? void 0 : _b.stateSort
+                stateSort: (_a = this._spec.sunburst) === null || _a === void 0 ? void 0 : _a.stateSort
+            }, {
+                setCustomizedShape: (_b = this._spec.sunburst) === null || _b === void 0 ? void 0 : _b.customShape
             });
             this._sunburstMark = sunburstMark;
         }
@@ -82713,8 +82677,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return;
             }
             const circlePacking = this._createMark(CirclePackingSeries.mark.circlePacking, {
-                isSeriesMark: true,
-                customShape: (_b = this._spec.circlePacking) === null || _b === void 0 ? void 0 : _b.customShape
+                isSeriesMark: true
+            }, {
+                setCustomizedShape: (_b = this._spec.circlePacking) === null || _b === void 0 ? void 0 : _b.customShape
             });
             this._circlePackingMark = circlePacking;
         }
@@ -84211,18 +84176,20 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 isSeriesMark: true,
                 dataView: this._nodesSeriesData.getDataView(),
                 dataProductId: this._nodesSeriesData.getProductId(),
-                customShape: (_a = this._spec.node) === null || _a === void 0 ? void 0 : _a.customShape,
-                stateSort: (_b = this._spec.node) === null || _b === void 0 ? void 0 : _b.stateSort
+                stateSort: (_a = this._spec.node) === null || _a === void 0 ? void 0 : _a.stateSort
+            }, {
+                setCustomizedShape: (_b = this._spec.node) === null || _b === void 0 ? void 0 : _b.customShape
             });
             if (nodeMark) {
-                nodeMark.setZIndex(this._nodeLayoutZIndex);
+                nodeMark.setMarkConfig({ zIndex: this._nodeLayoutZIndex });
                 this._nodeMark = nodeMark;
             }
             const linkMark = this._createMark(SankeySeries.mark.link, {
                 dataView: this._linksSeriesData.getDataView(),
                 dataProductId: this._linksSeriesData.getProductId(),
-                customShape: (_c = this._spec.link) === null || _c === void 0 ? void 0 : _c.customShape,
-                stateSort: (_d = this._spec.link) === null || _d === void 0 ? void 0 : _d.stateSort
+                stateSort: (_c = this._spec.link) === null || _c === void 0 ? void 0 : _c.stateSort
+            }, {
+                setCustomizedShape: (_d = this._spec.link) === null || _d === void 0 ? void 0 : _d.customShape
             });
             if (linkMark) {
                 this._linkMark = linkMark;
@@ -84311,7 +84278,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     maxLineWidth: labelSpec.limit
                 });
             }
-            labelMark.setZIndex(this._labelLayoutZIndex);
+            labelMark.setMarkConfig({ zIndex: this._labelLayoutZIndex });
         }
         _createText(datum, labelSpec) {
             if (isNil$1(datum) || isNil$1(datum.datum)) {
@@ -84805,8 +84772,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a, _b, _c, _d;
             const nonLeafMark = this._createMark(TreemapSeries.mark.nonLeaf, {
                 isSeriesMark: true,
-                customShape: (_a = this._spec.nonLeaf) === null || _a === void 0 ? void 0 : _a.customShape,
-                stateSort: (_b = this._spec.nonLeaf) === null || _b === void 0 ? void 0 : _b.stateSort
+                stateSort: (_a = this._spec.nonLeaf) === null || _a === void 0 ? void 0 : _a.stateSort
+            }, {
+                setCustomizedShape: (_b = this._spec.nonLeaf) === null || _b === void 0 ? void 0 : _b.customShape
             });
             if (nonLeafMark) {
                 nonLeafMark.setTransform([
@@ -84821,8 +84789,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             const leafMark = this._createMark(TreemapSeries.mark.leaf, {
                 isSeriesMark: true,
-                customShape: (_c = this._spec.leaf) === null || _c === void 0 ? void 0 : _c.customShape,
-                stateSort: (_d = this._spec.leaf) === null || _d === void 0 ? void 0 : _d.stateSort
+                stateSort: (_c = this._spec.leaf) === null || _c === void 0 ? void 0 : _c.stateSort
+            }, {
+                setCustomizedShape: (_d = this._spec.leaf) === null || _d === void 0 ? void 0 : _d.customShape
             });
             if (leafMark) {
                 leafMark.setTransform([
@@ -85486,18 +85455,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 largeThreshold: this._spec.largeThreshold
             };
             this._cellMark = this._createMark(HeatmapSeries.mark.cell, {
-                morph: shouldMarkDoMorph(this._spec, HeatmapSeries.mark.cell.name),
-                defaultMorphElementKey: this.getDimensionField()[0],
                 isSeriesMark: true,
-                progressive,
-                customShape: (_a = this._spec.cell) === null || _a === void 0 ? void 0 : _a.customShape,
-                stateSort: (_b = this._spec.cell) === null || _b === void 0 ? void 0 : _b.stateSort
-            });
+                stateSort: (_a = this._spec.cell) === null || _a === void 0 ? void 0 : _a.stateSort
+            }, Object.assign(Object.assign({}, progressive), { setCustomizedShape: (_b = this._spec.cell) === null || _b === void 0 ? void 0 : _b.customShape, morph: shouldMarkDoMorph(this._spec, HeatmapSeries.mark.cell.name), morphElementKey: this.getDimensionField()[0] }));
             this._backgroundMark = this._createMark(HeatmapSeries.mark.cellBackground, {
-                progressive,
-                customShape: (_c = this._spec.cellBackground) === null || _c === void 0 ? void 0 : _c.customShape,
-                stateSort: (_d = this._spec.cellBackground) === null || _d === void 0 ? void 0 : _d.stateSort
-            });
+                stateSort: (_c = this._spec.cellBackground) === null || _c === void 0 ? void 0 : _c.stateSort
+            }, Object.assign(Object.assign({}, progressive), { setCustomizedShape: (_d = this._spec.cellBackground) === null || _d === void 0 ? void 0 : _d.customShape }));
         }
         initMarkStyle() {
             this.initCellMarkStyle();
@@ -85912,11 +85875,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 groupKey: this._seriesField,
                 isSeriesMark: true,
                 key: DEFAULT_DATA_INDEX,
-                customShape: (_a = this._spec.nodePoint) === null || _a === void 0 ? void 0 : _a.customShape,
-                stateSort: (_b = this._spec.nodePoint) === null || _b === void 0 ? void 0 : _b.stateSort
+                stateSort: (_a = this._spec.nodePoint) === null || _a === void 0 ? void 0 : _a.stateSort
+            }, {
+                setCustomizedShape: (_b = this._spec.nodePoint) === null || _b === void 0 ? void 0 : _b.customShape
             });
             if (nodePointMark) {
-                nodePointMark.setZIndex(LayoutZIndex.Node);
+                nodePointMark.setMarkConfig({ zIndex: LayoutZIndex.Node });
                 this._nodePointMark = nodePointMark;
             }
             const ripplePointMark = this._createMark(CorrelationSeries.mark.ripplePoint, {
@@ -85931,11 +85895,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 key: DEFAULT_DATA_INDEX,
                 dataView: this._centerSeriesData.getDataView(),
                 dataProductId: this._centerSeriesData.getProductId(),
-                customShape: (_c = this._spec.centerPoint) === null || _c === void 0 ? void 0 : _c.customShape,
-                stateSort: (_d = this._spec.centerPoint) === null || _d === void 0 ? void 0 : _d.stateSort
+                stateSort: (_c = this._spec.centerPoint) === null || _c === void 0 ? void 0 : _c.stateSort
+            }, {
+                setCustomizedShape: (_d = this._spec.centerPoint) === null || _d === void 0 ? void 0 : _d.customShape
             });
             if (centerPointMark) {
-                centerPointMark.setZIndex(LayoutZIndex.Node);
+                centerPointMark.setMarkConfig({ zIndex: LayoutZIndex.Node });
                 this._centerPointMark = centerPointMark;
             }
         }
@@ -86363,7 +86328,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _initLiquidOutlineMarkStyle() {
             const liquidOutlineMark = this._liquidOutlineMark;
-            liquidOutlineMark.setZIndex(this.layoutZIndex);
             liquidOutlineMark.created();
             this.setMarkStyle(liquidOutlineMark, {
                 stroke: this.getColorAttribute(),
@@ -86371,19 +86335,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 height: () => this._region.getLayoutRect().height,
                 path: () => this._getLiquidBackPath(true)
             }, 'normal', AttributeLevel.Series);
-            this._liquidOutlineMark.setInteractive(false);
+            this._liquidOutlineMark.setMarkConfig({ interactive: false, zIndex: this.layoutZIndex });
         }
         _initLiquidBackgroundMarkStyle() {
             const liquidBackgroundMark = this._liquidBackgroundMark;
-            liquidBackgroundMark.setZIndex(this.layoutZIndex);
             liquidBackgroundMark.created();
             this.setMarkStyle(liquidBackgroundMark, {
-                clip: true,
                 width: () => this._region.getLayoutRect().width,
                 height: () => this._region.getLayoutRect().height,
                 path: () => this._getLiquidBackPath()
             }, 'normal', AttributeLevel.Series);
-            this._liquidBackgroundMark.setInteractive(false);
+            this._liquidBackgroundMark.setMarkConfig({ interactive: false, zIndex: this.layoutZIndex, clip: true });
         }
         _initLiquidMarkStyle() {
             const liquidMark = this._liquidMark;
@@ -92819,7 +92781,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         if (this._auto) {
                             (_b = (_a = this._component) === null || _a === void 0 ? void 0 : _a.setStartAndEnd) === null || _b === void 0 ? void 0 : _b.call(_a, this._start, this._end);
                         }
-                        axis.effect.scaleUpdate();
+                        axis.effect.scaleUpdate({
+                            value: 'force'
+                        });
                     }
                     else {
                         eachSeries(this._regions, s => {
@@ -96488,13 +96452,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if (this._layoutRule === 'region') {
                     const component = this._createMark({ type: "component", name: `${region.getGroupMark().name}-label-component` }, {
                         componentType: 'label',
-                        noSeparateStyle: true,
+                        noSeparateStyle: true
+                    }, {
                         support3d: this._spec.support3d
                     });
                     if (component) {
                         component.setSkipBeforeLayouted(true);
                         if (regionLabelInfo[0] && isValid$1(regionLabelInfo[0].labelSpec.zIndex)) {
-                            component.setZIndex(regionLabelInfo[0].labelSpec.zIndex);
+                            component.setMarkConfig({ zIndex: regionLabelInfo[0].labelSpec.zIndex });
                         }
                         this._marks.addMark(component);
                         this._labelComponentMap.set(component, () => {
@@ -96506,12 +96471,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     regionLabelInfo.forEach((labelInfo, i) => {
                         const component = this._createMark({ type: "component", name: `${labelInfo.labelMark.name}-component` }, {
                             componentType: 'label',
-                            noSeparateStyle: true,
-                            support3d: labelInfo.baseMark.getSupport3d()
+                            noSeparateStyle: true
+                        }, {
+                            support3d: labelInfo.baseMark.getMarkConfig().support3d
                         });
                         if (component) {
                             if (isValid$1(labelInfo.labelSpec.zIndex)) {
-                                component.setZIndex(labelInfo.labelSpec.zIndex);
+                                component.setMarkConfig({ zIndex: labelInfo.labelSpec.zIndex });
                             }
                             component.setSkipBeforeLayouted(true);
                             this._marks.addMark(component);
@@ -96722,7 +96688,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const series = this._getSeries();
             const component = this._createMark({ type: "component", name: `${series.name}-total-label-component` }, {
                 componentType: 'label',
-                noSeparateStyle: true,
+                noSeparateStyle: true
+            }, {
                 support3d: this._spec.support3d
             });
             if (component) {