From b721c560347cadb6ce261377b9544537fc2f8d2f Mon Sep 17 00:00:00 2001 From: jianneng-fit2cloud Date: Thu, 3 Apr 2025 18:23:05 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E6=8F=90=E7=A4=BA=E8=BD=AE=E6=92=AD=E5=9C=A8=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=98=AF=EF=BC=8C=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E4=B8=8D=E6=AD=A3=E7=A1=AE=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=8C?= =?UTF-8?q?=E4=BB=A5=E5=8F=8AzIndex=E8=BF=87=E9=AB=98=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98=EF=BC=8C=E5=9C=A8=E9=83=A8=E5=88=86=E6=B5=8F=E8=A7=88?= =?UTF-8?q?=E9=A1=B5=E6=97=A0=E6=B3=95=E8=BD=AE=E6=92=AD=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/js/g2plot_tooltip_carousel.ts | 51 +++++++++++++------ .../components/js/panel/common/common_antv.ts | 38 +++++++++----- 2 files changed, 60 insertions(+), 29 deletions(-) diff --git a/core/core-frontend/src/views/chart/components/js/g2plot_tooltip_carousel.ts b/core/core-frontend/src/views/chart/components/js/g2plot_tooltip_carousel.ts index e9c2893ddc..02d8cb1bd1 100644 --- a/core/core-frontend/src/views/chart/components/js/g2plot_tooltip_carousel.ts +++ b/core/core-frontend/src/views/chart/components/js/g2plot_tooltip_carousel.ts @@ -113,6 +113,9 @@ class ChartCarouselTooltip { private init() { this.values = [].concat(this.getUniqueValues()) if (!this.values.length) return + this.chartIsVisible = true + this.states.paused = false + this.states.destroyed = false this.bindEventListeners() this.startCarousel() } @@ -193,7 +196,7 @@ class ChartCarouselTooltip { this.debounce(() => { this.stop() startNestedTimers() - }, 200)() + }, 300)() } /** @@ -305,7 +308,19 @@ class ChartCarouselTooltip { * 绑定事件监听 * */ private bindEventListeners() { - const { chart } = this.plot + let deCanvasElement = document.getElementById('de-canvas-canvas-main') + if (!deCanvasElement) { + deCanvasElement = document.getElementById('preview-canvas-main') + } + if (!deCanvasElement) { + deCanvasElement = document.getElementById('canvas-mark-line') + } + if (!deCanvasElement) { + this.unHighlightPoint() + this.hideTooltip() + this.setPaused(true) + } + deCanvasElement?.addEventListener('scroll', this.handleScroll.bind(this)) const chartElement = document.getElementById(this.chart.container) chartElement.addEventListener('mouseenter', () => { this.unHighlightPoint() @@ -315,24 +330,28 @@ class ChartCarouselTooltip { // 当鼠标离开 chart 时，检查状态 chartElement.addEventListener('mouseleave', () => { - this.setPaused(false) - }) - - // 页面可见性控制 - document.addEventListener('visibilitychange', () => { - if (document.visibilityState === 'hidden') { - this.unHighlightPoint() - this.hideTooltip() - this.setPaused(true) - } else if (this.chartIsVisible) { + if (deCanvasElement) { this.setPaused(false) } }) - // 元素可视性观察（交叉观察器） - this.setupIntersectionObserver() - const deCanvasElement = document.getElementById('de-canvas-canvas-main') - deCanvasElement.addEventListener('scroll', this.handleScroll.bind(this)) + if (deCanvasElement) { + // 页面可见性控制 + document.addEventListener('visibilitychange', () => { + if (document.visibilityState === 'hidden') { + this.unHighlightPoint() + this.hideTooltip() + this.setPaused(true) + } else if (this.chartIsVisible) { + this.setPaused(false) + } + }) + } + + if (deCanvasElement) { + // 元素可视性观察（交叉观察器） + this.setupIntersectionObserver() + } } private handleScroll() { diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts index 5c13bf2bf9..7dddf51e1a 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts @@ -1714,7 +1714,12 @@ export function configPlotTooltipEvent> return } // 图表容器，用于计算 tooltip 的位置 - const chartElement = document.getElementById('shape-id-' + chart.id) + // 编辑时 + let chartElement = document.getElementById('shape-id-' + chart.id) + if (!chartElement) { + // 公共连接时 + chartElement = document.getElementById('enlarge-inner-content-' + chart.id) + } configCarouselTooltip(plot, chart) // 鼠标可移入, 移入之后保持显示, 移出之后隐藏 plot.options.tooltip.container.addEventListener('mouseenter', e => { @@ -1733,6 +1738,16 @@ export function configPlotTooltipEvent> return } const event = plot.chart.interactions.tooltip?.context?.event + const isCarousel = + !event || + event?.type === 'plot:leave' || + ['pie', 'pie-rose', 'pie-donut'].includes(chart.type) + const wrapperDom = document.getElementById(G2_TOOLTIP_WRAPPER) + if (isCarousel && wrapperDom) { + wrapperDom.style.zIndex = '1' + } else { + wrapperDom.style.zIndex = '9999' + } if (tooltipCtl.tooltip) { // 处理视图放大后再关闭 tooltip 的 dom 被清除 const container = tooltipCtl.tooltip.cfg.container @@ -1751,18 +1766,15 @@ export function configPlotTooltipEvent> plot.chart.getOptions().tooltip.follow = false tooltipCtl.title = Math.random().toString() // 当显示提示为事件触发时，使用event的client坐标，否则使用tooltipCtl.point 数据点的位置，在图表中，需要加上图表在绘制区的位置 - const { x, y } = - !event || - event?.type === 'plot:leave' || - ['pie', 'pie-rose', 'pie-donut'].includes(chart.type) - ? { - x: tooltipCtl.point.x + Number(chartElement.getBoundingClientRect().left), - y: - 60 + - Number(chartElement.getBoundingClientRect().top) + - Number(chartElement.style.height.split('px')[0]) / 2 - } - : { x: event.clientX, y: event.clientY } + const { x, y } = isCarousel + ? { + x: tooltipCtl.point.x + Number(chartElement.getBoundingClientRect().left), + y: + 60 + + Number(chartElement.getBoundingClientRect().top) + + Number(chartElement.style.height.split('px')[0]) / 2 + } + : { x: event.clientX, y: event.clientY } plot.chart.getTheme().components.tooltip.x = x plot.chart.getTheme().components.tooltip.y = y })