@visactor/vchart 1.2.1 → 1.2.2-beta.1

package/build/index.js

@@ -26008,6 +26008,7 @@
 	    if (heightLimit > 0 && (lineCountLimit = Math.max(Math.floor(heightLimit / lineHeight), 1)), lineClamp && (lineCountLimit = Math.min(lineCountLimit, lineClamp)), "number" == typeof maxLineWidth && maxLineWidth !== 1 / 0) {
 	      if (maxLineWidth > 0) for (let i = 0; i < lines.length; i++) {
 	        const str = lines[i];
+	        let needCut = !0;
 	        if (i === lineCountLimit - 1) {
 	          const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis);
 	          linesLayout.push({
@@ -26017,14 +26018,17 @@
 	          break;
 	        }
 	        const clip = layoutObj.textMeasure.clipText(str, layoutObj.textOptions, maxLineWidth);
-	        if ("" !== str && "" === clip.str) if (ellipsis) {
-	          const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis);
-	          clip.str = null !== (_b = clipEllipsis.str) && void 0 !== _b ? _b : "", clip.width = null !== (_c = clipEllipsis.width) && void 0 !== _c ? _c : 0;
-	        } else clip.str = "", clip.width = 0;
+	        if ("" !== str && "" === clip.str) {
+	          if (ellipsis) {
+	            const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis);
+	            clip.str = null !== (_b = clipEllipsis.str) && void 0 !== _b ? _b : "", clip.width = null !== (_c = clipEllipsis.width) && void 0 !== _c ? _c : 0;
+	          } else clip.str = "", clip.width = 0;
+	          needCut = !1;
+	        }
 	        if (linesLayout.push({
 	          str: clip.str,
 	          width: clip.width
-	        }), clip.str.length === str.length) ;else {
+	        }), clip.str.length === str.length) ;else if (needCut) {
 	          const newStr = str.substring(clip.str.length);
 	          lines.splice(i + 1, 0, newStr);
 	        }
@@ -54684,6 +54688,9 @@
 	        this._view.resize(width, height);
 	        return this.reRenderAsync({ morph: false });
 	    }
+	    setBackground(color) {
+	        this._view?.background(color);
+	    }
 	    reRenderAsync(morphConfig) {
 	        if (this.isInited) {
 	            if (this._rafId) {
@@ -54979,7 +54986,6 @@
 	        this._currentThemeName = ThemeManager.getCurrentThemeName();
 	        this._setSpec(spec);
 	        this._updateCurrentTheme();
-	        const specBackground = typeof spec.background === 'string' ? spec.background : null;
 	        this._compiler = new Compiler({
 	            dom: this._container ?? 'none',
 	            canvas: renderCanvas
@@ -54988,7 +54994,7 @@
 	            stage,
 	            pluginList: poptip !== false ? ['poptipForText'] : [],
 	            ...restOptions,
-	            background: specBackground || this._currentTheme.background || this._option.background,
+	            background: this._getBackground(),
 	            onError: this._onError
 	        });
 	        this._eventDispatcher = new EventDispatcher(this, this._compiler);
@@ -55150,10 +55156,8 @@
 	            this._compiler?.releaseGrammar();
 	        }
 	        else {
-	            if (updateResult.reCompile) {
-	                this.getComponents().forEach(c => c.clear());
-	                this._compiler?.compile({ chart: this._chart, vChart: this }, {});
-	            }
+	            this.getComponents().forEach(c => c.clear());
+	            this._compiler?.compile({ chart: this._chart, vChart: this }, {});
 	        }
 	    }
 	    renderSync(morphConfig) {
@@ -55392,6 +55396,11 @@
 	            this._currentTheme = merge$2({}, ThemeManager.getTheme(this._currentThemeName), this._spec?.theme ?? {});
 	        }
 	        setPoptipTheme(merge$2({}, this._currentTheme.component?.poptip));
+	        this._compiler?.setBackground(this._getBackground());
+	    }
+	    _getBackground() {
+	        const specBackground = typeof this._spec.background === 'string' ? this._spec.background : null;
+	        return specBackground || this._currentTheme.background || this._option.background;
 	    }
 	    getCurrentTheme() {
 	        return this._currentTheme;
@@ -58413,7 +58422,7 @@
 	VChart.useMark([ComponentMark, GroupMark, ImageMark]);
 	Factory.registerRegion('region', Region);
 	Factory.registerLayout('base', Layout);
-	const version = "1.2.1";
+	const version = "1.2.2-beta.1";
 	Logger.getInstance(LoggerLevel.Error);
 
 	var SeriesMarkNameEnum;
@@ -61013,6 +61022,7 @@
 	                },
 	                content: [
 	                    {
+	                        seriesId: this.series.id,
 	                        key: this.contentKeyCallback,
 	                        value: this.contentValueCallback,
 	                        hasShape: true,
@@ -64428,6 +64438,32 @@
 	        }
 	        return lineMark;
 	    }
+	    _getEventElement(params, reverse = false) {
+	        let data = [];
+	        params.dimensionInfo.some(df => {
+	            df.data.some(dd => {
+	                if (dd.series === this) {
+	                    data = dd.datum;
+	                    return true;
+	                }
+	                return false;
+	            });
+	            return !data.length;
+	        });
+	        return data;
+	    }
+	    _dimensionTrigger(params) {
+	        const elements = this._getEventElement(params);
+	        switch (params.action) {
+	            case 'enter':
+	                this._symbolActiveMark.getDataView().parse(elements);
+	                this._symbolActiveMark.getData().updateData(false);
+	                break;
+	            case 'leave':
+	                this._symbolActiveMark.getDataView().parse([]);
+	                this._symbolActiveMark.getData().updateData(false);
+	        }
+	    }
 	    initSymbolMark(progressive, isSeriesMark) {
 	        this._symbolMark = this._createMark(lineLikeSeriesMarkMap.point, {
 	            morph: shouldDoMorph(this._spec.animation, this._spec.morph, userAnimationConfig('point', this._spec)),
@@ -64437,34 +64473,65 @@
 	            progressive,
 	            isSeriesMark: !!isSeriesMark
 	        });
+	        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`, type: MarkTypeEnum.symbol }, {
+	                morph: false,
+	                groupKey: this._seriesField,
+	                label: null,
+	                isSeriesMark: false,
+	                dataView: activeData
+	            });
+	            this._symbolActiveMark.setVisible(false);
+	        }
 	        return this._symbolMark;
 	    }
 	    initSymbolMarkStyle() {
 	        const symbolMark = this._symbolMark;
-	        if (symbolMark) {
+	        if (!symbolMark) {
+	            return symbolMark;
+	        }
+	        this.setMarkStyle(symbolMark, {
+	            fill: this.getColorAttribute()
+	        }, 'normal', AttributeLevel.Series);
+	        if (this._invalidType) {
 	            this.setMarkStyle(symbolMark, {
-	                fill: this.getColorAttribute()
-	            }, 'normal', AttributeLevel.Series);
-	            if (this._invalidType) {
-	                this.setMarkStyle(symbolMark, {
-	                    visible: (datum) => {
-	                        if (this._invalidType === 'break') {
-	                            return couldBeValidNumber(datum[this.getStackValueField()]);
-	                        }
-	                        else if (this._invalidType === 'link') {
-	                            return couldBeValidNumber(datum[this.getStackValueField()]);
-	                        }
-	                        return true;
+	                visible: (datum) => {
+	                    if (this._invalidType === 'break') {
+	                        return couldBeValidNumber(datum[this.getStackValueField()]);
 	                    }
-	                }, 'normal', AttributeLevel.Series);
-	            }
-	            this.setMarkStyle(symbolMark, {
-	                x: this.dataToPositionX.bind(this),
-	                y: this.dataToPositionY.bind(this),
-	                z: this.dataToPositionZ.bind(this)
+	                    else if (this._invalidType === 'link') {
+	                        return couldBeValidNumber(datum[this.getStackValueField()]);
+	                    }
+	                    return true;
+	                }
 	            }, 'normal', AttributeLevel.Series);
-	            this._trigger.registerMark(symbolMark);
-	            this._tooltipHelper?.activeTriggerSet.mark.add(symbolMark);
+	        }
+	        this.setMarkStyle(symbolMark, {
+	            x: this.dataToPositionX.bind(this),
+	            y: this.dataToPositionY.bind(this),
+	            z: this.dataToPositionZ.bind(this)
+	        }, 'normal', AttributeLevel.Series);
+	        this._trigger.registerMark(symbolMark);
+	        this._tooltipHelper?.activeTriggerSet.mark.add(symbolMark);
+	        if (this._symbolActiveMark && this._symbolMark.stateStyle.dimension_hover) {
+	            this._symbolActiveMark.setVisible(true);
+	            this.event.on(DimensionEventEnum.dimensionHover, this._dimensionTrigger.bind(this));
+	            for (const state in this._symbolMark.stateStyle) {
+	                this._symbolActiveMark.stateStyle[state] = {};
+	                for (const key in this._symbolMark.stateStyle[state]) {
+	                    this._symbolActiveMark.stateStyle[state][key] = {
+	                        style: null,
+	                        level: AttributeLevel.Series,
+	                        referer: symbolMark
+	                    };
+	                }
+	            }
+	            this._symbolActiveMark.state.changeStateInfo({
+	                stateValue: STATE_VALUE_ENUM.STATE_DIMENSION_HOVER,
+	                filter: () => true
+	            });
 	        }
 	        return symbolMark;
 	    }
@@ -76337,7 +76404,8 @@
 	            point: spec.point,
 	            line: spec.line,
 	            area: spec.area,
-	            seriesMark: spec.seriesMark ?? 'area'
+	            seriesMark: spec.seriesMark ?? 'area',
+	            activePoint: spec.activePoint
 	        };
 	    }
 	    transformSpec(spec) {
@@ -76885,7 +76953,8 @@
 	            invalidType: spec.invalidType || 'break',
 	            point: spec.point,
 	            line: spec.line,
-	            seriesMark: spec.seriesMark ?? 'line'
+	            seriesMark: spec.seriesMark ?? 'line',
+	            activePoint: spec.activePoint
 	        };
 	    }
 	    transformSpec(spec) {
@@ -77180,7 +77249,8 @@
 	            area: merge$2({
 	                visible: false
 	            }, spec.area),
-	            seriesMark: spec.seriesMark ?? 'area'
+	            seriesMark: spec.seriesMark ?? 'area',
+	            activePoint: spec.activePoint
 	        };
 	    }
 	    transformSpec(spec) {
@@ -83711,7 +83781,7 @@
 	        };
 	    }
 	    _getTitleAttrs() {
-	        const realWidth = this._spec.width ?? this.getLayoutRect().width;
+	        const realWidth = Math.max(0, this._spec.width ?? this.getLayoutRect().width);
 	        return {
 	            text: this._spec.text ?? '',
 	            subtext: this._spec.subtext ?? '',
@@ -86652,8 +86722,6 @@
 	        ...globalSpec,
 	        activeType
 	    };
-	    let defaultPattern = {};
-	    let userPattern = {};
 	    if (activeType === 'mark' && series) {
 	        const seriesSpec = (series.tooltipHelper?.spec ?? {});
 	        if (isValid(seriesSpec.visible) || isValid(seriesSpec.activeType)) {
@@ -86669,11 +86737,9 @@
 	        if (finalSpec.handler?.showTooltip) {
 	            return finalSpec;
 	        }
-	        defaultPattern = makeDefaultPattern(series, 'mark') ?? {};
-	        userPattern = merge$2({}, cloneDeep(globalSpec.mark), cloneDeep(seriesSpec.mark));
 	    }
 	    else if (activeType === 'dimension' && dimensionInfo?.length) {
-	        const seriesList = dimensionInfo.reduce((list, cur) => list.concat(cur.data.map(data => data.series).filter(isValid)), []);
+	        const seriesList = getSeriesListFromDimensionInfo(dimensionInfo);
 	        if (seriesList.every(series => !getTooltipActualActiveType(series.tooltipHelper?.spec).includes('dimension'))) {
 	            finalSpec.visible = false;
 	        }
@@ -86687,6 +86753,83 @@
 	        if (finalSpec.handler?.showTooltip) {
 	            return finalSpec;
 	        }
+	    }
+	    const defaultPattern = getDefaultTooltipPattern(activeType, series, dimensionInfo);
+	    const seriesPattern = getSeriesTooltipPattern(activeType, series, dimensionInfo);
+	    const userPattern = merge$2({}, cloneDeep(globalSpec[activeType]), seriesPattern);
+	    const defaultPatternTitle = defaultPattern.title;
+	    const titleShape = getShapePattern(undefined, userPattern, undefined, defaultPatternTitle);
+	    if (isValid(userPattern.title)) {
+	        if (!isFunction(userPattern.title)) {
+	            userPattern.title = {
+	                ...defaultPattern.title,
+	                ...titleShape,
+	                ...userPattern.title
+	            };
+	        }
+	        else {
+	            const userPatternTitle = userPattern.title;
+	            userPattern.title = (data, params) => {
+	                const userResult = userPatternTitle(data, params) ?? {};
+	                return {
+	                    ...titleShape,
+	                    ...userResult
+	                };
+	            };
+	        }
+	    }
+	    else {
+	        userPattern.title = {
+	            ...defaultPattern.title,
+	            ...titleShape
+	        };
+	    }
+	    const defaultPatternContent = array(defaultPattern.content);
+	    if (isValid(userPattern.content)) {
+	        const shapePatternMap = getShapePatternMapOfEachSeries(defaultPatternContent);
+	        if (!isFunction(userPattern.content)) {
+	            const newPatternContent = [];
+	            array(userPattern.content).forEach(userLine => {
+	                newPatternContent.push({
+	                    ...getShapePattern(userLine, userPattern, shapePatternMap),
+	                    ...userLine
+	                });
+	            });
+	            userPattern.content = newPatternContent;
+	        }
+	        else {
+	            const userPatternContent = userPattern.content;
+	            userPattern.content = (data, params) => {
+	                const newPatternContent = [];
+	                array(userPatternContent(data, params) ?? []).forEach(userLine => {
+	                    newPatternContent.push({
+	                        ...getShapePattern(userLine, userPattern, shapePatternMap),
+	                        ...userLine
+	                    });
+	                });
+	                return newPatternContent;
+	            };
+	        }
+	    }
+	    else {
+	        userPattern.content = defaultPatternContent.map(line => ({
+	            ...line,
+	            ...getShapePattern(undefined, userPattern, undefined, line)
+	        }));
+	    }
+	    finalSpec[activeType] = {
+	        ...defaultPattern,
+	        ...userPattern,
+	        activeType
+	    };
+	    return finalSpec;
+	};
+	const getDefaultTooltipPattern = (activeType, series, dimensionInfo) => {
+	    let defaultPattern = {};
+	    if (activeType === 'mark' && series) {
+	        defaultPattern = makeDefaultPattern(series, 'mark') ?? {};
+	    }
+	    else if (activeType === 'dimension' && dimensionInfo?.length) {
 	        const patternList = [];
 	        dimensionInfo[0].data.forEach(data => {
 	            const { series } = data;
@@ -86714,16 +86857,23 @@
 	            ...patternList[0],
 	            content: defaultPatternContent
 	        };
-	        let seriesDimensionPattern = {};
+	    }
+	    return defaultPattern;
+	};
+	const getSeriesTooltipPattern = (activeType, series, dimensionInfo) => {
+	    let seriesPattern = {};
+	    if (activeType === 'mark' && series) {
+	        const seriesSpec = (series.tooltipHelper?.spec ?? {});
+	        seriesPattern = seriesSpec.mark ? cloneDeep(seriesSpec.mark) : {};
+	    }
+	    else if (activeType === 'dimension' && dimensionInfo?.length) {
+	        const seriesList = getSeriesListFromDimensionInfo(dimensionInfo);
 	        const seriesPatternList = seriesList
 	            .filter(series => {
 	            const spec = series.tooltipHelper?.spec;
 	            return isValid(spec?.dimension) && getTooltipActualActiveType(spec).includes('dimension');
 	        })
-	            .map(series => {
-	            const pattern = series.tooltipHelper.spec.dimension;
-	            return pattern;
-	        });
+	            .map(series => series.tooltipHelper.spec.dimension);
 	        if (seriesPatternList.length) {
 	            let seriesPatternContent = [];
 	            if (seriesPatternList.every(({ content }) => isNil(content))) {
@@ -86742,86 +86892,38 @@
 	                    }
 	                });
 	            }
-	            seriesDimensionPattern = {
+	            seriesPattern = {
 	                ...seriesPatternList[0],
 	                content: seriesPatternContent
 	            };
 	        }
-	        userPattern = merge$2({}, cloneDeep(globalSpec.dimension), seriesDimensionPattern);
 	    }
-	    const defaultPatternTitle = defaultPattern.title;
-	    const titleShape = {
-	        hasShape: userPattern.hasShape ?? defaultPatternTitle?.hasShape,
-	        shapeType: userPattern.shapeType ?? defaultPatternTitle?.shapeType,
-	        shapeColor: userPattern.shapeColor ?? defaultPatternTitle?.shapeColor
-	    };
-	    if (isValid(userPattern.title)) {
-	        if (!isFunction(userPattern.title)) {
-	            userPattern.title = {
-	                ...defaultPattern.title,
-	                ...titleShape,
-	                ...userPattern.title
-	            };
-	        }
-	        else {
-	            const userPatternTitle = userPattern.title;
-	            userPattern.title = (data, params) => {
-	                const userResult = userPatternTitle(data, params) ?? {};
-	                return {
-	                    ...titleShape,
-	                    ...userResult
-	                };
-	            };
+	    return seriesPattern;
+	};
+	const getSeriesListFromDimensionInfo = (dimensionInfo) => {
+	    return dimensionInfo.reduce((list, cur) => list.concat(cur.data.map(data => data.series).filter(isValid)), []);
+	};
+	const getShapePatternMapOfEachSeries = (content) => {
+	    const shapePatternMap = {};
+	    content.forEach(line => {
+	        const key = line.seriesId ?? 0;
+	        if (!shapePatternMap[key]) {
+	            shapePatternMap[key] = line;
 	        }
-	    }
-	    else {
-	        userPattern.title = {
-	            ...defaultPattern.title,
-	            ...titleShape
-	        };
-	    }
-	    const getContentShape = (defaultContentLine) => ({
-	        hasShape: userPattern.hasShape ?? defaultContentLine?.hasShape,
-	        shapeType: userPattern.shapeType ?? defaultContentLine?.shapeType,
-	        shapeColor: userPattern.shapeColor ?? defaultContentLine?.shapeColor
 	    });
-	    const defaultPatternContent = array(defaultPattern.content);
-	    if (isValid(userPattern.content)) {
-	        if (!isFunction(userPattern.content)) {
-	            const userPatternContent = array(userPattern.content);
-	            userPatternContent.forEach((line, i) => {
-	                userPatternContent[i] = {
-	                    ...getContentShape(defaultPatternContent[0]),
-	                    ...line
-	                };
-	            });
-	        }
-	        else {
-	            const userPatternContent = userPattern.content;
-	            userPattern.content = (data, params) => {
-	                const userResult = array(userPatternContent(data, params) ?? []);
-	                userResult.forEach((line, i) => {
-	                    userResult[i] = {
-	                        ...getContentShape(defaultPatternContent[0]),
-	                        ...line
-	                    };
-	                });
-	                return userResult;
-	            };
+	    return shapePatternMap;
+	};
+	const getShapePattern = (userLinePattern, userPattern, shapePatternMap, defaultShapePattern) => {
+	    const shapePatternFromMap = shapePatternMap?.[userLinePattern?.seriesId ?? 0] ?? shapePatternMap?.[0];
+	    const shapeKeys = ['hasShape', 'shapeType', 'shapeColor'];
+	    const shapePattern = {};
+	    shapeKeys.forEach(key => {
+	        const value = userLinePattern?.[key] ?? userPattern?.[key] ?? shapePatternFromMap?.[key] ?? defaultShapePattern?.[key];
+	        if (value !== undefined) {
+	            shapePattern[key] = value;
 	        }
-	    }
-	    else {
-	        userPattern.content = defaultPatternContent.map(line => ({
-	            ...line,
-	            ...getContentShape(line)
-	        }));
-	    }
-	    finalSpec[activeType] = {
-	        ...defaultPattern,
-	        ...userPattern,
-	        activeType
-	    };
-	    return finalSpec;
+	    });
+	    return shapePattern;
 	};
 
 	const getActualTooltipPositionValue = (position, event) => {