implement drawing methods, fix horizontal line bug, continue refactor

src/vertical-line/pane-renderer.ts

@@ -0,0 +1,32 @@
+import { CanvasRenderingTarget2D } from "fancy-canvas";
+import { DrawingOptions } from "../drawing/options";
+import { DrawingPaneRenderer } from "../drawing/pane-renderer";
+import { ViewPoint } from "../drawing/pane-view";
+import { setLineStyle } from "../helpers/canvas-rendering";
+
+export class VerticalLinePaneRenderer extends DrawingPaneRenderer {
+    _point: ViewPoint = {x: null, y: null};
+
+    constructor(point: ViewPoint, options: DrawingOptions) {
+        super(options);
+        this._point = point;
+    }
+
+    draw(target: CanvasRenderingTarget2D) {
+        target.useBitmapCoordinateSpace(scope => {
+            if (this._point.x == null) return;
+            const ctx = scope.context;
+            const scaledX = this._point.x * scope.horizontalPixelRatio;
+
+            ctx.lineWidth = this._options.width;
+            ctx.strokeStyle = this._options.lineColor;
+            setLineStyle(ctx, this._options.lineStyle);
+
+            ctx.beginPath();
+            ctx.moveTo(scaledX, 0);
+            ctx.lineTo(scaledX, scope.bitmapSize.height);
+            ctx.stroke();
+        });
+    }
+
+}

src/vertical-line/pane-view.ts

@@ -0,0 +1,29 @@
+import { VerticalLinePaneRenderer } from './pane-renderer';
+import { VerticalLine } from './vertical-line';
+import { DrawingPaneView, ViewPoint } from '../drawing/pane-view';
+
+
+export class VerticalLinePaneView extends DrawingPaneView {
+    _source: VerticalLine;
+    _point: ViewPoint = {x: null, y: null};
+
+    constructor(source: VerticalLine) {
+        super(source);
+        this._source = source;
+    }
+
+    update() {
+        const point = this._source._point;
+        const timeScale = this._source.chart.timeScale()
+        const series = this._source.series;
+        this._point.x = timeScale.logicalToCoordinate(point.logical)
+        this._point.y = series.priceToCoordinate(point.price);
+    }
+
+    renderer() {
+        return new VerticalLinePaneRenderer(
+            this._point,
+            this._source._options
+        );
+    }
+}

src/vertical-line/vertical-line.ts

@@ -0,0 +1,89 @@
+import {
+    DeepPartial,
+    MouseEventParams
+} from "lightweight-charts";
+import { Point } from "../drawing/data-source";
+import { Drawing, InteractionState } from "../drawing/drawing";
+import { DrawingOptions } from "../drawing/options";
+import { VerticalLinePaneView } from "./pane-view";
+import { GlobalParams } from "../general/global-params";
+
+
+declare const window: GlobalParams;
+
+export class VerticalLine extends Drawing {
+    _type = 'VerticalLine';
+    _paneViews: VerticalLinePaneView[];
+    _point: Point;
+    private _callbackName: string | null;
+
+    protected _startDragPoint: Point | null = null;
+
+    constructor(point: Point, options: DeepPartial<DrawingOptions>, callbackName=null) {
+        super(options)
+        this._point = point;
+        this._paneViews = [new VerticalLinePaneView(this)];
+        this._callbackName = callbackName;
+    }
+
+    public updatePoints(...points: (Point | null)[]) {
+        for (const p of points) if (p) this._point = p;
+        this.requestUpdate();
+    }
+
+    _moveToState(state: InteractionState) {
+        switch(state) {
+            case InteractionState.NONE:
+                document.body.style.cursor = "default";
+                this._unsubscribe("mousedown", this._handleMouseDownInteraction);
+                break;
+
+            case InteractionState.HOVERING:
+                document.body.style.cursor = "pointer";
+                this._unsubscribe("mouseup", this._childHandleMouseUpInteraction);
+                this._subscribe("mousedown", this._handleMouseDownInteraction)
+                this.chart.applyOptions({handleScroll: true});
+                break;
+
+            case InteractionState.DRAGGING:
+                document.body.style.cursor = "grabbing";
+                this._subscribe("mouseup", this._childHandleMouseUpInteraction);
+                this.chart.applyOptions({handleScroll: false});
+                break;
+        }
+        this._state = state;
+    }
+
+    _onDrag(diff: any) {
+        this._addDiffToPoint(this._point, diff.logical, 0);
+        this.requestUpdate();
+    }
+
+    _mouseIsOverDrawing(param: MouseEventParams, tolerance = 4) {
+        if (!param.point) return false;
+        const timeScale = this.chart.timeScale()
+        let x;
+        if (this._point.time) {
+            x = timeScale.timeToCoordinate(this._point.time);
+        }
+        else {
+            x = timeScale.logicalToCoordinate(this._point.logical);
+        }
+        if (!x) return false;
+        return (Math.abs(x-param.point.x) < tolerance);
+    }
+
+    protected _onMouseDown() {
+        this._startDragPoint = null;
+        const hoverPoint = this._latestHoverPoint;
+        if (!hoverPoint) return;
+        return this._moveToState(InteractionState.DRAGGING);
+    }
+
+    protected _childHandleMouseUpInteraction = () => {
+        this._handleMouseUpInteraction();
+        if (!this._callbackName) return;
+        console.log(window.callbackFunction);
+        window.callbackFunction(`${this._callbackName}_~_${this._point.price.toFixed(8)}`);
+    }
+}