docs: Added snap-connection documentation and example

Author: siarheihuzarevich

projects/f-examples/_flow-common.scss

@@ -6,6 +6,7 @@
   --node-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
 
   --connection-color: rgba(60, 60, 67, 0.78);
+  --snap-connection-color: rgba(60, 60, 67, 0.38);
   --connection-gradient-1: #915930;
   --connection-gradient-2: #18794e;
 
@@ -25,6 +26,7 @@
     --node-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
 
     --connection-color: rgba(235, 235, 245, 0.6);
+    --snap-connection-color: rgba(235, 235, 245, 0.2);
     --connection-gradient-1: #f9b44e;
     --connection-gradient-2: #3dd68c;
 
@@ -58,6 +60,12 @@
       fill: var(--connection-color);
       color: var(--connection-color);
     }
+
+    &.f-snap-connection {
+      .f-connection-path {
+        stroke: var(--snap-connection-color);
+      }
+    }
   }
 }
 

projects/f-examples/drag-snap-connection/drag-snap-connection.component.html

@@ -0,0 +1,16 @@
+<f-flow fDraggable (fCreateConnection)="addConnection($event)">
+  <f-canvas>
+    <f-connection-for-create></f-connection-for-create>
+    <f-snap-connection [fSnapThreshold]="50"></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: 24, y: 24 }" fNodeOutput fOutputConnectableSide="right">drag me</div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 244, y: 24 }" fNodeInput fInputConnectableSide="left">to me</div>
+
+  </f-canvas>
+</f-flow>

projects/f-examples/drag-snap-connection/drag-snap-connection.component.scss

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

projects/f-examples/drag-snap-connection/drag-snap-connection.component.ts

@@ -0,0 +1,30 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
+import { FCreateConnectionEvent, FFlowModule } from '@foblex/flow';
+
+@Component({
+  selector: 'drag-snap-connection',
+  styleUrls: [ './drag-snap-connection.component.scss' ],
+  templateUrl: './drag-snap-connection.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    FFlowModule
+  ]
+})
+export class DragSnapConnectionComponent {
+
+  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/docs/en/environment.ts

@@ -37,6 +37,7 @@ function createEnvironment(): IDocsEnvironment {
       { tag: 'custom-connection-type', component: import('../../../projects/f-examples/custom-connection-type/custom-connection-type.component') },
       { tag: 'drag-to-connect', component: import('../../../projects/f-examples/drag-to-connect/drag-to-connect.component') },
       { tag: 'drag-to-reassign', component: import('../../../projects/f-examples/drag-to-reassign/drag-to-reassign.component') },
+      { tag: 'drag-snap-connection', component: import('../../../projects/f-examples/drag-snap-connection/drag-snap-connection.component') },
       { tag: 'connectable-side', component: import('../../../projects/f-examples/connectable-side/connectable-side.component') },
       { tag: 'connection-from-outlet', component: import('../../../projects/f-examples/connection-from-outlet/connection-from-outlet.component') },
       { tag: 'connection-markers', component: import('../../../projects/f-examples/connection-markers/connection-markers.component') },
@@ -138,6 +139,11 @@ function connectionGroup(): INavigationGroup {
         text: 'Connection Marker',
         description: 'The FMarkerDirective in Foblex Flow defines start or end markers for connections within a flow, enabling customization of marker type, size, and position. It ensures precise control over the visual representation of connection endpoints using SVG elements in your diagrams.',
       },
+      {
+        link: 'f-snap-connection-component',
+        text: 'Snap Connection',
+        description: 'The FSnapConnection component in Foblex Flow allows users to create connections between nodes by snapping to the nearest input. It supports dynamic connection creation within a flow, working seamlessly with the draggable directive for flexible node interaction in diagrams and workflows.',
+      },
     ],
   }
 }

public/docs/en/f-db-management-flow.md

@@ -11,6 +11,7 @@ This example demonstrates how to use the Foblex Flow to create a database manage
 
 - Connect nodes using [f-connection-for-create](f-connection-for-create-component) component.
 - Reassign connections.
+- Snap connection.
 - Move nodes.
 - Move canvas.
 - Zoom with the `mouse wheel`, `double click` and `buttons` using [fZoom](f-zoom-directive) directive.

public/docs/en/f-snap-connection-component.md

@@ -0,0 +1,34 @@
+# Snap Connection
+
+**Selector:**  f-snap-connection
+
+It is used to help users create or reassign connections to the nearest input.
+
+## Inputs
+
+  - Similar to the [f-connection](f-connection-component) component
+
+  - `fSnapThreshold: number;` The distance in pixels at which the connection snaps to the input. Default: `20`.
+
+## Usage
+
+Add the `f-snap-connection` component to the [f-canvas](f-canvas-component). Works with [f-connection-for-create](f-connection-for-create-component) or [f-connection](f-connection-component) components.
+
+```html
+<f-flow |:|fDraggable|:|>
+  <f-canvas>
+    |:|<f-snap-connection></f-snap-connection>|:|
+  </f-canvas>
+</f-flow>
+```
+
+## Examples
+
+The following example shows how to create a connection between two nodes with snap connection.
+
+::: ng-component <drag-snap-connection></drag-snap-connection>
+[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/drag-snap-connection/drag-snap-connection.component.html
+[component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/drag-snap-connection/drag-snap-connection.component.ts
+[component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/drag-snap-connection/drag-snap-connection.component.scss
+[common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss
+:::