Merge pull request #1956 from automatisch/AUT-1007

feat: limit vertical scroll to a reasonable boundary
This commit is contained in:
Ali BARIN
2024-07-11 15:34:04 +02:00
committed by GitHub
2 changed files with 49 additions and 11 deletions

View File

@@ -1,4 +1,4 @@
import { useEffect, useCallback, createContext, useRef } from 'react';
import { useEffect, useCallback, createContext, useRef, useState } from 'react';
import { useMutation } from '@apollo/client';
import { useQueryClient } from '@tanstack/react-query';
import { FlowPropType } from 'propTypes/propTypes';
@@ -45,11 +45,13 @@ const EditorNew = ({ flow }) => {
const [edges, setEdges, onEdgesChange] = useEdgesState(
generateInitialEdges(flow),
);
const [containerHeight, setContainerHeight] = useState(null);
useAutoLayout();
useScrollBoundaries();
useScrollBoundaries(containerHeight);
const createdStepIdRef = useRef(null);
const containerRef = useRef(null);
const openNextStep = useCallback(
(currentStepId) => {
@@ -229,6 +231,22 @@ const EditorNew = ({ flow }) => {
}
}, [flow.steps]);
useEffect(function updateContainerHeightOnResize() {
const updateHeight = () => {
if (containerRef.current) {
setContainerHeight(containerRef.current.clientHeight);
}
};
updateHeight();
window.addEventListener('resize', updateHeight);
return () => {
window.removeEventListener('resize', updateHeight);
};
}, []);
return (
<NodesContext.Provider
value={{
@@ -247,7 +265,7 @@ const EditorNew = ({ flow }) => {
flowActive: flow.active,
}}
>
<EditorWrapper direction="column">
<EditorWrapper direction="column" ref={containerRef}>
<ReactFlow
nodes={nodes}
edges={edges}

View File

@@ -1,13 +1,33 @@
import { useEffect } from 'react';
import { useViewport, useReactFlow } from 'reactflow';
import { useEffect, useState } from 'react';
import { useViewport, useReactFlow, useNodes } from 'reactflow';
export const useScrollBoundaries = () => {
const scrollYMargin = 100;
export const useScrollBoundaries = (containerHeight) => {
const { setViewport } = useReactFlow();
const { x, y, zoom } = useViewport();
const nodes = useNodes();
const [maxYScroll, setMaxYScroll] = useState(null);
useEffect(() => {
if (y > 0) {
setViewport({ x, y: 0, zoom });
}
}, [y]);
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],
);
};