candle-annotator/openspec/changes/archive/2026-02-17-line-rectangle-annotations/proposal.md at 0e8dcc6707b8cf7659c625b1769d29702594519f

Marko Djordjevic 0e8dcc6707 chore: archive line-rectangle-annotations change and sync specs

- 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>

2026-02-17 18:16:49 +01:00

2.8 KiB

Raw Blame History

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

2.8 KiB Raw Blame History

Why