@jbrowse/core/ui/ResizeHandle.js

JBrowse 2 core libraries used by plugins

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const mui_1 = require("tss-react/mui");
const useStyles = (0, mui_1.makeStyles)()({
    horizontalHandle: {
        cursor: 'row-resize',
        width: '100%',
    },
    verticalHandle: {
        cursor: 'col-resize',
        height: '100%',
    },
    flexbox_verticalHandle: {
        cursor: 'col-resize',
        alignSelf: 'stretch',
    },
    flexbox_horizontalHandle: {
        cursor: 'row-resize',
        alignSelf: 'stretch',
    },
});
function ResizeHandle({ onDrag, vertical = false, flexbox = false, className: originalClassName, onMouseDown, ...props }) {
    const [mouseDragging, setMouseDragging] = (0, react_1.useState)(false);
    const initialPosition = (0, react_1.useRef)(0);
    const prevPos = (0, react_1.useRef)(0);
    const { classes, cx } = useStyles();
    (0, react_1.useEffect)(() => {
        function mouseMove(event) {
            event.preventDefault();
            const pos = vertical ? event.clientX : event.clientY;
            const totalDistance = initialPosition.current - pos;
            const lastFrameDistance = pos - prevPos.current;
            prevPos.current = pos;
            onDrag(lastFrameDistance, totalDistance);
        }
        function mouseUp() {
            setMouseDragging(false);
        }
        if (mouseDragging) {
            window.addEventListener('mousemove', mouseMove, true);
            window.addEventListener('mouseup', mouseUp, true);
            return () => {
                window.removeEventListener('mousemove', mouseMove, true);
                window.removeEventListener('mouseup', mouseUp, true);
            };
        }
        return () => { };
    }, [mouseDragging, onDrag, vertical]);
    let className;
    if (flexbox) {
        className = vertical
            ? classes.flexbox_verticalHandle
            : classes.flexbox_horizontalHandle;
    }
    else if (vertical) {
        className = classes.verticalHandle;
    }
    else {
        className = classes.horizontalHandle;
    }
    return ((0, jsx_runtime_1.jsx)("div", { "data-resizer": "true", onMouseDown: event => {
            event.preventDefault();
            const pos = vertical ? event.clientX : event.clientY;
            initialPosition.current = pos;
            prevPos.current = pos;
            setMouseDragging(true);
            onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
        }, className: cx(className, originalClassName), ...props }));
}
exports.default = ResizeHandle;