docs: Added custom connection type example

Author: siarheihuzarevich

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

@@ -3,5 +3,9 @@
     <f-connection fText="offset_straight" [fReassignDisabled]="true" fType="offset_straight" fOutputId="output1" fInputId="input1"></f-connection>
     <div fNode fDragHandle [fNodePosition]="{ x: 24, y: 24 }" fNodeOutput fOutputId="output1" fOutputConnectableSide="right">drag me</div>
     <div fNode fDragHandle [fNodePosition]="{ x: 144, y: 140 }" fNodeInput fInputId="input1" fInputConnectableSide="left">drag me</div>
+
+    <f-connection fText="circle" [fReassignDisabled]="true" fType="circle" fOutputId="output2" fInputId="input2"></f-connection>
+    <div fNode fDragHandle [fNodePosition]="{ x: 244, y: 24 }" fNodeOutput fOutputId="output2" fOutputConnectableSide="bottom">drag me</div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 468, y: 24 }" fNodeInput fInputId="input2" fInputConnectableSide="bottom">drag me</div>
   </f-canvas>
 </f-flow>

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

@@ -6,6 +6,7 @@ import {
   IFConnectionBuilderRequest,
   IFConnectionBuilderResponse
 } from '@foblex/flow';
+import { IPoint } from '@foblex/core';
 
 
 class OffsetStraightBuilder implements IFConnectionBuilder {
@@ -18,8 +19,29 @@ class OffsetStraightBuilder implements IFConnectionBuilder {
   }
 }
 
+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 } };
+  }
+
+  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()
+  [ 'offset_straight' ]: new OffsetStraightBuilder(),
+  [ 'circle' ]: new CircleConnectionBuilder()
 };
 
 

projects/f-flow/src/domain/clear-selection/clear-selection.execution.ts

@@ -13,9 +13,7 @@ export class ClearSelectionExecution implements IExecution<ClearSelectionRequest
   }
 
   public handle(request: ClearSelectionRequest): void {
-    this.fDraggableDataContext.selectedItems.forEach((x) => {
-      x.deselect();
-    });
+    this.fDraggableDataContext.selectedItems.forEach((x) => x.deselect());
     this.fDraggableDataContext.selectedItems = [];
     this.fDraggableDataContext.isSelectedChanged = true;
   }

projects/f-flow/src/domain/select-all/select-all.execution.ts

@@ -1,4 +1,3 @@
-import { IHandler } from '@foblex/core';
 import { SelectAllRequest } from './select-all.request';
 import { Injectable } from '@angular/core';
 import { FDraggableDataContext } from '../../f-draggable';

projects/f-flow/src/domain/update-item-layer/update-item-layer.execution.ts

@@ -7,14 +7,23 @@ import { FExecutionRegister, IExecution } from '../../infrastructure';
 export class UpdateItemLayerExecution implements IExecution<UpdateItemLayerRequest, void> {
 
   public handle(request: UpdateItemLayerRequest): void {
+
     const elements = Array.from(request.itemContainer.children);
-    const targetIndex: number = elements.findIndex((x) => x === request.item.hostElement);
-    if (targetIndex !== -1 && targetIndex !== elements.length - 1) {
-      const afterElements = elements.splice(targetIndex + 1);
-      afterElements.forEach((x) => {
+    const index = this.getTargetIndex(elements, request.item.hostElement);
+
+    if (this.isNotLastElement(elements, index)) {
+      elements.splice(index + 1).forEach((x) => {
         request.itemContainer.removeChild(x);
         request.itemContainer.insertBefore(x, request.item.hostElement);
       });
     }
   }
+
+  private getTargetIndex(elements: Element[], item: Element): number {
+    return elements.findIndex((x) => x === item);
+  }
+
+  private isNotLastElement(elements: Element[], index: number): boolean {
+    return index !== -1 && index !== elements.length - 1;
+  }
 }

projects/f-flow/src/f-draggable/canvas/canvas-move-finalize/canvas-move-finalize.execution.ts

@@ -13,8 +13,6 @@ export class CanvasMoveFinalizeExecution implements IExecution<CanvasMoveFinaliz
   }
 
   public handle(request: CanvasMoveFinalizeRequest): void {
-    this.fDraggableDataContext.draggableItems.forEach((x) => {
-      x.complete?.();
-    });
+    this.fDraggableDataContext.draggableItems.forEach((x) => x.complete?.());
   }
 }