From e5ca7d704dc180be830aed8217b075fead13f72d Mon Sep 17 00:00:00 2001 From: jianneng-fit2cloud Date: Wed, 30 Oct 2024 09:33:05 +0800 Subject: [PATCH] =?UTF-8?q?style(=E5=9B=BE=E8=A1=A8):=20=E5=9C=B0=E5=9B=BE?= =?UTF-8?q?=E3=80=81=E6=B0=94=E6=B3=A1=E5=9C=B0=E5=9B=BE=E3=80=81=E7=AC=A6?= =?UTF-8?q?=E5=8F=B7=E5=9C=B0=E5=9B=BE=E6=8F=90=E7=A4=BA=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E4=B8=8D=E5=85=A8=E4=BC=98=E5=8C=96=20#12254?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js/panel/charts/map/bubble-map.ts | 1 + .../components/js/panel/charts/map/map.ts | 1 + .../js/panel/charts/map/symbolic-map.ts | 29 +++++++++++++++++++ .../components/js/panel/common/common_antv.ts | 24 +++++++++++++++ 4 files changed, 55 insertions(+) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/bubble-map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/bubble-map.ts index 54fb48aba0..4d17ae08f5 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/bubble-map.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/bubble-map.ts @@ -57,6 +57,7 @@ export class BubbleMap extends L7PlotChartView { if (!areaId) { return } + chart.container = container const geoJson = cloneDeep(await getGeoJsonFile(areaId)) let options: ChoroplethOptions = { preserveDrawingBuffer: true, diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/map.ts index 4ab380bcce..6c5acadf66 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/map.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/map.ts @@ -80,6 +80,7 @@ export class Map extends L7PlotChartView { if (!areaId) { return } + chart.container = container const sourceData = JSON.parse(JSON.stringify(chart.data?.data || [])) let data = [] const { misc } = parseJson(chart.customAttr) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts index 141934af88..ddf46b6b65 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts @@ -345,6 +345,7 @@ export class SymbolicMap extends L7ChartView { background-color: ${tooltip.backgroundColor} !important; padding: 6px 10px 6px; line-height: 1.6; + border-top-left-radius: 3px; } #${container} .l7-popup-tip { border-top-color: ${tooltip.backgroundColor} !important; @@ -353,7 +354,35 @@ export class SymbolicMap extends L7ChartView { document.head.appendChild(style) const htmlPrefix = `
` const htmlSuffix = '
' + const containerElement = document.getElementById(container) + if (containerElement) { + containerElement.addEventListener('mousemove', event => { + const rect = containerElement.getBoundingClientRect() + const mouseX = event.clientX - rect.left + const mouseY = event.clientY - rect.top + const tooltipElement = containerElement.getElementsByClassName('l7-popup') + for (let i = 0; i < tooltipElement?.length; i++) { + const element = tooltipElement[i] as HTMLElement + element.firstElementChild.style.display = 'none' + element.style.transform = 'translate(15px, 12px)' + const isNearRightEdge = + containerElement.clientWidth - mouseX <= element.clientWidth + 10 + const isNearBottomEdge = containerElement.clientHeight - mouseY <= element.clientHeight + let transform = '' + if (isNearRightEdge) { + transform += 'translateX(-120%) translateY(15%) ' + } + if (isNearBottomEdge) { + transform += 'translateX(15%) translateY(-80%) ' + } + if (transform) { + element.style.transform = transform.trim() + } + } + }) + } return new LayerPopup({ + anchor: 'top-left', items: [ { layer: pointLayer, 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 a0656402f2..4c15473bdf 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 @@ -893,6 +893,30 @@ export function configL7Tooltip(chart: Chart): TooltipOptions { pre[next.id] = next return pre }, {}) as Record + const container = document.getElementById(chart.container) + if (container) { + container.addEventListener('mousemove', event => { + const rect = container.getBoundingClientRect() + const mouseX = event.clientX - rect.left + const mouseY = event.clientY - rect.top + const tooltipElement = container.getElementsByClassName('l7plot-tooltip-container') + for (let i = 0; i < tooltipElement?.length; i++) { + const element = tooltipElement[i] as HTMLElement + const isNearRightEdge = container.clientWidth - mouseX <= element.clientWidth + const isNearBottomEdge = container.clientHeight - mouseY <= element.clientHeight + let transform = '' + if (isNearRightEdge) { + transform += 'translateX(-120%) ' + } + if (isNearBottomEdge) { + transform += 'translateY(-100%) ' + } + if (transform) { + element.style.transform = transform.trim() + } + } + }) + } return { customTitle(data) { return data.name