docs: update connection-radius example

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

docs/src/.vitepress/config.ts

@@ -230,7 +230,7 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
             { text: 'Updatable Edge', link: '/examples/edges/updatable-edge' },
             { text: 'Custom Connection Line', link: '/examples/edges/connection-line' },
             { text: 'Connection Validation', link: '/examples/edges/validation' },
-            { text: 'Snap To Handle', link: '/examples/edges/snap-to-handle' },
+            { text: 'Connection Radius', link: '/examples/edges/connection-radius' },
           ],
         },
       ],

docs/src/components.d.ts

@@ -36,7 +36,7 @@ declare module '@vue/runtime-core' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Sidebar: typeof import('./../components/examples/dnd/Sidebar.vue')['default']
-    SnappableConnectionLine: typeof import('./../components/examples/snap-to-handle/SnappableConnectionLine.vue')['default']
+    SnappableConnectionLine: typeof import('../components/examples/connection-radius/SnappableConnectionLine.vue')['default']
     Team: typeof import('./../components/home/Team.vue')['default']
     TeleportableNode: typeof import('./../components/examples/teleport/TeleportableNode.vue')['default']
     ToolbarNode: typeof import('./../components/examples/node-toolbar/ToolbarNode.vue')['default']

docs/src/examples/edges/connection-radius.md

@@ -0,0 +1,9 @@
+# Connection Radius
+
+This examples shows you how to use the `connectionRadius` prop.
+This prop allows you to pass a number which will be used to determine the radius at which a connection line will snap to the nearest handle.
+In addition, we create a custom connection line which will color the handles (you can omit this and just use `connectionRadius`).
+
+<div class="mt-6">
+  <Repl example="snappable"></Repl>
+</div>

docs/src/examples/edges/snap-to-handle.md

@@ -1,8 +0,0 @@
-# Snap To Handle
-
-In this example we will create a custom connection line
-that snaps to the nearest handle when the connection is dropped within distance of a handle.
-
-<div class="mt-6">
-  <Repl example="snappable"></Repl>
-</div>