---
id: TASK-14
title: 'Overhaul canvas shape creation, connections, and sync'
status: Done
assignee: []
created_date: '2026-02-15 15:28'
labels:
  - canvas
  - bugfix
  - refactor
dependencies: []
priority: high
---

## Description

<!-- SECTION:DESCRIPTION:BEGIN -->
Fixed multiple issues preventing the FolkJS canvas and shapes from working properly.
<!-- SECTION:DESCRIPTION:END -->

## Acceptance Criteria
<!-- AC:BEGIN -->
- [ ] #1 Trip shapes (itinerary, destination, budget, packing-list, booking) have position:absolute CSS
- [ ] #2 Arrow connections work with all 21 shape types, not just markdown and wrapper
- [ ] #3 New shapes appear at viewport center instead of clustering top-left
- [ ] #4 Shape creation uses shared createAndAddShape() utility (~270 lines removed)
- [ ] #5 Google Item toolbar button exists
- [ ] #6 Remote shape creation has error handling (try-catch-finally)
- [ ] #7 WebSocket keep-alive ping actually sends a message
- [ ] #8 Sync layer uses toJSON() to capture all shape-specific properties
<!-- AC:END -->

## Final Summary

<!-- SECTION:FINAL_SUMMARY:BEGIN -->
Fixed 8 issues in canvas.html and community-sync.ts:\n\n1. Added 5 missing trip shapes to CSS position:absolute rule\n2. Expanded arrow connection mode from 2 to all 21 shape types\n3. New shapes now center in viewport (accounting for zoom/pan)\n4. Extracted createAndAddShape() utility, eliminating ~270 lines of duplication\n5. Added missing Google Item toolbar button\n6. Added try-catch-finally on remote shape creation\n7. Implemented actual WebSocket keep-alive ping (was no-op)\n8. Replaced manual property extraction in #shapeToData() with shape.toJSON() for all shape types\n\nNet result: -158 lines (179 added, 337 removed)
<!-- SECTION:FINAL_SUMMARY:END -->