@visactor/vchart 1.12.9 → 1.12.10-alpha.0

package/build/index.js

@@ -45851,7 +45851,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 +57612,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 +58176,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 +58185,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 +59359,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;
-        }
-        getSupport3d() {
-            return this._support3d;
-        }
-        setSupport3d(support3d) {
-            this._support3d = support3d;
-        }
-        getInteractive() {
-            return this._interactive;
-        }
-        setInteractive(interactive) {
-            this._interactive = interactive;
+        getMarkConfig() {
+            return this._markConfig;
         }
-        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 +59418,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 +59432,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 +59597,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 +59703,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 +60082,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 +61574,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     registerVChartCore();
 
-    const version = "1.12.9";
+    const version = "1.12.10-alpha.0";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -62652,7 +62581,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 +63158,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 +63181,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 +63640,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 +63675,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 +64312,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 +64390,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 +64425,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 +64591,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
+                });
             }
         }
     }
@@ -65517,11 +65435,12 @@ 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);
                 }
@@ -65530,16 +65449,19 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     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: (_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,
+                        interactive: false
+                    });
                     this._marks.addMark(gridMark);
                     this._gridMark = gridMark;
                 }
                 if (isBoolean$1(this._spec.interactive)) {
-                    this._marks.forEach(m => m.setInteractive(this._spec.interactive));
+                    this._marks.forEach(m => m.setMarkConfig({ interactive: this._spec.interactive }));
                 }
                 if (this._option.animation !== false &&
                     get$1(this._option.getChart().getSpec(), 'animation') !== false &&
@@ -65671,7 +65593,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();
@@ -69772,12 +69705,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 +70105,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 +70384,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 +70903,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 +72206,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 +72312,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 +73355,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 +73749,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 +74199,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 +74392,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() {
@@ -75211,14 +75155,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 +75471,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();
@@ -76161,12 +76106,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 +76461,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 +76783,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 +77144,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 +77154,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 +77452,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 +77622,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 +77666,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 +77861,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 +77912,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 +78103,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 +80300,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 +80575,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 +80590,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 +81158,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 +82379,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 +82668,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 +84167,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 +84269,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 +84763,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 +84780,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 +85446,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 +85866,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 +85886,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 +86319,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 +86326,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;
@@ -91017,21 +90970,33 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return;
             }
             const trigger = array((_a = this._spec.trigger) !== null && _a !== void 0 ? _a : 'hover');
+            const triggerOff = array(this._spec.triggerOff);
             const mode = this._option.mode;
-            if (trigger.includes('hover')) {
-                this._handleMouseMove = this._throttle(this._getMouseMoveHandler(false));
-                this._mountEvent('pointermove', { source: 'chart' }, this._handleMouseMove);
-                if (isMobileLikeMode(mode) || isMiniAppLikeMode(mode)) {
-                    this._mountEvent('pointerdown', { source: 'chart' }, this._getMouseMoveHandler(false));
+            trigger.forEach(triggerType => {
+                var _a;
+                if (triggerType === 'hover') {
+                    this._handleMouseMove = this._throttle(this._getMouseMoveHandler(false));
+                    this._mountEvent('pointermove', { source: 'chart' }, this._handleMouseMove);
+                    if (isMobileLikeMode(mode) || isMiniAppLikeMode(mode)) {
+                        this._mountEvent('pointerdown', { source: 'chart' }, this._getMouseMoveHandler(false));
+                        this._mountEvent('pointerup', { source: 'window' }, this._getMouseOutHandler(true));
+                    }
+                    this._mountEvent('pointerleave', { source: 'chart' }, this._getMouseOutHandler(false));
+                }
+                else if (triggerType === 'click') {
+                    this._mountEvent('pointertap', { source: 'chart' }, this._getMouseMoveHandler(true));
                     this._mountEvent('pointerup', { source: 'window' }, this._getMouseOutHandler(true));
                 }
-                this._mountEvent('pointerleave', { source: 'chart' }, this._getMouseOutHandler(false));
-            }
-            if (trigger.includes('click')) {
-                this._mountEvent('pointertap', { source: 'chart' }, this._getMouseMoveHandler(true));
-                this._mountEvent('pointerup', { source: 'window' }, this._getMouseOutHandler(true));
-            }
-            else if (this._spec.lockAfterClick) {
+                else if (isObject$2(triggerType)) {
+                    this._mountEvent(triggerType.eventType, { source: (_a = triggerType.source) !== null && _a !== void 0 ? _a : 'chart', consume: triggerType.consume }, this._getMouseMoveHandler(true));
+                }
+            });
+            const offEvents = triggerOff.filter(entry => isObject$2(entry));
+            offEvents.forEach(entry => {
+                var _a, _b;
+                this._mountEvent(entry.eventType, { source: (_a = entry.source) !== null && _a !== void 0 ? _a : 'chart', consume: entry.consume }, this._getMouseOutHandler((_b = entry.checkOutside) !== null && _b !== void 0 ? _b : false));
+            });
+            if (!trigger.includes('click') && this._spec.lockAfterClick) {
                 this._mountEvent('pointertap', { source: 'chart' }, this._handleClickToLock);
             }
         }
@@ -92819,7 +92784,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 +96455,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 +96474,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 +96691,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) {