anton/visual-spending
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hide eye button after 1 second of mouse inactivity

Browse Source 
The floating eye button now only shows while the mouse is actively
moving over a sector. After 1 second of no mouse movement, the button
hides to keep the chart cleaner. The button remains visible when
hovering directly over it.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Anton Volnuhin 2026-01-30 18:47:23 +03:00
parent 77c8987099
commit e63bcd9a3a
1 changed files with 49 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
app.js
View File

@ -1212,6 +1212,8 @@ function setupHoverEvents(sunburstData) {
let isOverChartSector = false; // Track if mouse is over any chart sector let isOverChartSector = false; // Track if mouse is over any chart sector
let lastMouseX = 0; let lastMouseX = 0;
let lastMouseY = 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 // Calculate the center angle of a sector based on its data
function getSectorLayoutFromChart(params) { function getSectorLayoutFromChart(params) {
@ -1243,6 +1245,42 @@ function setupHoverEvents(sunburstData) {
// Track current hovered sector for persistent button display // Track current hovered sector for persistent button display
let currentHoveredSectorParams = null; 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 // Position and show the floating eye button near the hovered sector
function showChartEyeButton(params) { function showChartEyeButton(params) {
@ -1289,13 +1327,18 @@ function setupHoverEvents(sunburstData) {
rotationDeg += 180; rotationDeg += 180;
} }
// Center the 24px button // Store the button position
chartEyeBtn.style.left = (buttonX - 12) + 'px'; pendingButtonPosition = {
chartEyeBtn.style.top = (buttonY - 12) + 'px'; left: (buttonX - 12) + 'px',
chartEyeBtn.style.transform = `rotate(${rotationDeg}deg)`; top: (buttonY - 12) + 'px',
chartEyeBtn.style.display = 'flex'; transform: `rotate(${rotationDeg}deg)`
};
// Only show if mouse is moving or hovering over button
updateButtonVisibility();
} else { } 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'; chartEyeBtn.style.display = 'none';
} }
} }