86 lines
3.8 KiB
Markdown
86 lines
3.8 KiB
Markdown
---
|
|
id: TASK-68
|
|
title: 'Canvas toolbar popout, click-to-place, double-click edit, SVG persistence'
|
|
status: Done
|
|
assignee: []
|
|
created_date: '2026-02-28 00:26'
|
|
updated_date: '2026-02-28 00:26'
|
|
labels:
|
|
- canvas
|
|
- ux
|
|
- toolbar
|
|
dependencies: []
|
|
priority: medium
|
|
---
|
|
|
|
## Description
|
|
|
|
<!-- SECTION:DESCRIPTION:BEGIN -->
|
|
Canvas UX improvements: toolbar popout panel replaces inline dropdowns, click-to-place shapes at cursor position, double-click to edit shapes, whiteboard SVG drawing persistence via Automerge, + button opens rApps, dblclick canvas for pencil mode.
|
|
<!-- SECTION:DESCRIPTION:END -->
|
|
|
|
## Acceptance Criteria
|
|
<!-- AC:BEGIN -->
|
|
- [x] #1 Toolbar group click opens popout panel to the right (not inline dropdown)
|
|
- [x] #2 Click toolbar tool → cursor changes to crosshair → click canvas → shape at click position
|
|
- [x] #3 Shape avoids overlapping existing shapes (spiral search from click point)
|
|
- [x] #4 Double-click shape → edit mode → can type/interact with content
|
|
- [x] #5 Double-click empty canvas → pencil draw mode activates
|
|
- [x] #6 Draw with pencil → reload → drawings persist (wb-svg in Automerge)
|
|
- [x] #7 Click + button → rApp list opens in popout panel
|
|
- [x] #8 Reload page → all shapes retain x,y positions
|
|
- [x] #9 bunx tsc --noEmit passes
|
|
<!-- AC:END -->
|
|
|
|
## Final Summary
|
|
|
|
<!-- SECTION:FINAL_SUMMARY:BEGIN -->
|
|
## Changes
|
|
|
|
### Toolbar Popout Panel (canvas.html CSS/HTML/JS)
|
|
- Added `#toolbar-panel` with header + body positioned right of `#toolbar`
|
|
- Group toggles populate the popout panel via `openToolbarPanel()`/`closeToolbarPanel()`
|
|
- Inline `.toolbar-dropdown` hidden with `display: none !important` when group is open
|
|
- Mobile: panel slides up from bottom as a sheet
|
|
|
|
### Click-to-Place (canvas.html)
|
|
- `pendingTool` state with `setPendingTool()`/`clearPendingTool()`
|
|
- All toolbar buttons set pending tool instead of calling `newShape()` directly
|
|
- Canvas `pointerdown` checks `pendingTool`, converts screen→canvas coords, places shape
|
|
- Ghost outline (dashed teal) follows cursor while tool is pending; ESC cancels
|
|
- `findFreePosition(width, height, preferX?, preferY?)` refactored to accept anchor point
|
|
|
|
### Double-Click Edit Mode (folk-shape.ts)
|
|
- `enterEditMode()`/`exitEditMode()` with `:state(editing)` internal state
|
|
- CSS: editing state enables `pointer-events: auto` on `.slot-container`, teal outline
|
|
- `dblclick` listener on shape calls `enterEditMode()`, focuses first focusable child
|
|
- Canvas background click calls `exitEditMode()` on all shapes
|
|
|
|
### Click-to-Edit Markdown (folk-markdown.ts)
|
|
- Preview area click enters edit mode
|
|
- `edit-enter`/`edit-exit` custom events sync with parent shape editing state
|
|
- Refactored into `enterMarkdownEdit()`/`exitMarkdownEdit()` helpers
|
|
|
|
### + Button Opens rApps (canvas.html)
|
|
- `#quick-add` button at top of toolbar opens rApps group in popout panel
|
|
- Mobile FAB first tap auto-opens rApps panel
|
|
|
|
### SVG Drawing Persistence (community-sync.ts + canvas.html)
|
|
- `addShapeData()` method on CommunitySync for DOM-less shapes
|
|
- `wb-svg` type: SVG serialized on pointerup, stored in Automerge, recreated on load
|
|
- Eraser removes from both DOM and Automerge doc
|
|
|
|
### Canvas dblclick → Pencil Mode
|
|
- dblclick on empty canvas background activates pencil drawing tool
|
|
|
|
### Files Modified
|
|
- `website/canvas.html` — toolbar panel, click-to-place, findFreePosition, +button, SVG persistence, dblclick
|
|
- `lib/folk-shape.ts` — dblclick→editing state, enterEditMode/exitEditMode, CSS
|
|
- `lib/folk-markdown.ts` — click-to-edit preview, edit-enter/exit events
|
|
- `lib/community-sync.ts` — svgMarkup field, addShapeData() method
|
|
|
|
### Commits
|
|
- `eee9cbe` — shape overlap push-aside, coordinate persistence, toolbar panel clipping
|
|
- `645f1fc` — SVG drawing persistence, click-to-edit markdown, quick-add rApps, dblclick pencil
|
|
<!-- SECTION:FINAL_SUMMARY:END -->
|