77 lines
2.2 KiB
Markdown
77 lines
2.2 KiB
Markdown
---
|
|
id: task-2
|
|
title: 'Phase 1: FolkJS Foundation - Port Simple Shapes'
|
|
status: Done
|
|
assignee: []
|
|
created_date: '2026-01-02 14:42'
|
|
updated_date: '2026-01-02 19:00'
|
|
labels:
|
|
- foundation
|
|
- migration
|
|
- shapes
|
|
dependencies: []
|
|
priority: high
|
|
---
|
|
|
|
## Description
|
|
|
|
<!-- SECTION:DESCRIPTION:BEGIN -->
|
|
Port the 4 simplest shapes from canvas-website to FolkJS web components:
|
|
- SlideShapeUtil (passive display)
|
|
- ChatBoxShapeUtil (real-time chat)
|
|
- GoogleItemShapeUtil (data display)
|
|
- SharedPianoShapeUtil (interactive music)
|
|
|
|
Key simplifications vs tldraw:
|
|
- No BaseBoxShapeUtil inheritance, use FolkShape directly
|
|
- No React - pure web components with lit-style templates
|
|
- Hooks become class methods or standalone utilities
|
|
- StandardizedToolWrapper already ported as FolkWrapper
|
|
<!-- SECTION:DESCRIPTION:END -->
|
|
|
|
## Acceptance Criteria
|
|
<!-- AC:BEGIN -->
|
|
- [x] #1 folk-slide component created
|
|
- [x] #2 folk-chat component created
|
|
- [x] #3 folk-google-item component created
|
|
- [x] #4 folk-piano component created
|
|
<!-- AC:END -->
|
|
|
|
## Notes
|
|
|
|
### Implementation Complete
|
|
|
|
Created 4 FolkJS web components:
|
|
|
|
1. **folk-slide.ts** (`lib/folk-slide.ts`)
|
|
- Simple slide container with dashed border
|
|
- Label display (e.g., "Slide 1")
|
|
- Minimal implementation for presentation mode
|
|
|
|
2. **folk-chat.ts** (`lib/folk-chat.ts`)
|
|
- Real-time chat with message list
|
|
- Username prompt with localStorage persistence
|
|
- Message input form with send button
|
|
- Orange header theme matching original
|
|
- Emits `message` events for sync integration
|
|
|
|
3. **folk-google-item.ts** (`lib/folk-google-item.ts`)
|
|
- Data card for Gmail/Drive/Photos/Calendar items
|
|
- Visibility toggle (local/shared)
|
|
- Service icons and relative date formatting
|
|
- Dark mode support
|
|
- Helper function `createGoogleItemProps()`
|
|
|
|
4. **folk-piano.ts** (`lib/folk-piano.ts`)
|
|
- Chrome Music Lab Shared Piano iframe embed
|
|
- Loading/error states with retry
|
|
- Minimize/expand toggle
|
|
- Sandboxed with audio/MIDI permissions
|
|
|
|
All components:
|
|
- Extend FolkShape base class
|
|
- Use CSS-in-JS via template literals
|
|
- Support drag from header/container via `data-drag`
|
|
- Implement `toJSON()` for Automerge sync
|
|
- Registered in `canvas.html` with toolbar buttons
|