@visactor/vrender-components 0.19.9 → 0.19.10

package/dist/index.es.js

@@ -4271,6 +4271,12 @@ function colorArrayToString(color) {
   return Array.isArray(color) && isNumber(color[0]) ? alphaChannel ? `rgb(${Math.round(color[0])},${Math.round(color[1])},${Math.round(color[2])},${color[3].toFixed(2)})` : `rgb(${Math.round(color[0])},${Math.round(color[1])},${Math.round(color[2])})` : color;
 }
 function interpolateColor(from, to, ratio, alphaChannel, cb) {
+  if (Array.isArray(from) && !isNumber(from[0]) || Array.isArray(to) && !isNumber(to[0])) {
+    return new Array(4).fill(0).map((_, index) => _interpolateColor(isArray(from) ? from[index] : from, isArray(to) ? to[index] : to, ratio, alphaChannel));
+  }
+  return _interpolateColor(from, to, ratio, alphaChannel, cb);
+}
+function _interpolateColor(from, to, ratio, alphaChannel, cb) {
   if (!from || !to) return from && colorArrayToString(from) || to && colorArrayToString(to) || !1;
   let fromArray,
     toArray,
@@ -4781,7 +4787,7 @@ class Graphic extends Node {
       animate.stateNames = stateNames, animate.to(animateAttrs, null !== (_b = null === (_a = this.stateAnimateConfig) || void 0 === _a ? void 0 : _a.duration) && void 0 !== _b ? _b : DefaultStateAnimateConfig.duration, null !== (_d = null === (_c = this.stateAnimateConfig) || void 0 === _c ? void 0 : _c.easing) && void 0 !== _d ? _d : DefaultStateAnimateConfig.easing), noAnimateAttrs && this.setAttributes(noAnimateAttrs, !1, {
         type: AttributeUpdateType.STATE
       });
-    } else this.setAttributes(attrs, !1, {
+    } else this.stopStateAnimates(), this.setAttributes(attrs, !1, {
       type: AttributeUpdateType.STATE
     });
   }
@@ -4811,7 +4817,7 @@ class Graphic extends Node {
     }), value;
   }
   clearStates(hasAnimation) {
-    this.stopStateAnimates(), this.hasState() && this.normalAttrs ? (this.currentStates = [], this.applyStateAttrs(this.normalAttrs, this.currentStates, hasAnimation, !0)) : this.currentStates = [], this.normalAttrs = null;
+    this.hasState() && this.normalAttrs ? (this.currentStates = [], this.applyStateAttrs(this.normalAttrs, this.currentStates, hasAnimation, !0)) : this.currentStates = [], this.normalAttrs = null;
   }
   removeState(stateName, hasAnimation) {
     if ((this.currentStates ? this.currentStates.indexOf(stateName) : -1) >= 0) {
@@ -4837,7 +4843,6 @@ class Graphic extends Node {
     var _a;
     if (!states.length) return void this.clearStates(hasAnimation);
     if (!((null === (_a = this.currentStates) || void 0 === _a ? void 0 : _a.length) !== states.length || states.some((stateName, index) => this.currentStates[index] !== stateName))) return;
-    this.stopStateAnimates();
     const stateAttrs = {};
     states.forEach(stateName => {
       var _a;
@@ -11961,7 +11966,8 @@ var __decorate$z = undefined && undefined.__decorate || function (decorators, ta
     if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
   };
 const DrawItemInterceptor = Symbol.for("DrawItemInterceptor");
-const tempDirtyBounds = new AABBBounds();
+const tempDirtyBounds = new AABBBounds(),
+  tempBackupDirtyBounds = new AABBBounds();
 class ShadowRootDrawItemInterceptorContribution {
   constructor() {
     this.order = 1;
@@ -11978,11 +11984,11 @@ class ShadowRootDrawItemInterceptorContribution {
       context: context
     } = drawContext;
     if (context.highPerformanceSave(), context.transformFromMatrix(graphic.transMatrix, !0), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds) {
-      tempDirtyBounds.copy(drawContribution.dirtyBounds);
+      tempDirtyBounds.copy(drawContribution.dirtyBounds), tempBackupDirtyBounds.copy(drawContribution.backupDirtyBounds);
       const m = graphic.globalTransMatrix.getInverse();
-      drawContribution.dirtyBounds.copy(drawContribution.backupDirtyBounds).transformWithMatrix(m);
+      drawContribution.dirtyBounds.copy(drawContribution.backupDirtyBounds).transformWithMatrix(m), drawContribution.backupDirtyBounds.copy(drawContribution.dirtyBounds);
     }
-    return drawContribution.renderGroup(graphic.shadowRoot, drawContext, graphic.parent.globalTransMatrix), context.highPerformanceRestore(), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds && drawContribution.dirtyBounds.copy(tempDirtyBounds), !0;
+    return drawContribution.renderGroup(graphic.shadowRoot, drawContext, graphic.parent.globalTransMatrix), context.highPerformanceRestore(), drawContribution.dirtyBounds && drawContribution.backupDirtyBounds && (drawContribution.dirtyBounds.copy(tempDirtyBounds), drawContribution.backupDirtyBounds.copy(tempBackupDirtyBounds)), !0;
   }
 }
 class DebugDrawItemInterceptorContribution {
@@ -15397,6 +15403,30 @@ function createTextGraphicByType(textAttributes, typeKey = 'type') {
     }
     return graphicCreator.text(textAttributes);
 }
+function alignTextInLine(layoutAlign, graphic, textAlign, pos, textWidth) {
+    if (layoutAlign === 'right') {
+        if (textAlign === 'center') {
+            graphic.setAttribute('x', pos - textWidth / 2);
+        }
+        else if (textAlign === 'right' || textAlign === 'end') {
+            graphic.setAttribute('x', pos);
+        }
+        else {
+            graphic.setAttribute('x', pos - textWidth);
+        }
+    }
+    else {
+        if (textAlign === 'center') {
+            graphic.setAttribute('x', pos + textWidth / 2);
+        }
+        else if (textAlign === 'right' || textAlign === 'end') {
+            graphic.setAttribute('x', pos + textWidth);
+        }
+        else {
+            graphic.setAttribute('x', pos);
+        }
+    }
+}
 
 const deltaXYToAngle = (y, x) => {
     const angle = Math.atan2(y, x);
@@ -28416,7 +28446,7 @@ class Tooltip extends AbstractComponent {
     }
     render() {
         var _a;
-        const { visible, content, panel, keyWidth, valueWidth, hasContentShape, autoCalculatePosition, autoMeasure } = this.attribute;
+        const { visible, content, panel, keyWidth, valueWidth, hasContentShape, autoCalculatePosition, autoMeasure, align } = this.attribute;
         if (!visible) {
             this.hideAll();
             return;
@@ -28480,103 +28510,122 @@ class Tooltip extends AbstractComponent {
             this._tooltipContent.setAttribute('y', padding[0] + titleHeight);
             let lastYPos = 0;
             content.forEach((item, i) => {
-                var _a, _b, _c;
                 const itemAttr = Tooltip.getContentAttr(this.attribute, i);
                 if (!isVisible(itemAttr)) {
                     return;
                 }
                 const itemGroupName = `${TOOLTIP_CONTENT_NAME}-${i}`;
                 const itemGroup = this._tooltipContent.createOrUpdateChild(itemGroupName, { visible: true, x: 0, y: lastYPos }, 'group');
-                let x = 0;
-                if (isVisible(itemAttr.shape)) {
-                    itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_SHAPE_NAME_SUFFIX}`, Object.assign({ visible: true, x: itemAttr.shape.size / 2, y: itemAttr.shape.size / 2 +
-                            (((_a = calculateLineHeight(itemAttr.key.lineHeight, itemAttr.key.fontSize)) !== null && _a !== void 0 ? _a : itemAttr.key.fontSize) -
-                                itemAttr.shape.size) /
-                                2 }, itemAttr.shape), 'symbol');
-                }
+                const shapeOffsetWidth = itemAttr.shape.size + itemAttr.shape.spacing;
+                let x = align === 'right'
+                    ? (hasContentShape ? shapeOffsetWidth : 0) +
+                        (isVisible(itemAttr.key) ? keyWidth + itemAttr.key.spacing : 0) +
+                        (isVisible(itemAttr.value) ? valueWidth : 0)
+                    : 0;
+                const shapeGraphic = this._createShape(itemAttr, itemGroup, itemGroupName);
                 if (hasContentShape) {
-                    x += itemAttr.shape.size + itemAttr.shape.spacing;
-                }
-                if (isVisible(itemAttr.key)) {
-                    let element;
-                    if (itemAttr.key.multiLine) {
-                        element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_KEY_NAME_SUFFIX}`, Object.assign(Object.assign({ visible: true }, getRichTextAttribute(itemAttr.key)), { textBaseline: 'top' }), 'richtext');
+                    if (shapeGraphic) {
+                        shapeGraphic.setAttribute('x', x);
                     }
-                    else if (typeof itemAttr.key.text === 'object' &&
-                        itemAttr.key.text !== null &&
-                        (itemAttr.key.text.type === 'rich' ||
-                            itemAttr.key.text.type === 'html')) {
-                        if (itemAttr.key.text.type === 'rich') {
-                            element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, Object.assign(Object.assign({ visible: true }, getRichTextAttribute(itemAttr.key)), { textBaseline: 'top' }), 'richtext');
-                        }
-                        else {
-                            element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, {
-                                html: Object.assign(Object.assign({ dom: itemAttr.key.text.text }, DEFAULT_HTML_TEXT_SPEC), itemAttr.key)
-                            }, 'richtext');
-                        }
+                    if (align === 'right') {
+                        x -= shapeOffsetWidth;
                     }
                     else {
-                        element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_KEY_NAME_SUFFIX}`, Object.assign(Object.assign({ visible: true, text: ((_b = itemAttr.key.text) !== null && _b !== void 0 ? _b : '') }, itemAttr.key), { textBaseline: 'top' }), 'text');
+                        x += shapeOffsetWidth;
                     }
-                    const { textAlign } = itemAttr.key;
-                    if (textAlign === 'center') {
-                        element.setAttribute('x', x + keyWidth / 2);
-                    }
-                    else if (textAlign === 'right' || textAlign === 'end') {
-                        element.setAttribute('x', x + keyWidth);
-                    }
-                    else {
-                        element.setAttribute('x', x);
-                    }
-                    element.setAttribute('y', 0);
-                    x += keyWidth + itemAttr.key.spacing;
                 }
-                if (isVisible(itemAttr.value)) {
-                    let element;
-                    if (itemAttr.value.multiLine) {
-                        element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, Object.assign(Object.assign({ visible: true }, getRichTextAttribute(itemAttr.value)), { textBaseline: 'top' }), 'richtext');
-                    }
-                    else if (typeof itemAttr.value.text === 'object' &&
-                        itemAttr.value.text !== null &&
-                        (itemAttr.value.text.type === 'rich' ||
-                            itemAttr.value.text.type === 'html')) {
-                        if (itemAttr.value.text.type === 'rich') {
-                            element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, Object.assign(Object.assign({ visible: true }, getRichTextAttribute(itemAttr.value)), { textBaseline: 'top' }), 'richtext');
-                        }
-                        else {
-                            element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, {
-                                html: Object.assign({ dom: itemAttr.value.text.text, container: '', width: 30, height: 30, style: {} }, itemAttr.value)
-                            }, 'richtext');
-                        }
+                const keyGraphic = this._createKey(itemAttr, itemGroup, itemGroupName);
+                if (keyGraphic) {
+                    alignTextInLine(align, keyGraphic, itemAttr.key.textAlign, x, keyWidth);
+                    keyGraphic.setAttribute('y', 0);
+                    if (align === 'right') {
+                        x -= keyWidth + itemAttr.key.spacing;
                     }
                     else {
-                        element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, Object.assign(Object.assign({ visible: true, text: ((_c = itemAttr.value.text) !== null && _c !== void 0 ? _c : '') }, itemAttr.value), { textBaseline: 'top' }), 'text');
+                        x += keyWidth + itemAttr.key.spacing;
                     }
+                }
+                const valueGraphic = this._createValue(itemAttr, itemGroup, itemGroupName);
+                if (valueGraphic) {
                     let textAlign = 'right';
                     if (isValid(itemAttr.value.textAlign)) {
                         textAlign = itemAttr.value.textAlign;
                     }
-                    else if (!isVisible(itemAttr.key)) {
+                    else if (!isVisible(itemAttr.key) && align !== 'right') {
                         textAlign = 'left';
                     }
-                    element.setAttribute('textAlign', textAlign);
-                    if (textAlign === 'center') {
-                        element.setAttribute('x', x + valueWidth / 2);
-                    }
-                    else if (textAlign === 'right' || textAlign === 'end') {
-                        element.setAttribute('x', x + valueWidth);
-                    }
-                    else {
-                        element.setAttribute('x', x);
-                    }
-                    x += valueWidth;
-                    element.setAttribute('y', 0);
-                    itemGroup.add(element);
+                    valueGraphic.setAttribute('textAlign', textAlign);
+                    alignTextInLine(align, valueGraphic, textAlign, x, valueWidth);
+                    valueGraphic.setAttribute('y', 0);
                 }
                 lastYPos += itemAttr.height + itemAttr.spaceRow;
             });
         }
     }
+    _createShape(itemAttr, itemGroup, itemGroupName) {
+        var _a;
+        if (isVisible(itemAttr.shape)) {
+            return itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_SHAPE_NAME_SUFFIX}`, Object.assign({ visible: true, x: itemAttr.shape.size / 2, y: itemAttr.shape.size / 2 +
+                    (((_a = calculateLineHeight(itemAttr.key.lineHeight, itemAttr.key.fontSize)) !== null && _a !== void 0 ? _a : itemAttr.key.fontSize) -
+                        itemAttr.shape.size) /
+                        2 }, itemAttr.shape), 'symbol');
+        }
+        return;
+    }
+    _createKey(itemAttr, itemGroup, itemGroupName) {
+        var _a;
+        if (isVisible(itemAttr.key)) {
+            let element;
+            if (itemAttr.key.multiLine) {
+                element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_KEY_NAME_SUFFIX}`, Object.assign(Object.assign({ visible: true }, getRichTextAttribute(itemAttr.key)), { textBaseline: 'top' }), 'richtext');
+            }
+            else if (typeof itemAttr.key.text === 'object' &&
+                itemAttr.key.text !== null &&
+                (itemAttr.key.text.type === 'rich' ||
+                    itemAttr.key.text.type === 'html')) {
+                if (itemAttr.key.text.type === 'rich') {
+                    element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, Object.assign(Object.assign({ visible: true }, getRichTextAttribute(itemAttr.key)), { textBaseline: 'top' }), 'richtext');
+                }
+                else {
+                    element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, {
+                        html: Object.assign(Object.assign({ dom: itemAttr.key.text.text }, DEFAULT_HTML_TEXT_SPEC), itemAttr.key)
+                    }, 'richtext');
+                }
+            }
+            else {
+                element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_KEY_NAME_SUFFIX}`, Object.assign(Object.assign({ visible: true, text: ((_a = itemAttr.key.text) !== null && _a !== void 0 ? _a : '') }, itemAttr.key), { textBaseline: 'top' }), 'text');
+            }
+            return element;
+        }
+        return;
+    }
+    _createValue(itemAttr, itemGroup, itemGroupName) {
+        var _a;
+        if (isVisible(itemAttr.value)) {
+            let element;
+            if (itemAttr.value.multiLine) {
+                element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, Object.assign(Object.assign({ visible: true }, getRichTextAttribute(itemAttr.value)), { textBaseline: 'top' }), 'richtext');
+            }
+            else if (typeof itemAttr.value.text === 'object' &&
+                itemAttr.value.text !== null &&
+                (itemAttr.value.text.type === 'rich' ||
+                    itemAttr.value.text.type === 'html')) {
+                if (itemAttr.value.text.type === 'rich') {
+                    element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, Object.assign(Object.assign({ visible: true }, getRichTextAttribute(itemAttr.value)), { textBaseline: 'top' }), 'richtext');
+                }
+                else {
+                    element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, {
+                        html: Object.assign({ dom: itemAttr.value.text.text, container: '', width: 30, height: 30, style: {} }, itemAttr.value)
+                    }, 'richtext');
+                }
+            }
+            else {
+                element = itemGroup.createOrUpdateChild(`${itemGroupName}-${TOOLTIP_VALUE_NAME_SUFFIX}`, Object.assign(Object.assign({ visible: true, text: ((_a = itemAttr.value.text) !== null && _a !== void 0 ? _a : '') }, itemAttr.value), { textBaseline: 'top' }), 'text');
+            }
+            return element;
+        }
+        return;
+    }
     setAttributes(params, forceUpdateTag) {
         const keys = Object.keys(params);
         if (this.attribute.autoCalculatePosition && keys.every(key => TOOLTIP_POSITION_ATTRIBUTES.includes(key))) {
@@ -29084,6 +29133,6 @@ EmptyTip.defaultAttributes = {
     }
 };
 
-const version = "0.19.9";
+const version = "0.19.10";
 
-export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AreaLabel, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupFadeIn, GroupFadeOut, GroupTransition, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineDataLabel, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SizeContinuousLegend, Slider, SymbolLabel, Tag, Title, Tooltip, VTag, angle, angleLabelOrientAttribute, angleTo, clampRadian, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, direction, fuzzyEqualNumber, getCircleLabelPosition, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, loadPoptip, measureTextSize, normalize, reactAttributeTransform, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, removeRepeatPoint, richTextAttributeTransform, scale, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, ticks, traverseGroup, version };
+export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AreaLabel, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupFadeIn, GroupFadeOut, GroupTransition, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineDataLabel, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SizeContinuousLegend, Slider, SymbolLabel, Tag, Title, Tooltip, VTag, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, clampRadian, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, direction, fuzzyEqualNumber, getCircleLabelPosition, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, loadPoptip, measureTextSize, normalize, reactAttributeTransform, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, removeRepeatPoint, richTextAttributeTransform, scale, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, ticks, traverseGroup, version };

package/es/index.d.ts

@@ -1,4 +1,4 @@
-export declare const version = "0.19.9";
+export declare const version = "0.19.10";
 export * from './core/base';
 export * from './core/type';
 export * from './scrollbar';

package/es/index.js

@@ -1,4 +1,4 @@
-export const version = "0.19.9";
+export const version = "0.19.10";
 
 export * from "./core/base";
 

package/es/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC;AAEhC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC","file":"index.js","sourcesContent":["// 导出版本号\nexport const version = \"0.19.9\";\n\nexport * from './core/base';\nexport * from './core/type';\nexport * from './scrollbar';\nexport * from './tag';\nexport * from './poptip';\nexport * from './crosshair';\nexport * from './label';\nexport * from './axis';\nexport * from './axis/grid';\nexport * from './segment';\nexport * from './data-zoom';\nexport * from './marker';\nexport * from './pager';\nexport * from './legend';\nexport * from './title';\nexport * from './indicator';\nexport * from './slider';\nexport * from './link-path';\nexport * from './player';\nexport * from './brush';\nexport * from './tooltip';\nexport * from './interface';\nexport * from './jsx';\nexport * from './checkbox';\nexport * from './radio';\nexport * from './empty-tip';\nexport * from './util';\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,OAAO,GAAG,SAAS,CAAC;AAEjC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC","file":"index.js","sourcesContent":["// 导出版本号\nexport const version = \"0.19.10\";\n\nexport * from './core/base';\nexport * from './core/type';\nexport * from './scrollbar';\nexport * from './tag';\nexport * from './poptip';\nexport * from './crosshair';\nexport * from './label';\nexport * from './axis';\nexport * from './axis/grid';\nexport * from './segment';\nexport * from './data-zoom';\nexport * from './marker';\nexport * from './pager';\nexport * from './legend';\nexport * from './title';\nexport * from './indicator';\nexport * from './slider';\nexport * from './link-path';\nexport * from './player';\nexport * from './brush';\nexport * from './tooltip';\nexport * from './interface';\nexport * from './jsx';\nexport * from './checkbox';\nexport * from './radio';\nexport * from './empty-tip';\nexport * from './util';\n"]}

package/es/tooltip/tooltip.d.ts

@@ -1,3 +1,4 @@
+import type { IGroup, IText, IRichText, ISymbol } from '@visactor/vrender-core';
 import { AbstractComponent } from '../core/base';
 import type { TooltipAttributes, TooltipRowAttrs, TooltipRowStyleAttrs } from './type';
 import type { ComponentOptions } from '../interface';
@@ -11,6 +12,9 @@ export declare class Tooltip extends AbstractComponent<Required<TooltipAttribute
     static defaultAttributes: Partial<TooltipAttributes>;
     constructor(attributes: TooltipAttributes, options?: ComponentOptions);
     protected render(): void;
+    protected _createShape(itemAttr: TooltipRowAttrs & TooltipRowStyleAttrs, itemGroup: IGroup, itemGroupName: string): ISymbol;
+    protected _createKey(itemAttr: TooltipRowAttrs & TooltipRowStyleAttrs, itemGroup: IGroup, itemGroupName: string): IRichText | IText;
+    protected _createValue(itemAttr: TooltipRowAttrs & TooltipRowStyleAttrs, itemGroup: IGroup, itemGroupName: string): IRichText | IText;
     setAttributes(params: Partial<Required<TooltipAttributes>>, forceUpdateTag?: boolean | undefined): void;
     static calculateTooltipPosition(attribute: Partial<TooltipAttributes>): Partial<TooltipAttributes>;
     static measureTooltip(attribute: Partial<TooltipAttributes>): Partial<TooltipAttributes>;

package/es/tooltip/tooltip.js

@@ -4,7 +4,7 @@ import { merge, isValid, normalizePadding, isNil } from "@visactor/vutils";
 
 import { AbstractComponent } from "../core/base";
 
-import { initTextMeasure } from "../util/text";
+import { alignTextInLine, initTextMeasure } from "../util/text";
 
 import { isVisible } from "../util";
 
@@ -27,7 +27,7 @@ export class Tooltip extends AbstractComponent {
     }
     render() {
         var _a;
-        const {visible: visible, content: content, panel: panel, keyWidth: keyWidth, valueWidth: valueWidth, hasContentShape: hasContentShape, autoCalculatePosition: autoCalculatePosition, autoMeasure: autoMeasure} = this.attribute;
+        const {visible: visible, content: content, panel: panel, keyWidth: keyWidth, valueWidth: valueWidth, hasContentShape: hasContentShape, autoCalculatePosition: autoCalculatePosition, autoMeasure: autoMeasure, align: align} = this.attribute;
         if (!visible) return void this.hideAll();
         autoMeasure && Tooltip.measureTooltip(this.attribute), autoCalculatePosition && Tooltip.calculateTooltipPosition(this.attribute);
         const padding = normalizePadding(this.attribute.padding);
@@ -73,77 +73,90 @@ export class Tooltip extends AbstractComponent {
             this._tooltipContent.setAttribute("x", padding[3]), this._tooltipContent.setAttribute("y", padding[0] + titleHeight);
             let lastYPos = 0;
             content.forEach(((item, i) => {
-                var _a, _b, _c;
                 const itemAttr = Tooltip.getContentAttr(this.attribute, i);
                 if (!isVisible(itemAttr)) return;
                 const itemGroupName = `tooltip-content-${i}`, itemGroup = this._tooltipContent.createOrUpdateChild(itemGroupName, {
                     visible: !0,
                     x: 0,
                     y: lastYPos
-                }, "group");
-                let x = 0;
-                if (isVisible(itemAttr.shape) && itemGroup.createOrUpdateChild(`${itemGroupName}-shape`, Object.assign({
-                    visible: !0,
-                    x: itemAttr.shape.size / 2,
-                    y: itemAttr.shape.size / 2 + ((null !== (_a = calculateLineHeight(itemAttr.key.lineHeight, itemAttr.key.fontSize)) && void 0 !== _a ? _a : itemAttr.key.fontSize) - itemAttr.shape.size) / 2
-                }, itemAttr.shape), "symbol"), hasContentShape && (x += itemAttr.shape.size + itemAttr.shape.spacing), 
-                isVisible(itemAttr.key)) {
-                    let element;
-                    element = itemAttr.key.multiLine ? itemGroup.createOrUpdateChild(`${itemGroupName}-key`, Object.assign(Object.assign({
-                        visible: !0
-                    }, getRichTextAttribute(itemAttr.key)), {
-                        textBaseline: "top"
-                    }), "richtext") : "object" != typeof itemAttr.key.text || null === itemAttr.key.text || "rich" !== itemAttr.key.text.type && "html" !== itemAttr.key.text.type ? itemGroup.createOrUpdateChild(`${itemGroupName}-key`, Object.assign(Object.assign({
-                        visible: !0,
-                        text: null !== (_b = itemAttr.key.text) && void 0 !== _b ? _b : ""
-                    }, itemAttr.key), {
-                        textBaseline: "top"
-                    }), "text") : "rich" === itemAttr.key.text.type ? itemGroup.createOrUpdateChild(`${itemGroupName}-value`, Object.assign(Object.assign({
-                        visible: !0
-                    }, getRichTextAttribute(itemAttr.key)), {
-                        textBaseline: "top"
-                    }), "richtext") : itemGroup.createOrUpdateChild(`${itemGroupName}-value`, {
-                        html: Object.assign(Object.assign({
-                            dom: itemAttr.key.text.text
-                        }, DEFAULT_HTML_TEXT_SPEC), itemAttr.key)
-                    }, "richtext");
-                    const {textAlign: textAlign} = itemAttr.key;
-                    "center" === textAlign ? element.setAttribute("x", x + keyWidth / 2) : "right" === textAlign || "end" === textAlign ? element.setAttribute("x", x + keyWidth) : element.setAttribute("x", x), 
-                    element.setAttribute("y", 0), x += keyWidth + itemAttr.key.spacing;
-                }
-                if (isVisible(itemAttr.value)) {
-                    let element;
-                    element = itemAttr.value.multiLine ? itemGroup.createOrUpdateChild(`${itemGroupName}-value`, Object.assign(Object.assign({
-                        visible: !0
-                    }, getRichTextAttribute(itemAttr.value)), {
-                        textBaseline: "top"
-                    }), "richtext") : "object" != typeof itemAttr.value.text || null === itemAttr.value.text || "rich" !== itemAttr.value.text.type && "html" !== itemAttr.value.text.type ? itemGroup.createOrUpdateChild(`${itemGroupName}-value`, Object.assign(Object.assign({
-                        visible: !0,
-                        text: null !== (_c = itemAttr.value.text) && void 0 !== _c ? _c : ""
-                    }, itemAttr.value), {
-                        textBaseline: "top"
-                    }), "text") : "rich" === itemAttr.value.text.type ? itemGroup.createOrUpdateChild(`${itemGroupName}-value`, Object.assign(Object.assign({
-                        visible: !0
-                    }, getRichTextAttribute(itemAttr.value)), {
-                        textBaseline: "top"
-                    }), "richtext") : itemGroup.createOrUpdateChild(`${itemGroupName}-value`, {
-                        html: Object.assign({
-                            dom: itemAttr.value.text.text,
-                            container: "",
-                            width: 30,
-                            height: 30,
-                            style: {}
-                        }, itemAttr.value)
-                    }, "richtext");
+                }, "group"), shapeOffsetWidth = itemAttr.shape.size + itemAttr.shape.spacing;
+                let x = "right" === align ? (hasContentShape ? shapeOffsetWidth : 0) + (isVisible(itemAttr.key) ? keyWidth + itemAttr.key.spacing : 0) + (isVisible(itemAttr.value) ? valueWidth : 0) : 0;
+                const shapeGraphic = this._createShape(itemAttr, itemGroup, itemGroupName);
+                hasContentShape && (shapeGraphic && shapeGraphic.setAttribute("x", x), "right" === align ? x -= shapeOffsetWidth : x += shapeOffsetWidth);
+                const keyGraphic = this._createKey(itemAttr, itemGroup, itemGroupName);
+                keyGraphic && (alignTextInLine(align, keyGraphic, itemAttr.key.textAlign, x, keyWidth), 
+                keyGraphic.setAttribute("y", 0), "right" === align ? x -= keyWidth + itemAttr.key.spacing : x += keyWidth + itemAttr.key.spacing);
+                const valueGraphic = this._createValue(itemAttr, itemGroup, itemGroupName);
+                if (valueGraphic) {
                     let textAlign = "right";
-                    isValid(itemAttr.value.textAlign) ? textAlign = itemAttr.value.textAlign : isVisible(itemAttr.key) || (textAlign = "left"), 
-                    element.setAttribute("textAlign", textAlign), "center" === textAlign ? element.setAttribute("x", x + valueWidth / 2) : "right" === textAlign || "end" === textAlign ? element.setAttribute("x", x + valueWidth) : element.setAttribute("x", x), 
-                    x += valueWidth, element.setAttribute("y", 0), itemGroup.add(element);
+                    isValid(itemAttr.value.textAlign) ? textAlign = itemAttr.value.textAlign : isVisible(itemAttr.key) || "right" === align || (textAlign = "left"), 
+                    valueGraphic.setAttribute("textAlign", textAlign), alignTextInLine(align, valueGraphic, textAlign, x, valueWidth), 
+                    valueGraphic.setAttribute("y", 0);
                 }
                 lastYPos += itemAttr.height + itemAttr.spaceRow;
             }));
         }
     }
+    _createShape(itemAttr, itemGroup, itemGroupName) {
+        var _a;
+        if (isVisible(itemAttr.shape)) return itemGroup.createOrUpdateChild(`${itemGroupName}-shape`, Object.assign({
+            visible: !0,
+            x: itemAttr.shape.size / 2,
+            y: itemAttr.shape.size / 2 + ((null !== (_a = calculateLineHeight(itemAttr.key.lineHeight, itemAttr.key.fontSize)) && void 0 !== _a ? _a : itemAttr.key.fontSize) - itemAttr.shape.size) / 2
+        }, itemAttr.shape), "symbol");
+    }
+    _createKey(itemAttr, itemGroup, itemGroupName) {
+        var _a;
+        if (isVisible(itemAttr.key)) {
+            let element;
+            return element = itemAttr.key.multiLine ? itemGroup.createOrUpdateChild(`${itemGroupName}-key`, Object.assign(Object.assign({
+                visible: !0
+            }, getRichTextAttribute(itemAttr.key)), {
+                textBaseline: "top"
+            }), "richtext") : "object" != typeof itemAttr.key.text || null === itemAttr.key.text || "rich" !== itemAttr.key.text.type && "html" !== itemAttr.key.text.type ? itemGroup.createOrUpdateChild(`${itemGroupName}-key`, Object.assign(Object.assign({
+                visible: !0,
+                text: null !== (_a = itemAttr.key.text) && void 0 !== _a ? _a : ""
+            }, itemAttr.key), {
+                textBaseline: "top"
+            }), "text") : "rich" === itemAttr.key.text.type ? itemGroup.createOrUpdateChild(`${itemGroupName}-value`, Object.assign(Object.assign({
+                visible: !0
+            }, getRichTextAttribute(itemAttr.key)), {
+                textBaseline: "top"
+            }), "richtext") : itemGroup.createOrUpdateChild(`${itemGroupName}-value`, {
+                html: Object.assign(Object.assign({
+                    dom: itemAttr.key.text.text
+                }, DEFAULT_HTML_TEXT_SPEC), itemAttr.key)
+            }, "richtext"), element;
+        }
+    }
+    _createValue(itemAttr, itemGroup, itemGroupName) {
+        var _a;
+        if (isVisible(itemAttr.value)) {
+            let element;
+            return element = itemAttr.value.multiLine ? itemGroup.createOrUpdateChild(`${itemGroupName}-value`, Object.assign(Object.assign({
+                visible: !0
+            }, getRichTextAttribute(itemAttr.value)), {
+                textBaseline: "top"
+            }), "richtext") : "object" != typeof itemAttr.value.text || null === itemAttr.value.text || "rich" !== itemAttr.value.text.type && "html" !== itemAttr.value.text.type ? itemGroup.createOrUpdateChild(`${itemGroupName}-value`, Object.assign(Object.assign({
+                visible: !0,
+                text: null !== (_a = itemAttr.value.text) && void 0 !== _a ? _a : ""
+            }, itemAttr.value), {
+                textBaseline: "top"
+            }), "text") : "rich" === itemAttr.value.text.type ? itemGroup.createOrUpdateChild(`${itemGroupName}-value`, Object.assign(Object.assign({
+                visible: !0
+            }, getRichTextAttribute(itemAttr.value)), {
+                textBaseline: "top"
+            }), "richtext") : itemGroup.createOrUpdateChild(`${itemGroupName}-value`, {
+                html: Object.assign({
+                    dom: itemAttr.value.text.text,
+                    container: "",
+                    width: 30,
+                    height: 30,
+                    style: {}
+                }, itemAttr.value)
+            }, "richtext"), element;
+        }
+    }
     setAttributes(params, forceUpdateTag) {
         const keys = Object.keys(params);
         this.attribute.autoCalculatePosition && keys.every((key => TOOLTIP_POSITION_ATTRIBUTES.includes(key))) ? (this._mergeAttributes(params, keys),