Improve Gantt chart zoom, task interactions, and URL state management#3
Open
rightson wants to merge 2 commits into
Open
Improve Gantt chart zoom, task interactions, and URL state management#3rightson wants to merge 2 commits into
rightson wants to merge 2 commits into
Conversation
- Ctrl+scroll wheel adjusts time scale instead of browser zoom, with anchor-point-aware zooming that keeps the date under cursor stable - Shift+scroll wheel performs horizontal scrolling of the view - Default day scale dynamically sizes columns to fit ~7 days on screen - Day scale sub-header (month label) stays visible by clamping position to the viewport instead of centering on the full month span - Double-click on blank grid area creates a new task; clicks on buttons, task cards, or zoom controls are ignored - Task cards show an edit icon on hover; clicking it opens the modal directly without requiring double-click - Selected project ID is stored in URL query param (?project=<id>) so users can share direct links to specific projects https://claude.ai/code/session_01SBrxHGmgdHfEX7vU5Gr4tv
The browser intercepts Ctrl+wheel for its own zoom at the document level
before the event reaches the container element. Fix by listening on
document in capture phase ({ capture: true }) so we can preventDefault
before the browser processes it. Also stopPropagation to fully suppress
the native zoom. Only activates when mouse is over the Gantt container.
https://claude.ai/code/session_01SBrxHGmgdHfEX7vU5Gr4tv
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR enhances the Gantt chart component with better zoom controls, improved task card interactions, and URL-based project persistence. The changes focus on providing a more intuitive user experience for zooming, task selection, and navigation.
Key Changes
Zoom Improvements
ZOOM_ORDERandZoomLevelfrom date utilities for use in zoom calculationssetZoomLevelaction to chart store for direct zoom level controlTask Card Interactions
data-task-cardattribute for DOM targeting in double-click preventionDouble-Click Task Creation
URL State Management
?project=<id>)UI/UX Refinements
data-zoom-controlsattribute to zoom control containerImplementation Details
{ passive: false }to allowpreventDefault()for Ctrl+scrollxToDate()anddateToX()to maintain cursor position during zoomgetZoomConfig()function now accepts optionalviewportWidthparameter for responsive day zoomhttps://claude.ai/code/session_01SBrxHGmgdHfEX7vU5Gr4tv