@visactor/vchart 1.4.2-beta.0 → 1.4.2

package/build/index.js

@@ -14723,10 +14723,10 @@
 	  lineEnd() {
 	    switch (this._point) {
 	      case 2:
-	        this.context.lineTo(this._x1, this._y1, !1 !== this._lastDefined2, this.lastPoint1);
+	        this.context.lineTo(this._x1, this._y1, !1 !== this._lastDefined1 && !1 !== this._lastDefined2, this.lastPoint1);
 	        break;
 	      case 3:
-	        point$2(this, this._t0, slope2(this, this._t0), !1 !== this._lastDefined2, this.lastPoint1);
+	        point$2(this, this._t0, slope2(this, this._t0), !1 !== this._lastDefined1 && !1 !== this._lastDefined2, this.lastPoint1);
 	    }
 	    (this._line || 0 !== this._line && 1 === this._point) && this.context.closePath(), this._line = 1 - this._line;
 	  }
@@ -57268,6 +57268,9 @@
 	        fontSize: THEME_CONSTANTS.defaultFontSize
 	    });
 	};
+	const measureText = (text, textSpec, option, useNaiveCanvas) => {
+	    return initTextMeasure(textSpec, option, useNaiveCanvas).measure(text);
+	};
 
 	function mergeFields(targetFields, mergeFields) {
 	    for (let i = 0; i < mergeFields.length; i++) {
@@ -59329,6 +59332,10 @@
 	    return resultA;
 	}
 
+	const VCHART_UTILS = {
+	    measureText
+	};
+
 	class VChart {
 	    static useChart(charts) {
 	        charts.forEach(c => Factory.registerChart(c.type, c));
@@ -60318,6 +60325,7 @@
 	VChart.globalConfig = {
 	    uniqueTooltip: true
 	};
+	VChart.Utils = VCHART_UTILS;
 
 	var STATE_VALUE_ENUM;
 	(function (STATE_VALUE_ENUM) {
@@ -61114,6 +61122,8 @@
 	    }
 	    onDataUpdate() {
 	    }
+	    beforeRelease() {
+	    }
 	    release() {
 	        var _a;
 	        this._releaseEvent();
@@ -63462,7 +63472,7 @@
 	VChart.useMark([ComponentMark, GroupMark, ImageMark]);
 	Factory.registerRegion('region', Region);
 	Factory.registerLayout('base', Layout);
-	const version = "1.4.2-beta.0";
+	const version = "1.4.2";
 	Logger.getInstance(LoggerLevel.Error);
 
 	const WordCloud3dAnimation = (params) => {
@@ -68423,6 +68433,9 @@
 	        (_d = (_c = this._option.performanceHook) === null || _c === void 0 ? void 0 : _c.afterComponentCompile) === null || _d === void 0 ? void 0 : _d.call(_c);
 	    }
 	    release() {
+	        [...this._components, ...this._regions, ...this._series].forEach(m => {
+	            m.beforeRelease();
+	        });
 	        super.release();
 	        this.clear();
 	        [...this._components, ...this._regions, ...this._series].forEach(m => {
@@ -71963,9 +71976,8 @@
 	    _buildMarkAttributeContext() {
 	        super._buildMarkAttributeContext();
 	        this._markAttributeContext.valueToPosition = this.valueToPosition.bind(this);
-	        this._markAttributeContext.getCenter = () => {
-	            return this.angleAxisHelper.center();
-	        };
+	        this._markAttributeContext.getCenter = () => this.angleAxisHelper.center();
+	        this._markAttributeContext.getLayoutRadius = () => this._computeLayoutRadius();
 	    }
 	    valueToPosition(angleValue, radiusValue) {
 	        if (isNil$1(angleValue) || isNil$1(radiusValue) || !this.angleAxisHelper || !this.radiusAxisHelper) {
@@ -77504,19 +77516,31 @@
 	        this._tooltipHelper = new SankeySeriesTooltipHelper(this);
 	    }
 	    getNodeOrdinalColorScale(item) {
-	        var _a, _b, _c, _d, _e, _f, _g, _h;
-	        const colorDomain = !isNil$1((_b = (_a = this._option.globalScale.getScale('color')) === null || _a === void 0 ? void 0 : _a.domain()) === null || _b === void 0 ? void 0 : _b[0])
+	        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+	        if (!isNil$1((_c = (_b = (_a = this._option) === null || _a === void 0 ? void 0 : _a.globalScale) === null || _b === void 0 ? void 0 : _b.getScale('color')) === null || _c === void 0 ? void 0 : _c._specified)) {
+	            const specified = this._option.globalScale.getScale('color')._specified;
+	            const colorDomain = [];
+	            const colorRange = [];
+	            for (const key in specified) {
+	                colorDomain.push(key);
+	                colorRange.push(specified[key]);
+	            }
+	            const ordinalScale = new ColorOrdinalScale();
+	            (_e = (_d = ordinalScale.domain(colorDomain)).range) === null || _e === void 0 ? void 0 : _e.call(_d, colorRange);
+	            return ordinalScale.scale(item);
+	        }
+	        const colorDomain = !isNil$1((_g = (_f = this._option.globalScale.getScale('color')) === null || _f === void 0 ? void 0 : _f.domain()) === null || _g === void 0 ? void 0 : _g[0])
 	            ? this._option.globalScale.getScale('color').domain()
 	            : this.getNodeList();
-	        let colorRange = (_d = (_c = this._option.globalScale.getScale('color')) === null || _c === void 0 ? void 0 : _c.range()) !== null && _d !== void 0 ? _d : getDataScheme(this._option.getTheme().colorScheme, this.type);
-	        if (((_e = this._option.globalScale.getScale('color')) === null || _e === void 0 ? void 0 : _e.domain().length) === 0 ||
+	        let colorRange = (_j = (_h = this._option.globalScale.getScale('color')) === null || _h === void 0 ? void 0 : _h.range()) !== null && _j !== void 0 ? _j : getDataScheme(this._option.getTheme().colorScheme, this.type);
+	        if (((_k = this._option.globalScale.getScale('color')) === null || _k === void 0 ? void 0 : _k.domain().length) === 0 ||
 	            isNil$1(this._option.globalScale.getScale('color').domain()[0])) {
 	            if (colorDomain.length > 10) {
-	                colorRange = (_f = getDataScheme(this._option.getTheme().colorScheme, this.type)[1]) === null || _f === void 0 ? void 0 : _f.scheme;
+	                colorRange = (_l = getDataScheme(this._option.getTheme().colorScheme, this.type)[1]) === null || _l === void 0 ? void 0 : _l.scheme;
 	            }
 	        }
 	        const ordinalScale = new ColorOrdinalScale();
-	        (_h = (_g = ordinalScale.domain(colorDomain)).range) === null || _h === void 0 ? void 0 : _h.call(_g, colorRange);
+	        (_o = (_m = ordinalScale.domain(colorDomain)).range) === null || _o === void 0 ? void 0 : _o.call(_m, colorRange);
 	        return ordinalScale.scale(item);
 	    }
 	    getNodeList() {
@@ -84001,23 +84025,23 @@
 	        return undefined;
 	    }
 	    _autoUpdate(rect) {
-	        var _a, _b, _c, _d;
+	        var _a, _b, _c, _d, _e;
 	        if (!this._auto) {
 	            return true;
 	        }
 	        const axisSpec = (_a = this._relatedAxisComponent) === null || _a === void 0 ? void 0 : _a.getSpec();
 	        const bandSizeResult = this._getAxisBandSize(axisSpec);
 	        const { bandSize, maxBandSize, minBandSize } = bandSizeResult !== null && bandSizeResult !== void 0 ? bandSizeResult : {};
-	        if ((rect === null || rect === void 0 ? void 0 : rect.height) === ((_b = this._cacheRect) === null || _b === void 0 ? void 0 : _b.height) &&
-	            (rect === null || rect === void 0 ? void 0 : rect.width) === ((_c = this._cacheRect) === null || _c === void 0 ? void 0 : _c.width) &&
-	            this._fixedBandSize === bandSize) {
-	            return this._cacheVisibility;
-	        }
-	        this._cacheRect = rect;
 	        let isShown = true;
 	        const scale = this._stateScale;
 	        scale.range(this._isHorizontal ? [0, rect.width] : axisSpec.inverse ? [0, rect.height] : [rect.height, 0]);
 	        if (isDiscrete(scale.type)) {
+	            if ((rect === null || rect === void 0 ? void 0 : rect.height) === ((_b = this._cacheRect) === null || _b === void 0 ? void 0 : _b.height) &&
+	                (rect === null || rect === void 0 ? void 0 : rect.width) === ((_c = this._cacheRect) === null || _c === void 0 ? void 0 : _c.width) &&
+	                this._fixedBandSize === bandSize) {
+	                return this._cacheVisibility;
+	            }
+	            this._cacheRect = rect;
 	            if (bandSizeResult) {
 	                if (this._start || this._end) {
 	                    scale.rangeFactor([this._start, this._end], true);
@@ -84052,6 +84076,17 @@
 	            this._start = start;
 	            this._end = end;
 	        }
+	        else {
+	            const [start, end] = (_e = scale.rangeFactor()) !== null && _e !== void 0 ? _e : [this._start, this._end];
+	            if (start === 0 && end === 1) {
+	                this.hide();
+	                isShown = false;
+	            }
+	            else {
+	                this.show();
+	                isShown = true;
+	            }
+	        }
 	        this.setStartAndEnd(this._start, this._end);
 	        this._cacheVisibility = isShown;
 	        return isShown;
@@ -84474,11 +84509,11 @@
 	        this.layoutLevel = LayoutLevel.CustomMark;
 	    }
 	    static createComponent(spec, options) {
-	        const titleSpec = spec.customMark;
-	        if (!titleSpec) {
+	        const customMarkSpec = spec.customMark;
+	        if (!customMarkSpec) {
 	            return null;
 	        }
-	        return [new CustomMark(spec.customMark, Object.assign(Object.assign({}, options), { specIndex: 0, specKey: 'customMark' }))];
+	        return [new CustomMark(customMarkSpec, Object.assign(Object.assign({}, options), { specIndex: 0, specKey: 'customMark' }))];
 	    }
 	    created() {
 	        super.created();
@@ -84558,9 +84593,8 @@
 	        this._linkedInBrushElementsMap = {};
 	        this._linkedOutOfBrushElementsMap = {};
 	        this._needInitOutState = true;
-	        this._isFirstState = true;
 	        this._cacheInteractiveRangeAttrs = [];
-	        this._needEnablePickable = true;
+	        this._needEnablePickable = false;
 	    }
 	    static createComponent(spec, options) {
 	        const brushSpec = spec.brush || options.defaultSpec;
@@ -84626,11 +84660,19 @@
 	        this._brushComponents.push(brush);
 	        this._cacheInteractiveRangeAttrs.push(interactiveAttr);
 	        brush.setUpdateDragMaskCallback((operateParams) => {
+	            var _a, _b, _c;
 	            const { operateType, operateMask } = operateParams;
-	            if (this._isFirstState ||
-	                (this._needInitOutState && brushMode === 'single' && operateType === IOperateType.drawing)) {
+	            let operateTypeCache = operateType;
+	            if (this._needInitOutState && brushMode === 'single' && operateType === IOperateType.drawing) {
 	                this._initMarkBrushState(componentIndex, 'outOfBrush');
 	            }
+	            (_c = (_b = (_a = this._option) === null || _a === void 0 ? void 0 : _a.getChart()) === null || _b === void 0 ? void 0 : _b.getEvent()) === null || _c === void 0 ? void 0 : _c.on('click', p => {
+	                if (!p.mark && operateTypeCache === IOperateType.brushClear) {
+	                    this._initMarkBrushState(componentIndex, '');
+	                    this._needInitOutState = true;
+	                    operateTypeCache = null;
+	                }
+	            });
 	            if (operateType === IOperateType.drawing) {
 	                this._needInitOutState = false;
 	                this._needEnablePickable = true;
@@ -84639,10 +84681,6 @@
 	                this._needInitOutState = true;
 	                this._needEnablePickable = false;
 	            }
-	            if (operateType === IOperateType.brushClear) {
-	                this._initMarkBrushState(componentIndex, '');
-	                this._needInitOutState = true;
-	            }
 	            this._reconfigItem(operateMask, region);
 	            this._reconfigLinkedItem(operateMask, region);
 	            let eventType = ChartEvent.brushChange;
@@ -84891,7 +84929,6 @@
 	                });
 	            });
 	        });
-	        this._isFirstState = false;
 	    }
 	    initEvent() {
 	    }
@@ -86000,7 +86037,7 @@
 	        component.addEventListener('*', ((event, type) => this._delegateEvent(component, event, type)));
 	    }
 	    _getAxisAttributes() {
-	        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+	        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
 	        const spec = this._spec;
 	        let titleAngle = spec.title.angle;
 	        let titleTextStyle;
@@ -86077,12 +86114,14 @@
 	                    text: transformStateStyle(spec.title.state),
 	                    shape: transformStateStyle((_g = spec.title.shape) === null || _g === void 0 ? void 0 : _g.state),
 	                    background: transformStateStyle((_h = spec.title.background) === null || _h === void 0 ? void 0 : _h.state)
-	                }
+	                },
+	                pickable: ((_j = spec.title.style) === null || _j === void 0 ? void 0 : _j.pickable) !== false,
+	                childrenPickable: ((_k = spec.title.style) === null || _k === void 0 ? void 0 : _k.pickable) !== false
 	            },
 	            panel: {
-	                visible: (_j = spec.background) === null || _j === void 0 ? void 0 : _j.visible,
-	                style: transformToGraphic((_k = spec.background) === null || _k === void 0 ? void 0 : _k.style),
-	                state: transformStateStyle((_l = spec.background) === null || _l === void 0 ? void 0 : _l.state)
+	                visible: (_l = spec.background) === null || _l === void 0 ? void 0 : _l.visible,
+	                style: transformToGraphic((_m = spec.background) === null || _m === void 0 ? void 0 : _m.style),
+	                state: transformStateStyle((_o = spec.background) === null || _o === void 0 ? void 0 : _o.state)
 	            }
 	        };
 	    }
@@ -91102,7 +91141,7 @@
 	    }
 	    static createComponent(spec, options) {
 	        const markLineSpec = spec.markLine || options.defaultSpec;
-	        if (isNil$1(markLineSpec)) {
+	        if (isEmpty(markLineSpec)) {
 	            return undefined;
 	        }
 	        if (!isArray$4(markLineSpec) && markLineSpec.visible !== false) {
@@ -91167,8 +91206,12 @@
 	        else if (isPositionLayout) {
 	            points = spec.positions;
 	        }
-	        const dataPoints = data.latestData[0].latestData ? data.latestData[0].latestData : data.latestData;
 	        const seriesData = this._relativeSeries.getViewData().latestData;
+	        const dataPoints = data
+	            ? data.latestData[0].latestData
+	                ? data.latestData[0].latestData
+	                : data.latestData
+	            : seriesData;
 	        let limitRect;
 	        if (spec.clip || ((_b = spec.label) === null || _b === void 0 ? void 0 : _b.confine)) {
 	            const { minX, maxX, minY, maxY } = this._computeClipRange([
@@ -91314,7 +91357,7 @@
 	    }
 	    static createComponent(spec, options) {
 	        const markAreaSpec = spec.markArea || options.defaultSpec;
-	        if (isNil$1(markAreaSpec)) {
+	        if (isEmpty(markAreaSpec)) {
 	            return undefined;
 	        }
 	        if (!isArray$4(markAreaSpec) && markAreaSpec.visible !== false) {
@@ -91376,7 +91419,12 @@
 	        else if (isPositionLayout) {
 	            points = spec.positions;
 	        }
-	        const dataPoints = data.latestData[0].latestData ? data.latestData[0].latestData : data.latestData;
+	        const seriesData = this._relativeSeries.getViewData().latestData;
+	        const dataPoints = data
+	            ? data.latestData[0].latestData
+	                ? data.latestData[0].latestData
+	                : data.latestData
+	            : seriesData;
 	        let limitRect;
 	        if (spec.clip || ((_b = spec.label) === null || _b === void 0 ? void 0 : _b.confine)) {
 	            const { minX, maxX, minY, maxY } = this._computeClipRange([
@@ -91394,7 +91442,7 @@
 	        (_c = this._markerComponent) === null || _c === void 0 ? void 0 : _c.setAttributes({
 	            points: points,
 	            label: Object.assign(Object.assign({}, (_e = (_d = this._markerComponent) === null || _d === void 0 ? void 0 : _d.attribute) === null || _e === void 0 ? void 0 : _e.label), { text: this._spec.label.formatMethod
-	                    ? this._spec.label.formatMethod(dataPoints, this._relativeSeries.getViewData().latestData)
+	                    ? this._spec.label.formatMethod(dataPoints, seriesData)
 	                    : (_h = (_g = (_f = this._markerComponent) === null || _f === void 0 ? void 0 : _f.attribute) === null || _g === void 0 ? void 0 : _g.label) === null || _h === void 0 ? void 0 : _h.text }),
 	            limitRect,
 	            dx: this.layoutOffsetX,
@@ -91448,7 +91496,7 @@
 	    }
 	    static createComponent(spec, options) {
 	        const markPointSpec = spec.markPoint || options.defaultSpec;
-	        if (isNil$1(markPointSpec)) {
+	        if (isEmpty(markPointSpec)) {
 	            return undefined;
 	        }
 	        if (!isArray$4(markPointSpec) && markPointSpec.visible !== false) {
@@ -91492,7 +91540,12 @@
 	        else if (isPositionLayout) {
 	            point = spec.position;
 	        }
-	        const dataPoints = data.latestData[0].latestData ? data.latestData[0].latestData : data.latestData;
+	        const seriesData = this._relativeSeries.getViewData().latestData;
+	        const dataPoints = data
+	            ? data.latestData[0].latestData
+	                ? data.latestData[0].latestData
+	                : data.latestData
+	            : seriesData;
 	        let limitRect;
 	        if (spec.clip) {
 	            const { minX, maxX, minY, maxY } = this._computeClipRange([relativeSeries.getRegion()]);
@@ -91506,7 +91559,7 @@
 	        (_b = this._markerComponent) === null || _b === void 0 ? void 0 : _b.setAttributes({
 	            position: point,
 	            itemContent: Object.assign(Object.assign({}, (_d = (_c = this._markerComponent) === null || _c === void 0 ? void 0 : _c.attribute) === null || _d === void 0 ? void 0 : _d.itemContent), { textStyle: Object.assign(Object.assign({}, (_g = (_f = (_e = this._markerComponent) === null || _e === void 0 ? void 0 : _e.attribute) === null || _f === void 0 ? void 0 : _f.itemContent) === null || _g === void 0 ? void 0 : _g.textStyle), { text: ((_h = this._spec.itemContent.text) === null || _h === void 0 ? void 0 : _h.formatMethod)
-	                        ? this._spec.itemContent.text.formatMethod(dataPoints, this._relativeSeries.getViewData().latestData)
+	                        ? this._spec.itemContent.text.formatMethod(dataPoints, seriesData)
 	                        : (_m = (_l = (_k = (_j = this._markerComponent) === null || _j === void 0 ? void 0 : _j.attribute) === null || _k === void 0 ? void 0 : _k.itemContent) === null || _l === void 0 ? void 0 : _l.textStyle) === null || _m === void 0 ? void 0 : _m.text }) }),
 	            limitRect,
 	            dx: this.layoutOffsetX,
@@ -91607,6 +91660,41 @@
 	    }
 	    return boundingClientRect.height / element.offsetHeight;
 	};
+	const measureTooltipText = (text, style) => {
+	    var _a;
+	    text = (text !== null && text !== void 0 ? text : '').toString();
+	    const measure = initTextMeasure(style);
+	    if (!style.multiLine) {
+	        const { width, height } = measure.fullMeasure(text);
+	        return {
+	            width,
+	            height,
+	            text
+	        };
+	    }
+	    let textLines = text.split('\n');
+	    textLines = textLines.map((line, i) => (i < textLines.length - 1 ? line + '\n' : line));
+	    const { width, height } = measure.fullMeasure(textLines);
+	    if (style.maxWidth && style.maxWidth <= width) {
+	        const bound = getRichTextBounds({
+	            wordBreak: (_a = style.wordBreak) !== null && _a !== void 0 ? _a : 'break-word',
+	            maxWidth: style.maxWidth,
+	            width: 0,
+	            height: 0,
+	            textConfig: textLines.map((line, i) => (Object.assign(Object.assign({}, style), { text: line })))
+	        });
+	        return {
+	            width: bound.width(),
+	            height: bound.height(),
+	            text: textLines
+	        };
+	    }
+	    return {
+	        width,
+	        height,
+	        text: textLines
+	    };
+	};
 
 	const TOOLTIP_EL_CLASS_NAME = 'vchart-tooltip-element';
 	const TOOLTIP_CONTAINER_EL_CLASS_NAME = 'vchart-tooltip-container';
@@ -91982,182 +92070,208 @@
 	const getHorizontalPositionType = (position, defaultCase) => { var _a, _b; return (_b = (_a = positionType[position]) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : defaultCase; };
 	const getVerticalPositionType = (position, defaultCase) => { var _a, _b; return (_b = (_a = positionType[position]) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : defaultCase; };
 
-	const defaultTextAttributes = {
+	const DEFAULT_TEXT_ATTRIBUTES = {
 	    fontFamily: THEME_CONSTANTS.defaultFontFamily,
 	    spacing: 10,
-	    multiLine: false,
 	    wordBreak: 'break-word'
 	};
 	function getTextAttributes(style = {}, globalTheme, defaultAttributes) {
 	    var _a, _b;
-	    const attrs = Object.assign(Object.assign({}, (defaultAttributes !== null && defaultAttributes !== void 0 ? defaultAttributes : defaultTextAttributes)), { fill: ((_a = style.fill) !== null && _a !== void 0 ? _a : style.fontColor), textAlign: style.textAlign, textBaseline: style.textBaseline, fontFamily: (_b = style.fontFamily) !== null && _b !== void 0 ? _b : globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.fontFamily, fontSize: style.fontSize, fontWeight: style.fontWeight, lineHeight: style.lineHeight, spacing: style.spacing, multiLine: style.multiLine, maxWidth: style.maxWidth, wordBreak: style.wordBreak });
+	    const attrs = Object.assign(Object.assign({}, (defaultAttributes !== null && defaultAttributes !== void 0 ? defaultAttributes : DEFAULT_TEXT_ATTRIBUTES)), { fill: ((_a = style.fill) !== null && _a !== void 0 ? _a : style.fontColor), textAlign: style.textAlign, textBaseline: style.textBaseline, fontFamily: (_b = style.fontFamily) !== null && _b !== void 0 ? _b : globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.fontFamily, fontSize: style.fontSize, fontWeight: style.fontWeight, lineHeight: style.lineHeight, spacing: style.spacing, multiLine: style.multiLine, maxWidth: style.maxWidth, wordBreak: style.wordBreak, autoWidth: style.autoWidth });
 	    return attrs;
 	}
-
-	const getTooltipAttributes = (actualTooltip, style) => {
-	    const { spaceRow: commonSpaceRow, padding, title: titleStyle, shape: shapeStyle, key: keyStyle, value: valueStyle } = style;
-	    const attribute = Object.assign(Object.assign({}, style), { title: {}, content: [], titleStyle: {
+	const getPanelAttributes = (style) => {
+	    var _a;
+	    const { backgroundColor, border, shadow } = style;
+	    const panelAttrs = {
+	        lineWidth: (_a = border === null || border === void 0 ? void 0 : border.width) !== null && _a !== void 0 ? _a : 0,
+	        shadow: !!shadow
+	    };
+	    if (border === null || border === void 0 ? void 0 : border.color) {
+	        panelAttrs.stroke = border.color;
+	    }
+	    if (backgroundColor) {
+	        panelAttrs.fill = backgroundColor;
+	    }
+	    if (shadow) {
+	        panelAttrs.shadowColor = shadow.color;
+	        panelAttrs.shadowBlur = shadow.blur;
+	        panelAttrs.shadowOffsetX = shadow.x;
+	        panelAttrs.shadowOffsetY = shadow.y;
+	        panelAttrs.shadowSpread = shadow.spread;
+	    }
+	    const { radius } = border !== null && border !== void 0 ? border : {};
+	    if (isValid$1(radius)) {
+	        panelAttrs.cornerRadius = [radius, radius, radius, radius];
+	    }
+	    return panelAttrs;
+	};
+	const getTooltipAttributes = (actualTooltip, spec, globalTheme) => {
+	    var _a, _b, _c, _d, _e;
+	    const { style = {}, enterable, transitionDuration } = spec;
+	    const { panel = {}, titleLabel, shape, keyLabel, valueLabel, spaceRow: commonSpaceRow } = style;
+	    const padding = normalizePadding$1(panel.padding);
+	    const paddingSpec = normalizeLayoutPaddingSpec(panel.padding);
+	    const titleStyle = getTextAttributes(titleLabel, globalTheme);
+	    const keyStyle = getTextAttributes(keyLabel, globalTheme);
+	    const valueStyle = getTextAttributes(valueLabel, globalTheme);
+	    const shapeStyle = {
+	        fill: true,
+	        size: (_a = shape === null || shape === void 0 ? void 0 : shape.size) !== null && _a !== void 0 ? _a : 8,
+	        spacing: (_b = shape === null || shape === void 0 ? void 0 : shape.spacing) !== null && _b !== void 0 ? _b : 6
+	    };
+	    const attributes = {
+	        panel: getPanelAttributes(panel),
+	        padding,
+	        title: {},
+	        content: [],
+	        titleStyle: {
 	            value: titleStyle,
 	            spaceRow: commonSpaceRow
-	        }, contentStyle: {
+	        },
+	        contentStyle: {
 	            shape: shapeStyle,
 	            key: keyStyle,
 	            value: valueStyle,
 	            spaceRow: commonSpaceRow
-	        }, hasContentShape: false, keyWidth: 0, valueWidth: 0 });
-	    ['key', 'value', 'shape'].forEach(key => {
-	        delete attribute[key];
-	    });
+	        },
+	        hasContentShape: false,
+	        keyWidth: 0,
+	        valueWidth: 0,
+	        enterable,
+	        transitionDuration
+	    };
 	    const { title = {}, content = [] } = actualTooltip;
-	    let maxWidth = 0;
-	    let containerHeight = padding.top + padding.bottom;
-	    let titleMaxHeight = 0;
-	    const { visible: titleVisible = true, value: titleValue = '', valueStyle: titleValueStyle, hasShape: titleHasShape, shapeType: titleShapeType = '', shapeHollow: titleShapeHollow, shapeColor: titleShapeColor, spaceRow: titleSpaceRow } = title;
-	    attribute.title.visible = titleVisible;
-	    attribute.title.spaceRow = titleSpaceRow !== null && titleSpaceRow !== void 0 ? titleSpaceRow : commonSpaceRow;
-	    if (titleVisible) {
-	        const lineTitleStyle = mergeSpec({}, titleStyle, getTextAttributes(titleValueStyle, undefined, {}));
-	        const { text, width, height } = measureTooltipText(titleValue, lineTitleStyle);
-	        attribute.title.value = Object.assign(Object.assign({ width,
-	            height }, lineTitleStyle), { text });
-	        maxWidth = width;
-	        titleMaxHeight = height;
-	        if (titleHasShape && builtinSymbolsMap[titleShapeType]) {
-	            const titleShapeAttrs = {
-	                symbolType: titleShapeType
-	            };
-	            if (titleShapeHollow) {
-	                titleShapeAttrs.stroke = titleShapeColor;
-	            }
-	            else {
-	                titleShapeAttrs.fill = titleShapeColor;
-	            }
-	            attribute.title.shape = titleShapeAttrs;
-	            maxWidth += shapeStyle.size + shapeStyle.spacing;
-	            titleMaxHeight = Math.max(shapeStyle.size, titleMaxHeight);
-	        }
-	        attribute.title.width = maxWidth;
-	        attribute.title.height = titleMaxHeight;
-	        containerHeight += titleMaxHeight;
-	    }
-	    if (content.length) {
-	        const filteredContent = content.filter(item => {
-	            return (item.key || item.value) && item.visible !== false;
-	        });
-	        if (filteredContent.length) {
-	            if (titleVisible) {
-	                containerHeight += attribute.title.spaceRow;
-	            }
-	            const keyWidths = [];
-	            const adaptiveKeyWidths = [];
-	            const valueWidths = [];
-	            const shapeWidths = [];
-	            attribute.content = filteredContent.map((item, i) => {
-	                let itemHeight = 0;
-	                const { hasShape, key, shapeColor, shapeHollow, shapeType = '', shapeFill, shapeStroke, shapeLineWidth, shapeSize, value, isKeyAdaptive, spaceRow: lineSpaceRow } = item;
-	                const itemAttrs = { height: 0, spaceRow: lineSpaceRow !== null && lineSpaceRow !== void 0 ? lineSpaceRow : commonSpaceRow };
-	                if (isValid$1(key)) {
-	                    const lineKeyStyle = mergeSpec({}, keyStyle, getTextAttributes(item.keyStyle, undefined, {}));
-	                    const { width, height, text } = measureTooltipText(key, lineKeyStyle);
-	                    itemAttrs.key = Object.assign(Object.assign({ width,
-	                        height }, lineKeyStyle), { text });
-	                    if (!isKeyAdaptive) {
-	                        keyWidths.push(width);
-	                    }
-	                    else {
-	                        adaptiveKeyWidths.push(width);
-	                    }
-	                    itemHeight = Math.max(itemHeight, height);
+	    let containerWidth = paddingSpec.left + paddingSpec.right;
+	    let containerHeight = paddingSpec.top + paddingSpec.bottom;
+	    let contentMaxWidth = 0;
+	    const filteredContent = content.filter(item => {
+	        return (item.key || item.value) && item.visible !== false;
+	    });
+	    const hasContent = !!filteredContent.length;
+	    let maxKeyWidth = 0;
+	    let maxAdaptiveKeyWidth = 0;
+	    let maxValueWidth = 0;
+	    let maxShapeWidth = 0;
+	    if (hasContent) {
+	        const keyWidths = [];
+	        const adaptiveKeyWidths = [];
+	        const valueWidths = [];
+	        const shapeWidths = [];
+	        attributes.content = filteredContent.map((item, i) => {
+	            let itemHeight = 0;
+	            const { hasShape: actualHasShape, key: actualKey, shapeType: actualShapeType = '', shapeFill: actualShapeFill, shapeStroke: actualShapeStroke, shapeLineWidth: actualShapeLineWidth, shapeSize: actualShapeSize, value: actualValue, isKeyAdaptive: actualIsKeyAdaptive, spaceRow: actualSpaceRow, keyStyle: actualKeyStyle, valueStyle: actualValueStyle, shapeColor: actualShapeColor, shapeHollow: actualShapeHollow } = item;
+	            const itemAttrs = { height: 0, spaceRow: actualSpaceRow !== null && actualSpaceRow !== void 0 ? actualSpaceRow : commonSpaceRow };
+	            if (isValid$1(actualKey)) {
+	                const itemKeyStyle = mergeSpec({}, keyStyle, getTextAttributes(actualKeyStyle, undefined, {}));
+	                const { width, height, text } = measureTooltipText(actualKey, itemKeyStyle);
+	                itemAttrs.key = Object.assign(Object.assign({ width,
+	                    height }, itemKeyStyle), { text });
+	                if (!actualIsKeyAdaptive) {
+	                    keyWidths.push(width);
 	                }
-	                if (isValid$1(value)) {
-	                    const lineValueStyle = mergeSpec({}, valueStyle, getTextAttributes(item.valueStyle, undefined, {}));
-	                    const { width, height, text } = measureTooltipText(value, lineValueStyle);
-	                    itemAttrs.value = Object.assign(Object.assign({ width,
-	                        height }, lineValueStyle), { text });
-	                    valueWidths.push(width);
-	                    itemHeight = Math.max(itemHeight, height);
+	                else {
+	                    adaptiveKeyWidths.push(width);
 	                }
-	                if (hasShape) {
-	                    const shape = {
-	                        visible: true,
-	                        symbolType: shapeType
-	                    };
-	                    const adaptiveShapeFill = shapeFill !== null && shapeFill !== void 0 ? shapeFill : shapeColor;
-	                    if (shapeHollow) {
-	                        shape.stroke = adaptiveShapeFill;
-	                    }
-	                    else {
-	                        shape.fill = adaptiveShapeFill;
-	                    }
-	                    shape.stroke = shapeStroke !== null && shapeStroke !== void 0 ? shapeStroke : adaptiveShapeFill;
-	                    shape.lineWidth = shapeLineWidth;
-	                    itemAttrs.shape = shape;
-	                    const shapeWidth = shapeSize !== null && shapeSize !== void 0 ? shapeSize : shapeStyle.size;
-	                    itemHeight = Math.max(shapeWidth, itemHeight);
-	                    shapeWidths.push(shapeWidth);
+	                itemHeight = Math.max(itemHeight, height);
+	            }
+	            if (isValid$1(actualValue)) {
+	                const itemValueStyle = mergeSpec({}, valueStyle, getTextAttributes(actualValueStyle, undefined, {}));
+	                const { width, height, text } = measureTooltipText(actualValue, itemValueStyle);
+	                itemAttrs.value = Object.assign(Object.assign({ width,
+	                    height }, itemValueStyle), { text });
+	                valueWidths.push(width);
+	                itemHeight = Math.max(itemHeight, height);
+	            }
+	            if (actualHasShape) {
+	                const shape = {
+	                    visible: true,
+	                    symbolType: actualShapeType
+	                };
+	                const adaptiveShapeFill = actualShapeFill !== null && actualShapeFill !== void 0 ? actualShapeFill : actualShapeColor;
+	                if (actualShapeHollow) {
+	                    shape.stroke = adaptiveShapeFill;
 	                }
 	                else {
-	                    itemAttrs.shape = { visible: false };
+	                    shape.fill = adaptiveShapeFill;
 	                }
-	                itemAttrs.height = itemHeight;
-	                containerHeight += itemHeight;
-	                if (i < filteredContent.length - 1) {
-	                    containerHeight += itemAttrs.spaceRow;
-	                }
-	                return itemAttrs;
-	            });
-	            const maxKeyWidth = keyWidths.length ? Math.max(...keyWidths) : 0;
-	            const maxAdaptiveKeyWidth = adaptiveKeyWidths.length ? Math.max(...adaptiveKeyWidths) : 0;
-	            const maxValueWidth = valueWidths.length ? Math.max(...valueWidths) : 0;
-	            const shapeWidth = shapeWidths.length ? Math.max(...shapeWidths) + shapeStyle.spacing : 0;
-	            maxWidth = Math.max(maxKeyWidth + maxValueWidth + keyStyle.spacing + valueStyle.spacing + shapeWidth, maxAdaptiveKeyWidth + shapeWidth, maxWidth);
-	            attribute.hasContentShape = !!shapeWidths.length;
-	            attribute.keyWidth = maxKeyWidth;
-	            attribute.valueWidth = maxValueWidth;
-	        }
-	    }
-	    const containerSize = {
-	        width: maxWidth + padding.left + padding.right,
-	        height: containerHeight
-	    };
-	    attribute.panel.width = containerSize.width;
-	    attribute.panel.height = containerSize.height;
-	    return attribute;
-	};
-	const measureTooltipText = (text, style) => {
-	    var _a;
-	    text = (text !== null && text !== void 0 ? text : '').toString();
-	    const measure = initTextMeasure(style);
-	    if (!style.multiLine) {
-	        const { width, height } = measure.fullMeasure(text);
-	        return {
-	            width,
-	            height,
-	            text
-	        };
+	                shape.stroke = actualShapeStroke !== null && actualShapeStroke !== void 0 ? actualShapeStroke : adaptiveShapeFill;
+	                shape.lineWidth = actualShapeLineWidth;
+	                itemAttrs.shape = shape;
+	                const shapeWidth = actualShapeSize !== null && actualShapeSize !== void 0 ? actualShapeSize : shapeStyle.size;
+	                itemHeight = Math.max(shapeWidth, itemHeight);
+	                shapeWidths.push(shapeWidth);
+	            }
+	            else {
+	                itemAttrs.shape = { visible: false };
+	            }
+	            itemAttrs.height = itemHeight;
+	            containerHeight += itemHeight;
+	            if (i < filteredContent.length - 1) {
+	                containerHeight += itemAttrs.spaceRow;
+	            }
+	            return itemAttrs;
+	        });
+	        maxKeyWidth = keyWidths.length ? Math.max(...keyWidths) : 0;
+	        maxAdaptiveKeyWidth = adaptiveKeyWidths.length ? Math.max(...adaptiveKeyWidths) : 0;
+	        maxValueWidth = valueWidths.length ? Math.max(...valueWidths) : 0;
+	        maxShapeWidth = shapeWidths.length ? Math.max(...shapeWidths) + shapeStyle.spacing : 0;
+	        contentMaxWidth = Math.max(maxShapeWidth + maxKeyWidth + keyStyle.spacing + maxValueWidth + valueStyle.spacing, maxShapeWidth + maxAdaptiveKeyWidth, contentMaxWidth);
+	        attributes.hasContentShape = !!shapeWidths.length;
+	        attributes.keyWidth = maxKeyWidth;
+	        attributes.valueWidth = maxValueWidth;
+	    }
+	    let titleMaxWidth = 0;
+	    let titleMaxHeight = 0;
+	    const { visible: actualTitleVisible = true, value: actualTitleValue = '', valueStyle: actualTitleValueStyle, spaceRow: actualTitleSpaceRow } = title;
+	    attributes.title.visible = actualTitleVisible;
+	    attributes.title.spaceRow = actualTitleSpaceRow !== null && actualTitleSpaceRow !== void 0 ? actualTitleSpaceRow : commonSpaceRow;
+	    let titleValueStyle = {};
+	    const isAutoWidthMode = () => titleValueStyle.autoWidth && titleValueStyle.multiLine !== false;
+	    if (actualTitleVisible) {
+	        titleValueStyle = mergeSpec({}, titleStyle, getTextAttributes(actualTitleValueStyle, undefined, {}));
+	        if (isAutoWidthMode()) {
+	            titleValueStyle.multiLine = (_c = titleValueStyle.multiLine) !== null && _c !== void 0 ? _c : true;
+	            titleValueStyle.maxWidth = (_d = titleValueStyle.maxWidth) !== null && _d !== void 0 ? _d : (hasContent ? Math.ceil(contentMaxWidth) : undefined);
+	        }
+	        const { text, width, height } = measureTooltipText(actualTitleValue, titleValueStyle);
+	        attributes.title.value = Object.assign(Object.assign({ width: isAutoWidthMode() ? Math.min(width, (_e = titleValueStyle.maxWidth) !== null && _e !== void 0 ? _e : Number.MAX_VALUE) : width, height }, titleValueStyle), { text });
+	        titleMaxWidth = attributes.title.value.width;
+	        titleMaxHeight = attributes.title.value.height;
+	        containerHeight += titleMaxHeight + (hasContent ? attributes.title.spaceRow : 0);
+	    }
+	    attributes.title.width = titleMaxWidth;
+	    attributes.title.height = titleMaxHeight;
+	    if (isAutoWidthMode()) {
+	        containerWidth += contentMaxWidth ? contentMaxWidth : titleMaxWidth;
 	    }
-	    let textLines = text.split('\n');
-	    textLines = textLines.map((line, i) => (i < textLines.length - 1 ? line + '\n' : line));
-	    const { width, height } = measure.fullMeasure(textLines);
-	    if (style.maxWidth && style.maxWidth <= width) {
-	        const bound = getRichTextBounds({
-	            wordBreak: (_a = style.wordBreak) !== null && _a !== void 0 ? _a : 'break-word',
-	            maxWidth: style.maxWidth,
-	            width: 0,
-	            height: 0,
-	            textConfig: textLines.map((line, i) => (Object.assign(Object.assign({}, style), { text: line })))
+	    else {
+	        containerWidth += Math.max(titleMaxWidth, contentMaxWidth);
+	    }
+	    if (hasContent) {
+	        attributes.content.forEach(item => {
+	            var _a;
+	            const value = item.value;
+	            if (value && ((_a = value.autoWidth) !== null && _a !== void 0 ? _a : true)) {
+	                value.width =
+	                    containerWidth -
+	                        paddingSpec.left -
+	                        paddingSpec.right -
+	                        maxShapeWidth -
+	                        maxKeyWidth -
+	                        keyStyle.spacing -
+	                        valueStyle.spacing;
+	                value.multiLine = true;
+	                if (!value.maxWidth) {
+	                    value.maxWidth = Math.ceil(value.width);
+	                }
+	                attributes.valueWidth = Math.max(attributes.valueWidth, value.width);
+	            }
 	        });
-	        return {
-	            width: bound.width(),
-	            height: bound.height(),
-	            text: textLines
-	        };
 	    }
-	    return {
-	        width,
-	        height,
-	        text: textLines
-	    };
+	    attributes.panel.width = containerWidth;
+	    attributes.panel.height = containerHeight;
+	    return attributes;
 	};
 
 	var TooltipResult;
@@ -92176,7 +92290,8 @@
 	    constructor(tooltipId, component) {
 	        this._visible = true;
 	        this._id = '';
-	        this._attributeCache = null;
+	        this._attributes = null;
+	        this._isReleased = false;
 	        this.showTooltip = (activeType, data, params) => {
 	            var _a;
 	            let changePositionOnly = !!params.changePositionOnly;
@@ -92193,7 +92308,7 @@
 	        this._changeTooltip = (visible, params, changePositionOnly, activeType, data) => {
 	            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
 	            const tooltipSpec = this._component.getSpec();
-	            if (!tooltipSpec) {
+	            if (this._isReleased || !tooltipSpec) {
 	                return TooltipResult.failed;
 	            }
 	            if (!visible) {
@@ -92243,6 +92358,9 @@
 	        };
 	        this._changeTooltipPosition = (changePositionOnly, actualTooltip, spec, activeType, data, params) => {
 	            var _a, _b, _c;
+	            if (this._isReleased) {
+	                return TooltipResult.failed;
+	            }
 	            const event = params.event;
 	            if (spec.handler) {
 	                return (_c = (_b = (_a = spec.handler).showTooltip) === null || _b === void 0 ? void 0 : _b.call(_a, activeType, data, params)) !== null && _c !== void 0 ? _c : TooltipResult.success;
@@ -92567,6 +92685,7 @@
 	            return;
 	        }
 	        this._removeTooltip();
+	        this._isReleased = true;
 	    }
 	    _throttle(callback) {
 	        const tooltipSpec = this._component.getSpec();
@@ -92590,57 +92709,14 @@
 	        return Object.assign(Object.assign({}, DEFAULT_OPTIONS), { offsetX: (_a = offset === null || offset === void 0 ? void 0 : offset.x) !== null && _a !== void 0 ? _a : DEFAULT_OPTIONS.offsetX, offsetY: (_b = offset === null || offset === void 0 ? void 0 : offset.y) !== null && _b !== void 0 ? _b : DEFAULT_OPTIONS.offsetY });
 	    }
 	    _getTooltipBoxSize(actualTooltip, changePositionOnly) {
-	        var _a, _b, _c, _d;
-	        if (!changePositionOnly || isNil$1(this._attributeCache)) {
-	            this._attributeCache = getTooltipAttributes(actualTooltip, this._style);
-	        }
-	        return {
-	            width: (_b = (_a = this._attributeCache) === null || _a === void 0 ? void 0 : _a.panel) === null || _b === void 0 ? void 0 : _b.width,
-	            height: (_d = (_c = this._attributeCache) === null || _c === void 0 ? void 0 : _c.panel) === null || _d === void 0 ? void 0 : _d.height
-	        };
-	    }
-	    _getStyle() {
-	        var _a, _b, _c, _d, _e;
-	        const tooltipSpec = this._component.getSpec();
-	        const { style = {}, enterable, transitionDuration } = tooltipSpec;
-	        const { panel = {}, titleLabel, shape, keyLabel, valueLabel, spaceRow } = style;
-	        const { backgroundColor, border, shadow, padding } = panel;
-	        const panelStyle = {
-	            lineWidth: (_a = border === null || border === void 0 ? void 0 : border.width) !== null && _a !== void 0 ? _a : 0,
-	            shadow: !!shadow
-	        };
-	        if (border === null || border === void 0 ? void 0 : border.color) {
-	            panelStyle.stroke = border.color;
-	        }
-	        if (backgroundColor) {
-	            panelStyle.fill = backgroundColor;
-	        }
-	        if (shadow) {
-	            panelStyle.shadowColor = shadow.color;
-	            panelStyle.shadowBlur = shadow.blur;
-	            panelStyle.shadowOffsetX = shadow.x;
-	            panelStyle.shadowOffsetY = shadow.y;
-	            panelStyle.shadowSpread = shadow.spread;
-	        }
-	        const { radius } = border !== null && border !== void 0 ? border : {};
-	        if (isValid$1(radius)) {
-	            panelStyle.cornerRadius = [radius, radius, radius, radius];
+	        var _a, _b, _c, _d, _e, _f;
+	        if (!changePositionOnly || isNil$1(this._attributes)) {
+	            const globalTheme = (_b = (_a = this._chartOption).getTheme) === null || _b === void 0 ? void 0 : _b.call(_a);
+	            this._attributes = getTooltipAttributes(actualTooltip, this._component.getSpec(), globalTheme);
 	        }
-	        const globalTheme = (_c = (_b = this._chartOption).getTheme) === null || _c === void 0 ? void 0 : _c.call(_b);
 	        return {
-	            panel: panelStyle,
-	            title: getTextAttributes(titleLabel, globalTheme),
-	            shape: {
-	                fill: true,
-	                size: (_d = shape === null || shape === void 0 ? void 0 : shape.size) !== null && _d !== void 0 ? _d : 8,
-	                spacing: (_e = shape === null || shape === void 0 ? void 0 : shape.spacing) !== null && _e !== void 0 ? _e : 6
-	            },
-	            key: getTextAttributes(keyLabel, globalTheme),
-	            value: getTextAttributes(valueLabel, globalTheme),
-	            padding,
-	            spaceRow,
-	            enterable,
-	            transitionDuration
+	            width: (_d = (_c = this._attributes) === null || _c === void 0 ? void 0 : _c.panel) === null || _d === void 0 ? void 0 : _d.width,
+	            height: (_f = (_e = this._attributes) === null || _e === void 0 ? void 0 : _e.panel) === null || _f === void 0 ? void 0 : _f.height
 	        };
 	    }
 	    _getParentElement(spec) {
@@ -92651,7 +92727,6 @@
 	    }
 	    _initFromSpec() {
 	        this._option = this._getDefaultOption();
-	        this._style = this._getStyle();
 	        this.changeTooltip = this._throttle(this._changeTooltip);
 	        this.changeTooltipPosition = this._throttle(this._changeTooltipPosition);
 	    }
@@ -92685,22 +92760,24 @@
 	    }
 	    return numArr;
 	};
-	function getDomStyles(style, attributeCache) {
-	    var _a, _b, _c, _d, _e, _f, _g;
-	    const { panel: { fill: fillColor, shadow, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, shadowSpread, cornerRadius, stroke: strokeColor, lineWidth = 0 }, padding, key, value, title, shape, enterable, transitionDuration } = style;
-	    const { panel: panelAttribute, title: titleAttribute, content: contentAttribute, keyWidth, valueWidth } = attributeCache !== null && attributeCache !== void 0 ? attributeCache : {};
-	    const backgroundColor = fillColor;
+	function getDomStyles(attributes) {
+	    var _a, _b, _c, _d, _e;
+	    const { panel = {}, title: titleAttribute, content: contentAttribute, titleStyle = {}, contentStyle = {}, padding, keyWidth, valueWidth, enterable, transitionDuration } = attributes !== null && attributes !== void 0 ? attributes : {};
+	    const { fill: backgroundColor, shadow, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, shadowSpread, cornerRadius, stroke: strokeColor, lineWidth = 0, width = 0, height = 0 } = panel;
+	    const { value: title = {} } = titleStyle;
+	    const { shape = {}, key = {}, value = {} } = contentStyle;
 	    const shapeStyle = getShapeStyle(shape);
 	    const keyStyle = getLabelStyle(key);
 	    const valueStyle = getLabelStyle(value);
+	    const { bottom, left, right, top } = normalizeLayoutPaddingSpec(padding);
 	    const styles = {
 	        panel: {
-	            width: getPixelPropertyStr(((_a = panelAttribute === null || panelAttribute === void 0 ? void 0 : panelAttribute.width) !== null && _a !== void 0 ? _a : 0) + lineWidth * 2),
-	            minHeight: getPixelPropertyStr(((_b = panelAttribute === null || panelAttribute === void 0 ? void 0 : panelAttribute.height) !== null && _b !== void 0 ? _b : 0) + lineWidth * 2),
-	            paddingBottom: getPixelPropertyStr(padding.bottom),
-	            paddingLeft: getPixelPropertyStr(padding.left),
-	            paddingRight: getPixelPropertyStr(padding.right),
-	            paddingTop: getPixelPropertyStr(padding.top),
+	            width: getPixelPropertyStr(width + lineWidth * 2),
+	            minHeight: getPixelPropertyStr(height + lineWidth * 2),
+	            paddingBottom: getPixelPropertyStr(bottom),
+	            paddingLeft: getPixelPropertyStr(left),
+	            paddingRight: getPixelPropertyStr(right),
+	            paddingTop: getPixelPropertyStr(top),
 	            borderColor: strokeColor,
 	            borderWidth: getPixelPropertyStr(lineWidth),
 	            borderRadius: getPixelPropertyStr(cornerRadius),
@@ -92719,20 +92796,20 @@
 	            common: shapeStyle,
 	            items: [],
 	            width: getPixelPropertyStr(shape.size),
-	            marginRight: getPixelPropertyStr((_c = shape.spacing) !== null && _c !== void 0 ? _c : DEFAULT_SHAPE_SPACING),
-	            marginBottom: getPixelPropertyStr(-((_e = (_d = contentAttribute === null || contentAttribute === void 0 ? void 0 : contentAttribute[(contentAttribute === null || contentAttribute === void 0 ? void 0 : contentAttribute.length) - 1]) === null || _d === void 0 ? void 0 : _d.spaceRow) !== null && _e !== void 0 ? _e : 0))
+	            marginRight: getPixelPropertyStr((_a = shape.spacing) !== null && _a !== void 0 ? _a : DEFAULT_SHAPE_SPACING),
+	            marginBottom: getPixelPropertyStr(-((_c = (_b = contentAttribute === null || contentAttribute === void 0 ? void 0 : contentAttribute[(contentAttribute === null || contentAttribute === void 0 ? void 0 : contentAttribute.length) - 1]) === null || _b === void 0 ? void 0 : _b.spaceRow) !== null && _c !== void 0 ? _c : 0))
 	        },
 	        keyColumn: {
 	            common: keyStyle,
 	            items: contentAttribute === null || contentAttribute === void 0 ? void 0 : contentAttribute.map(({ key, spaceRow }, i) => (Object.assign(Object.assign(Object.assign({ marginTop: '0px', marginBottom: i < contentAttribute.length - 1 ? getPixelPropertyStr(spaceRow) : '0px' }, keyStyle), getLabelStyle(key)), ((key === null || key === void 0 ? void 0 : key.multiLine) ? { width: getPixelPropertyStr(Math.ceil(key.width)) } : undefined)))),
 	            width: getPixelPropertyStr(keyWidth),
-	            marginRight: getPixelPropertyStr((_f = key.spacing) !== null && _f !== void 0 ? _f : DEFAULT_KEY_SPACING)
+	            marginRight: getPixelPropertyStr((_d = key.spacing) !== null && _d !== void 0 ? _d : DEFAULT_KEY_SPACING)
 	        },
 	        valueColumn: {
 	            common: valueStyle,
 	            items: contentAttribute === null || contentAttribute === void 0 ? void 0 : contentAttribute.map(({ value, spaceRow }, i) => (Object.assign(Object.assign(Object.assign({ marginTop: '0px', marginBottom: i < contentAttribute.length - 1 ? getPixelPropertyStr(spaceRow) : '0px' }, valueStyle), getLabelStyle(value)), ((value === null || value === void 0 ? void 0 : value.multiLine) ? { width: getPixelPropertyStr(Math.ceil(value.width)) } : undefined)))),
 	            width: getPixelPropertyStr(valueWidth),
-	            marginRight: getPixelPropertyStr((_g = value.spacing) !== null && _g !== void 0 ? _g : DEFAULT_VALUE_SPACING)
+	            marginRight: getPixelPropertyStr((_e = value.spacing) !== null && _e !== void 0 ? _e : DEFAULT_VALUE_SPACING)
 	        }
 	    };
 	    return styles;
@@ -93437,7 +93514,7 @@
 	                valueToHtml: this._option.sanitize,
 	                getTooltipStyle: () => this._domStyle,
 	                getTooltipActual: () => this._tooltipActual,
-	                getTooltipAttributes: () => this._attributeCache
+	                getTooltipAttributes: () => this._attributes
 	            }, [tooltipSpec.className], this.id);
 	        }
 	    }
@@ -93468,7 +93545,7 @@
 	        }
 	    }
 	    _initStyle() {
-	        this._domStyle = getDomStyles(this._style, this._attributeCache);
+	        this._domStyle = getDomStyles(this._attributes);
 	    }
 	    _getParentElement(spec) {
 	        var _a;
@@ -93514,7 +93591,7 @@
 	        if (this._layer) {
 	            this._layer.removeAllChild();
 	        }
-	        this._attributeCache = null;
+	        this._attributes = null;
 	    }
 	    _updateTooltip(visible, params, actualTooltip) {
 	        this._visible = visible;
@@ -93536,7 +93613,7 @@
 	        }
 	        const pos = actualTooltip === null || actualTooltip === void 0 ? void 0 : actualTooltip.position;
 	        if (!params.changePositionOnly) {
-	            this._tooltipComponent.setAttributes(Object.assign(Object.assign({}, this._attributeCache), pos));
+	            this._tooltipComponent.setAttributes(Object.assign(Object.assign({}, this._attributes), pos));
 	        }
 	        else if (isValid$1(pos)) {
 	            this._tooltipComponent.setAttributes(pos);
@@ -93892,12 +93969,6 @@
 	    }
 	    release() {
 	        var _a, _b;
-	        this.event.emit(ChartEvent.tooltipHide, {
-	            tooltip: this
-	        });
-	        this.event.emit(ChartEvent.tooltipRelease, {
-	            tooltip: this
-	        });
 	        super.release();
 	        this._eventList.forEach(({ eventType, handler }) => {
 	            this.event.off(eventType, handler);
@@ -93906,6 +93977,14 @@
 	        (_b = (_a = this.tooltipHandler) === null || _a === void 0 ? void 0 : _a.release) === null || _b === void 0 ? void 0 : _b.call(_a);
 	        this._isTooltipShown = false;
 	    }
+	    beforeRelease() {
+	        this.event.emit(ChartEvent.tooltipHide, {
+	            tooltip: this
+	        });
+	        this.event.emit(ChartEvent.tooltipRelease, {
+	            tooltip: this
+	        });
+	    }
 	    _initHandler() {
 	        var _a, _b, _c;
 	        const renderMode = (_a = this._spec.renderMode) !== null && _a !== void 0 ? _a : 'html';