Merge pull request #107 from Foblex/84-snap-to-helpline-grid-system

84 snap to helpline grid system

projects/f-examples/extensions/grid-system-example/grid-system-example.component.html

@@ -0,0 +1,10 @@
+<f-flow fDraggable [vCellSize]="32" [hCellSize]="32" (fLoaded)="onLoaded()">
+  <f-background>
+    <f-rect-pattern [vSize]="32" [hSize]="32"></f-rect-pattern>
+  </f-background>
+  <f-canvas fZoom>
+    <f-connection fOutputId="output1" fInputId="input1" fBehavior="floating"></f-connection>
+    <div fNode [fNodePosition]="{ x: 32, y: 32 }" fNodeOutput fOutputId="output1" fDragHandle>I'm a node</div>
+    <div fNode [fNodePosition]="{ x: 192, y: 96 }" fNodeInput fInputId="input1" fDragHandle>I'm a node</div>
+  </f-canvas>
+</f-flow>

projects/f-examples/extensions/grid-system-example/grid-system-example.component.scss

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

projects/f-examples/extensions/grid-system-example/grid-system-example.component.ts

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

projects/f-flow/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foblex/flow",
-  "version": "17.0.5",
+  "version": "17.0.6",
   "description": "An Angular library designed to simplify the creation and manipulation of dynamic flow. Provides components for flows, nodes, and connections, automating node manipulation and inter-node connections.",
   "main": "index.js",
   "types": "index.d.ts",

projects/f-flow/src/f-draggable/domain/get-parent-nodes/get-parent-nodes.execution.ts → projects/f-flow/src/domain/f-node/get-parent-nodes/get-parent-nodes.execution.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { GetParentNodesRequest } from './get-parent-nodes.request';
 import { FExecutionRegister, IExecution } from '@foblex/mediator';
 import { FNodeBase } from '../../../f-node';
@@ -9,27 +9,24 @@ import { FComponentsStore } from '../../../f-storage';
 export class GetParentNodesExecution
   implements IExecution<GetParentNodesRequest, FNodeBase[]> {
 
-  constructor(
-    private fComponentsStore: FComponentsStore
-  ) {
-  }
+  private _fComponentsStore = inject(FComponentsStore);
 
   public handle(request: GetParentNodesRequest): FNodeBase[] {
-    return this.getParentNodes(request.fNode, new Set<string>(), []);
+    return this._getParentNodes(request.fNode, new Set<string>(), []);
   }
 
-  private getParentNodes(fNode: FNodeBase, visited: Set<string>, result: FNodeBase[]): FNodeBase[] {
+  private _getParentNodes(fNode: FNodeBase, visited: Set<string>, result: FNodeBase[]): FNodeBase[] {
     if (visited.has(fNode.fId)) {
       throw new Error('Circular reference detected in the node hierarchy. Node id: ' + fNode.fId);
     }
     visited.add(fNode.fId);
 
-    const parent = this.fComponentsStore.fNodes.find((x) => x.fId === fNode.fParentId);
+    const parent = this._fComponentsStore.fNodes.find((x) => x.fId === fNode.fParentId);
     if (!parent) {
       return result;
     }
 
     result.push(parent);
-    return this.getParentNodes(parent, visited, result);
+    return this._getParentNodes(parent, visited, result);
   }
 }

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

@@ -4,8 +4,12 @@ export * from './calculate-nodes-bounding-box';
 
 export * from './calculate-nodes-bounding-box-normalized-position';
 
+export * from './get-node-padding';
+
 export * from './get-nodes';
 
+export * from './get-parent-nodes';
+
 export * from './update-node-when-state-or-size-changed';
 
 export * from './remove-node-from-store';

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

@@ -6,6 +6,8 @@ import { CalculateNodesBoundingBoxExecution } from './calculate-nodes-bounding-b
 import {
   CalculateNodesBoundingBoxNormalizedPositionExecution
 } from './calculate-nodes-bounding-box-normalized-position';
+import { GetNodePaddingExecution } from './get-node-padding';
+import { GetParentNodesExecution } from './get-parent-nodes';
 
 export const F_NODE_FEATURES = [
 
@@ -15,8 +17,12 @@ export const F_NODE_FEATURES = [
 
   CalculateNodesBoundingBoxNormalizedPositionExecution,
 
+  GetNodePaddingExecution,
+
   GetNodesExecution,
 
+  GetParentNodesExecution,
+
   UpdateNodeWhenStateOrSizeChangedExecution,
 
   RemoveNodeFromStoreExecution

projects/f-flow/src/f-draggable/domain/get-normalized-parent-node-rect/get-normalized-parent-node-rect.execution.ts

@@ -1,11 +1,11 @@
 import { Injectable } from '@angular/core';
 import { GetNormalizedParentNodeRectRequest } from './get-normalized-parent-node-rect.request';
 import { IRect, RectExtensions } from '@foblex/2d';
-import { GetNormalizedNodeRectRequest } from '../get-normalized-node-rect';
 import { FExecutionRegister, FMediator, IExecution } from '@foblex/mediator';
 import { FNodeBase } from '../../../f-node';
 import { FComponentsStore } from '../../../f-storage';
-import { GetNodePaddingRequest } from '../get-node-padding';
+import { GetNodePaddingRequest } from '../../../domain';
+import { GetNormalizedElementRectRequest } from '../../../domain';
 
 @Injectable()
 @FExecutionRegister(GetNormalizedParentNodeRectRequest)
@@ -32,18 +32,18 @@ export class GetNormalizedParentNodeRectExecution
   }
 
   private getParentRect(node: FNodeBase): IRect {
-    const rect = this.getNormalizedNodeRect(node);
+    const rect = this._getNodeRect(node);
     const padding = this.getNodePadding(node, rect);
     return RectExtensions.initialize(
-      rect.x + padding[0],
-      rect.y + padding[1],
-      rect.width - padding[0] - padding[2],
-      rect.height - padding[1] - padding[3]
+      rect.x + padding[ 0 ],
+      rect.y + padding[ 1 ],
+      rect.width - padding[ 0 ] - padding[ 2 ],
+      rect.height - padding[ 1 ] - padding[ 3 ]
     );
   }
 
-  private getNormalizedNodeRect(node: FNodeBase): IRect {
-    return this.fMediator.send<IRect>(new GetNormalizedNodeRectRequest(node));
+  private _getNodeRect(fNode: FNodeBase): IRect {
+    return this.fMediator.send<IRect>(new GetNormalizedElementRectRequest(fNode.hostElement));
   }
 
   private getNodePadding(node: FNodeBase, rect: IRect): [ number, number, number, number ] {

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

@@ -1,11 +1,5 @@
-export * from './get-node-padding';
-
-export * from './get-normalized-node-rect';
-
 export * from './get-normalized-parent-node-rect';
 
-export * from './get-parent-nodes';
-
 export * from './is-array-has-parent-node';
 
 export * from './is-connection-under-node';

projects/f-flow/src/f-draggable/domain/is-array-has-parent-node/is-array-has-parent-node.execution.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { IsArrayHasParentNodeRequest } from './is-array-has-parent-node.request';
 import { FExecutionRegister, FMediator, IExecution } from '@foblex/mediator';
 import { FNodeBase } from '../../../f-node';
-import { GetParentNodesRequest } from '../get-parent-nodes';
+import { GetParentNodesRequest } from '../../../domain/f-node/get-parent-nodes';
 
 @Injectable()
 @FExecutionRegister(IsArrayHasParentNodeRequest)

projects/f-flow/src/f-draggable/domain/is-connection-under-node/is-connection-under-node.request.ts

@@ -1,3 +1,2 @@
 export class IsConnectionUnderNodeRequest {
-
 }

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

@@ -1,20 +1,11 @@
-import { GetNormalizedNodeRectExecution } from './get-normalized-node-rect';
-import { GetParentNodesExecution } from './get-parent-nodes';
 import { IsArrayHasParentNodeExecution } from './is-array-has-parent-node';
 import { GetNormalizedParentNodeRectExecution } from './get-normalized-parent-node-rect';
-import { GetNodePaddingExecution } from './get-node-padding';
 import { IsConnectionUnderNodeExecution, IsConnectionUnderNodeValidator } from './is-connection-under-node';
 
 export const DRAG_AND_DROP_COMMON_PROVIDERS = [
 
-  GetNodePaddingExecution,
-
-  GetNormalizedNodeRectExecution,
-
   GetNormalizedParentNodeRectExecution,
 
-  GetParentNodesExecution,
-
   IsArrayHasParentNodeExecution,
 
   IsConnectionUnderNodeExecution,

projects/f-flow/src/f-draggable/f-draggable-base.ts

@@ -21,6 +21,10 @@ export abstract class FDraggableBase extends DragAndDropBase  {
 
   public abstract fDropToGroup: EventEmitter<FDropToGroupEvent>;
 
+  public abstract vCellSize: number;
+
+  public abstract hCellSize: number;
+
   protected constructor(
     ngZone: ICanRunOutsideAngular | undefined
   ) {

projects/f-flow/src/f-draggable/f-draggable.directive.ts

@@ -66,22 +66,29 @@ export class FDraggableDirective extends FDraggableBase implements OnInit, After
   }
 
   @Output()
-  public override fSelectionChange: EventEmitter<FSelectionChangeEvent> = new EventEmitter<FSelectionChangeEvent>();
+  public override fSelectionChange = new EventEmitter<FSelectionChangeEvent>();
 
   @Output()
-  public override fNodeIntersectedWithConnections: EventEmitter<FNodeIntersectedWithConnections> = new EventEmitter<FNodeIntersectedWithConnections>();
+  public override fNodeIntersectedWithConnections = new EventEmitter<FNodeIntersectedWithConnections>();
 
   @Output()
-  public override fCreateNode: EventEmitter<FCreateNodeEvent> = new EventEmitter<FCreateNodeEvent>();
+  public override fCreateNode = new EventEmitter<FCreateNodeEvent>();
 
   @Output()
-  public override fReassignConnection: EventEmitter<FReassignConnectionEvent> = new EventEmitter<FReassignConnectionEvent>();
+  public override fReassignConnection = new EventEmitter<FReassignConnectionEvent>();
 
   @Output()
-  public override fCreateConnection: EventEmitter<FCreateConnectionEvent> = new EventEmitter<FCreateConnectionEvent>();
+  public override fCreateConnection = new EventEmitter<FCreateConnectionEvent>();
 
   @Output()
-  public override fDropToGroup: EventEmitter<FDropToGroupEvent> = new EventEmitter<FDropToGroupEvent>();
+  public override fDropToGroup = new EventEmitter<FDropToGroupEvent>();
+
+  @Input()
+  public override vCellSize = 1;
+
+
+  @Input()
+  public override hCellSize = 1;
 
   @ContentChildren(F_DRAG_AND_DROP_PLUGIN, { descendants: true })
   private plugins!: QueryList<IFDragAndDropPlugin>;

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

@@ -3,9 +3,10 @@ import { GetNodeResizeRestrictionsRequest } from './get-node-resize-restrictions
 import { IRect, SizeExtensions } from '@foblex/2d';
 import { INodeResizeRestrictions } from './i-node-resize-restrictions';
 import { FExecutionRegister, FMediator, IExecution } from '@foblex/mediator';
-import { GetNodePaddingRequest, GetNormalizedParentNodeRectRequest } from '../../domain';
+import { GetNormalizedParentNodeRectRequest } from '../../domain';
 import { GetNormalizedChildrenNodesRectRequest } from '../get-normalized-children-nodes-rect';
 import { FNodeBase } from '../../../f-node';
+import { GetNodePaddingRequest } from '../../../domain';
 
 
 @Injectable()

projects/f-flow/src/f-draggable/node-resize/get-normalized-children-nodes-rect/get-normalized-children-nodes-rect.execution.ts

@@ -3,8 +3,7 @@ import { GetNormalizedChildrenNodesRectRequest } from './get-normalized-children
 import { IRect, RectExtensions } from '@foblex/2d';
 import { FExecutionRegister, FMediator, IExecution } from '@foblex/mediator';
 import { FNodeBase } from '../../../f-node';
-import { GetNormalizedNodeRectRequest } from '../../domain';
-import { GetDeepChildrenNodesAndGroupsRequest } from '../../../domain';
+import { GetDeepChildrenNodesAndGroupsRequest, GetNormalizedElementRectRequest } from '../../../domain';
 
 @Injectable()
 @FExecutionRegister(GetNormalizedChildrenNodesRectRequest)
@@ -28,8 +27,8 @@ export class GetNormalizedChildrenNodesRectExecution
     return this.fMediator.send<FNodeBase[]>(new GetDeepChildrenNodesAndGroupsRequest(fId));
   }
 
-  private normalizeRect(node: FNodeBase): IRect {
-    return this.fMediator.send<IRect>(new GetNormalizedNodeRectRequest(node));
+  private normalizeRect(fNode: FNodeBase): IRect {
+    return this.fMediator.send<IRect>(new GetNormalizedElementRectRequest(fNode.hostElement));
   }
 
   private concatRectWithParentPadding(rect: IRect, padding: [ number, number, number, number ]): IRect {

projects/f-flow/src/f-draggable/node-resize/node-resize.drag-handler.ts

@@ -2,12 +2,12 @@ import { IPoint, IRect, ISize, RectExtensions } from '@foblex/2d';
 import { IDraggableItem } from '../i-draggable-item';
 import { EFResizeHandleType, FNodeBase } from '../../f-node';
 import { FMediator } from '@foblex/mediator';
-import { GetNormalizedNodeRectRequest } from '../domain';
 import { GetNodeResizeRestrictionsRequest, INodeResizeRestrictions } from './get-node-resize-restrictions';
 import { ApplyChildResizeRestrictionsRequest } from './apply-child-resize-restrictions';
 import { CalculateChangedSizeRequest } from './calculate-changed-size';
 import { CalculateChangedPositionRequest } from './calculate-changed-position';
 import { ApplyParentResizeRestrictionsRequest } from './apply-parent-resize-restrictions';
+import { GetNormalizedElementRectRequest } from '../../domain';
 
 export class NodeResizeDragHandler implements IDraggableItem {
 
@@ -26,7 +26,7 @@ export class NodeResizeDragHandler implements IDraggableItem {
   }
 
   public prepareDragSequence(): void {
-    this.originalRect = this.fMediator.send<IRect>(new GetNormalizedNodeRectRequest(this.fNode));
+    this.originalRect = this.fMediator.send<IRect>(new GetNormalizedElementRectRequest(this.fNode.hostElement));
 
     this.restrictions = this.fMediator.send<INodeResizeRestrictions>(new GetNodeResizeRestrictionsRequest(this.fNode, this.originalRect));
     if (this.restrictions.childRect) {