rspace-online/backlog/tasks/task-68 - Canvas-toolbar-popout-click-to-place-double-click-edit-SVG-persistence.md

id	title	status	assignee	created_date	updated_date	labels	dependencies	priority
TASK-68	Canvas toolbar popout, click-to-place, double-click edit, SVG persistence	Done		2026-02-28 00:26	2026-02-28 00:26	canvas ux toolbar		medium

Description

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.

Acceptance Criteria

• #1 Toolbar group click opens popout panel to the right (not inline dropdown)
• #2 Click toolbar tool → cursor changes to crosshair → click canvas → shape at click position
• #3 Shape avoids overlapping existing shapes (spiral search from click point)
• #4 Double-click shape → edit mode → can type/interact with content
• #5 Double-click empty canvas → pencil draw mode activates
• #6 Draw with pencil → reload → drawings persist (wb-svg in Automerge)
• #7 Click + button → rApp list opens in popout panel
• #8 Reload page → all shapes retain x,y positions
• #9 bunx tsc --noEmit passes

Final Summary

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