2.0 first commit

src/drawing/data-source.ts

@@ -0,0 +1,23 @@
+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;
+}

src/drawing/drawing-tool.ts

@@ -0,0 +1,97 @@
+import {
+	IChartApi,
+	ISeriesApi,
+	MouseEventParams,
+	SeriesType,
+} from 'lightweight-charts';
+import { Drawing } from './drawing';
+
+
+export class DrawingTool {
+	private _chart: IChartApi;
+	private _series: ISeriesApi<SeriesType>;
+	private _finishDrawingCallback: Function | null = null;
+
+	private _drawings: Drawing[] = [];
+	private _activeDrawing: Drawing | null = null;
+	private _isDrawing: boolean = false;
+	private _drawingType: (new (...args: any[]) => Drawing) | null = null;
+
+	constructor(chart: IChartApi, series: ISeriesApi<SeriesType>, finishDrawingCallback: Function | null = null) {
+		this._chart = chart;
+		this._series = series;
+		this._finishDrawingCallback = finishDrawingCallback;
+
+		this._chart.subscribeClick(this._clickHandler);
+		this._chart.subscribeCrosshairMove(this._moveHandler);
+	}
+
+	private _clickHandler = (param: MouseEventParams) => this._onClick(param);
+	private _moveHandler = (param: MouseEventParams) => this._onMouseMove(param);
+
+	beginDrawing(DrawingType: new (...args: any[]) => Drawing) {
+		this._drawingType = DrawingType;
+		this._isDrawing = true;
+	}
+
+	stopDrawing() {
+		this._isDrawing = false;
+		this._activeDrawing = null;
+	}
+
+	get drawings() {
+		return this._drawings;
+	}
+
+	addNewDrawing(drawing: Drawing) {
+		this._series.attachPrimitive(drawing);
+		this._drawings.push(drawing);
+	}
+
+	delete(d: Drawing | null) {
+		if (d == null) return;
+		const idx = this._drawings.indexOf(d);
+		if (idx == -1) return;
+		this._drawings.splice(idx, 1)
+		d.detach();
+	}
+
+	clearDrawings() {
+		for (const d of this._drawings) d.detach();
+		this._drawings = [];
+	}
+
+	private _onClick(param: MouseEventParams) {
+		if (!this._isDrawing) return;
+
+		const point = Drawing._eventToPoint(param, this._series);
+		if (!point) return;
+
+		if (this._activeDrawing == null) {
+			if (this._drawingType == null) return;
+
+			this._activeDrawing = new this._drawingType(point, point);
+			this._series.attachPrimitive(this._activeDrawing);
+		}
+		else {
+			this._drawings.push(this._activeDrawing);
+			this.stopDrawing();
+
+			if (!this._finishDrawingCallback) return;
+			this._finishDrawingCallback();
+		}
+	}
+
+	private _onMouseMove(param: MouseEventParams) {
+		if (!param) return;
+
+		for (const t of this._drawings) t._handleHoverInteraction(param);
+
+		if (!this._isDrawing || !this._activeDrawing) return;
+
+		const point = Drawing._eventToPoint(param, this._series);
+		if (!point) return;
+		this._activeDrawing.updatePoints(null, point);
+		// this._activeDrawing.setSecondPoint(point);
+	}
+}

src/drawing/drawing.ts

@@ -0,0 +1,182 @@
+import { ISeriesApi, MouseEventParams, SeriesType, Time, Logical } from 'lightweight-charts';
+
+import { PluginBase } from '../plugin-base';
+import { Point } from './data-source';
+import { DrawingPaneView } from './pane-view';
+import { DrawingOptions, defaultOptions } from './options';
+import { convertTime } from '../helpers/time';
+
+export enum InteractionState {
+	NONE,
+	HOVERING,
+	DRAGGING,
+	DRAGGINGP1,
+	DRAGGINGP2,
+	DRAGGINGP3,
+	DRAGGINGP4,
+}
+
+interface DiffPoint {
+	time: number | null;
+	logical: number;
+	price: number;
+}
+
+export abstract class Drawing extends PluginBase {
+	_paneViews: DrawingPaneView[] = [];
+	_options: DrawingOptions;
+
+	abstract _type: string;
+
+	protected _state: InteractionState = InteractionState.NONE;
+
+	protected _startDragPoint: Point | null = null;
+	protected _latestHoverPoint: any | null = null;
+
+	protected static _mouseIsDown: boolean = false;
+
+	public static hoveredObject: Drawing | null = null;
+	public static lastHoveredObject: Drawing | null = null;
+
+	protected _listeners: any[] = [];
+
+	constructor(
+		options?: Partial<DrawingOptions>
+	) {
+		super()
+		this._options = {
+			...defaultOptions,
+			...options,
+		};
+	}
+
+	updateAllViews() {
+		this._paneViews.forEach(pw => pw.update());
+	}
+
+	paneViews() {
+		return this._paneViews;
+	}
+
+	applyOptions(options: Partial<DrawingOptions>) {
+		this._options = {
+			...this._options,
+			...options,
+		}
+		this.requestUpdate();
+	}
+
+	public abstract updatePoints(...points: (Point | null)[]): void;
+
+	detach() {
+		this.series.detachPrimitive(this);
+		for (const s of this._listeners) {
+			document.body.removeEventListener(s.name, s.listener)
+		}
+	}
+
+	protected _subscribe(name: keyof DocumentEventMap, listener: any) {
+		document.body.addEventListener(name, listener);
+		this._listeners.push({name: name, listener: listener});
+	}
+
+	protected _unsubscribe(name: keyof DocumentEventMap, callback: any) {
+		document.body.removeEventListener(name, callback);
+
+		const toRemove = this._listeners.find((x) => x.name === name && x.listener === callback)
+		this._listeners.splice(this._listeners.indexOf(toRemove), 1);
+	}
+
+	_handleHoverInteraction(param: MouseEventParams) {
+		this._latestHoverPoint = param.point;
+		if (!Drawing._mouseIsDown) {
+			if (this._mouseIsOverDrawing(param)) {
+				if (this._state != InteractionState.NONE) return;
+				this._moveToState(InteractionState.HOVERING);
+				Drawing.hoveredObject = Drawing.lastHoveredObject = this;
+			}
+			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>) {
+		if (!series || !param.point || !param.logical) return null;
+		const barPrice = series.coordinateToPrice(param.point.y);
+		if (barPrice == null) return null;
+		return {
+			time: param.time || null,
+			logical: param.logical,
+			price: barPrice.valueOf(),
+		}
+	}
+
+	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;
+		}
+		point.logical = point.logical + logicalDiff as Logical;
+		point.price = point.price+priceDiff;
+	}
+
+	protected _handleMouseDownInteraction = () => {
+		if (Drawing._mouseIsDown) return;
+		Drawing._mouseIsDown = true;
+		this._onMouseDown();
+	}
+
+	protected _handleMouseUpInteraction = () => {
+		if (!Drawing._mouseIsDown) return;
+		Drawing._mouseIsDown = false;
+		this._moveToState(InteractionState.HOVERING);
+	}
+
+	private _handleDragInteraction(param: MouseEventParams): void {
+		if (this._state != InteractionState.DRAGGING &&
+			this._state != InteractionState.DRAGGINGP1 &&
+			this._state != InteractionState.DRAGGINGP2 &&
+			this._state != InteractionState.DRAGGINGP3 &&
+			this._state != InteractionState.DRAGGINGP4) {
+			return;
+		}
+		const mousePoint = Drawing._eventToPoint(param, this.series);
+		if (!mousePoint) return;
+		this._startDragPoint = this._startDragPoint || mousePoint;
+
+		const diff = Drawing._getDiff(mousePoint, this._startDragPoint);
+		this._onDrag(diff);
+		this.requestUpdate();
+
+		this._startDragPoint = mousePoint;
+	}
+
+	protected abstract _onMouseDown(): void;
+ 	protected abstract _onDrag(diff: any): void; // TODO any?
+	protected abstract _moveToState(state: InteractionState): void;
+	protected abstract _mouseIsOverDrawing(param: MouseEventParams): boolean;
+
+	// toJSON() {
+	// 	const {series, chart, ...serialized} = this;
+	// 	return serialized;
+	// }
+}

src/drawing/options.ts

@@ -0,0 +1,18 @@
+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)',
+	lineStyle: LineStyle.Solid,
+	width: 4,
+	showLabels: true,
+	showCircles: false,
+};

src/drawing/pane-renderer.ts

@@ -0,0 +1,67 @@
+import { ISeriesPrimitivePaneRenderer } from "lightweight-charts";
+import { ViewPoint } from "./pane-view";
+import { DrawingOptions } from "./options";
+import { BitmapCoordinatesRenderingScope, CanvasRenderingTarget2D } from "fancy-canvas";
+
+export abstract class DrawingPaneRenderer implements ISeriesPrimitivePaneRenderer {
+	_options: DrawingOptions;
+
+	constructor(options: DrawingOptions) {
+		this._options = options;
+	}
+
+	abstract draw(target: CanvasRenderingTarget2D): void;
+
+}
+
+export abstract class TwoPointDrawingPaneRenderer extends DrawingPaneRenderer {
+	_p1: ViewPoint;
+	_p2: ViewPoint;
+	_text1: string;
+	_text2: string;
+
+	constructor(p1: ViewPoint, p2: ViewPoint, text1: string, text2: string, options: DrawingOptions) {
+		super(options);
+		this._p1 = p1;
+		this._p2 = p2;
+		this._text1 = text1;
+		this._text2 = text2;
+	}
+
+	abstract draw(target: CanvasRenderingTarget2D): void;
+
+	_getScaledCoordinates(scope: BitmapCoordinatesRenderingScope) {
+		if (this._p1.x === null || this._p1.y === null ||
+			this._p2.x === null || this._p2.y === null) return null;
+		return {
+			x1: Math.round(this._p1.x * scope.horizontalPixelRatio),
+			y1: Math.round(this._p1.y * scope.verticalPixelRatio),
+			x2: Math.round(this._p2.x * scope.horizontalPixelRatio),
+			y2: Math.round(this._p2.y * scope.verticalPixelRatio),
+		}
+	}
+
+	// _drawTextLabel(scope: BitmapCoordinatesRenderingScope, text: string, x: number, y: number, left: boolean) {
+	// 	scope.context.font = '24px Arial';
+	// 	scope.context.beginPath();
+	// 	const offset = 5 * scope.horizontalPixelRatio;
+	// 	const textWidth = scope.context.measureText(text);
+	// 	const leftAdjustment = left ? textWidth.width + offset * 4 : 0;
+	// 	scope.context.fillStyle = this._options.labelBackgroundColor;
+	// 	scope.context.roundRect(x + offset - leftAdjustment, y - 24, textWidth.width + offset * 2,  24 + offset, 5);
+	// 	scope.context.fill();
+	// 	scope.context.beginPath();
+	// 	scope.context.fillStyle = this._options.labelTextColor;
+	// 	scope.context.fillText(text, x + offset * 2 - leftAdjustment, y);
+	// }
+
+	_drawEndCircle(scope: BitmapCoordinatesRenderingScope, x: number, y: number) {
+		const radius = 9
+		scope.context.fillStyle = '#000';
+    	scope.context.beginPath();
+	 	scope.context.arc(x, y, radius, 0, 2 * Math.PI);
+	 	scope.context.stroke();
+	 	scope.context.fill();
+	    // scope.context.strokeStyle = this._options.lineColor;
+	}
+}

src/drawing/pane-view.ts

@@ -0,0 +1,55 @@
+import { Coordinate, ISeriesPrimitivePaneView } from 'lightweight-charts';
+import { Drawing } from './drawing';
+import { Point } from './data-source';
+import { DrawingPaneRenderer } from './pane-renderer';
+import { TwoPointDrawing } from './two-point-drawing';
+
+
+export abstract class DrawingPaneView implements ISeriesPrimitivePaneView {
+    _source: Drawing;
+
+    constructor(source: Drawing) {
+        this._source = source;
+    }
+
+    abstract update(): void;
+    abstract renderer(): DrawingPaneRenderer;
+}
+
+export interface ViewPoint {
+	x: Coordinate | null;
+	y: Coordinate | null;
+}
+
+export abstract class TwoPointDrawingPaneView extends DrawingPaneView {
+	_p1: ViewPoint = { x: null, y: null };
+	_p2: ViewPoint = { x: null, y: null };
+
+	_source: TwoPointDrawing;
+
+	constructor(source: TwoPointDrawing) {
+		super(source);
+		this._source = source;
+	}
+
+	update() {
+		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);
+		this._p1 = { x: x1, y: y1 };
+		this._p2 = { x: x2, y: y2 };
+		if (!x1 || !x2 || !y1 || !y2) return;
+	}
+
+	abstract renderer(): DrawingPaneRenderer;
+
+	_getX(p: Point) {
+		const timeScale = this._source.chart.timeScale();
+		if (!p.time) {
+			return timeScale.logicalToCoordinate(p.logical);
+		}
+		return timeScale.timeToCoordinate(p.time);
+	}
+}

src/drawing/two-point-drawing.ts

@@ -0,0 +1,39 @@
+import { Point } from './data-source';
+import { DrawingOptions, defaultOptions } from './options';
+import { Drawing } from './drawing';
+import { TwoPointDrawingPaneView } from './pane-view';
+
+
+export abstract class TwoPointDrawing extends Drawing {
+	_p1: Point;
+	_p2: Point;
+	_paneViews: TwoPointDrawingPaneView[] = [];
+
+	constructor(
+		p1: Point,
+		p2: Point,
+		options?: Partial<DrawingOptions>
+	) {
+		super()
+		this._p1 = p1;
+		this._p2 = p2;
+		this._options = {
+			...defaultOptions,
+			...options,
+		};
+	}
+
+	setFirstPoint(point: Point) {
+		this.updatePoints(point);
+	}
+
+	setSecondPoint(point: Point) {
+		this.updatePoints(null, point);
+	}
+
+	public updatePoints(...points: (Point|null)[]) {
+		this._p1 = points[0] || this._p1;
+		this._p2 = points[1] || this._p2;
+		this.requestUpdate();
+	}
+}