@tradingaction/core 2.0.0

package/src/EventCapture.tsx

@@ -0,0 +1,709 @@
+import { ScaleContinuousNumeric, ScaleTime } from "d3-scale";
+import { pointer, pointers, select } from "d3-selection";
+import * as React from "react";
+
+import {
+    d3Window,
+    getTouchProps,
+    MOUSEENTER,
+    MOUSELEAVE,
+    MOUSEMOVE,
+    mousePosition,
+    MOUSEUP,
+    TOUCHEND,
+    TOUCHMOVE,
+    touchPosition,
+} from "./utils";
+import { ChartConfig, getCurrentCharts } from "./utils/ChartDataUtil";
+
+interface EventCaptureProps {
+    readonly mouseMove: boolean;
+    readonly zoom: boolean;
+    readonly pan: boolean;
+    readonly panSpeedMultiplier: number;
+    readonly focus: boolean;
+    readonly useCrossHairStyleCursor?: boolean;
+    readonly width: number;
+    readonly height: number;
+    readonly chartConfig: ChartConfig[];
+    readonly xAccessor: any; // func
+    readonly xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
+    readonly disableInteraction: boolean;
+    readonly getAllPanConditions: () => { panEnabled: boolean; draggable: boolean }[];
+    readonly onClick?: (mouseXY: number[], event: React.MouseEvent) => void;
+    readonly onContextMenu?: (mouseXY: number[], event: React.MouseEvent) => void;
+    readonly onDoubleClick?: (mouseXY: number[], event: React.MouseEvent) => void;
+    readonly onDragStart?: (details: { startPos: number[] }, event: React.MouseEvent) => void;
+    readonly onDrag?: (
+        details: { startPos: [number, number]; mouseXY: [number, number] },
+        event: React.MouseEvent,
+    ) => void;
+    readonly onDragComplete?: (details: { mouseXY: number[] }, event: React.MouseEvent) => void;
+    readonly onMouseDown?: (mouseXY: [number, number], currentCharts: string[], event: React.MouseEvent) => void;
+    readonly onMouseMove?: (
+        touchXY: [number, number],
+        eventType: string,
+        event: React.MouseEvent | React.TouchEvent,
+    ) => void;
+    readonly onMouseEnter?: (event: React.MouseEvent) => void;
+    readonly onMouseLeave?: (event: React.MouseEvent) => void;
+    readonly onPinchZoom?: (
+        initialPinch: {
+            readonly xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
+            readonly touch1Pos: [number, number];
+            readonly touch2Pos: [number, number];
+            readonly range: number[];
+        },
+        currentPinch: {
+            readonly xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
+            readonly touch1Pos: [number, number];
+            readonly touch2Pos: [number, number];
+        },
+        e: React.TouchEvent,
+    ) => void;
+    readonly onPinchZoomEnd?: (
+        initialPinch: {
+            readonly xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
+            readonly touch1Pos: [number, number];
+            readonly touch2Pos: [number, number];
+            readonly range: number[];
+        },
+        e: React.TouchEvent,
+    ) => void;
+    readonly onPan?: (
+        mouseXY: [number, number],
+        panStartXScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>,
+        panOrigin: { dx: number; dy: number },
+        chartsToPan: string[],
+        e: React.MouseEvent,
+    ) => void;
+    readonly onPanEnd?: (
+        mouseXY: [number, number],
+        panStartXScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>,
+        panOrigin: { dx: number; dy: number },
+        chartsToPan: string[],
+        e: React.MouseEvent | React.TouchEvent,
+    ) => void;
+    readonly onZoom?: (zoomDir: 1 | -1, mouseXY: number[], event: React.WheelEvent) => void;
+}
+
+interface EventCaptureState {
+    cursorOverrideClass?: string;
+    dragInProgress?: boolean;
+    dragStartPosition?: [number, number];
+    panInProgress: boolean;
+    panStart?: {
+        panStartXScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
+        panOrigin: number[];
+        chartsToPan: string[];
+    };
+    pinchZoomStart?: {
+        xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
+        touch1Pos: [number, number];
+        touch2Pos: [number, number];
+        range: number[];
+        chartsToPan: string[];
+    };
+}
+
+export class EventCapture extends React.Component<EventCaptureProps, EventCaptureState> {
+    public static defaultProps = {
+        mouseMove: false,
+        zoom: false,
+        pan: false,
+        panSpeedMultiplier: 1,
+        focus: false,
+        disableInteraction: false,
+    };
+
+    private clicked?: boolean;
+    private dx?: number = 0;
+    private dy?: number = 0;
+    private dragHappened?: boolean;
+    private focus?: boolean;
+    private lastNewPos?: [number, number];
+    private mouseInside = false;
+    private mouseInteraction = true;
+    private panEndTimeout?: number;
+    private panHappened?: boolean;
+    private readonly ref = React.createRef<SVGRectElement>();
+
+    public constructor(props: EventCaptureProps) {
+        super(props);
+
+        this.focus = props.focus;
+        this.state = {
+            panInProgress: false,
+        };
+    }
+
+    public componentDidMount() {
+        const { disableInteraction } = this.props;
+
+        const { current } = this.ref;
+        if (current === null) {
+            return;
+        }
+
+        if (!disableInteraction) {
+            // @ts-ignore
+            select(current).on(MOUSEENTER, this.handleEnter).on(MOUSELEAVE, this.handleLeave);
+
+            // @ts-ignore
+            current.addEventListener("wheel", this.handleWheel, { passive: false });
+        }
+    }
+
+    public componentDidUpdate() {
+        this.componentDidMount();
+    }
+
+    public componentWillUnmount() {
+        const { disableInteraction } = this.props;
+
+        const { current } = this.ref;
+        if (current === null) {
+            return;
+        }
+
+        if (!disableInteraction) {
+            select(current).on(MOUSEENTER, null).on(MOUSELEAVE, null);
+            const win = d3Window(current);
+            select(win).on(MOUSEMOVE, null);
+
+            // @ts-ignore
+            current.removeEventListener("wheel", this.handleWheel, { passive: false });
+        }
+    }
+
+    public readonly handleEnter = (e: any) => {
+        const { onMouseEnter } = this.props;
+        if (onMouseEnter === undefined) {
+            return;
+        }
+
+        this.mouseInside = true;
+        if (!this.state.panInProgress && !this.state.dragInProgress) {
+            const win = d3Window(this.ref.current);
+            select(win).on(MOUSEMOVE, this.handleMouseMove);
+        }
+        onMouseEnter(e);
+    };
+
+    public handleLeave = (e: React.MouseEvent) => {
+        const { onMouseLeave } = this.props;
+        if (onMouseLeave === undefined) {
+            return;
+        }
+
+        this.mouseInside = false;
+        if (!this.state.panInProgress && !this.state.dragInProgress) {
+            const win = d3Window(this.ref.current);
+            select(win).on(MOUSEMOVE, null);
+        }
+        onMouseLeave(e);
+    };
+
+    public handleWheel = (e: React.WheelEvent) => {
+        const { pan, onPan, zoom, onZoom } = this.props;
+
+        if (!pan && !zoom) {
+            return;
+        }
+
+        const { panInProgress } = this.state;
+
+        const yZoom = Math.abs(e.deltaY) > Math.abs(e.deltaX) && Math.abs(e.deltaY) > 0;
+        const mouseXY = mousePosition(e);
+        e.preventDefault();
+
+        if (zoom && this.focus && yZoom && !panInProgress) {
+            const zoomDir = e.deltaY > 0 ? 1 : -1;
+
+            if (onZoom !== undefined) {
+                onZoom(zoomDir, mouseXY, e);
+            }
+        } else if (this.focus) {
+            if (this.shouldPan() && this.state.panStart !== undefined) {
+                // pan already in progress
+                const { panStartXScale, chartsToPan } = this.state.panStart;
+                this.lastNewPos = mouseXY;
+                this.panHappened = true;
+
+                if (this.dx === undefined) {
+                    this.dx = 0;
+                }
+                if (this.dy === undefined) {
+                    this.dy = 0;
+                }
+
+                this.dx -= e.deltaX;
+                this.dy += e.deltaY;
+                const dxdy = { dx: this.dx, dy: this.dy };
+
+                if (onPan !== undefined) {
+                    onPan(mouseXY, panStartXScale, dxdy, chartsToPan, e);
+                }
+            } else {
+                const { xScale, chartConfig } = this.props;
+                const currentCharts = getCurrentCharts(chartConfig, mouseXY);
+
+                this.dx = 0;
+                this.dy = 0;
+                this.setState({
+                    panInProgress: true,
+                    panStart: {
+                        panStartXScale: xScale,
+                        panOrigin: mouseXY,
+                        chartsToPan: currentCharts,
+                    },
+                });
+            }
+            this.queuePanEnd(e);
+        }
+    };
+
+    public queuePanEnd(e: any) {
+        if (this.panEndTimeout !== undefined) {
+            window.clearTimeout(this.panEndTimeout);
+        }
+        this.panEndTimeout = window.setTimeout(() => {
+            this.handlePanEnd(e);
+        }, 100);
+    }
+
+    public handleMouseMove = (e: any) => {
+        const { onMouseMove, mouseMove } = this.props;
+        if (onMouseMove === undefined) {
+            return;
+        }
+
+        if (this.mouseInteraction && mouseMove && !this.state.panInProgress) {
+            const newPos = pointer(e, this.ref.current);
+
+            onMouseMove(newPos, "mouse", e);
+        }
+    };
+
+    public handleClick = (e: React.MouseEvent) => {
+        const mouseXY = mousePosition(e);
+        const { onClick, onDoubleClick } = this.props;
+
+        if (!this.panHappened && !this.dragHappened) {
+            if (this.clicked && onDoubleClick !== undefined) {
+                onDoubleClick(mouseXY, e);
+                this.clicked = false;
+            } else if (onClick !== undefined) {
+                onClick(mouseXY, e);
+                this.clicked = true;
+                setTimeout(() => {
+                    if (this.clicked) {
+                        this.clicked = false;
+                    }
+                }, 400);
+            }
+        }
+    };
+
+    public handleRightClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+        const { onContextMenu, onPanEnd } = this.props;
+
+        const mouseXY = mousePosition(e, this.ref.current!.getBoundingClientRect());
+
+        if (this.state.panStart !== undefined) {
+            const {
+                panStartXScale,
+                panOrigin: [dx, dy],
+                chartsToPan,
+            } = this.state.panStart;
+
+            if (this.panHappened && onPanEnd !== undefined) {
+                onPanEnd(mouseXY, panStartXScale, { dx, dy }, chartsToPan, e);
+            }
+            const win = d3Window(this.ref.current);
+            select(win).on(MOUSEMOVE, null).on(MOUSEUP, null);
+
+            this.setState({
+                panInProgress: false,
+                panStart: undefined,
+            });
+        }
+
+        if (onContextMenu !== undefined) {
+            onContextMenu(mouseXY, e);
+        }
+    };
+
+    public handleDrag = (e: any) => {
+        const { onDrag } = this.props;
+        if (onDrag === undefined) {
+            return;
+        }
+
+        this.dragHappened = true;
+
+        const { dragStartPosition } = this.state;
+        if (dragStartPosition === undefined) {
+            return;
+        }
+
+        const mouseXY = pointer(e, this.ref.current);
+
+        onDrag(
+            {
+                startPos: dragStartPosition,
+                mouseXY,
+            },
+            e,
+        );
+    };
+
+    public cancelDrag() {
+        const win = d3Window(this.ref.current);
+        select(win)
+            // @ts-ignore
+            .on(MOUSEMOVE, this.mouseInside ? this.handleMouseMove : null)
+            .on(MOUSEUP, null);
+
+        this.setState({
+            dragInProgress: false,
+        });
+        this.mouseInteraction = true;
+    }
+
+    public handleDragEnd = (e: any) => {
+        const mouseXY = pointer(e, this.ref.current);
+
+        const win = d3Window(this.ref.current);
+        select(win)
+            // @ts-ignore
+            .on(MOUSEMOVE, this.mouseInside ? this.handleMouseMove : null)
+            .on(MOUSEUP, null);
+
+        if (this.dragHappened) {
+            const { onDragComplete } = this.props;
+            if (onDragComplete !== undefined) {
+                onDragComplete({ mouseXY }, e);
+            }
+        }
+
+        this.setState({
+            dragInProgress: false,
+        });
+        this.mouseInteraction = true;
+    };
+
+    public canPan = () => {
+        const { getAllPanConditions } = this.props;
+        const { pan: initialPanEnabled } = this.props;
+
+        const { panEnabled, draggable: somethingSelected } = getAllPanConditions().reduce(
+            (returnObj, a) => {
+                return {
+                    draggable: returnObj.draggable || a.draggable,
+                    panEnabled: returnObj.panEnabled && a.panEnabled,
+                };
+            },
+            {
+                draggable: false,
+                panEnabled: initialPanEnabled,
+            },
+        );
+
+        return {
+            panEnabled,
+            somethingSelected,
+        };
+    };
+
+    public handleMouseDown = (e: React.MouseEvent) => {
+        if (e.button !== 0) {
+            return;
+        }
+        const { xScale, chartConfig, onMouseDown } = this.props;
+
+        this.panHappened = false;
+        this.dragHappened = false;
+        this.focus = true;
+
+        if (!this.state.panInProgress && this.mouseInteraction) {
+            const mouseXY = mousePosition(e);
+            const currentCharts = getCurrentCharts(chartConfig, mouseXY);
+            const { panEnabled, somethingSelected } = this.canPan();
+            const pan = panEnabled && !somethingSelected;
+
+            if (pan) {
+                this.setState({
+                    panInProgress: pan,
+                    panStart: {
+                        panStartXScale: xScale,
+                        panOrigin: mouseXY,
+                        chartsToPan: currentCharts,
+                    },
+                });
+
+                const win = d3Window(this.ref.current);
+                select(win).on(MOUSEMOVE, this.handlePan).on(MOUSEUP, this.handlePanEnd);
+            } else if (somethingSelected) {
+                this.setState({
+                    panInProgress: false,
+                    dragInProgress: true,
+                    panStart: undefined,
+                    dragStartPosition: mouseXY,
+                });
+
+                const { onDragStart } = this.props;
+
+                if (onDragStart !== undefined) {
+                    onDragStart({ startPos: mouseXY }, e);
+                }
+
+                const win = d3Window(this.ref.current);
+                select(win).on(MOUSEMOVE, this.handleDrag).on(MOUSEUP, this.handleDragEnd);
+            }
+
+            if (onMouseDown !== undefined) {
+                onMouseDown(mouseXY, currentCharts, e);
+            }
+        }
+        e.preventDefault();
+    };
+
+    public shouldPan = () => {
+        const { pan: panEnabled, onPan } = this.props;
+        return panEnabled && onPan && this.state.panStart !== undefined;
+    };
+
+    public handlePan = (e: any) => {
+        if (this.shouldPan() && this.state.panStart !== undefined) {
+            this.panHappened = true;
+
+            const { panStartXScale, panOrigin, chartsToPan } = this.state.panStart;
+
+            let dx;
+            let dy;
+            let mouseXY;
+            if (this.mouseInteraction) {
+                mouseXY = pointer(e, this.ref.current);
+                this.lastNewPos = mouseXY;
+                dx = mouseXY[0] - panOrigin[0];
+                dy = mouseXY[1] - panOrigin[1];
+            } else {
+                mouseXY = pointers(e, this.ref.current)[0];
+                this.lastNewPos = mouseXY;
+                dx = panOrigin[0] - mouseXY[0];
+                dy = panOrigin[1] - mouseXY[1];
+            }
+
+            this.dx = dx;
+            this.dy = dy;
+
+            const { onPan } = this.props;
+            if (onPan !== undefined) {
+                onPan(mouseXY, panStartXScale, { dx, dy }, chartsToPan, e);
+            }
+        }
+    };
+
+    public handlePanEnd = (e: any) => {
+        const { pan: panEnabled, onPanEnd } = this.props;
+
+        if (this.state.panStart !== undefined) {
+            const { panStartXScale, chartsToPan } = this.state.panStart;
+
+            const win = d3Window(this.ref.current);
+            select(win)
+                // @ts-ignore
+                .on(MOUSEMOVE, this.mouseInside ? this.handleMouseMove : null)
+                .on(MOUSEUP, null)
+                .on(TOUCHMOVE, null)
+                .on(TOUCHEND, null);
+
+            if (this.panHappened && panEnabled && onPanEnd) {
+                const { dx = 0, dy = 0 } = this;
+
+                delete this.dx;
+                delete this.dy;
+                if (this.lastNewPos !== undefined) {
+                    onPanEnd(this.lastNewPos, panStartXScale, { dx, dy }, chartsToPan, e);
+                }
+            }
+
+            this.setState({
+                panInProgress: false,
+                panStart: undefined,
+            });
+        }
+    };
+
+    public handleTouchMove = (e: React.TouchEvent) => {
+        const { onMouseMove } = this.props;
+        if (onMouseMove === undefined) {
+            return;
+        }
+
+        const touch = getTouchProps(e.touches[0]);
+        const touchXY = touchPosition(touch, e);
+        onMouseMove(touchXY, "touch", e);
+    };
+
+    public handleTouchStart = (e: React.TouchEvent) => {
+        this.mouseInteraction = false;
+
+        const { pan: panEnabled, chartConfig, onMouseMove, xScale, onPanEnd } = this.props;
+
+        if (e.touches.length === 1) {
+            this.panHappened = false;
+            const touchXY = touchPosition(getTouchProps(e.touches[0]), e);
+            if (onMouseMove !== undefined) {
+                onMouseMove(touchXY, "touch", e);
+            }
+
+            if (panEnabled) {
+                const currentCharts = getCurrentCharts(chartConfig, touchXY);
+
+                this.setState({
+                    panInProgress: true,
+                    panStart: {
+                        panStartXScale: xScale,
+                        panOrigin: touchXY,
+                        chartsToPan: currentCharts,
+                    },
+                });
+
+                const win = d3Window(this.ref.current);
+                select(win).on(TOUCHMOVE, this.handlePan, false).on(TOUCHEND, this.handlePanEnd, false);
+            }
+        } else if (e.touches.length === 2) {
+            // pinch zoom begin
+            // do nothing pinch zoom is handled in handleTouchMove
+            const { panInProgress, panStart } = this.state;
+
+            if (panInProgress && panEnabled && onPanEnd && panStart !== undefined) {
+                const {
+                    panStartXScale,
+                    panOrigin: [dx, dy],
+                    chartsToPan,
+                } = panStart;
+
+                const win = d3Window(this.ref.current);
+                select(win)
+                    // @ts-ignore
+                    .on(MOUSEMOVE, this.mouseInside ? this.handleMouseMove : null)
+                    .on(MOUSEUP, null)
+                    .on(TOUCHMOVE, this.handlePinchZoom, false)
+                    .on(TOUCHEND, this.handlePinchZoomEnd, false);
+
+                const touch1Pos = touchPosition(getTouchProps(e.touches[0]), e);
+                const touch2Pos = touchPosition(getTouchProps(e.touches[1]), e);
+
+                if (this.panHappened && panEnabled && onPanEnd && this.lastNewPos !== undefined) {
+                    onPanEnd(this.lastNewPos, panStartXScale, { dx, dy }, chartsToPan, e);
+                }
+
+                this.setState({
+                    panInProgress: false,
+                    pinchZoomStart: {
+                        xScale,
+                        touch1Pos,
+                        touch2Pos,
+                        range: xScale.range(),
+                        chartsToPan,
+                    },
+                });
+            }
+        }
+    };
+
+    public handlePinchZoom = (e: any) => {
+        const { pinchZoomStart } = this.state;
+        if (pinchZoomStart === undefined) {
+            return;
+        }
+
+        const { xScale, zoom: zoomEnabled, onPinchZoom } = this.props;
+        if (!zoomEnabled || onPinchZoom === undefined) {
+            return;
+        }
+
+        const [touch1Pos, touch2Pos] = pointers(this.ref.current!);
+
+        const { chartsToPan, ...initialPinch } = pinchZoomStart;
+
+        onPinchZoom(
+            initialPinch,
+            {
+                touch1Pos,
+                touch2Pos,
+                xScale,
+            },
+            e,
+        );
+    };
+
+    public handlePinchZoomEnd = (e: any) => {
+        const win = d3Window(this.ref.current);
+        select(win).on(TOUCHMOVE, null).on(TOUCHEND, null);
+
+        const { pinchZoomStart } = this.state;
+        if (pinchZoomStart === undefined) {
+            return;
+        }
+
+        const { chartsToPan, ...initialPinch } = pinchZoomStart;
+
+        const { zoom: zoomEnabled, onPinchZoomEnd } = this.props;
+        if (zoomEnabled && onPinchZoomEnd) {
+            onPinchZoomEnd(initialPinch, e);
+        }
+
+        this.setState({
+            pinchZoomStart: undefined,
+        });
+    };
+
+    public setCursorClass = (cursorOverrideClass: string | undefined | null) => {
+        if (cursorOverrideClass !== this.state.cursorOverrideClass) {
+            this.setState({
+                cursorOverrideClass: cursorOverrideClass === null ? undefined : cursorOverrideClass,
+            });
+        }
+    };
+
+    public render() {
+        const { height, width, disableInteraction, useCrossHairStyleCursor } = this.props;
+
+        const className = disableInteraction
+            ? undefined
+            : this.state.cursorOverrideClass !== undefined
+            ? this.state.cursorOverrideClass
+            : !useCrossHairStyleCursor
+            ? undefined
+            : this.state.panInProgress
+            ? "react-financial-charts-grabbing-cursor"
+            : "react-financial-charts-crosshair-cursor";
+
+        const interactionProps = disableInteraction
+            ? undefined
+            : {
+                  onMouseDown: this.handleMouseDown,
+                  onClick: this.handleClick,
+                  onContextMenu: this.handleRightClick,
+                  onTouchStart: this.handleTouchStart,
+                  onTouchMove: this.handleTouchMove,
+              };
+
+        return (
+            <rect
+                ref={this.ref}
+                className={className}
+                width={width}
+                height={height}
+                style={{ opacity: 0 }}
+                {...interactionProps}
+            />
+        );
+    }
+}