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

src/pages/VisProgPage/VisProg.tsx

@@ -7,7 +7,7 @@ import {
   MarkerType,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import {useEffect, useState} from "react";
+import {type CSSProperties, useEffect, useState, useState} from "react";
 import {useShallow} from 'zustand/react/shallow';
 import orderPhaseNodeArray from "../../utils/orderPhaseNodes.ts";
 import useProgramStore from "../../utils/programStore.ts";
@@ -80,7 +80,7 @@ const VisProgUI = () => {
     endBatchAction,
     scrollable
   } = useFlowStore(useShallow(selector)); // instructs the editor to use the corresponding functions from the FlowStore
-
+  const [zoom, setZoom] = useState(1);
   // adds ctrl+z and ctrl+y support to respectively undo and redo actions
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
@@ -92,7 +92,7 @@ const VisProgUI = () => {
   });
 
   return (
-    <div className={`${styles.innerEditorContainer} round-lg border-lg`}>
+    <div className={`${styles.innerEditorContainer} round-lg border-lg`} style={({'--flow-zoom': zoom} as CSSProperties)}>
       <ReactFlow
         nodes={nodes}
         edges={edges}
@@ -108,6 +108,7 @@ const VisProgUI = () => {
         onNodeDragStart={beginBatchAction}
         onNodeDragStop={endBatchAction}
         preventScrolling={scrollable}
+        onMove={(_, viewport) => setZoom(viewport.zoom)}
         snapToGrid
         fitView
         proOptions={{hideAttribution: true}}