2.0 first commit
This commit is contained in:
louisnw
153
src/box/box.ts
Normal file
153
src/box/box.ts
Normal file
@ -0,0 +1,153 @@
|
||||
import {
|
||||
MouseEventParams,
|
||||
} from 'lightweight-charts';
|
||||
|
||||
import { Point } from '../drawing/data-source';
|
||||
import { Drawing, InteractionState } from '../drawing/drawing';
|
||||
import { DrawingOptions, defaultOptions } from '../drawing/options';
|
||||
import { BoxPaneView } from './pane-view';
|
||||
import { TwoPointDrawing } from '../drawing/two-point-drawing';
|
||||
|
||||
|
||||
export interface BoxOptions extends DrawingOptions {
|
||||
fillEnabled: boolean;
|
||||
fillColor: string;
|
||||
}
|
||||
|
||||
const defaultBoxOptions = {
|
||||
fillEnabled: true,
|
||||
fillColor: 'rgba(255, 255, 255, 0.2)',
|
||||
...defaultOptions
|
||||
}
|
||||
|
||||
|
||||
export class Box extends TwoPointDrawing {
|
||||
_type = "Box";
|
||||
|
||||
constructor(
|
||||
p1: Point,
|
||||
p2: Point,
|
||||
options?: Partial<BoxOptions>
|
||||
) {
|
||||
super(p1, p2, options);
|
||||
this._options = {
|
||||
...this._options,
|
||||
...defaultBoxOptions,
|
||||
}
|
||||
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,
|
||||
// },
|
||||
// };
|
||||
// }
|
||||
|
||||
_moveToState(state: InteractionState) {
|
||||
switch(state) {
|
||||
case InteractionState.NONE:
|
||||
document.body.style.cursor = "default";
|
||||
this.applyOptions({showCircles: false});
|
||||
this._unsubscribe("mousedown", this._handleMouseDownInteraction);
|
||||
break;
|
||||
|
||||
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;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
_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() {
|
||||
this._startDragPoint = null;
|
||||
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);
|
||||
|
||||
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;
|
||||
|
||||
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 mainX = Math.min(x1, x2);
|
||||
const mainY = Math.min(y1, y2);
|
||||
|
||||
const width = Math.abs(x1-x2);
|
||||
const height = Math.abs(y1-y2);
|
||||
|
||||
const halfTolerance = tolerance/2;
|
||||
|
||||
return mouseX > mainX-halfTolerance && mouseX < mainX+width+halfTolerance &&
|
||||
mouseY > mainY-halfTolerance && mouseY < mainY+height+halfTolerance;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
42
src/box/pane-renderer.ts
Normal file
42
src/box/pane-renderer.ts
Normal file
@ -0,0 +1,42 @@
|
||||
import { ViewPoint } from "../drawing/pane-view";
|
||||
import { CanvasRenderingTarget2D } from "fancy-canvas";
|
||||
import { TwoPointDrawingPaneRenderer } from "../drawing/pane-renderer";
|
||||
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)
|
||||
}
|
||||
|
||||
draw(target: CanvasRenderingTarget2D) {
|
||||
target.useBitmapCoordinateSpace(scope => {
|
||||
|
||||
const ctx = scope.context;
|
||||
|
||||
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);
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
19
src/box/pane-view.ts
Normal file
19
src/box/pane-view.ts
Normal file
@ -0,0 +1,19 @@
|
||||
import { Box, BoxOptions } from './box';
|
||||
import { BoxPaneRenderer } from './pane-renderer';
|
||||
import { TwoPointDrawingPaneView } from '../drawing/pane-view';
|
||||
|
||||
export class BoxPaneView extends TwoPointDrawingPaneView {
|
||||
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,
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user