rspace-online/backlog/tasks/task-8 - Port-shared-hooks-as-FolkJS-utilities.md

id	title	status	assignee	created_date	updated_date	labels	dependencies	priority
task-8	Port shared hooks as FolkJS utilities	Done		2026-01-02 16:10	2026-01-02 18:45	foundation utilities migration		high

Description

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.

Acceptance Criteria

• #1 maximizeShape utility working
• #2 PinnedViewManager class working
• #3 All shapes have consistent toJSON/fromJSON

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.