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

package/build/index.es.js

@@ -91722,17 +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();
+            this._renderNextFrame(prevComponentBounds);
         };
         this._handleTooltipHideOrRelease = () => {
+            const prevComponentBounds = this._getNeedClearVRenderComponentBounds();
             this.clearOutEvent();
             this.hideCrosshair();
-            this._renderNextFrame();
+            this._renderNextFrame(prevComponentBounds);
         };
         this.enable = true;
         this.showDefault = true;
@@ -91944,9 +91946,87 @@ 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);
+    _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;
@@ -92178,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';
 

package/build/index.js

@@ -91728,17 +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();
+                this._renderNextFrame(prevComponentBounds);
             };
             this._handleTooltipHideOrRelease = () => {
+                const prevComponentBounds = this._getNeedClearVRenderComponentBounds();
                 this.clearOutEvent();
                 this.hideCrosshair();
-                this._renderNextFrame();
+                this._renderNextFrame(prevComponentBounds);
             };
             this.enable = true;
             this.showDefault = true;
@@ -91950,9 +91952,87 @@
             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);
+        _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;
@@ -92184,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';