feat(examples): Add grouping example

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

examples/Basic/Basic.vue

@@ -67,6 +67,9 @@ const toggleclasss = () => {
     @node-click="onElementClick"
     @load="onLoad"
   >
+    <Background />
+    <MiniMap />
+    <Controls />
     <div style="position: absolute; right: 10px; top: 10px; z-index: 4">
       <button style="margin-right: 5px" @click="resetTransform">reset transform</button>
       <button style="margin-right: 5px" @click="updatePos">change pos</button>

examples/Nesting/GroupNode.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { Handle, Position, getNodesInside, useVueFlow } from '~/index'
+import type { NodeProps } from '~/types/node'
+
+const props = defineProps<NodeProps>()
+const store = useVueFlow()
+store.hooks.nodeDragStop.on(({ node }) => {
+  const nodes = getNodesInside(
+    store.getNodes,
+    {
+      height: props.__vf.height,
+      width: props.__vf.width,
+      x: props.position.x,
+      y: props.position.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(node)
+    node.data.group = undefined
+    node.data.label = node.id
+  }
+})
+</script>
+<template>
+  <div class="vue-flow__group-node">
+    <Handle type="target" :position="Position.Top" />
+    <strong>Group {{ data.label }}</strong>
+    <Handle type="source" :position="Position.Bottom" />
+  </div>
+</template>
+<style>
+.vue-flow__group-node {
+  padding: 15px;
+  width: 300px;
+  height: 300px;
+  border: solid 1px black;
+}
+</style>

examples/Nesting/Nesting.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+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-2', data: { label: 'node-2', group: undefined }, position: { x: 50, y: 5 } },
+  {
+    id: 'group-a',
+    type: 'group-a',
+    style: { zIndex: 2 },
+    selectable: false,
+    data: { label: 'A' },
+    position: { x: 50, y: 100 },
+  },
+  {
+    id: 'group-b',
+    type: 'group-b',
+    style: { zIndex: 2 },
+    selectable: false,
+    data: { label: 'B' },
+    position: { x: 500, y: 100 },
+  },
+])
+
+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">
+      <GroupNode v-bind="aProps" />
+    </template>
+    <template #node-group-b="bProps">
+      <GroupNode v-bind="bProps" />
+    </template>
+  </VueFlow>
+</template>

examples/router.ts

@@ -109,6 +109,10 @@ export const routes: RouterOptions['routes'] = [
     path: '/zoom-pan-helper',
     component: () => import('./ZoomPanHelper/ZoomPanHelperExample.vue'),
   },
+  {
+    path: '/nesting',
+    component: () => import('./Nesting/Nesting.vue'),
+  },
 ]
 
 export const router = createRouter({