fix: redraw chart on window resize to fix browser-zoom misalignment#65
Merged
Conversation
When the browser zoom level changes, the browser fires a resize event but jsgantt-improved does not redraw the chart, causing task bars and date headers to visually misalign. Add a debounced window:resize @HostListener that redraws the Gantt chart 200 ms after the last resize event. Also implement ngOnDestroy to cancel any pending timer on component teardown. Closes #29 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The previous destroy() was a no-op, causing ngOnInit() to append a new GanttChart on top of the existing one on every resize. Now destroy() clears the container's innerHTML and nulls the editor reference so each redraw starts from a clean slate. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…iour Consumers who want to manage redraws themselves (e.g. to debounce with their own timing or skip redraws when the chart is off-screen) can now set [redrawOnResize]="false" on the <ng-gantt> element. Also documents all component inputs in README. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Keep master's defensive if (this.editor) guard in destroy(), and retain the ngOnDestroy timer cleanup and onWindowResize handler from this branch. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Tests for redrawOnResize defaulting to true - Tests for debounced redraw on resize (fires once after 200 ms) - Tests for no-op when redrawOnResize is false - Tests for no-op when editor is null - Tests for ngOnDestroy cancelling a pending timer - Tests that native window resize events are handled correctly Also fix pre-existing test infrastructure issues: - Update src/test.ts to use modern zone.js imports - Replace removed async() with waitForAsync() in app/demo specs - Configure karma to use ChromeHeadlessNoSandbox with --no-sandbox flags Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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
1 participant
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
Fixes #29
window:resize@HostListenertoGanttEditorComponentthat redraws the Gantt chart after the browser is zoomed or resizedngOnDestroyto cancel the pending timer on component teardownRoot cause
Browser zoom changes fire a
window.resizeevent. jsgantt-improved syncs scroll positions on resize but does not re-render the chart, so task bars and date-column headers can shift out of alignment at non-100% zoom.Redrawing on resize is the standard fix for this class of problem. The 200 ms debounce prevents excessive redraws while the user is actively resizing.
A related tooltip-position bug (
clientX / 2) in jsgantt-improved has been filed separately: jsGanttImproved/jsgantt-improved#402Test plan
ng-gantt— no timer leak (ngOnDestroy clears the timeout)🤖 Generated with Claude Code