@tradingaction/interactive 2.0.13 → 2.0.16

package/src/components/InteractiveRectangle.tsx

@@ -0,0 +1,401 @@
+import {
+    getStrokeDasharrayCanvas,
+    getMouseCanvas,
+    GenericChartComponent,
+    noop,
+    strokeDashTypes,
+} from "@tradingaction/core";
+import * as React from "react";
+
+export interface RectangleProps {
+    readonly topLeftX: any;
+    readonly topRightX: any;
+    readonly topLeftY: any;
+    readonly topRightY: any;
+
+    readonly bottomLeftX: any;
+    readonly bottomLeftY: any;
+    readonly bottomRightX: any;
+    readonly bottomRightY: any;
+
+    readonly interactiveCursorClass?: string;
+    readonly strokeStyle: string;
+    readonly strokeWidth?: number;
+    readonly strokeDasharray?: strokeDashTypes;
+    readonly type:
+    | "XLINE" // extends from -Infinity to +Infinity
+    | "RAY" // extends to +/-Infinity in one direction
+    | "LINE"; // extends between the set bounds
+    readonly onEdge1Drag?: any; // func
+    readonly onEdge2Drag?: any; // func
+    readonly onDragStart?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onDrag?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onDragComplete?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onHover?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onUnHover?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onDoubleClickWhenHover?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onClickWhenHover?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onClickOutside?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onContextMenuWhenHover?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly defaultClassName?: string;
+    readonly r?: number;
+    readonly edgeFill?: string;
+    readonly edgeStroke?: string;
+    readonly edgeStrokeWidth?: number;
+    readonly rectangleFill?: string;
+    readonly withEdge?: boolean;
+    readonly tolerance?: number;
+    readonly selected?: boolean;
+}
+
+export class InteractiveRectangle extends React.Component<RectangleProps> {
+    public static defaultProps = {
+        onEdge1Drag: noop,
+        onEdge2Drag: noop,
+        edgeStrokeWidth: 3,
+        edgeStroke: "#000000",
+        edgeFill: "#FFFFFF",
+        rectangleFill: 'transparent',
+        r: 10,
+        withEdge: false,
+        strokeWidth: 1,
+        strokeDasharray: "Solid",
+        children: noop,
+        tolerance: 7,
+        selected: false,
+    };
+
+    public render() {
+        const { selected, interactiveCursorClass } = this.props;
+        const {
+            onDragStart,
+            onDrag,
+            onDragComplete,
+            onHover,
+            onUnHover,
+            onDoubleClickWhenHover,
+            onClickWhenHover,
+            onClickOutside,
+            onContextMenuWhenHover,
+        } = this.props;
+
+        return (
+            <GenericChartComponent
+                isHover={this.isHover}
+                canvasToDraw={getMouseCanvas}
+                canvasDraw={this.drawOnCanvas}
+                interactiveCursorClass={interactiveCursorClass}
+                selected={selected}
+                onDragStart={onDragStart}
+                onDrag={onDrag}
+                onDragComplete={onDragComplete}
+                onHover={onHover}
+                onUnHover={onUnHover}
+                drawOn={["mousemove", "pan", "drag"]}
+                onDoubleClickWhenHover={onDoubleClickWhenHover}
+                onClickWhenHover={onClickWhenHover}
+                onClickOutside={onClickOutside}
+                onContextMenuWhenHover={onContextMenuWhenHover}
+            />
+        );
+    }
+
+    private readonly isHover = (moreProps: any) => {
+        const { tolerance, onHover } = this.props;
+
+        if (onHover !== undefined) {
+            const { topLeftX, topRightX, topLeftY, topRightY,
+                bottomLeftX, bottomLeftY, bottomRightX, bottomRightY,
+                type } = this.props;
+            const { mouseXY, xScale } = moreProps;
+            const {
+                chartConfig: { yScale },
+            } = moreProps;
+
+            const hovering = isHovering({
+                topLeftX,
+                topLeftY,
+                topRightX,
+                topRightY,
+                bottomLeftX, bottomLeftY, bottomRightX, bottomRightY,
+                mouseXY,
+                type,
+                tolerance,
+                xScale,
+                yScale,
+            });
+
+            return hovering;
+        }
+        return false;
+    };
+
+    private readonly drawOnCanvas = (ctx: CanvasRenderingContext2D, moreProps: any) => {
+        const {
+            strokeWidth = InteractiveRectangle.defaultProps.strokeWidth,
+            strokeDasharray,
+            strokeStyle,
+            rectangleFill
+        } = this.props;
+        const {
+            x1, y1,         // top-left
+            x2, y2,         // top-right
+            x1Bottom, y1Bottom, // bottom-left
+            x2Bottom, y2Bottom, // bottom-right
+        } = helper(this.props, moreProps);
+
+        // Set canvas styles
+        ctx.lineWidth = strokeWidth;
+        ctx.strokeStyle = strokeStyle || "transparent"; // Default to no border
+        ctx.fillStyle = rectangleFill || "rgba(0, 255, 0, 0.2)"; // Default fill color
+        ctx.setLineDash(getStrokeDasharrayCanvas(strokeDasharray));
+
+        // Begin rectangle path
+        ctx.beginPath();
+
+        // Start at top-left
+        ctx.moveTo(x1, y1);
+
+        // Draw to top-right
+        ctx.lineTo(x2, y2);
+
+        // Draw to bottom-right
+        ctx.lineTo(x2Bottom, y2Bottom);
+
+        // Draw to bottom-left
+        ctx.lineTo(x1Bottom, y1Bottom);
+
+        // Close the path back to top-left
+        ctx.closePath();
+
+        // ✅ Fill the rectangle
+        ctx.fill();
+
+        // ✅ Stroke the outline (optional)
+        if (strokeStyle !== "transparent" && strokeWidth > 0) {
+            ctx.stroke();
+        }
+
+    };
+}
+
+function isHovering({ topLeftX, topLeftY, topRightX, topRightY, bottomLeftX, bottomLeftY, bottomRightX, bottomRightY, mouseXY, type, tolerance, xScale, yScale }: any) {
+    const line = generateRectangle({
+        type,
+        start: [topLeftX, topLeftY],
+        end: [topRightX, topRightY],
+        startBottom: [bottomLeftX, bottomLeftY],
+        endBottom: [bottomRightX, bottomRightY],
+        xScale,
+        yScale,
+    });
+
+    const start = [xScale(line.x1), yScale(line.y1)];
+    const end = [xScale(line.x2), yScale(line.y2)];
+
+    const m = getSlope(start, end);
+    const [mouseX, mouseY] = mouseXY;
+
+    if (m !== undefined) {
+        const b = getYIntercept(m, end);
+        const y = m * mouseX + b;
+
+        return (
+            mouseY < y + tolerance &&
+            mouseY > y - tolerance &&
+            mouseX > Math.min(start[0], end[0]) - tolerance &&
+            mouseX < Math.max(start[0], end[0]) + tolerance
+        );
+    } else {
+        return (
+            mouseY >= Math.min(start[1], end[1]) &&
+            mouseY <= Math.max(start[1], end[1]) &&
+            mouseX < start[0] + tolerance &&
+            mouseX > start[0] - tolerance
+        );
+    }
+}
+
+function helper(props: any, moreProps: any) {
+    const { topLeftX, topRightX, topLeftY, topRightY, bottomLeftX, bottomLeftY, bottomRightX, bottomRightY, type } = props;
+
+    const {
+        xScale,
+        chartConfig: { yScale },
+    } = moreProps;
+
+    const modLine = generateRectangle({
+        type,
+        start: [topLeftX, topLeftY],
+        end: [topRightX, topRightY],
+        startBottom: [bottomLeftX, bottomLeftY],
+        endBottom: [bottomRightX, bottomRightY],
+        xScale,
+        yScale,
+    });
+
+    const x1 = xScale(modLine.x1);
+    const y1 = yScale(modLine.y1);
+    const x2 = xScale(modLine.x2);
+    const y2 = yScale(modLine.y2);
+
+    const x1Bottom = xScale(modLine.x1Bottom);
+    const y1Bottom = yScale(modLine.y1Bottom);
+    const x2Bottom = xScale(modLine.x2Bottom);
+    const y2Bottom = yScale(modLine.y2Bottom);
+
+    return {
+        x1,//Top (from Trendline cloning process)
+        y1,//Top (from Trendline cloning process)
+        x2,//Top (from Trendline cloning process)
+        y2,//Top (from Trendline cloning process)
+
+        x1Bottom,
+        y1Bottom,
+        x2Bottom,
+        y2Bottom,
+    };
+}
+
+function getSlope(start: any, end: any) {
+    const m /* slope */ = end[0] === start[0] ? undefined : (end[1] - start[1]) / (end[0] - start[0]);
+    return m;
+}
+function getYIntercept(m: any, end: any) {
+    const b /* y intercept */ = -1 * m * end[0] + end[1];
+    return b;
+}
+
+export function generateRectangle({ type, start, end, startBottom, endBottom, xScale, yScale }: any) {
+    const m /* slope */ = getSlope(start, end);
+    const b /* y intercept */ = getYIntercept(m, start);
+
+    switch (type) {
+        case "XLINE":
+            return getXLineCoordinates({
+                start,
+                end,
+                startBottom, endBottom,
+                xScale,
+                yScale,
+                m,
+                b,
+            });
+        case "RAY":
+            return getRayCoordinates({
+                start,
+                end,
+                startBottom, endBottom,
+                xScale,
+                yScale,
+                m,
+                b,
+            });
+        default:
+        case "LINE":
+            return getLineCoordinates({
+                start,
+                end,
+                startBottom, endBottom,
+            });
+    }
+}
+
+function getXLineCoordinates({ start, end, startBottom, endBottom, xScale, yScale, m, b }: any) {
+    const [xBegin, xFinish] = xScale.domain();
+    const [yBegin, yFinish] = yScale.domain();
+
+    if (end[0] === start[0]) {
+        return {
+            x1: end[0],
+            y1: yBegin,
+            x2: end[0],
+            y2: yFinish,
+
+            x1Bottom: 0,//Todo next
+            y1Bottom: 0,
+            x2Bottom: 0,
+            y2Bottom: 0,
+
+        };
+    }
+    const [x1, x2] = end[0] > start[0] ? [xBegin, xFinish] : [xFinish, xBegin];
+
+    return {
+        x1,
+        y1: m * x1 + b,
+        x2,
+        y2: m * x2 + b,
+
+        x1Bottom: 0,//Todo next
+        y1Bottom: 0,
+        x2Bottom: 0,
+        y2Bottom: 0,
+    };
+}
+
+function getRayCoordinates({ start, end, startBottom, endBottom, xScale, yScale, m, b }: any) {
+    const [xBegin, xFinish] = xScale.domain();
+    const [yBegin, yFinish] = yScale.domain();
+
+    const x1 = start[0];
+    if (end[0] === start[0]) {
+        return {
+            x1,
+            y1: start[1],
+            x2: x1,
+            y2: end[1] > start[1] ? yFinish : yBegin,
+
+            x1Bottom: 0,//Todo next
+            y1Bottom: 0,
+            x2Bottom: 0,
+            y2Bottom: 0,
+        };
+    }
+
+    const x2 = end[0] > start[0] ? xFinish : xBegin;
+
+    return {
+        x1,
+        y1: m * x1 + b,
+        x2,
+        y2: m * x2 + b,
+
+        x1Bottom: 0,//Todo next
+        y1Bottom: 0,
+        x2Bottom: 0,
+        y2Bottom: 0,
+    };
+}
+
+function getLineCoordinates({ start, end, startBottom, endBottom, }: any) {
+    const [x1, y1] = start;
+    const [x2, y2] = end;
+    const [x1Bottom, y1Bottom] = startBottom;
+    const [x2Bottom, y2Bottom] = endBottom;
+    if (end[0] === start[0] || endBottom[0] === startBottom[0]) {
+        return {
+            x1,
+            y1: start[1],
+            x2: x1,
+            y2: end[1],
+
+            x1Bottom,
+            y1Bottom: startBottom[1],
+            x2Bottom,
+            y2Bottom: endBottom[1],
+        };
+    }
+
+    return {
+        x1,
+        y1,
+        x2,
+        y2,
+
+        x1Bottom,
+        y1Bottom,
+        x2Bottom,
+        y2Bottom,
+    };
+}

package/src/components/index.ts

@@ -4,6 +4,7 @@ export * from "./ClickableShape";
 export * from "./GannFan";
 export * from "./HoverTextNearMouse";
 export * from "./InteractiveStraightLine";
+export * from "./InteractiveRectangle";
 export * from "./InteractiveText";
 export * from "./InteractiveYCoordinate";
 export * from "./LinearRegressionChannelWithArea";

package/src/index.ts

@@ -10,3 +10,4 @@ export { InteractiveYCoordinate } from "./InteractiveYCoordinate";
 export { DrawingObjectSelector } from "./DrawingObjectSelector";
 export { ZoomButtons } from "./ZoomButtons";
 export * from "./utils";
+export { Rectangle } from "./Rectangle";