@visactor/vchart 2.0.5-alpha.7 → 2.0.5-alpha.8

package/build/index.es.js

@@ -63124,6 +63124,9 @@ class CartesianAxis extends AxisComponent {
     getScales() {
         return this._scales;
     }
+    getInnerOffset() {
+        return this._innerOffset;
+    }
     constructor(spec, options) {
         super(spec, options);
         this.type = ComponentTypeEnum.cartesianAxis;
@@ -91724,10 +91727,12 @@ class BaseCrossHair extends BaseComponent {
             this._layoutCrosshair(x, y, tooltipData, params.activeType);
             const components = this._getNeedClearVRenderComponents();
             this._hasActive = components.some(comp => comp && comp.attribute.visible !== false);
+            this._renderNextFrame();
         };
         this._handleTooltipHideOrRelease = () => {
             this.clearOutEvent();
             this.hideCrosshair();
+            this._renderNextFrame();
         };
         this.enable = true;
         this.showDefault = true;
@@ -91795,17 +91800,20 @@ class BaseCrossHair extends BaseComponent {
         return this._limitBounds;
     }
     _showDefaultCrosshairBySpec() {
+        let hasDefaultCrosshair = false;
         Object.keys(this._stateByField).forEach(field => {
             const fieldSpec = this._spec[field];
             if (fieldSpec && fieldSpec.visible && fieldSpec.defaultSelect) {
                 const { axisIndex = 0, datum } = fieldSpec.defaultSelect;
                 const axis = this._option.getComponentsByKey('axes').find(c => c.getSpecIndex() === axisIndex);
                 if (axis) {
+                    hasDefaultCrosshair = true;
                     this._stateByField[field].currentValue.clear();
                     this._stateByField[field].currentValue.set(axisIndex, { axis, datum });
                 }
             }
         });
+        return hasDefaultCrosshair;
     }
     _updateVisibleCrosshair() {
         let hasVisible = false;
@@ -91824,8 +91832,8 @@ class BaseCrossHair extends BaseComponent {
     }
     _showDefaultCrosshair() {
         if (this.showDefault) {
-            this._showDefaultCrosshairBySpec();
-            this.layoutByValue(false);
+            const hasDefault = this._showDefaultCrosshairBySpec();
+            hasDefault && this.layoutByValue(false);
         }
         else {
             this._updateVisibleCrosshair();
@@ -91936,6 +91944,10 @@ class BaseCrossHair extends BaseComponent {
         this.event.on(ChartEvent.tooltipShow, { source: Event_Source_Type.chart }, this._handleTooltipShow);
         this.event.on(ChartEvent.tooltipRelease, { source: Event_Source_Type.chart }, this._handleTooltipHideOrRelease);
     }
+    _renderNextFrame() {
+        var _a, _b;
+        (_b = (_a = this._option.globalInstance.getStage()) === null || _a === void 0 ? void 0 : _a.renderNextFrame) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
     _getAxisInfoByField(field) {
         var _a, _b;
         const axesComponents = (_b = (_a = this._option).getComponentsByKey) === null || _b === void 0 ? void 0 : _b.call(_a, 'axes');
@@ -91961,18 +91973,20 @@ class BaseCrossHair extends BaseComponent {
         let y2 = -Infinity;
         const { x: sx, y: sy } = this.getLayoutStartPoint();
         bindingAxesIndex.forEach(idx => {
+            var _a, _b;
             (x1 = Infinity), (y1 = Infinity), (x2 = -Infinity), (y2 = -Infinity);
             const axis = axesComponents.find(axis => axis.getSpecIndex() === idx);
             if (!axis) {
                 return;
             }
+            const innerOffset = ((_b = (_a = axis).getInnerOffset) === null || _b === void 0 ? void 0 : _b.call(_a)) || { left: 0, right: 0, top: 0, bottom: 0 };
             const regions = axis.getRegions();
             regions.forEach(r => {
                 const { x: regionStartX, y: regionStartY } = r.getLayoutStartPoint();
-                x1 = Math.min(x1, regionStartX - sx);
-                y1 = Math.min(y1, regionStartY - sy);
-                x2 = Math.max(x2, regionStartX + r.getLayoutRect().width - sx);
-                y2 = Math.max(y2, regionStartY + r.getLayoutRect().height - sy);
+                x1 = Math.min(x1, regionStartX - sx + innerOffset.left);
+                y1 = Math.min(y1, regionStartY - sy + innerOffset.top);
+                x2 = Math.max(x2, regionStartX + r.getLayoutRect().width - sx - innerOffset.right);
+                y2 = Math.max(y2, regionStartY + r.getLayoutRect().height - sy - innerOffset.bottom);
             });
             map.set(idx, { x1, y1, x2, y2, axis: axis });
         });
@@ -92285,9 +92299,27 @@ class CartesianCrossHair extends BaseCrossHair {
         var _a;
         let x = relativeX;
         let y = relativeY;
+        let tooltipAxisValue;
+        const setTooltipAxisValue = () => {
+            if (!tooltipAxisValue) {
+                return;
+            }
+            const field = isXAxis(tooltipAxisValue.axis.getOrient()) ? 'xField' : 'yField';
+            const { currentValue } = this._stateByField[field];
+            if (!currentValue.has(tooltipAxisValue.axis.getSpecIndex())) {
+                currentValue.clear();
+            }
+            this.setAxisValue(tooltipAxisValue.value, tooltipAxisValue.axis);
+        };
         if (tooltipData && tooltipData.length) {
             if (activeType === 'dimension') {
                 const dimensionInfo = tooltipData[0];
+                if ((dimensionInfo === null || dimensionInfo === void 0 ? void 0 : dimensionInfo.axis) && isValid$1(dimensionInfo.value)) {
+                    tooltipAxisValue = {
+                        axis: dimensionInfo.axis,
+                        value: dimensionInfo.value
+                    };
+                }
                 const datumIndex = dimensionInfo.data.findIndex(dimData => dimData.datum.length > 0);
                 let pos;
                 if (datumIndex > -1) {
@@ -92314,6 +92346,11 @@ class CartesianCrossHair extends BaseCrossHair {
         this.clearAxisValue();
         const { xAxisMap, yAxisMap } = this._findAllAxisContains(x, y);
         if ((xAxisMap && xAxisMap.size === 0) || (yAxisMap && yAxisMap.size === 0)) {
+            if (tooltipAxisValue) {
+                setTooltipAxisValue();
+                this.layoutByValue(false);
+                return;
+            }
             if (this.enableRemain) {
                 return;
             }
@@ -92322,6 +92359,9 @@ class CartesianCrossHair extends BaseCrossHair {
         }
         xAxisMap && xAxisMap.size && this._setAllAxisValues(xAxisMap, { x, y }, 'xField');
         yAxisMap && yAxisMap.size && this._setAllAxisValues(yAxisMap, { x, y }, 'yField');
+        if (tooltipAxisValue) {
+            setTooltipAxisValue();
+        }
         this.layoutByValue();
     }
     layoutByValue(enableRemain) {

package/build/index.js

@@ -63130,6 +63130,9 @@
         getScales() {
             return this._scales;
         }
+        getInnerOffset() {
+            return this._innerOffset;
+        }
         constructor(spec, options) {
             super(spec, options);
             this.type = ComponentTypeEnum.cartesianAxis;
@@ -91730,10 +91733,12 @@
                 this._layoutCrosshair(x, y, tooltipData, params.activeType);
                 const components = this._getNeedClearVRenderComponents();
                 this._hasActive = components.some(comp => comp && comp.attribute.visible !== false);
+                this._renderNextFrame();
             };
             this._handleTooltipHideOrRelease = () => {
                 this.clearOutEvent();
                 this.hideCrosshair();
+                this._renderNextFrame();
             };
             this.enable = true;
             this.showDefault = true;
@@ -91801,17 +91806,20 @@
             return this._limitBounds;
         }
         _showDefaultCrosshairBySpec() {
+            let hasDefaultCrosshair = false;
             Object.keys(this._stateByField).forEach(field => {
                 const fieldSpec = this._spec[field];
                 if (fieldSpec && fieldSpec.visible && fieldSpec.defaultSelect) {
                     const { axisIndex = 0, datum } = fieldSpec.defaultSelect;
                     const axis = this._option.getComponentsByKey('axes').find(c => c.getSpecIndex() === axisIndex);
                     if (axis) {
+                        hasDefaultCrosshair = true;
                         this._stateByField[field].currentValue.clear();
                         this._stateByField[field].currentValue.set(axisIndex, { axis, datum });
                     }
                 }
             });
+            return hasDefaultCrosshair;
         }
         _updateVisibleCrosshair() {
             let hasVisible = false;
@@ -91830,8 +91838,8 @@
         }
         _showDefaultCrosshair() {
             if (this.showDefault) {
-                this._showDefaultCrosshairBySpec();
-                this.layoutByValue(false);
+                const hasDefault = this._showDefaultCrosshairBySpec();
+                hasDefault && this.layoutByValue(false);
             }
             else {
                 this._updateVisibleCrosshair();
@@ -91942,6 +91950,10 @@
             this.event.on(exports.ChartEvent.tooltipShow, { source: Event_Source_Type.chart }, this._handleTooltipShow);
             this.event.on(exports.ChartEvent.tooltipRelease, { source: Event_Source_Type.chart }, this._handleTooltipHideOrRelease);
         }
+        _renderNextFrame() {
+            var _a, _b;
+            (_b = (_a = this._option.globalInstance.getStage()) === null || _a === void 0 ? void 0 : _a.renderNextFrame) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
         _getAxisInfoByField(field) {
             var _a, _b;
             const axesComponents = (_b = (_a = this._option).getComponentsByKey) === null || _b === void 0 ? void 0 : _b.call(_a, 'axes');
@@ -91967,18 +91979,20 @@
             let y2 = -Infinity;
             const { x: sx, y: sy } = this.getLayoutStartPoint();
             bindingAxesIndex.forEach(idx => {
+                var _a, _b;
                 (x1 = Infinity), (y1 = Infinity), (x2 = -Infinity), (y2 = -Infinity);
                 const axis = axesComponents.find(axis => axis.getSpecIndex() === idx);
                 if (!axis) {
                     return;
                 }
+                const innerOffset = ((_b = (_a = axis).getInnerOffset) === null || _b === void 0 ? void 0 : _b.call(_a)) || { left: 0, right: 0, top: 0, bottom: 0 };
                 const regions = axis.getRegions();
                 regions.forEach(r => {
                     const { x: regionStartX, y: regionStartY } = r.getLayoutStartPoint();
-                    x1 = Math.min(x1, regionStartX - sx);
-                    y1 = Math.min(y1, regionStartY - sy);
-                    x2 = Math.max(x2, regionStartX + r.getLayoutRect().width - sx);
-                    y2 = Math.max(y2, regionStartY + r.getLayoutRect().height - sy);
+                    x1 = Math.min(x1, regionStartX - sx + innerOffset.left);
+                    y1 = Math.min(y1, regionStartY - sy + innerOffset.top);
+                    x2 = Math.max(x2, regionStartX + r.getLayoutRect().width - sx - innerOffset.right);
+                    y2 = Math.max(y2, regionStartY + r.getLayoutRect().height - sy - innerOffset.bottom);
                 });
                 map.set(idx, { x1, y1, x2, y2, axis: axis });
             });
@@ -92291,9 +92305,27 @@
             var _a;
             let x = relativeX;
             let y = relativeY;
+            let tooltipAxisValue;
+            const setTooltipAxisValue = () => {
+                if (!tooltipAxisValue) {
+                    return;
+                }
+                const field = isXAxis(tooltipAxisValue.axis.getOrient()) ? 'xField' : 'yField';
+                const { currentValue } = this._stateByField[field];
+                if (!currentValue.has(tooltipAxisValue.axis.getSpecIndex())) {
+                    currentValue.clear();
+                }
+                this.setAxisValue(tooltipAxisValue.value, tooltipAxisValue.axis);
+            };
             if (tooltipData && tooltipData.length) {
                 if (activeType === 'dimension') {
                     const dimensionInfo = tooltipData[0];
+                    if ((dimensionInfo === null || dimensionInfo === void 0 ? void 0 : dimensionInfo.axis) && isValid$1(dimensionInfo.value)) {
+                        tooltipAxisValue = {
+                            axis: dimensionInfo.axis,
+                            value: dimensionInfo.value
+                        };
+                    }
                     const datumIndex = dimensionInfo.data.findIndex(dimData => dimData.datum.length > 0);
                     let pos;
                     if (datumIndex > -1) {
@@ -92320,6 +92352,11 @@
             this.clearAxisValue();
             const { xAxisMap, yAxisMap } = this._findAllAxisContains(x, y);
             if ((xAxisMap && xAxisMap.size === 0) || (yAxisMap && yAxisMap.size === 0)) {
+                if (tooltipAxisValue) {
+                    setTooltipAxisValue();
+                    this.layoutByValue(false);
+                    return;
+                }
                 if (this.enableRemain) {
                     return;
                 }
@@ -92328,6 +92365,9 @@
             }
             xAxisMap && xAxisMap.size && this._setAllAxisValues(xAxisMap, { x, y }, 'xField');
             yAxisMap && yAxisMap.size && this._setAllAxisValues(yAxisMap, { x, y }, 'yField');
+            if (tooltipAxisValue) {
+                setTooltipAxisValue();
+            }
             this.layoutByValue();
         }
         layoutByValue(enableRemain) {