Merge pull request #1956 from automatisch/AUT-1007

feat: limit vertical scroll to a reasonable boundary

packages/web/src/components/EditorNew/EditorNew.jsx

@@ -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}

packages/web/src/components/EditorNew/useScrollBoundaries.js

@@ -1,13 +1,33 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
-import { useViewport, useReactFlow } from 'reactflow';
+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(() => {
+  useEffect(
+    function updateViewportPosition() {
       if (y > 0) {
         setViewport({ x, y: 0, zoom });
+      } else if (typeof maxYScroll === 'number' && y < maxYScroll) {
+        setViewport({ x, y: maxYScroll, zoom });
       }
-  }, [y]);
+    },
+    [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],
+  );
 };