Add onSelect prop to ChildNode component for selection handling

src/main/frontend/app/routes/studio/canvas/flow.tsx

@@ -257,7 +257,7 @@
   }, [])
 
   const { nodes, edges, onNodesChange, onEdgesChange, onConnect, onReconnect } = useFlowStore(useShallow(selector))
   const project = useProjectStore.getState().project
 
   const saveFlow = useCallback(async () => {
     const { nodes: flowNodes, edges: flowEdges, viewport: flowViewport } = useFlowStore.getState()
@@ -321,7 +321,7 @@
       logApiError('Failed to save XML', error as Error)
       setIdle()
     }
   }, [])
 
   const autosaveEnabled = useSettingsStore((s) => s.general.autoSave.enabled)
   const autosaveDelay = useSettingsStore((s) => s.general.autoSave.delayMs)
@@ -825,6 +825,17 @@
 
   const deleteSelection = useCallback((): boolean => {
     if (isEditing) return false
+
+    const { parentId: storeParentId, nodeId: storeNodeId } = useNodeContextStore.getState()
+    if (storeParentId !== null) {
+      useFlowStore.getState().deleteChild(storeParentId, storeNodeId.toString())
+      useNodeContextStore.getState().setParentId(null)
+      useNodeContextStore.getState().setChildParentId(null)
+      useNodeContextStore.getState().setNodeId(0)
+      showNodeContextMenu(false)
+      return true
+    }
+
     const { nodes, edges, setNodes, setEdges } = useFlowStore.getState()
     const selectedNodeIds = new Set(nodes.filter((n) => n.selected).map((n) => n.id))
     const hasSelection = selectedNodeIds.size > 0 || edges.some((e) => e.selected)

src/main/frontend/app/routes/studio/canvas/nodetypes/child-node.tsx

@@ -20,6 +20,7 @@
   child: ChildNode
   gradientEnabled: boolean
   onEdit: (id: string) => void
+  onSelect: (id: string) => void
   parentId: string
   rootId: string
 }
@@ -28,11 +29,23 @@
   child,
   gradientEnabled,
   onEdit,
+  onSelect,
   parentId,
   rootId,
 }: Readonly<ChildNodeProperties>) {
-  const { setParentId, setChildParentId, setIsEditing, setDraggedName, draggedName, setNodeId, setAttributes } =
-    useNodeContextStore()
+  const {
+    setParentId,
+    setChildParentId,
+    setIsEditing,
+    setDraggedName,
+    draggedName,
+    setNodeId,
+    setAttributes,
+    nodeId,
+    parentId: selectedParentId,
+    isDirty,
+  } = useNodeContextStore()
+  const isSelected = nodeId === +child.id && selectedParentId !== null
   const showNodeContextMenu = useNodeContextMenu()
   const addChildToChild = useFlowStore((state) => state.addChildToChild)
   const [dragOver, setDragOver] = useState(false)
@@ -125,7 +138,7 @@
       // Add child recursively
       addChildToChild(rootId, child.id, newChild)
     },
     [
       setDraggedName,
       canAcceptChild,
       showNodeContextMenu,
@@ -158,12 +171,19 @@
   return (
     <div
       data-childnode-id={child.id}
-      className={`bg-background relative mr-0.5 mb-2 rounded-md border ${dragForbidden ? 'border-2 border-dashed' : 'border-border'}`}
+      className={`bg-background relative mr-0.5 mb-2 rounded-md border ${isSelected ? 'border-1' : dragForbidden ? 'border-2 border-dashed' : 'border-border'}`}
+      style={isSelected ? { borderColor: `var(--type-${child.type?.toLowerCase()})` } : undefined}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
+      onClick={(mouseEvent) => {
+        mouseEvent.stopPropagation()
+        if (isDirty) return
+        onSelect(child.id)
+      }}
       onDoubleClick={(event) => {
         event.stopPropagation()
+        if (isDirty) return
         onEdit(child.id)
       }}
     >
@@ -203,6 +223,7 @@
                 child={nested}
                 gradientEnabled={gradientEnabled}
                 onEdit={onEdit}
+                onSelect={onSelect}
                 parentId={child.id}
                 rootId={rootId}
               />

src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx

@@ -4,6 +4,7 @@
   type NodeProps,
   NodeResizeControl,
   Position,
+  useReactFlow,
   useStore,
   useUpdateNodeInternals,
 } from '@xyflow/react'
@@ -101,6 +102,7 @@
   const [mandatoryChildrenFulfilled, setMandatoryChildrenFulfilled] = useState(false)
   const [missingChildren, setMissingChildren] = useState<string[]>([])
 
+  const reactFlow = useReactFlow()
   const updateNodeInternals = useUpdateNodeInternals()
   const [isHandleMenuOpen, setIsHandleMenuOpen] = useState(false)
   const [handleMenuPosition, setHandleMenuPosition] = useState({ x: 0, y: 0 })
@@ -243,6 +245,24 @@
     setIsEditing(true)
   }
 
+  const selectChild = (childId: string) => {
+    const child = findChildRecursive(properties.data.children, childId)
+    if (!child) return
+
+    const recordElements = elements as Record<string, ElementDetails>
+    const attributes = Object.values(recordElements).find((element) => element.name === child.subtype)?.attributes
+
+    const isFirstLevel = properties.data.children.some((childNode) => childNode.id === childId)
+    setParentId(properties.id)
+    setChildParentId(isFirstLevel ? null : properties.id)
+    setNodeId(+childId)
+    setAttributes(attributes)
+    setEditingSubtype(child.subtype)
+    showNodeContextMenu(true)
+
+    reactFlow.setNodes((nodes) => nodes.map((node) => ({ ...node, selected: false })))
+  }
+
   const changeHandleType = (handleIndex: number, newType: string) => {
     // Prevent changing to a duplicate handle type
     const existing = properties.data.sourceHandles.some(
@@ -322,7 +342,7 @@
 
       addChild(properties.id, child)
     },
     [
       properties.id,
       addChild,
       setIsNewNode,
@@ -514,6 +534,7 @@
                     child={child}
                     gradientEnabled={gradientEnabled}
                     onEdit={editChild}
+                    onSelect={selectChild}
                     parentId={properties.id}
                     rootId={properties.id}
                   />