dwker/lightweight-charts-python
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove horizontal line array methods on SeriesCommon, fix horizontal lines callbacks

Browse Source
This commit is contained in:
louisnw
2024-03-30 17:42:06 +00:00
parent e9f21b3b0e
commit 3ead45f858
20 changed files with 689 additions and 644 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
lightweight_charts/abstract.py
View File

@ -82,15 +82,22 @@ class Window:
background_color, border_color, border_width, heading_text_colors, background_color, border_color, border_width, heading_text_colors,
heading_background_colors, return_clicked_cells, func) heading_background_colors, return_clicked_cells, func)
def create_subchart(self, position: FLOAT = 'left', width: float = 0.5, height: float = 0.5, def create_subchart(
sync_id: Optional[str] = None, scale_candles_only: bool = False, self,
sync_crosshairs_only: bool = False, toolbox: bool = False position: FLOAT = 'left',
) -> 'AbstractChart': width: float = 0.5,
height: float = 0.5,
sync_id: Optional[str] = None,
scale_candles_only: bool = False,
sync_crosshairs_only: bool = False,
toolbox: bool = False
) -> 'AbstractChart':
subchart = AbstractChart(self, width, height, scale_candles_only, toolbox, position=position) subchart = AbstractChart(self, width, height, scale_candles_only, toolbox, position=position)
if not sync_id: if not sync_id:
return subchart return subchart
self.run_script(f''' self.run_script(f'''
Handler.syncCharts({subchart.id}, {sync_id}, {jbool(sync_crosshairs_only)}) Handler.syncCharts({subchart.id}, {sync_id}, {jbool(sync_crosshairs_only)})
// TODO this should be in syncCharts
{subchart.id}.chart.timeScale().setVisibleLogicalRange( {subchart.id}.chart.timeScale().setVisibleLogicalRange(
{sync_id}.chart.timeScale().getVisibleLogicalRange() {sync_id}.chart.timeScale().getVisibleLogicalRange()
) )
@ -296,15 +303,15 @@ class SeriesCommon(Pane):
Creates a horizontal line at the given price. Creates a horizontal line at the given price.
""" """
return HorizontalLine(self, price, color, width, style, text, axis_label_visible, func) return HorizontalLine(self, price, color, width, style, text, axis_label_visible, func)
# TODO should these methods be removed
def remove_horizontal_line(self, price: NUM): # def remove_horizontal_line(self, price: NUM):
""" # """
Removes a horizontal line at the given price. # Removes a horizontal line at the given price.
""" # """
self.run_script(f''' # self.run_script(f'''
{self.id}.horizontal_lines.forEach(function (line) {{ # {self.id}.horizontal_lines.forEach(function (line) {{
if ({price} === line.price) line.deleteLine() # if ({price} === line._point.price) line.detach()
}})''') # }})''')
def clear_markers(self): def clear_markers(self):
""" """
@ -312,14 +319,14 @@ class SeriesCommon(Pane):
""" """
self.run_script(f'''{self.id}.markers = []; {self.id}.series.setMarkers([])''') self.run_script(f'''{self.id}.markers = []; {self.id}.series.setMarkers([])''')
def clear_horizontal_lines(self): # def clear_horizontal_lines(self):
""" # """
Clears the horizontal lines displayed on the data.\n # Clears the horizontal lines displayed on the data.\n
""" # """
self.run_script(f''' # self.run_script(f'''
{self.id}.horizontal_lines.forEach(function (line) {{{self.id}.series.removePriceLine(line.line);}}); # {self.id}.horizontal_lines.forEach(function (line) {{{self.id}.series.removePriceLine(line.line);}});
{self.id}.horizontal_lines = []; # {self.id}.horizontal_lines = [];
''') # ''')
def price_line(self, label_visible: bool = True, line_visible: bool = True, title: str = ''): def price_line(self, label_visible: bool = True, line_visible: bool = True, title: str = ''):
self.run_script(f''' self.run_script(f'''
@ -370,16 +377,27 @@ class SeriesCommon(Pane):
end_time = self._single_datetime_format(end_time) if end_time else None end_time = self._single_datetime_format(end_time) if end_time else None
return VerticalSpan(self, start_time, end_time, color) return VerticalSpan(self, start_time, end_time, color)
# TODO drawings should be in a seperate folder, and inherbit a abstract Drawing class
class HorizontalLine(Pane): class HorizontalLine(Pane):
def __init__(self, chart, price, color, width, style, text, axis_label_visible, func): def __init__(self, chart, price, color, width, style, text, axis_label_visible, func):
super().__init__(chart.win) super().__init__(chart.win)
self.price = price self.price = price
self.run_script(f''' self.run_script(f'''
{self.id} = new HorizontalLine( {self.id} = new HorizontalLine(
{chart.id}, '{self.id}', {price}, '{color}', {width}, {{price: {price}}},
{as_enum(style, LINE_STYLE)}, {jbool(axis_label_visible)}, '{text}' {{
)''') lineColor: '{color}',
lineStyle: {as_enum(style, LINE_STYLE)},
}},
callbackName={f"'{self.id}'" if func else 'null'}
)
{chart.id}.series.attachPrimitive({self.id})
''')
# {self.id} = new HorizontalLine(
# {chart.id}, '{self.id}', {price}, '{color}', {width},
# {as_enum(style, LINE_STYLE)}, {jbool(axis_label_visible)}, '{text}'
# )''')
if not func: if not func:
return return
@ -392,24 +410,24 @@ class HorizontalLine(Pane):
await func(chart, self) await func(chart, self)
self.win.handlers[self.id] = wrapper_async if asyncio.iscoroutinefunction(func) else wrapper self.win.handlers[self.id] = wrapper_async if asyncio.iscoroutinefunction(func) else wrapper
self.run_script(f'if ("toolBox" in {chart.id}) {chart.id}.toolBox.drawings.push({self.id})') self.run_script(f'{chart.id}.toolBox?.addNewDrawing({self.id})')
def update(self, price): def update(self, price: float):
""" """
Moves the horizontal line to the given price. Moves the horizontal line to the given price.
""" """
self.run_script(f'{self.id}.updatePrice({price})') self.run_script(f'{self.id}.updatePoints({{price: {price}}})')
# self.run_script(f'{self.id}.updatePrice({price})')
self.price = price self.price = price
def label(self, text: str): def label(self, text: str): # TODO
self.run_script(f'{self.id}.updateLabel("{text}")') self.run_script(f'{self.id}.updateLabel("{text}")')
def delete(self): def delete(self): # TODO test all methods
""" """
Irreversibly deletes the horizontal line. Irreversibly deletes the horizontal line.
""" """
self.run_script(f'{self.id}.deleteLine()') self.run_script(f'{self.id}.detach()')
del self
class VerticalSpan(Pane): class VerticalSpan(Pane):

4
lightweight_charts/chart.py
View File

@ -59,9 +59,11 @@ class PyWV:
background_color='#000000') background_color='#000000')
) )
self.windows[-1].events.loaded += lambda: self.loaded_event.set()
def loop(self): def loop(self):
self.loaded_event.set() # self.loaded_event.set()
while self.is_alive: while self.is_alive:
i, arg = self.queue.get() i, arg = self.queue.get()

2
lightweight_charts/js/bundle.js
View File

File diff suppressed because one or more lines are too long

200
src/box/box.ts
View File

@ -22,132 +22,132 @@ const defaultBoxOptions = {
export class Box extends TwoPointDrawing { export class Box extends TwoPointDrawing {
_type = "Box"; _type = "Box";
constructor( constructor(
p1: Point, p1: Point,
p2: Point, p2: Point,
options?: Partial<BoxOptions> options?: Partial<BoxOptions>
) { ) {
super(p1, p2, options); super(p1, p2, options);
this._options = { this._options = {
...this._options, ...this._options,
...defaultBoxOptions, ...defaultBoxOptions,
} }
this._paneViews = [new BoxPaneView(this)]; this._paneViews = [new BoxPaneView(this)];
} }
// autoscaleInfo(startTimePoint: Logical, endTimePoint: Logical): AutoscaleInfo | null { // autoscaleInfo(startTimePoint: Logical, endTimePoint: Logical): AutoscaleInfo | null {
// const p1Index = this._pointIndex(this._p1); // const p1Index = this._pointIndex(this._p1);
// const p2Index = this._pointIndex(this._p2); // const p2Index = this._pointIndex(this._p2);
// if (p1Index === null || p2Index === null) return null; // if (p1Index === null || p2Index === null) return null;
// if (endTimePoint < p1Index || startTimePoint > p2Index) return null; // if (endTimePoint < p1Index || startTimePoint > p2Index) return null;
// return { // return {
// priceRange: { // priceRange: {
// minValue: this._minPrice, // minValue: this._minPrice,
// maxValue: this._maxPrice, // maxValue: this._maxPrice,
// }, // },
// }; // };
// } // }
_moveToState(state: InteractionState) { _moveToState(state: InteractionState) {
switch(state) { switch(state) {
case InteractionState.NONE: case InteractionState.NONE:
document.body.style.cursor = "default"; document.body.style.cursor = "default";
this.applyOptions({showCircles: false}); this.applyOptions({showCircles: false});
this._unsubscribe("mousedown", this._handleMouseDownInteraction); this._unsubscribe("mousedown", this._handleMouseDownInteraction);
break; break;
case InteractionState.HOVERING: case InteractionState.HOVERING:
document.body.style.cursor = "pointer"; document.body.style.cursor = "pointer";
this.applyOptions({showCircles: true}); this.applyOptions({showCircles: true});
this._unsubscribe("mouseup", this._handleMouseUpInteraction); this._unsubscribe("mouseup", this._handleMouseUpInteraction);
this._subscribe("mousedown", this._handleMouseDownInteraction) this._subscribe("mousedown", this._handleMouseDownInteraction)
this.chart.applyOptions({handleScroll: true}); this.chart.applyOptions({handleScroll: true});
break; break;
case InteractionState.DRAGGINGP1: case InteractionState.DRAGGINGP1:
case InteractionState.DRAGGINGP2: case InteractionState.DRAGGINGP2:
case InteractionState.DRAGGINGP3: case InteractionState.DRAGGINGP3:
case InteractionState.DRAGGINGP4: case InteractionState.DRAGGINGP4:
case InteractionState.DRAGGING: case InteractionState.DRAGGING:
document.body.style.cursor = "grabbing"; document.body.style.cursor = "grabbing";
document.body.addEventListener("mouseup", this._handleMouseUpInteraction); document.body.addEventListener("mouseup", this._handleMouseUpInteraction);
this._subscribe("mouseup", this._handleMouseUpInteraction); this._subscribe("mouseup", this._handleMouseUpInteraction);
this.chart.applyOptions({handleScroll: false}); this.chart.applyOptions({handleScroll: false});
break; break;
} }
this._state = state; this._state = state;
} }
_onDrag(diff: any) { _onDrag(diff: any) {
if (this._state == InteractionState.DRAGGING || this._state == InteractionState.DRAGGINGP1) { if (this._state == InteractionState.DRAGGING || this._state == InteractionState.DRAGGINGP1) {
Drawing._addDiffToPoint(this._p1, diff.time, diff.logical, diff.price); Drawing._addDiffToPoint(this._p1, diff.time, diff.logical, diff.price);
} }
if (this._state == InteractionState.DRAGGING || this._state == InteractionState.DRAGGINGP2) { if (this._state == InteractionState.DRAGGING || this._state == InteractionState.DRAGGINGP2) {
Drawing._addDiffToPoint(this._p2, diff.time, diff.logical, diff.price); Drawing._addDiffToPoint(this._p2, diff.time, diff.logical, diff.price);
} }
if (this._state != InteractionState.DRAGGING) { if (this._state != InteractionState.DRAGGING) {
if (this._state == InteractionState.DRAGGINGP3) { if (this._state == InteractionState.DRAGGINGP3) {
Drawing._addDiffToPoint(this._p1, diff.time, diff.logical, 0); Drawing._addDiffToPoint(this._p1, diff.time, diff.logical, 0);
Drawing._addDiffToPoint(this._p2, 0, 0, diff.price); Drawing._addDiffToPoint(this._p2, 0, 0, diff.price);
} }
if (this._state == InteractionState.DRAGGINGP4) { if (this._state == InteractionState.DRAGGINGP4) {
Drawing._addDiffToPoint(this._p1, 0, 0, diff.price); Drawing._addDiffToPoint(this._p1, 0, 0, diff.price);
Drawing._addDiffToPoint(this._p2, diff.time, diff.logical, 0); Drawing._addDiffToPoint(this._p2, diff.time, diff.logical, 0);
} }
} }
} }
protected _onMouseDown() { protected _onMouseDown() {
this._startDragPoint = null; this._startDragPoint = null;
const hoverPoint = this._latestHoverPoint; const hoverPoint = this._latestHoverPoint;
const p1 = this._paneViews[0]._p1; const p1 = this._paneViews[0]._p1;
const p2 = this._paneViews[0]._p2; const p2 = this._paneViews[0]._p2;
if (!p1.x || !p2.x || !p1.y || !p2.y) return this._moveToState(InteractionState.DRAGGING); if (!p1.x || !p2.x || !p1.y || !p2.y) return this._moveToState(InteractionState.DRAGGING);
const tolerance = 10; const tolerance = 10;
if (Math.abs(hoverPoint.x-p1.x) < tolerance && Math.abs(hoverPoint.y-p1.y) < tolerance) { if (Math.abs(hoverPoint.x-p1.x) < tolerance && Math.abs(hoverPoint.y-p1.y) < tolerance) {
this._moveToState(InteractionState.DRAGGINGP1) this._moveToState(InteractionState.DRAGGINGP1)
} }
else if (Math.abs(hoverPoint.x-p2.x) < tolerance && Math.abs(hoverPoint.y-p2.y) < tolerance) { else if (Math.abs(hoverPoint.x-p2.x) < tolerance && Math.abs(hoverPoint.y-p2.y) < tolerance) {
this._moveToState(InteractionState.DRAGGINGP2) this._moveToState(InteractionState.DRAGGINGP2)
} }
else if (Math.abs(hoverPoint.x-p1.x) < tolerance && Math.abs(hoverPoint.y-p2.y) < tolerance) { else if (Math.abs(hoverPoint.x-p1.x) < tolerance && Math.abs(hoverPoint.y-p2.y) < tolerance) {
this._moveToState(InteractionState.DRAGGINGP3) this._moveToState(InteractionState.DRAGGINGP3)
} }
else if (Math.abs(hoverPoint.x-p2.x) < tolerance && Math.abs(hoverPoint.y-p1.y) < tolerance) { else if (Math.abs(hoverPoint.x-p2.x) < tolerance && Math.abs(hoverPoint.y-p1.y) < tolerance) {
this._moveToState(InteractionState.DRAGGINGP4) this._moveToState(InteractionState.DRAGGINGP4)
} }
else { else {
this._moveToState(InteractionState.DRAGGING); this._moveToState(InteractionState.DRAGGING);
} }
} }
protected _mouseIsOverDrawing(param: MouseEventParams, tolerance = 4) { protected _mouseIsOverDrawing(param: MouseEventParams, tolerance = 4) {
if (!param.point) return false; if (!param.point) return false;
const x1 = this._paneViews[0]._p1.x; const x1 = this._paneViews[0]._p1.x;
const y1 = this._paneViews[0]._p1.y; const y1 = this._paneViews[0]._p1.y;
const x2 = this._paneViews[0]._p2.x; const x2 = this._paneViews[0]._p2.x;
const y2 = this._paneViews[0]._p2.y; const y2 = this._paneViews[0]._p2.y;
if (!x1 || !x2 || !y1 || !y2 ) return false; if (!x1 || !x2 || !y1 || !y2 ) return false;
const mouseX = param.point.x; const mouseX = param.point.x;
const mouseY = param.point.y; const mouseY = param.point.y;
const mainX = Math.min(x1, x2); const mainX = Math.min(x1, x2);
const mainY = Math.min(y1, y2); const mainY = Math.min(y1, y2);
const width = Math.abs(x1-x2); const width = Math.abs(x1-x2);
const height = Math.abs(y1-y2); const height = Math.abs(y1-y2);
const halfTolerance = tolerance/2; const halfTolerance = tolerance/2;
return mouseX > mainX-halfTolerance && mouseX < mainX+width+halfTolerance && return mouseX > mainX-halfTolerance && mouseX < mainX+width+halfTolerance &&
mouseY > mainY-halfTolerance && mouseY < mainY+height+halfTolerance; mouseY > mainY-halfTolerance && mouseY < mainY+height+halfTolerance;
} }
} }

54
src/box/pane-renderer.ts
View File

@ -6,37 +6,37 @@ import { BoxOptions } from "./box";
export class BoxPaneRenderer extends TwoPointDrawingPaneRenderer { export class BoxPaneRenderer extends TwoPointDrawingPaneRenderer {
declare _options: BoxOptions; declare _options: BoxOptions;
constructor(p1: ViewPoint, p2: ViewPoint, text1: string, text2: string, options: BoxOptions) { constructor(p1: ViewPoint, p2: ViewPoint, text1: string, text2: string, options: BoxOptions) {
super(p1, p2, text1, text2, options) super(p1, p2, text1, text2, options)
} }
draw(target: CanvasRenderingTarget2D) { draw(target: CanvasRenderingTarget2D) {
target.useBitmapCoordinateSpace(scope => { target.useBitmapCoordinateSpace(scope => {
const ctx = scope.context;
const scaled = this._getScaledCoordinates(scope); const ctx = scope.context;
if (!scaled) return; const scaled = this._getScaledCoordinates(scope);
ctx.lineWidth = this._options.width; if (!scaled) return;
ctx.strokeStyle = this._options.lineColor;
ctx.lineWidth = this._options.width;
ctx.strokeStyle = this._options.lineColor;
ctx.fillStyle = this._options.fillColor; ctx.fillStyle = this._options.fillColor;
const mainX = Math.min(scaled.x1, scaled.x2); const mainX = Math.min(scaled.x1, scaled.x2);
const mainY = Math.min(scaled.y1, scaled.y2); const mainY = Math.min(scaled.y1, scaled.y2);
const width = Math.abs(scaled.x1-scaled.x2); const width = Math.abs(scaled.x1-scaled.x2);
const height = Math.abs(scaled.y1-scaled.y2); const height = Math.abs(scaled.y1-scaled.y2);
ctx.strokeRect(mainX, mainY, width, height);
ctx.fillRect(mainX, mainY, width, height);
if (!this._options.showCircles) return;
this._drawEndCircle(scope, mainX, mainY);
this._drawEndCircle(scope, mainX+width, mainY);
this._drawEndCircle(scope, mainX+width, mainY+height);
this._drawEndCircle(scope, mainX, mainY+height);
}); ctx.strokeRect(mainX, mainY, width, height);
} ctx.fillRect(mainX, mainY, width, height);
if (!this._options.showCircles) return;
this._drawEndCircle(scope, mainX, mainY);
this._drawEndCircle(scope, mainX+width, mainY);
this._drawEndCircle(scope, mainX+width, mainY+height);
this._drawEndCircle(scope, mainX, mainY+height);
});
}
} }

24
src/box/pane-view.ts
View File

@ -3,17 +3,17 @@ import { BoxPaneRenderer } from './pane-renderer';
import { TwoPointDrawingPaneView } from '../drawing/pane-view'; import { TwoPointDrawingPaneView } from '../drawing/pane-view';
export class BoxPaneView extends TwoPointDrawingPaneView { export class BoxPaneView extends TwoPointDrawingPaneView {
constructor(source: Box) { constructor(source: Box) {
super(source) super(source)
} }
renderer() { renderer() {
return new BoxPaneRenderer( return new BoxPaneRenderer(
this._p1, this._p1,
this._p2, this._p2,
'' + this._source._p1.price.toFixed(1), '' + this._source._p1.price.toFixed(1),
'' + this._source._p2.price.toFixed(1), '' + this._source._p2.price.toFixed(1),
this._source._options as BoxOptions, this._source._options as BoxOptions,
); );
} }
} }

26
src/drawing/data-source.ts
View File

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

142
src/drawing/drawing-tool.ts
View File

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

283
src/drawing/drawing.ts
View File

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

20
src/drawing/options.ts
View File

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

98
src/drawing/pane-renderer.ts
View File

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

54
src/drawing/pane-view.ts
View File

@ -17,39 +17,39 @@ export abstract class DrawingPaneView implements ISeriesPrimitivePaneView {
} }
export interface ViewPoint { export interface ViewPoint {
x: Coordinate | null; x: Coordinate | null;
y: Coordinate | null; y: Coordinate | null;
} }
export abstract class TwoPointDrawingPaneView extends DrawingPaneView { export abstract class TwoPointDrawingPaneView extends DrawingPaneView {
_p1: ViewPoint = { x: null, y: null }; _p1: ViewPoint = { x: null, y: null };
_p2: ViewPoint = { x: null, y: null }; _p2: ViewPoint = { x: null, y: null };
_source: TwoPointDrawing; _source: TwoPointDrawing;
constructor(source: TwoPointDrawing) { constructor(source: TwoPointDrawing) {
super(source); super(source);
this._source = source; this._source = source;
} }
update() { update() {
const series = this._source.series; const series = this._source.series;
const y1 = series.priceToCoordinate(this._source._p1.price); const y1 = series.priceToCoordinate(this._source._p1.price);
const y2 = series.priceToCoordinate(this._source._p2.price); const y2 = series.priceToCoordinate(this._source._p2.price);
const x1 = this._getX(this._source._p1); const x1 = this._getX(this._source._p1);
const x2 = this._getX(this._source._p2); const x2 = this._getX(this._source._p2);
this._p1 = { x: x1, y: y1 }; this._p1 = { x: x1, y: y1 };
this._p2 = { x: x2, y: y2 }; this._p2 = { x: x2, y: y2 };
if (!x1 || !x2 || !y1 || !y2) return; if (!x1 || !x2 || !y1 || !y2) return;
} }
abstract renderer(): DrawingPaneRenderer; abstract renderer(): DrawingPaneRenderer;
_getX(p: Point) { _getX(p: Point) {
const timeScale = this._source.chart.timeScale(); const timeScale = this._source.chart.timeScale();
if (!p.time) { if (!p.time) {
return timeScale.logicalToCoordinate(p.logical); return timeScale.logicalToCoordinate(p.logical);
} }
return timeScale.timeToCoordinate(p.time); return timeScale.timeToCoordinate(p.time);
} }
} }

54
src/drawing/two-point-drawing.ts
View File

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

3
src/general/global-params.ts
View File

@ -1,3 +1,4 @@
import { HorizontalLine } from "../horizontal-line/horizontal-line";
import { Table } from "./table"; import { Table } from "./table";
export interface GlobalParams extends Window { export interface GlobalParams extends Window {
@ -9,6 +10,7 @@ export interface GlobalParams extends Window {
cursor: string; cursor: string;
Handler: any; Handler: any;
Table: typeof Table; Table: typeof Table;
HorizontalLine: typeof HorizontalLine;
} }
interface paneStyle { interface paneStyle {
@ -46,6 +48,7 @@ export function globalParamInit() {
} }
window.cursor = 'default'; window.cursor = 'default';
window.Table = Table; window.Table = Table;
window.HorizontalLine = HorizontalLine;
} }

21
src/general/handler.ts
View File

@ -2,6 +2,7 @@ import {
ColorType, ColorType,
CrosshairMode, CrosshairMode,
DeepPartial, DeepPartial,
HistogramStyleOptions,
IChartApi, IChartApi,
ISeriesApi, ISeriesApi,
LineStyleOptions, LineStyleOptions,
@ -9,14 +10,12 @@ import {
LogicalRangeChangeEventHandler, LogicalRangeChangeEventHandler,
MouseEventHandler, MouseEventHandler,
MouseEventParams, MouseEventParams,
SeriesMarker,
SeriesOptionsCommon, SeriesOptionsCommon,
SeriesType, SeriesType,
Time, Time,
createChart createChart
} from "lightweight-charts"; } from "lightweight-charts";
import { HorizontalLine } from "../horizontal-line/horizontal-line";
import { GlobalParams, globalParamInit } from "./global-params"; import { GlobalParams, globalParamInit } from "./global-params";
import { Legend } from "./legend"; import { Legend } from "./legend";
import { ToolBox } from "./toolbox"; import { ToolBox } from "./toolbox";
@ -41,8 +40,6 @@ export class Handler {
public chart: IChartApi; public chart: IChartApi;
public scale: Scale; public scale: Scale;
public horizontal_lines: HorizontalLine[] = [];
public markers: SeriesMarker<"">[] = [];
public precision: number = 2; public precision: number = 2;
public series: ISeriesApi<SeriesType>; public series: ISeriesApi<SeriesType>;
@ -181,8 +178,16 @@ export class Handler {
return { return {
name: name, name: name,
series: line, series: line,
horizontal_lines: [], }
markers: [], }
createHistogramSeries(name: string, options: DeepPartial<HistogramStyleOptions & SeriesOptionsCommon>) {
const line = this.chart.addHistogramSeries({...options});
this._seriesList.push(line);
this.legend.makeSeriesRow(name, line)
return {
name: name,
series: line,
} }
} }
@ -215,8 +220,8 @@ export class Handler {
} }
function getPoint(series: ISeriesApi<SeriesType>, param: MouseEventParams) { function getPoint(series: ISeriesApi<SeriesType>, param: MouseEventParams) {
if (!param.time) return null; if (!param.time) return null;
return param.seriesData.get(series) || null; return param.seriesData.get(series) || null;
} }
const setChildRange = (timeRange: LogicalRange | null) => { if(timeRange) childChart.chart.timeScale().setVisibleLogicalRange(timeRange); } const setChildRange = (timeRange: LogicalRange | null) => { if(timeRange) childChart.chart.timeScale().setVisibleLogicalRange(timeRange); }

4
src/general/toolbox.ts
View File

@ -160,6 +160,10 @@ export class ToolBox {
// }) // })
// } // }
addNewDrawing(d: Drawing) {
this._drawingTool.addNewDrawing(d);
}
clearDrawings() { clearDrawings() {
this._drawingTool.clearDrawings(); this._drawingTool.clearDrawings();
} }

22
src/horizontal-line/horizontal-line.ts
View File

@ -6,22 +6,26 @@ import { Point } from "../drawing/data-source";
import { Drawing, InteractionState } from "../drawing/drawing"; import { Drawing, InteractionState } from "../drawing/drawing";
import { DrawingOptions } from "../drawing/options"; import { DrawingOptions } from "../drawing/options";
import { HorizontalLinePaneView } from "./pane-view"; import { HorizontalLinePaneView } from "./pane-view";
import { GlobalParams } from "../general/global-params";
declare const window: GlobalParams;
export class HorizontalLine extends Drawing { export class HorizontalLine extends Drawing {
_type = 'HorizontalLine'; _type = 'HorizontalLine';
_paneViews: HorizontalLinePaneView[]; _paneViews: HorizontalLinePaneView[];
_point: Point; _point: Point;
private _callbackName: string | null;
protected _startDragPoint: Point | null = null; protected _startDragPoint: Point | null = null;
constructor(point: Point, options: DeepPartial<DrawingOptions>) { constructor(point: Point, options: DeepPartial<DrawingOptions>, callbackName=null) {
super(options) super(options)
this._point = point; this._point = point;
this._point.time = null; // time is null for horizontal lines this._point.time = null; // time is null for horizontal lines
this._paneViews = [new HorizontalLinePaneView(this)]; this._paneViews = [new HorizontalLinePaneView(this)];
// TODO ids should be stored in an object dictionary so u can access the lines this._callbackName = callbackName;
// this.handler.horizontal_lines.push(this) TODO fix this in handler ?
} }
public updatePoints(...points: (Point | null)[]) { public updatePoints(...points: (Point | null)[]) {
@ -38,15 +42,14 @@ export class HorizontalLine extends Drawing {
case InteractionState.HOVERING: case InteractionState.HOVERING:
document.body.style.cursor = "pointer"; document.body.style.cursor = "pointer";
this._unsubscribe("mouseup", this._handleMouseUpInteraction); this._unsubscribe("mouseup", this._childHandleMouseUpInteraction);
this._subscribe("mousedown", this._handleMouseDownInteraction) this._subscribe("mousedown", this._handleMouseDownInteraction)
this.chart.applyOptions({handleScroll: true}); this.chart.applyOptions({handleScroll: true});
break; break;
case InteractionState.DRAGGING: case InteractionState.DRAGGING:
document.body.style.cursor = "grabbing"; document.body.style.cursor = "grabbing";
document.body.addEventListener("mouseup", this._handleMouseUpInteraction); this._subscribe("mouseup", this._childHandleMouseUpInteraction);
this._subscribe("mouseup", this._handleMouseUpInteraction);
this.chart.applyOptions({handleScroll: false}); this.chart.applyOptions({handleScroll: false});
break; break;
} }
@ -71,4 +74,11 @@ export class HorizontalLine extends Drawing {
if (!hoverPoint) return; if (!hoverPoint) return;
return this._moveToState(InteractionState.DRAGGING); 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)}`);
}
} }

56
src/trend-line/pane-renderer.ts
View File

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

28
src/trend-line/pane-view.ts
View File

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

156
src/trend-line/trend-line.ts
View File

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