src/pages/VisProgPage/VisProg.tsx

@@ -48,7 +48,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 |--
@@ -72,7 +73,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
@@ -101,6 +103,7 @@ const VisProgUI = () => {
         onConnect={onConnect}
         onNodeDragStart={beginBatchAction}
         onNodeDragStop={endBatchAction}
+        preventScrolling={scrollable}
         snapToGrid
         fitView
         proOptions={{hideAttribution: true}}

src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx

@@ -72,6 +72,15 @@ const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
   nodes: initialNodes,
   edges: initialEdges,
   edgeReconnectSuccessful: true,
+  scrollable: true,
+
+  /**
+   * handles changing the scrollable state of the editor,
+   * this is used to control if scrolling is captured by the editor
+   * or if it's available to other components within the reactFlowProvider
+   * @param {boolean} val - the desired state
+   */
+  setScrollable: (val) => set({scrollable: val}),
 
    /**
    * Handles changes to nodes triggered by ReactFlow.

src/pages/VisProgPage/visualProgrammingUI/VisProgTypes.tsx

@@ -23,6 +23,10 @@ export type FlowState = {
   nodes: Node[];
   edges: Edge[];
   edgeReconnectSuccessful: boolean;
+  scrollable: boolean;
+
+  /** Handler for managing scrollable state */
+  setScrollable: (value: boolean) => void;
 
   /** Handler for changes to nodes triggered by ReactFlow */
   onNodesChange: OnNodesChange;

src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.tsx

@@ -1,4 +1,5 @@
-import { useRef, useState } from "react";
+import {useRef, useState} from "react";
+import useFlowStore from "../VisProgStores.tsx";
 import styles from './PlanEditor.module.css';
 import { GetActionValue, type Action, type ActionTypes, type Plan } from "../components/Plan";
 import { defaultPlan } from "../components/Plan.default";
@@ -16,220 +17,225 @@ export default function PlanEditorDialog({
   onSave,
   description,
 }: PlanEditorDialogProps) {
-    // UseStates and references
-    const dialogRef = useRef<HTMLDialogElement | null>(null);
-    const [draftPlan, setDraftPlan] = useState<Plan | null>(null);
-    const [newActionType, setNewActionType] = useState<ActionTypes>("speech");
-    const [newActionValue, setNewActionValue] = useState("");
+  // UseStates and references
+  const dialogRef = useRef<HTMLDialogElement | null>(null);
+  const [draftPlan, setDraftPlan] = useState<Plan | null>(null);
+  const [newActionType, setNewActionType] = useState<ActionTypes>("speech");
+  const [newActionValue, setNewActionValue] = useState("");
+  const { setScrollable } = useFlowStore();
 
-    //Button Actions
-    const openCreate = () => {
-        setDraftPlan({...structuredClone(defaultPlan), id: crypto.randomUUID()});
-        dialogRef.current?.showModal();
-    };
+  //Button Actions
+  const openCreate = () => {
+    setScrollable(false);
+    setDraftPlan({...structuredClone(defaultPlan), id: crypto.randomUUID()});
+    dialogRef.current?.showModal();
+  };
 
-    const openCreateWithDescription = () => {
-        setDraftPlan({...structuredClone(defaultPlan), id: crypto.randomUUID(), name: description!});
-        setNewActionType("llm")
-        setNewActionValue(description!)
-        dialogRef.current?.showModal();
+  const openCreateWithDescription = () => {
+    setScrollable(false);
+    setDraftPlan({...structuredClone(defaultPlan), id: crypto.randomUUID(), name: description!});
+    setNewActionType("llm")
+    setNewActionValue(description!)
+    dialogRef.current?.showModal();
+  }
+
+  const openEdit = () => {
+    setScrollable(false);
+    if (!plan) return;
+    setDraftPlan(structuredClone(plan));
+    dialogRef.current?.showModal();
+  };
+
+  const close = () => {
+    setScrollable(true);
+    dialogRef.current?.close();
+    setDraftPlan(null);
+  };
+
+  const buildAction = (): Action => {
+    const id = crypto.randomUUID();
+    switch (newActionType) {
+    case "speech":
+     return { id, text: newActionValue, type: "speech" };
+    case "gesture":
+        return { id, gesture: newActionValue, type: "gesture" };
+    case "llm":
+        return { id, goal: newActionValue, type: "llm" };
     }
+  };
 
-    const openEdit = () => {
-        if (!plan) return;
-        setDraftPlan(structuredClone(plan));
-        dialogRef.current?.showModal();
-    };
+  return (<>
+      {/* Create and edit buttons */}
+      {!plan && (
+          <button className={styles.nodeButton} onClick={description ? openCreateWithDescription : openCreate}>
+          Create Plan
+          </button>
+      )}
+      {plan && (
+          <button className={styles.nodeButton} onClick={openEdit}>
+          Edit Plan
+          </button>
+      )}
 
-    const close = () => {
-        dialogRef.current?.close();
-        setDraftPlan(null);
-    };
+      {/* Start of dialog (plan editor) */}
+      <dialog
+        ref={dialogRef}
+        className={`${styles.planDialog}`}
+        //onWheel={(e) => e.stopPropagation()}
+        data-testid={"PlanEditorDialogTestID"}
+      >
+      <form method="dialog" className="flex-col gap-md">
+          <h3> {draftPlan?.id === plan?.id ? "Edit Plan" : "Create Plan"} </h3>
+          {/* Plan name text field */}
+          {draftPlan && (
+              <TextField
+                  value={draftPlan.name}
+                  setValue={(name) =>
+                  setDraftPlan({ ...draftPlan, name })}
+              placeholder="Plan name"
+              data-testid="name_text_field"/>
+          )}
 
-    const buildAction = (): Action => {
-        const id = crypto.randomUUID();
-        switch (newActionType) {
-        case "speech":
-         return { id, text: newActionValue, type: "speech" };
-        case "gesture":
-            return { id, gesture: newActionValue, type: "gesture" };
-        case "llm":
-            return { id, goal: newActionValue, type: "llm" };
-        }
-    };
+          {/* Entire "bottom" part (adder and steps) without cancel, confirm and reset */}
+          {draftPlan && (<div className={styles.planEditor}>
+              <div className={styles.planEditorLeft}>
+              {/* Left Side (Action Adder) */}
+                  <h4>Add Action</h4>
+                  {(!plan && description && draftPlan.steps.length === 0) && (<div className={styles.stepSuggestion}>
+                      <label> Filled in as a suggestion! </label>
+                      <label> Feel free to change! </label>
+                  </div>)}
+                  <label>
+                      Action Type <wbr />
+                      {/* Type selection */}
+                      <select
+                          value={newActionType}
+                          onChange={(e) => {
+                              setNewActionType(e.target.value as ActionTypes);
+                              // Reset value when action type changes
+                              setNewActionValue("");
+                          }}>
+                      <option value="speech">Speech Action</option>
+                      <option value="gesture">Gesture Action</option>
+                      <option value="llm">LLM Action</option>
+                      </select>
+                  </label>
 
-    return (<>
-        {/* Create and edit buttons */}
-        {!plan && (
-            <button className={styles.nodeButton} onClick={description ? openCreateWithDescription : openCreate}>
-            Create Plan
-            </button>
-        )}
-        {plan && (
-            <button className={styles.nodeButton} onClick={openEdit}>
-            Edit Plan
-            </button>
-        )}
-
-        {/* Start of dialog (plan editor) */}
-        <dialog
-          ref={dialogRef}
-          className={`${styles.planDialog}`}
-          onWheel={(e) => e.stopPropagation()}
-          data-testid={"PlanEditorDialogTestID"}
-        >
-        <form method="dialog" className="flex-col gap-md">
-            <h3> {draftPlan?.id === plan?.id ? "Edit Plan" : "Create Plan"} </h3>
-            {/* Plan name text field */}
-            {draftPlan && (
-                <TextField
-                    value={draftPlan.name}
-                    setValue={(name) =>
-                    setDraftPlan({ ...draftPlan, name })}
-                placeholder="Plan name"
-                data-testid="name_text_field"/>
-            )}
-
-            {/* Entire "bottom" part (adder and steps) without cancel, confirm and reset */}
-            {draftPlan && (<div className={styles.planEditor}>
-                <div className={styles.planEditorLeft}>
-                {/* Left Side (Action Adder) */}
-                    <h4>Add Action</h4>
-                    {(!plan && description && draftPlan.steps.length === 0) && (<div className={styles.stepSuggestion}>
-                        <label> Filled in as a suggestion! </label>
-                        <label> Feel free to change! </label>
-                    </div>)}
-                    <label>
-                        Action Type <wbr />
-                        {/* Type selection */}
-                        <select
-                            value={newActionType}
-                            onChange={(e) => {
-                                setNewActionType(e.target.value as ActionTypes);
-                                // Reset value when action type changes
-                                setNewActionValue("");
-                            }}>
-                        <option value="speech">Speech Action</option>
-                        <option value="gesture">Gesture Action</option>
-                        <option value="llm">LLM Action</option>
-                        </select>
-                    </label>
-
-                    {/* Action value editor*/}
-                    {newActionType === "gesture" ? (
-                        // Gesture get their own editor component
-                        <GestureValueEditor
+                  {/* Action value editor*/}
+                  {newActionType === "gesture" ? (
+                      // Gesture get their own editor component
+                      <GestureValueEditor
+                        value={newActionValue}
+                        setValue={setNewActionValue}
+                        placeholder="Gesture name"
+                      />
+                  ) : (
+                      <TextField
                           value={newActionValue}
                           setValue={setNewActionValue}
-                          placeholder="Gesture name"
-                        />
-                    ) : (
-                        <TextField
-                            value={newActionValue}
-                            setValue={setNewActionValue}
-                            placeholder={
-                                newActionType === "speech" ? "Speech text"
-                                : "LLM goal"
-                            }
-                        />
-                    )}
-            
-                    {/* Adding steps */}
-                    <button
-                        type="button"
-                        disabled={!newActionValue}
-                        onClick={() => {
-                            if (!draftPlan) return;
-                            // Add action to steps
-                            const action = buildAction();
-                            setDraftPlan({
-                                ...draftPlan,
-                                steps: [...draftPlan.steps, action],});
-                  
-                            // Reset current action building
-                            setNewActionValue("");
-                            setNewActionType("speech");
-                        }}>
-                    Add Step
-                  </button>
-                </div>
-                
-                {/* Right Side (Steps shown) */}
-                <div className={styles.planEditorRight}>
-                    <h4>Steps</h4>
+                          placeholder={
+                              newActionType === "speech" ? "Speech text"
+                              : "LLM goal"
+                          }
+                      />
+                  )}
 
-                    {/* Show if there are no steps yet */}
-                    {draftPlan.steps.length === 0 && (
-                        <div className={styles.emptySteps}>
-                        No steps yet
-                        </div>
-                    )}
-            
-                    
-                    {/* Map over all steps */}
-                    {draftPlan.steps.map((step, index) => (
-                        <div
-                        role="button"
-                        tabIndex={0}
-                        key={step.id}
-                        className={styles.planStep}
-                        // Extra logic for screen readers to access using keyboard
-                        onKeyDown={(e) => {
-                            if (e.key === "Enter" || e.key === " ") {
-                            setDraftPlan({
-                            ...draftPlan,
-                            steps: draftPlan.steps.filter((s) => s.id !== step.id),}); 
-                            }}}
-                        onClick={() => {
-                            setDraftPlan({
-                            ...draftPlan,
-                            steps: draftPlan.steps.filter((s) => s.id !== step.id),});
-                        }}>
-                        
-                        <span className={styles.stepIndex}>{index + 1}.</span>
-                        <span className={styles.stepType}>{step.type}:</span>
-                        <span className={styles.stepName}>{
-                        step.type == "goal" ? ""/* TODO: Add support for goals */ 
-                        : GetActionValue(step)}
-                        </span>
-                    </div>
-                  ))}
-                </div>
+                  {/* Adding steps */}
+                  <button
+                      type="button"
+                      disabled={!newActionValue}
+                      onClick={() => {
+                          if (!draftPlan) return;
+                          // Add action to steps
+                          const action = buildAction();
+                          setDraftPlan({
+                              ...draftPlan,
+                              steps: [...draftPlan.steps, action],});
+
+                          // Reset current action building
+                          setNewActionValue("");
+                          setNewActionType("speech");
+                      }}>
+                  Add Step
+                </button>
               </div>
-            )}
 
-            {/* Buttons */}
-            <div className="flex-row gap-md">
-                {/* Close button */}
-                <button type="button" onClick={close}>
-                Cancel
-                </button>
+              {/* Right Side (Steps shown) */}
+              <div className={styles.planEditorRight}>
+                  <h4>Steps</h4>
 
-                {/* Confirm/ Create button */}
-                <button
-                type="button"
-                disabled={!draftPlan}
-                onClick={() => {
-                    if (!draftPlan) return;
-                    onSave(draftPlan);
-                    close();
-                }}>
-                {draftPlan?.id === plan?.id ? "Confirm" : "Create"}
-                </button>
+                  {/* Show if there are no steps yet */}
+                  {draftPlan.steps.length === 0 && (
+                      <div className={styles.emptySteps}>
+                      No steps yet
+                      </div>
+                  )}
 
-                {/* Reset button */}
-                <button
-                type="button"
-                disabled={!draftPlan}
-                onClick={() => {
-                    onSave(undefined);
-                    close();
-                }}>
-                Reset
-                </button>
-          </div>
-        </form>
-      </dialog>
-    </>
-  );
+
+                  {/* Map over all steps */}
+                  {draftPlan.steps.map((step, index) => (
+                      <div
+                      role="button"
+                      tabIndex={0}
+                      key={step.id}
+                      className={styles.planStep}
+                      // Extra logic for screen readers to access using keyboard
+                      onKeyDown={(e) => {
+                          if (e.key === "Enter" || e.key === " ") {
+                          setDraftPlan({
+                          ...draftPlan,
+                          steps: draftPlan.steps.filter((s) => s.id !== step.id),});
+                          }}}
+                      onClick={() => {
+                          setDraftPlan({
+                          ...draftPlan,
+                          steps: draftPlan.steps.filter((s) => s.id !== step.id),});
+                      }}>
+
+                      <span className={styles.stepIndex}>{index + 1}.</span>
+                      <span className={styles.stepType}>{step.type}:</span>
+                      <span className={styles.stepName}>{
+                      step.type == "goal" ? ""/* TODO: Add support for goals */
+                      : GetActionValue(step)}
+                      </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Buttons */}
+          <div className="flex-row gap-md">
+              {/* Close button */}
+              <button type="button" onClick={close}>
+              Cancel
+              </button>
+
+              {/* Confirm/ Create button */}
+              <button
+              type="button"
+              disabled={!draftPlan}
+              onClick={() => {
+                  if (!draftPlan) return;
+                  onSave(draftPlan);
+                  close();
+              }}>
+              {draftPlan?.id === plan?.id ? "Confirm" : "Create"}
+              </button>
+
+              {/* Reset button */}
+              <button
+              type="button"
+              disabled={!draftPlan}
+              onClick={() => {
+                  onSave(undefined);
+                  close();
+              }}>
+              Reset
+              </button>
+        </div>
+      </form>
+    </dialog>
+  </>
+);
 }