Class FlowEditorComponent

Generic, entity-agnostic visual flow editor component. Wraps Foblex Flow to provide a clean MJ-style API.

Usage:

<mj-flow-editor
  [Nodes]="myNodes"
  [Connections]="myConnections"
  [NodeTypes]="myNodeTypes"
  (NodeSelected)="onNodeSelected($event)"
  (ConnectionCreated)="onConnectionCreated($event)">
</mj-flow-editor>

Implements

OnInit
OnDestroy

Index

Constructors

constructor

Accessors

CanRedo CanUndo EmptyStateTitle selectedCount

Constructors

constructor

new FlowEditorComponent(
    cdr: ChangeDetectorRef,
    stateService: FlowStateService,
    layoutService: FlowLayoutService,
): FlowEditorComponent
Parameters
- cdr: ChangeDetectorRef
- stateService: FlowStateService
- layoutService: FlowLayoutService
Returns FlowEditorComponent
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:121

Properties

AutoLayoutDirection

AutoLayoutDirection: FlowLayoutDirection = 'vertical'

CanvasClicked

CanvasClicked: EventEmitter<FlowCanvasClickEvent> = ...

`Protected`canvasPosition

canvasPosition: { x: number; y: number } = ...

`Protected`canvasScale

canvasScale: number = 1

ConnectionCreated

ConnectionCreated: EventEmitter<FlowConnectionCreatedEvent> = ...

ConnectionEditRequested

ConnectionEditRequested: EventEmitter<FlowConnection> = ...

ConnectionLabelBackground

ConnectionLabelBackground: string = '#fffef5'

Background color for connection labels

ConnectionLabelBorderColor

ConnectionLabelBorderColor: string = '#cbd5e1'

Border color for connection labels

ConnectionLabelTextColor

ConnectionLabelTextColor: string = '#334155'

Text color for connection labels

ConnectionReassigned

ConnectionReassigned: EventEmitter<FlowConnectionReassignedEvent> = ...

ConnectionRemoved

ConnectionRemoved: EventEmitter<FlowConnection> = ...

Connections

Connections: FlowConnection[] = []

ConnectionsChanged

ConnectionsChanged: EventEmitter<FlowConnection[]> = ...

ConnectionSelected

ConnectionSelected: EventEmitter<FlowConnection | null> = ...

`Protected`contextMenuConnection

contextMenuConnection: FlowConnection | null = null

`Protected`contextMenuNode

contextMenuNode: FlowNode | null = null

`Protected`contextMenuTargetType

contextMenuTargetType: FlowContextMenuTarget = 'node'

`Protected`contextMenuVisible

contextMenuVisible: boolean = false

`Protected`contextMenuX

contextMenuX: number = 0

`Protected`contextMenuY

contextMenuY: number = 0

`Protected`fCanvas

fCanvas: FCanvasComponent | undefined

`Protected`fFlow

fFlow: FFlowComponent | undefined

`Protected`fZoom

fZoom: FZoomDirective | undefined

GridSize

GridSize: number = 20

GridToggled

GridToggled: EventEmitter<boolean> = ...

LegendToggled

LegendToggled: EventEmitter<boolean> = ...

MinimapToggled

MinimapToggled: EventEmitter<boolean> = ...

NodeAdded

NodeAdded: EventEmitter<FlowNodeAddedEvent> = ...

NodeEditRequested

NodeEditRequested: EventEmitter<FlowNode> = ...

NodeMoved

NodeMoved: EventEmitter<FlowNodeMovedEvent> = ...

NodeRemoved

NodeRemoved: EventEmitter<FlowNode> = ...

Nodes

Nodes: FlowNode[] = []

NodesChanged

NodesChanged: EventEmitter<FlowNode[]> = ...

NodeSelected

NodeSelected: EventEmitter<FlowNode | null> = ...

NodeTypes

NodeTypes: FlowNodeTypeConfig[] = []

`Protected`panMode

panMode: boolean = false

ReadOnly

ReadOnly: boolean = false

`Protected`selectedConnectionIDs

selectedConnectionIDs: string[] = []

`Protected`selectedNodeIDs

selectedNodeIDs: string[] = []

SelectionChanged

SelectionChanged: EventEmitter<FlowSelectionChangedEvent> = ...

ShowGrid

ShowGrid: boolean = true

ShowLegend

ShowLegend: boolean = true

ShowMinimap

ShowMinimap: boolean = true

ShowPalette

ShowPalette: boolean = true

ShowStatusBar

ShowStatusBar: boolean = true

ShowToolbar

ShowToolbar: boolean = true

`Protected`zoomLevel

zoomLevel: number = 100

Accessors

CanRedo

get CanRedo(): boolean
Returns boolean
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:291

CanUndo

get CanUndo(): boolean
Returns boolean
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:287

EmptyStateTitle

get EmptyStateTitle(): string
Title for the canvas empty-state overlay — depends on read-only mode.

Returns string
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:66

selectedCount

get selectedCount(): number
Returns number
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:685

Methods

AutoArrange

AutoArrange(direction?: FlowLayoutDirection): void
Run auto-layout using dagre
Parameters
- Optionaldirection: FlowLayoutDirection
Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:168

`Protected`canvasMoveTriggerFn

canvasMoveTriggerFn(_event: MouseEvent | TouchEvent): boolean
Trigger function for canvas panning — only allows panning in pan mode
Parameters
- _event: MouseEvent | TouchEvent
Returns boolean
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:105

CenterOnNode

CenterOnNode(nodeId: string): void
Center the canvas on a specific node
Parameters
- nodeId: string
Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:185

ClearHighlights

ClearHighlights(): void
Clear all node status highlights

Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:252

ClearSelection

ClearSelection(): void
Clear all selection

Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:197

DeleteSelected

DeleteSelected(): void
Delete the currently selected nodes and connections

Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:296

GetConnectableSide

GetConnectableSide(side: string | undefined): string
Get the connectable side string for Foblex based on port side
Parameters
- side: string | undefined
Returns string
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:675

GetTypeConfig

GetTypeConfig(type: string): FlowNodeTypeConfig | null
Parameters
- type: string
Returns FlowNodeTypeConfig | null
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:670

HighlightPath

HighlightPath(nodeIds: string[]): void
Highlight a sequence of nodes (e.g., execution path)
Parameters
- nodeIds: string[]
Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:234

ngOnDestroy

ngOnDestroy(): void
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.

Returns void
Implementation of OnDestroy.ngOnDestroy
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:133

ngOnInit

ngOnInit(): void
A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

Returns void
Implementation of OnInit.ngOnInit
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:129

`Protected`onCanvasChange

onCanvasChange(event: FCanvasChangeEvent): void
Canvas zoom/pan changed
Parameters
- event: FCanvasChangeEvent
Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:315

`Protected`onConnectionClicked

onConnectionClicked(event: MouseEvent, conn: FlowConnection): void
Direct click on a connection — ensures ConnectionSelected fires reliably
Parameters
- event: MouseEvent
- conn: FlowConnection
Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:532

`Protected`onConnectionContextMenu

onConnectionContextMenu(event: MouseEvent, conn: FlowConnection): void
Parameters
- event: MouseEvent
- conn: FlowConnection
Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:543

`Protected`onContextMenuAction

onContextMenuAction(action: FlowContextMenuAction): void
Parameters
- action: FlowContextMenuAction
Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:550

`Protected`onCreateConnection

onCreateConnection(event: FCreateConnectionEvent): void
User drew a new connection
Parameters
- event: FCreateConnectionEvent
Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:322

`Protected`onCreateNode

onCreateNode(event: FCreateNodeEvent): void
External item dropped from palette
Parameters
- event: FCreateNodeEvent
Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:419

`Protected`onDocumentClick

onDocumentClick(): void
Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:570

`Protected`onFlowLoaded

onFlowLoaded(): void
Called when Foblex flow finishes loading

Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:308

`Protected`onGridToggled

onGridToggled(show: boolean): void
Parameters
- show: boolean
Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:499

`Protected`onKeyDown

onKeyDown(event: KeyboardEvent): void
Parameters
- event: KeyboardEvent
Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:633

`Protected`onLegendToggled

onLegendToggled(show: boolean): void
Parameters
- show: boolean
Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:511

`Protected`onMinimapToggled

onMinimapToggled(show: boolean): void
Parameters
- show: boolean
Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:505

`Protected`onNodeContextMenu

onNodeContextMenu(event: MouseEvent, node: FlowNode): void
Parameters
- event: MouseEvent
- node: FlowNode
Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:524

`Protected`onNodesMoved

onNodesMoved(event: FMoveNodesEvent): void
Nodes moved on canvas
Parameters
- event: FMoveNodesEvent
Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:478

`Protected`onPanModeToggled

onPanModeToggled(enabled: boolean): void
Parameters
- enabled: boolean
Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:517

`Protected`onReassignConnection

onReassignConnection(event: FReassignConnectionEvent): void
User reassigned (dragged) an existing connection endpoint to a new node
Parameters
- event: FReassignConnectionEvent
Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:352

`Protected`onSelectionChange

onSelectionChange(event: FSelectionChangeEvent): void
Selection changed in Foblex
Parameters
- event: FSelectionChangeEvent
Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:442

Redo

Redo(): void
Redo the last undone operation

Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:276

SelectNode

SelectNode(nodeId: string): void
Programmatically select a node
Parameters
- nodeId: string
Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:190

SetNodeStatus

SetNodeStatus(nodeId: string, status: FlowNodeStatus, message?: string): void
Update a node's visual status
Parameters
- nodeId: string
- status: FlowNodeStatus
- Optionalmessage: string
Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:206

`Protected`trackConnectionById

trackConnectionById(_index: number, conn: FlowConnection): string
Parameters
- _index: number
- conn: FlowConnection
Returns string
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:664

`Protected`trackNodeById

trackNodeById(_index: number, node: FlowNode): string
Parameters
- _index: number
- node: FlowNode
Returns string
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:660

Undo

Undo(): void
Undo the last operation

Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:264

UpdateConnection

UpdateConnection(
    connId: string,
    changes: Partial<
        Pick<
            FlowConnection,
            | "Label"
            | "LabelIcon"
            | "LabelIconColor"
            | "LabelDetail"
            | "Color"
            | "Style"
            | "Animated",
        >,
    >,
): void
Update a connection's visual properties in-place (label, color, style, etc.)
Parameters
- connId: string
- changes: Partial<
      Pick<
          FlowConnection,
          | "Label"
          | "LabelIcon"
          | "LabelIconColor"
          | "LabelDetail"
          | "Color"
          | "Style"
          | "Animated",
      >,
  >
Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:226

UpdateNode

UpdateNode(
    nodeId: string,
    changes: Partial<
        Pick<
            FlowNode,
            | "Label"
            | "Subtitle"
            | "Icon"
            | "Status"
            | "StatusMessage"
            | "IsStartNode"
            | "Badges"
            | "Data",
        >,
    >,
): void
Update a node's visual properties and push a new object reference so OnPush child components (FlowNodeComponent) detect the change.
Parameters
- nodeId: string
- changes: Partial<
      Pick<
          FlowNode,
          | "Label"
          | "Subtitle"
          | "Icon"
          | "Status"
          | "StatusMessage"
          | "IsStartNode"
          | "Badges"
          | "Data",
      >,
  >
Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:217

ZoomIn

ZoomIn(): void
Zoom in one step

Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:146

ZoomOut

ZoomOut(): void
Zoom out one step

Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:157

ZoomToFit

ZoomToFit(): void
Fit all nodes within the viewport

Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:141

Class FlowEditorComponent

Implements

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns FlowEditorComponent

Properties

AutoLayoutDirection

CanvasClicked

ProtectedcanvasPosition

ProtectedcanvasScale

ConnectionCreated

ConnectionEditRequested

ConnectionLabelBackground

ConnectionLabelBorderColor

ConnectionLabelTextColor

ConnectionReassigned

ConnectionRemoved

Connections

ConnectionsChanged

ConnectionSelected

ProtectedcontextMenuConnection

ProtectedcontextMenuNode

ProtectedcontextMenuTargetType

ProtectedcontextMenuVisible

ProtectedcontextMenuX

ProtectedcontextMenuY

ProtectedfCanvas

ProtectedfFlow

ProtectedfZoom

GridSize

GridToggled

LegendToggled

MinimapToggled

NodeAdded

NodeEditRequested

NodeMoved

NodeRemoved

Nodes

NodesChanged

NodeSelected

NodeTypes

ProtectedpanMode

ReadOnly

ProtectedselectedConnectionIDs

ProtectedselectedNodeIDs

SelectionChanged

ShowGrid

ShowLegend

ShowMinimap

ShowPalette

ShowStatusBar

ShowToolbar

ProtectedzoomLevel

Accessors

CanRedo

Returns boolean

CanUndo

Returns boolean

EmptyStateTitle

Returns string

selectedCount

Returns number

Methods

AutoArrange

Parameters

Returns void

ProtectedcanvasMoveTriggerFn

Parameters

Returns boolean

CenterOnNode

Parameters

Returns void

ClearHighlights

Returns void

`Protected`canvasPosition

`Protected`canvasScale

`Protected`contextMenuConnection

`Protected`contextMenuNode

`Protected`contextMenuTargetType

`Protected`contextMenuVisible

`Protected`contextMenuX

`Protected`contextMenuY

`Protected`fCanvas

`Protected`fFlow

`Protected`fZoom

`Protected`panMode

`Protected`selectedConnectionIDs

`Protected`selectedNodeIDs

`Protected`zoomLevel

`Protected`canvasMoveTriggerFn

`Protected`onCanvasChange

`Protected`onConnectionClicked

`Protected`onConnectionContextMenu

`Protected`onContextMenuAction

`Protected`onCreateConnection

`Protected`onCreateNode

`Protected`onDocumentClick

`Protected`onFlowLoaded

`Protected`onGridToggled

`Protected`onKeyDown

`Protected`onLegendToggled

`Protected`onMinimapToggled

`Protected`onNodeContextMenu

`Protected`onNodesMoved

`Protected`onPanModeToggled

`Protected`onReassignConnection

`Protected`onSelectionChange