diff --git a/app.js b/app.js index a9857cf..e2b2f8d 100644 --- a/app.js +++ b/app.js @@ -1212,6 +1212,8 @@ function setupHoverEvents(sunburstData) { let isOverChartSector = false; // Track if mouse is over any chart sector let lastMouseX = 0; let lastMouseY = 0; + let mouseMovingTimeout = null; // Timer to detect mouse inactivity + let isMouseMoving = false; // Track if mouse is actively moving // Calculate the center angle of a sector based on its data function getSectorLayoutFromChart(params) { @@ -1243,6 +1245,42 @@ function setupHoverEvents(sunburstData) { // Track current hovered sector for persistent button display let currentHoveredSectorParams = null; + let pendingButtonPosition = null; // Store button position when mouse stops + + // Update button visibility based on mouse movement state + function updateButtonVisibility() { + if (!chartEyeBtn) return; + + // Show button if mouse is moving OR hovering over the button itself + if ((isMouseMoving || isOverEyeButton) && pendingButtonPosition) { + chartEyeBtn.style.left = pendingButtonPosition.left; + chartEyeBtn.style.top = pendingButtonPosition.top; + chartEyeBtn.style.transform = pendingButtonPosition.transform; + chartEyeBtn.style.display = 'flex'; + } else if (!isOverEyeButton) { + chartEyeBtn.style.display = 'none'; + } + } + + // Handle mouse movement on chart - show button while moving, hide after 1 second of inactivity + function onChartMouseMove() { + isMouseMoving = true; + updateButtonVisibility(); + + // Clear existing timeout + if (mouseMovingTimeout) { + clearTimeout(mouseMovingTimeout); + } + + // Set timeout to hide button after 1 second of no movement + mouseMovingTimeout = setTimeout(() => { + isMouseMoving = false; + updateButtonVisibility(); + }, 1000); + } + + // Add mousemove listener to chart container + chartDom.addEventListener('mousemove', onChartMouseMove); // Position and show the floating eye button near the hovered sector function showChartEyeButton(params) { @@ -1289,13 +1327,18 @@ function setupHoverEvents(sunburstData) { rotationDeg += 180; } - // Center the 24px button - chartEyeBtn.style.left = (buttonX - 12) + 'px'; - chartEyeBtn.style.top = (buttonY - 12) + 'px'; - chartEyeBtn.style.transform = `rotate(${rotationDeg}deg)`; - chartEyeBtn.style.display = 'flex'; + // Store the button position + pendingButtonPosition = { + left: (buttonX - 12) + 'px', + top: (buttonY - 12) + 'px', + transform: `rotate(${rotationDeg}deg)` + }; + + // Only show if mouse is moving or hovering over button + updateButtonVisibility(); } else { - // Fallback: hide the button if we can't get layout + // Fallback: clear pending position if we can't get layout + pendingButtonPosition = null; chartEyeBtn.style.display = 'none'; } }