Foblex Flow
Introduction
Getting Started
Containers
Flow
Canvas
Node
Node
Drag Handle
Connectors
Output
Input
Outlet
Connection
Connection
Create Connection
Connection Marker
Snap Connection
Extends
Drag and Drop
Zoom
Background
Line Alignment
Minimap
Foblex Flow
DocsExamples

Background

Selector: f-background

The FBackgroundComponent is an Angular component that serves as a background layer for the canvas, providing pattern-based background designs. This component supports dynamic patterns, such as circles and rectangles, which can adapt to transformations like scaling and positioning.

Standard patterns

Circle Pattern

The FCirclePatternComponent creates a circle pattern within the background. It uses the provided color and radius inputs to define the appearance of the circles.

Rect Pattern

The FRectPatternComponent creates a rectangle pattern within the background. It uses vertical and horizontal colors and sizes to define the appearance of the grid lines.

Custom Pattern

You can also provide a custom pattern by implementing the IFBackgroundPattern interface and providing it as F_BACKGROUND_PATTERN in the component’s providers array. This interface has a single method, setTransform, which receives a transformation model and applies the transformation logic to the pattern. The setTransform method is called every time the flow component is transformed.

Styles

  • .f-component A general class applied to all F components for shared styling.

  • .f-background Specific class for styling the FBackgroundComponent component.

Usage

You can easily integrate a circle pattern into your canvas background. The following example demonstrates how to use the f-circle-pattern component within the f-background.

Setting Color and Size of the Pattern

You can customize the pattern’s appearance by setting the color and size directly through the component’s inputs. This allows for dynamic adjustments to fit various design requirements.

Setting Color Through CSS

Alternatively, you can set the color of the patterns through CSS for more centralized styling control. This approach is useful for maintaining a consistent look across multiple components.

Examples

[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-guides-examples/background-example/background-example.component.html [component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-guides-examples/background-example/background-example.component.ts [component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-guides-examples/background-example/background-example.component.scss [common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-guides-examples/_flow-common.scss