Browse Source

feat: add "NBP Input" toggle to group context menu

Allow marking groups as NBP inputs for workflow export. Adds isNbpInput
flag to NodeGroup, a toggle row in the group context menu with checkmark
indicator, and a dashed border on marked group backgrounds.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
handoff-20260429-1057
shrimbly 4 months ago
parent
commit
a876dfe262
  1. 18
      src/components/GroupsOverlay.tsx
  2. 1
      src/types/workflow.ts

18
src/components/GroupsOverlay.tsx

@ -46,7 +46,7 @@ function GroupBackground({ groupId }: GroupBackgroundProps) {
width: group.size.width, width: group.size.width,
height: group.size.height, height: group.size.height,
backgroundColor: `${bgColor}60`, backgroundColor: `${bgColor}60`,
border: `1px solid ${bgColor}`, border: group.isNbpInput ? `2px dashed ${bgColor}` : `1px solid ${bgColor}`,
pointerEvents: "none", pointerEvents: "none",
}} }}
/> />
@ -439,6 +439,22 @@ function GroupControls({ groupId, zoom }: GroupControlsProps) {
<span>{group.locked ? "Unlock" : "Lock"}</span> <span>{group.locked ? "Unlock" : "Lock"}</span>
</button> </button>
{/* NBP Input toggle row */}
<button
onClick={(e) => { e.stopPropagation(); updateGroup(groupId, { isNbpInput: !group.isNbpInput }); setShowMenu(false); }}
className="flex items-center gap-2 px-3 py-1.5 w-full hover:bg-white/10 text-xs text-white/80 transition-colors"
>
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
</svg>
<span>NBP Input</span>
{group.isNbpInput && (
<svg className="w-3 h-3 ml-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
</svg>
)}
</button>
{/* Delete row */} {/* Delete row */}
<button <button
onClick={(e) => { e.stopPropagation(); handleDelete(); }} onClick={(e) => { e.stopPropagation(); handleDelete(); }}

1
src/types/workflow.ts

@ -50,4 +50,5 @@ export interface NodeGroup {
position: { x: number; y: number }; position: { x: number; y: number };
size: { width: number; height: number }; size: { width: number; height: number };
locked?: boolean; locked?: boolean;
isNbpInput?: boolean;
} }

Loading…
Cancel
Save