docs: Added minimap documentation

Author: siarheihuzarevich

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

@@ -15,7 +15,7 @@ export class FMinimapFlowDirective {
   public model: FMinimapData;
 
   @Input()
-  public fMinSize: number = 3000;
+  public fMinSize: number = 1000;
 
   public get hostElement(): SVGSVGElement {
     return this.elementReference.nativeElement;

projects/f-flow/src/f-minimap/f-minimap.component.ts

@@ -40,7 +40,7 @@ export class FMinimapComponent implements AfterViewInit, OnDestroy, IFDragAndDro
   public fMinimapView!: FMinimapViewDirective;
 
   @Input()
-  public fMinSize: number = 3000;
+  public fMinSize: number = 1000;
 
   constructor(
     private elementReference: ElementRef<HTMLElement>,

projects/f-flow/src/infrastructure/pipeline/pipeline.ts

@@ -8,7 +8,7 @@ export class Pipeline<TRequest, TResponse>
 
   private validator?: Type<IValidator<TRequest>>;
   private execution!: Type<IExecution<TRequest, TResponse>>;
-  
+
   public handle(request: TRequest, injector: Injector): TResponse | void {
     let isValid: boolean = true;
     if (this.validator) {

public/docs/en/environment.ts

@@ -181,6 +181,10 @@ function extendsGroup(): INavigationGroup {
         link: 'f-line-alignment-component',
         text: 'Line Alignment',
       },
+      {
+        link: 'f-minimap-component',
+        text: 'Minimap',
+      }
     ],
   }
 }

public/docs/en/f-minimap-component.md

@@ -1,62 +1,37 @@
-# Flow
+# Minimap
 
 **Selector:** f-minimap
 
-The **FFlowComponent** manages the flow of draggable and connectable elements within a visual canvas.  It allows for dynamic creation, positioning, and interaction of elements, supporting features such as element connections, layout calculation, and event handling.  
+The **FMinimapComponent** provides a miniature view of the larger flow, allowing users to navigate and interact with the flow efficiently. It supports features like zooming, panning, and visual representation of the flow layout. The minimap dynamically updates based on the changes in the main flow, ensuring an accurate representation. 
 
 ## Inputs
 
-  - `fFlowId: string;` The unique identifier for the component instance. Automatically generated. Default: `f-flow-${uniqueId++}`  
-
-## Outputs
-
- - `fLoaded: EventEmitter<void>;` Emits an event when the flow has fully loaded and initialized. 
-
-## Methods
-
- - `getNodesRect(): IRect;` Returns the bounding rectangle of all nodes in the flow.
- 
- - `getSelection(): FSelectionChangeEvent;` Returns the current selection state of the flow.
- 
- - `selectAll(): void;` Selects all items in the flow.
-
- - `select(node: string[], connections:[]): void;` Selects the specified nodes and connections in the flow.
- 
- - `clearSelection(): void;` Clears the selection state of all nodes and connections in the flow.
- 
- - `redraw(): void;` Calls the redraw method on all nodes and connections in the flow.
- 
- - `getPositionInFlow(position: IPoint): void;` Returns the position of the point relative to the flow.
+  - `fMinSize: number;` The minimum size of the bounding box that encloses all nodes in the minimap. It ensures that the minimap does not shrink below this size, even if the actual flow is smaller. This helps maintain the usability and visibility of the minimap. `Default: 1000`.
 
 ## Styles
 
   - `.f-component` A general class applied to all F components for shared styling.
 
-  - `.f-flow` Specifically targets the **FFlowComponent**, allowing for unique styling.
+  - `.f-minimap` Specifically targets the **FMinimapComponent**, allowing for unique styling.
 
 ## Usage
 
 ```html
-<f-flow [id]="customId" (fLoaded)="loaded()"></f-flow>
+<f-flow>
+  ...// Other components
+  |:|<f-minimap [fMinSize]="customSize"></f-minimap>|:|
+</f-flow>
 ```
 
 ## Examples
 
 #### Basic Example
-  
-Example of two connected nodes without dragging functionality. The nodes are connected by a connection line from the output of the first node to the input of the second node.
+
+This example shows a basic implementation of the minimap component within a larger flow, providing users with an overview and easy navigation capabilities.
 
 ::: ng-component <simple-flow></simple-flow>
 [component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/simple-flow/simple-flow.component.html
 [component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/simple-flow/simple-flow.component.ts
 [component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/simple-flow/simple-flow.component.scss
 :::
 
-#### Adding Dragging Functionality
-
-Let's add the [fDraggable](f-draggable-directive) directive to the f-stream to enable dragging functionality. Also, we need to add the [fDragHandle](f-drag-handle-directive) directive inside [fNode](f-node-directive) to specify the handle for dragging.
-::: ng-component <draggable-flow></draggable-flow>
-[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/draggable-flow/draggable-flow.component.html
-[component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/draggable-flow/draggable-flow.component.ts
-[component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/draggable-flow/draggable-flow.component.scss
-:::