Skip to content

Commit 2d8ab6b

Browse files
authored
feat(frontend): add selecting UI for custom node in new builder (#11091)
React Flow has built-in functionality to select multiple nodes by using `cmd` + click. You can also select using rectangle selection by holding the shift key. However, we need to design a custom node after it’s selected. <img width="845" height="510" alt="Screenshot 2025-10-06 at 12 41 16 PM" src="https://github.com/user-attachments/assets/c91f22e3-2211-46b6-b3d3-fbc89148e99a" /> ### Tests - [x] Selecting Ui is visible after selecting a node, using cmd + click, and after rectangle selection.
1 parent a730697 commit 2d8ab6b

File tree

1 file changed

+8
-2
lines changed
  • autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes

1 file changed

+8
-2
lines changed

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { Switch } from "@/components/atoms/Switch/Switch";
88
import { preprocessInputSchema } from "../processors/input-schema-pre-processor";
99
import { OutputHandler } from "./OutputHandler";
1010
import { useNodeStore } from "../../../stores/nodeStore";
11+
import { cn } from "@/lib/utils";
1112

1213
export type CustomNodeData = {
1314
hardcodedValues: {
@@ -22,14 +23,19 @@ export type CustomNodeData = {
2223
export type CustomNode = XYNode<CustomNodeData, "custom">;
2324

2425
export const CustomNode: React.FC<NodeProps<CustomNode>> = React.memo(
25-
({ data, id }) => {
26+
({ data, id, selected }) => {
2627
const showAdvanced = useNodeStore(
2728
(state) => state.nodeAdvancedStates[id] || false,
2829
);
2930
const setShowAdvanced = useNodeStore((state) => state.setShowAdvanced);
3031

3132
return (
32-
<div className="rounded-xl border border-slate-200/60 bg-gradient-to-br from-white to-slate-50/30 shadow-lg shadow-slate-900/5 backdrop-blur-sm">
33+
<div
34+
className={cn(
35+
"rounded-xl border border-slate-200/60 bg-gradient-to-br from-white to-slate-50/30 shadow-lg shadow-slate-900/5 backdrop-blur-sm",
36+
selected && "border-2 border-slate-200 shadow-2xl",
37+
)}
38+
>
3339
{/* Header */}
3440
<div className="flex h-14 items-center justify-center rounded-xl border-b border-slate-200/50 bg-gradient-to-r from-slate-50/80 to-white/90">
3541
<Text

0 commit comments

Comments
 (0)