docs: Added auto snap example

projects/f-examples/connections/auto-snap/auto-snap.component.html

@@ -0,0 +1,19 @@
+<f-flow fDraggable (fLoaded)="onLoaded()" (fCreateConnection)="addConnection($event)">
+  <f-canvas>
+    <f-connection-for-create></f-connection-for-create>
+    <f-snap-connection [fSnapThreshold]="100"></f-snap-connection>
+
+    @for (connection of connections; track connection.inputId)  {
+      <f-connection [fReassignDisabled]="true"
+                    [fOutputId]="connection.outputId" [fInputId]="connection.inputId">
+      </f-connection>
+    }
+
+    <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 24 }" fNodeOutput fOutputConnectableSide="right">drag me</div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 24 }" fNodeInput fInputConnectableSide="left">to me</div>
+
+  </f-canvas>
+</f-flow>
+<div class="toolbar">
+  <button class="f-button" (click)="onDeleteConnections()">Delete Connections</button>
+</div>

projects/f-examples/connections/auto-snap/auto-snap.component.scss

@@ -0,0 +1,14 @@
+@use "../../flow-common";
+
+::ng-deep auto-snap {
+  @include flow-common.connection;
+}
+
+.f-node {
+  @include flow-common.node;
+}
+
+.toolbar {
+  @include flow-common.toolbar;
+}
+

projects/f-examples/connections/auto-snap/auto-snap.component.ts

@@ -0,0 +1,42 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ViewChild } from '@angular/core';
+import { FCanvasComponent, FCreateConnectionEvent, FFlowModule } from '@foblex/flow';
+
+@Component({
+  selector: 'auto-snap',
+  styleUrls: [ './auto-snap.component.scss' ],
+  templateUrl: './auto-snap.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    FFlowModule
+  ]
+})
+export class AutoSnapComponent {
+
+  @ViewChild(FCanvasComponent, { static: true })
+  public fCanvas!: FCanvasComponent;
+
+  public connections: { outputId: string, inputId: string }[] = [];
+
+  constructor(
+    private changeDetectorRef: ChangeDetectorRef
+  ) {
+  }
+
+  public addConnection(event: FCreateConnectionEvent): void {
+    if(!event.fInputId) {
+      return;
+    }
+    this.connections.push({ outputId: event.fOutputId, inputId: event.fInputId });
+    this.changeDetectorRef.detectChanges();
+  }
+
+  public onLoaded(): void {
+    this.fCanvas.resetScaleAndCenter(false);
+  }
+
+  public onDeleteConnections(): void {
+    this.connections = [];
+    this.changeDetectorRef.detectChanges();
+  }
+}

public/markdown/examples/auto-snap.md

@@ -0,0 +1,17 @@
+# Auto Snap
+
+## Description
+
+This guide shows how to create connections when a connection is dropped near a connector, providing a comprehensive approach to building interactive flow-based diagrams.
+
+## Example
+
+::: ng-component <auto-snap></auto-snap> [height]="600"
+[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/auto-snap/auto-snap.component.html
+[component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/auto-snap/auto-snap.component.ts
+[component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/auto-snap/auto-snap.component.scss
+[common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss
+:::
+
+
+

public/markdown/examples/environment.ts

@@ -51,6 +51,7 @@ function createEnvironment(): IDocsEnvironment {
       { tag: 'drag-to-reassign', component: import('../../../projects/f-examples/connections/drag-to-reassign/drag-to-reassign.component') },
       { tag: 'create-node-on-connection-drop', component: import('../../../projects/f-examples/connections/create-node-on-connection-drop/create-node-on-connection-drop.component') },
       { tag: 'remove-connection-on-drop', component: import('../../../projects/f-examples/connections/remove-connection-on-drop/remove-connection-on-drop.component') },
+      { tag: 'auto-snap', component: import('../../../projects/f-examples/connections/auto-snap/auto-snap.component') },
 
       { tag: 'dagre-layout-example', component: import('../../../projects/f-examples/layouts/dagre-layout-example/dagre-layout-example.component') },
       { tag: 'elkjs-layout-example', component: import('../../../projects/f-examples/layouts/elkjs-layout-example/elkjs-layout-example.component') },
@@ -236,11 +237,17 @@ function connectionGroup(): INavigationGroup {
         image_width: 791,
         image_height: 600,
         image_type: 'image/png',
-      }
-      // {
-      //   link: 'proximity-connect',
-      //   text: 'Proximity Connect',
-      // },
+      },
+      {
+        link: 'auto-snap',
+        text: 'Auto Snap',
+        description: 'Discover how to automatically snap connections to nodes. This example demonstrates how to snap connections to nodes automatically, providing a comprehensive guide to building interactive flow-based diagrams.',
+        image: './previews/examples/auto-snap.light.png',
+        image_dark: './previews/examples/auto-snap.dark.png',
+        image_width: 791,
+        image_height: 600,
+        image_type: 'image/png',
+      },
       // {
       //   link: 'connection-types',
       //   text: 'Connection Types',

src/app/app.component.html

@@ -1,4 +1,4 @@
 <router-outlet></router-outlet>
-<!--<button class="take-screenshot" (click)="takeScreenshot()">-->
-<!--  Take Screenshot-->
-<!--</button>-->
+<button class="take-screenshot" (click)="takeScreenshot()">
+  Take Screenshot
+</button>