diff --git a/src/renderer/src/lib/map/MapContainer.svelte b/src/renderer/src/lib/map/MapContainer.svelte index 0a22891..dad2ddf 100644 --- a/src/renderer/src/lib/map/MapContainer.svelte +++ b/src/renderer/src/lib/map/MapContainer.svelte @@ -260,12 +260,14 @@ map.$destroy(); }); + const TOOLTIP_MAX_DISTANCE = 32; + const TOOLTIP_AUTOCLOSE_DISTANCE = TOOLTIP_MAX_DISTANCE * 2; let tooltip: { x: number; y: number; system: GalacticObject; } | null = null; - function onMouseMove(e: MouseEvent) { + function onMouseMoveInner(e: MouseEvent) { if (dataOrNull != null && !resizing && !zooming) { let viewBoxWidth = 1000; let viewBoxHeight = 1000; @@ -299,7 +301,10 @@ if (settings.terraIncognita && !processedSystem.systemIsKnown) { tooltip = null; - } else if (Math.hypot(tooltipPoint[0] - e.offsetX, tooltipPoint[1] - e.offsetY) > 32) { + } else if ( + Math.hypot(tooltipPoint[0] - e.offsetX, tooltipPoint[1] - e.offsetY) > + TOOLTIP_MAX_DISTANCE + ) { tooltip = null; } else { tooltip = { @@ -312,6 +317,16 @@ } } } + const onMouseMoveInnerDebounced = debounce(onMouseMoveInner, 50); + function onMouseMove(e: MouseEvent) { + if ( + tooltip && + Math.hypot(tooltip.x - e.offsetX, tooltip.y - e.offsetY) > TOOLTIP_AUTOCLOSE_DISTANCE + ) { + tooltip = null; + } + onMouseMoveInnerDebounced(e); + }
@@ -370,13 +385,17 @@
{/await} + { + tooltip = null; + }} class="h-full w-full" >