@react-financial-charts/interactive/lib/DrawingObjectSelector.js

Interactive features for react-financial-charts

import * as React from "react";
import { head, isDefined, mapObject, GenericComponent, getMouseCanvas } from "@react-financial-charts/core";
import { getMorePropsForChart, getSelected } from "./utils";
export class DrawingObjectSelector extends React.Component {
    constructor() {
        super(...arguments);
        this.getInteraction = (moreProps) => {
            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;
        };
        this.handleClick = (e, moreProps) => {
            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);
            }
        };
        this.handleDoubleClick = (e, moreProps) => {
            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);
                }
            }
        };
    }
    render() {
        return (React.createElement(GenericComponent, { canvasToDraw: getMouseCanvas, onMouseDown: this.handleClick, onDoubleClick: this.handleDoubleClick, drawOn: ["mousemove", "pan", "drag"] }));
    }
}
DrawingObjectSelector.defaultProps = {
    enabled: true,
};
//# sourceMappingURL=DrawingObjectSelector.js.map