@react-financial-charts/coordinates/lib/CrossHairCursor.js

Coordinates for react-financial-charts

import * as React from "react";
import { getStrokeDasharrayCanvas, GenericComponent, getMouseCanvas, ChartCanvasContext, } from "@react-financial-charts/core";
const defaultCustomX = (props, moreProps) => {
    const { xScale, xAccessor, currentItem, mouseXY } = moreProps;
    const { snapX } = props;
    const x = snapX ? Math.round(xScale(xAccessor(currentItem))) : mouseXY[0] + 0.5;
    return x;
};
export class CrossHairCursor extends React.Component {
    constructor() {
        super(...arguments);
        this.drawOnCanvas = (ctx, moreProps) => {
            const lines = this.getLines(this.props, moreProps);
            if (lines === undefined) {
                return;
            }
            const { margin, ratio } = this.context;
            const originX = 0.5 * ratio + margin.left;
            const originY = 0.5 * ratio + margin.top;
            ctx.save();
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.scale(ratio, ratio);
            ctx.translate(originX, originY);
            lines.forEach((line) => {
                const dashArray = getStrokeDasharrayCanvas(line.strokeDasharray);
                ctx.strokeStyle = line.strokeStyle;
                ctx.lineWidth = line.strokeWidth;
                ctx.setLineDash(dashArray);
                ctx.beginPath();
                ctx.moveTo(line.x1, line.y1);
                ctx.lineTo(line.x2, line.y2);
                ctx.stroke();
            });
            ctx.restore();
        };
        this.getLines = (props, moreProps) => {
            const { mouseXY, currentItem, show, height, width } = moreProps;
            const { customX = CrossHairCursor.defaultProps.customX, strokeStyle = CrossHairCursor.defaultProps.strokeStyle, strokeDasharray, strokeWidth = CrossHairCursor.defaultProps.strokeWidth, } = props;
            if (!show || currentItem === undefined) {
                return undefined;
            }
            const line1 = {
                x1: 0,
                x2: width,
                y1: mouseXY[1] + 0.5,
                y2: mouseXY[1] + 0.5,
                strokeStyle,
                strokeDasharray,
                strokeWidth,
            };
            const x = customX(props, moreProps);
            const line2 = {
                x1: x,
                x2: x,
                y1: 0,
                y2: height,
                strokeStyle,
                strokeDasharray,
                strokeWidth,
            };
            return [line1, line2];
        };
    }
    render() {
        return (React.createElement(GenericComponent, { clip: false, canvasDraw: this.drawOnCanvas, canvasToDraw: getMouseCanvas, drawOn: ["mousemove", "pan", "drag"] }));
    }
}
CrossHairCursor.defaultProps = {
    customX: defaultCustomX,
    snapX: true,
    strokeStyle: "rgba(55, 71, 79, 0.8)",
    strokeDasharray: "Dash",
    strokeWidth: 1,
};
CrossHairCursor.contextType = ChartCanvasContext;
//# sourceMappingURL=CrossHairCursor.js.map