mirror of
https://github.com/dataease/dataease.git
synced 2026-05-16 22:41:06 +08:00
fix(图表): 优化提示轮播在编辑移动端是,显示不正确的问题,以及zIndex过高的问题,在部分浏览页无法轮播的问题。
This commit is contained in:
committed by
jianneng-fit2cloud
parent
595c398fa0
commit
b721c56034
@@ -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() {
|
||||
|
||||
@@ -1714,7 +1714,12 @@ export function configPlotTooltipEvent<O extends PickOptions, P extends Plot<O>>
|
||||
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<O extends PickOptions, P extends Plot<O>>
|
||||
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<O extends PickOptions, P extends Plot<O>>
|
||||
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
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user