@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
114 lines (113 loc) • 5.42 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 util_1 = require("@jbrowse/core/util");
const mobx_react_1 = require("mobx-react");
const mui_1 = require("tss-react/mui");
const OverviewRubberbandHoverTooltip_1 = __importDefault(require("./OverviewRubberbandHoverTooltip"));
const RubberbandSpan_1 = __importDefault(require("./RubberbandSpan"));
const util_2 = require("./util");
const useStyles = (0, mui_1.makeStyles)()({
rubberbandControl: {
cursor: 'crosshair',
width: '100%',
minHeight: 8,
},
rel: {
position: 'relative',
},
});
const OverviewRubberband = (0, mobx_react_1.observer)(function OverviewRubberband({ model, overview, ControlComponent = (0, jsx_runtime_1.jsx)("div", {}), }) {
const { cytobandOffset } = model;
const [startX, setStartX] = (0, react_1.useState)();
const [currentX, setCurrentX] = (0, react_1.useState)();
const [guideX, setGuideX] = (0, react_1.useState)();
const controlsRef = (0, react_1.useRef)(null);
const { classes } = useStyles();
const mouseDragging = startX !== undefined;
(0, react_1.useEffect)(() => {
function globalMouseMove(event) {
const ref = controlsRef.current;
if (ref && mouseDragging) {
setCurrentX((0, util_2.getRelativeX)(event, ref));
}
}
function globalMouseUp() {
if (startX !== undefined && currentX !== undefined) {
if (Math.abs(currentX - startX) > 3) {
const left = Math.min(startX, currentX);
const right = Math.max(startX, currentX);
model.moveTo(overview.pxToBp(left - cytobandOffset), overview.pxToBp(right - cytobandOffset));
}
}
if (startX !== undefined && currentX === undefined) {
const click = overview.pxToBp(startX - cytobandOffset);
if (!click.refName) {
(0, util_1.getSession)(model).notify('unknown position clicked');
console.error('unknown position clicked', click);
}
else {
model.centerAt(Math.round(click.coord), click.refName, click.index);
}
}
setStartX(undefined);
setCurrentX(undefined);
if (startX !== undefined) {
setGuideX(undefined);
}
}
function globalKeyDown(event) {
if (event.key === 'Escape') {
setStartX(undefined);
setCurrentX(undefined);
}
}
if (mouseDragging) {
window.addEventListener('mousemove', globalMouseMove, true);
window.addEventListener('mouseup', globalMouseUp, true);
window.addEventListener('keydown', globalKeyDown, true);
return () => {
window.removeEventListener('mousemove', globalMouseMove, true);
window.removeEventListener('mouseup', globalMouseUp, true);
window.removeEventListener('keydown', globalKeyDown, true);
};
}
return () => { };
}, [mouseDragging, currentX, startX, model, overview, cytobandOffset]);
function mouseDown(event) {
event.preventDefault();
event.stopPropagation();
setStartX((0, util_2.getRelativeX)(event, controlsRef.current));
}
function mouseMove(event) {
setGuideX((0, util_2.getRelativeX)(event, controlsRef.current));
}
function mouseOut() {
setGuideX(undefined);
}
if (startX === undefined) {
return ((0, jsx_runtime_1.jsxs)("div", { className: classes.rel, children: [guideX !== undefined ? ((0, jsx_runtime_1.jsx)(OverviewRubberbandHoverTooltip_1.default, { model: model, open: !mouseDragging, overview: overview, guideX: guideX })) : null, (0, jsx_runtime_1.jsx)("div", { className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove, children: ControlComponent })] }));
}
let left = startX || 0;
let width = 0;
if (currentX !== undefined) {
left = Math.min(currentX, startX);
width = currentX - startX;
}
let leftBpOffset;
let rightBpOffset;
if (startX) {
leftBpOffset = overview.pxToBp(startX - cytobandOffset);
rightBpOffset = overview.pxToBp(startX + width - cytobandOffset);
if (currentX !== undefined && currentX < startX) {
;
[leftBpOffset, rightBpOffset] = [rightBpOffset, leftBpOffset];
}
}
return ((0, jsx_runtime_1.jsxs)("div", { className: classes.rel, children: [leftBpOffset && rightBpOffset ? ((0, jsx_runtime_1.jsx)(RubberbandSpan_1.default, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, width: Math.abs(width), left: left })) : null, (0, jsx_runtime_1.jsx)("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove, children: ControlComponent })] }));
});
exports.default = OverviewRubberband;