docs: update connection-radius example

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

docs/components/examples/connection-radius/App.vue

@@ -23,7 +23,7 @@ const elements = ref([
 </script>
 
 <template>
-  <VueFlow v-model="elements" auto-connect fit-view-on-init>
+  <VueFlow v-model="elements" :connection-radius="30" auto-connect fit-view-on-init>
     <template #connection-line="{ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }">
       <ConnectionLine
         :source-x="sourceX"

docs/components/examples/connection-radius/SnappableConnectionLine.vue

@@ -45,7 +45,7 @@ const SNAP_HIGHLIGHT_COLOR = '#10b981'
 
 const MIN_DISTANCE = 75
 
-const SNAP_DISTANCE = 50
+const SNAP_DISTANCE = 30
 
 watch([() => props.targetY, () => props.targetX], (_, __, onCleanup) => {
   const closestNode = getNodes.value.reduce(

docs/components/examples/index.ts

@@ -17,7 +17,7 @@ import { HorizontalApp, HorizontalElements } from './horizontal'
 import { TeleportApp, TeleportCSS, TeleportSidebar, TeleportableNode, TeleportableUseTransition } from './teleport'
 import { TransitionApp, TransitionCSS, TransitionEdge } from './transition'
 import { IntersectionApp, IntersectionCSS, IntersectionElements } from './intersection'
-import { SnapToHandleApp, SnappableConnectionLine } from './snap-to-handle'
+import { SnapToHandleApp, SnappableConnectionLine } from './connection-radius'
 import { NodeResizerApp, ResizableNode } from './node-resizer'
 import { ToolbarApp, ToolbarNode } from './node-toolbar'
 

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>