lightweight-charts-drawing 0.1.1 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,92 @@
+# Changelog
+
+## 0.2.0 (26/09/2026)
+
+A new library built on a shared drawing core (`src/tv`) that is also used by
+[OpenTrader](https://github.com/deepentropy/opentrader), with a canvas
+runtime (`src/runtime`). Breaking: the 0.1 API is removed.
+
+### Breaking changes
+
+- The 0.1 runtime is removed: `Drawing` and every tool class (`TrendLine`,
+  `FibRetracement`, …) with their pane views, the 0.1 `DrawingManager`
+  (`attach`, `addDrawing`, `selectDrawing`, …), `InteractionHandler`,
+  `ToolRegistry` / `getToolRegistry` / `TOOL_DEFINITIONS`, the geometry and
+  canvas helpers, `PreviewRenderer`.
+- New drawing model: a drawing is plain data `{ id, kind, points: [{ time,
+  price }], style, … }` (types `Drawing`, `NewDrawing`, `DrawingStyle`) with
+  TradingView field names and factory defaults. The 0.1 JSON format
+  (`{ type, anchors, style: { lineColor, … }, options }`) is not read by
+  `importJSON`.
+- Tool names follow TradingView / OpenTrader:
+
+  | 0.1 | 0.2 |
+  |---|---|
+  | fib-extension | trend-based-fib-extension |
+  | fib-time-extension | trend-based-fib-time |
+  | fib-arcs | fib-speed-resistance-arcs |
+  | fib-speed-fan | fib-speed-resistance-fan |
+  | forecast | position-forecast |
+  | andrews-pitchfork | pitchfork |
+  | date-price-range | date-and-price-range |
+  | bars-pattern | bar-pattern |
+  | text-annotation | text |
+  | projection | sector |
+
+- `anchored-text` is removed. TradingView has retired its Anchored text tool
+  in favour of the Text tool with "Anchor drawing" on
+  (`toggleAnchored`).
+- `fancy-canvas` is no longer a dependency (types only, at build time).
+
+### New
+
+- `DrawingManager(chart, series, options)`: one series primitive draws every
+  drawing, the placement preview, the anchors (TradingView style) and the
+  drawings' price / time axis labels.
+  - Placement by TradingView's rules: clicks, 1-click tools, press-drag for
+    brush / highlighter, polyline / path / ghost feed finished by a
+    double-click or a click on the last point, the data TradingView computes
+    at placement (position levels, bar-pattern snapshot, ghost-feed seed,
+    curve controls, trend angle, Gann square), text tools ask the host for
+    an editor (`textEdit` event).
+  - Hover, multi-select (Ctrl / Cmd), anchor / body / group drags with each
+    tool's anchor rules, Ctrl + drag clone, magnet (weak / strong, Shift /
+    Ctrl modifiers), Shift 45° / square constraints, Escape / Delete, z-order,
+    per-interval visibility, locked drawings, cursors.
+  - "Anchor drawing" for Text, Pin and Table (`toggleAnchored`).
+  - Table cell editing (`tableEdit` event, `setTableCellText`, `tableOp`),
+    images (`addImage` + the image cache hooks).
+  - JSON export / import of the drawing model (`exportJSON`, `importJSON`
+    with schema check and point-model migration).
+- 86 tools with TradingView factory defaults, labels and hit tests
+  ([docs/TOOLS.md](docs/TOOLS.md)): lines, channels, pitchforks, Fibonacci
+  and Gann tools, chart patterns, Elliott waves, cycles, forecasting and
+  measuring tools (positions, ranges, forecast, bar pattern, ghost feed),
+  volume-based tools (anchored VWAP, fixed range / anchored volume
+  profile), shapes, text and notes, table, image, font icon.
+- For hosts that draw their own way: `sceneOf` (renderer-neutral scene of a
+  drawing), `drawScene` (canvas), `hitTestKind`, `drawingAxisLabels`,
+  `finishPlacement` / `applyDrag` (interaction rules), `makeCoords` (chart ↔
+  price / time bridge), `parseDrawings` / `migrateDrawing`.
+- The package imports nothing from lightweight-charts at run time (types
+  only), so a host keeps a single lightweight-charts copy.
+
+### Notes
+
+- The volume-based tools need bars with a volume: pass them with the
+  `bars` option (series data usually has none).
+- Checks behind this release (in `docs/port-opentrader/`): the renderers
+  match OpenTrader's on 430 golden fixtures, the canvas renderer matches the
+  SVG output on 774 fixtures (0.05 % of drawn pixels differ, text
+  anti-aliasing), and all 86 tools pass a real-mouse survey (place, select,
+  anchor drag, body drag, delete) in the demo.
+
+## 0.1.1 (26/02/2026)
+
+- Description without "professional"; screenshots and the outdated
+  changelog removed from the README and docs.
+
+## 0.1.0
+
+- First release: tool classes with canvas pane views, `DrawingManager`,
+  tool registry, demo on GitHub Pages.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 deepentropy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -2,7 +2,14 @@
 
 **[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.
+TradingView-style drawing tools for [lightweight-charts](https://github.com/tradingview/lightweight-charts) v5:
+86 tools with TradingView's factory defaults, labels, hit tests, placement
+and anchor rules (trend lines, channels, pitchforks, Fibonacci and Gann
+tools, patterns, Elliott waves, cycles, forecasting and measuring tools,
+volume-based tools, shapes, text and notes). List: [docs/TOOLS.md](docs/TOOLS.md).
+
+> Version 0.2 breaks the 0.1 API: the tool classes of 0.1 are replaced by one
+> `DrawingManager` on a shared drawing core. See [CHANGELOG.md](CHANGELOG.md).
 
 ## Installation
 
@@ -10,216 +17,97 @@
 npm install lightweight-charts-drawing lightweight-charts
 ```
 
-## Quick Start
+## 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,
-});
+import { DrawingManager } from 'lightweight-charts-drawing';
 
+const chart = createChart(document.getElementById('chart')!, { autoSize: true });
 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')!);
+series.setData(bars); // your OHLC data
 
-// 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 });
+const drawings = new DrawingManager(chart, series, { magnet: 'weak' });
 
-manager.addDrawing(trendLine);
+// Arm a tool: the user places it with the mouse (TV clicks / drag rules).
+drawings.setTool('fib-retracement');
 
-// Add a Fibonacci retracement
-const fib = new FibRetracement('fib-1', [
-  { time: '2024-01-01', price: 95 },
-  { time: '2024-03-01', price: 115 },
-]);
+// Or add one in code (the tool's TradingView defaults fill the style).
+drawings.add({ kind: 'trend-line', points: [
+  { time: bars[10].time, price: bars[10].low },
+  { time: bars[40].time, price: bars[40].high },
+] });
 
-manager.addDrawing(fib);
+// Save / restore (the core Drawing model, checked and migrated on import).
+localStorage.setItem('drawings', drawings.exportJSON());
+drawings.importJSON(localStorage.getItem('drawings') ?? '[]');
 ```
 
-## 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 });
+## DrawingManager
+
+`new DrawingManager(chart, series, options?)` attaches one series primitive
+that draws every drawing, the placement preview, the anchors and the
+drawings' axis labels.
+
+Options: `bars` (bar getter with volume; default the series data, which
+usually has no volume: the volume profiles then show no rows and the
+anchored VWAP uses equal weights), `fontFamily`
+(default the chart font), `magnet` (`'off' | 'weak' | 'strong'`), `interval`
+(per-interval visibility, TV Visibility tab), `timeInfo` (time zone /
+intraday of date labels), `stayInDrawingMode` (TV Keep drawing).
+
+| Method | |
+|---|---|
+| `setTool(kind \| null, { glyph? })`, `tool()` | arm / disarm a tool (`kind` from docs/TOOLS.md) |
+| `setMagnet(mode)`, `setInterval(i)`, `setStayInDrawingMode(on)` | settings |
+| `add(drawing)`, `update(drawing)`, `remove(id)`, `clear()`, `get(id)`, `drawings()` | drawings |
+| `select(ids)`, `selection()` | selection (multi-select with Ctrl / Cmd) |
+| `bringToFront(id)`, `sendToBack(id)` | z-order |
+| `toggleAnchored(id)` | TV "Anchor drawing" for Text, Pin and Table: the drawing keeps its pane position when the chart scrolls (`isAnchorable(kind)`) |
+| `exportJSON()`, `importJSON(json)` | save / restore |
+| `addImage({ name, width, height })` | place an image (file put in the image cache by the host: `cacheImage` / `setImageReader`) |
+| `setTableCellText(id, cell, text)`, `endTableEdit()`, `tableOp(id, op)`, `tableState()` | table cell editing (after a `tableEdit` event) and row / column operations |
+| `on(event, cb)` → unsubscribe | events |
+| `redraw()`, `destroy()` | |
+
+Events: `change`, `add`, `update`, `remove`, `selection`, `tool`,
+`textEdit` (a text tool was placed or double-clicked: open your editor at
+the given pane point and `update` the drawing's `text`), `tableEdit` (a click
+on a cell of the selected table: open your editor over the given cell box),
+`gestureEnd` (end of a drag / placement, for undo grouping).
+
+Mouse and keys (TradingView behaviour): placement by clicks, press-drag for
+brush / highlighter, double-click (or a click on the last point) finishes a
+path / polyline; anchor drags, body drag of a selected drawing, Ctrl / Cmd
+click to multi-select and group drag, Ctrl + body drag clones; Shift = 45°
+steps / square boxes and magnet off, Ctrl / Cmd inverts the magnet; Escape
+drops pending points, then the tool, then the selection; Delete removes the
+selection (locked drawings stay).
+
+The host keeps what is not drawing logic: undo stack, storage, settings
+dialogs, text / table editors, toolbar, context menu.
 
-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);
+## Architecture
 
-// Access the tool registry for all 68 tool definitions
-const registry = getToolRegistry();
-const allTools = registry.getAllTools();
+```
+src/tv/        shared drawing core, no UI and no lightweight-charts runtime:
+               tool model + TradingView factory defaults (specs), hit tests,
+               placement and drag rules (interact), saved-drawing migration
+               (serialize), renderer-neutral scenes per tool (scene)
+src/runtime/   canvas runtime: DrawingManager, scene -> canvas renderer,
+               chart <-> price / time bridge (makeCoords)
 ```
 
-## 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:
+The core is shared with [OpenTrader](https://github.com/deepentropy/opentrader),
+which draws the same scenes as SVG. The package imports only types from
+lightweight-charts, so the chart library is not bundled twice.
 
-- **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
+## Demo
 
-The `DrawingManager` orchestrates lifecycle, selection, drag-editing, and event emission.
+```bash
+npm run demo        # dev server, demo/
+npm run build:demo  # dist-demo/ (GitHub Pages)
+```
 
 ## License