implement drawing methods, fix horizontal line bug, continue refactor

This commit is contained in:
louisnw
2024-04-14 16:29:15 +01:00
parent 3ead45f858
commit 3fdd19e3ce
33 changed files with 732 additions and 365 deletions

View File

@ -3,10 +3,11 @@ import { ViewPoint } from "./pane-view";
import { CanvasRenderingTarget2D } from "fancy-canvas";
import { TwoPointDrawingPaneRenderer } from "../drawing/pane-renderer";
import { DrawingOptions } from "../drawing/options";
import { setLineStyle } from "../helpers/canvas-rendering";
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, options: DrawingOptions, hovered: boolean) {
super(p1, p2, options, hovered);
}
draw(target: CanvasRenderingTarget2D) {
@ -25,6 +26,7 @@ export class TrendLinePaneRenderer extends TwoPointDrawingPaneRenderer {
ctx.lineWidth = this._options.width;
ctx.strokeStyle = this._options.lineColor;
setLineStyle(ctx, this._options.lineStyle);
ctx.beginPath();
ctx.moveTo(scaled.x1, scaled.y1);
ctx.lineTo(scaled.x2, scaled.y2);
@ -32,7 +34,7 @@ export class TrendLinePaneRenderer extends TwoPointDrawingPaneRenderer {
// this._drawTextLabel(scope, this._text1, x1Scaled, y1Scaled, true);
// this._drawTextLabel(scope, this._text2, x2Scaled, y2Scaled, false);
if (!this._options.showCircles) return;
if (!this._hovered) return;
this._drawEndCircle(scope, scaled.x1, scaled.y1);
this._drawEndCircle(scope, scaled.x2, scaled.y2);
});

View File

@ -17,9 +17,8 @@ export class TrendLinePaneView extends TwoPointDrawingPaneView {
return new TrendLinePaneRenderer(
this._p1,
this._p2,
'' + this._source._p1.price.toFixed(1),
'' + this._source._p2.price.toFixed(1),
this._source._options
this._source._options,
this._source.hovered,
);
}
}

View File

@ -5,7 +5,7 @@ import {
import { TrendLinePaneView } from './pane-view';
import { Point } from '../drawing/data-source';
import { Drawing, InteractionState } from '../drawing/drawing';
import { InteractionState } from '../drawing/drawing';
import { DrawingOptions } from '../drawing/options';
import { TwoPointDrawing } from '../drawing/two-point-drawing';
@ -27,14 +27,14 @@ export class TrendLine extends TwoPointDrawing {
case InteractionState.NONE:
document.body.style.cursor = "default";
this._options.showCircles = false;
this._hovered = false;
this.requestUpdate();
this._unsubscribe("mousedown", this._handleMouseDownInteraction);
break;
case InteractionState.HOVERING:
document.body.style.cursor = "pointer";
this._options.showCircles = true;
this._hovered = true;
this.requestUpdate();
this._subscribe("mousedown", this._handleMouseDownInteraction);
this._unsubscribe("mouseup", this._handleMouseDownInteraction);
@ -55,10 +55,10 @@ export class TrendLine extends TwoPointDrawing {
_onDrag(diff: any) {
if (this._state == InteractionState.DRAGGING || this._state == InteractionState.DRAGGINGP1) {
Drawing._addDiffToPoint(this._p1, diff.time, diff.logical, diff.price);
this._addDiffToPoint(this.p1, diff.logical, diff.price);
}
if (this._state == InteractionState.DRAGGING || this._state == InteractionState.DRAGGINGP2) {
Drawing._addDiffToPoint(this._p2, diff.time, diff.logical, diff.price);
this._addDiffToPoint(this.p2, diff.logical, diff.price);
}
}