@tradingaction/interactive 2.0.13

package/src/DrawingObjectSelector.tsx

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { head, isDefined, mapObject, GenericComponent, getMouseCanvas } from "@tradingaction/core";
+import { getMorePropsForChart, getSelected } from "./utils";
+
+interface DrawingObjectSelectorProps {
+    readonly getInteractiveNodes: () => any[];
+    readonly onSelect?: (e: React.MouseEvent, interactives: any[], moreProps: any) => void;
+    readonly onDoubleClick?: (e: React.MouseEvent, item: any, moreProps: any) => void;
+    readonly drawingObjectMap: any;
+    readonly enabled: boolean;
+}
+
+export class DrawingObjectSelector extends React.Component<DrawingObjectSelectorProps> {
+    public static defaultProps = {
+        enabled: true,
+    };
+
+    public render() {
+        return (
+            <GenericComponent
+                canvasToDraw={getMouseCanvas}
+                onMouseDown={this.handleClick}
+                onDoubleClick={this.handleDoubleClick}
+                drawOn={["mousemove", "pan", "drag"]}
+            />
+        );
+    }
+
+    private readonly getInteraction = (moreProps: any) => {
+        const { getInteractiveNodes, drawingObjectMap } = this.props;
+        const interactiveNodes = getInteractiveNodes();
+        const interactives = mapObject(interactiveNodes, (each) => {
+            const key = drawingObjectMap[each.type];
+
+            const valueArray = isDefined(key) ? each.node.props[key] : undefined;
+
+            const valuePresent = isDefined(valueArray) && Array.isArray(valueArray) && valueArray.length > 0;
+            if (valuePresent) {
+                const morePropsForChart = getMorePropsForChart(moreProps, each.chartId);
+
+                const objects = each.node.getSelectionState(morePropsForChart);
+
+                return {
+                    type: each.type,
+                    chartId: each.chartId,
+                    objects,
+                };
+            }
+            return {
+                type: each.type,
+                chartId: each.chartId,
+                objects: [],
+            };
+        });
+
+        return interactives;
+    };
+
+    private readonly handleClick = (e: React.MouseEvent, moreProps: any) => {
+        e.preventDefault();
+        const { onSelect } = this.props;
+        const { enabled } = this.props;
+        if (!enabled) {
+            return;
+        }
+
+        const interactives = this.getInteraction(moreProps);
+        if (onSelect !== undefined) {
+            onSelect(e, interactives, moreProps);
+        }
+    };
+
+    private readonly handleDoubleClick = (e: React.MouseEvent, moreProps: any) => {
+        e.preventDefault();
+        const { onDoubleClick } = this.props;
+        const { enabled } = this.props;
+        if (!enabled) {
+            return;
+        }
+
+        const interactives = this.getInteraction(moreProps);
+        const allSelected = getSelected(interactives);
+
+        if (allSelected.length > 0) {
+            const selected = head(allSelected);
+            const item = {
+                type: selected.type,
+                chartId: selected.chartId,
+                object: head(selected.objects),
+            };
+            const morePropsForChart = getMorePropsForChart(moreProps, selected.chartId);
+            if (onDoubleClick !== undefined) {
+                onDoubleClick(e, item, morePropsForChart);
+            }
+        }
+    };
+}

package/src/EquidistantChannel.tsx

@@ -0,0 +1,268 @@
+import * as React from "react";
+import { isDefined, isNotDefined, noop } from "@tradingaction/core";
+import { HoverTextNearMouse, MouseLocationIndicator } from "./components";
+import { getSlope, getYIntercept } from "./components/InteractiveStraightLine";
+import { isHoverForInteractiveType, saveNodeType, terminate } from "./utils";
+import { EachEquidistantChannel } from "./wrapper";
+
+interface EquidistantChannelProps {
+    readonly enabled: boolean;
+    readonly onStart: () => void;
+    readonly onComplete: (e: React.MouseEvent, newChannels: any[], moreProps: any) => void;
+    readonly onSelect: (e: React.MouseEvent, interactives: any[], moreProps: any) => void;
+    readonly currentPositionStroke?: string;
+    readonly currentPositionStrokeWidth?: number;
+    readonly currentPositionOpacity?: number;
+    readonly currentPositionRadius?: number;
+    readonly hoverText: object;
+    readonly channels: any[];
+    readonly appearance: {
+        readonly stroke: string;
+        readonly strokeOpacity: number;
+        readonly strokeWidth: number;
+        readonly fill: string;
+        readonly fillOpacity: number;
+        readonly edgeStroke: string;
+        readonly edgeFill: string;
+        readonly edgeFill2: string;
+        readonly edgeStrokeWidth: number;
+        readonly r: number;
+    };
+}
+
+interface EquidistantChannelState {
+    current?: any;
+    override?: any;
+}
+
+export class EquidistantChannel extends React.Component<EquidistantChannelProps, EquidistantChannelState> {
+    public static defaultProps = {
+        onSelect: noop,
+        currentPositionStroke: "#000000",
+        currentPositionOpacity: 1,
+        currentPositionStrokeWidth: 3,
+        currentPositionRadius: 4,
+        hoverText: {
+            ...HoverTextNearMouse.defaultProps,
+            enable: true,
+            bgHeight: 18,
+            bgWidth: 120,
+            text: "Click to select object",
+        },
+        channels: [],
+        appearance: {
+            stroke: "#000000",
+            strokeOpacity: 1,
+            strokeWidth: 1,
+            fill: "#8AAFE2",
+            fillOpacity: 0.7,
+            edgeStroke: "#000000",
+            edgeFill: "#FFFFFF",
+            edgeFill2: "#250B98",
+            edgeStrokeWidth: 1,
+            r: 5,
+        },
+    };
+
+    // @ts-ignore
+    private terminate: () => void;
+    private saveNodeType: any;
+    // @ts-ignore
+    private getSelectionState: any;
+    private mouseMoved: any;
+
+    public constructor(props: EquidistantChannelProps) {
+        super(props);
+
+        this.terminate = terminate.bind(this);
+        this.saveNodeType = saveNodeType.bind(this);
+        this.getSelectionState = isHoverForInteractiveType("channels").bind(this);
+
+        this.state = {};
+    }
+
+    public render() {
+        const {
+            appearance,
+            channels,
+            currentPositionOpacity,
+            currentPositionRadius = EquidistantChannel.defaultProps.currentPositionRadius,
+            currentPositionStroke,
+            currentPositionStrokeWidth,
+            enabled,
+            hoverText,
+        } = this.props;
+
+        const { current, override } = this.state;
+
+        const overrideIndex = isDefined(override) ? override.index : null;
+
+        const tempChannel =
+            isDefined(current) && isDefined(current.endXY) ? (
+                <EachEquidistantChannel
+                    interactive={false}
+                    {...current}
+                    appearance={appearance}
+                    hoverText={hoverText}
+                />
+            ) : null;
+
+        return (
+            <g>
+                {channels.map((each, idx) => {
+                    const eachAppearance = isDefined(each.appearance)
+                        ? { ...appearance, ...each.appearance }
+                        : appearance;
+
+                    return (
+                        <EachEquidistantChannel
+                            key={idx}
+                            ref={this.saveNodeType(idx)}
+                            index={idx}
+                            selected={each.selected}
+                            hoverText={hoverText}
+                            {...(idx === overrideIndex ? override : each)}
+                            appearance={eachAppearance}
+                            onDrag={this.handleDragChannel}
+                            onDragComplete={this.handleDragChannelComplete}
+                        />
+                    );
+                })}
+                {tempChannel}
+                <MouseLocationIndicator
+                    enabled={enabled}
+                    snap={false}
+                    r={currentPositionRadius}
+                    stroke={currentPositionStroke}
+                    opacity={currentPositionOpacity}
+                    strokeWidth={currentPositionStrokeWidth}
+                    onMouseDown={this.handleStart}
+                    onClick={this.handleEnd}
+                    onMouseMove={this.handleDrawChannel}
+                />
+            </g>
+        );
+    }
+
+    private readonly handleDragChannel = (_: React.MouseEvent, index: any, newXYValue: any) => {
+        this.setState({
+            override: {
+                index,
+                ...newXYValue,
+            },
+        });
+    };
+
+    private readonly handleDragChannelComplete = (e: React.MouseEvent, moreProps: any) => {
+        const { override } = this.state;
+        const { channels } = this.props;
+
+        if (isDefined(override)) {
+            const { index, ...rest } = override;
+            const newChannels = channels.map((each, idx) =>
+                idx === index ? { ...each, ...rest, selected: true } : each,
+            );
+
+            this.setState(
+                {
+                    override: null,
+                },
+                () => {
+                    const { onComplete } = this.props;
+                    if (onComplete !== undefined) {
+                        onComplete(e, newChannels, moreProps);
+                    }
+                },
+            );
+        }
+    };
+
+    private readonly handleStart = (_: React.MouseEvent, xyValue: any) => {
+        const { current } = this.state;
+
+        if (isNotDefined(current) || isNotDefined(current.startXY)) {
+            this.mouseMoved = false;
+            this.setState(
+                {
+                    current: {
+                        startXY: xyValue,
+                        endXY: null,
+                    },
+                },
+                () => {
+                    const { onStart } = this.props;
+                    if (onStart !== undefined) {
+                        onStart();
+                    }
+                },
+            );
+        }
+    };
+
+    private readonly handleEnd = (e: React.MouseEvent, _: any, moreProps: any) => {
+        const { current } = this.state;
+        const { channels, appearance } = this.props;
+
+        if (this.mouseMoved && isDefined(current) && isDefined(current.startXY)) {
+            if (isNotDefined(current.dy)) {
+                this.setState({
+                    current: {
+                        ...current,
+                        dy: 0,
+                    },
+                });
+            } else {
+                const newChannels = [
+                    ...channels.map((d) => ({ ...d, selected: false })),
+                    {
+                        ...current,
+                        selected: true,
+                        appearance,
+                    },
+                ];
+
+                this.setState(
+                    {
+                        current: null,
+                    },
+                    () => {
+                        const { onComplete } = this.props;
+                        if (onComplete !== undefined) {
+                            onComplete(e, newChannels, moreProps);
+                        }
+                    },
+                );
+            }
+        }
+    };
+
+    private readonly handleDrawChannel = (_: React.MouseEvent, xyValue: any) => {
+        const { current } = this.state;
+
+        if (isDefined(current) && isDefined(current.startXY)) {
+            this.mouseMoved = true;
+            if (isNotDefined(current.dy)) {
+                this.setState({
+                    current: {
+                        startXY: current.startXY,
+                        endXY: xyValue,
+                    },
+                });
+            } else {
+                const m = getSlope(current.startXY, current.endXY);
+                const b = getYIntercept(m, current.endXY);
+
+                // @ts-ignore
+                const y = m * xyValue[0] + b;
+                const dy = xyValue[1] - y;
+
+                this.setState({
+                    current: {
+                        ...current,
+                        dy,
+                    },
+                });
+            }
+        }
+    };
+}

package/src/FibonacciRetracement.tsx

@@ -0,0 +1,328 @@
+import * as React from "react";
+import { isDefined, isNotDefined, noop } from "@tradingaction/core";
+import { HoverTextNearMouse, MouseLocationIndicator } from "./components";
+import { isHoverForInteractiveType, saveNodeType, terminate } from "./utils";
+import { EachFibRetracement } from "./wrapper";
+
+interface FibonacciRetracementProps {
+    readonly enabled: boolean;
+    readonly width?: number;
+    readonly onStart?: (moreProps: any) => void;
+    readonly onComplete?: (e: React.MouseEvent, newRetracements: any[], moreProps: any) => void;
+    readonly onSelect?: (e: React.MouseEvent, interactives: any[], moreProps: any) => void;
+    readonly onDoubleClick?: (e: React.MouseEvent, moreProps: any, idx: any) => void;
+    readonly onClickWhenHover?: (e: React.MouseEvent, moreProps: any, idx: any) => void;
+    readonly onClickOutside?: (e: React.MouseEvent, moreProps: any, idx: any) => void;
+    readonly onConextMenu?: (e: React.MouseEvent, moreProps: any, idx: any) => void;
+    readonly type:
+        | "EXTEND" // extends from -Infinity to +Infinity
+        | "RAY" // extends to +/-Infinity in one direction
+        | "BOUND"; // extends between the set bounds
+    readonly hoverText: object;
+    readonly currentPositionStroke?: string;
+    readonly currentPositionStrokeWidth?: number;
+    readonly currentPositionOpacity?: number;
+    readonly currentPositionRadius?: number;
+    readonly retracements: any[];
+    readonly appearance: {
+        readonly strokeStyle: string;
+        readonly strokeWidth: number;
+        readonly fontFamily: string;
+        readonly fontSize: number;
+        readonly fontFill: string;
+        readonly edgeStroke: string;
+        readonly edgeFill: string;
+        readonly nsEdgeFill: string;
+        readonly edgeStrokeWidth: number;
+        readonly r: number;
+    };
+}
+
+interface FibonacciRetracementState {
+    current?: any;
+    override?: any;
+}
+
+export class FibonacciRetracement extends React.Component<FibonacciRetracementProps, FibonacciRetracementState> {
+    public static defaultProps = {
+        enabled: true,
+        type: "RAY",
+        retracements: [],
+        onSelect: noop,
+        hoverText: {
+            ...HoverTextNearMouse.defaultProps,
+            enable: true,
+            bgHeight: "auto",
+            bgWidth: "auto",
+            text: "Click to select object",
+            selectedText: "",
+        },
+        currentPositionStroke: "#000000",
+        currentPositionOpacity: 1,
+        currentPositionStrokeWidth: 3,
+        currentPositionRadius: 4,
+        appearance: {
+            strokeStyle: "#000000",
+            strokeWidth: 1,
+            fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
+            fontSize: 11,
+            fontFill: "#000000",
+            edgeStroke: "#000000",
+            edgeFill: "#FFFFFF",
+            nsEdgeFill: "#000000",
+            edgeStrokeWidth: 1,
+            r: 5,
+        },
+    };
+
+    // @ts-ignore
+    private getSelectionState: any;
+    private mouseMoved: any;
+    private saveNodeType: any;
+    // @ts-ignore
+    private terminate: any;
+
+    public constructor(props: FibonacciRetracementProps) {
+        super(props);
+
+        this.handleEdge1Drag = this.handleEdge1Drag.bind(this);
+        this.handleEdge2Drag = this.handleEdge2Drag.bind(this);
+
+        this.terminate = terminate.bind(this);
+        this.getSelectionState = isHoverForInteractiveType("retracements").bind(this);
+
+        this.saveNodeType = saveNodeType.bind(this);
+        this.state = {};
+    }
+
+    public render() {
+        const { current, override } = this.state;
+
+        const {
+            appearance,
+            currentPositionStroke,
+            currentPositionOpacity,
+            currentPositionStrokeWidth,
+            currentPositionRadius = FibonacciRetracement.defaultProps.currentPositionRadius,
+            retracements,
+            type,
+        } = this.props;
+
+        const { enabled, hoverText } = this.props;
+        const overrideIndex = isDefined(override) ? override.index : null;
+        const hoverTextWidthDefault = {
+            ...FibonacciRetracement.defaultProps.hoverText,
+            ...hoverText,
+        };
+
+        const currentRetracement =
+            isDefined(current) && isDefined(current.x2) ? (
+                <EachFibRetracement
+                    interactive={false}
+                    type={type}
+                    appearance={appearance}
+                    hoverText={hoverTextWidthDefault}
+                    {...current}
+                    onDoubleClick={(e) => this.handleDoubleClick(e, {}, 0)}
+                />
+            ) : null;
+        return (
+            <g>
+                {retracements.map((each, idx) => {
+                    const eachAppearance = isDefined(each.appearance)
+                        ? { ...appearance, ...each.appearance }
+                        : appearance;
+
+                    const eachHoverText = isDefined(each.hoverText)
+                        ? { ...hoverTextWidthDefault, ...each.hoverText }
+                        : hoverTextWidthDefault;
+
+                    return (
+                        <EachFibRetracement
+                            key={idx}
+                            ref={this.saveNodeType(idx)}
+                            index={idx}
+                            type={each.type}
+                            selected={each.selected}
+                            {...(idx === overrideIndex ? override : each)}
+                            hoverText={eachHoverText}
+                            appearance={eachAppearance}
+                            onDrag={this.handleDrag}
+                            onDragComplete={this.handleDragComplete}
+                            onDoubleClick={(e, moreProps) => this.handleDoubleClick(e, moreProps, idx)}
+                            onClickWhenHover={(e, moreProps) => this.handleClickWhenHover(e, moreProps, idx)}
+                            onClickOutside={(e, moreProps) => this.handleClickOutside(e, moreProps, idx)}
+                            onContextMenuWhenHover={(e, moreProps) => this.handleConextMenu(e, moreProps, idx)}
+                        />
+                    );
+                })}
+                {currentRetracement}
+                <MouseLocationIndicator
+                    enabled={enabled}
+                    snap={false}
+                    r={currentPositionRadius}
+                    stroke={currentPositionStroke}
+                    opacity={currentPositionOpacity}
+                    strokeWidth={currentPositionStrokeWidth}
+                    onMouseDown={this.handleStart}
+                    onClick={this.handleEnd}
+                    onMouseMove={(e, xyValues) => this.handleDrawRetracement(e, xyValues)}
+                />
+            </g>
+        );
+    }
+
+    private readonly handleDoubleClick = (_: React.MouseEvent, moreProps: any, idx: any) => {
+        if (this.props.onDoubleClick) {
+            this.props.onDoubleClick(_, moreProps, idx);
+        }
+    };
+    private readonly handleClickWhenHover = (_: React.MouseEvent, moreProps: any, idx: any) => {
+        if (this.props.onClickWhenHover) {
+            this.props.onClickWhenHover(_, moreProps, idx);
+        }
+    };
+    private readonly handleClickOutside = (_: React.MouseEvent, moreProps: any, idx: any) => {
+        if (this.props.onClickOutside) {
+            this.props.onClickOutside(_, moreProps, idx);
+        }
+    };
+    private readonly handleConextMenu = (_: React.MouseEvent, moreProps: any, idx: any) => {
+        if (this.props.onConextMenu) {
+            _.stopPropagation();
+            _.preventDefault();
+            this.props.onConextMenu(_, moreProps, idx);
+        }
+    };
+
+    private readonly handleDrawRetracement = (_: React.MouseEvent, xyValue: any) => {
+        const { current } = this.state;
+        if (isDefined(current) && isDefined(current.x1)) {
+            this.mouseMoved = true;
+            this.setState({
+                current: {
+                    ...current,
+                    x2: xyValue[0],
+                    y2: xyValue[1],
+                },
+            });
+        }
+    };
+
+    private readonly handleEdge1Drag = (_: React.MouseEvent, echo: any, newXYValue: any, origXYValue: any) => {
+        const { retracements } = this.props;
+        const { index } = echo;
+
+        const dx = origXYValue.x1Value - newXYValue.x1Value;
+
+        this.setState({
+            override: {
+                index,
+                x1: retracements[index].x1 - dx,
+                y1: retracements[index].y1,
+                x2: retracements[index].x2,
+                y2: retracements[index].y2,
+            },
+        });
+    };
+
+    private readonly handleDrag = (_: React.MouseEvent, index: any, xy: any) => {
+        this.setState({
+            override: {
+                index,
+                ...xy,
+            },
+        });
+    };
+
+    private readonly handleEdge2Drag = (_: React.MouseEvent, echo: any, newXYValue: any, origXYValue: any) => {
+        const { retracements } = this.props;
+        const { index } = echo;
+
+        const dx = origXYValue.x2Value - newXYValue.x2Value;
+
+        this.setState({
+            override: {
+                index,
+                x1: retracements[index].x1,
+                y1: retracements[index].y1,
+                x2: retracements[index].x2 - dx,
+                y2: retracements[index].y2,
+            },
+        });
+    };
+
+    private readonly handleDragComplete = (e: React.MouseEvent, moreProps: any) => {
+        const { retracements } = this.props;
+        const { override } = this.state;
+        if (isDefined(override)) {
+            const { index, ...rest } = override;
+
+            const newRetracements = retracements.map((each, idx) =>
+                idx === index ? { ...each, ...rest, selected: true } : each,
+            );
+            this.setState(
+                {
+                    override: null,
+                },
+                () => {
+                    const { onComplete } = this.props;
+                    if (onComplete !== undefined) {
+                        onComplete(e, newRetracements, moreProps);
+                    }
+                },
+            );
+        }
+    };
+
+    private readonly handleStart = (e: React.MouseEvent, xyValue: any, moreProps: any) => {
+        const { current } = this.state;
+        if (isNotDefined(current) || isNotDefined(current.x1)) {
+            this.mouseMoved = false;
+            this.setState(
+                {
+                    current: {
+                        x1: xyValue[0],
+                        y1: xyValue[1],
+                        x2: null,
+                        y2: null,
+                    },
+                },
+                () => {
+                    const { onStart } = this.props;
+                    if (onStart !== undefined) {
+                        onStart(moreProps);
+                    }
+                },
+            );
+        }
+    };
+
+    private readonly handleEnd = (e: React.MouseEvent, xyValue: any, moreProps: any) => {
+        const { retracements, appearance, type } = this.props;
+        const { current } = this.state;
+
+        if (this.mouseMoved && isDefined(current) && isDefined(current.x1)) {
+            const newRetracements = retracements.concat({
+                ...current,
+                x2: xyValue[0],
+                y2: xyValue[1],
+                selected: true,
+                appearance,
+                type,
+            });
+
+            this.setState(
+                {
+                    current: null,
+                },
+                () => {
+                    const { onComplete } = this.props;
+                    if (onComplete !== undefined) {
+                        onComplete(e, newRetracements, moreProps);
+                    }
+                },
+            );
+        }
+    };
+}