Add Stage.tsx refactoring foundation: hooks and tool behaviors#38
Open
Add Stage.tsx refactoring foundation: hooks and tool behaviors#38
Conversation
This commit lays the groundwork for refactoring Stage.tsx into smaller, testable pieces: Extracted hooks with full test coverage: - useStageCoordinates: coordinate transformations (client -> px -> grid) - useStageZoom: scale/fit management with window resize - useStageSelection: selection rectangle state management - useStagePopover: actor selection popover state Created tool-behaviors.ts with strategy pattern: - Declarative tool behavior definitions instead of scattered switch statements - Each tool's click/drag behavior defined in one place - Makes adding new tools simpler and more maintainable Added comprehensive unit tests for pure functions: - 52 new tests for coordinate, zoom, and selection logic - All 304 project tests pass This is Phase 1 of the refactoring. Next steps: - Extract useStageDragDrop hook - Extract useStageMouseHandlers hook - Integrate hooks into Stage component
Fixes based on code review:
1. tool-behaviors.ts:
- Added Integration Contract documentation explaining how to
properly integrate tool behaviors (popover handling, click-as-drag,
resetAfterUse, special cases)
- Clarified STAMP tool: onDragPosition is intentionally undefined
because stamping logic requires complex actor creation helpers
that live in stage.tsx
- Documented that STAMP popover only applies when selecting source
2. useStageZoom.ts:
- Removed refs from dependency array to match original stage.tsx
- Added comment explaining why refs are excluded (they're stable
and read at execution time)
3. useStageCoordinates.ts:
- Clarified closure semantics documentation
- Explained how stageElRef.current vs scale capture works
Continues the Stage component refactoring by extracting drag/drop logic into a dedicated hook with pure functions for testability. Changes: - Add useStageDragDrop hook with handlers for sprite, appearance, and handle drag events - Extract pure functions for parsing drop data and calculating extents - Add 60 unit tests for the new hook - Integrate hook into stage.tsx, removing ~200 lines of inline code - Remove refs from useCallback dependency arrays (best practice) - Add documentation for intentional inline tool logic preservation - Extract WRAP_DETECTION_THRESHOLD constant with documentation Stage.tsx reduced from 909 lines (original) to 701 lines. All 340 tests pass.
Creates symmetric creation and parsing utilities for drag data: - createActorSpriteData(): Creates sprite data for actor drags - createCharacterSpriteData(): Creates sprite data for character drags - createAppearanceData(): Creates appearance change data - setHandleDragData(): Sets handle drag data on dataTransfer Updates call sites to use the new utilities: - actor-sprite.tsx: Uses createActorSpriteData - recording-handle.tsx: Uses setHandleDragData with HandleSide type - library.tsx: Uses createCharacterSpriteData and createAppearanceData Also fixes CharacterDropData type to use `appearance` (not `appearanceId`) to match the actual data format used throughout the codebase. Adds 10 new tests for round-trip verification of create/parse pairs. All 350 tests pass.
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.
This commit lays the groundwork for refactoring Stage.tsx into smaller,
testable pieces:
Extracted hooks with full test coverage:
Created tool-behaviors.ts with strategy pattern:
Added comprehensive unit tests for pure functions:
This is Phase 1 of the refactoring. Next steps: