Visual Programming

Example

This example demonstrates how to use the Foblex Flow to create a visual programming interface.

Possibilities

• Add nodes from the palette to the canvas using the fExternalItem directive.
• Connect nodes using f-connection-for-create component.
• Reassign connections.
• Move nodes.
• Move canvas.
• Zoom with the mouse wheel, double click and buttons using fZoom directive.
• Set the background using the f-background component.
• Line alignment using f-line-alignment component.
• Select multiple items using the f-selection component with the mouse and by holding down the Shift key.
• Minimap using the f-minimap component.

Source Code

The source code for this example can be found in our GitHub repository or StackBlitz