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

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;
@@ -91719,15 +91722,19 @@ class BaseCrossHair extends BaseComponent {
                     return;
                 }
             }
+            const prevComponentBounds = this._getNeedClearVRenderComponentBounds();
             const { x, y } = this.calculateTriggerPoint(params);
             this.showDefault = false;
             this._layoutCrosshair(x, y, tooltipData, params.activeType);
             const components = this._getNeedClearVRenderComponents();
             this._hasActive = components.some(comp => comp && comp.attribute.visible !== false);
+            this._renderNextFrame(prevComponentBounds);
         };
         this._handleTooltipHideOrRelease = () => {
+            const prevComponentBounds = this._getNeedClearVRenderComponentBounds();
             this.clearOutEvent();
             this.hideCrosshair();
+            this._renderNextFrame(prevComponentBounds);
         };
         this.enable = true;
         this.showDefault = true;
@@ -91795,17 +91802,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 +91834,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 +91946,88 @@ 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(prevComponentBounds) {
+        var _a;
+        const stage = this._option.globalInstance.getStage();
+        if (!stage) {
+            return;
+        }
+        if (stage.state === 'rendering') {
+            (_a = stage.renderNextFrame) === null || _a === void 0 ? void 0 : _a.call(stage);
+            if (!this._pendingRenderAfterRendering) {
+                this._pendingRenderAfterRendering = true;
+                Promise.resolve().then(() => {
+                    var _a;
+                    this._pendingRenderAfterRendering = false;
+                    if (stage.releaseStatus === 'released') {
+                        return;
+                    }
+                    if (stage.state === 'rendering') {
+                        (_a = stage.renderNextFrame) === null || _a === void 0 ? void 0 : _a.call(stage);
+                        return;
+                    }
+                    this._renderStage(stage, prevComponentBounds);
+                });
+            }
+            return;
+        }
+        this._renderStage(stage, prevComponentBounds);
+    }
+    _renderStage(stage, prevComponentBounds) {
+        var _a;
+        const shouldRenderExternalCanvas = this._isTransparentExternalCanvasStage(stage);
+        const cleared = this._clearPreviousComponents(stage, prevComponentBounds);
+        if ((shouldRenderExternalCanvas || cleared) && '_story_needRender' in stage) {
+            stage._story_needRender = true;
+        }
+        if (stage.render) {
+            stage.render();
+            return;
+        }
+        (_a = stage.renderNextFrame) === null || _a === void 0 ? void 0 : _a.call(stage);
+    }
+    _isTransparentExternalCanvasStage(stage) {
+        var _a;
+        return (stage === null || stage === void 0 ? void 0 : stage.background) === false && ((_a = stage.params) === null || _a === void 0 ? void 0 : _a.canvasControled) === false;
+    }
+    _clearPreviousComponents(stage, prevComponentBounds) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!(prevComponentBounds === null || prevComponentBounds === void 0 ? void 0 : prevComponentBounds.length) || !this._isTransparentExternalCanvasStage(stage)) {
+            return false;
+        }
+        const context = (_b = (_a = stage.window) === null || _a === void 0 ? void 0 : _a.getContext) === null || _b === void 0 ? void 0 : _b.call(_a);
+        const nativeContext = context === null || context === void 0 ? void 0 : context.nativeContext;
+        const matrix = (_d = (_c = stage.window) === null || _c === void 0 ? void 0 : _c.getViewBoxTransform) === null || _d === void 0 ? void 0 : _d.call(_c);
+        if (!nativeContext ||
+            !matrix ||
+            !nativeContext.save ||
+            !nativeContext.setTransform ||
+            !nativeContext.clearRect ||
+            !nativeContext.restore) {
+            return false;
+        }
+        const dpr = (_g = (_f = (_e = stage.window) === null || _e === void 0 ? void 0 : _e.dpr) !== null && _f !== void 0 ? _f : context.dpr) !== null && _g !== void 0 ? _g : 1;
+        const transformPoint = (x, y) => ({
+            x: matrix.a * x + matrix.c * y + matrix.e,
+            y: matrix.b * x + matrix.d * y + matrix.f
+        });
+        const padding = 8;
+        nativeContext.save();
+        nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0);
+        prevComponentBounds.forEach(bounds => {
+            const p1 = transformPoint(bounds.x1, bounds.y1);
+            const p2 = transformPoint(bounds.x1, bounds.y2);
+            const p3 = transformPoint(bounds.x2, bounds.y1);
+            const p4 = transformPoint(bounds.x2, bounds.y2);
+            const x1 = Math.min(p1.x, p2.x, p3.x, p4.x) - padding;
+            const y1 = Math.min(p1.y, p2.y, p3.y, p4.y) - padding;
+            const x2 = Math.max(p1.x, p2.x, p3.x, p4.x) + padding;
+            const y2 = Math.max(p1.y, p2.y, p3.y, p4.y) + padding;
+            nativeContext.clearRect(x1, y1, x2 - x1, y2 - y1);
+        });
+        nativeContext.restore();
+        return true;
+    }
     _getAxisInfoByField(field) {
         var _a, _b;
         const axesComponents = (_b = (_a = this._option).getComponentsByKey) === null || _b === void 0 ? void 0 : _b.call(_a, 'axes');
@@ -91961,18 +92053,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 });
         });
@@ -92164,6 +92258,27 @@ class BaseCrossHair extends BaseComponent {
             return res;
         }, []);
     }
+    _getNeedClearVRenderComponentBounds() {
+        return this._getNeedClearVRenderComponents().reduce((bounds, component) => {
+            if (!component || component.attribute.visible === false) {
+                return bounds;
+            }
+            const componentBounds = component.globalAABBBounds;
+            if (componentBounds &&
+                Number.isFinite(componentBounds.x1) &&
+                Number.isFinite(componentBounds.y1) &&
+                Number.isFinite(componentBounds.x2) &&
+                Number.isFinite(componentBounds.y2)) {
+                bounds.push({
+                    x1: componentBounds.x1,
+                    y1: componentBounds.y1,
+                    x2: componentBounds.x2,
+                    y2: componentBounds.y2
+                });
+            }
+            return bounds;
+        }, []);
+    }
 }
 BaseCrossHair.specKey = 'crosshair';
 
@@ -92285,9 +92400,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 +92447,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 +92460,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;
@@ -91725,15 +91728,19 @@
                         return;
                     }
                 }
+                const prevComponentBounds = this._getNeedClearVRenderComponentBounds();
                 const { x, y } = this.calculateTriggerPoint(params);
                 this.showDefault = false;
                 this._layoutCrosshair(x, y, tooltipData, params.activeType);
                 const components = this._getNeedClearVRenderComponents();
                 this._hasActive = components.some(comp => comp && comp.attribute.visible !== false);
+                this._renderNextFrame(prevComponentBounds);
             };
             this._handleTooltipHideOrRelease = () => {
+                const prevComponentBounds = this._getNeedClearVRenderComponentBounds();
                 this.clearOutEvent();
                 this.hideCrosshair();
+                this._renderNextFrame(prevComponentBounds);
             };
             this.enable = true;
             this.showDefault = true;
@@ -91801,17 +91808,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 +91840,8 @@
         }
         _showDefaultCrosshair() {
             if (this.showDefault) {
-                this._showDefaultCrosshairBySpec();
-                this.layoutByValue(false);
+                const hasDefault = this._showDefaultCrosshairBySpec();
+                hasDefault && this.layoutByValue(false);
             }
             else {
                 this._updateVisibleCrosshair();
@@ -91942,6 +91952,88 @@
             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(prevComponentBounds) {
+            var _a;
+            const stage = this._option.globalInstance.getStage();
+            if (!stage) {
+                return;
+            }
+            if (stage.state === 'rendering') {
+                (_a = stage.renderNextFrame) === null || _a === void 0 ? void 0 : _a.call(stage);
+                if (!this._pendingRenderAfterRendering) {
+                    this._pendingRenderAfterRendering = true;
+                    Promise.resolve().then(() => {
+                        var _a;
+                        this._pendingRenderAfterRendering = false;
+                        if (stage.releaseStatus === 'released') {
+                            return;
+                        }
+                        if (stage.state === 'rendering') {
+                            (_a = stage.renderNextFrame) === null || _a === void 0 ? void 0 : _a.call(stage);
+                            return;
+                        }
+                        this._renderStage(stage, prevComponentBounds);
+                    });
+                }
+                return;
+            }
+            this._renderStage(stage, prevComponentBounds);
+        }
+        _renderStage(stage, prevComponentBounds) {
+            var _a;
+            const shouldRenderExternalCanvas = this._isTransparentExternalCanvasStage(stage);
+            const cleared = this._clearPreviousComponents(stage, prevComponentBounds);
+            if ((shouldRenderExternalCanvas || cleared) && '_story_needRender' in stage) {
+                stage._story_needRender = true;
+            }
+            if (stage.render) {
+                stage.render();
+                return;
+            }
+            (_a = stage.renderNextFrame) === null || _a === void 0 ? void 0 : _a.call(stage);
+        }
+        _isTransparentExternalCanvasStage(stage) {
+            var _a;
+            return (stage === null || stage === void 0 ? void 0 : stage.background) === false && ((_a = stage.params) === null || _a === void 0 ? void 0 : _a.canvasControled) === false;
+        }
+        _clearPreviousComponents(stage, prevComponentBounds) {
+            var _a, _b, _c, _d, _e, _f, _g;
+            if (!(prevComponentBounds === null || prevComponentBounds === void 0 ? void 0 : prevComponentBounds.length) || !this._isTransparentExternalCanvasStage(stage)) {
+                return false;
+            }
+            const context = (_b = (_a = stage.window) === null || _a === void 0 ? void 0 : _a.getContext) === null || _b === void 0 ? void 0 : _b.call(_a);
+            const nativeContext = context === null || context === void 0 ? void 0 : context.nativeContext;
+            const matrix = (_d = (_c = stage.window) === null || _c === void 0 ? void 0 : _c.getViewBoxTransform) === null || _d === void 0 ? void 0 : _d.call(_c);
+            if (!nativeContext ||
+                !matrix ||
+                !nativeContext.save ||
+                !nativeContext.setTransform ||
+                !nativeContext.clearRect ||
+                !nativeContext.restore) {
+                return false;
+            }
+            const dpr = (_g = (_f = (_e = stage.window) === null || _e === void 0 ? void 0 : _e.dpr) !== null && _f !== void 0 ? _f : context.dpr) !== null && _g !== void 0 ? _g : 1;
+            const transformPoint = (x, y) => ({
+                x: matrix.a * x + matrix.c * y + matrix.e,
+                y: matrix.b * x + matrix.d * y + matrix.f
+            });
+            const padding = 8;
+            nativeContext.save();
+            nativeContext.setTransform(dpr, 0, 0, dpr, 0, 0);
+            prevComponentBounds.forEach(bounds => {
+                const p1 = transformPoint(bounds.x1, bounds.y1);
+                const p2 = transformPoint(bounds.x1, bounds.y2);
+                const p3 = transformPoint(bounds.x2, bounds.y1);
+                const p4 = transformPoint(bounds.x2, bounds.y2);
+                const x1 = Math.min(p1.x, p2.x, p3.x, p4.x) - padding;
+                const y1 = Math.min(p1.y, p2.y, p3.y, p4.y) - padding;
+                const x2 = Math.max(p1.x, p2.x, p3.x, p4.x) + padding;
+                const y2 = Math.max(p1.y, p2.y, p3.y, p4.y) + padding;
+                nativeContext.clearRect(x1, y1, x2 - x1, y2 - y1);
+            });
+            nativeContext.restore();
+            return true;
+        }
         _getAxisInfoByField(field) {
             var _a, _b;
             const axesComponents = (_b = (_a = this._option).getComponentsByKey) === null || _b === void 0 ? void 0 : _b.call(_a, 'axes');
@@ -91967,18 +92059,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 });
             });
@@ -92170,6 +92264,27 @@
                 return res;
             }, []);
         }
+        _getNeedClearVRenderComponentBounds() {
+            return this._getNeedClearVRenderComponents().reduce((bounds, component) => {
+                if (!component || component.attribute.visible === false) {
+                    return bounds;
+                }
+                const componentBounds = component.globalAABBBounds;
+                if (componentBounds &&
+                    Number.isFinite(componentBounds.x1) &&
+                    Number.isFinite(componentBounds.y1) &&
+                    Number.isFinite(componentBounds.x2) &&
+                    Number.isFinite(componentBounds.y2)) {
+                    bounds.push({
+                        x1: componentBounds.x1,
+                        y1: componentBounds.y1,
+                        x2: componentBounds.x2,
+                        y2: componentBounds.y2
+                    });
+                }
+                return bounds;
+            }, []);
+        }
     }
     BaseCrossHair.specKey = 'crosshair';
 
@@ -92291,9 +92406,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 +92453,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 +92466,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) {