From a983858acf0265ab3f6d0e63da25386b6e4397b7 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 12 Dec 2021 14:07:06 +0100
Subject: [PATCH] update(examples): use computedPosition in GroupNode.vue

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 examples/Nesting/GroupNode.vue | 22 ++++++++++++----------
 examples/Nesting/Nesting.vue   |  9 +++------
 2 files changed, 15 insertions(+), 16 deletions(-)

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
   }
 })
 </script>
 <template>
   <div class="vue-flow__group-node">
     <Handle type="target" :position="Position.Top" />
-    <strong>Group {{ data.label }}</strong>
+    <strong>Group {{ label }}</strong>
     <Handle type="source" :position="Position.Bottom" />
   </div>
 </template>
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<Elements<{ label: string; group?: string }>>([
   { 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<Elements<{ label: string; group?: string }>>([
 const onConnect = (params: Edge | Connection) => addEdge(params, elements.value)
 </script>
 <template>
-  <VueFlow v-model="elements" :node-types="['group-a', 'group-b']" @connect="onConnect">
-    <template #node-group-a="aProps">
+  <VueFlow v-model="elements" @connect="onConnect">
+    <template #node-group="aProps">
       <GroupNode v-bind="aProps" />
     </template>
-    <template #node-group-b="bProps">
-      <GroupNode v-bind="bProps" />
-    </template>
   </VueFlow>
 </template>