@visactor/vchart 1.1.0-beta.4 → 1.1.0-beta.5

package/build/index.js

@@ -33725,7 +33725,10 @@
         let attributes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         if (this.graphicItem) return;
         const attrs = Object.assign({}, attributes);
-        this.graphicItem = this.mark.addGraphicItem(attrs, this.groupKey), this.graphicItem[BridgeElementKey] = this, this.graphicItem.onBeforeAttributeUpdate = attributes => transformAttributes(this.mark.getAttributeTransforms(), attributes, this), this.graphicItem.setAttributes(this.graphicItem.attribute), this.clearGraphicAttributes(), this.mark.needAnimate() && (this.setPrevGraphicAttributes({}), this.setNextGraphicAttributes(attributes), this.setFinalGraphicAttributes(attributes));
+        this.graphicItem = this.mark.addGraphicItem(attrs, this.groupKey), this.graphicItem[BridgeElementKey] = this, this.graphicItem.onBeforeAttributeUpdate = attributes => {
+          if (!this.mark) return attributes;
+          return transformAttributes(this.mark.getAttributeTransforms(), attributes, this);
+        }, this.graphicItem.setAttributes(this.graphicItem.attribute), this.clearGraphicAttributes(), this.mark.needAnimate() && (this.setPrevGraphicAttributes({}), this.setNextGraphicAttributes(attributes), this.setFinalGraphicAttributes(attributes));
       }
       updateGraphicItem(config) {
         var _a;
@@ -33948,10 +33951,8 @@
         this.graphicItem && (removeGraphicItem(this.graphicItem), this.graphicItem = null);
       }
       release() {
-        var _a;
-        null === (_a = this.mark) || void 0 === _a || _a.animate.getElementAnimators(this).forEach(animator => {
-          animator.stop();
-        }), this.mark = null, this.data = null, this.graphicItem && (removeGraphicItem(this.graphicItem), this.graphicItem[BridgeElementKey] = null, this.graphicItem = null), this.items = null;
+        var _a, _b;
+        this.graphicItem && (null === (_b = null === (_a = this.graphicItem.animates) || void 0 === _a ? void 0 : _a.forEach) || void 0 === _b || _b.call(_a, animate => animate.stop())), this.mark = null, this.data = null, this.graphicItem && (removeGraphicItem(this.graphicItem), this.graphicItem[BridgeElementKey] = null, this.graphicItem = null), this.items = null;
       }
       getItemAttribute(channel) {
         var _a, _b;
@@ -36479,7 +36480,10 @@
         const glyphMarks = this.glyphMeta.getMarks();
         this.glyphGraphicItems = {}, this.graphicItem.getSubGraphic().forEach(graphic => {
           const markType = glyphMarks[graphic.name];
-          this.glyphGraphicItems[graphic.name] = graphic, graphic.onBeforeAttributeUpdate = attributes => transformAttributes(markType, attributes, this, graphic.name);
+          this.glyphGraphicItems[graphic.name] = graphic, graphic.onBeforeAttributeUpdate = attributes => {
+            if (!this.mark) return attributes;
+            return transformAttributes(markType, attributes, this, graphic.name);
+          };
         }), this.clearGraphicAttributes();
       }
       useStates(states, hasAnimation) {
@@ -36533,6 +36537,7 @@
       _onGlyphAttributeUpdate() {
         let first = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
         return attributes => {
+          if (!this.mark) return attributes;
           const glyphMarks = this.glyphMeta.getMarks(),
             graphicAttributes = transformAttributes(this.mark.getAttributeTransforms(), attributes, this),
             defaultEncodeValues = first ? this.encodeDefault() : null,
@@ -49152,8 +49157,14 @@
         static instanceExist(id) {
             return InstanceManager.instances.has(id);
         }
-        static forEach(callbackfn, thisArg) {
-            return InstanceManager.instances.forEach(callbackfn, thisArg);
+        static forEach(callbackfn, excludeId = [], thisArg) {
+            const excludeIdList = array(excludeId);
+            return InstanceManager.instances.forEach((instance, id, map) => {
+                if (excludeIdList.includes(id)) {
+                    return;
+                }
+                callbackfn(instance, id, map);
+            }, thisArg);
         }
     }
 
@@ -49210,6 +49221,11 @@
             ...(option ?? {})
         }, textSpec);
     };
+    const richText = createRichText({});
+    function getRichTextBounds(params) {
+        richText.setAttributes(params);
+        return richText.AABBBounds;
+    }
 
     function mergeFields(targetFields, mergeFields) {
         for (let i = 0; i < mergeFields.length; i++) {
@@ -50900,11 +50916,14 @@
         static getMap(key) {
             return getMapSource(key);
         }
-        static hideTooltip() {
-            InstanceManager.forEach(instance => instance?.hideTooltip?.());
+        static hideTooltip(excludeId = []) {
+            InstanceManager.forEach(instance => instance?.hideTooltip?.(), excludeId);
         }
         static InstanceManager = InstanceManager;
         static ThemeManager = ThemeManager;
+        static globalConfig = {
+            uniqueTooltip: true
+        };
         _spec;
         _viewBox;
         _chart;
@@ -54112,7 +54131,7 @@
     VChart.useMark([ComponentMark, GroupMark]);
     Factory.registerRegion('region', Region);
     Factory.registerLayout('base', Layout);
-    const version = "1.1.0-beta.4";
+    const version = "1.1.0-beta.5";
 
     var SeriesMarkNameEnum;
     (function (SeriesMarkNameEnum) {
@@ -56440,6 +56459,10 @@
                 itemMap: new Map()
             };
             tooltipHandler?.showTooltip?.(activeType, mockDimensionInfo, mockParams);
+            const vchart = componentOptions.globalInstance;
+            if (VChart.globalConfig.uniqueTooltip) {
+                VChart.hideTooltip(vchart.id);
+            }
             return activeType;
         }
         else if (activeType === 'mark') {
@@ -56467,6 +56490,10 @@
                     series: info.series
                 }
             ], mockParams);
+            const vchart = componentOptions.globalInstance;
+            if (VChart.globalConfig.uniqueTooltip) {
+                VChart.hideTooltip(vchart.id);
+            }
             return activeType;
         }
         return 'none';
@@ -74019,7 +74046,7 @@
                 outliersField: spec.outliersField,
                 outliersStyle: spec.outliersStyle
             };
-            seriesSpec[spec.direction === Direction$2.vertical ? 'yField' : 'xField'] = dataFields;
+            seriesSpec[seriesSpec.direction === Direction$2.vertical ? 'yField' : 'xField'] = dataFields;
             return seriesSpec;
         }
         transformSpec(spec) {
@@ -74034,19 +74061,6 @@
                     }
                 ];
             }
-            (spec.axes ?? []).forEach(axis => {
-                const { orient, type } = axis;
-                if (orient === 'left') {
-                    if (isNil(type)) {
-                        axis.type = spec.direction === Direction$2.vertical ? 'linear' : 'band';
-                    }
-                }
-                if (orient === 'bottom') {
-                    if (isNil(type)) {
-                        axis.type = spec.direction === Direction$2.vertical ? 'band' : 'linear';
-                    }
-                }
-            });
             setDefaultCrosshairForCartesianChart(spec);
         }
     }
@@ -83738,6 +83752,24 @@
         }
     }
 
+    const TOOLTIP_EL_CLASS_NAME = 'vchart-tooltip-element';
+    const TOOLTIP_CONTAINER_EL_CLASS_NAME = 'vchart-tooltip-container';
+    const TOOLTIP_MAX_LINE_COUNT = 20;
+    const TOOLTIP_EMPTY_STRING = '';
+    const TOOLTIP_OTHERS_LINE = {
+        key: '其他',
+        value: '...'
+    };
+    const DEFAULT_OPTIONS = {
+        offsetX: 10,
+        offsetY: 10,
+        sanitize: escapeHTML
+    };
+    class TooltipHandlerType {
+        static dom = `${PREFIX}_TOOLTIP_HANDLER_DOM`;
+        static canvas = `${PREFIX}_TOOLTIP_HANDLER_CANVAS`;
+    }
+
     const getShowContent = (pattern, data, params) => {
         if (!data ||
             params?.event?.type === 'mouseout') {
@@ -84094,9 +84126,13 @@
         const { visible: titleVisible = true, value: titleValue = '', hasShape: titleHasShape, shapeType: titleShapeType = '', shapeHollow: titleShapeHollow, shapeColor: titleShapeColor } = title;
         attribute.title.visible = titleVisible;
         if (titleVisible) {
-            const { width, height } = initTextMeasure(titleStyle).quickMeasure(titleValue);
+            const { text, width, height } = measureTooltipText(titleValue, titleStyle);
             attribute.title.value = {
-                text: titleValue
+                width,
+                height,
+                text,
+                multiLine: titleStyle.multiLine,
+                wordBreak: titleStyle.wordBreak
             };
             maxWidth = width;
             titleMaxHeight = height;
@@ -84130,16 +84166,18 @@
                 const keyWidths = [];
                 const adaptiveKeyWidths = [];
                 const valueWidths = [];
-                const keyTextMeasure = initTextMeasure(keyStyle);
-                const valueTextMeasure = initTextMeasure(valueStyle);
                 attribute.content = filteredContent.map((item, i) => {
                     const itemAttrs = { height: 0, spaceRow };
                     let itemHeight = 0;
                     const { hasShape, key, shapeColor, shapeHollow, shapeType = '', value, isKeyAdaptive } = item;
                     if (isValid(key)) {
-                        const { width, height } = keyTextMeasure.quickMeasure(key);
+                        const { width, height, text } = measureTooltipText(key, keyStyle);
                         itemAttrs.key = {
-                            text: key
+                            width,
+                            height,
+                            text,
+                            multiLine: keyStyle.multiLine,
+                            wordBreak: titleStyle.wordBreak
                         };
                         if (!isKeyAdaptive) {
                             keyWidths.push(width);
@@ -84150,9 +84188,13 @@
                         itemHeight = Math.max(itemHeight, height);
                     }
                     if (isValid(value)) {
-                        const { width, height } = valueTextMeasure.quickMeasure(value);
+                        const { width, height, text } = measureTooltipText(value, valueStyle);
                         itemAttrs.value = {
-                            text: value
+                            width,
+                            height,
+                            text,
+                            multiLine: valueStyle.multiLine,
+                            wordBreak: titleStyle.wordBreak
                         };
                         valueWidths.push(width);
                         itemHeight = Math.max(itemHeight, height);
@@ -84200,6 +84242,42 @@
         attribute.panel.height = containerSize.height;
         return attribute;
     };
+    const measureTooltipText = (text, style) => {
+        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: style.wordBreak,
+                maxWidth: style.maxWidth,
+                width: 0,
+                height: 0,
+                textConfig: textLines.map((line, i) => ({
+                    ...style,
+                    text: line
+                }))
+            });
+            return {
+                width: bound.width(),
+                height: bound.height(),
+                text: textLines
+            };
+        }
+        return {
+            width,
+            height,
+            text: textLines
+        };
+    };
 
     function getTextAttributes(style = {}, globalTheme) {
         const attrs = {
@@ -84210,29 +84288,14 @@
             fontSize: style.fontSize,
             fontWeight: style.fontWeight,
             lineHeight: style.lineHeight,
-            spacing: style.spacing ?? 10
+            spacing: style.spacing ?? 10,
+            multiLine: style.multiLine ?? false,
+            maxWidth: style.maxWidth,
+            wordBreak: style.wordBreak ?? 'break-word'
         };
         return attrs;
     }
 
-    const TOOLTIP_EL_CLASS_NAME = 'vchart-tooltip-element';
-    const TOOLTIP_CONTAINER_EL_CLASS_NAME = 'vchart-tooltip-container';
-    const TOOLTIP_MAX_LINE_COUNT = 20;
-    const TOOLTIP_EMPTY_STRING = '';
-    const TOOLTIP_OTHERS_LINE = {
-        key: '其他',
-        value: '...'
-    };
-    const DEFAULT_OPTIONS = {
-        offsetX: 10,
-        offsetY: 10,
-        sanitize: escapeHTML
-    };
-    class TooltipHandlerType {
-        static dom = `${PREFIX}_TOOLTIP_HANDLER_DOM`;
-        static canvas = `${PREFIX}_TOOLTIP_HANDLER_CANVAS`;
-    }
-
     var TooltipResult;
     (function (TooltipResult) {
         TooltipResult[TooltipResult["success"] = 0] = "success";
@@ -84688,7 +84751,7 @@
         if (!labelStyle) {
             return undefined;
         }
-        const { fontFamily: labelFont, fontSize: labelFontSize, fill: labelColor, textAlign, lineHeight, fontWeight } = merge$1({}, defaultStyle, labelStyle);
+        const { fontFamily: labelFont, fontSize: labelFontSize, fill: labelColor, textAlign, lineHeight, fontWeight, multiLine, wordBreak, maxWidth } = merge$1({}, defaultStyle, labelStyle);
         const styleObj = {};
         styleObj.fontFamily = labelFont;
         styleObj.fontSize = getPixelPropertyStr(labelFontSize);
@@ -84696,6 +84759,9 @@
         styleObj.textAlign = textAlign;
         styleObj.lineHeight = getPixelPropertyStr(lineHeight);
         styleObj.fontWeight = fontWeight;
+        styleObj.whiteSpace = multiLine ? 'initial' : 'nowrap';
+        styleObj.wordBreak = wordBreak;
+        styleObj.maxWidth = getPixelPropertyStr(maxWidth);
         return styleObj;
     }
     function getShapeStyle(shapeStyle, defaultStyle) {
@@ -84705,7 +84771,6 @@
         const { size } = merge$1({}, defaultStyle, shapeStyle);
         const styleObj = {};
         styleObj.width = getPixelPropertyStr(size);
-        styleObj.height = styleObj.width;
         return styleObj;
     }
 
@@ -84894,14 +84959,14 @@
         if (!option?.hasShape || !option.shapeType || !builtinSymbolsMap[option.shapeType]) {
             return '';
         }
-        const { shapeType, size, color, hollow = false } = option;
+        const { shapeType, size, color, hollow = false, marginTop = '0px' } = option;
         const path = builtinSymbolsMap[shapeType].pathStr;
         let fill = 'currentColor';
         if (!color || isString(color) || hollow) {
             fill = hollow ? 'none' : color ?? 'currentColor';
             return `
-    <svg width="${size}"
-      height="${size}" viewBox="-0.5 -0.5 1 1" style="display: inline-block; vertical-align: middle;">
+    <svg width="${size}" height="${size}" viewBox="-0.5 -0.5 1 1"
+      style="display: inline-block; vertical-align: middle; margin-top: ${marginTop};">
       <path fill="${fill}" d="${path}" style="fill: ${fill};">
       </path>
     </svg>`;
@@ -84924,8 +84989,8 @@
       `;
             }
             return `
-    <svg width="${size}" height="${size}"
-      viewBox="-0.5 -0.5 1 1" style="display: inline-block; vertical-align: middle;">
+    <svg width="${size}" height="${size}" viewBox="-0.5 -0.5 1 1"
+      style="display: inline-block; vertical-align: middle; margin-top: ${marginTop};">
       ${gradient}
       <path fill="url(#${fill})" d="${path}" style="fill: url(#${fill});">
       </path>
@@ -84940,13 +85005,16 @@
                 this.product = this.createElement(tag ?? 'span', classList, undefined, id);
             }
         }
-        setContent(content) {
+        setContent(content, multiLine) {
             if (!this.product) {
                 return;
             }
-            const html = this._option.valueToHtml(content);
+            let html = this._option.valueToHtml(content);
+            if (multiLine) {
+                html = html.replaceAll('\n', '<br>');
+            }
             if (html !== this.product.innerHTML) {
-                this.product.innerHTML = this._option.valueToHtml(content);
+                this.product.innerHTML = html;
             }
         }
     }
@@ -84997,12 +85065,13 @@
             const tooltipStyle = this._option.getTooltipStyle();
             super.setStyle(merge$1({}, defaultContentColumnStyle, tooltipStyle.content, this._getContentColumnStyle()));
             const renderContent = this._option.getTooltipActual()?.content ?? [];
+            const contentAttributes = this._option.getTooltipAttributes()?.content ?? [];
             renderContent.forEach((line, i) => {
                 let childStyle = {};
                 if (this.className === 'key-box') {
                     const { key, isKeyAdaptive } = line;
                     childStyle = merge$1({}, isKeyAdaptive ? defaultAdaptiveKeyStyle : defaultKeyStyle, {
-                        height: `${100 / renderContent.length}%`,
+                        height: getPixelPropertyStr(contentAttributes[i].height),
                         ...tooltipStyle.keyColumn.item
                     });
                     const hasContent = (isString(key) && key?.trim?.() !== '') || isNumber(key);
@@ -85016,27 +85085,23 @@
                 }
                 else if (this.className === 'value-box') {
                     childStyle = merge$1({}, defaultValueStyle, {
-                        height: `${100 / renderContent.length}%`,
+                        height: getPixelPropertyStr(contentAttributes[i].height),
                         ...tooltipStyle.valueColumn.item
                     });
                     this.children[i].setStyle(childStyle);
                 }
                 else if (this.className === 'shape-box') {
-                    childStyle = merge$1({}, defaultShapeStyle, tooltipStyle.shapeColumn.item);
-                    const childContent = {
-                        hasShape: line.hasShape,
-                        shapeType: line.shapeType,
-                        size: tooltipStyle.shapeColumn.item?.width,
-                        color: line.shapeColor,
-                        hollow: line.shapeHollow
-                    };
-                    this.children[i]?.setStyle(childStyle, childContent);
+                    childStyle = merge$1({}, defaultShapeStyle, {
+                        height: getPixelPropertyStr(contentAttributes[i].height),
+                        ...tooltipStyle.shapeColumn.item
+                    });
+                    this.children[i]?.setStyle(childStyle, this._getShapeSvgOption(line));
                 }
             });
         }
         setContent() {
-            const tooltipStyle = this._option.getTooltipStyle();
             const renderContent = this._option.getTooltipActual()?.content ?? [];
+            const contentAttributes = this._option.getTooltipAttributes()?.content ?? [];
             renderContent.forEach((line, i) => {
                 let childContent;
                 if (this.className === 'key-box') {
@@ -85047,6 +85112,7 @@
                     else {
                         childContent = TOOLTIP_EMPTY_STRING;
                     }
+                    this.children[i]?.setContent(childContent, contentAttributes[i].value?.multiLine);
                 }
                 else if (this.className === 'value-box') {
                     const valueContent = line.value;
@@ -85056,17 +85122,12 @@
                     else {
                         childContent = TOOLTIP_EMPTY_STRING;
                     }
+                    this.children[i]?.setContent(childContent, contentAttributes[i].value?.multiLine);
                 }
                 else if (this.className === 'shape-box') {
-                    childContent = {
-                        hasShape: line.hasShape,
-                        shapeType: line.shapeType,
-                        size: tooltipStyle.shapeColumn.item?.width,
-                        color: line.shapeColor,
-                        hollow: line.shapeHollow
-                    };
+                    childContent = this._getShapeSvgOption(line);
+                    this.children[i]?.setContent(childContent);
                 }
-                this.children[i]?.setContent(childContent);
             });
         }
         _getContentColumnStyle() {
@@ -85086,6 +85147,17 @@
                     return tooltipStyle.valueColumn;
             }
         }
+        _getShapeSvgOption(line) {
+            const tooltipStyle = this._option.getTooltipStyle();
+            return {
+                hasShape: line.hasShape,
+                shapeType: line.shapeType,
+                size: tooltipStyle.shapeColumn.item?.width,
+                color: line.shapeColor,
+                hollow: line.shapeHollow,
+                marginTop: `calc((${tooltipStyle.keyColumn.item?.lineHeight ?? tooltipStyle.keyColumn.item?.fontSize ?? '18px'} - ${tooltipStyle.shapeColumn.item?.width ?? '8px'}) / 2)`
+            };
+        }
     }
 
     class ContentModel extends BaseTooltipModel {
@@ -85202,6 +85274,7 @@
         setContent() {
             const tooltipStyle = this._option.getTooltipStyle();
             const tooltipActual = this._option.getTooltipActual();
+            const tooltipAttributes = this._option.getTooltipAttributes();
             const { title } = tooltipActual;
             this.init();
             this.shape?.setStyle(undefined, {
@@ -85211,7 +85284,7 @@
                 color: title?.shapeColor,
                 hollow: title?.shapeHollow
             });
-            this.textSpan?.setContent(title?.value);
+            this.textSpan?.setContent(title?.value, tooltipAttributes.title?.value?.multiLine);
         }
         release() {
             super.release();
@@ -85378,7 +85451,8 @@
                 this.model = new TooltipModel(this._container, {
                     valueToHtml: this._option.sanitize,
                     getTooltipStyle: () => this._domStyle,
-                    getTooltipActual: () => this._tooltipActual
+                    getTooltipActual: () => this._tooltipActual,
+                    getTooltipAttributes: () => this._attributeCache
                 }, [tooltipSpec.className], this.id);
             }
         }
@@ -85815,6 +85889,10 @@
                     this._cacheInfo = tooltipInfo;
                 }
             }
+            const vchart = this._option.globalInstance;
+            if (success && VChart.globalConfig.uniqueTooltip) {
+                VChart.hideTooltip(vchart.id);
+            }
             return success;
         };
         _getMouseEventData = (params) => {