Update autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
feat(frontend/builder): enable rectangle drag-to-select multiple blocks
2026-04-08 03:00:28 -04:00 · 2026-03-17 16:30:59 +05:30 · 2026-03-17 16:30:59 +05:30
2 changed files with 12 additions and 1 deletions
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx
@@ -1,7 +1,7 @@
 import { useGetV1GetSpecificGraph } from "@/app/api/__generated__/endpoints/graphs/graphs";
 import { okData } from "@/app/api/helpers";
 import { FloatingReviewsPanel } from "@/components/organisms/FloatingReviewsPanel/FloatingReviewsPanel";
-import { Background, ReactFlow } from "@xyflow/react";
+import { Background, ReactFlow, SelectionMode } from "@xyflow/react";
 import { parseAsString, useQueryStates } from "nuqs";
 import { useCallback, useMemo } from "react";
 import { useShallow } from "zustand/react/shallow";
@@ -112,6 +112,11 @@ export const Flow = () => {
          nodesDraggable={!isLocked}
          nodesConnectable={!isLocked}
          elementsSelectable={!isLocked}
+          selectionOnDrag={!isLocked}
+          selectionMode={SelectionMode.Partial}
+          multiSelectionKeyCode={["Shift", "Meta", "Control"]}
+          panOnDrag={isLocked ? true : [1, 2]}
+          panOnScroll
          deleteKeyCode={["Backspace", "Delete"]}
        >
          <Background />
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/flow.css
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/flow.css
@@ -7,3 +7,9 @@
  position: relative;
  transform: none;
 }
+
+/* Selection box styling for drag-to-select */
+.react-flow {
+  --xy-selection-background-color: rgba(99, 102, 241, 0.08);
+  --xy-selection-border: 1px solid rgba(99, 102, 241, 0.4);
+}