@jbrowse/plugin-linear-genome-view
Version:
JBrowse 2 linear genome view
60 lines (59 loc) • 2.37 kB
JavaScript
import { useEffect, useRef } from 'react';
import { sum } from '@jbrowse/core/util';
export function useWheelScroll(ref, model) {
const delta = useRef(0);
const timeout = useRef(null);
const scheduled = useRef(false);
useEffect(() => {
let samples = [];
const curr = ref.current;
function onWheel(event) {
if (event.ctrlKey) {
event.preventDefault();
samples.push(event.deltaY);
const averageDeltaY = Math.abs(sum(samples)) / samples.length;
const normalizer = averageDeltaY < 6
? 25
: averageDeltaY > 30
? averageDeltaY > 150
? 500
: 150
: 75;
delta.current += event.deltaY / normalizer;
model.setScaleFactor(delta.current < 0 ? 1 - delta.current : 1 / (1 + delta.current));
if (timeout.current) {
clearTimeout(timeout.current);
}
timeout.current = setTimeout(() => {
model.setScaleFactor(1);
model.zoomTo(delta.current > 0
? model.bpPerPx * (1 + delta.current)
: model.bpPerPx / (1 - delta.current), event.clientX - ((curr === null || curr === void 0 ? void 0 : curr.getBoundingClientRect().left) || 0));
delta.current = 0;
samples = [];
}, 300);
}
else {
if (Math.abs(event.deltaX) > Math.abs(2 * event.deltaY)) {
event.preventDefault();
}
delta.current += event.deltaX;
if (!scheduled.current) {
scheduled.current = true;
window.requestAnimationFrame(() => {
model.horizontalScroll(delta.current);
delta.current = 0;
scheduled.current = false;
});
}
}
}
if (curr) {
curr.addEventListener('wheel', onWheel);
return () => {
curr.removeEventListener('wheel', onWheel);
};
}
return () => { };
}, [model, ref]);
}