docs: Added Connection Center example

projects/f-examples/connections/connection-center/connection-center.component.html

@@ -0,0 +1,24 @@
+<f-flow fDraggable (fLoaded)="onLoaded()">
+  <f-canvas>
+    <f-connection [fReassignDisabled]="true"
+                  fOutputId="1" fInputId="2" fBehavior="fixed" fType="segment">
+      <div fConnectionCenter>
+        Connection Center
+        <mat-form-field appearance="fill" class="f-form-field">
+          <mat-label>Select</mat-label>
+          <mat-select panelClass="f-select-panel" [(value)]="value">
+            @for (option of options; track option) {
+              <mat-option [value]="option">{{ option }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      </div>
+    </f-connection>
+    <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 0 }" fNodeOutput fOutputId="1" fOutputConnectableSide="bottom">
+      I'm a node
+    </div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 400, y: 100 }" fNodeInput fInputId="2" fInputConnectableSide="top">
+      I'm a node
+    </div>
+  </f-canvas>
+</f-flow>

projects/f-examples/connections/connection-center/connection-center.component.scss

@@ -0,0 +1,20 @@
+@use "../../flow-common";
+
+::ng-deep connection-center {
+  @include flow-common.connection;
+
+  .f-connection-center {
+    padding: 12px;
+    background: var(--node-background-color);
+    border-radius: var(--node-border-radius);
+    border: 0.2px solid var(--node-border-color);
+  }
+}
+
+.f-node {
+  @include flow-common.node;
+}
+
+.toolbar {
+  @include flow-common.toolbar;
+}

projects/f-examples/connections/connection-center/connection-center.component.ts

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
+import { FCanvasComponent, FFlowModule } from '@foblex/flow';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatOption } from '@angular/material/core';
+import { MatSelect } from '@angular/material/select';
+
+@Component({
+  selector: 'connection-center',
+  styleUrls: [
+    '../../_mdc-controls.scss',
+    './connection-center.component.scss'
+  ],
+  templateUrl: './connection-center.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    FFlowModule,
+    MatFormField,
+    MatLabel,
+    MatOption,
+    MatSelect
+  ]
+})
+export class ConnectionCenterComponent {
+
+  protected options: string[] = [ 'Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5' ];
+
+  protected value: string = 'Option 3';
+
+  @ViewChild(FCanvasComponent, { static: true })
+  protected fCanvas!: FCanvasComponent;
+
+  protected onLoaded(): void {
+    this.fCanvas.resetScaleAndCenter(false);
+  }
+}

public/markdown/examples/connection-center.md

@@ -0,0 +1,21 @@
+# Connection Center
+
+## Description
+
+This page explains the `fConnectionCenter` directive in Foblex Flow for Angular. The `fConnectionCenter` directive allows you to insert any custom content inside a block, which will be positioned relative to the center of the connection line. This is useful for adding labels, icons, or other elements that need to be dynamically displayed at the center of a connection.
+The directive provides flexible styling and positioning, allowing you to fully customize the appearance and behavior of the centered content.
+
+
+## Example
+
+::: ng-component <connection-center></connection-center> [height]="600"
+[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/connection-center/connection-center.component.html
+[component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/connection-center/connection-center.component.ts
+[component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/connection-center/connection-center.component.scss
+[common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss
+:::
+
+
+
+
+

public/markdown/examples/environment.ts

@@ -137,6 +137,10 @@ function createEnvironment(): IDocsEnvironment {
         tag: 'connection-text',
         component: import('../../../projects/f-examples/connections/connection-text/connection-text.component')
       },
+      {
+        tag: 'connection-center',
+        component: import('../../../projects/f-examples/connections/connection-center/connection-center.component')
+      },
       {
         tag: 'custom-connections',
         component: import('../../../projects/f-examples/connections/custom-connections/custom-connections.component')
@@ -528,6 +532,20 @@ function connectionGroup(): INavigationGroup {
           type: 'info'
         }
       },
+      {
+        link: 'connection-center',
+        text: 'Connection Center',
+        description: 'Add centered content to connections with Foblex Flow for Angular',
+        image: './previews/examples/connection-center.light.png',
+        image_dark: './previews/examples/connection-center.dark.png',
+        image_width: 781,
+        image_height: 600,
+        image_type: 'image/png',
+        badge: {
+          text: 'New',
+          type: 'info'
+        }
+      },
       {
         link: 'custom-connections',
         text: 'Custom Connections',

src/app/app.component.html

@@ -1,7 +1,7 @@
 <router-outlet></router-outlet>
-<button class="take-screenshot" (click)="takeScreenshot()">
-  Take Screenshot
-</button>
+<!--<button class="take-screenshot" (click)="takeScreenshot()">-->
+<!--  Take Screenshot-->
+<!--</button>-->
 @defer (when isBrowser) {
   <f-cookie-popup/>
 }