Minimap

Selector: f-minimap

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

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-minimap Specifically targets the FMinimapComponent, allowing for unique styling.

Usage

Basic Usage

To add a minimap to your flow, simply include the FMinimapComponent within the f-flow component. This provides users with an overview of the flow layout and enhances navigation capabilities.

<f-flow>
  ...// Other components
  |:|<f-minimap></f-minimap>|:|
</f-flow>

For navigation and interaction you need to add f-draggable directive to the f-flow component.

<f-flow |:|fDraggable|:|>
  ...// Other components
  <f-minimap></f-minimap>
</f-flow>

Custom Scale

You can set a custom scale for the minimap by using the fMinSize input. This allows you to control the size of the minimap based on your requirements.

<f-flow fDraggable>
  ...// Other components
  <f-minimap |:|[fMinSize]="3000"|:|></f-minimap>
</f-flow>

Examples

Basic Example

This example shows a basic implementation of the minimap component within a larger flow, providing users with an overview and easy navigation capabilities.

Node 1

Node 2

Custom Scale Example

This example demonstrates the use of a custom scale for the minimap, allowing you to control the size of the minimap based on your requirements.