implement drawing methods, fix horizontal line bug, continue refactor

src/drawing/data-source.ts

@@ -1,23 +1,15 @@
 import {
-    IChartApi,
-    ISeriesApi,
     Logical,
-    SeriesOptionsMap,
     Time,
 } from 'lightweight-charts';
 
-import { DrawingOptions } from './options';
-
 export interface Point {
     time: Time | null;
     logical: Logical;
     price: number;
 }
 
-export interface DrawingDataSource {
-    chart: IChartApi;
-    series: ISeriesApi<keyof SeriesOptionsMap>;
-    options: DrawingOptions;
-    p1: Point;
-    p2: Point;
+export interface DiffPoint {
+    logical: number;
+    price: number;
 }

src/drawing/drawing-tool.ts

@@ -5,6 +5,7 @@ import {
     SeriesType,
 } from 'lightweight-charts';
 import { Drawing } from './drawing';
+import { HorizontalLine } from '../horizontal-line/horizontal-line';
 
 
 export class DrawingTool {
@@ -69,9 +70,10 @@ export class DrawingTool {
 
         if (this._activeDrawing == null) {
             if (this._drawingType == null) return;
-
+            // TODO this line wont work for horizontals ?
             this._activeDrawing = new this._drawingType(point, point);
             this._series.attachPrimitive(this._activeDrawing);
+            if (this._drawingType == HorizontalLine) this._onClick(param);
         }
         else {
             this._drawings.push(this._activeDrawing);

src/drawing/drawing.ts

@@ -1,10 +1,14 @@
-import { ISeriesApi, MouseEventParams, SeriesType, Time, Logical } from 'lightweight-charts';
+import {
+    ISeriesApi,
+    Logical,
+    MouseEventParams,
+    SeriesType
+} from 'lightweight-charts';
 
 import { PluginBase } from '../plugin-base';
-import { Point } from './data-source';
-import { DrawingPaneView } from './pane-view';
+import { DiffPoint, Point } from './data-source';
 import { DrawingOptions, defaultOptions } from './options';
-import { convertTime } from '../helpers/time';
+import { DrawingPaneView } from './pane-view';
 
 export enum InteractionState {
     NONE,
@@ -16,17 +20,12 @@ export enum InteractionState {
     DRAGGINGP4,
 }
 
-interface DiffPoint {
-    time: number | null;
-    logical: number;
-    price: number;
-}
-
 export abstract class Drawing extends PluginBase {
     _paneViews: DrawingPaneView[] = [];
     _options: DrawingOptions;
 
     abstract _type: string;
+    protected _points: (Point|null)[] = [];
 
     protected _state: InteractionState = InteractionState.NONE;
 
@@ -66,7 +65,13 @@ export abstract class Drawing extends PluginBase {
         this.requestUpdate();
     }
 
-    public abstract updatePoints(...points: (Point | null)[]): void;
+    public updatePoints(...points: (Point | null)[]) {
+        for (let i=0; i<this.points.length; i++) {
+            if (points[i] == null) continue;
+            this.points[i] = points[i] as Point;
+        }
+        this.requestUpdate();
+    }
 
     detach() {
         this._options.lineColor = 'transparent';
@@ -78,6 +83,10 @@ export abstract class Drawing extends PluginBase {
 
     }
 
+    get points() {
+        return this._points;
+    }
+
     protected _subscribe(name: keyof DocumentEventMap, listener: any) {
         document.body.addEventListener(name, listener);
         this._listeners.push({name: name, listener: listener});
@@ -92,20 +101,19 @@ export abstract class Drawing extends PluginBase {
 
     _handleHoverInteraction(param: MouseEventParams) {
         this._latestHoverPoint = param.point;
-        if (!Drawing._mouseIsDown) {
+        if (Drawing._mouseIsDown) {
+            this._handleDragInteraction(param);
+        } else {
             if (this._mouseIsOverDrawing(param)) {
                 if (this._state != InteractionState.NONE) return;
                 this._moveToState(InteractionState.HOVERING);
                 Drawing.hoveredObject = Drawing.lastHoveredObject = this;
-            }
-            else {
+            } else {
                 if (this._state == InteractionState.NONE) return;
                 this._moveToState(InteractionState.NONE);
                 if (Drawing.hoveredObject === this) Drawing.hoveredObject = null;
             }
-            return;
         }
-        this._handleDragInteraction(param);
     }
 
     public static _eventToPoint(param: MouseEventParams, series: ISeriesApi<SeriesType>) {
@@ -121,35 +129,27 @@ export abstract class Drawing extends PluginBase {
 
     protected static _getDiff(p1: Point, p2: Point): DiffPoint {
         const diff: DiffPoint = {
-            time: null,
             logical: p1.logical-p2.logical,
             price: p1.price-p2.price,
         }
-        if (p1.time && p2.time) {
-            diff.time = convertTime(p1.time)-convertTime(p2.time);
-        }
         return diff;
     }
 
-    protected static _addDiffToPoint(point: Point, timeDiff: number | null, logicalDiff: number, priceDiff: number) {
-        if (timeDiff != null && point.time != null) {
-            point.time = (convertTime(point.time)+timeDiff)/1000 as Time;
-        }
-        else {
-            point.time = null;
-        }
+    protected _addDiffToPoint(point: Point | null, logicalDiff: number, priceDiff: number) {
+        if (!point) return;
         point.logical = point.logical + logicalDiff as Logical;
         point.price = point.price+priceDiff;
+        point.time = this.series.dataByIndex(point.logical)?.time || null;
     }
 
     protected _handleMouseDownInteraction = () => {
-        if (Drawing._mouseIsDown) return;
+        // if (Drawing._mouseIsDown) return;
         Drawing._mouseIsDown = true;
         this._onMouseDown();
     }
 
     protected _handleMouseUpInteraction = () => {
-        if (!Drawing._mouseIsDown) return;
+        // if (!Drawing._mouseIsDown) return;
         Drawing._mouseIsDown = false;
         this._moveToState(InteractionState.HOVERING);
     }
@@ -174,12 +174,7 @@ export abstract class Drawing extends PluginBase {
     }
 
     protected abstract _onMouseDown(): void;
-    protected abstract _onDrag(diff: any): void; // TODO any?
+    protected abstract _onDrag(diff: DiffPoint): void;
     protected abstract _moveToState(state: InteractionState): void;
     protected abstract _mouseIsOverDrawing(param: MouseEventParams): boolean;
-
-    // toJSON() {
-    //  const {series, chart, ...serialized} = this;
-    //  return serialized;
-    // }
 }

src/drawing/options.ts

@@ -1,18 +1,14 @@
 import { LineStyle } from "lightweight-charts";
 
+
 export interface DrawingOptions {
     lineColor: string;
     lineStyle: LineStyle
     width: number;
-    showLabels: boolean;
-    showCircles: boolean,
 }
 
-
 export const defaultOptions: DrawingOptions = {
-    lineColor: 'rgb(255, 255, 255)',
+    lineColor: '#1E80F0',
     lineStyle: LineStyle.Solid,
     width: 4,
-    showLabels: true,
-    showCircles: false,
-};
+};

src/drawing/pane-renderer.ts

@@ -17,15 +17,13 @@ export abstract class DrawingPaneRenderer implements ISeriesPrimitivePaneRendere
 export abstract class TwoPointDrawingPaneRenderer extends DrawingPaneRenderer {
     _p1: ViewPoint;
     _p2: ViewPoint;
-    _text1: string;
-    _text2: string;
+    protected _hovered: boolean;
 
-    constructor(p1: ViewPoint, p2: ViewPoint, text1: string, text2: string, options: DrawingOptions) {
+    constructor(p1: ViewPoint, p2: ViewPoint, options: DrawingOptions, hovered: boolean) {
         super(options);
         this._p1 = p1;
         this._p2 = p2;
-        this._text1 = text1;
-        this._text2 = text2;
+        this._hovered = hovered;
     }
 
     abstract draw(target: CanvasRenderingTarget2D): void;

src/drawing/pane-view.ts

@@ -33,11 +33,12 @@ export abstract class TwoPointDrawingPaneView extends DrawingPaneView {
     }
 
     update() {
+        if (!this._source.p1 || !this._source.p2) return;
         const series = this._source.series;
-        const y1 = series.priceToCoordinate(this._source._p1.price);
-        const y2 = series.priceToCoordinate(this._source._p2.price);
-        const x1 = this._getX(this._source._p1);
-        const x2 = this._getX(this._source._p2);
+        const y1 = series.priceToCoordinate(this._source.p1.price);
+        const y2 = series.priceToCoordinate(this._source.p2.price);
+        const x1 = this._getX(this._source.p1);
+        const x2 = this._getX(this._source.p2);
         this._p1 = { x: x1, y: y1 };
         this._p2 = { x: x2, y: y2 };
         if (!x1 || !x2 || !y1 || !y2) return;
@@ -47,9 +48,6 @@ export abstract class TwoPointDrawingPaneView extends DrawingPaneView {
 
     _getX(p: Point) {
         const timeScale = this._source.chart.timeScale();
-        if (!p.time) {
-            return timeScale.logicalToCoordinate(p.logical);
-        }
-        return timeScale.timeToCoordinate(p.time);
+        return timeScale.logicalToCoordinate(p.logical);
     }
 }

src/drawing/two-point-drawing.ts

@@ -5,18 +5,18 @@ import { TwoPointDrawingPaneView } from './pane-view';
 
 
 export abstract class TwoPointDrawing extends Drawing {
-    _p1: Point;
-    _p2: Point;
     _paneViews: TwoPointDrawingPaneView[] = [];
 
+    protected _hovered: boolean = false;
+
     constructor(
         p1: Point,
         p2: Point,
         options?: Partial<DrawingOptions>
     ) {
         super()
-        this._p1 = p1;
-        this._p2 = p2;
+        this.points.push(p1);
+        this.points.push(p2);
         this._options = {
             ...defaultOptions,
             ...options,
@@ -31,9 +31,8 @@ export abstract class TwoPointDrawing extends Drawing {
         this.updatePoints(null, point);
     }
 
-    public updatePoints(...points: (Point|null)[]) {
-        this._p1 = points[0] || this._p1;
-        this._p2 = points[1] || this._p2;
-        this.requestUpdate();
-    }
+    get p1() { return this.points[0]; }
+    get p2() { return this.points[1]; }
+
+    get hovered() { return this._hovered; }
 }