@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
109 lines (108 loc) • 4.9 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import { getSession } from '@jbrowse/core/util';
import { observer } from 'mobx-react';
import { makeStyles } from 'tss-react/mui';
import OverviewRubberbandHoverTooltip from './OverviewRubberbandHoverTooltip';
import RubberbandSpan from './RubberbandSpan';
import { getRelativeX } from './util';
const useStyles = makeStyles()({
rubberbandControl: {
cursor: 'crosshair',
width: '100%',
minHeight: 8,
},
rel: {
position: 'relative',
},
});
const OverviewRubberband = observer(function OverviewRubberband({ model, overview, ControlComponent = _jsx("div", {}), }) {
const { cytobandOffset } = model;
const [startX, setStartX] = useState();
const [currentX, setCurrentX] = useState();
const [guideX, setGuideX] = useState();
const controlsRef = useRef(null);
const { classes } = useStyles();
const mouseDragging = startX !== undefined;
useEffect(() => {
function globalMouseMove(event) {
const ref = controlsRef.current;
if (ref && mouseDragging) {
setCurrentX(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) {
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(getRelativeX(event, controlsRef.current));
}
function mouseMove(event) {
setGuideX(getRelativeX(event, controlsRef.current));
}
function mouseOut() {
setGuideX(undefined);
}
if (startX === undefined) {
return (_jsxs("div", { className: classes.rel, children: [guideX !== undefined ? (_jsx(OverviewRubberbandHoverTooltip, { model: model, open: !mouseDragging, overview: overview, guideX: guideX })) : null, _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 (_jsxs("div", { className: classes.rel, children: [leftBpOffset && rightBpOffset ? (_jsx(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, width: Math.abs(width), left: left })) : null, _jsx("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove, children: ControlComponent })] }));
});
export default OverviewRubberband;