@react-financial-charts/interactive/lib/components/ClickableShape.js

Interactive features for react-financial-charts

import * as React from "react";
import { getMouseCanvas, GenericChartComponent } from "@react-financial-charts/core";
import { isHovering2 } from "./InteractiveStraightLine";
export class ClickableShape extends React.Component {
    constructor() {
        super(...arguments);
        this.drawOnCanvas = (ctx, moreProps) => {
            const { strokeStyle, strokeWidth, hovering, textBox } = this.props;
            const [x, y] = this.helper(this.props, moreProps, ctx);
            this.closeIcon = { x, y };
            ctx.beginPath();
            ctx.lineWidth = hovering ? strokeWidth + 1 : strokeWidth;
            ctx.strokeStyle = strokeStyle;
            const halfWidth = textBox.closeIcon.width / 2;
            ctx.moveTo(x - halfWidth, y - halfWidth);
            ctx.lineTo(x + halfWidth, y + halfWidth);
            ctx.moveTo(x - halfWidth, y + halfWidth);
            ctx.lineTo(x + halfWidth, y - halfWidth);
            ctx.stroke();
        };
        this.isHover = (moreProps) => {
            const { mouseXY } = moreProps;
            if (this.closeIcon) {
                const { textBox } = this.props;
                const { x, y } = this.closeIcon;
                const halfWidth = textBox.closeIcon.width / 2;
                const start1 = [x - halfWidth, y - halfWidth];
                const end1 = [x + halfWidth, y + halfWidth];
                const start2 = [x - halfWidth, y + halfWidth];
                const end2 = [x + halfWidth, y - halfWidth];
                if (isHovering2(start1, end1, mouseXY, 3) || isHovering2(start2, end2, mouseXY, 3)) {
                    return true;
                }
            }
            return false;
        };
        this.helper = (props, moreProps, ctx) => {
            const { yValue, text, textBox } = props;
            const { fontFamily, fontStyle, fontWeight, fontSize } = props;
            ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
            const { chartConfig: { yScale }, } = moreProps;
            const x = textBox.left +
                textBox.padding.left +
                ctx.measureText(text).width +
                textBox.padding.right +
                textBox.closeIcon.padding.left +
                textBox.closeIcon.width / 2;
            const y = yScale(yValue);
            return [x, y];
        };
    }
    render() {
        const { interactiveCursorClass, onHover, onUnHover, onClick, show } = this.props;
        if (!show) {
            return null;
        }
        return (React.createElement(GenericChartComponent, { interactiveCursorClass: interactiveCursorClass, isHover: this.isHover, onClickWhenHover: onClick, canvasDraw: this.drawOnCanvas, canvasToDraw: getMouseCanvas, onHover: onHover, onUnHover: onUnHover, drawOn: ["pan", "mousemove", "drag"] }));
    }
}
ClickableShape.defaultProps = {
    show: false,
    strokeWidth: 1,
};
//# sourceMappingURL=ClickableShape.js.map