@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
36 lines (35 loc) • 2.46 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const ui_1 = require("@jbrowse/core/ui");
const mobx_react_1 = require("mobx-react");
const mui_1 = require("tss-react/mui");
const RubberbandSpan_1 = __importDefault(require("./RubberbandSpan"));
const VerticalGuide_1 = __importDefault(require("./VerticalGuide"));
const useRangeSelect_1 = require("./useRangeSelect");
const useStyles = (0, mui_1.makeStyles)()({
rubberbandControl: {
cursor: 'crosshair',
width: '100%',
minHeight: 8,
zIndex: 825,
},
});
const Rubberband = (0, mobx_react_1.observer)(function ({ model, ControlComponent = (0, jsx_runtime_1.jsx)("div", {}), }) {
const ref = (0, react_1.useRef)(null);
const { classes } = useStyles();
const { stickyViewHeaders, rubberbandTop } = model;
const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown, mouseOut, } = (0, useRangeSelect_1.useRangeSelect)(ref, model);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [guideX !== undefined ? ((0, jsx_runtime_1.jsx)(VerticalGuide_1.default, { model: model, coordX: guideX })) : rubberbandOn ? ((0, jsx_runtime_1.jsx)(RubberbandSpan_1.default, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left, top: rubberbandTop, sticky: stickyViewHeaders })) : null, anchorPosition ? ((0, jsx_runtime_1.jsx)(ui_1.Menu, { anchorReference: "anchorPosition", anchorPosition: {
left: anchorPosition.clientX,
top: anchorPosition.clientY,
}, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null, (0, jsx_runtime_1.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 })] }));
});
exports.default = Rubberband;