remove horizontal line array methods on SeriesCommon, fix horizontal lines callbacks
This commit is contained in:
louisnw
@ -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);
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user