Merge remote-tracking branch 'origin/demo' into feat/monitoringpage-pim

src/pages/VisProgPage/VisProg.tsx

@@ -53,7 +53,8 @@ const selector = (state: FlowState) => ({
   undo: state.undo,
   redo: state.redo,
   beginBatchAction: state.beginBatchAction,
-  endBatchAction: state.endBatchAction
+  endBatchAction: state.endBatchAction,
+  scrollable: state.scrollable
 });
 
 // --| define ReactFlow editor |--
@@ -77,7 +78,8 @@ const VisProgUI = () => {
     undo,
     redo,
     beginBatchAction,
-    endBatchAction
+    endBatchAction,
+    scrollable
   } = useFlowStore(useShallow(selector)); // instructs the editor to use the corresponding functions from the FlowStore
 
   // adds ctrl+z and ctrl+y support to respectively undo and redo actions
@@ -106,6 +108,7 @@ const VisProgUI = () => {
         onConnect={onConnect}
         onNodeDragStart={beginBatchAction}
         onNodeDragStop={endBatchAction}
+        preventScrolling={scrollable}
         snapToGrid
         fitView
         proOptions={{hideAttribution: true}}