2.1 KiB
2.1 KiB
| id | title | status | assignee | created_date | labels | milestone | dependencies | references | priority | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| TASK-44 | Implement Semantic Grouping: named shape clusters with templates | To Do | 2026-02-18 20:06 |
|
m-1 |
|
|
medium |
Description
Add the ability to group shapes into named clusters that can be collapsed, moved together, and saved as reusable templates.
New file lib/group-manager.ts:
- GroupManager class: createGroup(), dissolveGroup(), addToGroup(), removeFromGroup()
- collapseGroup() / expandGroup() — hide members, show summary card
- moveGroup(groupId, dx, dy) — moves all members by delta
- saveAsTemplate() / instantiateTemplate() — serialize group as reusable JSON template
Automerge schema additions:
- doc.groups: { [groupId]: GroupData } — top-level CRDT entity
- GroupData: id, name, color, icon, memberShapeIds[], collapsed, x, y, width, height
- shapes[id].groupId: string — which group a shape belongs to
Visual rendering:
- folk-group-frame — lightweight overlay element (NOT a FolkShape), dashed border + header bar
- Recalculates bounds from member shapes on each animation frame
- Uses existing DOMRectTransform.ts for rotated shape bounding boxes
- Collapse button, group name, color indicator
Canvas.html additions:
- Rubber-band or shift-click multi-select → right-click "Group"
- Group context menu (rename, change color, collapse, save as template, dissolve)
- Template library panel for saved templates
Acceptance Criteria
- #1 GroupManager creates/dissolves groups stored in Automerge
- #2 Moving group header moves all member shapes together
- #3 Collapse hides members and shows summary card
- #4 Expand restores all members to original positions
- #5 Groups sync to remote users via Automerge
- #6 Save as template serializes group + internal arrows as JSON
- #7 Instantiate template creates new shapes from template