0e8dcc6707
- Archived change to openspec/changes/archive/2026-02-17-line-rectangle-annotations/ - Updated annotation-tools spec: added rectangle tool mode, TrendLine plugin rendering, line hit testing, line selection handles; updated line drawing and delete requirements; removed SVG overlay rendering - Created new rectangle-annotation spec with full requirements for rectangle drawing, rendering, hit testing, selection, deletion, and database storage Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
29 lines
2.8 KiB
Markdown
29 lines
2.8 KiB
Markdown
## Why
|
|
|
|
The current line drawing implementation uses an SVG overlay (`SvgOverlay.tsx`) positioned on top of the lightweight-charts canvas. This creates a disconnect — lines don't participate in chart autoscaling, coordinate conversion is duplicated outside the chart library, and the rendering layer is split between SVG and canvas. Lightweight-charts natively supports drawing primitives via the `ISeriesPrimitive` API, and the project already has a `TrendLine` plugin in `src/plugins/trend-line.ts` (unused) and uses `SpanRectanglePrimitive` for span annotations. Migrating line drawing to the native plugin system and adding rectangle annotations will unify the rendering approach, improve performance, and enable consistent interaction patterns.
|
|
|
|
## What Changes
|
|
|
|
- **BREAKING**: Remove SVG overlay line drawing (`SvgOverlay.tsx`) and replace with lightweight-charts `TrendLine` plugin-based rendering
|
|
- Implement interactive two-click line drawing using chart's native `subscribeClick()` and `subscribeCrosshairMove()` events instead of SVG pointer events
|
|
- Add a new rectangle annotation tool based on the lightweight-charts `RectangleDrawingTool` plugin pattern (two-click to define opposite corners)
|
|
- Add "rectangle" tool mode to the Toolbox alongside existing line/span/label tools
|
|
- Store rectangle annotations in the database with `label_type: "rectangle"` and geometry containing `{startTime, startPrice, endTime, endPrice}`
|
|
- Update line editing (drag endpoints) and deletion to work through the plugin system instead of SVG hit detection
|
|
- Add preview rendering during drawing for both lines and rectangles (using crosshair move events)
|
|
|
|
## Capabilities
|
|
|
|
### New Capabilities
|
|
- `rectangle-annotation`: Two-click rectangle drawing tool using lightweight-charts ISeriesPrimitive, with preview during drawing, persistence, editing, and deletion
|
|
|
|
### Modified Capabilities
|
|
- `annotation-tools`: Line drawing changes from SVG overlay to lightweight-charts TrendLine plugin; line tool mode interaction moves from SVG events to chart subscribeClick/subscribeCrosshairMove; line editing and deletion use plugin-based hit detection instead of SVG proximity calculation
|
|
|
|
## Impact
|
|
|
|
- **Frontend components**: `SvgOverlay.tsx` removed or gutted; `CandleChart.tsx` updated to manage TrendLine primitives; `Toolbox.tsx` gains rectangle tool button
|
|
- **Plugins**: `src/plugins/trend-line.ts` enhanced with interactive drawing support (click handlers, preview); new `src/plugins/rectangle-drawing.ts` added
|
|
- **API**: Existing annotation endpoints used as-is; rectangle annotations use the same `annotations` table with `label_type: "rectangle"` and `geometry` JSON
|
|
- **Database**: No schema changes — rectangles use the existing `geometry` column pattern (same as lines)
|
|
- **Dependencies**: No new dependencies — uses lightweight-charts APIs already in use
|