67 lines
1.8 KiB
Markdown
67 lines
1.8 KiB
Markdown
---
|
|
id: task-8
|
|
title: Port shared hooks as FolkJS utilities
|
|
status: Done
|
|
assignee: []
|
|
created_date: '2026-01-02 16:10'
|
|
updated_date: '2026-01-02 18:45'
|
|
labels:
|
|
- foundation
|
|
- utilities
|
|
- migration
|
|
dependencies: []
|
|
priority: high
|
|
---
|
|
|
|
## Description
|
|
|
|
<!-- SECTION:DESCRIPTION:BEGIN -->
|
|
Convert canvas-website React hooks to FolkJS-compatible utilities:
|
|
|
|
1. **useMaximize** → maximizeShape(shape) utility
|
|
- Store original dimensions
|
|
- Animate to viewport fill
|
|
- Restore on toggle
|
|
|
|
2. **usePinnedToView** → PinnedViewManager class
|
|
- Keep shape fixed as camera moves
|
|
- Support multiple pin positions
|
|
- Zero-lag with requestAnimationFrame
|
|
|
|
3. **Shape serialization** - toJSON/fromJSON pattern
|
|
- Already implemented in folk-markdown
|
|
- Standardize across all shapes
|
|
|
|
These utilities enable the StandardizedToolWrapper features (maximize, pin, close) across all FolkJS shapes.
|
|
<!-- SECTION:DESCRIPTION:END -->
|
|
|
|
## Acceptance Criteria
|
|
<!-- AC:BEGIN -->
|
|
- [x] #1 maximizeShape utility working
|
|
- [x] #2 PinnedViewManager class working
|
|
- [x] #3 All shapes have consistent toJSON/fromJSON
|
|
<!-- AC:END -->
|
|
|
|
## Notes
|
|
|
|
### Implementation Complete
|
|
|
|
Created three utility implementations:
|
|
|
|
1. **maximize.ts** - `maximizeShape()`, `restoreShape()`, `toggleMaximize()`, `isMaximized()`
|
|
- Uses WeakMap to store original dimensions
|
|
- Animates with 0.3s CSS transitions
|
|
- Accounts for canvas transforms
|
|
|
|
2. **pinned-view.ts** - `PinnedViewManager` class
|
|
- 9 preset positions + 'current' for in-place pinning
|
|
- RequestAnimationFrame for zero-lag viewport tracking
|
|
- Compensates for canvas pan/zoom transforms
|
|
- Singleton pattern via `getPinnedViewManager()`
|
|
|
|
3. **folk-shape.ts** - Base `toJSON()` method
|
|
- Returns type, id, x, y, width, height, rotation
|
|
- Subclasses override and extend
|
|
|
|
All utilities exported from `lib/index.ts`.
|