3483de871e
- BlockInspector with color/speed/direction/length param controls - UpdateParamsCommand for full undo/redo param editing - Phase 04 complete (4/4 plans), TL-04 requirement marked done - Progress: 14/14 plans (100%)
134 lines
5.9 KiB
Markdown
134 lines
5.9 KiB
Markdown
---
|
|
phase: 04-timeline-editor
|
|
plan: 04
|
|
subsystem: ui
|
|
tags: [canvas, timeline, inspector, color-picker, command-pattern, undo-redo]
|
|
dependency_graph:
|
|
requires:
|
|
- phase: 04-timeline-editor/04-02
|
|
provides: CommandHistory, DeleteBlockCommand, syncBlock, selectedBlock, _onSelectBlock callback
|
|
provides:
|
|
- UpdateParamsCommand (undoable color/speed/direction/length changes)
|
|
- BlockInspector class rendering compact strip with all param controls
|
|
- Inspector show/hide wired to block selection via _onSelectBlock
|
|
- Block canvas fill uses params.color for visual distinction
|
|
- Undo/redo refreshes inspector values via re-triggered _onSelectBlock
|
|
affects: []
|
|
|
|
tech-stack:
|
|
added: []
|
|
patterns:
|
|
- "BlockInspector wired via callback: timeline._onSelectBlock = (block) => inspector.show(block)"
|
|
- "Inspector delete wires via _onDelete callback to fire DeleteBlockCommand through timeline.history"
|
|
- "UpdateParamsCommand uses module-level currentShowId (same pattern as existing commands)"
|
|
- "Color change committed on 'change' event not 'input' — avoids command flood during color drag"
|
|
- "Block canvas fill uses blockColor + '1a' hex suffix for ~10% opacity color accent"
|
|
|
|
key-files:
|
|
created:
|
|
- lightsync/frontend/timeline/inspector.js
|
|
modified:
|
|
- lightsync/frontend/timeline/commands.js
|
|
- lightsync/frontend/timeline/timeline.js
|
|
- lightsync/frontend/app.js
|
|
|
|
key-decisions:
|
|
- "UpdateParamsCommand uses currentShowId (module-level var) not this._showId — matches existing command pattern in commands.js"
|
|
- "Color input fires 'change' (not 'input') to create command — avoids flooding command history during native color picker drag"
|
|
|
|
patterns-established:
|
|
- "Inspector callbacks: _onSelectBlock and _onDelete on inspector — app.js wires both after creating inspector"
|
|
|
|
requirements-completed: [TL-04]
|
|
|
|
duration: 4min
|
|
completed: 2026-04-06
|
|
---
|
|
|
|
# Phase 04 Plan 04: Block Inspector Panel Summary
|
|
|
|
**Compact inspector strip between timeline and transport bar — shows animation label, color swatch, speed/direction/length controls — all param changes go through UpdateParamsCommand for full undo/redo support.**
|
|
|
|
## Performance
|
|
|
|
- **Duration:** ~4 min
|
|
- **Started:** 2026-04-06T23:51:12Z
|
|
- **Completed:** 2026-04-06T23:55:00Z
|
|
- **Tasks:** 2
|
|
- **Files modified:** 4 (1 created, 3 modified)
|
|
|
|
## Accomplishments
|
|
|
|
- `UpdateParamsCommand` added to commands.js with execute/undo storing old/new params shallow copies
|
|
- `BlockInspector` class rendering inspector strip: animation label, color swatch → hidden color input, SPEED number, DIR select, LEN number, remove button
|
|
- Inspector show/hide wired to block selection via `timeline._onSelectBlock` callback in app.js
|
|
- Inspector delete wired via `_onDelete` → `DeleteBlockCommand` through `timeline.history`
|
|
- Block fill on canvas uses `params.color + '1a'` for subtle color accent — color changes visible immediately
|
|
- Undo/redo handlers re-trigger `_onSelectBlock(selectedBlock)` to refresh inspector values after command reversal
|
|
- Docker build: clean (no errors)
|
|
|
|
## Task Commits
|
|
|
|
1. **Task 1: UpdateParamsCommand + BlockInspector module** - `e82fc4a` (feat)
|
|
2. **Task 2: Wire inspector into timeline and app.js** - `8e084ca` (feat)
|
|
|
|
## Files Created/Modified
|
|
|
|
- `lightsync/frontend/timeline/inspector.js` — BlockInspector class with show/hide/_render/_wireEvents, imports UpdateParamsCommand
|
|
- `lightsync/frontend/timeline/commands.js` — UpdateParamsCommand added with currentShowId-based sync
|
|
- `lightsync/frontend/app.js` — imports BlockInspector + DeleteBlockCommand, wires inspector to timeline
|
|
- `lightsync/frontend/timeline/timeline.js` — block color accent from params.color, undo/redo re-triggers inspector refresh
|
|
|
|
## Decisions Made
|
|
|
|
| Decision | Rationale |
|
|
|----------|-----------|
|
|
| UpdateParamsCommand uses `currentShowId` not `this._showId` | The plan's code had `this._showId` which doesn't exist — commands.js uses module-level `currentShowId`, same as all other commands |
|
|
| Color change on `change` not `input` | Native color pickers fire `input` continuously during drag; committing on `change` prevents hundreds of undo steps for one color change |
|
|
|
|
## Deviations from Plan
|
|
|
|
### Auto-fixed Issues
|
|
|
|
**1. [Rule 1 - Bug] Fixed UpdateParamsCommand._showId → currentShowId**
|
|
- **Found during:** Task 1 (UpdateParamsCommand implementation)
|
|
- **Issue:** Plan's code used `this._showId` in syncBlock call, but commands.js uses module-level `currentShowId` — `this._showId` is undefined
|
|
- **Fix:** Used `currentShowId` (module-level variable) matching the exact pattern of PlaceBlockCommand, MoveBlockCommand etc.
|
|
- **Files modified:** `lightsync/frontend/timeline/commands.js`
|
|
- **Committed in:** e82fc4a
|
|
|
|
---
|
|
|
|
**Total deviations:** 1 auto-fixed (Rule 1 - Bug)
|
|
**Impact on plan:** Essential fix — `this._showId` would be undefined at runtime, breaking backend sync for all param changes.
|
|
|
|
## Issues Encountered
|
|
|
|
None — all other implementation matched the plan exactly.
|
|
|
|
## Known Stubs
|
|
|
|
None — inspector is fully wired. All param changes route through UpdateParamsCommand. Color accent on canvas reflects actual block color. Remove button fires DeleteBlockCommand. Undo/redo refreshes inspector.
|
|
|
|
## Self-Check: PASSED
|
|
|
|
- `lightsync/frontend/timeline/inspector.js` exists: YES (e82fc4a)
|
|
- `inspector.js` exports `BlockInspector`: YES
|
|
- `commands.js` has `UpdateParamsCommand`: YES (e82fc4a)
|
|
- `app.js` imports `BlockInspector` and `DeleteBlockCommand`: YES (8e084ca)
|
|
- `app.js` wires `_onSelectBlock` and `_onDelete`: YES (8e084ca)
|
|
- `timeline.js` uses `blockColor + '1a'` for fill: YES (8e084ca)
|
|
- `timeline.js` undo/redo re-triggers `_onSelectBlock`: YES (8e084ca)
|
|
- Docker build: SUCCESS (clean)
|
|
|
|
## Next Phase Readiness
|
|
|
|
- Timeline editor is feature-complete: block place/move/resize/delete/params all undoable
|
|
- Inspector provides full visual feedback for selected block parameters
|
|
- Phase 04 is complete — all 4 plans done
|
|
- No blockers
|
|
|
|
---
|
|
*Phase: 04-timeline-editor*
|
|
*Completed: 2026-04-06*
|