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,7 +3,7 @@ import {
} from 'lightweight-charts';
import { Point } from '../drawing/data-source';
import { Drawing, InteractionState } from '../drawing/drawing';
import { InteractionState } from '../drawing/drawing';
import { DrawingOptions, defaultOptions } from '../drawing/options';
import { BoxPaneView } from './pane-view';
import { TwoPointDrawing } from '../drawing/two-point-drawing';
@ -54,13 +54,13 @@ export class Box extends TwoPointDrawing {
switch(state) {
case InteractionState.NONE:
document.body.style.cursor = "default";
this.applyOptions({showCircles: false});
this._hovered = false;
this._unsubscribe("mousedown", this._handleMouseDownInteraction);
break;
case InteractionState.HOVERING:
document.body.style.cursor = "pointer";
this.applyOptions({showCircles: true});
this._hovered = true;
this._unsubscribe("mouseup", this._handleMouseUpInteraction);
this._subscribe("mousedown", this._handleMouseDownInteraction)
this.chart.applyOptions({handleScroll: true});
@ -82,19 +82,19 @@ export class Box 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);
}
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);
this._addDiffToPoint(this.p1, diff.logical, 0);
this._addDiffToPoint(this.p2, 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);
this._addDiffToPoint(this.p1, 0, diff.price);
this._addDiffToPoint(this.p2, diff.logical, 0);
}
}
}

View File

@ -2,12 +2,13 @@ import { ViewPoint } from "../drawing/pane-view";
import { CanvasRenderingTarget2D } from "fancy-canvas";
import { TwoPointDrawingPaneRenderer } from "../drawing/pane-renderer";
import { BoxOptions } from "./box";
import { setLineStyle } from "../helpers/canvas-rendering";
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, options: BoxOptions, showCircles: boolean) {
super(p1, p2, options, showCircles)
}
draw(target: CanvasRenderingTarget2D) {
@ -21,6 +22,7 @@ export class BoxPaneRenderer extends TwoPointDrawingPaneRenderer {
ctx.lineWidth = this._options.width;
ctx.strokeStyle = this._options.lineColor;
setLineStyle(ctx, this._options.lineStyle)
ctx.fillStyle = this._options.fillColor;
const mainX = Math.min(scaled.x1, scaled.x2);
@ -31,7 +33,7 @@ export class BoxPaneRenderer extends TwoPointDrawingPaneRenderer {
ctx.strokeRect(mainX, mainY, width, height);
ctx.fillRect(mainX, mainY, width, height);
if (!this._options.showCircles) return;
if (!this._hovered) return;
this._drawEndCircle(scope, mainX, mainY);
this._drawEndCircle(scope, mainX+width, mainY);
this._drawEndCircle(scope, mainX+width, mainY+height);

View File

@ -11,9 +11,8 @@ export class BoxPaneView extends TwoPointDrawingPaneView {
return new BoxPaneRenderer(
this._p1,
this._p2,
'' + this._source._p1.price.toFixed(1),
'' + this._source._p2.price.toFixed(1),
this._source._options as BoxOptions,
this._source.hovered,
);
}
}