starred/windmill
1
0
Fork 0
mirror of https://github.com/windmill-labs/windmill.git synced 2026-08-23 16:00:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: offset collapsed group stacked layers by note height

Browse Source 
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Guilhem
2026-02-25 12:24:36 +00:00
parent 4a4f4ab15a
commit 7f633dcc3f
3 changed files with 18 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/graph/GroupNodeCard.svelte
+1 -1
View File
@@ -89,7 +89,7 @@
<div
class={twMerge(
'w-full module cursor-pointer max-w-full',
fullWidth ? 'rounded-t-md' : 'shadow-sm border rounded-md overflow-clip',
fullWidth ? 'rounded-t-md' : 'shadow-sm rounded-md overflow-clip',
'bg-surface-tertiary'
)}
style={fullWidth ? '' : 'width: 275px;'}
frontend/src/lib/components/graph/graphBuilder.svelte.ts
+8 -1
View File
@@ -415,7 +415,14 @@ export function graphBuilder(
simplifiableFlow: SimplifiableFlow | undefined,
flowPathForTriggerNode: string | undefined,
expandedSubflows: Record<string, FlowModule[]>,
collapsedGroups: Array<{ id: string; summary?: string; note?: string; color?: string; collapsed?: boolean; module_ids: string[] }>,
collapsedGroups: Array<{
id: string
summary?: string
note?: string
color?: string
collapsed?: boolean
module_ids: string[]
}>,
showNotes: boolean
// triggerProps?: {
// path?: string
frontend/src/lib/components/graph/renderers/nodes/CollapsedGroupNode.svelte
+9 -5
View File
@@ -19,6 +19,7 @@
let selected = $derived(!!(selectionManager && selectionManager.isNodeSelected(id)))
let hover = $state(false)
let noteHeight = $state(0)
let group = $derived(
groupEditorContext?.groupEditor.getGroups().find((g) => g.id === data.groupId)
@@ -38,12 +39,12 @@
<div class="relative" onmouseenter={() => (hover = true)} onmouseleave={() => (hover = false)}>
<!-- Stacked layers behind the card -->
<div
class="absolute inset-0 top-[4px] left-2 h-9 rounded-md border z-[-1] {colorConfig.background} {borderColorClass}"
style="width: 259px;"
class="absolute inset-0 left-2 h-9 rounded-md border z-[-1] {colorConfig.background} {borderColorClass}"
style="top: {3 + noteHeight}px; width: 259px;"
></div>
<div
class="absolute inset-0 top-[7px] left-4 h-9 rounded-md border z-[-2] {colorConfig.background} {borderColorClass}"
style="width: 243px;"
class="absolute inset-0 left-4 h-9 rounded-md border z-[-2] {colorConfig.background} {borderColorClass}"
style="top: {7 + noteHeight}px; width: 243px;"
></div>
<GroupNodeCard
@@ -59,7 +60,10 @@
onSummaryUpdate={(text) =>
groupEditorContext?.groupEditor.updateSummary(data.groupId, text)}
onNoteUpdate={(text) => groupEditorContext?.groupEditor.updateNote(data.groupId, text)}
onHeightChange={(h) => groupEditorContext?.groupEditor.setNoteHeight(data.groupId, h)}
onHeightChange={(h) => {
noteHeight = h
groupEditorContext?.groupEditor.setNoteHeight(data.groupId, h)
}}
/>
{#if data.editMode && (hover || selected)}