Merge branch 'main' of https://github.com/Foblex/f-flow

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "f-flow-portal",
+  "name": "flow-documentation-portal",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
@@ -19,7 +19,7 @@
     "@angular/platform-browser": "^18.1.0",
     "@angular/platform-browser-dynamic": "^18.1.0",
     "@angular/router": "^18.1.0",
-    "@foblex/f-docs": "^1.1.9",
+    "@foblex/f-docs": "^1.2.0",
     "@foblex/core": "^1.1.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

projects/f-examples/connectable-side/connectable-side.component.scss

@@ -19,7 +19,6 @@
 
 .f-node {
   width: 100px;
-  height: 100px;
   padding: 12px;
   color: #585858;
   cursor: move;

projects/f-examples/connection-behaviour/connection-behaviour.component.scss

@@ -17,16 +17,14 @@
     }
 
     .f-connection-text {
-      fill: #BBBBBB;
-      font-size: 12px;
+      fill: #585858;
     }
   }
 }
 
 .f-node {
   opacity: 0.5;
   width: 100px;
-  height: 100px;
   padding: 12px;
   color: #585858;
   cursor: move;

projects/f-examples/connection-markers/connection-markers.component.scss

@@ -22,8 +22,7 @@
 }
 
 .f-node {
-  min-width: 100px;
-  min-height: 100px;
+  width: 100px;
   padding: 12px;
   color: #585858;
   cursor: move;
@@ -32,11 +31,11 @@
   align-items: center;
   text-align: center;
   background: #FCFDFE;
-  border-radius: 8px;
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  box-shadow: 0 0 1px 1px #E4E3E6;
 
   &:active {
-    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 0 2px 2px #E4E3E6;
   }
 }
 

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

@@ -9,6 +9,11 @@
       fill: none;
     }
 
+    .f-connection-text, .f-connection-center {
+      fill: #585858;
+      color: #585858;
+    }
+
     .f-connection-path {
       fill: none;
       stroke: #585858;
@@ -19,7 +24,6 @@
 
 .f-node {
   width: 100px;
-  height: 100px;
   padding: 12px;
   color: #585858;
   cursor: move;

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

@@ -1,6 +1,6 @@
 <f-flow fDraggable>
   <f-canvas>
-    <f-connection fText="Straight" [fReassignDisabled]="true" fType="offset_straight" fOutputId="output1" fInputId="input1"></f-connection>
+    <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-canvas>

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

@@ -10,6 +10,10 @@
       fill: none;
     }
 
+    .f-connection-text {
+      fill: #585858;
+    }
+
     .f-connection-path {
       fill: none;
       stroke: #585858;
@@ -20,7 +24,6 @@
 
 .f-node {
   width: 100px;
-  height: 100px;
   padding: 12px;
   color: #585858;
   cursor: move;

projects/f-examples/create-connection/create-connection.component.scss → projects/f-examples/drag-to-connect/drag-to-connect.component.scss

@@ -16,15 +16,13 @@
     }
 
     .f-connection-text {
-      fill: #BBBBBB;
-      font-size: 12px;
+      fill: #585858;
     }
   }
 }
 
 .f-node {
   width: 100px;
-  height: 100px;
   padding: 12px;
   color: #585858;
   cursor: move;

projects/f-examples/create-connection/create-connection.component.ts → projects/f-examples/drag-to-connect/drag-to-connect.component.ts

@@ -2,16 +2,16 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/
 import { FCreateConnectionEvent, FFlowModule } from '@foblex/flow';
 
 @Component({
-  selector: 'create-connection',
-  styleUrls: [ './create-connection.component.scss' ],
-  templateUrl: './create-connection.component.html',
+  selector: 'drag-to-connect',
+  styleUrls: [ './drag-to-connect.component.scss' ],
+  templateUrl: './drag-to-connect.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
     FFlowModule
   ]
 })
-export class CreateConnectionComponent {
+export class DragToConnectComponent {
 
   public connections: { outputId: string, inputId: string }[] = [];
 

projects/f-examples/drag-to-reassign/drag-to-reassign.component.html

@@ -0,0 +1,13 @@
+<f-flow fDraggable (fReassignConnection)="reassignConnection($event)">
+  <f-canvas>
+    @for (connection of connections;track connection.inputId) {
+      <f-connection fBehavior="floating"
+                    [fOutputId]="connection.outputId" [fInputId]="connection.inputId">
+      </f-connection>
+    }
+
+    <div fNode fDragHandle [fNodePosition]="{ x: 24, y: 24 }" fNodeOutput fOutputId="1">Output</div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 224, y: 24 }" fNodeInput fInputId="2">Input</div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 224, y: 124 }" fNodeInput>Input</div>
+  </f-canvas>
+</f-flow>

projects/f-examples/drag-to-reassign/drag-to-reassign.component.scss

@@ -0,0 +1,41 @@
+:host ::ng-deep {
+
+  .f-connection {
+    .f-connection-drag-handle {
+      fill: #585858;
+    }
+
+    .f-connection-selection {
+      fill: none;
+    }
+
+    .f-connection-path {
+      fill: none;
+      stroke: #585858;
+      stroke-width: 2;
+    }
+
+    .f-connection-text {
+      fill: #585858;
+    }
+  }
+}
+
+.f-node {
+  width: 100px;
+  padding: 12px;
+  color: #585858;
+  cursor: move;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background: #FCFDFE;
+  border-radius: 4px;
+  box-shadow: 0 0 1px 1px #E4E3E6;
+
+  &:active {
+    box-shadow: 0 0 2px 2px #E4E3E6;
+  }
+}
+

projects/f-examples/drag-to-reassign/drag-to-reassign.component.ts

@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
+import { FFlowModule, FReassignConnectionEvent } from '@foblex/flow';
+
+@Component({
+  selector: 'drag-to-reassign',
+  styleUrls: [ './drag-to-reassign.component.scss' ],
+  templateUrl: './drag-to-reassign.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    FFlowModule
+  ]
+})
+export class DragToReassignComponent {
+
+  public connections: { outputId: string, inputId: string }[] = [
+    { outputId: '1', inputId: '2' },
+  ];
+
+  constructor(
+    private changeDetectorRef: ChangeDetectorRef
+  ) {
+  }
+
+  public reassignConnection(event: FReassignConnectionEvent): void {
+    this.connections = [ { outputId: event.fOutputId, inputId: event.newFInputId } ];
+    this.changeDetectorRef.detectChanges();
+  }
+}

projects/f-examples/draggable-flow/draggable-flow.component.scss

@@ -19,7 +19,6 @@
 
 .f-node {
   width: 100px;
-  height: 100px;
   padding: 12px;
   color: #585858;
   cursor: move;

projects/f-examples/line-alignment-example/line-alignment-example.component.scss

@@ -25,7 +25,6 @@
 
 .f-node {
   width: 100px;
-  height: 100px;
   padding: 12px;
   color: #585858;
   cursor: move;

projects/f-examples/simple-flow/simple-flow.component.scss

@@ -19,7 +19,6 @@
 
 .f-node {
   width: 100px;
-  height: 100px;
   padding: 12px;
   color: #585858;
   display: inline-flex;

projects/f-examples/zoom-example/zoom-example.component.scss

@@ -19,7 +19,6 @@
 
 .f-node {
   width: 100px;
-  height: 100px;
   padding: 12px;
   color: #585858;
   display: inline-flex;

projects/f-flow/src/domain/get-external-nodes-rect/get-external-nodes-rect.execution.ts

@@ -0,0 +1,31 @@
+import { IRect, RectExtensions } from '@foblex/core';
+import { GetExternalNodesRectRequest } from './get-external-nodes-rect.request';
+import { Injectable } from '@angular/core';
+import { FComponentsStore } from '../../f-storage';
+import { FExecutionRegister, IExecution } from '../../infrastructure';
+import { FNodeBase } from '../../f-node';
+
+@Injectable()
+@FExecutionRegister(GetExternalNodesRectRequest)
+export class GetExternalNodesRectExecution implements IExecution<GetExternalNodesRectRequest, IRect> {
+
+  constructor(
+    private fComponentsStore: FComponentsStore,
+  ) {
+  }
+
+  public handle(request: GetExternalNodesRectRequest): IRect {
+    return RectExtensions.union(this.getNodesRects());
+  }
+
+  private getNodesRects(): IRect[] {
+    return this.getNodes().map((x) => {
+      const rect = RectExtensions.fromElement(x.hostElement);
+      return RectExtensions.initialize(x.position.x, x.position.y, rect.width, rect.height);
+    })
+  }
+
+  private getNodes(): FNodeBase[] {
+    return this.fComponentsStore.fNodes;
+  }
+}

projects/f-flow/src/domain/get-external-nodes-rect/get-external-nodes-rect.request.ts

@@ -0,0 +1,3 @@
+export class GetExternalNodesRectRequest {
+
+}

projects/f-flow/src/domain/get-external-nodes-rect/index.ts

@@ -0,0 +1,3 @@
+export * from './get-external-nodes-rect.execution';
+
+export * from './get-external-nodes-rect.request';

projects/f-flow/src/domain/get-nodes-rect/get-nodes-rect.execution.ts

@@ -19,10 +19,7 @@ export class GetNodesRectExecution implements IExecution<GetNodesRectRequest, IR
   }
 
   private getNodesRects(): IRect[] {
-    return this.getNodes().map((x) => {
-      const rect = RectExtensions.fromElement(x.hostElement);
-      return RectExtensions.initialize(x.position.x, x.position.y, rect.width, rect.height);
-    })
+    return this.getNodes().map((x) => RectExtensions.fromElement(x.hostElement));
   }
 
   private getNodes(): FNodeBase[] {

projects/f-flow/src/domain/index.ts

@@ -8,6 +8,8 @@ export * from './get-connection-line';
 
 export * from './get-element-rect-in-flow';
 
+export * from './get-external-nodes-rect';
+
 export * from './get-input-rect-in-flow';
 
 export * from './get-nodes-rect';

projects/f-flow/src/domain/intersections/rounded-rect/rounded-rect.ts

@@ -39,13 +39,34 @@ export class RoundedRect implements IRoundedRect {
   }
 
   private static setRadiusFromElement(rect: RoundedRect, element: HTMLElement | SVGElement): RoundedRect {
-    rect.radius1 = parseFloat(element.style.borderTopLeftRadius) || 0;
-    rect.radius2 = parseFloat(element.style.borderTopRightRadius) || 0;
-    rect.radius3 = parseFloat(element.style.borderBottomRightRadius) || 0;
-    rect.radius4 = parseFloat(element.style.borderBottomLeftRadius) || 0;
+    const data = getComputedStyle(element);
+    rect.radius1 = this.convertToPixels(data.borderTopLeftRadius, element.clientWidth, element.clientHeight, data.fontSize) || 0;
+    rect.radius2 = this.convertToPixels(data.borderTopRightRadius, element.clientWidth, element.clientHeight, data.fontSize) || 0;
+    rect.radius3 = this.convertToPixels(data.borderBottomRightRadius, element.clientWidth, element.clientHeight, data.fontSize) || 0;
+    rect.radius4 = this.convertToPixels(data.borderBottomLeftRadius, element.clientWidth, element.clientHeight, data.fontSize) || 0;
     return rect;
   }
 
+  private static convertToPixels(value: string, clientWidth: number, clientHeight: number, fontSize: string): number {
+    if (value.endsWith('px')) {
+      return parseFloat(value);
+    } else if (value.endsWith('%')) {
+      const percentage = parseFloat(value) / 100;
+      return Math.max(clientWidth, clientHeight) * percentage;
+    } else if (value.endsWith('em')) {
+      return parseFloat(value) * parseFloat(fontSize);
+    } else if (value.endsWith('rem')) {
+      return parseFloat(value) * parseFloat(getComputedStyle(document.documentElement).fontSize);
+    } else if (value.endsWith('vh')) {
+      const vh = window.innerHeight / 100;
+      return parseFloat(value) * vh;
+    } else if (value.endsWith('vw')) {
+      const vw = window.innerWidth / 100;
+      return parseFloat(value) * vw;
+    }
+    return parseFloat(value) || 0;
+  };
+
   public addPoint(point: IPoint): RoundedRect {
     const copy = RoundedRect.fromRoundedRect(this);
     copy.x += point.x;

projects/f-flow/src/domain/providers.ts

@@ -17,6 +17,7 @@ import { CreateConnectionMarkersExecution } from './create-connection-markers';
 import { GetCanBeSelectedItemsExecution } from './get-can-be-selected-items';
 import { IsConnectionUnderNodeExecution } from './is-connection-under-node';
 import { SelectAndUpdateNodeLayerExecution } from './select-and-update-node-layer';
+import { GetExternalNodesRectExecution } from './get-external-nodes-rect';
 
 export const COMMON_PROVIDERS = [
 
@@ -30,6 +31,8 @@ export const COMMON_PROVIDERS = [
 
   GetElementRectInFlowExecution,
 
+  GetExternalNodesRectExecution,
+
   GetNodesRectExecution,
 
   GetOutputRectInFlowExecution,

projects/f-flow/src/f-connection/common/f-connection-base.ts

@@ -132,7 +132,7 @@ export abstract class FConnectionBase extends MIXIN_BASE
     this.fPath.setPath(this.path);
     this.fSelection.setPath(this.path);
     this.fGradient.redraw(this.line);
-    this.fDragHandle.redraw(this.line.point2);
+    this.fDragHandle.redraw(this.line.point1, this.line.point2);
     this.fTextComponent.redraw(this.line);
   }
 }