@tradingaction/interactive 2.0.13 → 2.0.16

package/lib/wrapper/EachRectangle.d.ts

@@ -0,0 +1,88 @@
+import * as React from "react";
+import { strokeDashTypes } from "@tradingaction/core";
+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" | "RAY" | "LINE";
+    readonly onDrag: (e: React.MouseEvent, index: number | undefined, moreProps: any) => void;
+    readonly onEdge1Drag: any;
+    readonly onEdge2Drag: any;
+    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 declare class EachRectangle extends React.Component<EachRectangleProps, EachRectangleState> {
+    static defaultProps: {
+        onDrag: () => void;
+        onEdge1Drag: () => void;
+        onEdge2Drag: () => void;
+        onSelect: () => void;
+        selected: boolean;
+        edgeStroke: string;
+        edgeFill: string;
+        edgeStrokeWidth: number;
+        rectangleFill: string;
+        r: number;
+        strokeWidth: number;
+        strokeDasharray: string;
+        hoverText: {
+            enable: boolean;
+        };
+    };
+    private isHover;
+    private saveNodeType;
+    constructor(props: EachRectangleProps);
+    render(): JSX.Element;
+    private readonly handleHover;
+    private readonly handleEdge2Drag;
+    private readonly handleDoubleClickWhenHover;
+    private readonly handleClickWhenHover;
+    private readonly handleClickOutside;
+    private readonly handleContextMenuWhenHover;
+    private readonly handleEdge1Drag;
+    private readonly handleDragComplete;
+    private readonly handleEdge2DragStart;
+    private readonly handleEdge1DragStart;
+}
+export declare function getNewXY(moreProps: any): any[];
+export {};

package/lib/wrapper/EachRectangle.js

@@ -0,0 +1,145 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from "react";
+import { ascending as d3Ascending } from "d3-array";
+import { noop } from "@tradingaction/core";
+import { getXValue } from "@tradingaction/core/lib/utils/ChartDataUtil";
+import { isHover, saveNodeType } from "../utils";
+import { ClickableCircle, HoverTextNearMouse, InteractiveRectangle } from "../components";
+export class EachRectangle extends React.Component {
+    constructor(props) {
+        super(props);
+        this.handleHover = (_, moreProps) => {
+            if (this.state.hover !== moreProps.hovering) {
+                this.setState({
+                    hover: moreProps.hovering,
+                });
+            }
+        };
+        this.handleEdge2Drag = (e, moreProps) => {
+            const { index, onDrag, topLeftX, topLeftY } = this.props;
+            const [topRightX, topRightY] = getNewXY(moreProps);
+            onDrag(e, index, {
+                topLeftX,
+                topLeftY,
+                topRightX,
+                topRightY,
+            });
+        };
+        this.handleDoubleClickWhenHover = (e, moreProps) => {
+            if (this.props.onDoubleClickWhenHover) {
+                const { index, onDoubleClickWhenHover } = this.props;
+                onDoubleClickWhenHover(e, moreProps, index);
+            }
+        };
+        this.handleClickWhenHover = (e, moreProps) => {
+            if (this.props.onClickWhenHover) {
+                const { index, onClickWhenHover } = this.props;
+                onClickWhenHover(e, moreProps, index);
+            }
+        };
+        this.handleClickOutside = (e, moreProps) => {
+            if (this.props.onClickOutside) {
+                const { index, onClickOutside } = this.props;
+                onClickOutside(e, moreProps, index);
+            }
+        };
+        this.handleContextMenuWhenHover = (e, moreProps) => {
+            if (this.props.onContextMenuWhenHover) {
+                const { index, onContextMenuWhenHover } = this.props;
+                onContextMenuWhenHover(e, moreProps, index);
+            }
+        };
+        this.handleEdge1Drag = (e, moreProps) => {
+            const { index, onDrag, topRightX, topRightY } = this.props;
+            const [topLeftX, topLeftY] = getNewXY(moreProps);
+            onDrag(e, index, {
+                topLeftX,
+                topLeftY,
+                topRightX,
+                topRightY,
+            });
+        };
+        this.handleDragComplete = (e, moreProps) => {
+            this.setState({
+                anchor: undefined,
+            });
+            const { onDragComplete } = this.props;
+            if (onDragComplete === undefined) {
+                return;
+            }
+            onDragComplete(e, moreProps);
+        };
+        this.handleEdge2DragStart = () => {
+            this.setState({
+                anchor: "edge1",
+            });
+        };
+        this.handleEdge1DragStart = () => {
+            this.setState({
+                anchor: "edge2",
+            });
+        };
+        this.isHover = isHover.bind(this);
+        this.saveNodeType = saveNodeType.bind(this);
+        this.state = {
+            hover: false,
+        };
+    }
+    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 } = hoverText, restHoverTextProps = __rest(hoverText, ["enable", "selectedText", "text"]);
+        const { hover, anchor } = this.state;
+        return (React.createElement("g", null,
+            React.createElement(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 }),
+            React.createElement(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 }),
+            React.createElement(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 }),
+            React.createElement(HoverTextNearMouse, Object.assign({ show: hoverTextEnabled && hover }, restHoverTextProps, { text: selected ? hoverTextSelected : hoverTextUnselected }))));
+    }
+}
+EachRectangle.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,
+    },
+};
+export function getNewXY(moreProps) {
+    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];
+}
+//# sourceMappingURL=EachRectangle.js.map

package/lib/wrapper/EachRectangle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EachRectangle.js","sourceRoot":"","sources":["../../src/wrapper/EachRectangle.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,IAAI,EAAmB,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6CAA6C,CAAC;AACxE,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AA0D1F,MAAM,OAAO,aAAc,SAAQ,KAAK,CAAC,SAAiD;IAwBtF,YAAmB,KAAyB;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;QAkHA,gBAAW,GAAG,CAAC,CAAmB,EAAE,SAAc,EAAE,EAAE;YACnE,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,QAAQ,EAAE;gBACzC,IAAI,CAAC,QAAQ,CAAC;oBACV,KAAK,EAAE,SAAS,CAAC,QAAQ;iBAC5B,CAAC,CAAC;aACN;QACL,CAAC,CAAC;QAEe,oBAAe,GAAG,CAAC,CAAmB,EAAE,SAAc,EAAE,EAAE;YACvE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YAEzD,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;YAEnD,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE;gBACb,QAAQ;gBACR,QAAQ;gBACR,SAAS;gBACT,SAAS;aACZ,CAAC,CAAC;QACP,CAAC,CAAC;QAEe,+BAA0B,GAAG,CAAC,CAAmB,EAAE,SAAc,EAAE,EAAE;YAClF,IAAI,IAAI,CAAC,KAAK,CAAC,sBAAsB,EAAE;gBACnC,MAAM,EAAE,KAAK,EAAE,sBAAsB,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;gBACrD,sBAAsB,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC;aAC/C;QACL,CAAC,CAAC;QACe,yBAAoB,GAAG,CAAC,CAAmB,EAAE,SAAc,EAAE,EAAE;YAC5E,IAAI,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE;gBAC7B,MAAM,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;gBAC/C,gBAAgB,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC;aACzC;QACL,CAAC,CAAC;QACe,uBAAkB,GAAG,CAAC,CAAmB,EAAE,SAAc,EAAE,EAAE;YAC1E,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE;gBAC3B,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;gBAC7C,cAAc,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC;aACvC;QACL,CAAC,CAAC;QACe,+BAA0B,GAAG,CAAC,CAAmB,EAAE,SAAc,EAAE,EAAE;YAClF,IAAI,IAAI,CAAC,KAAK,CAAC,sBAAsB,EAAE;gBACnC,MAAM,EAAE,KAAK,EAAE,sBAAsB,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;gBACrD,sBAAsB,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC;aAC/C;QACL,CAAC,CAAC;QAEe,oBAAe,GAAG,CAAC,CAAmB,EAAE,SAAc,EAAE,EAAE;YACvE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YAE3D,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;YAEjD,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE;gBACb,QAAQ;gBACR,QAAQ;gBACR,SAAS;gBACT,SAAS;aACZ,CAAC,CAAC;QACP,CAAC,CAAC;QAEe,uBAAkB,GAAG,CAAC,CAAmB,EAAE,SAAc,EAAE,EAAE;YAC1E,IAAI,CAAC,QAAQ,CAAC;gBACV,MAAM,EAAE,SAAS;aACpB,CAAC,CAAC;YAEH,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YACtC,IAAI,cAAc,KAAK,SAAS,EAAE;gBAC9B,OAAO;aACV;YAED,cAAc,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;QACjC,CAAC,CAAC;QAEe,yBAAoB,GAAG,GAAG,EAAE;YACzC,IAAI,CAAC,QAAQ,CAAC;gBACV,MAAM,EAAE,OAAO;aAClB,CAAC,CAAC;QACP,CAAC,CAAC;QAEe,yBAAoB,GAAG,GAAG,EAAE;YACzC,IAAI,CAAC,QAAQ,CAAC;gBACV,MAAM,EAAE,OAAO;aAClB,CAAC,CAAC;QACP,CAAC,CAAC;QAlME,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE5C,IAAI,CAAC,KAAK,GAAG;YACT,KAAK,EAAE,KAAK;SACf,CAAC;IACN,CAAC;IAEM,MAAM;QACT,MAAM,EACF,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,WAAW,EACX,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,WAAW,EACX,eAAe,EACf,CAAC,EACD,eAAe,EACf,QAAQ,EACR,UAAU,EACV,qBAAqB,EACrB,aAAa,EACb,qBAAqB,EAAC,+BAA+B;QACrD,SAAS,EACT,QAAQ;QACR,gDAAgD;UACnD,GAAG,IAAI,CAAC,KAAK,CAAC;QAEf,MAAM,EACF,MAAM,EAAE,gBAAgB,EACxB,YAAY,EAAE,iBAAiB,EAC/B,IAAI,EAAE,mBAAmB,KAEzB,SAAS,EADN,kBAAkB,UACrB,SAAS,EALP,kCAKL,CAAY,CAAC;QAEd,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAErC,OAAO,CACH;YACI,oBAAC,oBAAoB,IACjB,GAAG,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAC9B,QAAQ,EAAE,QAAQ,IAAI,KAAK,EAC3B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,WAAW,EAC3B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,EAC9D,aAAa,EAAE,aAAa,EAC5B,eAAe,EAAE,eAAe,EAChC,sBAAsB,EAAE,qBAAqB;gBAC7C,gEAAgE;gBAChE,8BAA8B;gBAC9B,yCAAyC;gBACzC,+BAA+B;gBAC/B,kCAAkC;gBAClC,gEAAgE;gBAChE,sBAAsB,EAAE,IAAI,CAAC,0BAA0B,EACvD,gBAAgB,EAAE,IAAI,CAAC,oBAAoB,EAC3C,cAAc,EAAE,IAAI,CAAC,kBAAkB,EACvC,sBAAsB,EAAE,IAAI,CAAC,0BAA0B,GACzD;YACF,oBAAC,eAAe,IACZ,GAAG,EAAE,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,EAC/B,IAAI,EAAE,QAAQ,IAAI,KAAK,EACvB,EAAE,EAAE,QAAQ,EACZ,EAAE,EAAE,QAAQ,EACZ,CAAC,EAAE,CAAC,EACJ,SAAS,EAAE,QAAQ,EACnB,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,EAC1D,WAAW,EAAE,eAAe,EAC5B,sBAAsB,EAAE,qBAAqB,EAC7C,WAAW,EAAE,IAAI,CAAC,oBAAoB,EACtC,MAAM,EAAE,IAAI,CAAC,eAAe,EAC5B,cAAc,EAAE,IAAI,CAAC,kBAAkB,GACzC;YACF,oBAAC,eAAe,IACZ,GAAG,EAAE,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,EAC/B,IAAI,EAAE,QAAQ,IAAI,KAAK,EACvB,EAAE,EAAE,SAAS,EACb,EAAE,EAAE,SAAS,EACb,CAAC,EAAE,CAAC,EACJ,SAAS,EAAE,QAAQ,EACnB,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,EAC1D,WAAW,EAAE,eAAe,EAC5B,sBAAsB,EAAE,qBAAqB,EAC7C,WAAW,EAAE,IAAI,CAAC,oBAAoB,EACtC,MAAM,EAAE,IAAI,CAAC,eAAe,EAC5B,cAAc,EAAE,IAAI,CAAC,kBAAkB,GACzC;YACF,oBAAC,kBAAkB,kBACf,IAAI,EAAE,gBAAgB,IAAI,KAAK,IAC3B,kBAAkB,IACtB,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,mBAAmB,IAC1D,CACF,CACP,CAAC;IACN,CAAC;;AAxIa,0BAAY,GAAG;IACzB,MAAM,EAAE,IAAI;IACZ,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,IAAI;IACjB,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,UAAU,EAAE,SAAS;IACrB,QAAQ,EAAE,SAAS;IACnB,eAAe,EAAE,CAAC;IAClB,aAAa,EAAE,aAAa;IAC5B,CAAC,EAAE,CAAC;IACJ,WAAW,EAAE,CAAC;IACd,eAAe,EAAE,OAAO;IACxB,SAAS,EAAE;QACP,MAAM,EAAE,KAAK;KAChB;CACJ,CAAC;AA8PN,MAAM,UAAU,QAAQ,CAAC,SAAc;IACnC,MAAM,EACF,MAAM,EACN,WAAW,EAAE,EAAE,MAAM,EAAE,EACvB,SAAS,EACT,QAAQ,EACR,OAAO,GACV,GAAG,SAAS,CAAC;IACd,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;IAE1B,MAAM,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC;IAE1D,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC/D,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAChC,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC;IAE/C,OAAO,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;AACrB,CAAC"}

package/lib/wrapper/index.d.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";

package/lib/wrapper/index.js

@@ -5,4 +5,5 @@ export { EachInteractiveYCoordinate } from "./EachInteractiveYCoordinate";
 export { EachLinearRegressionChannel } from "./EachLinearRegressionChannel";
 export { EachText } from "./EachText";
 export { EachTrendLine } from "./EachTrendLine";
+export { EachRectangle } from "./EachRectangle";
 //# sourceMappingURL=index.js.map

package/lib/wrapper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/wrapper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/wrapper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tradingaction/interactive",
-    "version": "2.0.13",
+    "version": "2.0.16",
     "description": "Interactive features for react-financial-charts",
     "publishConfig": {
         "access": "public"
@@ -38,8 +38,8 @@
         "watch": "tsc -p tsconfig.json --watch --preserveWatchOutput"
     },
     "dependencies": {
-        "@tradingaction/coordinates": "^2.0.13",
-        "@tradingaction/core": "^2.0.13",
+        "@tradingaction/coordinates": "^2.0.15",
+        "@tradingaction/core": "^2.0.15",
         "d3-array": "^2.9.1",
         "d3-format": "^2.0.0",
         "d3-interpolate": "^2.0.1",
@@ -49,5 +49,5 @@
         "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
     },
-    "gitHead": "9c9bc635a2291c8da0e1dd5befa4000e96d83119"
+    "gitHead": "946010fcbe99456d2e3962061540a9dc6d00eb55"
 }

package/src/Rectangle.tsx

@@ -0,0 +1,309 @@
+import * as React from "react";
+import { isDefined, isNotDefined, noop, strokeDashTypes } from "@tradingaction/core";
+import { getValueFromOverride, isHoverForInteractiveType, saveNodeType, terminate } from "./utils";
+import { HoverTextNearMouse, MouseLocationIndicator, InteractiveRectangle } from "./components";
+import { EachRectangle } from "./wrapper";
+
+export interface RectangleProps {
+    readonly snap: boolean;
+    readonly enabled: boolean;
+    readonly snapTo?: (datum: any) => number | number[];
+    readonly shouldDisableSnap?: (e: React.MouseEvent) => boolean;
+    readonly onStart: (e: React.MouseEvent, moreProps: any) => void;
+    readonly onComplete?: (e: React.MouseEvent, newTrends: any[], 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 currentPositionStroke?: string;
+    readonly currentPositionStrokeWidth?: number;
+    readonly currentPositionstrokeOpacity?: number;
+    readonly currentPositionRadius?: number;
+    readonly type:
+        | "XLINE" // extends from -Infinity to +Infinity
+        | "RAY" // extends to +/-Infinity in one direction
+        | "LINE"; // extends between the set bounds
+    readonly hoverText: object;
+    readonly trends: any[];
+    readonly appearance: {
+        readonly strokeStyle: string;
+        readonly strokeWidth: number;
+        readonly strokeDasharray: strokeDashTypes;
+        readonly edgeStrokeWidth: number;
+        readonly edgeFill: string;
+        readonly edgeStroke: string;
+        readonly rectangleFill: string;
+    };
+}
+
+interface RectangleState {
+    current?: any;
+    override?: any;
+    trends?: any;
+}
+
+export class Rectangle extends React.Component<RectangleProps, RectangleState> {
+    public static defaultProps = {
+        type: "XLINE",
+        onStart: noop,
+        onSelect: noop,
+        onDoubleClickWhenHover: noop,
+        onClickWhenHover: noop,
+        onClickOutside: noop,
+        currentPositionStroke: "#000000",
+        currentPositionstrokeOpacity: 1,
+        currentPositionStrokeWidth: 3,
+        currentPositionRadius: 0,
+        shouldDisableSnap: (e: React.MouseEvent) => e.button === 2 || e.shiftKey,
+        hoverText: {
+            ...HoverTextNearMouse.defaultProps,
+            enable: true,
+            bgHeight: "auto",
+            bgWidth: "auto",
+            text: "Click to select object",
+            selectedText: "",
+        },
+        trends: [],
+        appearance: {
+            strokeStyle: "#000000",
+            strokeWidth: 1,
+            strokeDasharray: "Solid",
+            edgeStrokeWidth: 1,
+            edgeFill: "#FFFFFF",
+            edgeStroke: "#000000",
+            rectangleFill: "transparent",
+            r: 6,
+        },
+    };
+
+    // @ts-ignore
+    private getSelectionState: any;
+    private mouseMoved: any;
+    private saveNodeType: any;
+    // @ts-ignore
+    private terminate: any;
+
+    public constructor(props: RectangleProps) {
+        super(props);
+
+        this.terminate = terminate.bind(this);
+        this.saveNodeType = saveNodeType.bind(this);
+
+        this.getSelectionState = isHoverForInteractiveType("trends").bind(this);
+
+        this.state = {};
+    }
+
+    public render() {
+        const {
+            appearance,
+            currentPositionstrokeOpacity,
+            currentPositionRadius = Rectangle.defaultProps.currentPositionRadius,
+            currentPositionStroke,
+            currentPositionStrokeWidth,
+            enabled,
+            hoverText,
+            shouldDisableSnap,
+            snap,
+            snapTo,
+            trends,
+            type,
+        } = this.props;
+
+        const { current, override } = this.state;
+
+        const tempLine =
+            isDefined(current) && isDefined(current.topRight) ? (
+                <InteractiveRectangle
+                    type={type}
+                    topLeftX={current.topLeft[0]}
+                    topLeftY={current.topLeft[1]}
+                    topRightX={current.topRight[0]}
+                    topRightY={current.topRight[1]}
+                    
+                    bottomLeftX={current.bottomLeft[0]}
+                    bottomLeftY={current.bottomLeft[1]}
+                    bottomRightX={current.bottomRight[0]}
+                    bottomRightY={current.bottomRight[1]}
+
+                    strokeStyle={appearance.strokeStyle}
+                    strokeWidth={appearance.strokeWidth}
+                />
+            ) : null;
+
+        return (
+            <g>
+                {trends.map((each, idx) => {
+                    const eachAppearance = isDefined(each.appearance)
+                        ? { ...appearance, ...each.appearance }
+                        : appearance;
+
+                    const hoverTextWithDefault = {
+                        ...Rectangle.defaultProps.hoverText,
+                        ...hoverText,
+                    };
+
+                    return (
+                        <EachRectangle
+                            key={idx}
+                            ref={this.saveNodeType(idx)}
+                            index={idx}
+                            type={each.type}
+                            selected={each.selected}
+                            topLeftX={getValueFromOverride(override, idx, "topLeftX", each.topLeft[0])}
+                            topLeftY={getValueFromOverride(override, idx, "topLeftY", each.topLeft[1])}
+                            topRightX={getValueFromOverride(override, idx, "topRightX", each.topRight[0])}
+                            topRightY={getValueFromOverride(override, idx, "topRightY", each.topRight[1])}
+                            
+                            bottomLeftX={getValueFromOverride(override, idx, "bottomLeftX", each.bottomLeft[0])}
+                            bottomLeftY={getValueFromOverride(override, idx, "bottomLeftY", each.bottomLeft[1])}
+                            bottomRightX={getValueFromOverride(override, idx, "bottomRightX", each.bottomRight[0])}
+                            bottomRightY={getValueFromOverride(override, idx, "bottomRightY", each.bottomRight[1])}
+                            
+                            strokeStyle={eachAppearance.strokeStyle}
+                            strokeWidth={eachAppearance.strokeWidth}
+                            strokeOpacity={eachAppearance.strokeOpacity}
+                            strokeDasharray={eachAppearance.strokeDasharray}
+                            edgeStroke={eachAppearance.edgeStroke}
+                            edgeFill={eachAppearance.edgeFill}
+                            edgeStrokeWidth={eachAppearance.edgeStrokeWidth}
+                            rectangleFill={eachAppearance.rectangleFill}
+                            r={eachAppearance.r}
+                            hoverText={hoverTextWithDefault}
+                            onDrag={this.handleDragLine}
+                            onDragComplete={this.handleDragLineComplete}
+                            edgeInteractiveCursor="react-financial-charts-move-cursor"
+                            lineInteractiveCursor="react-financial-charts-move-cursor"
+                            onDoubleClickWhenHover={this.props.onDoubleClickWhenHover}
+                            onClickWhenHover={this.props.onClickWhenHover}
+                            onClickOutside={this.props.onClickOutside}
+                            onContextMenuWhenHover={this.props.onContextMenuWhenHover}
+                        />
+                    );
+                })}
+                {tempLine}
+                <MouseLocationIndicator
+                    enabled={enabled}
+                    snap={snap}
+                    shouldDisableSnap={shouldDisableSnap}
+                    snapTo={snapTo}
+                    r={currentPositionRadius}
+                    stroke={currentPositionStroke}
+                    opacity={currentPositionstrokeOpacity}
+                    strokeWidth={currentPositionStrokeWidth}
+                    onMouseDown={this.handleStart}
+                    onClick={this.handleEnd}
+                    onMouseMove={this.handleDrawLine}
+                />
+            </g>
+        );
+    }
+
+    private readonly handleEnd = (e: React.MouseEvent, xyValue: any, moreProps: any) => {
+        const { current } = this.state;
+        const { trends, appearance, type } = this.props;
+
+        if (this.mouseMoved && isDefined(current) && isDefined(current.topLeft)) {
+            const newTrends = [
+                ...trends.map((d) => ({ ...d, selected: false })),
+                {
+                    topLeft: current.topLeft,
+                    topRight: xyValue,
+                    selected: true,
+                    appearance,
+                    type,
+                },
+            ];
+            this.setState(
+                {
+                    current: null,
+                    trends: newTrends,
+                },
+                () => {
+                    const { onComplete } = this.props;
+                    if (onComplete !== undefined) {
+                        onComplete(e, newTrends, moreProps);
+                    }
+                },
+            );
+        }
+    };
+
+    private readonly handleStart = (e: React.MouseEvent, xyValue: any, moreProps: any) => {
+        const { current } = this.state;
+
+        if (isNotDefined(current) || isNotDefined(current.topLeft)) {
+            this.mouseMoved = false;
+
+            this.setState(
+                {
+                    current: {
+                        topLeft: xyValue,
+                        topRight: null,
+                    },
+                },
+                () => {
+                    const { onStart } = this.props;
+                    if (onStart !== undefined) {
+                        onStart(e, moreProps);
+                    }
+                },
+            );
+        }
+    };
+
+    private readonly handleDrawLine = (_: React.MouseEvent, xyValue: any) => {
+        const { current } = this.state;
+        if (isDefined(current) && isDefined(current.topLeft)) {
+            this.mouseMoved = true;
+            this.setState({
+                current: {
+                    topLeft: current.topLeft,
+                    topRight: xyValue,
+                },
+            });
+        }
+    };
+
+    private readonly handleDragLineComplete = (e: React.MouseEvent, moreProps: any) => {
+        const { override } = this.state;
+        if (isDefined(override)) {
+            const { trends } = this.props;
+            const newTrends = trends.map((each, idx) =>
+                idx === override.index
+                    ? {
+                          ...each,
+                          topLeft: [override.topLeft, override.topRight],
+                          topRight: [override.topRightX, override.topRightY],
+                          selected: true,
+                      }
+                    : {
+                          ...each,
+                          selected: false,
+                      },
+            );
+
+            this.setState(
+                {
+                    override: null,
+                },
+                () => {
+                    const { onComplete } = this.props;
+                    if (onComplete !== undefined) {
+                        onComplete(e, newTrends, moreProps);
+                    }
+                },
+            );
+        }
+    };
+
+    private readonly handleDragLine = (_: React.MouseEvent, index: number | undefined, newXYValue: any) => {
+        this.setState({
+            override: {
+                index,
+                ...newXYValue,
+            },
+        });
+    };
+}