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'