From ff8ae5bd5a624347d81da925917ca537b02b0378 Mon Sep 17 00:00:00 2001
From: Siarhei Huzarevich <shuzarevich@gmail.com>
Date: Mon, 13 Jan 2025 21:03:47 +0100
Subject: [PATCH 1/2] feat: added grid system to fDraggable directive

---
 .../grid-system-example.component.html        | 10 +++
 .../grid-system-example.component.scss        | 10 +++
 .../grid-system-example.component.ts          | 22 +++++
 .../get-node-padding.execution.ts             |  0
 .../get-node-padding.request.ts               |  0
 .../f-node}/get-node-padding/index.ts         |  0
 .../get-parent-nodes.execution.ts             | 15 ++--
 .../get-parent-nodes.request.ts               |  0
 .../f-node}/get-parent-nodes/index.ts         |  0
 projects/f-flow/src/domain/f-node/index.ts    |  4 +
 .../f-flow/src/domain/f-node/providers.ts     |  6 ++
 .../get-normalized-node-rect.execution.ts     | 26 ------
 .../get-normalized-node-rect.request.ts       |  9 --
 .../domain/get-normalized-node-rect/index.ts  |  3 -
 ...t-normalized-parent-node-rect.execution.ts | 18 ++--
 .../f-flow/src/f-draggable/domain/index.ts    |  6 --
 .../is-array-has-parent-node.execution.ts     |  2 +-
 .../is-connection-under-node.request.ts       |  1 -
 .../src/f-draggable/domain/providers.ts       |  9 --
 .../src/f-draggable/f-draggable-base.ts       |  4 +
 .../src/f-draggable/f-draggable.directive.ts  | 19 +++--
 .../get-node-resize-restrictions.execution.ts |  3 +-
 ...ormalized-children-nodes-rect.execution.ts |  7 +-
 .../node-resize/node-resize.drag-handler.ts   |  4 +-
 ...des-drag-model-from-selection.execution.ts | 57 +++++++------
 .../get-node-move-restrictions.execution.ts   | 18 ++--
 .../node-move-finalize.execution.ts           | 66 +++++++++------
 .../node-move-preparation.execution.ts        | 82 ++++++++++---------
 .../node-move-preparation.validator.ts        | 31 ++++---
 .../src/f-draggable/node/node.drag-handler.ts | 34 ++++++--
 projects/f-flow/src/f-node/domain/index.ts    |  1 -
 .../f-drag-handle.directive.ts                |  2 +-
 .../f-flow/src/f-node/f-drag-handle/index.ts  |  1 -
 projects/f-flow/src/f-node/index.ts           |  8 +-
 .../f-flow/src/f-node/{domain => }/is-node.ts |  0
 projects/f-flow/src/f-node/providers.ts       |  2 +-
 36 files changed, 261 insertions(+), 219 deletions(-)
 create mode 100644 projects/f-examples/extensions/grid-system-example/grid-system-example.component.html
 create mode 100644 projects/f-examples/extensions/grid-system-example/grid-system-example.component.scss
 create mode 100644 projects/f-examples/extensions/grid-system-example/grid-system-example.component.ts
 rename projects/f-flow/src/{f-draggable/domain => domain/f-node}/get-node-padding/get-node-padding.execution.ts (100%)
 rename projects/f-flow/src/{f-draggable/domain => domain/f-node}/get-node-padding/get-node-padding.request.ts (100%)
 rename projects/f-flow/src/{f-draggable/domain => domain/f-node}/get-node-padding/index.ts (100%)
 rename projects/f-flow/src/{f-draggable/domain => domain/f-node}/get-parent-nodes/get-parent-nodes.execution.ts (62%)
 rename projects/f-flow/src/{f-draggable/domain => domain/f-node}/get-parent-nodes/get-parent-nodes.request.ts (100%)
 rename projects/f-flow/src/{f-draggable/domain => domain/f-node}/get-parent-nodes/index.ts (100%)
 delete mode 100644 projects/f-flow/src/f-draggable/domain/get-normalized-node-rect/get-normalized-node-rect.execution.ts
 delete mode 100644 projects/f-flow/src/f-draggable/domain/get-normalized-node-rect/get-normalized-node-rect.request.ts
 delete mode 100644 projects/f-flow/src/f-draggable/domain/get-normalized-node-rect/index.ts
 delete mode 100644 projects/f-flow/src/f-node/domain/index.ts
 rename projects/f-flow/src/f-node/{f-drag-handle => }/f-drag-handle.directive.ts (90%)
 delete mode 100644 projects/f-flow/src/f-node/f-drag-handle/index.ts
 rename projects/f-flow/src/f-node/{domain => }/is-node.ts (100%)

diff --git a/projects/f-examples/extensions/grid-system-example/grid-system-example.component.html b/projects/f-examples/extensions/grid-system-example/grid-system-example.component.html
new file mode 100644
index 0000000..f56e139
--- /dev/null
+++ b/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>
diff --git a/projects/f-examples/extensions/grid-system-example/grid-system-example.component.scss b/projects/f-examples/extensions/grid-system-example/grid-system-example.component.scss
new file mode 100644
index 0000000..e31db81
--- /dev/null
+++ b/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;
+}
+
diff --git a/projects/f-examples/extensions/grid-system-example/grid-system-example.component.ts b/projects/f-examples/extensions/grid-system-example/grid-system-example.component.ts
new file mode 100644
index 0000000..7f55022
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/projects/f-flow/src/f-draggable/domain/get-node-padding/get-node-padding.execution.ts b/projects/f-flow/src/domain/f-node/get-node-padding/get-node-padding.execution.ts
similarity index 100%
rename from projects/f-flow/src/f-draggable/domain/get-node-padding/get-node-padding.execution.ts
rename to projects/f-flow/src/domain/f-node/get-node-padding/get-node-padding.execution.ts
diff --git a/projects/f-flow/src/f-draggable/domain/get-node-padding/get-node-padding.request.ts b/projects/f-flow/src/domain/f-node/get-node-padding/get-node-padding.request.ts
similarity index 100%
rename from projects/f-flow/src/f-draggable/domain/get-node-padding/get-node-padding.request.ts
rename to projects/f-flow/src/domain/f-node/get-node-padding/get-node-padding.request.ts
diff --git a/projects/f-flow/src/f-draggable/domain/get-node-padding/index.ts b/projects/f-flow/src/domain/f-node/get-node-padding/index.ts
similarity index 100%
rename from projects/f-flow/src/f-draggable/domain/get-node-padding/index.ts
rename to projects/f-flow/src/domain/f-node/get-node-padding/index.ts
diff --git a/projects/f-flow/src/f-draggable/domain/get-parent-nodes/get-parent-nodes.execution.ts b/projects/f-flow/src/domain/f-node/get-parent-nodes/get-parent-nodes.execution.ts
similarity index 62%
rename from projects/f-flow/src/f-draggable/domain/get-parent-nodes/get-parent-nodes.execution.ts
rename to projects/f-flow/src/domain/f-node/get-parent-nodes/get-parent-nodes.execution.ts
index 54f8c82..3b6a93c 100644
--- a/projects/f-flow/src/f-draggable/domain/get-parent-nodes/get-parent-nodes.execution.ts
+++ b/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);
   }
 }
diff --git a/projects/f-flow/src/f-draggable/domain/get-parent-nodes/get-parent-nodes.request.ts b/projects/f-flow/src/domain/f-node/get-parent-nodes/get-parent-nodes.request.ts
similarity index 100%
rename from projects/f-flow/src/f-draggable/domain/get-parent-nodes/get-parent-nodes.request.ts
rename to projects/f-flow/src/domain/f-node/get-parent-nodes/get-parent-nodes.request.ts
diff --git a/projects/f-flow/src/f-draggable/domain/get-parent-nodes/index.ts b/projects/f-flow/src/domain/f-node/get-parent-nodes/index.ts
similarity index 100%
rename from projects/f-flow/src/f-draggable/domain/get-parent-nodes/index.ts
rename to projects/f-flow/src/domain/f-node/get-parent-nodes/index.ts
diff --git a/projects/f-flow/src/domain/f-node/index.ts b/projects/f-flow/src/domain/f-node/index.ts
index e8ff167..3acd809 100644
--- a/projects/f-flow/src/domain/f-node/index.ts
+++ b/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';
diff --git a/projects/f-flow/src/domain/f-node/providers.ts b/projects/f-flow/src/domain/f-node/providers.ts
index 590f495..8efc03c 100644
--- a/projects/f-flow/src/domain/f-node/providers.ts
+++ b/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
diff --git a/projects/f-flow/src/f-draggable/domain/get-normalized-node-rect/get-normalized-node-rect.execution.ts b/projects/f-flow/src/f-draggable/domain/get-normalized-node-rect/get-normalized-node-rect.execution.ts
deleted file mode 100644
index 0d55dd7..0000000
--- a/projects/f-flow/src/f-draggable/domain/get-normalized-node-rect/get-normalized-node-rect.execution.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Injectable } from '@angular/core';
-import { GetNormalizedNodeRectRequest } from './get-normalized-node-rect.request';
-import { IPoint, IRect, RectExtensions } from '@foblex/2d';
-import { FExecutionRegister, IExecution } from '@foblex/mediator';
-import { FComponentsStore } from '../../../f-storage';
-
-@Injectable()
-@FExecutionRegister(GetNormalizedNodeRectRequest)
-export class GetNormalizedNodeRectExecution
-  implements IExecution<GetNormalizedNodeRectRequest, IRect> {
-
-  constructor(
-    private fComponentsStore: FComponentsStore
-  ) {
-  }
-
-  public handle(request: GetNormalizedNodeRectRequest): IRect {
-    return this.normalizeRect(RectExtensions.fromElement(request.fNode.hostElement), request.fNode.position);
-  }
-
-  private normalizeRect(scaledRect: IRect, position: IPoint): IRect {
-    const rect = RectExtensions.div(scaledRect, this.fComponentsStore.fCanvas!.transform.scale);
-
-    return RectExtensions.initialize(position.x, position.y, rect.width, rect.height);
-  }
-}
diff --git a/projects/f-flow/src/f-draggable/domain/get-normalized-node-rect/get-normalized-node-rect.request.ts b/projects/f-flow/src/f-draggable/domain/get-normalized-node-rect/get-normalized-node-rect.request.ts
deleted file mode 100644
index e85dd3b..0000000
--- a/projects/f-flow/src/f-draggable/domain/get-normalized-node-rect/get-normalized-node-rect.request.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { FNodeBase } from '../../../f-node';
-
-export class GetNormalizedNodeRectRequest {
-
-  constructor(
-    public fNode: FNodeBase
-  ) {
-  }
-}
diff --git a/projects/f-flow/src/f-draggable/domain/get-normalized-node-rect/index.ts b/projects/f-flow/src/f-draggable/domain/get-normalized-node-rect/index.ts
deleted file mode 100644
index c444ed8..0000000
--- a/projects/f-flow/src/f-draggable/domain/get-normalized-node-rect/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './get-normalized-node-rect.execution';
-
-export * from './get-normalized-node-rect.request';
diff --git a/projects/f-flow/src/f-draggable/domain/get-normalized-parent-node-rect/get-normalized-parent-node-rect.execution.ts b/projects/f-flow/src/f-draggable/domain/get-normalized-parent-node-rect/get-normalized-parent-node-rect.execution.ts
index e86ce5e..54cba89 100644
--- a/projects/f-flow/src/f-draggable/domain/get-normalized-parent-node-rect/get-normalized-parent-node-rect.execution.ts
+++ b/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 ] {
diff --git a/projects/f-flow/src/f-draggable/domain/index.ts b/projects/f-flow/src/f-draggable/domain/index.ts
index a5d4d32..5c2178c 100644
--- a/projects/f-flow/src/f-draggable/domain/index.ts
+++ b/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';
diff --git a/projects/f-flow/src/f-draggable/domain/is-array-has-parent-node/is-array-has-parent-node.execution.ts b/projects/f-flow/src/f-draggable/domain/is-array-has-parent-node/is-array-has-parent-node.execution.ts
index 250e2b8..b36e8f4 100644
--- a/projects/f-flow/src/f-draggable/domain/is-array-has-parent-node/is-array-has-parent-node.execution.ts
+++ b/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)
diff --git a/projects/f-flow/src/f-draggable/domain/is-connection-under-node/is-connection-under-node.request.ts b/projects/f-flow/src/f-draggable/domain/is-connection-under-node/is-connection-under-node.request.ts
index e1919f7..87088c5 100644
--- a/projects/f-flow/src/f-draggable/domain/is-connection-under-node/is-connection-under-node.request.ts
+++ b/projects/f-flow/src/f-draggable/domain/is-connection-under-node/is-connection-under-node.request.ts
@@ -1,3 +1,2 @@
 export class IsConnectionUnderNodeRequest {
-
 }
diff --git a/projects/f-flow/src/f-draggable/domain/providers.ts b/projects/f-flow/src/f-draggable/domain/providers.ts
index 5c4b244..e052299 100644
--- a/projects/f-flow/src/f-draggable/domain/providers.ts
+++ b/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,
diff --git a/projects/f-flow/src/f-draggable/f-draggable-base.ts b/projects/f-flow/src/f-draggable/f-draggable-base.ts
index 123f4cd..0b4a168 100644
--- a/projects/f-flow/src/f-draggable/f-draggable-base.ts
+++ b/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
   ) {
diff --git a/projects/f-flow/src/f-draggable/f-draggable.directive.ts b/projects/f-flow/src/f-draggable/f-draggable.directive.ts
index 4a03e49..e7ceb9e 100644
--- a/projects/f-flow/src/f-draggable/f-draggable.directive.ts
+++ b/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>;
diff --git a/projects/f-flow/src/f-draggable/node-resize/get-node-resize-restrictions/get-node-resize-restrictions.execution.ts b/projects/f-flow/src/f-draggable/node-resize/get-node-resize-restrictions/get-node-resize-restrictions.execution.ts
index 09f01cb..61acd2f 100644
--- a/projects/f-flow/src/f-draggable/node-resize/get-node-resize-restrictions/get-node-resize-restrictions.execution.ts
+++ b/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()
diff --git a/projects/f-flow/src/f-draggable/node-resize/get-normalized-children-nodes-rect/get-normalized-children-nodes-rect.execution.ts b/projects/f-flow/src/f-draggable/node-resize/get-normalized-children-nodes-rect/get-normalized-children-nodes-rect.execution.ts
index 15af09b..87d6058 100644
--- a/projects/f-flow/src/f-draggable/node-resize/get-normalized-children-nodes-rect/get-normalized-children-nodes-rect.execution.ts
+++ b/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 {
diff --git a/projects/f-flow/src/f-draggable/node-resize/node-resize.drag-handler.ts b/projects/f-flow/src/f-draggable/node-resize/node-resize.drag-handler.ts
index d02ce24..e1c6464 100644
--- a/projects/f-flow/src/f-draggable/node-resize/node-resize.drag-handler.ts
+++ b/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) {
diff --git a/projects/f-flow/src/f-draggable/node/create-move-nodes-drag-model-from-selection/create-move-nodes-drag-model-from-selection.execution.ts b/projects/f-flow/src/f-draggable/node/create-move-nodes-drag-model-from-selection/create-move-nodes-drag-model-from-selection.execution.ts
index a28c3ee..af696b4 100644
--- a/projects/f-flow/src/f-draggable/node/create-move-nodes-drag-model-from-selection/create-move-nodes-drag-model-from-selection.execution.ts
+++ b/projects/f-flow/src/f-draggable/node/create-move-nodes-drag-model-from-selection/create-move-nodes-drag-model-from-selection.execution.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { CreateMoveNodesDragModelFromSelectionRequest } from './create-move-nodes-drag-model-from-selection.request';
 import { FExecutionRegister, FMediator, IExecution } from '@foblex/mediator';
 import { FComponentsStore } from '../../../f-storage';
@@ -14,8 +14,8 @@ import {
   PutInputConnectionHandlersToArrayRequest
 } from './domain/put-input-connection-handlers-to-array';
 import { NodeResizeByChildDragHandler } from '../node-resize-by-child.drag-handler';
-import { GetParentNodesRequest, IsArrayHasParentNodeRequest } from '../../domain';
-import { GetDeepChildrenNodesAndGroupsRequest } from '../../../domain';
+import { IsArrayHasParentNodeRequest } from '../../domain';
+import { GetDeepChildrenNodesAndGroupsRequest, GetParentNodesRequest } from '../../../domain';
 import { flatMap } from '@foblex/utils';
 
 @Injectable()
@@ -23,15 +23,14 @@ import { flatMap } from '@foblex/utils';
 export class CreateMoveNodesDragModelFromSelectionExecution
   implements IExecution<CreateMoveNodesDragModelFromSelectionRequest, IDraggableItem[]> {
 
-  constructor(
-    private fComponentsStore: FComponentsStore,
-    private fDraggableDataContext: FDraggableDataContext,
-    private fMediator: FMediator
-  ) {
-  }
+  private _fMediator = inject(FMediator);
+  private _fComponentsStore = inject(FComponentsStore);
+  private _fDraggableDataContext = inject(FDraggableDataContext);
 
   public handle(request: CreateMoveNodesDragModelFromSelectionRequest): IDraggableItem[] {
-    const itemsToDrag = this.getNodesWithRestrictions(this.getSelectedNodes(request.nodeWithDisabledSelection));
+    const itemsToDrag = this._getNodesWithRestrictions(
+      this._getSelectedNodes(request.nodeWithDisabledSelection)
+    );
     return this.getDragHandlersWithConnections(
       this.getDragHandlersFromNodes(itemsToDrag),
       this.getAllOutputIds(itemsToDrag),
@@ -39,27 +38,31 @@ export class CreateMoveNodesDragModelFromSelectionExecution
     );
   }
 
-  private getSelectedNodes(nodeWithDisabledSelection?: FNodeBase): FNodeBase[] {
-    const result = this.fDraggableDataContext.selectedItems
-      .map((x) => this._findNode(x.hostElement))
-      .filter((x): x is FNodeBase => !!x);
+  private _getSelectedNodes(nodeWithDisabledSelection?: FNodeBase): FNodeBase[] {
+    const result = this._getNodesFromSelection();
     if(nodeWithDisabledSelection) {
       result.push(nodeWithDisabledSelection);
     }
     return result;
   }
 
+  private _getNodesFromSelection(): FNodeBase[] {
+    return this._fDraggableDataContext.selectedItems
+      .map((x) => this._findNode(x.hostElement))
+      .filter((x): x is FNodeBase => !!x);
+  }
+
   private _findNode(hostElement: HTMLElement | SVGElement): FNodeBase | undefined {
-    return this.fComponentsStore.fNodes.find(n => n.isContains(hostElement));
+    return this._fComponentsStore.fNodes.find(n => n.isContains(hostElement));
   }
 
-  private getNodesWithRestrictions(selectedNodes: FNodeBase[]): INodeWithDistanceRestrictions[] {
+  private _getNodesWithRestrictions(nodesToDrag: FNodeBase[]): INodeWithDistanceRestrictions[] {
     const result: INodeWithDistanceRestrictions[] = [];
 
-    selectedNodes.forEach((x) => {
-      const hasParentNodeInSelected = this.fMediator.send<boolean>(new IsArrayHasParentNodeRequest(x, selectedNodes));
-      const restrictions = this.fMediator.send<INodeMoveRestrictions>(new GetNodeMoveRestrictionsRequest(x, hasParentNodeInSelected));
-      const parentNodes = this.fMediator.send<FNodeBase[]>(new GetParentNodesRequest(x));
+    nodesToDrag.forEach((x) => {
+      const hasParentNodeInSelected = this._fMediator.send<boolean>(new IsArrayHasParentNodeRequest(x, nodesToDrag));
+      const restrictions = this._fMediator.send<INodeMoveRestrictions>(new GetNodeMoveRestrictionsRequest(x, hasParentNodeInSelected));
+      const parentNodes = this._fMediator.send<FNodeBase[]>(new GetParentNodesRequest(x));
       result.push({ node: x, parentNodes, ...restrictions }, ...this.getChildrenItemsToDrag(x, restrictions));
     });
 
@@ -71,7 +74,7 @@ export class CreateMoveNodesDragModelFromSelectionExecution
   }
 
   private getChildrenNodes(fId: string): FNodeBase[] {
-    return this.fMediator.send<FNodeBase[]>(new GetDeepChildrenNodesAndGroupsRequest(fId));
+    return this._fMediator.send<FNodeBase[]>(new GetDeepChildrenNodesAndGroupsRequest(fId));
   }
 
   private getAllOutputIds(items: INodeWithDistanceRestrictions[]): string[] {
@@ -79,7 +82,7 @@ export class CreateMoveNodesDragModelFromSelectionExecution
   }
 
   private getOutputsForNode(node: FNodeBase): FConnectorBase[] {
-    return this.fComponentsStore.fOutputs.filter((x) => node.isContains(x.hostElement));
+    return this._fComponentsStore.fOutputs.filter((x) => node.isContains(x.hostElement));
   }
 
   private getAllInputIds(items: INodeWithDistanceRestrictions[]): string[] {
@@ -87,7 +90,7 @@ export class CreateMoveNodesDragModelFromSelectionExecution
   }
 
   private getInputsForNode(node: FNodeBase): FConnectorBase[] {
-    return this.fComponentsStore.fInputs.filter((x) => node.isContains(x.hostElement));
+    return this._fComponentsStore.fInputs.filter((x) => node.isContains(x.hostElement));
   }
 
   private getDragHandlersFromNodes(items: INodeWithDistanceRestrictions[]): IDraggableItem[] {
@@ -95,8 +98,8 @@ export class CreateMoveNodesDragModelFromSelectionExecution
 
     items.forEach((node) => {
       result.push(
-        new NodeDragHandler(this.fDraggableDataContext, node.node, node.min, node.max),
-        ...(node.parentNodes || []).map(() => new NodeResizeByChildDragHandler(this.fDraggableDataContext))
+        new NodeDragHandler(this._fDraggableDataContext, this._fComponentsStore, node.node, node.min, node.max),
+        ...(node.parentNodes || []).map(() => new NodeResizeByChildDragHandler(this._fDraggableDataContext))
       );
     });
     return result;
@@ -107,8 +110,8 @@ export class CreateMoveNodesDragModelFromSelectionExecution
   ): IDraggableItem[] {
     let result: IDraggableItem[] = handlers;
     handlers.filter((x) => x instanceof NodeDragHandler).forEach((dragHandler) => {
-      this.fMediator.send(new PutOutputConnectionHandlersToArrayRequest(dragHandler as NodeDragHandler, inputIds, result));
-      this.fMediator.send(new PutInputConnectionHandlersToArrayRequest(dragHandler as NodeDragHandler, outputIds, result));
+      this._fMediator.send(new PutOutputConnectionHandlersToArrayRequest(dragHandler as NodeDragHandler, inputIds, result));
+      this._fMediator.send(new PutInputConnectionHandlersToArrayRequest(dragHandler as NodeDragHandler, outputIds, result));
     });
     return result;
   }
diff --git a/projects/f-flow/src/f-draggable/node/create-move-nodes-drag-model-from-selection/domain/get-node-move-restrictions/get-node-move-restrictions.execution.ts b/projects/f-flow/src/f-draggable/node/create-move-nodes-drag-model-from-selection/domain/get-node-move-restrictions/get-node-move-restrictions.execution.ts
index 1849476..6950494 100644
--- a/projects/f-flow/src/f-draggable/node/create-move-nodes-drag-model-from-selection/domain/get-node-move-restrictions/get-node-move-restrictions.execution.ts
+++ b/projects/f-flow/src/f-draggable/node/create-move-nodes-drag-model-from-selection/domain/get-node-move-restrictions/get-node-move-restrictions.execution.ts
@@ -1,25 +1,23 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { GetNodeMoveRestrictionsRequest } from './get-node-move-restrictions.request';
 import { IRect, PointExtensions } from '@foblex/2d';
 import { INodeMoveRestrictions } from './i-node-move-restrictions';
 import { FExecutionRegister, FMediator, IExecution } from '@foblex/mediator';
-import { GetNormalizedNodeRectRequest, GetNormalizedParentNodeRectRequest } from '../../../../domain';
+import { GetNormalizedParentNodeRectRequest } from '../../../../domain';
 import { FNodeBase } from '../../../../../f-node';
+import { GetNormalizedElementRectRequest } from '../../../../../domain';
 
 @Injectable()
 @FExecutionRegister(GetNodeMoveRestrictionsRequest)
 export class GetNodeMoveRestrictionsExecution
   implements IExecution<GetNodeMoveRestrictionsRequest, INodeMoveRestrictions> {
 
-  constructor(
-    private fMediator: FMediator
-  ) {
-  }
+  private _fMediator = inject(FMediator);
 
   public handle(request: GetNodeMoveRestrictionsRequest): INodeMoveRestrictions {
     if (request.fNode.fParentId && !request.hasParentNodeInSelected) {
       const fParentNodeRect = this.getParentNodeRect(request.fNode);
-      const fCurrentNodeRect = this.getCurrentNodeRect(request.fNode);
+      const fCurrentNodeRect = this._getNodeRect(request.fNode);
       return {
         min: PointExtensions.initialize(fParentNodeRect.x - fCurrentNodeRect.x, fParentNodeRect.y - fCurrentNodeRect.y),
         max: PointExtensions.initialize(
@@ -31,12 +29,12 @@ export class GetNodeMoveRestrictionsExecution
     return { ...DEFAULT_RESTRICTIONS };
   }
 
-  private getCurrentNodeRect(fNode: FNodeBase): IRect {
-    return this.fMediator.send<IRect>(new GetNormalizedNodeRectRequest(fNode));
+  private _getNodeRect(fNode: FNodeBase): IRect {
+    return this._fMediator.send<IRect>(new GetNormalizedElementRectRequest(fNode.hostElement));
   }
 
   private getParentNodeRect(fNode: FNodeBase): IRect {
-    return this.fMediator.send<IRect>(new GetNormalizedParentNodeRectRequest(fNode));
+    return this._fMediator.send<IRect>(new GetNormalizedParentNodeRectRequest(fNode));
   }
 }
 
diff --git a/projects/f-flow/src/f-draggable/node/node-move-finalize/node-move-finalize.execution.ts b/projects/f-flow/src/f-draggable/node/node-move-finalize/node-move-finalize.execution.ts
index f1e1376..4a9d34d 100644
--- a/projects/f-flow/src/f-draggable/node/node-move-finalize/node-move-finalize.execution.ts
+++ b/projects/f-flow/src/f-draggable/node/node-move-finalize/node-move-finalize.execution.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { NodeMoveFinalizeRequest } from './node-move-finalize.request';
 import { IPoint, Point } from '@foblex/2d';
 import { FExecutionRegister, FMediator, IExecution } from '@foblex/mediator';
@@ -6,50 +6,70 @@ import { FComponentsStore } from '../../../f-storage';
 import { FDraggableDataContext } from '../../f-draggable-data-context';
 import {
   IsConnectionUnderNodeRequest
-} from '../../domain/is-connection-under-node/is-connection-under-node.request';
+} from '../../domain';
 import { IDraggableItem } from '../../i-draggable-item';
 import { NodeDragToParentDragHandler } from '../node-drag-to-parent.drag-handler';
+import { ILineAlignmentResult } from '../../../f-line-alignment';
+import { NodeDragHandler } from '../node.drag-handler';
 
 @Injectable()
 @FExecutionRegister(NodeMoveFinalizeRequest)
 export class NodeMoveFinalizeExecution implements IExecution<NodeMoveFinalizeRequest, void> {
 
-  private get flowHost(): HTMLElement {
-    return this.fComponentsStore.fFlow!.hostElement;
-  }
+  private _fMediator = inject(FMediator);
+  private _fComponentsStore = inject(FComponentsStore);
+  private _fDraggableDataContext = inject(FDraggableDataContext);
 
-  constructor(
-    private fComponentsStore: FComponentsStore,
-    private fDraggableDataContext: FDraggableDataContext,
-    private fMediator: FMediator
-  ) {
+  private get _fHost(): HTMLElement {
+    return this._fComponentsStore.fFlow!.hostElement;
   }
 
   public handle(request: NodeMoveFinalizeRequest): void {
-    const difference = this.getDifferenceWithLineAlignment(
-      this.getDifferenceBetweenPreparationAndFinalize(request.event.getPosition())
+    const difference = this._getDifferenceWithLineAlignment(
+      this._getDifferenceBetweenPreparationAndFinalize(request.event.getPosition())
     );
-    this.getItems().forEach((x) => {
+
+    const firstNodeOrGroup = this._fDraggableDataContext.draggableItems
+      .find((x) => x instanceof NodeDragHandler)!;
+
+    const differenceWithCellSize = firstNodeOrGroup.getDifferenceWithCellSize(difference);
+
+    this._finalizeMove(differenceWithCellSize);
+
+    this._fMediator.send(new IsConnectionUnderNodeRequest());
+    this._fDraggableDataContext.fLineAlignment?.complete();
+  }
+
+  private _finalizeMove(difference: IPoint): void {
+    this._getItems().forEach((x) => {
       x.onPointerMove({ ...difference });
       x.onPointerUp?.();
     });
-    this.fMediator.send(new IsConnectionUnderNodeRequest());
-    this.fDraggableDataContext.fLineAlignment?.complete();
   }
 
-  private getItems(): IDraggableItem[] {
-    return this.fDraggableDataContext.draggableItems
+  private _getItems(): IDraggableItem[] {
+    return this._fDraggableDataContext.draggableItems
       .filter((x) => !(x instanceof NodeDragToParentDragHandler));
   }
 
-  private getDifferenceBetweenPreparationAndFinalize(position: IPoint): Point {
-    return Point.fromPoint(position).elementTransform(this.flowHost)
-      .div(this.fDraggableDataContext.onPointerDownScale)
-      .sub(this.fDraggableDataContext.onPointerDownPosition);
+  private _getDifferenceBetweenPreparationAndFinalize(position: IPoint): Point {
+    return Point.fromPoint(position).elementTransform(this._fHost)
+      .div(this._fDraggableDataContext.onPointerDownScale)
+      .sub(this._fDraggableDataContext.onPointerDownPosition);
+  }
+
+  private _getDifferenceWithLineAlignment(difference: IPoint): IPoint {
+    return this._applyLineAlignmentDifference(
+      difference,
+      this._getLineAlignmentDifference(difference)
+    );
+  }
+
+  private _getLineAlignmentDifference(difference: IPoint): ILineAlignmentResult | undefined {
+    return this._fDraggableDataContext.fLineAlignment?.findNearestCoordinate(difference);
   }
 
-  private getDifferenceWithLineAlignment(difference: IPoint): IPoint {
-    const intersection = this.fDraggableDataContext.fLineAlignment?.findNearestCoordinate(difference);
+  private _applyLineAlignmentDifference(difference: IPoint, intersection: ILineAlignmentResult | undefined): IPoint {
     if (intersection) {
       difference.x = intersection.xResult.value ? (difference.x - intersection.xResult.distance!) : difference.x;
       difference.y = intersection.yResult.value ? (difference.y - intersection.yResult.distance!) : difference.y;
diff --git a/projects/f-flow/src/f-draggable/node/node-move-preparation/node-move-preparation.execution.ts b/projects/f-flow/src/f-draggable/node/node-move-preparation/node-move-preparation.execution.ts
index 0f4e59c..a8f6fd1 100644
--- a/projects/f-flow/src/f-draggable/node/node-move-preparation/node-move-preparation.execution.ts
+++ b/projects/f-flow/src/f-draggable/node/node-move-preparation/node-move-preparation.execution.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { NodeMovePreparationRequest } from './node-move-preparation.request';
 import { ITransformModel, Point } from '@foblex/2d';
 import { FExecutionRegister, FMediator, IExecution } from '@foblex/mediator';
@@ -14,66 +14,68 @@ import { SelectAndUpdateNodeLayerRequest } from '../../../domain';
 @FExecutionRegister(NodeMovePreparationRequest)
 export class NodeMovePreparationExecution implements IExecution<NodeMovePreparationRequest, void> {
 
-  private get transform(): ITransformModel {
-    return this.fComponentsStore.fCanvas!.transform;
-  }
+  private _fMediator = inject(FMediator);
+  private _fComponentsStore = inject(FComponentsStore);
+  private _fDraggableDataContext = inject(FDraggableDataContext);
 
-  private get flowHost(): HTMLElement {
-    return this.fComponentsStore.fFlow!.hostElement;
+  private get _transform(): ITransformModel {
+    return this._fComponentsStore.fCanvas!.transform;
   }
 
-  constructor(
-    private fComponentsStore: FComponentsStore,
-    private fDraggableDataContext: FDraggableDataContext,
-    private fMediator: FMediator
-  ) {
+  private get _fHost(): HTMLElement {
+    return this._fComponentsStore.fFlow!.hostElement;
   }
 
   public handle(request: NodeMovePreparationRequest): void {
-    const node = this.getNode(request.event.targetElement);
-    if (!node) {
-      throw new Error('Node not found');
-    }
-    let itemsToDrag: IDraggableItem[] = [];
-    if (!node.fSelectionDisabled) {
-      this.selectAndUpdateNodeLayer(node);
-      itemsToDrag = this.createDragModelFromSelection();
-    } else {
-      itemsToDrag = this.createDragModelFromSelection(node);
-    }
 
-    this.initializeLineAlignment(this.filterNodesFromDraggableItems(itemsToDrag));
+    const itemsToDrag = this._calculateDraggableItems(
+      this._getNode(request.event.targetElement)
+    );
+
+    this._initializeLineAlignment(itemsToDrag);
 
-    this.fDraggableDataContext.onPointerDownScale = this.transform.scale;
-    this.fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
-      .elementTransform(this.flowHost).div(this.transform.scale);
-    this.fDraggableDataContext.draggableItems = itemsToDrag;
+    this._fDraggableDataContext.onPointerDownScale = this._transform.scale;
+    this._fDraggableDataContext.onPointerDownPosition = Point.fromPoint(request.event.getPosition())
+      .elementTransform(this._fHost).div(this._transform.scale);
+    this._fDraggableDataContext.draggableItems = itemsToDrag;
   }
 
-  private selectAndUpdateNodeLayer(node: FNodeBase) {
-    this.fMediator.send(
-      new SelectAndUpdateNodeLayerRequest(node)
-    );
+  private _getNode(targetElement: HTMLElement): FNodeBase {
+    const result = this._fComponentsStore.fNodes.find(n => n.isContains(targetElement))!;
+    if (!result) {
+      throw new Error('Node not found');
+    }
+    return result;
   }
 
-  private getNode(targetElement: HTMLElement): FNodeBase {
-    return this.fComponentsStore.fNodes.find(n => n.isContains(targetElement))!;
+  //We drag nodes from selection model
+  private _calculateDraggableItems(fNode: FNodeBase): IDraggableItem[] {
+    let result: IDraggableItem[] = [];
+    if (!fNode.fSelectionDisabled) {
+      // Need to select node before drag
+      this._fMediator.send(new SelectAndUpdateNodeLayerRequest(fNode));
+
+      result = this._dragModelFromSelection();
+    } else {
+      // User can drag node that can't be selected
+      result = this._dragModelFromSelection(fNode);
+    }
+    return result;
   }
 
-  private createDragModelFromSelection(nodeWithDisabledSelection?: FNodeBase): IDraggableItem[] {
-    return this.fMediator.send(
+  private _dragModelFromSelection(nodeWithDisabledSelection?: FNodeBase): IDraggableItem[] {
+    return this._fMediator.send(
       new CreateMoveNodesDragModelFromSelectionRequest(nodeWithDisabledSelection)
     );
   }
 
-  private initializeLineAlignment(nodesToDrag: FNodeBase[]): void {
-    this.fDraggableDataContext.fLineAlignment?.initialize(
-      this.fComponentsStore.fNodes,
-      nodesToDrag
+  private _initializeLineAlignment(itemsToDrag: IDraggableItem[]): void {
+    this._fDraggableDataContext.fLineAlignment?.initialize(
+      this._fComponentsStore.fNodes, this._filterNodesFromDraggableItems(itemsToDrag)
     );
   }
 
-  private filterNodesFromDraggableItems(items: IDraggableItem[]): FNodeBase[] {
+  private _filterNodesFromDraggableItems(items: IDraggableItem[]): FNodeBase[] {
     return items.filter((x) => x instanceof NodeDragHandler)
       .map(x => (x as NodeDragHandler).fNode);
   }
diff --git a/projects/f-flow/src/f-draggable/node/node-move-preparation/node-move-preparation.validator.ts b/projects/f-flow/src/f-draggable/node/node-move-preparation/node-move-preparation.validator.ts
index f92941f..31a4a33 100644
--- a/projects/f-flow/src/f-draggable/node/node-move-preparation/node-move-preparation.validator.ts
+++ b/projects/f-flow/src/f-draggable/node/node-move-preparation/node-move-preparation.validator.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { NodeMovePreparationRequest } from './node-move-preparation.request';
 import { FValidatorRegister, IValidator } from '@foblex/mediator';
 import { FComponentsStore } from '../../../f-storage';
@@ -10,31 +10,28 @@ import { isClosestElementHasClass } from '@foblex/utils';
 @FValidatorRegister(NodeMovePreparationRequest)
 export class NodeMovePreparationValidator implements IValidator<NodeMovePreparationRequest> {
 
-  constructor(
-    private fComponentsStore: FComponentsStore,
-    private fDraggableDataContext: FDraggableDataContext
-  ) {
-  }
+  private _fComponentsStore = inject(FComponentsStore);
+  private _fDraggableDataContext = inject(FDraggableDataContext);
 
   public handle(request: NodeMovePreparationRequest): boolean {
-    return this.isDragHandlesEmpty()
-      && this.isDragHandleElement(request.event.targetElement)
-      && this.isNodeCanBeDragged(this.getNode(request.event.targetElement));
+    return this._isDragHandlesEmpty()
+      && this._isDragHandleElement(request.event.targetElement)
+      && this._isNodeCanBeDragged(this._getNode(request.event.targetElement));
   }
 
-  private isDragHandlesEmpty(): boolean {
-    return !this.fDraggableDataContext.draggableItems.length;
+  private _isDragHandlesEmpty(): boolean {
+    return !this._fDraggableDataContext.draggableItems.length;
   }
 
-  private getNode(targetElement: HTMLElement): FNodeBase | undefined {
-    return this.fComponentsStore.fNodes.find(n => n.isContains(targetElement));
+  private _isDragHandleElement(element: HTMLElement): boolean {
+    return isClosestElementHasClass(element, '.f-drag-handle');
   }
 
-  private isNodeCanBeDragged(node: FNodeBase | undefined): boolean {
-    return !!node && !node.fDraggingDisabled;
+  private _isNodeCanBeDragged(fNode: FNodeBase | undefined): boolean {
+    return !!fNode && !fNode.fDraggingDisabled;
   }
 
-  private isDragHandleElement(targetElement: HTMLElement): boolean {
-    return isClosestElementHasClass(targetElement, '.f-drag-handle');
+  private _getNode(element: HTMLElement): FNodeBase | undefined {
+    return this._fComponentsStore.fNodes.find(x => x.isContains(element));
   }
 }
diff --git a/projects/f-flow/src/f-draggable/node/node.drag-handler.ts b/projects/f-flow/src/f-draggable/node/node.drag-handler.ts
index a1dd66e..b18de13 100644
--- a/projects/f-flow/src/f-draggable/node/node.drag-handler.ts
+++ b/projects/f-flow/src/f-draggable/node/node.drag-handler.ts
@@ -5,39 +5,41 @@ import { FNodeBase } from '../../f-node';
 import {
   INodeMoveRestrictions
 } from './create-move-nodes-drag-model-from-selection';
+import { FComponentsStore } from '../../f-storage';
 
 export class NodeDragHandler implements IDraggableItem {
 
-  private onPointerDownPosition: IPoint = PointExtensions.initialize();
+  private readonly _onPointerDownPosition = PointExtensions.initialize();
 
   constructor(
     private fDraggableDataContext: FDraggableDataContext,
+    private fComponentsStore: FComponentsStore,
     public fNode: FNodeBase,
     public minDistance: IPoint,
     public maxDistance: IPoint,
   ) {
-    this.onPointerDownPosition = { ...fNode.position };
+    this._onPointerDownPosition = { ...fNode.position };
   }
 
   public onPointerMove(difference: IPoint): void {
-    const restrictedDifference = this.getDifference(difference, { min: this.minDistance, max: this.maxDistance });
+    const restrictedDifference = this._getDifference(difference, { min: this.minDistance, max: this.maxDistance });
 
-    this.redrawNode(this.getNewPosition(restrictedDifference));
+    this._redraw(this._getPosition(restrictedDifference));
     this.fDraggableDataContext.fLineAlignment?.handle(restrictedDifference);
   }
 
-  private getNewPosition(difference: IPoint): IPoint {
-    return Point.fromPoint(this.onPointerDownPosition).add(difference);
+  private _getPosition(difference: IPoint): IPoint {
+    return Point.fromPoint(this._onPointerDownPosition).add(difference);
   }
 
-  private getDifference(difference: IPoint, restrictions: INodeMoveRestrictions): IPoint {
+  private _getDifference(difference: IPoint, restrictions: INodeMoveRestrictions): IPoint {
     return {
       x: Math.min(Math.max(difference.x, restrictions.min.x), restrictions.max.x),
       y: Math.min(Math.max(difference.y, restrictions.min.y), restrictions.max.y)
     }
   }
 
-  private redrawNode(position: IPoint): void {
+  private _redraw(position: IPoint): void {
     this.fNode.updatePosition(position);
     this.fNode.redraw();
   }
@@ -45,4 +47,20 @@ export class NodeDragHandler implements IDraggableItem {
   public onPointerUp(): void {
     this.fNode.positionChange.emit(this.fNode.position);
   }
+
+  public getDifferenceWithCellSize(difference: IPoint): IPoint {
+    const restrictedDifference = this._getDifference(difference, { min: this.minDistance, max: this.maxDistance });
+    const position = this._getPosition(restrictedDifference);
+
+    return Point.fromPoint(this._applyCellSize(position)).sub(this._onPointerDownPosition);
+  }
+
+  private _applyCellSize(position: IPoint): IPoint {
+    const hCellSize = this.fComponentsStore.fDraggable!.hCellSize;
+    const vCellSize = this.fComponentsStore.fDraggable!.vCellSize;
+    return {
+      x: Math.round(position.x / hCellSize) * hCellSize,
+      y: Math.round(position.y / vCellSize) * vCellSize
+    };
+  }
 }
diff --git a/projects/f-flow/src/f-node/domain/index.ts b/projects/f-flow/src/f-node/domain/index.ts
deleted file mode 100644
index 1760961..0000000
--- a/projects/f-flow/src/f-node/domain/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './is-node';
diff --git a/projects/f-flow/src/f-node/f-drag-handle/f-drag-handle.directive.ts b/projects/f-flow/src/f-node/f-drag-handle.directive.ts
similarity index 90%
rename from projects/f-flow/src/f-node/f-drag-handle/f-drag-handle.directive.ts
rename to projects/f-flow/src/f-node/f-drag-handle.directive.ts
index 59f1afe..5ee63bc 100644
--- a/projects/f-flow/src/f-node/f-drag-handle/f-drag-handle.directive.ts
+++ b/projects/f-flow/src/f-node/f-drag-handle.directive.ts
@@ -1,7 +1,7 @@
 import {
   Directive, ElementRef, inject, InjectionToken
 } from "@angular/core";
-import { IHasHostElement } from '../../i-has-host-element';
+import { IHasHostElement } from '../i-has-host-element';
 
 export const F_DRAG_HANDLE = new InjectionToken<FDragHandleDirective>('F_DRAG_HANDLE');
 
diff --git a/projects/f-flow/src/f-node/f-drag-handle/index.ts b/projects/f-flow/src/f-node/f-drag-handle/index.ts
deleted file mode 100644
index fc5f5d6..0000000
--- a/projects/f-flow/src/f-node/f-drag-handle/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './f-drag-handle.directive';
diff --git a/projects/f-flow/src/f-node/index.ts b/projects/f-flow/src/f-node/index.ts
index 2ebbf99..be9c61f 100644
--- a/projects/f-flow/src/f-node/index.ts
+++ b/projects/f-flow/src/f-node/index.ts
@@ -1,17 +1,17 @@
-export * from './domain';
-
-export * from './f-drag-handle';
-
 export * from './f-resize-handle';
 
 export * from './f-rotate-handle';
 
+export * from './f-drag-handle.directive';
+
 export * from './f-group.directive';
 
 export * from './f-node.directive';
 
 export * from './f-node-base';
 
+export * from './is-node';
+
 export * from './providers';
 
 
diff --git a/projects/f-flow/src/f-node/domain/is-node.ts b/projects/f-flow/src/f-node/is-node.ts
similarity index 100%
rename from projects/f-flow/src/f-node/domain/is-node.ts
rename to projects/f-flow/src/f-node/is-node.ts
diff --git a/projects/f-flow/src/f-node/providers.ts b/projects/f-flow/src/f-node/providers.ts
index c571063..899ded7 100644
--- a/projects/f-flow/src/f-node/providers.ts
+++ b/projects/f-flow/src/f-node/providers.ts
@@ -1,7 +1,7 @@
 import { FNodeDirective } from './f-node.directive';
-import { FDragHandleDirective } from './f-drag-handle';
 import { FResizeHandleDirective } from './f-resize-handle';
 import { FGroupDirective } from './f-group.directive';
+import { FDragHandleDirective } from './f-drag-handle.directive';
 
 export const F_NODE_PROVIDERS = [
 

From b52cfc05dcaf2f6303d2dafc3c131b493cb4b2d5 Mon Sep 17 00:00:00 2001
From: Siarhei Huzarevich <shuzarevich@gmail.com>
Date: Mon, 13 Jan 2025 21:04:09 +0100
Subject: [PATCH 2/2] docs: Added grid system example

---
 projects/f-flow/package.json                  |   2 +-
 public/markdown/examples/environment.ts       |  18 +++++++++++++++
 public/markdown/examples/grid-system.md       |  21 ++++++++++++++++++
 .../markdown/guides/f-draggable-directive.md  |   6 ++++-
 .../examples/grid-system-example.dark.png     | Bin 0 -> 25315 bytes
 .../examples/grid-system-example.light.png    | Bin 0 -> 22822 bytes
 6 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 public/markdown/examples/grid-system.md
 create mode 100644 public/previews/examples/grid-system-example.dark.png
 create mode 100644 public/previews/examples/grid-system-example.light.png

diff --git a/projects/f-flow/package.json b/projects/f-flow/package.json
index db354ec..a581f79 100644
--- a/projects/f-flow/package.json
+++ b/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",
diff --git a/public/markdown/examples/environment.ts b/public/markdown/examples/environment.ts
index 9f394c4..44b0208 100644
--- a/public/markdown/examples/environment.ts
+++ b/public/markdown/examples/environment.ts
@@ -176,6 +176,10 @@ function createEnvironment(): IDocsEnvironment {
         tag: 'tournament-bracket',
         component: import('../../../projects/f-pro-examples/tournament-bracket/tournament-bracket.component')
       },
+      {
+        tag: 'grid-system-example',
+        component: import('../../../projects/f-examples/extensions/grid-system-example/grid-system-example.component')
+      }
     ],
     socialLinks: [
       { icon: 'github', link: 'https://github.com/Foblex/f-flow' },
@@ -545,6 +549,20 @@ function extensionGroup(): INavigationGroup {
         image_height: 600,
         image_type: 'image/png',
       },
+      {
+        link: 'grid-system',
+        text: 'Grid System',
+        description: 'Add a grid system to Foblex Flow diagrams for Angular.',
+        image: './previews/examples/grid-system-example.light.png',
+        image_dark: './previews/examples/grid-system-example.dark.png',
+        image_width: 821,
+        image_height: 600,
+        image_type: 'image/png',
+        badge: {
+          text: 'New',
+          type: 'info'
+        }
+      },
       {
         link: 'minimap',
         text: 'Minimap',
diff --git a/public/markdown/examples/grid-system.md b/public/markdown/examples/grid-system.md
new file mode 100644
index 0000000..a72ddcd
--- /dev/null
+++ b/public/markdown/examples/grid-system.md
@@ -0,0 +1,21 @@
+# Grid System
+
+## Description
+
+This guide demonstrates how to position nodes in a grid system using Foblex Flow for Angular. To enable the grid system, you need to parameterize the [fDraggable](./docs/f-draggable-directive) directive with the grid properties `[vCellSize]` and `[hCellSize]`.
+
+- `[vCellSize]`: Defines the vertical size of each grid cell.
+- `[hCellSize]`: Defines the horizontal size of each grid cell.
+
+## Example
+
+::: ng-component <grid-system-example></grid-system-example> [height]="600"
+[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/grid-system-example/grid-system-example.component.html
+[component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/grid-system-example/grid-system-example.component.ts
+[component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/grid-system-example/grid-system-example.component.scss
+[common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss
+:::
+
+
+
+
diff --git a/public/markdown/guides/f-draggable-directive.md b/public/markdown/guides/f-draggable-directive.md
index 9ef3cd4..5a56a7d 100644
--- a/public/markdown/guides/f-draggable-directive.md
+++ b/public/markdown/guides/f-draggable-directive.md
@@ -6,7 +6,11 @@ The **FDraggableDirective** enhances a component, typically a flow [f-flow](f-fl
 
 ## Inputs
 
-  - `fDraggableDisabled: boolean;` Determines whether the draggable functionality is disabled. Default: `false
+  - `fDraggableDisabled: boolean;` Determines whether the draggable functionality is disabled. Default: `false`.
+
+  - `vCellSize: number;` Defines the vertical size of each grid cell. Default: `1`.
+
+  - `hCellSize: number;` Defines the horizontal size of each grid cell. Default: `1`.
 
 ## Outputs
 
diff --git a/public/previews/examples/grid-system-example.dark.png b/public/previews/examples/grid-system-example.dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..550f760621710d145a2e8434ac7725f70a5303cf
GIT binary patch
literal 25315
zcmeHwd012Dwl~HIQ4oSu!2yZTN?QaRs;DR-3ZezYiWOuEB2GXEiUyQn3vqy=Ahm*u
z5Y#FnLQo-*DM0~6kxAwR2=g3f5;A}94sed=-k$q?_qq2x_qLx8fAp!(X7ByJd%bJ@
z)^Dx#BVzwPtAz`eEl^NUSh#1m#Q_C{xd;UXgab+u{7Y5KPYK{ZbNmii?NCTBU(u(a
zfKk|Efjb!B%54tJ82<U3)`%qcqBANfEY3jfd~f*uIcM`OZfZUH)ekkEroTjM6)(f5
zrBG8w7oR6PuDi46lg-__tr~>P`@d)<JULopQM9Y_mnY^(gV<#U*C2M>s^6aAheUS0
zsNXt7<-B~QBRkz4Qs2n*<2eqz<O?N3ZAPRPL5Ov{35VtA<oQra&&;e@5?TDD>(f9$
zu!t(1z%Pr!;R|%6BUiEH&3lXsb)+8R!%;4SqXqeKKFvYaISoU7%A1HSO?7EbCTGh&
zy1R0usaQ$ex}zRzpeb<qwI9BDxdfWJIewyQN$xP?-KP@Uxv|QJR()UOyz2Pvfp<@_
zlgU!&BH;lWjo0$WRQG<upW7&1L*ht6JEZ$637ig3MvOFCGkQdbQCt_^;ePFUry967
z<@wVh`wlheg;WdKE?FE^6TWO6JG`xZ0do4D7IP2UEP4a(nH-B%44wZiauo{ap!_CA
zr5BP=Ws|bqcI&-HuVN2FDu_F(%5Oa_uHPmUxt+TFriLQ4gNz=mTC*C}4jyDzszX*l
zT^+tiF2J>7o}5EpvoMzp!1u7a`|III?0NVG3zXk}Ulg=Tk-q7x<1#KYGCXoODsp}p
zyaOXA5RN;n)8Fcl%};vy;ZpZl3@sko!Wu9QUtyv8Am*`09sHC+%C)6>M+G<e?=Wj$
zAc#)ZtGbm>dn_AdO8nJNt1mtE<8edyBZ%MMUbmjK5iEJv@d8Z7i@B-a6~&wy5vsZ?
zJtqhJ{@tA{`6Km@zAb5}ojQuvx-*A-5m$imKsOEQc7mTDURN!1JhM^re&w6j7-|L6
zQ@RuxR+cb-?i|!p+>MlB*Jna|Sw9C;>F55mN8F|codM5UU5T>5AbtXGOL!uiph&AB
zy}j?B73)Y3j=#g)=o@icgEHU0FwE`L)i*Uv@cTyXvzvDlT%hov%~Zi1P2Q|DTC%zZ
z657i8nDS-YZkKPJ+FQ>{7p|ji2;bUByEv8~E!SKsM&jUSPu;v<jJeU6=C&prr{a!Q
z%GO%>R&FGPN9G%qP%eO13oA~TUyYhvw(2Iw^_jSo8F@R>p&}wBaUASbo9$aoviWg(
z*mKx$a4S091GMBusdDw3R~V>Ya1@PN;=kHPug2?=O-SJLF=LsLyOH~L{l^!|<&Rm4
z2cNci!P_vcB8=kc8<A~C<ZrcMMQm%BIHe~VhjD1Sv-bLas``2XxA+57oEx4UK6&qU
z{}%aUJc8DtJV*vw%3$$YML44?SAo5W+bVn=!j#976M<E_oj&pAhaLI5N;>J92C}hX
z-EQ5w*^QsNIr<+je$6KDhF4#GByRRTHGaV9nbV~XE2RtaQ_DGN|6oA=EZdsMs?%U2
z>U1cmYeR49?nb<7vDo%Pr4ujB*Bj7o{M`H$LqGb=I|^?!d2>ne$XdC*EmgJl#Yt<x
zXGE_VvbnwMNj>V0nCISwm%0==7hTwAGkFgzNex=h&_b@yU3_gG*l3k@jAmiswC!(R
z^Ln1Zt^yc;#;XlSmfd&N^B7}C-hu@F>VE12Th`V3O`G+UJGx}>(Ap(nqt}I#omJGp
z$p(j_Ed#09DYui??d6wF0Xw<zo@jh%+D@MJ6dkM(z(-8KBNB&s>GawG-e`>KnRVN)
z$=~Wq;Uec7*h%p^6f)9O<FR`G#vQAf`3{0ONOPU$^F$51?LE_H&-lyYzkK;Wq1l(Z
z7hbt;eaASw$cW(T8F?;pckkEhrem<le4|jy>C<6e{Pn6CCty?gOH0gX)HQ#PJiQHb
z4DWw4eTCfP!XC|BPlYoFT|;*BP%nY~Sx$J=bObM?+yf5l+FEeNLQxi5!o$)QFQ}e&
z=IA9FNZ@U1!7;n&Hl=zIeW@0+q7m7Tm!v}Ek}q-gOPu{v$JswO$cS9He3Q|<@#U&c
zth|~f154VbszPTR1nXAs1v#M6m~=n80-&wQclwBjxfxl<b<<7Mqu0y@adNoif)(jA
zTzTb7oc#haz96hW7rcDYka48rK)15)bL;pxmV2}AqOE(b)zfADwz9op)^0z^A^80L
z>-L~#oPb8=0~jE5XfGWuu`#zkxo7%{BkOQzdD>KoD)d)CPGYnUBjKd!fzgARgm6S3
z&WiMG)-IV&7~Q-szmX@5LgVSA&UPcn`7m0HxftY;jVP;4q0{N+`cJ=obd*CBviak}
zu;<Hu(mTF<orB~3wSXR|p+ugX&8BO{KtlPZ&9oKci{6a#)JE#5SIUHV*???1rECG2
z#^X0(&ljx2hrdo+c)1Z04ePe+E_&l0hLJDg&c)cuUsFdxKEq-;S9&gr3A`K_#S^OP
zD#egbe&*=jmN-Z|CF@Yvo)xg`4ulJKthl2nBFbDWoGo_A^L}~ObNt#hm+Jr*#VlQm
zdNx?#xd7zsc?@y`ZV<Ebk8^f6^jg$Xq)9F+8~p6`&AbxpTxR)grtjL4fpO|x2;_u*
zC*GJVgn6Pp`g1i?rL|0<32I^{r<7x``9C1k!_9vqpY&MXkCi0LCO9(?3kF~wTeoQ`
zBhUxQ7zY;EJSzD8$bi|+>x2>7Nr2Eml2ne{_G11doXZP|@@31Dw8wAA&*3BuX}5gA
z&FLgfS^m}GY|i84zcioybH~~LVlw|fyZ8!u8u40ur7(7raaM7T<>rvHNz)GEI_aC7
zm2x`6B411U9k2q)XhcD;k$2ji@PWNWdZp$d88>~=5~KZ@y&w6K%zt4rzR);-E)Gl1
zC;lb~+dcTH`w`879)4-xqK-)}Q&<h%Y+dB=o19TYOq1$zCxA@rg#ki<)mzi`8kLJ2
zf0bXc!@&k!B<E&-cr&7{fZLARwImc~W}ig%&IBs)dqBOGpfs+{lLxYI8$g_g0~tj+
z6Kw3tV9x!@umYg$7ru$vn<Ni|;j_hrNtkucaC^3^CcJT%O6;L;Z6qn!$sXNhvr#?^
z4s^a#s+&<Okg8#hO0Rb#Cz#TDnGlkPI+$g@kpgb8<D;g#uh-5aJdQLs{8jj+jN6!S
z`65;)eUsVg3GQ-<wn;Pdu0^M7TjIlf2Dt>+iCOlUqg%H=R$c(mGZ>*|edW$TTRna)
zWkZ_knlYbKt9nQ6JEC!J9*Qam1JjJVFqWVWV@PPz@aY=Dzrzw*NR=Imugi>fz&{!*
z((Zp_@29@NaD~d4P@LLL!C@Kz@r=Hhv<!JiI8^);0)c)ZVwSjuF_;_Tx;au8-Gy1!
zcm-zMu@aLRhy??%JF04L!xWIU7*s3?Y+fofIjp;KcJsEt2yGcaXn=|JLq~h>nEo`&
z<;#Yd;2S9;VDAAF{JQ4K8^9#POtAc`Pm|`3|C>qk|JgYEKU^{RFE0M2JdIe(Y|D65
zW=(kRqaLNB-8=0d9=b%N18e{)R6iN-dM7Wd1?jHMQFiiL-F`u1v}FBlQ(0v31MQ$n
z95<IE87k2!b=)vquzrZ&+{NJPFr<@#;(gueSZW29vU|$H-N<OV6o$)!%W6?Jg>?*B
zE|=z%D;_IlM~9p(EFomoEo%tXCN(?<H(kXYBf2n(hmU(vAuJYJsH+&0{VKf|9D^{=
z6bF<Z{dEO)7?)R{7?@@3GV-Xa;_<G>wT@nHO0>q~xuha>t4wR7>>^CYW$o6AJZS?Y
zBBE0_hA%~~-rR&kz1gzr2b4`^jhDwBvN={=+%<ep3QCOjX;Kx0#P1vJISBN}`Jp&W
z^NVAQ0!*dtVn|?`%<Q+7{G5s<o6DT{SY1>=`t5K-@1}d-F<y(Buq(z(%loK8JE*q5
z0#k{#|D=vlczqA8h5Tgb)U6EedT=z3=_gE;*5I>*8&DG!x6UF_=4<tlilJvqV+9EC
z8b5z|jla}xjHqJ$XL|v@*vWt9)Er!f<gtk|($tY?pA%9(KW(CM6Wg1eC>iX@v}Q^t
zNm9*nYko_<1U^_Q<9|O`PTma}r&DabjNGT|r=5(GZkZtIaq^RJv+7&8VakjeNA|Xi
z)W?TCs~_)VKd%TN1$M-{GRGu7x!hnD6Jjsr-lT{vL<7+w9(Oej^ZL2uf?`d4UNI#M
z60`40>|~$@(lf*{Q@`DMpjCU$FzTZq%KVWnGK7S7p!={%Z<jJTW@9mGbX$;xukI~p
zSqm+aC|K#3|30XeB1}C5_yB44uTctfP~Df3#xNNU&%A~M-sxm+kd1xh3C7Lnp8}%;
z2RqnvHx0IwZ|NCk*(Huuu#HSP^k8XT1)V7q$*QF9LzQTF*`ywe$EFfB@n=qpYLd-P
zM@w>6@Qd_U)bd&aDYSbJOBtv8J`|iDNTWX%1x3Mr%0GcAPN>EM2Igrk1(yV+|E>p!
zi7l(1Y(uRvVOzV7z2K$T2EPdISRR*Ew}gA1dCu9i^&*}?Z@O^QbU1IEB^jc7u_sD)
zvhSRb(n%k&rpLP~NR8*?cu%ah=L8RSK+R^O5z!n%g^}8vcRJ9H+^*O%u6R6TOr&JB
z;<Sh89V8}+)S$7eeP)yn`185+7(+c1_L3B)=i~`=FU6n_g}&&v5A{?H;ZJx)Q9&qa
zpWSWR*QvpZhJto_5nMzGob#4}l`U#H+zKh@LtNg-Wn<64p=^6o$%Ney?Zhx7b75Cm
zZBGdv8GOkqGvQ<|dRgx(%CyfPtL2`fLWBrT3fPG)-GBVtq3h%VsR;Xf!UfiR|A}_6
z`I)5N$A#?o$$5e(Y~aV3XfG=rNhj$|1hJnt2<rQTIRok3i*r}jC5}!UWv3)3G^J;E
z_Yc*VX=iLhtvKHq!%Yl1d>bpiQ>_CNU!0uAs9$O)C?JlVO<S$5$6QEdp4%BjT!G{@
z1Ctl_={KK32lNxj1*87r#uzIz+V;L)PD48;!>4%@cQhK>5!k7x)40i}sUa59X%pE8
zGYJhDfu<6}<jhp6R9dp>o`)gX9C8xS&x!P9V?^|O5Id($PCdN)QVGVFPeH9XU38Sq
z3}7+6btDZ|>~G?nYtnQ2pVB&_Olcano3j(7v33g)r}~DZ%2V%{TO@W62!2bE%TVSS
z8+W>)U*+Q5s$55Zv8N~av$FHM(y$WkuwY&zGr#{9^}ET40(GkuRYuvJzZ$x-1@D+?
zjaWHt1-e!;mLi=t05_j2vuIrxeLl#v`*w1sfBpcLZa~d@!KHITxF(cwC&E>2(hn#V
z;SX--mujw)`jkllAjYRjCACSRO08V$P&oYVC!zzo39=U>%_be=iT=)Pe*i<q@N*rd
ze57jgSqD?WZyHdyKQggq-{#R|rg>1$VmjL=mnZIFCP`RS?YyyfCeE@#Ug%4+$|%#J
zdEAL=TZ3_Xa*(cX#mUdS$_A7c5>8xtE@yngtj(K3C>zNF5#Tsji==$2XPRM}*l8YC
zAj^_rWrE6(sHqK9EJ#1>b5Z=CBdiWSgUIIFm~AD$Tt-XV5TPN`^J*a6C+&{BqJ<Pj
zbj+fY5{b5i;W-)(+XjXKuCM)CH!lEFIY4YiFGnKw9{8aMAdwX^nvV<s^o6?FIPm{+
zpn<5mhhF*xX#6K(7lk(XaOGq#?cK^i+RF+vgXVW$qp(AIHuCp)@{d3b{Km_~$$Pwv
zxvJjDi6r-&==yd|@C^^Q{jn=iK~#Zb;^_1vpMMYUhVC6U`(qfn{}>v;a6W0G%GL*X
zuRGk^M-xA-%;b|<x9nXT&HTzawA6HAi;K{Q6U--CtrXm*4W#F0c~P?;C-_Ty;M03H
z?lw3(4DE9@H`xr)V10V-&|O}mAC|3(9sG%VL`_ti8>E|2YQ!g4Z6B4dIZMYCa>;EC
zGtN>r&cihK_yvXHl9&U3j6rd?aBj?CohDb|r#L!zmwlokKBGQlgq+I0AFoOnsHYP3
zDQ6Dk_C402PPBw7t*mhsKZtwgEM^MIO4%y|hZ<LgloYb@!BacA8z_Q_A3p{Uy$lX)
z9%!koBQhDmLw*#mQW4b9b~S4_q~|FOoYIzcs5NSHh(U$JS*cV;j?399OM{A)(r~NH
zibTJCqSi*8-F%_32>xQ)|0INbzYswUC{AS`)(L`4`ArqiCK{>Y5Bs>k+3h0^2M!0a
zH5pTaTguW?$&9Sv@pz6mB-D{j(OjJ~k46U{GCf;;gnONMA=t?=Cu_U(w5@~SVB56~
zEg)@ysE!frj?loYdIoPH_pVnu<0v|y)&O5!N98=vmt3RM9z7~EIDJ(|Y70Y*<EEp(
zcfcvm&KwSOM{Wt5{)r_3*DolQ5dtO4L;SneGsVnecb7mBn^VOYyG5n>Ges`kIcg2T
zUD{%eeL;S?ZC7+!sv=FfnbxL)-|g6e(g6xpT$@<EFVH%7h^0fLQ$}M=CkGxR_=?{X
zPMtah4DHBOZT6|;{H)-SXD?X-{N~}PS6x`Fv`jzKpV?Evj$?|k)e>o`7`P~iE-2+}
zk^BtxQyqcx7xw(P6@kRu)(HENTu|!DBOYq0C35wL%jvX}#6UKieJoBw<(2zOPX+ew
z)TwiwU>g&N0Ug6F-#yOa(%6iAZW@tD5l(P2qk{(@8Wa|4GN+1pEqq3g5xKyRA`<g%
zC}BO0p&g`NIQ>N556%4X2U&jD!152t8eRebn?guafBZgy)tHQ)#6Ws|o-j)u;=w2D
zG8%3-mfgA!n!$E*ht0<6+-n;`m@cDC>PcwI3i6G^wboLl{)C<clIv0=iFK-nG`1%>
z>m~LqNz`v|EY4=QN)s+E_ZhJ#e`=L{)EtS1{DdHWQ-n@&?m^Fw6uxbfN%E$%W&yU$
zq(YX*kZ|q}5UKe*SHZw~Y;as~qS;`6|Cq5d-%S0LgsKqSOD$(~Xp-aVx3^xL%eKak
zy&(0c=+nKZB3$6>)5hLv=K-*a(9ah{F-1%XZ-DKz4|2-wzUyVL7)qculDhZ{jdBM+
z@$fB^l%Xjed`xcHt~AP@(1CGIlZbXAI7Fn6(8LFgE@7%kM~PlMTbK!=<U%3~x3Htl
zri)r)ZjWn61Xk-KK<>VsZ$hb8HJfVV8cW-^!wGi_ugR~1$2JZ+E#lFc&C=dzXl#DL
z+?5&k^GB~U>y3mgOTzh+4$_=tv&mE3(B=G-Z10z4+RQaUC99%OzS}OF$L-LOIpmHQ
zXr_xdAgr{{9W?E2C4)t+<oM+Dy`68NMfbSOT$Y)~SJFAVUo_;;G#yf+e;PE+2+GbG
z2L4GlGD+oh@Y}_H(z5f?6lM^xyw$BgPxsE!coO3cs6jdu*k~=ABrx@S1LrkKO%ZWf
z{*3X8LsDNhfldIxdjq@eD)y-%>jA-))nt@6Qpyb;4kQ9B8b9=H0$FwI@7u>4PS6ub
zEh&afgMgvzp3LRMoaclKosUWVr}U{shWG=~o7<mrO%j7_*x<w*l6ni6>(6%Iff^a3
z*R8E$+rIYtSqn)5k0S}X;-~@{qWbIkIdR50;>by`u#ykvj7Ks8S1J@F$Z8c=kqeN%
zWI1F3C-BTbvxGSnND)0F@|he7`y4jUCo=A1v3oo%NIjp&@?w{n5CzSWu2(Mp%~{O>
z9oM<S0cyN?=&9IeYf&{+=BYFOM2D;$k}XgI(=U;^c%TBaHne=P@{!I>Q-Yq$4VK;>
z8>wko-#Zu8a9B_8#Blar7Wzp)21*-b7XS^SmC{M@g8MGlzEJ5dXGS)Zc&GoHtK->t
z>adu~i@1by`~6qN&|BIHZF%UN@Vzi)@_vElx=H%3Uyg+lAHpxuy&W2a@+BrHn~RTN
z3Q@1rZ3wiPUH{n4a!h?=X(LHXySr4-eDDb~TQVsuhbX83s|M5dcpP9qjNJ98W?o)t
zU6BnMl&K<Kf&sIhG2U#z{s74)PDoAomKHO=4&rR?7Ju3KV1D$Vq);CrVeGRyDR1yT
z8`E5<`6~Q+Q(0D4-I(Pd=uzYN#Bb8BOMlf4(Tzje#JpS7kVnlI25e=uUD=YKAg|Qp
zyFyF=DE29DhFm!ky+9er2t-@8@2hWgr>R$49!G0sA3Ij($OzA$DmErCg&A|%yn#5G
z_N7OpQbQBEGGpQq@3L{wkuJNivUnn)pK9}?b?`&rqH^xZ%4J(5E_-2z8JrO1uvhn!
z@fkII>m=PLJWtQ`MSNYIBQ`r+yAd4Q7o<v@5`Cu$!BdTOg3|?kPdN6igY>sn@py$7
zUc|B=9{cXK@p$rni21Qu+Qo<k0h&|JNfU|FZUaooq*kjhR$e99xy*w0YOY@oXXd+y
zNOfr^)taUXXnmE1tW`=nFTia+b(eAL%IHntg>ywNVJRW&CrxV0%bDr8BnmlO!WSyW
z4C*fe3&1Dq{qSJd$4%}zCF0to7^g$W(+u%NO9=4<nv38!w`x6;tYDs`FBvK8kvUf}
ze5L2H{9L4+q*5_7g+!8`TZoXX*epws`6bFyQvg{8za?mp7h2}&F^_X%D5jtxTQBz%
zA#HJfI5+#9tH1C!H^~RJ(U(l?wYAB}ej=gvW6AJpN2u0lhaUf=k1U^o`<e~Be+;6D
z7Ar3gtT=oH+{53GkajCKyjl9)YaF+7@70zr|M`!_znRb2OJ_f^)8JkG8R=H2XB%Wt
z2SD|Z_2w7ut1dyW%#$dPYq(1h!qV{vk4eqv6p2e%pV>G2A<IaE5dxJVMMSDCIQ`j)
zxm1x5R|Q(qk9aKom;h-$k7;yv@{+V`KJUYV-<mcjW`N|n*k>ptO>X5fPs(o4W$!y5
z4wwkd=kxDgxV~l!Pj^!pyvFNal_EKB8-($#%e~Y7;TT)~yJP$~JN&xjZ_Bc=gY=j?
z$rs1{TgK__(&fmv%Q9a$7Vpr?UI-G4RcF+fA1(vusn6J*IrX>QJT4T9ikVJ56?r|;
z5-MG$7>aL7pg7^+F8P>aYyAP;zw0>I&dJi;@HD9%Vv<htJl^R)UYg3Rh3fr81Czju
zNj-nXxlOisj~d`$#=uuSJ}ITX<kxZMqBE35Pna7ItkDQsK3;<#Qab(Fo}aM!HV5o^
zNQT>u={*m-?6}suCDLKgE=&pJu#B^><6>pMdc4-=8FH#sKRQ9rn>PR5r4)JZv6Q!n
z|LCh9FeF|MW+cFSW|55Cou+<k?T%-GkmM+Oi51zA3s~PLtm2fhQkaIa%`@+87PA(m
z(l(kNIYZapmcO#surBW<Wzk?YgO^3k!U}F;*Q1`r03StomM;_uDCL3yal*Jb%>lN$
zA6saL{<giFK<`L5@G>k$xFPH9_2q2g<N#aHLpgzVaC)?%Gxsoil7CaDO0Z#Aa8x$H
zW#ZgW(IEDZt6p?-MX4Y(ewbW#_=Vgh#<<^UWk1;ul~c}F=!oz{*+PVdTMFoAe<LT>
zfqlQsrqw<5Rkxcluf_dDA1I$O&Sc^Du18%v_zAyotZH!C)Jc}5ci3ZBJ?lfS!c%6x
z!s7l4%O=Y_mSvDfYWibPM$+2=_ox7S?ETidg)w)rk-K7OATj^Y6K1XRrCrBA4lK8L
z3bO<;2vDU$fYF+*AAr|C<>>}c2=S^8ub0#fL7WfDAlB2kjTIsLawi7x#2)B~Kr>M?
zTy6@In|d<H?)Uq^nM}t4W~QI|OkWb;axSQ{$&nGgndHS0*3nro+h36WqQ<cyluO5R
zRJQ;GB4_)FCwyce01lIIG0=YRe`M(JTUaEvC=-&=Hn8-uf(Tx{j-<qKx8SaDrH>BM
zh%wc^(FyXaXV&}6o{(fC5e3MP7pw|Q5q=E442Lx=GM~eAfh3a}2kGDRutK{EkL7ZQ
zszHeOB~ZMio0kmsQ`m@eYtA9Cm!1%Zh)S%?n#?49%sU3PUc7U`x|OzNO_H9;X6y^T
z+O$`jZfJ7x;E&7$<Ve|J=$29_4A<Y8N|O=<aVKaM6n^$Cqrj%4I-HeoepkK)s!tsI
z4Qe4Z3K-n+o?wPV!jVPuY*n{qNQ6|Ks#t7F_SCPDYyhqz0=>JsUg?{)J)!YiM44SH
zTzJ>5?G>Y(i23Kfo^vzp7`m5eC{H5((aSm`>96MUbc$**43kNy3+J{)&G`KLQWm)7
zd){@TbDg78W{;%qG+?YkvYO8fT<7MEmwWMZIq8IIJvG9KL;;7jPBwV^7M6Xi$AtxF
z$h_y#vU8#$eX|gHpYuvY6jpi(1i^S<_mWP&TGZzD5?-`yip$fHcB)y$7I=7p$mcX5
zJ}o_H3d)XfoCc?_7PDJ38&`wLxvc%f4AnIGPWT?<TZy}xd2^rHeaY0jQl|gQbV>Pe
z-h=HYhn1RnCuGDfYuBkanpxZVO{obX!teZZH}ILVbZ+m%#2T{z-eGQcJkc?t(Tf_)
zN_7?V^K$B$v?6AaH@erlPwX$XHw8!PA07_Kr^O2qqG8z$800mLYGAv*v-P^_vo$Xv
z=tKPQ)XR4(1h3>txc<GV$3CWpGNU&jk7lWEZau<XYKx@-O7K0L?G1%AH_ZW|QW1{z
zo;^%l5~m(!EkWtFPuBz-Gui{38wZ@6WJ<`V1jW$gmQAP?&^wCu`Oc&4n^Ds1hN_5x
zIzshI*_3{!6(EZV9dEA_1blS{RLf^yS(r<&=A8L4SJ*!s?OnL1Zar#(UMm1_j0D_0
zj41$h3<kT5&dA5WD)*UvWA^{Z=aJEHI80y;9BB4H?<Ux<(VA}Qb2w4_V1kn;@h6J4
zL-AsbP|Lt#1J`C!%c&k-EL}R`kK#3+knx_{Gv4YWp4X{b_Q}qRIMRAHKq29=&NpDx
zm#xC_%M_Q&>b9YlA%~>?$d%)_-_egoo&PbgK3D3OJNChV9U|h^hm3Dw){+{ISdk0N
zFM|9st&vk(0~{sBoNk<T*W#LZQ=S<L*Q*f$7u%njptg<Epu<x`(1)Jw!>?$=3{i6z
zQ!!IKJby(_Uj}LHJALWLVbr#i1mAXBD0Hgazz294uAl<KiL&sf0bS9=SJJE8xhH~?
zwEdfuS$)ZrZmQz3Uq0gZPS|VEGv*Fq1tL&WM4S1$?)uw&o(ZbV1oiVW<gOeI7cT)v
zqv1R_3VbH?vlro17w7w__cE$PCOFm>5_Jz-PVoe_`OhtYA9c^ala?_TxYOoL8vOaj
z+y03`x}miiH+=(NQr-FGl36cNfcfv*mtI=g=Nw<^a;H_GoLlkhI7fizia`@5!2F=r
z3tB5(Iu+ru$|UxtiVJmqtU}ez8Q{1_G&d}OPkQV>JLxKjW?FWSoaO6Je;$hf{>~dl
zzqREv03D-%+lcyP=>x*=S2{>A-j}Z(JaLmP;y}mc)VC5>l0@pdWlyWP2PlfCsSN)(
z%D;@}bMsK%M}xD7ta7La${GhVp~C}k9U4q}o{d=!LVvMRsDu~n8`x)!Zvh1XQ&8C#
zxr$z^rTYLsnVE)XGJvn#!+jhdk~gNYGN2X5EjGUJ{zI`Wo|BiyecqGEZM(WHPf~jo
zTVpnU$Cg^u)MLh`*XIu{B*1(|j~PFk)+D>C9pV5||8!4K{~ypM7mT4t-kOMAfyYZ_
zTWY#wjt#a&2Uv&(xAbJHB}zhL2%FzKf^3bp^`Go)ld@u{eO`Ml_n8`lnGiU1;!wz4
zyx>*>>$~K8EiL>OKFv62blgBwT)i*YOVn+`Y?Mx5rK1Gw=mYIQP$U8zrWY}&dVu}u
zQyM6-1itx@yx_#WQNT9H0&9P4TB+8Qn$OE3o~(EFn*^^5!p&V;h$M>3J&~7XXh?94
zFcptLtf=6(8vxOv%?X)!xO^9_eIyH5gW)-;sVp@CKyEm*k~abW9@zv8{FSB(!Wa@T
z2~?<XINiBBPDTfnKq4eEW!W>vYI%SeN!{K$CzqN>hCr>!$E0bb&@`kyfy8>05cDa9
zyInR}VK4Qp09@W97k{oAn_Ur5nm{^MwQsYula`s8xgIr`Q5eO|tZreM1=JnpijD92
zTQ!YQbY$HctX$4`54RLArRX`Go`Ux__CMO&xcouRv%FLe%eEzfNT_Pz(dhJ2BN3jP
zFf6X-RbDlFmfuUqvsy;pa`NqLyZ|c_9LRR!w3toyF;D4;8m#QETs00EjpXJJ2UoZ#
zh5|DXa962?lzhNsi0i}lZEO22my>1b)f2+Icgt44ZcGMtZt$O-Bky_Sg2cd~X4mol
zdRl$HG>dSmFE%$Xk}0;oVg}l-vY4We9NLERDG8}q#&{rU(~-Oe54C3sIa#1wbskVK
zr;-!c@AVVv%B7W!+*Ex2NDql9@L%Nf>NP-tmWH!Yl8_0b*%4Vt<8=F+n6fLr2M`AE
zJiJM?SsEaC20>Zb0CMS09)3}AD<UwYxeLE!C|K85gr6g<#3uy5GgdUFUMQf;^c!b;
z0p=*t;uxLBxHWdRKJ~7AGB2#dwPEGhjjN#Yc41r_;zJ-z(&_i4G*a2d`g9cppxC${
zhL<~&8Xs|)c>~zy(J}&vat4%b&KLTynejx%d4f+Jfm6$+pqzt7i=D(~be@nuo(mn!
zg{Car5Tty)HtqStyE|KAv_S6|u|>-Es>o->4Sho{aDRTXLQ>X~MOF(55JfTrY;(m<
zadZH>UP^e%_$G#gOQd6k9h4x%$VDaZlf<Bo;jBmo=_jX^%VL>Bpjhk}*!p%m3)JWR
z-We<FoGH;`ora_D)H`gQk@&-91KG8LpRBZNRku#HlG-EQ(c^t`PJ0-r;7jof`-$H{
z-IMR6J^X1;bO~<WyKqxd`xUhDn6hb-teeYRPc8@%(c|(b@Eo2gg05N31+3rUz#dbX
zcb6L21vYOY8T(Q@Wa=U7fg!8=Q5pA*GP4P=%6yuWPj+9__uG1tcCt1^2b0*RdJ+zq
zE#As+@?%{$X>QoG{fwRIWadr#_E@D$dQk!1qU-uP)c~4Yy@hp>QdJVpcjIYby`N%K
z_Pv0;W}5g;y^e^&nQ`s#JVM{zO#ttyApCRZ`ibm-WvyT3FEf_5^q38>CByzQQnMPB
z-41p8J#TmnIB*{>%Zo}d;pBDs^W!>5&FAV#9oJ2015~EZ*U-&$7}O8XWEqg&Yq@v6
zB&R%VH1FU_FqylQ?hDBUB|drna01X%{fDS99Ot17GBT~ky<T3R5{%XPXU-k~6oQ>Q
ze97J~mwXlkzwFB&gM%;o^53^F5L`ie6mqIZcV;|eC{l4(;I!0(`GEu0aA<-3g%d}3
zNK_T=vzr^=n#G*U2GvsSGb4rUE>2ERBxkVBRTdJ$kM`uNQBXE+RDWci-hQq&IM+#1
z`j8O6W(oJTXqc1ElnP^x9ZS38?<P3&vYEs`W$%2tczcMx5E>YQ1k^YP6ewQ7k{zHV
z05=ze4eX*F^fa9A61Kj-ZtbfFSjEuLdA_0pGyJ4>5zr?Yoo)UGvK-f9o-dZqR$XM*
zJ)Q2){G)d0G`NG)W1bfB5Gl!B@7kKVSXfylJaTrX91M)TRrw1meEb*tb^qM*CSMl+
zuN1afvV4=b^M@eZ*QDv@M~fZ$5u-vL9*~%OeCMzEAn)a#^Zn}iK-=Yo6yU<JLle`g
z5gpoh=AWEz_+Ea6T<1rw&$8?Ym@7<LiPVdP2f{3CEYHpkQ^He+9+&374Fe)VA8=oJ
zr|rKj1yhH%vdh!s7Af7)I0YmaD7}Pvrr1`pdOzGXxqNoY^1Tp@ikx*=dq~f-$Xid*
z+Tg3la9!O`ec{YpBE=EN0GV$NQUaqM2qjz^+3jltJP-;=u=0tA_abnEgWv{$v03*j
z>;78N^c3gcCl=t@l{2uW(hjG1Wyig`XQ;jvRjwQ`>Tw2reMbEP%)NcoT3SlU1FkJ*
zaRA#926TGWZZf&p)8`He_%?XFbnSY;>D<zG*bBPX$@TtV)I+;yc1ZRrcIk#)Z(&KO
zf)W)uiN1>5dR%iA__;qnst(MjW}_}IQB^!2Ed6=B0)zG*veA-54x3=Udo8T6q!>CY
zUIQyEtqt9U0W+cCZM}DXKCCg4d>6c~%~hqNpbF!OMp~PK%>%#hudX(`c|g=-4tgPw
z`~bo^Tf(h2-Jkw6)60exl1dH+fV~H`A2-jPM`jd~X4RbvDJq6vgmeCy!a0ZG?&$As
zb9@`7(^=HJXw`{n2T_%7Q9nJ}_C)hx2T*BxhBZ^yYQCJdQR8%eM1aRqpd1ruRcHF*
zb9?_X6!gDTM(j(R{a41>KegG%6<=AnJZ?Q69pN%99urf!#~pO8*@J0?Mb3!GF}cXz
z#b5U9m~jHPlNRSst40J^9fxHPr>~If55W2Y7k9zR4^Na{m+0Pr)dkL}|7~g<o;qB5
z1W5JC1KB($5a(rb<%pSJ^AyA)h1X!9bQLNUxB10<xzM2E?35)e0=Zs$$+cR!2;}Qe
z3oe6!P#`R6u@jy~1yBVRft-U@<;+nE1v-xV2QXR@7p3*EazwN|!jHi>SiI!g&p_!x
z#fR|i$C)Y48Eq?|+K0@%6zdFYJyh0phaI{Z-el0^mk9#<7NFz!xue_lc1(X*p0~8n
zVgX0hUh)GND1${PW<)MvT|=OcIS7xJUi)|v=XOl#kR8Aht&@M0C(U9BxZqHNdDUoH
z0)9@0J=_T9Q;l}qzf8utQlMJ#1{5;hR6|i-p0MNOJ50CGC(SD4!5GXY2~67}AAq-I
z@0Wpr&}7++kOd6DFx729*$b{pzW$_oIRzdlbt#(NJb0i~!2%#OSO!tGJ!bFcDv%Ud
zhH?GkmDg%v8OGbJ{kLai7-v-{M)Y@nQRn-MN)yV{hy~pyD`=VLQw-}2-;6$-3mQ0J
z2a#z|H7VDC)bB6u-3&Au2cm6}yZn!Mm036wbypr%1YoiyW-@B<GhX0JGXEFVD*Xa7
z{<<LJn4F#bsA=IIH!U9X_1Ryws6<&UMH-KcD|j$1F_+~2D|*HWtUhTuqZ-i?BbQ^E
zzCx})0P71Rslx+Q{kXL+P=H@_v2d}NRY|Zd*CCtlx()Pz<$>&V-Ga;VKsJG&4mK1|
z5R1&$1}T}N-gu&;yb;r3&|{j40C@_W4bMBeQQotfk-6gt=*3FGYF5og`IIgY=q?rd
z!%EM-=$fslUAjrKNmw~T9^vKLzs==&M;8O72eQ-h1utbhj%AVM*MAc%mP=~FS`V1a
ztn4H(l*M1bU%{Q!wgCE4Ri8OJKoW>yVnXY1C_U{Fdi?U{^$TZ2C}u=1V7(>4IOHw^
zxCrjZb7%~${R&`-fMB5X+<@CQt>*A=u>{-=u^#0^Qa=NJ?zWy>XqbIBa{tLTw;T06
z_>G`a`ntRP5}1dp#gx?e8y}K@et#mmcUFcM#$XyJfow$Rw@Otdn?BcSR)b&wR&q9A
z?GhyBi6Sl|bLSC2)1*S0qqCa_i+U(j0fYu5fbWq5JTyL6r;^JZ+gw&Ux)I17qaJVi
zYW1|-@se593Gw^NFA~6iP5onvJdFqwEW8TZA7GJMUvaPbw1ZgA{qgK}xh`A8g>_q_
zfWEn~LnE}xrNME7dVPGjRV=I=<L{BLXZo4F7ykdG32v953;ue*dH8Px{3rFnzr@_X
zZp{6UmEr%dUp}rlF>o;dY-t+ZgYkH|GI01P3zu(KFKCskp+^Mt8I|ftYsOAgNwF$*
Y+ss$?e3JzJYK6ic%Y7E<JKVzl4-%ZuB>(^b

literal 0
HcmV?d00001

diff --git a/public/previews/examples/grid-system-example.light.png b/public/previews/examples/grid-system-example.light.png
new file mode 100644
index 0000000000000000000000000000000000000000..6923e494934b28e2945df63ef19b2d7156a901a2
GIT binary patch
literal 22822
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
TO%NnL=J{#g5#w|t+ra+?+Rq+N

literal 0
HcmV?d00001