chore: updated resize node example

Foblex · Oct 25, 2024 · 8af3b3c · 8af3b3c
1 parent 6eb7af1
commit 8af3b3c
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 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
@@ -1,39 +1,41 @@
 <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
       </div>
     </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
       </div>
     </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
       </div>
     </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
       </div>
     </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
@@ -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/...f-flow/src/domain/sort-item-layers/sort-items-by-parent/sort-items-by-parent.execution.ts b/...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
@@ -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.