From 8af3b3c989501e8c9517156d5f218985cb9dbb3d Mon Sep 17 00:00:00 2001
From: Siarhei Huzarevich <shuzarevich@gmail.com>
Date: Fri, 25 Oct 2024 11:39:20 +0200
Subject: [PATCH] chore: updated resize node example

---
 .../nodes/resize-handle/resize-handle.component.html | 12 +++++++-----
 .../nodes/resize-handle/resize-handle.component.ts   |  6 ++++++
 .../sort-items-by-parent.execution.ts                |  4 ++++
 public/markdown/guides/f-node-directive.md           |  5 +++++
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/projects/f-examples/nodes/resize-handle/resize-handle.component.html b/projects/f-examples/nodes/resize-handle/resize-handle.component.html
index 342b1c2..ba315e2 100644
--- a/projects/f-examples/nodes/resize-handle/resize-handle.component.html
+++ b/projects/f-examples/nodes/resize-handle/resize-handle.component.html
@@ -1,7 +1,9 @@
 <f-flow fDraggable (fLoaded)="onLoaded()">
   <f-canvas>
     <div fNode fDragHandle
-         [fNodePosition]="{ x: 0, y: 0 }">
+         [fNodePosition]="{ x: 0, y: 0 }"
+         [fNodeSize]="{ width: 120, height: 150 }"
+         (fNodeSizeChange)="onNodeSizeChanged($event)">
       <div fResizeHandle [fResizeHandleType]="eResizeHandleType.LEFT_TOP"></div>
       <div class="node-content">
         Node with Left Top ResizeHandle
@@ -9,7 +11,7 @@
     </div>
 
     <div fNode fDragHandle
-         [fNodePosition]="{ x: 300, y: 0 }">
+         [fNodePosition]="{ x: 300, y: 0 }" (fNodeSizeChange)="onNodeSizeChanged($event)">
       <div fResizeHandle [fResizeHandleType]="eResizeHandleType.RIGHT_TOP"></div>
       <div class="node-content">
         Node with Right Top ResizeHandle
@@ -17,7 +19,7 @@
     </div>
 
     <div fNode fDragHandle
-         [fNodePosition]="{ x: 0, y: 200 }">
+         [fNodePosition]="{ x: 0, y: 200 }" (fNodeSizeChange)="onNodeSizeChanged($event)">
       <div fResizeHandle [fResizeHandleType]="eResizeHandleType.RIGHT_BOTTOM"></div>
       <div class="node-content">
         Node with Right Bottom ResizeHandle
@@ -25,7 +27,7 @@
     </div>
 
     <div fNode fDragHandle
-         [fNodePosition]="{ x: 300, y: 200 }">
+         [fNodePosition]="{ x: 300, y: 200 }" (fNodeSizeChange)="onNodeSizeChanged($event)">
       <div fResizeHandle [fResizeHandleType]="eResizeHandleType.LEFT_BOTTOM"></div>
       <div class="node-content">
         Node with Left Bottom ResizeHandle
@@ -33,7 +35,7 @@
     </div>
 
     <div fNode fDragHandle
-         [fNodePosition]="{ x: 150, y: 100 }">
+         [fNodePosition]="{ x: 150, y: 100 }" (fNodeSizeChange)="onNodeSizeChanged($event)">
       <div fResizeHandle [fResizeHandleType]="eResizeHandleType.LEFT_TOP"></div>
       <div fResizeHandle [fResizeHandleType]="eResizeHandleType.RIGHT_TOP"></div>
       <div fResizeHandle [fResizeHandleType]="eResizeHandleType.LEFT_BOTTOM"></div>
diff --git a/projects/f-examples/nodes/resize-handle/resize-handle.component.ts b/projects/f-examples/nodes/resize-handle/resize-handle.component.ts
index 113a5c6..fb6dcdc 100644
--- a/projects/f-examples/nodes/resize-handle/resize-handle.component.ts
+++ b/projects/f-examples/nodes/resize-handle/resize-handle.component.ts
@@ -4,6 +4,7 @@ import {
   FCanvasComponent,
   FFlowModule
 } from '@foblex/flow';
+import { IRect } from '@foblex/2d';
 
 @Component({
   selector: 'resize-handle',
@@ -25,4 +26,9 @@ export class ResizeHandleComponent {
   }
 
   protected readonly eResizeHandleType = EFResizeHandleType;
+
+
+  public onNodeSizeChanged(rect: IRect): void {
+    console.log('Node size changed', rect);
+  }
 }
diff --git a/projects/f-flow/src/domain/sort-item-layers/sort-items-by-parent/sort-items-by-parent.execution.ts b/projects/f-flow/src/domain/sort-item-layers/sort-items-by-parent/sort-items-by-parent.execution.ts
index 04e10e8..1da67c3 100644
--- a/projects/f-flow/src/domain/sort-item-layers/sort-items-by-parent/sort-items-by-parent.execution.ts
+++ b/projects/f-flow/src/domain/sort-item-layers/sort-items-by-parent/sort-items-by-parent.execution.ts
@@ -55,6 +55,10 @@ export class SortItemsByParentExecution implements IExecution<SortItemsByParentR
   ): void {
     let nextSibling = parent.hostElement.nextElementSibling;
 
+    if (!nextSibling) {
+      return;
+    }
+
     const fragment = this.fBrowser.document.createDocumentFragment();
 
     sortedChildrenItems.forEach((child: HTMLElement) => {
diff --git a/public/markdown/guides/f-node-directive.md b/public/markdown/guides/f-node-directive.md
index a8cfc70..a948765 100644
--- a/public/markdown/guides/f-node-directive.md
+++ b/public/markdown/guides/f-node-directive.md
@@ -10,6 +10,8 @@ The **FNodeDirective** is a directive that represents a node within a flow of el
 
   - `fNodePosition: IPoint;` Sets the position of the node. Redraws the node when the position changes.
 
+  - `fNodeSize: IRect;` Sets the size of the node. Redraws the node when the size changes. Use the [fResizeHandle](f-resize-handle-directive) directive to resize the node.
+
   - `fNodeDraggingDisabled: boolean;` Indicates whether the node cannot be dragged. Default: `false`
 
   - `fNodeSelectionDisabled: boolean;`  Indicates whether the node cannot be selected. Default: `false`
@@ -18,11 +20,14 @@ The **FNodeDirective** is a directive that represents a node within a flow of el
 
  - `fNodePositionChange: EventEmitter<IPoint>;` Emits an event when the position of the node changes.  
 
+ - `fNodeSizeChange: EventEmitter<IRect>;` Emits an event when the size of the node changes using the [fResizeHandle](f-resize-handle-directive) directive.
+
 ## Methods
 
  - `refresh(): void;` Refreshes the state of the node, typically triggering a re-render or update.
 
 ## Styles
+
   - `.f-component` A general class applied to all F components for shared styling.
 
   - `.f-node` Class specific to the node directive, providing styles for node representation.