@tradingaction/interactive 2.0.13 → 2.0.16

package/src/wrapper/EachRectangle.tsx

@@ -0,0 +1,352 @@
+import * as React from "react";
+import { ascending as d3Ascending } from "d3-array";
+import { noop, strokeDashTypes } from "@tradingaction/core";
+import { getXValue } from "@tradingaction/core/lib/utils/ChartDataUtil";
+import { isHover, saveNodeType } from "../utils";
+import { ClickableCircle, HoverTextNearMouse, InteractiveRectangle } from "../components";
+
+export interface EachRectangleProps {
+    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 index?: number;
+    readonly type:
+        | "XLINE" // extends from -Infinity to +Infinity
+        | "RAY" // extends to +/-Infinity in one direction
+        | "LINE"; // extends between the set bounds
+    readonly onDrag: (e: React.MouseEvent, index: number | undefined, moreProps: any) => void;
+    readonly onEdge1Drag: any; // func
+    readonly onEdge2Drag: any; // func
+    readonly onDragComplete?: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onSelect: (e: React.MouseEvent, interactives: any[], moreProps: any) => void;
+    readonly onDoubleClickWhenHover?: (e: React.MouseEvent, moreProps: any, index: any) => void;
+    readonly onClickWhenHover?: (e: React.MouseEvent, moreProps: any, index: any) => void;
+    readonly onClickOutside?: (e: React.MouseEvent, moreProps: any, index: any) => void;
+    readonly onContextMenuWhenHover?: (e: React.MouseEvent, moreProps: any, index: any) => void;
+    readonly?: (e: React.MouseEvent, moreProps: any, index: any) => void;
+    readonly r: number;
+    readonly strokeOpacity: number;
+    readonly defaultClassName?: string;
+    readonly selected?: boolean;
+    readonly strokeStyle: string;
+    readonly strokeWidth: number;
+    readonly strokeDasharray: strokeDashTypes;
+    readonly edgeStrokeWidth: number;
+    readonly rectangleFill: string;
+    readonly edgeStroke: string;
+    readonly edgeInteractiveCursor: string;
+    readonly lineInteractiveCursor: string;
+    readonly edgeFill: string;
+    readonly hoverText: {
+        readonly enable: boolean;
+        readonly fontFamily: string;
+        readonly fontSize: number;
+        readonly fill: string;
+        readonly text: string;
+        readonly selectedText: string;
+        readonly bgFill: string;
+        readonly bgOpacity: number;
+        readonly bgWidth: number | string;
+        readonly bgHeight: number | string;
+    };
+}
+
+interface EachRectangleState {
+    anchor?: string;
+    hover?: any;
+}
+
+export class EachRectangle extends React.Component<EachRectangleProps, EachRectangleState> {
+    public static defaultProps = {
+        onDrag: noop,
+        onEdge1Drag: noop,
+        onEdge2Drag: noop,
+        onSelect: noop,
+        selected: false,
+        edgeStroke: "#000000",
+        edgeFill: "#FFFFFF",
+        edgeStrokeWidth: 2,
+        rectangleFill: 'transparent',
+        r: 5,
+        strokeWidth: 1,
+        strokeDasharray: "Solid",
+        hoverText: {
+            enable: false,
+        },
+    };
+
+    // private dragStart: any;//code: drag_disabled_for_now //because it is not working properly, in future if required to drag rectangle, then i will take care of it :-)
+    // @ts-ignore
+    private isHover: any;
+    private saveNodeType: any;
+
+    public constructor(props: EachRectangleProps) {
+        super(props);
+
+        this.isHover = isHover.bind(this);
+        this.saveNodeType = saveNodeType.bind(this);
+
+        this.state = {
+            hover: false,
+        };
+    }
+
+    public render() {
+        const {
+            topLeftX,
+            topLeftY,
+            topRightX,
+            topRightY,
+            bottomLeftX,
+            bottomLeftY,
+            bottomRightX,
+            bottomRightY,
+            type,
+            strokeStyle,
+            strokeWidth,
+            strokeDasharray,
+            r,
+            edgeStrokeWidth,
+            edgeFill,
+            edgeStroke,
+            edgeInteractiveCursor,
+            rectangleFill,
+            lineInteractiveCursor,//may need adjustment in future
+            hoverText,
+            selected,
+            // onDragComplete, //code: drag_disabled_for_now
+        } = this.props;
+
+        const {
+            enable: hoverTextEnabled,
+            selectedText: hoverTextSelected,
+            text: hoverTextUnselected,
+            ...restHoverTextProps
+        } = hoverText;
+
+        const { hover, anchor } = this.state;
+
+        return (
+            <g>
+                <InteractiveRectangle
+                    ref={this.saveNodeType("line")}
+                    selected={selected || hover}
+                    onHover={this.handleHover}
+                    onUnHover={this.handleHover}
+                    topLeftX={topLeftX}
+                    topLeftY={topLeftY}
+                    topRightX={topRightX}
+                    topRightY={topRightY}
+                    bottomLeftX={bottomLeftX}
+                    bottomLeftY={bottomLeftY}
+                    bottomRightX={bottomRightX}
+                    bottomRightY={bottomRightY}
+                    type={type}
+                    strokeStyle={strokeStyle}
+                    strokeWidth={hover || selected ? strokeWidth + 1 : strokeWidth}
+                    rectangleFill={rectangleFill}
+                    strokeDasharray={strokeDasharray}
+                    interactiveCursorClass={lineInteractiveCursor}
+                    ////////////////////////////////////////////////////////////////
+                    // code: drag_disabled_for_now
+                    // onDragStart={this.handleLineDragStart}
+                    // onDrag={this.handleLineDrag}
+                    // onDragComplete={onDragComplete}
+                    ////////////////////////////////////////////////////////////////
+                    onDoubleClickWhenHover={this.handleDoubleClickWhenHover}
+                    onClickWhenHover={this.handleClickWhenHover}
+                    onClickOutside={this.handleClickOutside}
+                    onContextMenuWhenHover={this.handleContextMenuWhenHover}
+                />
+                <ClickableCircle
+                    ref={this.saveNodeType("edge1")}
+                    show={selected || hover}
+                    cx={topLeftX}
+                    cy={topLeftY}
+                    r={r}
+                    fillStyle={edgeFill}
+                    strokeStyle={anchor === "edge1" ? strokeStyle : edgeStroke}
+                    strokeWidth={edgeStrokeWidth}
+                    interactiveCursorClass={edgeInteractiveCursor}
+                    onDragStart={this.handleEdge1DragStart}
+                    onDrag={this.handleEdge1Drag}
+                    onDragComplete={this.handleDragComplete}
+                />
+                <ClickableCircle
+                    ref={this.saveNodeType("edge2")}
+                    show={selected || hover}
+                    cx={topRightX}
+                    cy={topRightY}
+                    r={r}
+                    fillStyle={edgeFill}
+                    strokeStyle={anchor === "edge2" ? strokeStyle : edgeStroke}
+                    strokeWidth={edgeStrokeWidth}
+                    interactiveCursorClass={edgeInteractiveCursor}
+                    onDragStart={this.handleEdge2DragStart}
+                    onDrag={this.handleEdge2Drag}
+                    onDragComplete={this.handleDragComplete}
+                />
+                <HoverTextNearMouse
+                    show={hoverTextEnabled && hover}
+                    {...restHoverTextProps}
+                    text={selected ? hoverTextSelected : hoverTextUnselected}
+                />
+            </g>
+        );
+    }
+
+    private readonly handleHover = (_: React.MouseEvent, moreProps: any) => {
+        if (this.state.hover !== moreProps.hovering) {
+            this.setState({
+                hover: moreProps.hovering,
+            });
+        }
+    };
+
+    private readonly handleEdge2Drag = (e: React.MouseEvent, moreProps: any) => {
+        const { index, onDrag, topLeftX, topLeftY } = this.props;
+
+        const [topRightX, topRightY] = getNewXY(moreProps);
+
+        onDrag(e, index, {
+            topLeftX,
+            topLeftY,
+            topRightX,
+            topRightY,
+        });
+    };
+
+    private readonly handleDoubleClickWhenHover = (e: React.MouseEvent, moreProps: any) => {
+        if (this.props.onDoubleClickWhenHover) {
+            const { index, onDoubleClickWhenHover } = this.props;
+            onDoubleClickWhenHover(e, moreProps, index);
+        }
+    };
+    private readonly handleClickWhenHover = (e: React.MouseEvent, moreProps: any) => {
+        if (this.props.onClickWhenHover) {
+            const { index, onClickWhenHover } = this.props;
+            onClickWhenHover(e, moreProps, index);
+        }
+    };
+    private readonly handleClickOutside = (e: React.MouseEvent, moreProps: any) => {
+        if (this.props.onClickOutside) {
+            const { index, onClickOutside } = this.props;
+            onClickOutside(e, moreProps, index);
+        }
+    };
+    private readonly handleContextMenuWhenHover = (e: React.MouseEvent, moreProps: any) => {
+        if (this.props.onContextMenuWhenHover) {
+            const { index, onContextMenuWhenHover } = this.props;
+            onContextMenuWhenHover(e, moreProps, index);
+        }
+    };
+
+    private readonly handleEdge1Drag = (e: React.MouseEvent, moreProps: any) => {
+        const { index, onDrag, topRightX, topRightY } = this.props;
+
+        const [topLeftX, topLeftY] = getNewXY(moreProps);
+
+        onDrag(e, index, {
+            topLeftX,
+            topLeftY,
+            topRightX,
+            topRightY,
+        });
+    };
+
+    private readonly handleDragComplete = (e: React.MouseEvent, moreProps: any) => {
+        this.setState({
+            anchor: undefined,
+        });
+
+        const { onDragComplete } = this.props;
+        if (onDragComplete === undefined) {
+            return;
+        }
+
+        onDragComplete(e, moreProps);
+    };
+
+    private readonly handleEdge2DragStart = () => {
+        this.setState({
+            anchor: "edge1",
+        });
+    };
+
+    private readonly handleEdge1DragStart = () => {
+        this.setState({
+            anchor: "edge2",
+        });
+    };
+    /////////////////////////////////////////////////////////////////////////////////////
+    // //code: drag_disabled_for_now
+    // private readonly handleLineDrag = (e: React.MouseEvent, moreProps: any) => {
+    //     const { index, onDrag } = this.props;
+
+    //     const { topLeftX, topLeftY, topRightX, topRightY } = this.dragStart;
+
+    //     const {
+    //         xScale,
+    //         chartConfig: { yScale },
+    //         xAccessor,
+    //         fullData,
+    //     } = moreProps;
+    //     const { startPos, mouseXY } = moreProps;
+
+    //     const x1 = xScale(topLeftX);
+    //     const y1 = yScale(topLeftY);
+    //     const x2 = xScale(topRightX);
+    //     const y2 = yScale(topRightY);
+
+    //     const dx = startPos[0] - mouseXY[0];
+    //     const dy = startPos[1] - mouseXY[1];
+
+    //     const newX1Value = getXValue(xScale, xAccessor, [x1 - dx, y1 - dy], fullData);
+    //     const newY1Value = yScale.invert(y1 - dy);
+    //     const newX2Value = getXValue(xScale, xAccessor, [x2 - dx, y2 - dy], fullData);
+    //     const newY2Value = yScale.invert(y2 - dy);
+
+    //     onDrag(e, index, {
+    //         topLeftX: newX1Value,
+    //         topLeftY: newY1Value,
+    //         topRightX: newX2Value,
+    //         topRightY: newY2Value,
+    //     });
+    // };
+
+    // private readonly handleLineDragStart = () => {
+    //     const { topLeftX, topLeftY, topRightX, topRightY } = this.props;
+
+    //     this.dragStart = {
+    //         topLeftX,
+    //         topLeftY,
+    //         topRightX,
+    //         topRightY,
+    //     };
+    // };
+    /////////////////////////////////////////////////////////////////////////////////////
+}
+
+export function getNewXY(moreProps: any) {
+    const {
+        xScale,
+        chartConfig: { yScale },
+        xAccessor,
+        plotData,
+        mouseXY,
+    } = moreProps;
+    const mouseY = mouseXY[1];
+
+    const x = getXValue(xScale, xAccessor, mouseXY, plotData);
+
+    const [small, big] = yScale.domain().slice().sort(d3Ascending);
+    const y = yScale.invert(mouseY);
+    const newY = Math.min(Math.max(y, small), big);
+
+    return [x, newY];
+}

package/src/wrapper/index.ts

@@ -5,3 +5,4 @@ export { EachInteractiveYCoordinate } from "./EachInteractiveYCoordinate";
 export { EachLinearRegressionChannel } from "./EachLinearRegressionChannel";
 export { EachText } from "./EachText";
 export { EachTrendLine } from "./EachTrendLine";
+export { EachRectangle } from "./EachRectangle";