Foblex Flow
Overview
Custom Nodes
Drag Handle
Node Selection
Resize Handle
Rotate Handle
Grouping
UpdatedDrag to Group
UpdatedStress Test
Stress Test with Connections
Node as Connector
Connector Inside Node
Connector Outlet
Limiting Connections
Connection Rules
NewConnectable Side
UpdatedDrag to Connect
Drag to Reassign
UpdatedCreate Node on Connection Drop
Remove Connection on Drop
Assign Node to Connection on Drop
Auto Snap
Connection Types (Straight, Segment, Bezier, Adaptive Curve)
UpdatedCustom Connection Type
Connection Behaviours
Connection Markers
Connection Text
DeprecatedConnection Center
DeprecatedConnection Content
NewCustom Connections
Connection Connectable Side
NewAdd Node from Palette
Selection Area
Help in Positioning
Grid System
Minimap
Zoom
Background
Cut/Copy/Paste
NewUndo/Redo
Undo/Redo V2
NewDagre Layout (Directed Graph)
ELKJS Layout (Directed Graph)
Drag Start/End Events
Custom Event Triggers
Visual Programming
DB Management
UML Diagram
Tournament Bracket
Foblex Flow
Zoom
Description
This guide shows how to zoom in and out of the canvas using the mouse wheel, double click, and buttons.
To enable zooming, you need to add the fZoom directive to the f-canvas.
Example
[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/zoom/zoom.component.html [component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/zoom/zoom.component.ts [component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/zoom/zoom.component.scss [common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss
In this article