feat: Added getFlowState functionality #46

projects/f-flow/src/domain/get-flow-state/get-flow-state-connections/get-flow-state-connections-request.ts

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

projects/f-flow/src/domain/get-flow-state/get-flow-state-connections/get-flow-state-connections.execution.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { GetFlowStateConnectionsRequest } from './get-flow-state-connections-request';
+import { FExecutionRegister, IExecution } from '@foblex/mediator';
+import { FComponentsStore } from '../../../f-storage';
+import { IFFlowStateConnection } from '../i-f-flow-state-connection';
+
+@Injectable()
+@FExecutionRegister(GetFlowStateConnectionsRequest)
+export class GetFlowStateConnectionsExecution implements IExecution<GetFlowStateConnectionsRequest, IFFlowStateConnection[]> {
+
+  constructor(
+    private fComponentsStore: FComponentsStore,
+  ) {
+  }
+
+  public handle(request: GetFlowStateConnectionsRequest): IFFlowStateConnection[] {
+    return this.fComponentsStore.fConnections.map((x) => {
+      return {
+        id: x.fId,
+        fOutputId: x.fOutputId,
+        fInputId: x.fInputId,
+        fType: x.fType,
+        fBehavior: x.fBehavior,
+        isSelected: x.isSelected()
+      }
+    });
+  }
+}

projects/f-flow/src/domain/get-flow-state/get-flow-state-connections/index.ts

@@ -0,0 +1,3 @@
+export * from './get-flow-state-connections.execution';
+
+export * from './get-flow-state-connections-request';

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

@@ -0,0 +1,9 @@
+import { Type } from '@angular/core';
+
+export class GetFlowStateNodesRequest {
+
+  constructor(
+    public type: Type<any>
+  ) {
+  }
+}

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

@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+import { GetFlowStateNodesRequest } from './get-flow-state-nodes-request';
+import { FExecutionRegister, IExecution } from '@foblex/mediator';
+import { IFFlowStateNode } from '../i-f-flow-state-node';
+import { FComponentsStore } from '../../../f-storage';
+import { IFFlowStateConnector } from '../i-f-flow-state-connector';
+
+@Injectable()
+@FExecutionRegister(GetFlowStateNodesRequest)
+export class GetFlowStateNodesExecution implements IExecution<GetFlowStateNodesRequest, IFFlowStateNode[]> {
+
+  constructor(
+    private fComponentsStore: FComponentsStore,
+  ) {
+  }
+
+  public handle(request: GetFlowStateNodesRequest): IFFlowStateNode[] {
+    return this.fComponentsStore.fNodes.filter((x) => x instanceof request.type).map((x) => {
+      return {
+        id: x.fId,
+        parent: x.fParentId,
+        position: x.position,
+        size: x.size,
+        fOutputs: this.getOutputs(x.hostElement),
+        fInputs: this.getInputs(x.hostElement),
+        isSelected: x.isSelected()
+      };
+    });
+  }
+
+  private getOutputs(hostElement: HTMLElement): IFFlowStateConnector[] {
+    return this.fComponentsStore.fOutputs.filter((x) => hostElement.contains(x.hostElement)).map((x) => {
+      return {
+        id: x.id,
+        fConnectableSide: x.fConnectableSide
+      }
+    });
+  }
+
+  private getInputs(hostElement: HTMLElement): IFFlowStateConnector[] {
+    return this.fComponentsStore.fInputs.filter((x) => hostElement.contains(x.hostElement)).map((x) => {
+      return {
+        id: x.id,
+        fConnectableSide: x.fConnectableSide
+      }
+    });
+  }
+}

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

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

projects/f-flow/src/domain/get-flow-state/get-flow-state.execution.ts

@@ -0,0 +1,37 @@
+import { GetFlowStateRequest } from './get-flow-state.request';
+import { Injectable } from '@angular/core';
+import { FExecutionRegister, FMediator, IExecution } from '@foblex/mediator';
+import { IFFlowState } from './i-f-flow-state';
+import { FComponentsStore } from '../../f-storage';
+import { FGroupDirective, FNodeDirective } from '../../f-node';
+import { IPoint, ITransformModel, PointExtensions } from '@foblex/2d';
+import { GetFlowStateNodesRequest } from './get-flow-state-nodes';
+import { GetFlowStateConnectionsRequest } from './get-flow-state-connections';
+
+@Injectable()
+@FExecutionRegister(GetFlowStateRequest)
+export class GetFlowStateExecution implements IExecution<GetFlowStateRequest, IFFlowState> {
+
+  constructor(
+    private fComponentsStore: FComponentsStore,
+    private fMediator: FMediator
+  ) {
+  }
+
+  public handle(payload: GetFlowStateRequest): IFFlowState {
+    return {
+      position: this.getCanvasPosition(this.fComponentsStore.fCanvas!.transform),
+      scale: this.fComponentsStore.fCanvas!.transform.scale,
+      nodes: this.fMediator.send(new GetFlowStateNodesRequest(FNodeDirective)),
+      groups: this.fMediator.send(new GetFlowStateNodesRequest(FGroupDirective)),
+      connections: this.fMediator.send(new GetFlowStateConnectionsRequest())
+    }
+  }
+
+  private getCanvasPosition(transform: ITransformModel): IPoint {
+    return PointExtensions.sum(transform.position, transform.scaledPosition);
+  }
+}
+
+
+

projects/f-flow/src/domain/get-flow-state/get-flow-state.request.ts

@@ -0,0 +1,2 @@
+export class GetFlowStateRequest {
+}

projects/f-flow/src/domain/get-flow-state/i-f-flow-state-connection.ts

@@ -0,0 +1,16 @@
+import { EFConnectionBehavior, EFConnectionType } from '../../f-connection';
+
+export interface IFFlowStateConnection {
+
+  id: string;
+
+  fOutputId: string;
+
+  fInputId: string;
+
+  fType: EFConnectionType;
+
+  fBehavior: EFConnectionBehavior;
+
+  isSelected: boolean;
+}

projects/f-flow/src/domain/get-flow-state/i-f-flow-state-connector.ts

@@ -0,0 +1,8 @@
+import { EFConnectableSide } from '../../f-connectors';
+
+export interface IFFlowStateConnector {
+
+  id: string;
+
+  fConnectableSide: EFConnectableSide;
+}

projects/f-flow/src/domain/get-flow-state/i-f-flow-state-node.ts

@@ -0,0 +1,19 @@
+import { IPoint, ISize } from '@foblex/2d';
+import { IFFlowStateConnector } from './i-f-flow-state-connector';
+
+export interface IFFlowStateNode {
+
+  id: string;
+
+  parentId?: string;
+
+  position: IPoint;
+
+  size: ISize;
+
+  fInputs: IFFlowStateConnector[];
+
+  fOutputs: IFFlowStateConnector[];
+
+  isSelected: boolean;
+}

projects/f-flow/src/domain/get-flow-state/i-f-flow-state.ts

@@ -0,0 +1,16 @@
+import { IFFlowStateNode } from './i-f-flow-state-node';
+import { IFFlowStateConnection } from './i-f-flow-state-connection';
+import { IPoint } from '@foblex/2d';
+
+export interface IFFlowState {
+
+  position: IPoint;
+
+  scale: number;
+
+  nodes: IFFlowStateNode[];
+
+  groups: IFFlowStateNode[];
+
+  connections: IFFlowStateConnection[];
+}

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

@@ -0,0 +1,17 @@
+export * from './get-flow-state-connections';
+
+export * from './get-flow-state-nodes';
+
+export * from './get-flow-state.execution';
+
+export * from './get-flow-state.request';
+
+export * from './i-f-flow-state';
+
+export * from './i-f-flow-state-connection';
+
+export * from './i-f-flow-state-connector';
+
+export * from './i-f-flow-state-node';
+
+export * from './providers';

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

@@ -0,0 +1,12 @@
+import { GetFlowStateExecution } from './get-flow-state.execution';
+import { GetFlowStateNodesExecution } from './get-flow-state-nodes';
+import { GetFlowStateConnectionsExecution } from './get-flow-state-connections';
+
+export const GET_FLOW_STATE_PROVIDERS = [
+
+  GetFlowStateExecution,
+
+  GetFlowStateNodesExecution,
+
+  GetFlowStateConnectionsExecution
+];

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

@@ -14,6 +14,8 @@ export * from './get-connection-line';
 
 export * from './get-element-rect-in-flow';
 
+export * from './get-flow-state';
+
 export * from './get-scaled-node-rects-with-flow-position';
 
 export * from './get-input-rect-in-flow';

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

@@ -23,6 +23,7 @@ import { SubscribeOnTransformChangesExecution } from './subscribe-on-transform-c
 import { SortItemLayersExecution, SortItemsByParentExecution, SortNodeLayersExecution } from './sort-item-layers';
 import { GetDeepChildrenNodesAndGroupsExecution } from './get-deep-children-nodes-and-groups';
 import { CreateRoundedRectFromElementExecution } from './create-rounded-rect-from-element';
+import { GET_FLOW_STATE_PROVIDERS } from './get-flow-state';
 
 export const COMMON_PROVIDERS = [
 
@@ -42,6 +43,8 @@ export const COMMON_PROVIDERS = [
 
   GetElementRectInFlowExecution,
 
+  ...GET_FLOW_STATE_PROVIDERS,
+
   GetScaledNodeRectsWithFlowPositionExecution,
 
   GetNodesRectExecution,

projects/f-flow/src/f-canvas/f-canvas.component.html

@@ -3,6 +3,7 @@
     <ng-content select="[fGroup]"></ng-content>
   </div>
   <div #fConnectionsContainer>
+    <ng-content select="f-snap-connection"></ng-content>
     <ng-content select="f-connection"></ng-content>
     <ng-content select="f-connection-for-create"></ng-content>
   </div>

projects/f-flow/src/f-connection/f-connection-for-create/f-connection-for-create.component.ts

@@ -38,7 +38,6 @@ let uniqueId: number = 0;
 export class FConnectionForCreateComponent
   extends FConnectionBase implements AfterViewInit, OnInit, OnDestroy {
 
-  @Input('fConnectionId')
   public override fId: string = `f-connection-for-create-${ uniqueId++ }`;
 
   public override fText: string = '';

projects/f-flow/src/f-connection/f-snap-connection/f-snap-connection.component.html

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <defs #defs></defs>
+    <g class="f-connection-group">
+        <linearGradient fConnectionGradient></linearGradient>
+        <path fConnectionSelection [attr.d]="path"></path>
+        <g>
+            <path f-connection-path
+                  [attr.d]="path">
+            </path>
+            <circle f-connection-drag-handle r="8"></circle>
+        </g>
+        <text f-connection-text></text>
+    </g>
+    <ng-content></ng-content>
+</svg>
+<div #fConnectionCenter class="f-connection-center" *ngIf="fConnectionCenters.length">
+    <ng-content select="[fConnectionCenter]"></ng-content>
+</div>

projects/f-flow/src/f-connection/f-snap-connection/f-snap-connection.component.scss

@@ -0,0 +1,12 @@
+:host {
+  pointer-events: none;
+  position: absolute;
+
+  svg {
+    overflow: visible;
+
+    .f-connection-group {
+      pointer-events: all;
+    }
+  }
+}