From 2b2b16eb8770a7e44055478a391b5fe3df1a862a Mon Sep 17 00:00:00 2001
From: Daan0709 <daanvmaldegem@live.nl>
Date: Fri, 10 Apr 2026 18:31:26 +0200
Subject: [PATCH 1/2] Can now ungroup nodes by selecting the group node itself
 and hitting shift g

---
 .../app/routes/studio/canvas/flow.tsx         | 22 +++++++++++++++++--
 .../studio/canvas/nodetypes/group-node.tsx    | 13 ++++++++++-
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/main/frontend/app/routes/studio/canvas/flow.tsx b/src/main/frontend/app/routes/studio/canvas/flow.tsx
index b402fea9..a50d5fc4 100644
--- a/src/main/frontend/app/routes/studio/canvas/flow.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/flow.tsx
@@ -689,11 +689,29 @@ function FlowCanvas() {
   }, [copySelection])
 
   const handleUngroup = useCallback(() => {
-    const selectedNodes = nodes.filter((n) => n.selected)
+    const flowStore = useFlowStore.getState()
+    const selectedNodes = flowStore.nodes.filter((n) => n.selected)
+
     if (selectedNodes.length === 0) return
+    const selectedGroupNodes = selectedNodes.filter((n) => n.type === 'groupNode')
+
+    if (selectedGroupNodes.length > 0) {
+      let updatedNodes = [...flowStore.nodes]
+      for (const groupNode of selectedGroupNodes) {
+        const groupId = groupNode.id
+
+        const children = updatedNodes.filter((n) => n.parentId === groupId)
+
+        updatedNodes = degroupNodes(children, groupId, updatedNodes)
+      }
+      flowStore.setNodes(updatedNodes)
+      return
+    }
+
     if (!allSelectedInSameGroup(selectedNodes)) return
+
     handleDegroupSingleGroup(selectedNodes)
-  }, [nodes, allSelectedInSameGroup, handleDegroupSingleGroup])
+  }, [allSelectedInSameGroup, handleDegroupSingleGroup, degroupNodes])
 
   const handleRightMouseButtonClick = useCallback(
     (event: React.MouseEvent) => {
diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/group-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/group-node.tsx
index b0682638..cb493870 100644
--- a/src/main/frontend/app/routes/studio/canvas/nodetypes/group-node.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/group-node.tsx
@@ -8,9 +8,10 @@ export type GroupNode = Node<{
   width: number
   height: number
   childrenNames?: string[]
+  onUngroup: () => void
 }>
 
-export default function GroupNodeComponent({ id, data, selected }: NodeProps<GroupNode>) {
+export default function GroupNodeComponent({ id, data, selected, onUngroup }: NodeProps<GroupNode>) {
   const [dimensions, setDimensions] = useState({
     width: data.width,
     height: data.height,
@@ -53,6 +54,15 @@ export default function GroupNodeComponent({ id, data, selected }: NodeProps<Gro
           height: dimensions.height,
         }}
       >
+        {selected && onUngroup && (
+          <button
+            onClick={() => onUngroup(id)}
+            className="absolute top-1 right-1 z-10 flex h-5 w-5 items-center justify-center rounded bg-red-500 text-xs font-bold text-white hover:bg-red-600"
+            title="Ungroup"
+          >
+            ×
+          </button>
+        )}
         <div
           className="drag-handle relative max-h-1/2 cursor-move bg-pink-300 p-1"
           style={{
@@ -62,6 +72,7 @@ export default function GroupNodeComponent({ id, data, selected }: NodeProps<Gro
           <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
             <HamburgerMenu />
           </div>
+
           <div className="flex max-w-1/2 gap-1 px-2 py-1 text-sm font-bold">
             {isEditing ? (
               <input

From 0d027e074077b8b07d596c37c060845cf507a1ad Mon Sep 17 00:00:00 2001
From: Daan0709 <daanvmaldegem@live.nl>
Date: Tue, 14 Apr 2026 15:14:32 +0200
Subject: [PATCH 2/2] Fixed typeissue

---
 .../routes/studio/canvas/nodetypes/group-node.tsx    | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/group-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/group-node.tsx
index cb493870..1671b2a8 100644
--- a/src/main/frontend/app/routes/studio/canvas/nodetypes/group-node.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/group-node.tsx
@@ -8,10 +8,9 @@ export type GroupNode = Node<{
   width: number
   height: number
   childrenNames?: string[]
-  onUngroup: () => void
 }>
 
-export default function GroupNodeComponent({ id, data, selected, onUngroup }: NodeProps<GroupNode>) {
+export default function GroupNodeComponent({ id, data, selected }: NodeProps<GroupNode>) {
   const [dimensions, setDimensions] = useState({
     width: data.width,
     height: data.height,
@@ -54,15 +53,6 @@ export default function GroupNodeComponent({ id, data, selected, onUngroup }: No
           height: dimensions.height,
         }}
       >
-        {selected && onUngroup && (
-          <button
-            onClick={() => onUngroup(id)}
-            className="absolute top-1 right-1 z-10 flex h-5 w-5 items-center justify-center rounded bg-red-500 text-xs font-bold text-white hover:bg-red-600"
-            title="Ungroup"
-          >
-            ×
-          </button>
-        )}
         <div
           className="drag-handle relative max-h-1/2 cursor-move bg-pink-300 p-1"
           style={{