Flow Diagram

A visual flow diagram component that enables creation and editing of interactive flowcharts. Features node-based editing, edge connections, drag-and-drop functionality, and customizable node styling. Supports dynamic data binding and comprehensive event handling for flowchart manipulation.


Extends: baseComponent


Fields

Name

Code

Data Type

Description

Type

type

text

Type of flow diagram to render

Controller

controller

text

Controller for diagram interactions

Width

width

text

Width of the diagram container

Height

height

text

Height of the diagram container


Methods

Name

Description

selectGroupForNew

Handles selection of node group for new node creation

toggleEdgeMode

Toggles edge creation mode for connecting nodes

handleDiagramClick

Processes click events on the diagram canvas for node placement


Events

Name

Description

onNodeSelect

Triggered when a node is selected

onEdgeCreate

Triggered when an edge is created between nodes

onDiagramUpdate

Triggered when the diagram structure is modified