feat(nodes): nested boundaries

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

examples/Nesting/GroupNode.vue

@@ -19,7 +19,6 @@ store.hooks.nodeDragStop.on(({ node }) => {
     node.data.label = `In ${props.id}`
     node.data.group = props.id
   } else if (node.data.group === props.id) {
-    console.log(node)
     node.data.group = undefined
     node.data.label = node.id
   }

examples/Nesting/Nesting.vue

@@ -3,12 +3,17 @@ import GroupNode from './GroupNode.vue'
 import { VueFlow, Elements, Node, Edge, Connection, addEdge } from '~/index'
 
 const elements = ref<Elements<{ label: string; group?: string }>>([
-  { id: 'node-1', data: { label: 'node-1', group: undefined }, position: { x: 250, y: 5 } },
+  {
+    id: 'node-1',
+    data: { label: 'node-1', group: undefined },
+    position: { x: 250, y: 5 },
+    parentNode: 'group-a',
+    extent: 'parent',
+  },
   { id: 'node-2', data: { label: 'node-2', group: undefined }, position: { x: 50, y: 5 } },
   {
     id: 'group-a',
-    type: 'group-a',
-    style: { zIndex: 2 },
+    style: { zIndex: 2, width: '300px', height: '300px' },
     selectable: false,
     data: { label: 'A' },
     position: { x: 50, y: 100 },