diff --git a/examples/Nesting/GroupNode.vue b/examples/Nesting/GroupNode.vue index afc21d89..59ced04a 100644 --- a/examples/Nesting/GroupNode.vue +++ b/examples/Nesting/GroupNode.vue @@ -8,26 +8,28 @@ store.hooks.nodeDragStop.on(({ node }) => { const nodes = getNodesInside( store.getNodes, { - height: props.height, - width: props.width, - x: props.position.x, - y: props.position.y, + ...props.dimensions, + x: props.computedPosition.x, + y: props.computedPosition.y, }, store.transform, ) - if (nodes.some((n) => n.id === node.id)) { - node.data.label = `In ${props.id}` - node.data.group = props.id - } else if (node.data.group === props.id) { + console.log(nodes) + if (nodes.some((n) => n.id === node.id && n.id !== props.id)) { + node.label = `In ${props.id}` + node.data = { + group: props.id, + } + } else if (node.data?.group === props.id) { node.data.group = undefined - node.data.label = node.id + node.label = node.id } }) diff --git a/examples/Nesting/Nesting.vue b/examples/Nesting/Nesting.vue index 8768a7d9..0550ec61 100644 --- a/examples/Nesting/Nesting.vue +++ b/examples/Nesting/Nesting.vue @@ -6,7 +6,7 @@ const elements = ref>([ { id: 'node-2', label: 'node-2', position: { x: 50, y: 5 } }, { id: 'group-a', - style: { zIndex: 2, width: '300px', height: '300px' }, + type: 'group', label: 'A', position: { x: 50, y: 100 }, children: [ @@ -30,12 +30,9 @@ const elements = ref>([ const onConnect = (params: Edge | Connection) => addEdge(params, elements.value)