@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
31 lines (30 loc) • 2.01 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef } from 'react';
import { Menu } from '@jbrowse/core/ui';
import { observer } from 'mobx-react';
import { makeStyles } from 'tss-react/mui';
import RubberbandSpan from './RubberbandSpan';
import VerticalGuide from './VerticalGuide';
import { useRangeSelect } from './useRangeSelect';
const useStyles = makeStyles()({
rubberbandControl: {
cursor: 'crosshair',
width: '100%',
minHeight: 8,
zIndex: 825,
},
});
const Rubberband = observer(function ({ model, ControlComponent = _jsx("div", {}), }) {
const ref = useRef(null);
const { classes } = useStyles();
const { stickyViewHeaders, rubberbandTop } = model;
const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown, mouseOut, } = useRangeSelect(ref, model);
return (_jsxs(_Fragment, { children: [guideX !== undefined ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberbandOn ? (_jsx(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left, top: rubberbandTop, sticky: stickyViewHeaders })) : null, anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
left: anchorPosition.clientX,
top: anchorPosition.clientY,
}, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null, _jsx("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, style: {
top: rubberbandTop,
position: stickyViewHeaders ? 'sticky' : undefined,
}, ref: ref, onMouseDown: mouseDown, onMouseMove: mouseMove, onMouseOut: mouseOut, children: ControlComponent })] }));
});
export default Rubberband;