lightweight-charts-drawing 0.1.0

package/README.md

@@ -0,0 +1,243 @@
+# lightweight-charts-drawing
+
+**[Live Demo](https://deepentropy.github.io/lightweight-charts-drawing/)**
+
+68 drawing tools for TradingView's lightweight-charts library. Includes trend lines, Fibonacci tools, Gann analysis, channels, pitchforks, shapes, annotations, and forecasting tools.
+
+## Installation
+
+```bash
+npm install lightweight-charts-drawing lightweight-charts
+```
+
+## Quick Start
+
+```typescript
+import { createChart, CandlestickSeries } from 'lightweight-charts';
+import { DrawingManager, TrendLine, FibRetracement } from 'lightweight-charts-drawing';
+
+// Create chart
+const chart = createChart(document.getElementById('chart')!, {
+  width: 800,
+  height: 400,
+});
+
+const series = chart.addSeries(CandlestickSeries);
+series.setData([/* ... your OHLC data ... */]);
+
+// Set up drawing manager
+const manager = new DrawingManager();
+manager.attach(chart, series, document.getElementById('chart')!);
+
+// Add a trend line
+const trendLine = new TrendLine('tl-1', [
+  { time: '2024-01-15', price: 100 },
+  { time: '2024-02-15', price: 110 },
+], { lineColor: '#2962FF', lineWidth: 2 });
+
+manager.addDrawing(trendLine);
+
+// Add a Fibonacci retracement
+const fib = new FibRetracement('fib-1', [
+  { time: '2024-01-01', price: 95 },
+  { time: '2024-03-01', price: 115 },
+]);
+
+manager.addDrawing(fib);
+```
+
+## Lightweight-Charts Integration Example
+
+```typescript
+import { createChart, CandlestickSeries, ColorType } from 'lightweight-charts';
+import {
+  DrawingManager,
+  TrendLine,
+  HorizontalLine,
+  Rectangle,
+  TextAnnotation,
+  getToolRegistry,
+} from 'lightweight-charts-drawing';
+
+// Create chart
+const container = document.getElementById('chart')!;
+const chart = createChart(container, {
+  layout: {
+    background: { type: ColorType.Solid, color: '#131722' },
+    textColor: '#d1d4dc',
+  },
+  width: 1000,
+  height: 500,
+});
+
+const series = chart.addSeries(CandlestickSeries);
+series.setData([/* ... OHLC data ... */]);
+
+// Initialize drawing manager
+const manager = new DrawingManager();
+manager.attach(chart, series, container);
+
+// Listen for events
+manager.on('drawing:selected', (event) => {
+  console.log('Selected:', event.drawingId);
+});
+
+// Add drawings programmatically
+const support = new HorizontalLine('support', [
+  { time: '2024-01-01' as any, price: 95 },
+], { lineColor: '#26a69a', lineWidth: 1 });
+
+manager.addDrawing(support);
+
+// Select, deselect, remove
+manager.selectDrawing('support');
+manager.deselectAll();
+manager.removeDrawing('support');
+
+// Export/import drawings as JSON
+const json = manager.exportDrawings();
+// manager.importDrawings(json, factory);
+
+// Access the tool registry for all 68 tool definitions
+const registry = getToolRegistry();
+const allTools = registry.getAllTools();
+```
+
+## Screenshots
+
+### Trend Line Tools
+![Trend Line Tools](docs/trend%20line%20tools.png)
+
+### Gann & Fibonacci Tools
+![Gann and Fibonacci Tools](docs/Gann%20and%20Fibonacci%20tools.png)
+
+### Forecasting & Measurement Tools
+![Forecasting and Measurement Tools](docs/Forcasting%20and%20measurement%20tool.png)
+
+### Geometric Shapes
+![Geometric Shapes](docs/geometric%20shapes.png)
+
+### Annotation Tools
+![Annotation Tools](docs/Annotation%20tool.png)
+
+## Available Drawing Tools (68)
+
+### Lines
+
+| Tool | Export | Anchors |
+|------|--------|---------|
+| Trend Line | `TrendLine` | 2 |
+| Ray | `Ray` | 2 |
+| Info Line | `InfoLine` | 2 |
+| Extended Line | `ExtendedLine` | 2 |
+| Trend Angle | `TrendAngle` | 2 |
+| Horizontal Line | `HorizontalLine` | 1 |
+| Horizontal Ray | `HorizontalRay` | 1 |
+| Vertical Line | `VerticalLine` | 1 |
+| Cross Line | `CrossLine` | 1 |
+
+### Channels
+
+| Tool | Export | Anchors |
+|------|--------|---------|
+| Parallel Channel | `ParallelChannel` | 3 |
+| Regression Trend | `RegressionTrend` | 2 |
+| Flat Top/Bottom | `FlatTopBottom` | 3 |
+| Disjoint Channel | `DisjointChannel` | 4 |
+
+### Pitchforks
+
+| Tool | Export | Anchors |
+|------|--------|---------|
+| Andrews Pitchfork | `AndrewsPitchfork` | 3 |
+| Schiff Pitchfork | `SchiffPitchfork` | 3 |
+| Modified Schiff Pitchfork | `ModifiedSchiffPitchfork` | 3 |
+| Inside Pitchfork | `InsidePitchfork` | 3 |
+
+### Fibonacci
+
+| Tool | Export | Anchors |
+|------|--------|---------|
+| Fib Retracement | `FibRetracement` | 2 |
+| Fib Extension | `FibExtension` | 3 |
+| Fib Channel | `FibChannel` | 3 |
+| Fib Time Zone | `FibTimeZone` | 2 |
+| Fib Speed Fan | `FibSpeedFan` | 2 |
+| Fib Time Extension | `FibTimeExtension` | 3 |
+| Fib Circles | `FibCircles` | 2 |
+| Fib Spiral | `FibSpiral` | 2 |
+| Fib Arcs | `FibArcs` | 2 |
+| Fib Wedge | `FibWedge` | 3 |
+| Pitchfan | `Pitchfan` | 3 |
+
+### Gann
+
+| Tool | Export | Anchors |
+|------|--------|---------|
+| Gann Box | `GannBox` | 2 |
+| Gann Fan | `GannFan` | 2 |
+| Gann Square Fixed | `GannSquareFixed` | 1 |
+| Gann Square | `GannSquare` | 2 |
+
+### Forecasting & Measurement
+
+| Tool | Export | Anchors |
+|------|--------|---------|
+| Long Position | `LongPosition` | 3 |
+| Short Position | `ShortPosition` | 3 |
+| Forecast | `Forecast` | 2 |
+| Bars Pattern | `BarsPattern` | 3 |
+| Projection | `Projection` | 3 |
+| Price Range | `PriceRange` | 2 |
+| Date Range | `DateRange` | 2 |
+| Date & Price Range | `DatePriceRange` | 2 |
+
+### Shapes
+
+| Tool | Export | Anchors |
+|------|--------|---------|
+| Rectangle | `Rectangle` | 2 |
+| Rotated Rectangle | `RotatedRectangle` | 3 |
+| Circle | `Circle` | 2 |
+| Triangle | `Triangle` | 3 |
+| Ellipse | `Ellipse` | 2 |
+| Arc | `Arc` | 3 |
+| Path | `Path` | 2+ |
+| Polyline | `Polyline` | 2+ |
+| Curve | `Curve` | 4 |
+| Double Curve | `DoubleCurve` | 3 |
+
+### Annotations
+
+| Tool | Export | Anchors |
+|------|--------|---------|
+| Text | `TextAnnotation` | 1 |
+| Callout | `Callout` | 2 |
+| Anchored Text | `AnchoredText` | 2 |
+| Note | `Note` | 1 |
+| Price Note | `PriceNote` | 1 |
+| Price Label | `PriceLabel` | 1 |
+| Flag Mark | `FlagMark` | 1 |
+| Pin | `Pin` | 1 |
+| Comment | `Comment` | 1 |
+| Signpost | `Signpost` | 1 |
+| Table | `Table` | 1 |
+| Brush | `Brush` | 2+ |
+| Highlighter | `Highlighter` | 2+ |
+| Arrow | `Arrow` | 2 |
+| Arrow Marker | `ArrowMarker` | 1 |
+| Arrow Mark Up | `ArrowMarkUp` | 1 |
+| Arrow Mark Down | `ArrowMarkDown` | 1 |
+
+## Architecture
+
+Each drawing tool follows a two-class pattern:
+
+- **Tool class** (e.g. `TrendLine`) - extends `Drawing`, holds anchors/state, implements hit testing and geometry computation
+- **Pane view** (e.g. `TrendLinePaneView`) - implements `IPrimitivePaneView` from lightweight-charts, handles canvas rendering
+
+The `DrawingManager` orchestrates lifecycle, selection, drag-editing, and event emission.
+
+## License
+
+MIT