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 EffectiveToolbarVisibility 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:163

Properties

AfterContextMenuAction

AfterContextMenuAction: EventEmitter<FlowAfterContextMenuActionEventArgs> = ...

AutoLayoutDirection

AutoLayoutDirection: FlowLayoutDirection = 'vertical'

BeforeContextMenu

BeforeContextMenu: EventEmitter<FlowBeforeContextMenuEventArgs> = ...

Host may replace Items or Cancel the menu. Debug attaches here — the canvas stays blind.

`Protected`canvasArea

canvasArea: ElementRef<HTMLElement> | undefined

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 = 'var(--mj-bg-surface)'

Background color for connection labels

ConnectionLabelBorderColor

ConnectionLabelBorderColor: string = 'var(--mj-border-default)'

Border color for connection labels

ConnectionLabelTextColor

ConnectionLabelTextColor: string = 'var(--mj-text-secondary)'

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`contextMenuItems

contextMenuItems: FlowContextMenuItem[] = []

`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

Legacy on/off. false forces the toolbar fully off (no recover tab). Prefer ToolbarVisibility when the host wants shown / minimized / hidden with a way back.

ToolbarAlign

ToolbarAlign: FlowToolbarAlign = 'center'

Left / center / right along the top of the canvas.

ToolbarVisibility

ToolbarVisibility: FlowToolbarVisibility = 'shown'

Full bar, a restore chip, or a recover tab. Ignored when ShowToolbar is false.

ToolbarVisibilityChanged

ToolbarVisibilityChanged: EventEmitter<FlowToolbarVisibility> = ...

The person changed shown / minimized / hidden from the canvas chrome.

`Protected`zoomLevel

zoomLevel: number = 100

Accessors

CanRedo

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

CanUndo

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

EffectiveToolbarVisibility

get EffectiveToolbarVisibility(): FlowToolbarVisibility
What the template actually paints — ShowToolbar === false is a hard hide.

Returns FlowToolbarVisibility
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:109

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:78

selectedCount

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

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:215

`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:140

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:232

ClearHighlights

ClearHighlights(): void
Clear all node status highlights

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

ClearSelection

ClearSelection(): void
Clear all selection

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

DeleteSelected

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

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

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:780

GetTypeConfig

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

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:281

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:175

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:171

`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:366

`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:620

`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:631

`Protected`onContextMenuAction

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

`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:381

`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:478

`Protected`onDocumentClick

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

`Protected`onFlowLoaded

onFlowLoaded(): void
Called when Foblex flow finishes loading

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

`Protected`onGridToggled

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

`Protected`onKeyDown

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

`Protected`onLegendToggled

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

`Protected`onMinimapToggled

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

`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:613

`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:567

`Protected`onPaletteNodeTypeActivated

onPaletteNodeTypeActivated(config: FlowNodeTypeConfig): void
A palette entry was clicked (or activated from the keyboard) rather than dragged.

Deliberately routed into the SAME addNodeFromPalette the drop path uses. A separate click-only creation path would be a second way for a node to come into existence, and the two would drift — which is exactly the failure this fixes, one level up.
Parameters
- config: FlowNodeTypeConfig
Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:500

`Protected`onPanModeToggled

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

`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:411

`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:531

Redo

Redo(): void
Redo the last undone operation

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

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:237

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:253

SetToolbarVisibility

SetToolbarVisibility(next: FlowToolbarVisibility): void
Parameters
- next: FlowToolbarVisibility
Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:113

`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:769

`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:765

Undo

Undo(): void
Undo the last operation

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

UpdateConnection

UpdateConnection(
    connId: string,
    changes: Partial<
        Pick<
            FlowConnection,
            | "Label"
            | "LabelIcon"
            | "LabelIconColor"
            | "LabelDetail"
            | "Color"
            | "StrokeWidth"
            | "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"
          | "StrokeWidth"
          | "Style"
          | "Animated",
      >,
  >
Returns void
- Defined in flow-editor/src/lib/components/flow-editor.component.ts:273

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:264

ZoomIn

ZoomIn(): void
Zoom in one step

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

ZoomOut

ZoomOut(): void
Zoom out one step

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

ZoomToFit

ZoomToFit(): void
Fit all nodes within the viewport

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

Class FlowEditorComponent

Implements

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns FlowEditorComponent

Properties

AfterContextMenuAction

AutoLayoutDirection

BeforeContextMenu

ProtectedcanvasArea

CanvasClicked

ProtectedcanvasPosition

ProtectedcanvasScale

ConnectionCreated

ConnectionEditRequested

ConnectionLabelBackground

ConnectionLabelBorderColor

ConnectionLabelTextColor

ConnectionReassigned

ConnectionRemoved

Connections

ConnectionsChanged

ConnectionSelected

ProtectedcontextMenuConnection

ProtectedcontextMenuItems

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

ToolbarAlign

ToolbarVisibility

ToolbarVisibilityChanged

ProtectedzoomLevel

Accessors

CanRedo

Returns boolean

CanUndo

Returns boolean

EffectiveToolbarVisibility

Returns FlowToolbarVisibility

EmptyStateTitle

Returns string

selectedCount

Returns number

Methods

AutoArrange

Parameters

`Protected`canvasArea

`Protected`canvasPosition

`Protected`canvasScale

`Protected`contextMenuConnection

`Protected`contextMenuItems

`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`onPaletteNodeTypeActivated

`Protected`onPanModeToggled