feat: Windows 11-like snap behavior for Window component - #9
Merged
Merged
Conversation
- Add snap geometry module (src/hooks/snap.ts) with 8 zones - Extend useDraggable with snap lifecycle (preview, commit, cleanup) - Add snap props to Window (snapEnabled, snapThreshold) - Render blue semi-transparent preview overlay during drag - Implement z-index management for multi-window scenarios - Add snap release when dragging away from edge - Add pointercancel and unmount cleanup handlers - Fix 1px jitter on odd viewport sizes - Add comprehensive tests (262 passing) - Add Storybook snap scenarios Supported snap zones: left, right, top, bottom, top-left, top-right, bottom-left, bottom-right Closes window snap behavior feature
There was a problem hiding this comment.
Pull request overview
This PR adds Windows 11-style drag snapping to the Window component, including 8 snap zones (halves + corners), a blue preview overlay during drag, and lifecycle hooks in useDraggable to preview/commit/cleanup snapping.
Changes:
- Introduces snap-zone geometry (
getSnapTarget) with min-size gating and odd-viewport split handling. - Extends
useDraggableandWindowto support snap preview (snapTarget) and snap commit (position + size). - Updates Storybook and tests to cover snap preview/commit/cancel/unmount cleanup scenarios.
Reviewed changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| src/hooks/useResizable.ts | Exposes setSize in the hook result so Window can programmatically apply snapped dimensions. |
| src/hooks/useDraggable.ts | Adds snap state (snapTarget), snap detection on pointermove, commit on pointerup, and cancel/unmount cleanup. |
| src/hooks/useDraggable.test.ts | Adds unit tests for pointer capture, snap targeting, commit behavior, pointercancel, and unmount cleanup. |
| src/hooks/snap.ts | Implements snap-zone detection + target rectangle calculation for 8 zones. |
| src/hooks/snap.test.ts | Adds unit tests validating zones, thresholds, min size gating, and odd viewport splits. |
| src/components/window/Window.wiring.test.tsx | Verifies Window wires snap options and commits snap target to size/position. |
| src/components/window/Window.tsx | Adds snapEnabled/snapThreshold, snap commit handling, snap preview overlay, and local z-index raising on drag start. |
| src/components/window/Window.test.tsx | Adds integration tests for preview rendering, snap commit outcomes, z-index raising, and drag-from-snapped restore behavior. |
| src/components/window/Window.stories.tsx | Adds Storybook snap playground/scenarios and documents supported snap scope. |
| src/components/window/Window.module.css | Adds styling for the blue snap preview overlay. |
| src/components/window/TitleBar.test.tsx | Adds test asserting Restore renders as a button when maximized. |
| .storybook/main.ts | Adjusts Vite config via viteFinal (disables CSS minification for Storybook build). |
- Fix listenersRef stale closure pattern in useDraggable - Simplify setSizeConstrained to only enforce minWidth/minHeight - Remove viewport clamping from setSize that caused position override issues - Clean up duplicate code remnants from previous edits
Owner
Author
|
@copilot レビューお願いします。前回のフィードバックを修正しました。 |
確認しました。前回の指摘はまだすべては解消されていません。少なくとも |
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
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
Implement Windows 11-like drag snapping for the Window component with 8 snap zones and blue preview overlay.
Changes
src/hooks/snap.ts) with 8 zonesuseDraggable(preview, commit, cleanup)snapEnabled(default: true) andsnapThreshold(default: 20)pointercanceland unmount cleanup handlersSupported Snap Zones
Checklist
Copilot Review
Waiting for Copilot review. Please do not merge until review is complete and approved.