Nested node with sortable nodes

[aslamamranxy]

I would like to have a node that can group list of nodes. Node inside the group can be sort the order.

I'm trying to achieve this using nested nodes. But I cannot find a way to render the nodes correctly since the nested nodes is not exactly inside the parent div.

I'm using custom node currently. But facing several issues

• When sort the connection is not pointing to correct node
• The handle is for the node inside group. But when connected, the source is always pointing the parent node instead

Here is my current implementation of group node

<template>
    <div 
        class="relative hover:shadow-md rounded-md transition-all duration-200 ease-in-out group-node w-[296px]"
        @mousedown="onGroupMouseDown"
        @touchstart="onGroupTouchStart"
        @dragover="onDragOver"
    >
        <!-- {{ props.id }} -->
        <div class="bg-background border rounded-t-md p-2 min-w-60">
            <div class="flex items-center justify-between">
                <input 
                    v-model="groupTitle"
                    @blur="updateGroupTitle" 
                    class="text-xs font-semibold bg-transparent border-none outline-none flex-1 pointer-events-auto"
                    placeholder="Group title..."
                />
                <span class="text-xs text-muted-foreground">{{ groupNodes.length }} items</span>
            </div>
        </div>

        <Handle
            :id="`${props.id}-handle`"
            type="source"
            :position="Position.Bottom"
            class="!h-2.5 !w-8 !rounded-none !rounded-bl-sm !rounded-br-sm translate-y-[50%] bottom-0 !bg-primary pointer-events-auto"
        ></Handle>

        <Handle
            :id="`${props.id}-handle`"
            type="target"
            :position="Position.Top"
            class="!h-2.5 !w-8 !rounded-none !rounded-tl-sm !rounded-tr-sm translate-y-[-50%] !bg-primary top-0 pointer-events-auto"
            :is-valid-connection="isValidConnection"
        ></Handle>
        <div 
            :class="cn(
                'bg-background p-2 border-x border-b rounded-b-md space-y-2',
                draggedData.isDragging 
                    ? 'animate-pulse border-dashed border-primary/30' 
                        : 'bg-background',
                draggedData.isDragging && !canDrop 
                    ? 'bg-yellow-500/5' 
                    : draggedData.isDragging && canDrop 
                        ? 'bg-primary/5' 
                        : ''
            )"
            @drop="onDrop"
            @dragover="onDragOver"
        >
            <div 
                v-if="groupNodes.length === 0"
                :class="cn(
                    'text-center text-muted-foreground text-xs',
                )"
            >
                <div class="border-2 border-dashed border-muted-foreground/30 rounded-md p-4 text-center">
                    <template v-if="canDrop">
                        Drop here to add to group
                    </template>
                    <template v-else-if="!canDrop && draggedData.node">
                        <span class="text-yellow-600">{{ draggedData.node.label }} node cannot be grouped</span>
                    </template>
                    <template v-else>
                        Drag nodes here to group them
                    </template>
                </div>
            </div>

            <Sortable
                v-else
                v-model="groupNodes"
                class="space-y-2 pointer-events-auto sortable-container"
            >
                <div v-for="node in groupNodes" :key="node.id" class="relative">
                    <!-- {{ node.id }} -->
                    <SortableItem
                        :node
                        :group-id="props.id"
                        @delete="removeNodeFromGroup"
                        class="relative"
                    >
                        <component
                            :is="getNodeComponent(node.type as string)"
                            :data="node.data"
                            :node-id="node.id"
                            in-group
                        />
                    </SortableItem>
                    <Handle 
                        :id="`${node.id}-handle`"
                        type="source"
                        class="!absolute !h-8 !w-2.5 !rounded-none !rounded-tr-sm !rounded-br-sm !bg-primary !z-[100]"
                        style="transform: translate(200%, -50%);"
                        :position="Position.Right"
                        :data-nodeid="node.id"
                        :data-parent-group="props.id"
                    >
                    </Handle>
                </div>
            </Sortable>
        </div>
    </div>
</template>

<script setup lang="ts">
import { cn } from '~/lib/utils';
import type { GroupNodeData, GroupNodeEvents, SelectableNode } from '../types';
import { useVueFlow, type NodeProps, type Node, Handle, Position } from '@vue-flow/core';

const nodeTypes: Record<string, Component> = {
    group: markRaw(GroupNode),
    text: markRaw(TextNode),
    image: markRaw(ImageNode),
}

const props = defineProps<NodeProps<GroupNodeData, GroupNodeEvents>>()

const { draggedData, onDragEnd: dragContextOnDragEnd } = useDragContext<Node | SelectableNode>()
const { nodes, updateNode, addNodes } = useVueFlow()

const groupTitle = ref(props.data.content?.title || 'Untitled Group')
const groupNodes = ref<Node[]>(props.data.content?.nodes || [])

const canDrop = computed(() => {
    return draggedData.node && draggedData.isDragging && draggedData.node?.allowGrouping
})

const getNodeComponent = (nodeType: string) => {
    return nodeTypes[nodeType] || 'div'
}

const onGroupMouseDown = (event: MouseEvent) => {
    const target = event.target as HTMLElement
    
    if (target.closest('.sortable-container')) {
        event.stopPropagation()
        return
    }
}

const onGroupTouchStart = (event: TouchEvent) => {
    const target = event.target as HTMLElement
    
    if (target.closest('.sortable-container')) {
        event.stopPropagation()
        return
    }
}

const onDragOver = (event: DragEvent) => {
    event.preventDefault()
    event.stopPropagation()
    draggedData.targetId = props.id
    console.log('drag over group')
}

const onDrop = (event: DragEvent) => {
    event.preventDefault()
    event.stopPropagation()

    console.log('drop in group:', props.id, 'from source:', draggedData.sourceId)
    
    const node = draggedData.node!
    console.log(node.allowGrouping)

    if (!node || !node.allowGrouping) return

    if (draggedData.sourceId && draggedData.sourceId !== props.id) {
        const newNode: Node = {
            id: `nodes-${groupNodes.value.length + 1}-${Date.now()}-group-${props.id}`,
            type: node.type,
            label: node.label,
            position: { x: 0, y: 0 },
            data: {
                title: node.label || node.type,
                content: {}
            },
            allowGrouping: node.allowGrouping,
            parentNode: props.id,
            dragHandle: `.nodes-${groupNodes.value.length + 1}-${Date.now()}-group-${props.id}-handle`,
            hidden: true
        }

        const newNodes = [...groupNodes.value, newNode]

        addNodes(newNode)
        updateGroupNodes(newNodes)
        removeNodeFromSourceGroup(draggedData.sourceId, draggedData.node as Node)
    }

    dragContextOnDragEnd()
}

const updateGroupTitle = () => {
    updateNode(props.id, {
        data: {
            ...props.data,
            content: {
                ...props.data.content,
                title: groupTitle.value
            }
        }
    })
}

const updateGroupNodes = (newNodes: Node[]) => {
    groupNodes.value = newNodes

    updateNode(props.id, {
        data: {
            ...props.data,
            content: {
                ...props.data.content,
                nodes: newNodes
            }
        }
    })
}

const removeNodeFromGroup = (nodeId: string) => {
    const newNodes = groupNodes.value.filter(node => node.id !== nodeId)
    updateGroupNodes(newNodes)
    dragContextOnDragEnd()
}

const removeNodeFromSourceGroup = (sourceGroupId: string, draggedNode: Node) => {
    const sourceGroupNode = nodes.value.find(n => n.id === sourceGroupId && n.type === 'group')
    
    if (sourceGroupNode && sourceGroupNode.data.content?.nodes) {
        const sourceGroupNodes = sourceGroupNode.data.content.nodes
        const updatedNodes = sourceGroupNodes.filter((n: Node) => n.id !== draggedNode.id)
        
        updateNode(sourceGroupId, {
            data: {
                ...sourceGroupNode.data,
                content: {
                    ...sourceGroupNode.data.content,
                    nodes: updatedNodes
                }
            }
        })
    }
}

watch(() => props.data.content?.nodes, (newNodes) => {
    if (newNodes && JSON.stringify(newNodes) !== JSON.stringify(groupNodes.value)) {
        groupNodes.value = [...(newNodes || [])]
    }
}, { deep: true })
</script>

<style scoped>
</style>

[bcakmakoglu]

If you don’t need “inner” nodes to have the same behaviour that nodes have then I’d suggest simply using a regular list of items and forgetting about “nested nodes” entirely here.
And from the screenshot you shared it doesn’t seem like you need anything more complicated than a regular sortable list which is easily achieved without using the overhead of nested nodes.