docs: snappable connection line example

docs/src/.vitepress/config.ts

@@ -218,6 +218,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' },
           ],
         },
       ],

docs/src/components.d.ts

@@ -35,6 +35,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']
     Team: typeof import('./../components/home/Team.vue')['default']
     TeleportableNode: typeof import('./../components/examples/teleport/TeleportableNode.vue')['default']
     TransitionEdge: typeof import('./../components/examples/transition/TransitionEdge.vue')['default']

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

@@ -0,0 +1,8 @@
+# Custom Connection Line
+
+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>