docs: Added connection type and custom connection type examples

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

@@ -0,0 +1,30 @@
+<f-flow fDraggable (fLoaded)="onLoaded()">
+  <f-canvas>
+    <f-connection [fReassignDisabled]="true" fType="straight" fOutputId="1" fInputId="2">
+    </f-connection>
+    <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 0 }" fNodeOutput fOutputId="1" fOutputConnectableSide="right">
+      I'm a node
+    </div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 200, y: 50 }" fNodeInput fInputId="2" fInputConnectableSide="left">
+      I'm a node
+    </div>
+
+    <f-connection [fReassignDisabled]="true" fType="segment" fOutputId="3" fInputId="4">
+    </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: 200, y: 200 }" fNodeInput fInputId="4" fInputConnectableSide="left">
+      I'm a node
+    </div>
+
+    <f-connection [fReassignDisabled]="true" fType="bezier" fOutputId="5" fInputId="6">
+    </f-connection>
+    <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 300 }" fNodeOutput fOutputId="5" fOutputConnectableSide="right">
+      I'm a node
+    </div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 200, y: 350 }" fNodeInput fInputId="6" fInputConnectableSide="left">
+      I'm a node
+    </div>
+  </f-canvas>
+</f-flow>

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

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

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

@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
+import { FCanvasComponent, FFlowModule } from '@foblex/flow';
+
+@Component({
+  selector: 'connection-types',
+  styleUrls: [ './connection-types.component.scss' ],
+  templateUrl: './connection-types.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    FFlowModule
+  ]
+})
+export class ConnectionTypesComponent {
+
+  @ViewChild(FCanvasComponent, { static: true })
+  public fCanvas!: FCanvasComponent;
+
+  public onLoaded(): void {
+    this.fCanvas.resetScaleAndCenter(false);
+  }
+}

projects/f-examples/connections/custom-connection-type/custom-connection-type.component.html

@@ -0,0 +1,21 @@
+<f-flow fDraggable (fLoaded)="onLoaded()">
+  <f-canvas>
+    <f-connection [fReassignDisabled]="true" fType="offset_straight" fOutputId="1" fInputId="2">
+    </f-connection>
+    <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 0 }" fNodeOutput fOutputId="1" fOutputConnectableSide="right">
+      I'm a node
+    </div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 200, y: 50 }" fNodeInput fInputId="2" fInputConnectableSide="left">
+      I'm a node
+    </div>
+
+    <f-connection [fReassignDisabled]="true" fType="circle" fOutputId="3" fInputId="4">
+    </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: 200, y: 200 }" fNodeInput fInputId="4" fInputConnectableSide="left">
+      I'm a node
+    </div>
+  </f-canvas>
+</f-flow>

projects/f-examples/connections/custom-connection-type/custom-connection-type.component.scss

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

projects/f-examples/connections/custom-connection-type/custom-connection-type.component.ts

@@ -0,0 +1,68 @@
+import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
+import {
+  F_CONNECTION_BUILDERS,
+  FCanvasComponent,
+  FFlowModule,
+  IFConnectionBuilder,
+  IFConnectionBuilderRequest,
+  IFConnectionBuilderResponse
+} from '@foblex/flow';
+import { IPoint, PointExtensions } from '@foblex/2d';
+
+class OffsetStraightBuilder implements IFConnectionBuilder {
+
+  public handle(request: IFConnectionBuilderRequest): IFConnectionBuilderResponse {
+    const { source, target } = request;
+    const path = `M ${ source.x } ${ source.y } L ${ source.x + 20 } ${ source.y } L ${ target.x - 20 } ${ target.y } L ${ target.x } ${ target.y }`;
+
+    return { path, connectionCenter: { x: 0, y: 0 }, penultimatePoint: PointExtensions.initialize(target.x - 20, target.y) };
+  }
+}
+
+class CircleConnectionBuilder implements IFConnectionBuilder {
+
+  public handle(request: IFConnectionBuilderRequest): IFConnectionBuilderResponse {
+    const { source, target } = request;
+    const d = this.getD(request);
+    const path = `M ${ source.x } ${ source.y } S${ d.x } ${ d.y } ${ target.x } ${ target.y }`;
+    return { path, connectionCenter: { x: 0, y: 0 }, penultimatePoint: d };
+  }
+
+  private getD(request: IFConnectionBuilderRequest): IPoint {
+    const offset: number = request.offset;
+    const cx: number = (request.source.x + request.radius + request.target.x) / 2;
+    const cy: number = (request.source.y + request.radius + request.target.y) / 2;
+    const dx: number = cx + (offset * (request.source.y - request.target.y)) / Math.sqrt(Math.pow(request.source.x - request.target.x, 2) + Math.pow(request.source.y - request.target.y, 2)) || cx;
+    const dy: number = cy - (offset * (request.source.x - request.target.x)) / Math.sqrt(Math.pow(request.source.x - request.target.x, 2) + Math.pow(request.source.y - request.target.y, 2)) || cy;
+
+    return { x: dx, y: dy };
+  }
+}
+
+const connectionBuilders = {
+  [ 'offset_straight' ]: new OffsetStraightBuilder(),
+  [ 'circle' ]: new CircleConnectionBuilder()
+};
+
+@Component({
+  selector: 'custom-connection-type',
+  styleUrls: [ './custom-connection-type.component.scss' ],
+  templateUrl: './custom-connection-type.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  providers: [
+    { provide: F_CONNECTION_BUILDERS, useValue: connectionBuilders }
+  ],
+  imports: [
+    FFlowModule
+  ]
+})
+export class CustomConnectionTypeComponent {
+
+  @ViewChild(FCanvasComponent, { static: true })
+  public fCanvas!: FCanvasComponent;
+
+  public onLoaded(): void {
+    this.fCanvas.resetScaleAndCenter(false);
+  }
+}

projects/f-guides-examples/custom-connection-type/custom-connection-type.component.ts

@@ -8,7 +8,6 @@ import {
 } from '@foblex/flow';
 import { IPoint, PointExtensions } from '@foblex/2d';
 
-
 class OffsetStraightBuilder implements IFConnectionBuilder {
 
   public handle(request: IFConnectionBuilderRequest): IFConnectionBuilderResponse {

public/markdown/examples/connection-types.md

@@ -0,0 +1,17 @@
+# Connection Types
+
+## Description
+
+This guide shows how to set up different connection types, allowing for different types of connections to be made between connectors.
+
+## Example
+
+::: ng-component <connection-types></connection-types> [height]="600"
+[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/connection-types/connection-types.component.html
+[component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/connection-types/connection-types.component.ts
+[component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/connection-types/connection-types.component.scss
+[common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss
+:::
+
+
+

public/markdown/examples/custom-connection-type.md

@@ -0,0 +1,18 @@
+# Custom Connection Type
+
+## Description
+
+This guide shows how to create a custom connection type, allowing for a custom connection style to be applied to connections between connectors.
+
+## Example
+
+::: ng-component <custom-connection-type></custom-connection-type> [height]="600"
+[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/custom-connection-type/custom-connection-type.component.html
+[component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/custom-connection-type/custom-connection-type.component.ts
+[component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/custom-connection-type/custom-connection-type.component.scss
+[common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss
+:::
+
+
+
+

public/markdown/examples/environment.ts

@@ -52,6 +52,8 @@ function createEnvironment(): IDocsEnvironment {
       { 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: 'connection-types', component: import('../../../projects/f-examples/connections/connection-types/connection-types.component') },
+      { tag: 'custom-connection-type', component: import('../../../projects/f-examples/connections/custom-connection-type/custom-connection-type.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') },
@@ -248,10 +250,26 @@ function connectionGroup(): INavigationGroup {
         image_height: 600,
         image_type: 'image/png',
       },
-      // {
-      //   link: 'connection-types',
-      //   text: 'Connection Types',
-      // },
+      {
+        link: 'connection-types',
+        text: 'Connection Types',
+        description: 'Learn how to set different connection types. This example demonstrates how to create connections with different types, providing a comprehensive guide to building interactive flow-based diagrams.',
+        image: './previews/examples/connection-types.light.png',
+        image_dark: './previews/examples/connection-types.dark.png',
+        image_width: 791,
+        image_height: 600,
+        image_type: 'image/png',
+      },
+      {
+        link: 'custom-connection-type',
+        text: 'Custom Connection Type',
+        description: 'Explore how to create custom connection types. This example demonstrates how to define custom connection types, providing a comprehensive guide to building interactive flow-based diagrams.',
+        image: './previews/examples/custom-connection-type.light.png',
+        image_dark: './previews/examples/custom-connection-type.dark.png',
+        image_width: 791,
+        image_height: 600,
+        image_type: 'image/png',
+      },
       // {
       //   link: 'connection-behaviors',
       //   text: 'Connection Behaviors',