feat: apply custom background colors to maximized groups

Maximized groups now display their assigned background color instead
of using the hardcoded default gray color.

Changes:

GroupNode.tsx:
- Added background color overlay div in maximized state
- Uses data.color property (same as minimized groups)
- Positioned absolutely to fill entire group area
- Set pointerEvents: 'none' to allow interaction with children

index.css:
- Changed .react-flow__node-group background to transparent
- Changed .react-flow__node-group.selected background to transparent
- Inner div now controls the background color

This ensures visual consistency between minimized and maximized
groups - both now respect the user-selected color from the group
properties panel.

Benefits:
-  Visual consistency between group states
-  User-selected colors are always visible
-  Better visual organization with color-coded groups
-  Matches user expectations for group appearance

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jan-Henrik Bruhn 2025-10-20 15:23:01 +02:00
parent 0889a60d54
commit 178292435f
2 changed files with 16 additions and 2 deletions

View file

@ -220,6 +220,20 @@ const GroupNode = ({ id, data, selected }: NodeProps<Group>) => {
position: 'relative',
}}
>
{/* Background color overlay - uses group's custom color */}
<div
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: data.color || 'rgba(240, 242, 245, 0.5)',
borderRadius: '8px',
pointerEvents: 'none', // Let clicks pass through to children
}}
/>
{/* Resize handles - only visible when selected */}
<NodeResizer
isVisible={selected}

View file

@ -46,14 +46,14 @@ code {
/* Group node styling - React Flow native */
.react-flow__node-group {
background-color: rgba(240, 242, 245, 0.5);
background-color: transparent; /* Background handled by inner div for custom colors */
border: 2px dashed rgba(100, 116, 139, 0.4);
border-radius: 8px;
padding: 10px; /* Default padding for maximized groups */
}
.react-flow__node-group.selected {
background-color: rgba(219, 234, 254, 0.5);
background-color: transparent; /* Background handled by inner div for custom colors */
border: 2px solid rgba(59, 130, 246, 0.6);
}