2.0 first commit

src/horizontal-line/horizontal-line.ts

@@ -0,0 +1,74 @@
+import {
+    DeepPartial,
+    MouseEventParams
+} from "lightweight-charts";
+import { Point } from "../drawing/data-source";
+import { Drawing, InteractionState } from "../drawing/drawing";
+import { DrawingOptions } from "../drawing/options";
+import { HorizontalLinePaneView } from "./pane-view";
+
+export class HorizontalLine extends Drawing {
+    _type = 'HorizontalLine';
+    _paneViews: HorizontalLinePaneView[];
+    _point: Point;
+
+    protected _startDragPoint: Point | null = null;
+
+    constructor(point: Point, options: DeepPartial<DrawingOptions>) {
+        super(options)
+        this._point = point;
+        this._point.time = null;    // time is null for horizontal lines
+        this._paneViews = [new HorizontalLinePaneView(this)];
+
+        // TODO ids should be stored in an object dictionary so u can access the lines
+        // this.handler.horizontal_lines.push(this) TODO fix this in handler ?
+    }
+
+    public updatePoints(...points: (Point | null)[]) {
+        for (const p of points) if (p) this._point.price = p.price;
+        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._handleMouseUpInteraction);
+                this._subscribe("mousedown", this._handleMouseDownInteraction)
+                this.chart.applyOptions({handleScroll: true});
+                break;
+
+            case InteractionState.DRAGGING:
+                document.body.style.cursor = "grabbing";
+                document.body.addEventListener("mouseup", this._handleMouseUpInteraction);
+                this._subscribe("mouseup", this._handleMouseUpInteraction);
+                this.chart.applyOptions({handleScroll: false});
+                break;
+        }
+        this._state = state;
+    }
+
+    _onDrag(diff: any) {
+        Drawing._addDiffToPoint(this._point, 0, 0, diff.price);
+        this.requestUpdate();
+    }
+
+    _mouseIsOverDrawing(param: MouseEventParams, tolerance = 4) {
+        if (!param.point) return false;
+        const y = this.series.priceToCoordinate(this._point.price);
+        if (!y) return false;
+        return (Math.abs(y-param.point.y) < tolerance);
+    }
+
+    protected _onMouseDown() {
+        this._startDragPoint = null;
+        const hoverPoint = this._latestHoverPoint;
+        if (!hoverPoint) return;
+        return this._moveToState(InteractionState.DRAGGING);
+    }
+}

src/horizontal-line/pane-renderer.ts

@@ -0,0 +1,33 @@
+import { CanvasRenderingTarget2D } from "fancy-canvas";
+import { DrawingOptions } from "../drawing/options";
+import { DrawingPaneRenderer } from "../drawing/pane-renderer";
+import { ViewPoint } from "../drawing/pane-view";
+
+export class HorizontalLinePaneRenderer 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.y == null) return;
+            const ctx = scope.context;
+
+            const scaledY = Math.round(this._point.y * scope.verticalPixelRatio);
+            const scaledX = this._point.x ? this._point.x * scope.horizontalPixelRatio : 0;
+
+            ctx.lineWidth = this._options.width;
+            ctx.strokeStyle = this._options.lineColor;
+            ctx.beginPath();
+
+            ctx.moveTo(scaledX, scaledY);
+            ctx.lineTo(scope.bitmapSize.width, scaledY);
+
+            ctx.stroke();
+        });
+    }
+
+}

src/horizontal-line/pane-view.ts

@@ -0,0 +1,29 @@
+import { HorizontalLinePaneRenderer } from './pane-renderer';
+import { HorizontalLine } from './horizontal-line';
+import { DrawingPaneView, ViewPoint } from '../drawing/pane-view';
+
+
+export class HorizontalLinePaneView extends DrawingPaneView {
+    _source: HorizontalLine;
+    _point: ViewPoint = {x: null, y: null};
+
+    constructor(source: HorizontalLine) {
+        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 = point.time ? timeScale.timeToCoordinate(point.time) : null;
+        this._point.y = series.priceToCoordinate(point.price);
+    }
+
+    renderer() {
+        return new HorizontalLinePaneRenderer(
+            this._point,
+            this._source._options
+        );
+    }
+}

src/horizontal-line/ray-line.ts

@@ -0,0 +1,36 @@
+import {
+    DeepPartial,
+    MouseEventParams
+} from "lightweight-charts";
+import { Point } from "../drawing/data-source";
+import { Drawing } from "../drawing/drawing";
+import { DrawingOptions } from "../drawing/options";
+import { HorizontalLine } from "./horizontal-line";
+
+export class RayLine extends HorizontalLine {
+    _type = 'RayLine';
+
+    constructor(point: Point, options: DeepPartial<DrawingOptions>) {
+        super(point, options);
+        this._point.time = point.time;
+    }
+
+    public updatePoints(...points: (Point | null)[]) {
+        for (const p of points) if (p) this._point = p;
+        this.requestUpdate();
+    }
+
+    _onDrag(diff: any) {
+        Drawing._addDiffToPoint(this._point, diff.time, diff.logical, diff.price);
+        this.requestUpdate();
+    }
+
+    _mouseIsOverDrawing(param: MouseEventParams, tolerance = 4) {
+        if (!param.point) return false;
+        const y = this.series.priceToCoordinate(this._point.price);
+
+        const x = this._point.time ? this.chart.timeScale().timeToCoordinate(this._point.time) : null;
+        if (!y || !x) return false;
+        return (Math.abs(y-param.point.y) < tolerance && param.point.x > x - tolerance);
+    }
+}