docs: Added Connection Text example

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

@@ -1,16 +1,28 @@
 <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>
+    <f-connection-for-create fType="segment"></f-connection-for-create>
+    <f-snap-connection [fSnapThreshold]="100" fType="segment"></f-snap-connection>
 
     @for (connection of connections; track connection.inputId)  {
-      <f-connection [fReassignDisabled]="true"
+      <f-connection [fReassignDisabled]="true" fType="segment"
                     [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>
+    <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 24 }">
+      <div fNodeOutput fOutputConnectableSide="left" class="left"></div>
+      <div fNodeOutput fOutputConnectableSide="top" class="top"></div>
+      <div fNodeOutput fOutputConnectableSide="right" class="right"></div>
+      <div fNodeOutput fOutputConnectableSide="bottom" class="bottom"></div>
+      I'm a node
+    </div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 24 }">
+      <div fNodeInput fInputConnectableSide="left" class="left"></div>
+      <div fNodeInput fInputConnectableSide="top" class="top"></div>
+      <div fNodeInput fInputConnectableSide="right" class="right"></div>
+      <div fNodeInput fInputConnectableSide="bottom" class="bottom"></div>
+      I'm a node
+    </div>
 
   </f-canvas>
 </f-flow>

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

@@ -8,6 +8,18 @@
   @include flow-common.node;
 }
 
+.f-node-input, .f-node-output {
+  &:not(.f-node) {
+    @include flow-common.connectors;
+  }
+}
+
+.f-node-output {
+  &:not(.f-node) {
+    border-radius: 4px;
+  }
+}
+
 .toolbar {
   @include flow-common.toolbar;
 }

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

@@ -0,0 +1,41 @@
+<f-flow fDraggable (fLoaded)="onLoaded()">
+  <f-canvas>
+    <f-connection [fReassignDisabled]="true"
+                  fOutputId="1" fInputId="2" fBehavior="fixed" fType="segment" [fTextStartOffset]="fTextStartOffset" fText="Text 1">
+    </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: 300, y: 0 }" fNodeInput fInputId="2" fInputConnectableSide="top">
+      I'm a node
+    </div>
+
+    <f-connection [fReassignDisabled]="true" fOutputId="3" fInputId="4" fBehavior="floating" fText="Text 2" [fTextStartOffset]="fTextStartOffset">
+    </f-connection>
+    <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 150 }" fNodeOutput fOutputId="3" fOutputConnectableSide="right">
+      I'm a node
+    </div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 150 }" fNodeInput fInputId="4" fInputConnectableSide="left">
+      I'm a node
+    </div>
+
+    <f-connection [fReassignDisabled]="true" fOffset="10" fOutputId="5" fInputId="6" fType="bezier" fBehavior="fixed" fText="Text 3" [fTextStartOffset]="fTextStartOffset">
+    </f-connection>
+    <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 300 }" fNodeOutput fOutputId="5" fOutputConnectableSide="bottom">
+      I'm a node
+    </div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 300 }" fNodeInput fInputId="6" fInputConnectableSide="top">
+      I'm a node
+    </div>
+  </f-canvas>
+</f-flow>
+<div class="toolbar">
+  <mat-form-field appearance="fill" class="f-form-field">
+    <mat-label>Text Offset</mat-label>
+    <mat-select panelClass="f-select-panel" [(value)]="fTextStartOffset">
+      @for (option of offsetOptions; track option) {
+        <mat-option [value]="option">{{ option }}</mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
+</div>

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

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

projects/f-examples/connections/connection-text/connection-text.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-text',
+  styleUrls: [
+    '../../_mdc-controls.scss',
+    './connection-text.component.scss'
+  ],
+  templateUrl: './connection-text.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    FFlowModule,
+    MatFormField,
+    MatLabel,
+    MatOption,
+    MatSelect
+  ]
+})
+export class ConnectionTextComponent {
+
+  protected offsetOptions: string[] = [ '10', '25%', '30', '50%', '75', '100%' ];
+
+  protected fTextStartOffset: string = '50%';
+
+  @ViewChild(FCanvasComponent, { static: true })
+  protected fCanvas!: FCanvasComponent;
+
+  protected onLoaded(): void {
+    this.fCanvas.resetScaleAndCenter(false);
+  }
+}

projects/f-examples/connectors/connectability-check/connectability-check.component.scss

@@ -15,6 +15,12 @@
   }
 }
 
+.f-node-output {
+  &:not(.f-node) {
+    border-radius: 4px;
+  }
+}
+
 .f-connections-dragging {
   .f-node-input {
     &:not(.f-node-input-can-be-connected-to) {

projects/f-examples/connectors/limiting-connections/limiting-connections.component.scss

@@ -23,6 +23,12 @@
   }
 }
 
+.f-node-output {
+  &:not(.f-node) {
+    border-radius: 4px;
+  }
+}
+
 .toolbar {
   @include flow-common.toolbar;
 }

projects/f-flow/src/f-connection/common/f-connection-text/f-connection-text-path.directive.ts

@@ -35,7 +35,6 @@ export class FConnectionTextPathDirective implements IHasHostElement, OnInit {
   }
 
   public ngOnInit(): void {
-    this.hostElement.setAttribute('startOffset', this.base.fTextStartOffset || '50%');
     this.hostElement.setAttribute('text-anchor', `middle`);
     this.symbolWidth = this.getSymbolWidth(this.base.fText || '');
   }
@@ -44,6 +43,10 @@ export class FConnectionTextPathDirective implements IHasHostElement, OnInit {
     return this.hostElement.getBBox();
   }
 
+  public redraw(): void {
+    this.hostElement.setAttribute('startOffset', this.base.fTextStartOffset || '50%');
+  }
+
   private getFontStyles(element: SVGTextPathElement): { fontSize: string, fontFamily: string } {
     const computedStyles = this.fBrowser.window.getComputedStyle(element);
     return {

projects/f-flow/src/f-connection/common/f-connection-text/f-connection-text.component.ts

@@ -46,7 +46,7 @@ export class FConnectionTextComponent implements IConnectionText {
   }
 
   public redraw(line: ILine): void {
-
+    this.textPathDirective.redraw();
     const isTextReverse: boolean = FConnectionTextComponent.isTextReverse(line);
     const dyValue = this.calculateDy(this.textPathDirective.fontSize, isTextReverse);
 

projects/f-flow/src/f-draggable/node-resize/node-resize-preparation/node-resize-preparation.execution.ts

@@ -40,11 +40,9 @@ export class NodeResizePreparationExecution implements IExecution<NodeResizePrep
     this._fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
       .elementTransform(this._fHost).div(this._transform.scale);
 
+    const resizeHandleType = EFResizeHandleType[ this._getHandleType(request.event.targetElement) ];
     this._fDraggableDataContext.draggableItems = [
-      new NodeResizeDragHandler(
-        this._fNode!,
-        EFResizeHandleType[ this._getHandleType(request.event.targetElement) ]
-      )
+      new NodeResizeDragHandler(this._fNode!, resizeHandleType)
     ];
   }
 

public/markdown/examples/auto-snap.md

@@ -2,7 +2,7 @@
 
 ## Description
 
-This guide explains how to automatically snap connections when they are dropped near a connector, offering a comprehensive solution for building interactive flow-based diagrams.
+This guide explains how to automatically snap connections when they are dropped near a connector, offering a comprehensive solution for building interactive flow-based diagrams. To implement this functionality, you need to add the `<f-snap-connection>` component inside the `<f-canvas>`. This component handles temporary connection display and snapping to the nearest connector when the threshold is reached.
 
 ## Example
 

public/markdown/examples/connection-text.md

@@ -0,0 +1,19 @@
+# Connection Text
+
+## Description
+
+This guide demonstrates how to add text to connections in Foblex Flow for Angular. To add text to a connection, you need to set the `fText` property of the connection component. The text will be displayed in the middle of the connection line. Also, you can set `fTextStartOffset` parameter to adjust the text position along the connection line.
+You can customize the text appearance using css styles.
+
+## Example
+
+::: ng-component <connection-text></connection-text> [height]="600"
+[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/connection-text/connection-text.component.html
+[component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/connection-text/connection-text.component.ts
+[component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/connection-text/connection-text.component.scss
+[common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss
+:::
+
+
+
+

public/markdown/examples/environment.ts

@@ -133,6 +133,10 @@ function createEnvironment(): IDocsEnvironment {
         tag: 'connection-markers',
         component: import('../../../projects/f-examples/connections/connection-markers/connection-markers.component')
       },
+      {
+        tag: 'connection-text',
+        component: import('../../../projects/f-examples/connections/connection-text/connection-text.component')
+      },
       {
         tag: 'custom-connections',
         component: import('../../../projects/f-examples/connections/custom-connections/custom-connections.component')
@@ -462,20 +466,14 @@ function connectionGroup(): INavigationGroup {
         description: 'Automatically snap connections to nodes in Foblex Flow, enabling easier diagram creation in Angular.',
         image: './previews/examples/auto-snap.light.png',
         image_dark: './previews/examples/auto-snap.dark.png',
-        image_width: 791,
+        image_width: 781,
         image_height: 600,
         image_type: 'image/png',
+        badge: {
+          text: 'Updated',
+          type: 'warning'
+        }
       },
-      // {
-      //   link: 'connection-selection',
-      //   text: 'Connection Selection',
-      //   description: 'Select connections in Foblex Flow diagrams for Angular.',
-      //   image: './previews/examples/connection-selection.light.png',
-      //   image_dark: './previews/examples/connection-selection.dark.png',
-      //   image_width: 806,
-      //   image_height: 600,
-      //   image_type: 'image/png',
-      // },
       {
         link: 'connection-types',
         text: 'Connection Types',
@@ -516,6 +514,20 @@ function connectionGroup(): INavigationGroup {
         image_height: 600,
         image_type: 'image/png',
       },
+      {
+        link: 'connection-text',
+        text: 'Connection Text',
+        description: 'Add text to connections in Foblex Flow diagrams for Angular.',
+        image: './previews/examples/connection-text.light.png',
+        image_dark: './previews/examples/connection-text.dark.png',
+        image_width: 781,
+        image_height: 600,
+        image_type: 'image/png',
+        badge: {
+          text: 'New',
+          type: 'info'
+        }
+      },
       {
         link: 'custom-connections',
         text: 'Custom Connections',
@@ -526,14 +538,6 @@ function connectionGroup(): INavigationGroup {
         image_height: 600,
         image_type: 'image/png',
       },
-      // {
-      //   link: 'connection-text',
-      //   text: 'Connection Text',
-      // },
-      // {
-      //   link: 'connection-center',
-      //   text: 'Connection Center',
-      // },
     ]
   }
 }

public/markdown/examples/node-selection.md

@@ -2,7 +2,7 @@
 
 ## Description
 
-This guide demonstrates how to select nodes in Foblex Flow for Angular. Use a `mouse click` to select a single node, or hold the `SHIFT` or `CTRL/CMD` key `while clicking` to select multiple nodes.
+This guide demonstrates how to select nodes in Foblex Flow for Angular. Use a `mouse click` to select a single node, or hold the `CTRL/CMD` key `while clicking` to select multiple nodes.
 ## Example
 
 ::: ng-component <node-selection></node-selection> [height]="600"