2.0 first commit

src/trend-line/pane-renderer.ts

@@ -0,0 +1,40 @@
+import { ViewPoint } from "./pane-view";
+
+import { CanvasRenderingTarget2D } from "fancy-canvas";
+import { TwoPointDrawingPaneRenderer } from "../drawing/pane-renderer";
+import { DrawingOptions } from "../drawing/options";
+
+export class TrendLinePaneRenderer extends TwoPointDrawingPaneRenderer {
+	constructor(p1: ViewPoint, p2: ViewPoint, text1: string, text2: string, options: DrawingOptions) {
+		super(p1, p2, text1, text2, options);
+	}
+
+	draw(target: CanvasRenderingTarget2D) {
+		target.useBitmapCoordinateSpace(scope => {
+			if (
+				this._p1.x === null ||
+				this._p1.y === null ||
+				this._p2.x === null ||
+				this._p2.y === null
+			)
+				return;
+			const ctx = scope.context;
+
+			const scaled = this._getScaledCoordinates(scope);
+			if (!scaled) return;
+
+			ctx.lineWidth = this._options.width;
+			ctx.strokeStyle = this._options.lineColor;
+			ctx.beginPath();
+			ctx.moveTo(scaled.x1, scaled.y1);
+			ctx.lineTo(scaled.x2, scaled.y2);
+			ctx.stroke();
+			// this._drawTextLabel(scope, this._text1, x1Scaled, y1Scaled, true);
+			// this._drawTextLabel(scope, this._text2, x2Scaled, y2Scaled, false);
+
+			if (!this._options.showCircles) return;
+			this._drawEndCircle(scope, scaled.x1, scaled.y1);
+			this._drawEndCircle(scope, scaled.x2, scaled.y2);
+		});
+	}
+}

src/trend-line/pane-view.ts

@@ -0,0 +1,25 @@
+import { Coordinate, } from 'lightweight-charts';
+import { TrendLine } from './trend-line';
+import { TrendLinePaneRenderer } from './pane-renderer';
+import { TwoPointDrawingPaneView } from '../drawing/pane-view';
+
+export interface ViewPoint {
+	x: Coordinate | null;
+	y: Coordinate | null;
+}
+
+export class TrendLinePaneView extends TwoPointDrawingPaneView {
+	constructor(source: TrendLine) {
+		super(source)
+	}
+
+	renderer() {
+		return new TrendLinePaneRenderer(
+			this._p1,
+			this._p2,
+			'' + this._source._p1.price.toFixed(1),
+			'' + this._source._p2.price.toFixed(1),
+			this._source._options
+		);
+	}
+}

src/trend-line/trend-line.ts

@@ -0,0 +1,109 @@
+import {
+	MouseEventParams,
+} from 'lightweight-charts';
+
+
+import { TrendLinePaneView } from './pane-view';
+import { Point } from '../drawing/data-source';
+import { Drawing, InteractionState } from '../drawing/drawing';
+import { DrawingOptions } from '../drawing/options';
+import { TwoPointDrawing } from '../drawing/two-point-drawing';
+
+
+export class TrendLine extends TwoPointDrawing {
+	_type = "TrendLine"
+
+	constructor(
+		p1: Point,
+		p2: Point,
+		options?: Partial<DrawingOptions>
+	) {
+		super(p1, p2, options)
+		this._paneViews = [new TrendLinePaneView(this)];
+	}
+
+	_moveToState(state: InteractionState) {
+		switch(state) {
+
+			case InteractionState.NONE:
+				document.body.style.cursor = "default";
+				this._options.showCircles = false;
+				this.requestUpdate();
+				this._unsubscribe("mousedown", this._handleMouseDownInteraction);
+				break;
+
+			case InteractionState.HOVERING:
+				document.body.style.cursor = "pointer";
+				this._options.showCircles = true;
+				this.requestUpdate();
+				this._subscribe("mousedown", this._handleMouseDownInteraction);
+				this._unsubscribe("mouseup", this._handleMouseDownInteraction);
+				this.chart.applyOptions({handleScroll: true});
+				break;
+
+			case InteractionState.DRAGGINGP1:
+			case InteractionState.DRAGGINGP2:
+			case InteractionState.DRAGGING:
+				document.body.style.cursor = "grabbing";
+				this._subscribe("mouseup", this._handleMouseUpInteraction);
+				this.chart.applyOptions({handleScroll: false});
+				break;
+		}
+		this._state = state;
+	}
+
+
+	 _onDrag(diff: any) {
+		if (this._state == InteractionState.DRAGGING || this._state == InteractionState.DRAGGINGP1) {
+			Drawing._addDiffToPoint(this._p1, diff.time, diff.logical, diff.price);
+		}
+		if (this._state == InteractionState.DRAGGING || this._state == InteractionState.DRAGGINGP2) {
+			Drawing._addDiffToPoint(this._p2, diff.time, diff.logical, diff.price);
+		}
+	}
+
+	protected _onMouseDown() {
+        this._startDragPoint = null;
+		const hoverPoint = this._latestHoverPoint;
+        if (!hoverPoint) return;
+		const p1  = this._paneViews[0]._p1;
+		const p2  = this._paneViews[0]._p2;
+
+		if (!p1.x || !p2.x || !p1.y || !p2.y) return this._moveToState(InteractionState.DRAGGING);
+		
+		const tolerance = 10;
+		if (Math.abs(hoverPoint.x-p1.x) < tolerance && Math.abs(hoverPoint.y-p1.y) < tolerance) {
+			this._moveToState(InteractionState.DRAGGINGP1)
+		}
+		else if (Math.abs(hoverPoint.x-p2.x) < tolerance && Math.abs(hoverPoint.y-p2.y) < tolerance) {
+			this._moveToState(InteractionState.DRAGGINGP2)
+		}
+		else {
+			this._moveToState(InteractionState.DRAGGING);
+		}
+	}
+
+	protected _mouseIsOverDrawing(param: MouseEventParams, tolerance = 4) {
+
+		if (!param.point) return false;;
+
+		const x1 = this._paneViews[0]._p1.x;
+		const y1 = this._paneViews[0]._p1.y;
+		const x2 = this._paneViews[0]._p2.x;
+		const y2 = this._paneViews[0]._p2.y;
+		if (!x1 || !x2 || !y1 || !y2 ) return false;
+
+		const mouseX = param.point.x;
+		const mouseY = param.point.y;
+
+		if (mouseX <= Math.min(x1, x2) - tolerance ||
+			mouseX >= Math.max(x1, x2) + tolerance) {
+			return false;
+		}
+
+		const distance = Math.abs((y2 - y1) * mouseX - (x2 - x1) * mouseY + x2 * y1 - y2 * x1
+    	) / Math.sqrt((y2 - y1) ** 2 + (x2 - x1) ** 2);
+
+    	return distance <= tolerance
+	}
+}