34 lines
917 B
JavaScript
34 lines
917 B
JavaScript
import { useEffect, useState } from 'react';
|
|
import { useViewport, useReactFlow, useNodes } from 'reactflow';
|
|
|
|
const scrollYMargin = 100;
|
|
|
|
export const useScrollBoundaries = (containerHeight) => {
|
|
const { setViewport } = useReactFlow();
|
|
const { x, y, zoom } = useViewport();
|
|
const nodes = useNodes();
|
|
const [maxYScroll, setMaxYScroll] = useState(null);
|
|
|
|
useEffect(
|
|
function updateViewportPosition() {
|
|
if (y > 0) {
|
|
setViewport({ x, y: 0, zoom });
|
|
} else if (typeof maxYScroll === 'number' && y < maxYScroll) {
|
|
setViewport({ x, y: maxYScroll, zoom });
|
|
}
|
|
},
|
|
[y, maxYScroll],
|
|
);
|
|
|
|
useEffect(
|
|
function updateMaxYScroll() {
|
|
if (nodes?.length && containerHeight) {
|
|
const maxY =
|
|
containerHeight - nodes[nodes.length - 1].y - scrollYMargin;
|
|
setMaxYScroll(maxY >= 0 ? 0 : maxY);
|
|
}
|
|
},
|
|
[nodes, containerHeight],
|
|
);
|
|
};
|