@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
132 lines (131 loc) • 4.33 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useRangeSelect = useRangeSelect;
const react_1 = require("react");
const util_1 = require("./util");
function useRangeSelect(ref, model, shiftOnly) {
const [startX, setStartX] = (0, react_1.useState)();
const [currentX, setCurrentX] = (0, react_1.useState)();
const [anchorPosition, setAnchorPosition] = (0, react_1.useState)();
const [guideX, setGuideX] = (0, react_1.useState)();
const mouseDragging = startX !== undefined && anchorPosition === undefined;
(0, react_1.useEffect)(() => {
function computeOffsets(offsetX) {
if (startX === undefined) {
return;
}
const leftPx = Math.min(startX, offsetX);
const rightPx = Math.max(startX, offsetX);
return {
leftOffset: model.pxToBp(leftPx),
rightOffset: model.pxToBp(rightPx),
};
}
function globalMouseMove(event) {
if (ref.current && mouseDragging) {
const relativeX = (0, util_1.getRelativeX)(event, ref.current);
setCurrentX(relativeX);
}
}
function globalMouseUp(event) {
if (startX !== undefined && ref.current) {
const { clientX, clientY } = event;
const offsetX = (0, util_1.getRelativeX)(event, ref.current);
setAnchorPosition({
offsetX,
clientX,
clientY,
});
const args = computeOffsets(offsetX);
if (args) {
model.setOffsets(args.leftOffset, args.rightOffset);
}
setGuideX(undefined);
}
}
if (mouseDragging) {
window.addEventListener('mousemove', globalMouseMove);
window.addEventListener('mouseup', globalMouseUp);
return () => {
window.removeEventListener('mousemove', globalMouseMove);
window.removeEventListener('mouseup', globalMouseUp);
};
}
return () => { };
}, [startX, mouseDragging, model, ref]);
(0, react_1.useEffect)(() => {
if (!mouseDragging &&
currentX !== undefined &&
startX !== undefined &&
Math.abs(currentX - startX) <= 3) {
handleClose();
}
}, [mouseDragging, currentX, startX]);
function mouseDown(event) {
if (shiftOnly && !event.shiftKey) {
return;
}
event.preventDefault();
event.stopPropagation();
const relativeX = (0, util_1.getRelativeX)(event, ref.current);
setStartX(relativeX);
setCurrentX(relativeX);
}
function mouseMove(event) {
if (shiftOnly) {
if (event.shiftKey) {
setGuideX((0, util_1.getRelativeX)(event, ref.current));
}
else {
setGuideX(undefined);
}
}
else {
setGuideX((0, util_1.getRelativeX)(event, ref.current));
}
}
function mouseOut() {
setGuideX(undefined);
}
function handleClose() {
setAnchorPosition(undefined);
setStartX(undefined);
setCurrentX(undefined);
}
function handleMenuItemClick(_, callback) {
callback();
handleClose();
}
const open = Boolean(anchorPosition);
if (startX === undefined) {
return {
open,
guideX,
mouseDown,
mouseMove,
mouseOut,
handleMenuItemClick,
};
}
const right = anchorPosition ? anchorPosition.offsetX : currentX || 0;
const left = Math.min(right, startX);
const width = Math.abs(right - startX);
const leftBpOffset = model.pxToBp(left);
const rightBpOffset = model.pxToBp(left + width);
const numOfBpSelected = Math.ceil(width * model.bpPerPx);
return {
open,
rubberbandOn: true,
mouseDown,
mouseMove,
mouseOut,
handleClose,
handleMenuItemClick,
leftBpOffset,
rightBpOffset,
anchorPosition,
numOfBpSelected,
width,
left,
};
}