docs: Added grid system example

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",

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',

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
+:::
+
+
+
+

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