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,
heading_background_colors, return_clicked_cells, func)
def create_subchart(self, position: FLOAT = 'left', 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':
def create_subchart(
self,
position: FLOAT = 'left',
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)
if not sync_id:
return subchart
self.run_script(f'''
Handler.syncCharts({subchart.id}, {sync_id}, {jbool(sync_crosshairs_only)})
// TODO this should be in syncCharts
{subchart.id}.chart.timeScale().setVisibleLogicalRange(
{sync_id}.chart.timeScale().getVisibleLogicalRange()
)
@ -296,15 +303,15 @@ class SeriesCommon(Pane):
Creates a horizontal line at the given price.
"""
return HorizontalLine(self, price, color, width, style, text, axis_label_visible, func)
def remove_horizontal_line(self, price: NUM):
"""
Removes a horizontal line at the given price.
"""
self.run_script(f'''
{self.id}.horizontal_lines.forEach(function (line) {{
if ({price} === line.price) line.deleteLine()
}})''')
# TODO should these methods be removed
# def remove_horizontal_line(self, price: NUM):
# """
# Removes a horizontal line at the given price.
# """
# self.run_script(f'''
# {self.id}.horizontal_lines.forEach(function (line) {{
# if ({price} === line._point.price) line.detach()
# }})''')
def clear_markers(self):
"""
@ -312,14 +319,14 @@ class SeriesCommon(Pane):
"""
self.run_script(f'''{self.id}.markers = []; {self.id}.series.setMarkers([])''')
def clear_horizontal_lines(self):
"""
Clears the horizontal lines displayed on the data.\n
"""
self.run_script(f'''
{self.id}.horizontal_lines.forEach(function (line) {{{self.id}.series.removePriceLine(line.line);}});
{self.id}.horizontal_lines = [];
''')
# def clear_horizontal_lines(self):
# """
# Clears the horizontal lines displayed on the data.\n
# """
# self.run_script(f'''
# {self.id}.horizontal_lines.forEach(function (line) {{{self.id}.series.removePriceLine(line.line);}});
# {self.id}.horizontal_lines = [];
# ''')
def price_line(self, label_visible: bool = True, line_visible: bool = True, title: str = ''):
self.run_script(f'''
@ -370,16 +377,27 @@ class SeriesCommon(Pane):
end_time = self._single_datetime_format(end_time) if end_time else None
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):
def __init__(self, chart, price, color, width, style, text, axis_label_visible, func):
super().__init__(chart.win)
self.price = price
self.run_script(f'''
{self.id} = new HorizontalLine(
{chart.id}, '{self.id}', {price}, '{color}', {width},
{as_enum(style, LINE_STYLE)}, {jbool(axis_label_visible)}, '{text}'
)''')
{{price: {price}}},
{{
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:
return
@ -392,24 +410,24 @@ class HorizontalLine(Pane):
await func(chart, self)
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.
"""
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
def label(self, text: str):
def label(self, text: str): # TODO
self.run_script(f'{self.id}.updateLabel("{text}")')
def delete(self):
def delete(self): # TODO test all methods
"""
Irreversibly deletes the horizontal line.
"""
self.run_script(f'{self.id}.deleteLine()')
del self
self.run_script(f'{self.id}.detach()')
class VerticalSpan(Pane):

4
lightweight_charts/chart.py
View File

@ -59,9 +59,11 @@ class PyWV:
background_color='#000000')
)
self.windows[-1].events.loaded += lambda: self.loaded_event.set()
def loop(self):
self.loaded_event.set()
# self.loaded_event.set()
while self.is_alive:
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 {
_type = "Box";
_type = "Box";
constructor(
p1: Point,
p2: Point,
options?: Partial<BoxOptions>
) {
super(p1, p2, options);
constructor(
p1: Point,
p2: Point,
options?: Partial<BoxOptions>
) {
super(p1, p2, options);
this._options = {
...this._options,
...defaultBoxOptions,
}
this._paneViews = [new BoxPaneView(this)];
}
this._paneViews = [new BoxPaneView(this)];
}
// autoscaleInfo(startTimePoint: Logical, endTimePoint: Logical): AutoscaleInfo | null {
// const p1Index = this._pointIndex(this._p1);
// const p2Index = this._pointIndex(this._p2);
// if (p1Index === null || p2Index === null) return null;
// if (endTimePoint < p1Index || startTimePoint > p2Index) return null;
// return {
// priceRange: {
// minValue: this._minPrice,
// maxValue: this._maxPrice,
// },
// };
// }
// autoscaleInfo(startTimePoint: Logical, endTimePoint: Logical): AutoscaleInfo | null {
// const p1Index = this._pointIndex(this._p1);
// const p2Index = this._pointIndex(this._p2);
// if (p1Index === null || p2Index === null) return null;
// if (endTimePoint < p1Index || startTimePoint > p2Index) return null;
// return {
// priceRange: {
// minValue: this._minPrice,
// maxValue: this._maxPrice,
// },
// };
// }
_moveToState(state: InteractionState) {
switch(state) {
case InteractionState.NONE:
document.body.style.cursor = "default";
_moveToState(state: InteractionState) {
switch(state) {
case InteractionState.NONE:
document.body.style.cursor = "default";
this.applyOptions({showCircles: false});
this._unsubscribe("mousedown", this._handleMouseDownInteraction);
break;
break;
case InteractionState.HOVERING:
document.body.style.cursor = "pointer";
this.applyOptions({showCircles: true});
case InteractionState.HOVERING:
document.body.style.cursor = "pointer";
this.applyOptions({showCircles: true});
this._unsubscribe("mouseup", this._handleMouseUpInteraction);
this._subscribe("mousedown", this._handleMouseDownInteraction)
this.chart.applyOptions({handleScroll: true});
break;
this.chart.applyOptions({handleScroll: true});
break;
case InteractionState.DRAGGINGP1:
case InteractionState.DRAGGINGP2:
case InteractionState.DRAGGINGP3:
case InteractionState.DRAGGINGP4:
case InteractionState.DRAGGING:
document.body.style.cursor = "grabbing";
document.body.addEventListener("mouseup", this._handleMouseUpInteraction);
case InteractionState.DRAGGINGP1:
case InteractionState.DRAGGINGP2:
case InteractionState.DRAGGINGP3:
case InteractionState.DRAGGINGP4:
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;
}
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);
}
if (this._state != InteractionState.DRAGGING) {
if (this._state == InteractionState.DRAGGINGP3) {
Drawing._addDiffToPoint(this._p1, diff.time, diff.logical, 0);
Drawing._addDiffToPoint(this._p2, 0, 0, diff.price);
}
if (this._state == InteractionState.DRAGGINGP4) {
Drawing._addDiffToPoint(this._p1, 0, 0, diff.price);
Drawing._addDiffToPoint(this._p2, diff.time, diff.logical, 0);
}
}
}
_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);
}
if (this._state != InteractionState.DRAGGING) {
if (this._state == InteractionState.DRAGGINGP3) {
Drawing._addDiffToPoint(this._p1, diff.time, diff.logical, 0);
Drawing._addDiffToPoint(this._p2, 0, 0, diff.price);
}
if (this._state == InteractionState.DRAGGINGP4) {
Drawing._addDiffToPoint(this._p1, 0, 0, diff.price);
Drawing._addDiffToPoint(this._p2, diff.time, diff.logical, 0);
}
}
}
protected _onMouseDown() {
protected _onMouseDown() {
this._startDragPoint = null;
const hoverPoint = this._latestHoverPoint;
const p1 = this._paneViews[0]._p1;
const p2 = this._paneViews[0]._p2;
const hoverPoint = this._latestHoverPoint;
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);
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 if (Math.abs(hoverPoint.x-p1.x) < tolerance && Math.abs(hoverPoint.y-p2.y) < tolerance) {
this._moveToState(InteractionState.DRAGGINGP3)
}
else if (Math.abs(hoverPoint.x-p2.x) < tolerance && Math.abs(hoverPoint.y-p1.y) < tolerance) {
this._moveToState(InteractionState.DRAGGINGP4)
}
else {
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 if (Math.abs(hoverPoint.x-p1.x) < tolerance && Math.abs(hoverPoint.y-p2.y) < tolerance) {
this._moveToState(InteractionState.DRAGGINGP3)
}
else if (Math.abs(hoverPoint.x-p2.x) < tolerance && Math.abs(hoverPoint.y-p1.y) < tolerance) {
this._moveToState(InteractionState.DRAGGINGP4)
}
else {
this._moveToState(InteractionState.DRAGGING);
}
}
protected _mouseIsOverDrawing(param: MouseEventParams, tolerance = 4) {
if (!param.point) return false;
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 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;
const mouseX = param.point.x;
const mouseY = param.point.y;
const mainX = Math.min(x1, x2);
const mainY = Math.min(y1, y2);
const mainX = Math.min(x1, x2);
const mainY = Math.min(y1, y2);
const width = Math.abs(x1-x2);
const height = Math.abs(y1-y2);
const width = Math.abs(x1-x2);
const height = Math.abs(y1-y2);
const halfTolerance = tolerance/2;
const halfTolerance = tolerance/2;
return mouseX > mainX-halfTolerance && mouseX < mainX+width+halfTolerance &&
mouseY > mainY-halfTolerance && mouseY < mainY+height+halfTolerance;
}
return mouseX > mainX-halfTolerance && mouseX < mainX+width+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 {
declare _options: BoxOptions;
constructor(p1: ViewPoint, p2: ViewPoint, text1: string, text2: string, options: BoxOptions) {
super(p1, p2, text1, text2, options)
}
constructor(p1: ViewPoint, p2: ViewPoint, text1: string, text2: string, options: BoxOptions) {
super(p1, p2, text1, text2, options)
}
draw(target: CanvasRenderingTarget2D) {
target.useBitmapCoordinateSpace(scope => {
const ctx = scope.context;
draw(target: CanvasRenderingTarget2D) {
target.useBitmapCoordinateSpace(scope => {
const scaled = this._getScaledCoordinates(scope);
const ctx = scope.context;
if (!scaled) return;
ctx.lineWidth = this._options.width;
ctx.strokeStyle = this._options.lineColor;
const scaled = this._getScaledCoordinates(scope);
if (!scaled) return;
ctx.lineWidth = this._options.width;
ctx.strokeStyle = this._options.lineColor;
ctx.fillStyle = this._options.fillColor;
const mainX = Math.min(scaled.x1, scaled.x2);
const mainY = Math.min(scaled.y1, scaled.y2);
const width = Math.abs(scaled.x1-scaled.x2);
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);
const mainX = Math.min(scaled.x1, scaled.x2);
const mainY = Math.min(scaled.y1, scaled.y2);
const width = Math.abs(scaled.x1-scaled.x2);
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);
});
}
}

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

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

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

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

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

@ -1,97 +1,97 @@
import {
IChartApi,
ISeriesApi,
MouseEventParams,
SeriesType,
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 _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;
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;
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);
}
this._chart.subscribeClick(this._clickHandler);
this._chart.subscribeCrosshairMove(this._moveHandler);
}
private _clickHandler = (param: MouseEventParams) => this._onClick(param);
private _moveHandler = (param: MouseEventParams) => this._onMouseMove(param);
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;
}
beginDrawing(DrawingType: new (...args: any[]) => Drawing) {
this._drawingType = DrawingType;
this._isDrawing = true;
}
stopDrawing() {
this._isDrawing = false;
this._activeDrawing = null;
}
stopDrawing() {
this._isDrawing = false;
this._activeDrawing = null;
}
get drawings() {
return this._drawings;
}
get drawings() {
return this._drawings;
}
addNewDrawing(drawing: Drawing) {
this._series.attachPrimitive(drawing);
this._drawings.push(drawing);
}
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();
}
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 = [];
}
clearDrawings() {
for (const d of this._drawings) d.detach();
this._drawings = [];
}
private _onClick(param: MouseEventParams) {
if (!this._isDrawing) return;
private _onClick(param: MouseEventParams) {
if (!this._isDrawing) return;
const point = Drawing._eventToPoint(param, this._series);
if (!point) return;
const point = Drawing._eventToPoint(param, this._series);
if (!point) return;
if (this._activeDrawing == null) {
if (this._drawingType == null) 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();
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();
}
}
if (!this._finishDrawingCallback) return;
this._finishDrawingCallback();
}
}
private _onMouseMove(param: MouseEventParams) {
if (!param) return;
private _onMouseMove(param: MouseEventParams) {
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);
if (!point) return;
this._activeDrawing.updatePoints(null, point);
// this._activeDrawing.setSecondPoint(point);
}
const point = Drawing._eventToPoint(param, this._series);
if (!point) return;
this._activeDrawing.updatePoints(null, 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';
export enum InteractionState {
NONE,
HOVERING,
DRAGGING,
DRAGGINGP1,
DRAGGINGP2,
DRAGGINGP3,
DRAGGINGP4,
NONE,
HOVERING,
DRAGGING,
DRAGGINGP1,
DRAGGINGP2,
DRAGGINGP3,
DRAGGINGP4,
}
interface DiffPoint {
time: number | null;
logical: number;
price: number;
time: number | null;
logical: number;
price: number;
}
export abstract class Drawing extends PluginBase {
_paneViews: DrawingPaneView[] = [];
_options: DrawingOptions;
_paneViews: DrawingPaneView[] = [];
_options: DrawingOptions;
abstract _type: string;
abstract _type: string;
protected _state: InteractionState = InteractionState.NONE;
protected _state: InteractionState = InteractionState.NONE;
protected _startDragPoint: Point | null = null;
protected _latestHoverPoint: any | null = null;
protected _startDragPoint: Point | 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 lastHoveredObject: Drawing | null = null;
public static hoveredObject: Drawing | null = null;
public static lastHoveredObject: Drawing | null = null;
protected _listeners: any[] = [];
protected _listeners: any[] = [];
constructor(
options?: Partial<DrawingOptions>
) {
super()
this._options = {
...defaultOptions,
...options,
};
}
constructor(
options?: Partial<DrawingOptions>
) {
super()
this._options = {
...defaultOptions,
...options,
};
}
updateAllViews() {
this._paneViews.forEach(pw => pw.update());
}
updateAllViews() {
this._paneViews.forEach(pw => pw.update());
}
paneViews() {
return this._paneViews;
}
paneViews() {
return this._paneViews;
}
applyOptions(options: Partial<DrawingOptions>) {
this._options = {
...this._options,
...options,
}
this.requestUpdate();
}
applyOptions(options: Partial<DrawingOptions>) {
this._options = {
...this._options,
...options,
}
this.requestUpdate();
}
public abstract updatePoints(...points: (Point | null)[]): void;
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)
}
}
detach() {
this._options.lineColor = 'transparent';
this.requestUpdate();
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);
protected _subscribe(name: keyof DocumentEventMap, listener: any) {
document.body.addEventListener(name, listener);
this._listeners.push({name: name, listener: listener});
}
const toRemove = this._listeners.find((x) => x.name === name && x.listener === callback)
this._listeners.splice(this._listeners.indexOf(toRemove), 1);
}
protected _unsubscribe(name: keyof DocumentEventMap, callback: any) {
document.body.removeEventListener(name, callback);
_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);
}
const toRemove = this._listeners.find((x) => x.name === name && x.listener === callback)
this._listeners.splice(this._listeners.indexOf(toRemove), 1);
}
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(),
}
}
_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);
}
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;
}
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 _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 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 _handleMouseDownInteraction = () => {
if (Drawing._mouseIsDown) return;
Drawing._mouseIsDown = true;
this._onMouseDown();
}
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 _handleMouseUpInteraction = () => {
if (!Drawing._mouseIsDown) return;
Drawing._mouseIsDown = false;
this._moveToState(InteractionState.HOVERING);
}
protected _handleMouseDownInteraction = () => {
if (Drawing._mouseIsDown) return;
Drawing._mouseIsDown = true;
this._onMouseDown();
}
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;
protected _handleMouseUpInteraction = () => {
if (!Drawing._mouseIsDown) return;
Drawing._mouseIsDown = false;
this._moveToState(InteractionState.HOVERING);
}
const diff = Drawing._getDiff(mousePoint, this._startDragPoint);
this._onDrag(diff);
this.requestUpdate();
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;
this._startDragPoint = mousePoint;
}
const diff = Drawing._getDiff(mousePoint, this._startDragPoint);
this._onDrag(diff);
this.requestUpdate();
protected abstract _onMouseDown(): void;
protected abstract _onDrag(diff: any): void; // TODO any?
protected abstract _moveToState(state: InteractionState): void;
protected abstract _mouseIsOverDrawing(param: MouseEventParams): boolean;
this._startDragPoint = mousePoint;
}
// toJSON() {
// const {series, chart, ...serialized} = this;
// return serialized;
// }
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;
// }
}

20
src/drawing/options.ts
View File

@ -1,18 +1,18 @@
import { LineStyle } from "lightweight-charts";
export interface DrawingOptions {
lineColor: string;
lineStyle: LineStyle
width: number;
showLabels: boolean;
showCircles: boolean,
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,
lineColor: 'rgb(255, 255, 255)',
lineStyle: LineStyle.Solid,
width: 4,
showLabels: true,
showCircles: false,
};

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

@ -4,64 +4,64 @@ import { DrawingOptions } from "./options";
import { BitmapCoordinatesRenderingScope, CanvasRenderingTarget2D } from "fancy-canvas";
export abstract class DrawingPaneRenderer implements ISeriesPrimitivePaneRenderer {
_options: DrawingOptions;
_options: DrawingOptions;
constructor(options: DrawingOptions) {
this._options = options;
}
constructor(options: DrawingOptions) {
this._options = options;
}
abstract draw(target: CanvasRenderingTarget2D): void;
abstract draw(target: CanvasRenderingTarget2D): void;
}
export abstract class TwoPointDrawingPaneRenderer extends DrawingPaneRenderer {
_p1: ViewPoint;
_p2: ViewPoint;
_text1: string;
_text2: string;
_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;
}
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;
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),
}
}
_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);
// }
// _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;
}
_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;
}
}

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

@ -17,39 +17,39 @@ export abstract class DrawingPaneView implements ISeriesPrimitivePaneView {
}
export interface ViewPoint {
x: Coordinate | null;
y: Coordinate | null;
x: Coordinate | null;
y: Coordinate | null;
}
export abstract class TwoPointDrawingPaneView extends DrawingPaneView {
_p1: ViewPoint = { x: null, y: null };
_p2: ViewPoint = { x: null, y: null };
_p1: ViewPoint = { x: null, y: null };
_p2: ViewPoint = { x: null, y: null };
_source: TwoPointDrawing;
_source: TwoPointDrawing;
constructor(source: TwoPointDrawing) {
super(source);
this._source = source;
}
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;
}
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;
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);
}
_getX(p: Point) {
const timeScale = this._source.chart.timeScale();
if (!p.time) {
return timeScale.logicalToCoordinate(p.logical);
}
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 {
_p1: Point;
_p2: Point;
_paneViews: TwoPointDrawingPaneView[] = [];
_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,
};
}
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);
}
setFirstPoint(point: Point) {
this.updatePoints(point);
}
setSecondPoint(point: Point) {
this.updatePoints(null, 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();
}
public updatePoints(...points: (Point|null)[]) {
this._p1 = points[0] || this._p1;
this._p2 = points[1] || this._p2;
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";
export interface GlobalParams extends Window {
@ -9,6 +10,7 @@ export interface GlobalParams extends Window {
cursor: string;
Handler: any;
Table: typeof Table;
HorizontalLine: typeof HorizontalLine;
}
interface paneStyle {
@ -46,6 +48,7 @@ export function globalParamInit() {
}
window.cursor = 'default';
window.Table = Table;
window.HorizontalLine = HorizontalLine;
}

21
src/general/handler.ts
View File

@ -2,6 +2,7 @@ import {
ColorType,
CrosshairMode,
DeepPartial,
HistogramStyleOptions,
IChartApi,
ISeriesApi,
LineStyleOptions,
@ -9,14 +10,12 @@ import {
LogicalRangeChangeEventHandler,
MouseEventHandler,
MouseEventParams,
SeriesMarker,
SeriesOptionsCommon,
SeriesType,
Time,
createChart
} from "lightweight-charts";
import { HorizontalLine } from "../horizontal-line/horizontal-line";
import { GlobalParams, globalParamInit } from "./global-params";
import { Legend } from "./legend";
import { ToolBox } from "./toolbox";
@ -41,8 +40,6 @@ export class Handler {
public chart: IChartApi;
public scale: Scale;
public horizontal_lines: HorizontalLine[] = [];
public markers: SeriesMarker<"">[] = [];
public precision: number = 2;
public series: ISeriesApi<SeriesType>;
@ -181,8 +178,16 @@ export class Handler {
return {
name: name,
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) {
if (!param.time) return null;
return param.seriesData.get(series) || null;
if (!param.time) return null;
return param.seriesData.get(series) || null;
}
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() {
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 { DrawingOptions } from "../drawing/options";
import { HorizontalLinePaneView } from "./pane-view";
import { GlobalParams } from "../general/global-params";
declare const window: GlobalParams;
export class HorizontalLine extends Drawing {
_type = 'HorizontalLine';
_paneViews: HorizontalLinePaneView[];
_point: Point;
private _callbackName: string | null;
protected _startDragPoint: Point | null = null;
constructor(point: Point, options: DeepPartial<DrawingOptions>) {
constructor(point: Point, options: DeepPartial<DrawingOptions>, callbackName=null) {
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 ?
this._callbackName = callbackName;
}
public updatePoints(...points: (Point | null)[]) {
@ -38,15 +42,14 @@ export class HorizontalLine extends Drawing {
case InteractionState.HOVERING:
document.body.style.cursor = "pointer";
this._unsubscribe("mouseup", this._handleMouseUpInteraction);
this._unsubscribe("mouseup", this._childHandleMouseUpInteraction);
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._subscribe("mouseup", this._childHandleMouseUpInteraction);
this.chart.applyOptions({handleScroll: false});
break;
}
@ -71,4 +74,11 @@ export class HorizontalLine extends Drawing {
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)}`);
}
}

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

@ -5,36 +5,36 @@ 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);
}
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;
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;
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);
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);
});
}
if (!this._options.showCircles) return;
this._drawEndCircle(scope, scaled.x1, scaled.y1);
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';
export interface ViewPoint {
x: Coordinate | null;
y: Coordinate | null;
x: Coordinate | null;
y: Coordinate | null;
}
export class TrendLinePaneView extends TwoPointDrawingPaneView {
constructor(source: TrendLine) {
super(source)
}
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
);
}
renderer() {
return new TrendLinePaneRenderer(
this._p1,
this._p2,
'' + this._source._p1.price.toFixed(1),
'' + this._source._p2.price.toFixed(1),
this._source._options
);
}
}

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

@ -1,5 +1,5 @@
import {
MouseEventParams,
MouseEventParams,
} from 'lightweight-charts';
@ -11,99 +11,99 @@ import { TwoPointDrawing } from '../drawing/two-point-drawing';
export class TrendLine extends TwoPointDrawing {
_type = "TrendLine"
_type = "TrendLine"
constructor(
p1: Point,
p2: Point,
options?: Partial<DrawingOptions>
) {
super(p1, p2, options)
this._paneViews = [new TrendLinePaneView(this)];
}
constructor(
p1: Point,
p2: Point,
options?: Partial<DrawingOptions>
) {
super(p1, p2, options)
this._paneViews = [new TrendLinePaneView(this)];
}
_moveToState(state: InteractionState) {
switch(state) {
_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.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.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;
}
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);
}
}
_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() {
protected _onMouseDown() {
this._startDragPoint = null;
const hoverPoint = this._latestHoverPoint;
const hoverPoint = this._latestHoverPoint;
if (!hoverPoint) return;
const p1 = this._paneViews[0]._p1;
const p2 = this._paneViews[0]._p2;
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);
}
}
if (!p1.x || !p2.x || !p1.y || !p2.y) return 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;
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 (!param.point) return false;;
const mouseX = param.point.x;
const mouseY = param.point.y;
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;
if (mouseX <= Math.min(x1, x2) - tolerance ||
mouseX >= Math.max(x1, x2) + tolerance) {
return false;
}
const mouseX = param.point.x;
const mouseY = param.point.y;
const distance = Math.abs((y2 - y1) * mouseX - (x2 - x1) * mouseY + x2 * y1 - y2 * x1
) / Math.sqrt((y2 - y1) ** 2 + (x2 - x1) ** 2);
if (mouseX <= Math.min(x1, x2) - tolerance ||
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
}
}