DEV Community: Siarhei Huzarevich

Call Center Flow Editor — now updated with Angular 20 & Signals 🚀

Siarhei Huzarevich — Wed, 03 Sep 2025 21:00:37 +0000

About a year ago I shared a small side project: a call center flow editor built on top of Foblex Flow.

The idea was simple — give users a way to design call flows visually by dragging nodes and connecting them, instead of writing configuration manually.

Since then, Angular has evolved, and so has this project. I wanted to take advantage of Angular 20 and its new Signals API, so I decided to give the editor a proper refresh.

🔥 What’s New

Here’s what changed in this update:

Migrated the whole project to Angular 20
Rewritten state management on Signals → no external store, simpler and more reactive
Added a Light/Dark theme switch for a nicer editing experience
Added Undo/Redo (finally you can experiment without fear)
Improved overall UX (zooming, dragging and reconnecting nodes feels smoother)
Using Angular Material components for the interface

Demo & Source

👉 Live Demo

👉 Source Code

⭐ Library: Foblex Flow

Reflections

Moving everything to Signals simplified the state logic a lot. Undo/redo was much easier to wire up, and persisting state in localStorage became almost trivial.

This was a good reminder that Angular’s ecosystem is evolving quickly — and Signals are already powerful enough to drive fairly complex interactive UIs.

Closing Thoughts

This project started as a small experiment, but it keeps evolving together with Angular. Signals made the code simpler and the editor itself more responsive.

I’m planning to keep polishing it, so feedback is always welcome 🙌

👉 Try the demo: https://foblex.github.io/f-flow-example

And if you find this project useful, consider leaving a ⭐ on GitHub — it really helps!

Foblex Flow 17.7 — Smarter Grouping, Copy/Paste, and Undo/Redo in Angular

Siarhei Huzarevich — Mon, 25 Aug 2025 10:43:01 +0000

Node-based editors are becoming a standard for automation, AI workflows, and low-code platforms. With Foblex Flow, we bring this power natively to Angular.

The new release, v17.7.0, introduces smarter grouping, copy/paste, and undo/redo — all features that make visual editors feel much closer to production-ready tools.

✨ Smarter Grouping

Working with groups is now more powerful and intuitive:

Auto-resize groups with fAutoSizeToFitChildren.
Auto-expand groups dynamically with fAutoExpandOnChildHit when children no longer fit inside.
Refactored and improved examples:
Grouping Example

Drag-to-Group Example

⚠️ Breaking Change

CSS class .f-parent-for-drop → renamed to .f-grouping-over-boundary.
Added .f-grouping-drop-active for valid grouping targets.

👉 If you use custom CSS for grouping, make sure to update your styles!

📋 Copy / Paste Example

We all use copy, cut, and paste every day. Now your node-based editors can too.

New Copy-Paste Example.
Duplicate nodes (with their connections).
Remove selected elements.
Paste them back while maintaining consistent IDs and connections.
This example shows how easy it is to implement clipboard functionality directly with Foblex Flow.

⏪ Undo / Redo Example

No editor feels complete without Undo/Redo. With v17.7, you now have a reference implementation:

New Undo-Redo V2 Example.
Powered by @foblex/mutator.
Tracks state changes, snapshots, and history.
Enables true time-travel editing for your diagrams.

Undo/Redo creates a smoother and more interactive editing experience, and is often a must-have for production tools.

📚 Documentation Updates

We’ve refreshed the docs to reflect these improvements:

Why This Matters

With these features, Foblex Flow becomes even more practical for real-world editors:

Grouping makes complex diagrams easier to manage.
Copy/Paste is expected by every user.
Undo/Redo provides the safety net people need when building flows.

Together, they bring Angular-based visual editors closer to the standard set by professional design tools.

🔗 Links

GitHub repo: https://github.com/foblex/flow
Live examples: https://flow.foblex.com/examples

❤️ Support the Project

This release moves Foblex Flow another step closer to being a full-fledged framework for building low-code and AI editors in Angular.

If you find it useful, please ⭐ the repo on GitHub — it’s the best way to support the project and help it grow.

Inside Foblex Flow — Part 2: Drag-and-Drop Architecture in Angular Without CDK

Siarhei Huzarevich — Sat, 23 Aug 2025 12:27:27 +0000

When we think about node-based editors, the first thing that stands out is the interaction with on-screen elements. Dragging nodes, connecting ports, zooming the canvas — that’s what brings the interface to life.

Without a well-designed drag-and-drop system, the entire editor turns into a static image. That’s why, during the development of Foblex Flow, we decided to build our own engine for handling events and drag sessions.

🛠 Sources

🎯 Why Build a Custom Engine

At first glance, it might seem sufficient to use Angular CDK DragDrop. But in practice, its limitations became clear:

Designed for simple scenarios. CDK solves the “drag a card into a list” problem. But in a node-based editor, you need much more: resize, rotate, connections, multi-selection, canvas dragging.
Lacks extensibility. Adding new behaviors (like dropping into a group) is difficult — there’s no built-in plugin architecture.

So we decided:

👉 We need a custom engine where we have full control over:

event handling,
the lifecycle of a drag session,
plugin-based extensibility,
and a zoneless architecture for performance.

⚡ Unified Event Interface

One of our core principles is that — whether it’s a mouse or touch input — the event should look the same higher up the stack.

To achieve this, we introduced the following interface:

export abstract class IPointerEvent {

  public get originalEvent(): MouseEvent | TouchEvent {
    return this.event;
  }

  public get targetElement(): HTMLElement {
    return this.target || this.originalEvent.target as HTMLElement;
  }

  protected constructor(
    private readonly event: MouseEvent | TouchEvent | PointerEvent,
    private target?: HTMLElement
  ) {}

  public setTarget(target: HTMLElement): void {
    this.target = target;
  }

  public abstract isMouseLeftButton(): boolean;

  public abstract isMouseRightButton(): boolean;

  public preventDefault(): void {
    this.originalEvent.preventDefault();
  }

  public abstract getPosition(): { x: number, y: number };

  public get isEventInLockedContext(): boolean {
    return this.targetElement.closest('[fLockedContext]') !== null;
  }
}

Now, all logic in the editor operates with a unified event object.

Advantages of this approach:

A consistent API across modules (move, resize, rotate);
Simplified support for new input types and devices;
Fewer bugs related to platform inconsistencies.

🧩 Three-Layer Architecture

Drag-and-drop in Foblex Flow is structured in layers:

DragAndDropBase — a low-level class. It subscribes to the document, listens for mousedown / touchstart / pointer events, checks the movement threshold, and initiates a drag session. It also handles screen reader protection and synthetic event filtering.
FDraggableBase — an abstraction for Angular directives. It defines the contract: which events are available (fDragStarted, fDropToGroup, fCreateConnection, etc.) and which inputs are supported (fNodeMoveTrigger, fCellSizeWhileDragging).
FDraggableDirective — the actual directive applied to . It connects the low-level drag engine to the Angular app, uses FMediator to dispatch all *Request actions and emit corresponding *Event outputs.

📌 This layered structure cleanly separates concerns:

The base layer handles raw DOM interaction and events,
The Angular layer exposes them as declarative inputs and outputs,
The application receives well-structured events without worrying about platform-specific details.

🛠 Drag Session Lifecycle

Every interaction in Foblex Flow follows a consistent scenario:

Initialization

The user presses the mouse button or touches the screen.

The directive checks the configured triggers to determine whether starting a move, resize, or connection is allowed at that moment.

Start Threshold

A movement threshold (3 pixels by default) is intentionally applied to avoid triggering a drag from small cursor shakes.

Only when this threshold is exceeded does the drag session officially begin.

Preparation

prepareDragSequence is invoked. This phase is triggered within mousemove/touchmove/pointermove, but only before the drag session actually starts.

Plugins like NodeMove, Resize, Rotate, CanvasMove, DropToGroup, and others evaluate whether they should participate. If so, they create their own motion handler.

Movement

Once at least one motion handler is registered, there’s no need to evaluate the rest — only one action is allowed per session (move, resize, or rotate).

The mousemove/touchmove/pointermove logic switches to passing delta movement data to the active handler instead of preparing new ones.

Completion

On mouseup/touchup/pointerup, finalization handlers are called. The result is committed — a node is moved, a connection is created, or an item is dropped into a group.

👉 Each drag session has clearly defined boundaries. This makes behavior predictable and debugging significantly easier.

🔌 Plugin System

Dragging isn’t just about “moving a node.” In real-world applications, the use cases are far more diverse:

resizing elements,
rotating,
creating connections,
reattaching connections,
moving the canvas,
dropping external items (e.g., from a palette).

Instead of hardcoding all of this into the core, we built a before/after plugin architecture:

private _beforePlugins!: QueryList<IFDragAndDropPlugin>;

Plugins can subscribe to lifecycle hooks like onPointerDown, prepareDragSequence, and onPointerUp.

This allows extending the functionality without touching the core logic.

📌 Example: you can add a hover highlight effect using a separate plugin — no need to modify the base code.

🧠 Architectural Decisions

Zoneless Approach

All drag events are handled inside ngZone.runOutsideAngular, which prevents unnecessary Angular change detection cycles.

This results in high performance, even with hundreds of active nodes.

OS-aware Triggers

On macOS, multi-selection uses metaKey; on Windows and Linux — ctrlKey.

This behavior is built into the fMultiSelectTrigger directive and delivers familiar UX across all platforms — right out of the box.

SSR Compatibility

We never access window or document directly.

All platform APIs are accessed through BrowserService, which can be replaced with a mock on the server.

This makes drag-and-drop work even in Angular Universal, without crashes or runtime errors.

Configurable Behavior

Any drag-and-drop behavior can be finely tuned using triggers. For example:

<f-flow fDraggable [fNodeMoveTrigger]="e => e.shiftKey"></f-flow>

In this case, nodes will only move when the Shift key is held.

This gives developers full control over editor behavior.

Assistive Technology Protection

We’ve implemented checks to prevent drag sessions from being triggered by screen readers or other assistive technologies.

This is important for accessibility and ensures that interaction remains intentional.

🔍 UX Nuances

We’ve paid close attention to subtle details that directly affect the user experience:

Synthetic Event Suppression

After a touchstart, browsers often fire a fake mousedown.

To avoid double triggers, we introduced a MOUSE_EVENT_IGNORE_TIME = 800ms threshold during which such events are ignored.

Text Selection Prevention

During a drag session, the selectstart event is suppressed.

This prevents the user from accidentally selecting text while trying to drag an element — leading to a cleaner, more intuitive experience.

💡 Strengths of the Drag-and-Drop Architecture

Runs outside the Angular zone, ensuring high performance.
Supports all input types thanks to a unified event interface.
Highly configurable through triggers and plugin hooks.
SSR-safe, with no direct reliance on browser globals.
Accounts for UX nuances, such as filtering synthetic events and preventing accidental text selection.
Open for extension — you can implement external drag sources, dynamic reconnections, grouping behavior, and more.

🚀 Conclusion

Drag-and-drop in Foblex Flow is not just about moving elements around — it’s a carefully designed architecture that offers stability, flexibility, and scalability:

Normalized events eliminate inconsistencies between mouse, touch, and pointer input.
A well-defined drag session lifecycle makes behavior predictable and easy to debug.
The plugin system enables new features without altering the core logic.
SSR support and zoneless execution ensure compatibility and performance across environments.

This architecture forms a solid foundation for building not just a visual editor, but a complete platform — from simple node movements to complex scenarios like external drag sources, dynamic reconnection of links, and context-aware behaviors.

👉 In the next part, we’ll dive into FMediator — the foundation of the command architecture in Foblex Flow, enabling clean, modular, and scalable logic without bloating your components.

You’ll learn:

How we built a Command Pipeline with built-in validation and execution stages;
How we eliminated cyclical dependencies between layers using Dependency Inversion and Single Responsibility principles;
How FMediator separates intent (requests) from behavior (handlers), applying CQRS, GRASP, and other proven architectural practices;
Why we avoided heavy state management tools like NgRx, Akita, or NGXS — and built a lightweight solution that doesn’t dictate state structure or bloat your app;
How FMediator became the architectural glue layer coordinating editor behavior — from drag-and-drop to user commands and business logic.

📦 If you appreciate SOLID principles, want to build a scalable UI without unnecessary overhead, and prefer an architecture where modules are loosely coupled — the next article is definitely for you.

Inside Foblex Flow — Part 1: Library Architecture and Design Principles

Siarhei Huzarevich — Fri, 22 Aug 2025 14:37:28 +0000

Node-based interfaces are everywhere today: low-code platforms, workflow editors, chatbot builders, business automation systems, ETL tools. Visual logic modeling allows users to “assemble a program” without code by dragging blocks and connecting them with arrows.

But if you work with Angular, you’ll quickly face a problem:

most popular solutions are React-only (e.g., React Flow),
others are tightly coupled to their own data model,
or they feel outdated and don’t fit into modern Angular projects.

That’s why we built Foblex Flow — a library that fills this gap.

Written entirely in Angular.
Doesn’t dictate how to store your data.
Provides a flexible interaction layer.
Based on a clear, event-driven API.

In this series, we’ll look inside the library — how it works, which principles guide its design, and which architectural decisions make it lightweight and universal.

We’ll start with the foundation: architecture and design principles.

https://github.com/Foblex/f-flow

🎯 The Key Idea: Separation of Responsibilities

Most node-based libraries give you everything “out of the box”: a data store, JSON graph, APIs for saving and loading. That’s convenient at first, but becomes a limitation once you try to integrate it into a real application.

Foblex Flow takes a different approach:

👉 The library stores only what’s needed for interactivity and rendering,
👉 Everything else is left to the user.

What the library stores

Node positions (x, y) — required for rendering.
Canvas scale and translate — zoom and panning (defaults: scale = 1, translate = {0,0}).
Drag session state — current node coordinates, cursor offsets.
Element selection (selected / unselected) — for highlighting and frames.
Internal UI states — e.g., snap highlight when connecting nodes.

What the user stores

Graph structure — which nodes exist, their types and parameters.
Connection model — which links are allowed, validation rules.
Node semantics — what a “Webhook”, “AI Generator” or “Parser” node actually does.
Persistence — saving/loading flows (NgRx, Signals, IndexedDB, Firebase, etc.).
Visual styles — how nodes and connectors look.

📌 In short: the library handles the UI layer, while your application owns the business logic.

⚡ Event-Driven Model

The golden rule of Foblex Flow: the library never mutates your data silently.

Every user action is emitted as an Angular event:

fNodeMoved — a node was dragged.
fNodeSelected — a node was selected.
fConnectionCreated — a new connection was made.
fConnectionRemoved — a connection was deleted.
fCanvasChanged— the canvas was changed.

This means every action is a signal to your application:

“This happened. You decide what to do.”

That makes the library predictable and easy to integrate with any state management — from Signals to NgRx.

🧩 Architectural Layers

We can break down Foblex Flow into four layers:

FFlowComponent
 └── FCanvas
      ├── FNodeDirective
      │     ├── FNodeOutputDirective
      │     └── FNodeInputDirective
      │
      └── FConnectionComponent

Flow
The root component f-flow — coordinates context, events, and canvas state.

Canvas
The workspace: holds all nodes and connections. Manages zoom, pan, and selections.

Nodes
Nodes are not predefined components, but directives you can attach to any Angular element.

fNode — turns an element into a node.
fNodeOutput — defines an output connector.
fNodeInput — defines an input connector.

Connections
An SVG path connecting an output to an input. Supports Bezier curves, straight lines, and arrows.

🔧 Minimal Example

<f-flow>
  <f-canvas>
    <!-- Node 1 -->
    <div fNode fNodeId="node1" [position]="{x: 100, y: 150}">
      <div fNodeOutput fOutputId="out1"></div>
    </div>

    <!-- Node 2 -->
    <div fNode fNodeId="node2" [position]="{x: 400, y: 150}">
      <div fNodeInput fInputId="in1"></div>
    </div>

    <!-- Connection -->
    <f-connection fOutputId="out1" fInputId="in1"></f-connection>
  </f-canvas>
</f-flow>

Positions (x, y) are mandatory — without them a node won’t render.

But where and how you store them (Signals, NgRx, Firestore, a plain service) is entirely up to you.

🛠 Design Principles

1. Minimal Magic
Instead of hiding complexity behind black boxes, the API is transparent: directives and events are explicit.

2. SSR and Zoneless Angular
Foblex Flow works outside the browser.

All window, document, and localStorage references go through DI and can be mocked for SSR.

3. Performance

No “global JSON graph” that’s recalculated on each change.
Renders only changed elements.
Drag-and-drop is optimized for large graphs (hundreds of nodes).

4. Flexibility

Store flows as JSON if you like.
Sync with Firebase or GitHub.
Save to IndexedDB.

The library never dictates your persistence strategy.

📐 Visual Diagram

flowchart TD
    subgraph "Library stores"
        A[Node positions] --> B[Scale/Translate]
        B --> C[Selections]
        C --> D[Drag sessions]
    end

    subgraph "Application stores"
        E[Graph structure]
        F[Connections]
        G[Node parameters]
        H[Persistence]
    end

    A -.-> E
    B -.-> F
    C -.-> G
    D -.-> H

The diagram illustrates the boundary: Foblex Flow only handles UI state, while your app owns the graph model and business logic.

🧠 Philosophy: UI Handles Interactivity, Not Data

The core philosophy: Foblex Flow is not a “platform inside a platform.”

It focuses on what it does best — interactive UI.

The library tells you what the user did.
Your app decides what it means.

This separation makes the library universal. You can build anything — from workflow editors to no-code chatbot builders.

🚀 Conclusion

Foblex Flow is not a black box — it’s a transparent tool for building node-based UIs in Angular.

It manages interactivity, not your data.
Gives you full control over business logic.
Fits projects of any scale, from simple diagrams to complex low-code platforms.

In the next part, we’ll dive into the drag-and-drop engine:

unifying mouse, touch, and pointer events,
the internal IPointerEvent structure,
how FDraggableDirective works,
and how plugins enable extensions like resize, rotate, and external drop.

Building AI Low-Code Platform in Angular — Part 4: Styling and Handling Connections

Siarhei Huzarevich — Fri, 08 Aug 2025 08:16:59 +0000

In the previous part, we brought our node editor to life with custom components and a dynamic palette. But nodes alone don’t make the magic — the real power comes from how they connect. And more importantly, how those connections behave, look, and respond to users.

Today, we’re upgrading our flow with some serious UX polish:

🔁 Enable dynamic reattachment of connections (drag to reconnect!)
🏁 Style connections with sleek SVG markers
✨ Add hover highlights and interactivity

Let’s turn static lines into smart, responsive connectors — and give our low-code UI a professional edge.

🔧 View the source code on GitHub

🔧 Explore the full application

🔁 Reattaching Connections

Connections in Foblex Flow aren’t just static wires — they’re fully interactive and reconfigurable. Each end of a connection features a drag handle — an invisible area you can grab to change where the connection starts or ends.

By default, only the target end (input) is draggable. But you can also make the source end (output) reassignable by setting the fReassignableStart=”true” input. This gives you precise control over which ends can be modified — on a per-connection basis.

Want to rewire a connection? Just drag one of its ends and drop it onto another connector. Foblex Flow takes care of the rest — when the drag operation finishes, it emits the fReassignConnection event from the <f-flow> component itself (not from the connection element):

<f-flow fDraggable
        (fCreateNode)="createNode($event)"
        (fCreateConnection)="createConnection($event)"
        (fReassignConnection)="reassignConnection($event)"> // This event is emitted from [fDraggable](https://flow.foblex.com/docs/f-draggable-directive), not from f-connection itself
</f-flow>

This event contains everything you need to handle the reattachment:

class FReassignConnectionEvent {
  connectionId: string;
  isSourceReassign: boolean;
  isTargetReassign: boolean;
  oldSourceId: string;
  newSourceId: string | undefined;
  oldTargetId: string;
  newTargetId: string | undefined;
  dropPoint: IPoint;
}

🧠 Tip:

The event will still be triggered even if the user doesn’t drop the connection onto another connector. In that case, newTargetId (or newSourceId) will be undefined, but you’ll still receive the exact dropPoint — the canvas coordinates where the user released the connection.

This is extremely useful if you want to open a context menu or create a new node on the fly at that position.

Here’s how to update your connection list when the target changes:

protected reassignConnection(event: FReassignConnectionEvent): void {
  if (!event.newTargetId) {
    return;
  }
  this.connections.update((connections) => {
    const connection = connections.find(c => c.id === event.connectionId);
    if(!connection) {
      throw new Error(`Connection ${event.connectionId} not found`);
    }
    connection.to = event.newTargetId;
    return [...connections];
  });
}

That’s it — your users can now interactively rewire the flow by grabbing connection ends and reattaching them wherever they need. It’s a small feature, but it makes the editor feel dynamic, intuitive, and alive.

https://flow.foblex.com/examples/drag-to-reassign

🧬 Connection Types and Behaviors

Connections in Foblex Flow aren’t just visual lines — they’re deeply customizable and behave exactly how you want them to.

Let’s start with the three connection types, each offering a different visual style:

straight — a simple straight line
segment — a segmented line with right angles (ideal for logic-style editors)
bezier — a smooth, curved Bézier path

https://flow.foblex.com/examples/connection-types

Next, you can define how the connection behaves when linking nodes:

fixed — connects from a specific side (left, right, top, bottom) defined via fConnectableSide
fixed_center — connects from the exact center of each node
floating — auto-calculates the intersection between the node’s shape and the imaginary line between node centers (great for circular or irregular shapes)

https://flow.foblex.com/examples/connection-behaviours

These options give you total control over both aesthetics and logic — whether you’re building a chatbot flow, a wiring diagram, or an AI pipeline.

📖 Want to dive deeper into all behaviors and visuals?

👉 Read the full documentation

In our low-code platform, we’ll use a Bézier curve with a fixed side behavior, which feels natural for horizontal flow layouts:

<f-connection [fConnectionId]="connection.id"
              fBehavior="fixed"
              fType="bezier"
              [fOutputId]="connection.from"
              [fInputId]="connection.to" />

You’re now in control — not just of where your connections go, but how they feel when they get there.

🏁 Adding SVG Markers to Connections

A great UI isn’t just about layout — it’s about clarity and direction. When working with connections, nothing communicates intent better than directional markers.

With Foblex Flow, you can attach custom SVG markers to the start or end of any connection. These can be arrows, dots, diamonds — anything you can draw in SVG.

https://flow.foblex.com/examples/connection-markers

Here’s a minimal example that adds a simple circle to the start of a connection:

<f-connection [fOutputId]="id1" [fInputId]="id2">
  <svg fMarker type="f-connection-marker-start"
       [height]="10" [width]="10" [refX]="5" [refY]="5">
    <circle cx="5" cy="5" r="2" fill="var(--connection-color)" />
  </svg>
</f-connection>

📌fMarker input parameters:

type — the marker type
width, height — size of the marker viewport
refX, refY — anchoring point (where the marker attaches to the connection)

All marker types are defined in the EFMarkerType enum:

enum EFMarkerType {
  START,
  END,
  SELECTED_START,
  SELECTED_END,
}

You can style markers differently for selected states — this is great for showing hover, focus, or active connections.

Here’s a full example that applies all four types of markers on a connection:

protected readonly eMarkerType = EFMarkerType;

<f-connection [fConnectionId]="connection.id"
              fBehavior="fixed"
              fType="bezier"
              [fOutputId]="connection.from"
              [fInputId]="connection.to">
  <svg viewBox="0 0 10 10" fMarker [type]="eMarkerType.START" [height]="10" [width]="10" [refX]="5" [refY]="5">
    <circle cx="5" cy="5" r="2" fill="var(--connection-color)" />
  </svg>
  <svg viewBox="0 0 700 700" fMarker [type]="eMarkerType.END" [height]="5" [width]="5" [refX]="4" [refY]="2.5">
    <path fill="var(--connection-color)" d="M0,0L700,350L0,700L150,350z" />
  </svg>
  <svg viewBox="0 0 10 10" fMarker [type]="eMarkerType.SELECTED_START" [height]="10" [width]="10" [refX]="5" [refY]="5">
    <circle cx="5" cy="5" r="2" fill="var(--connection-color)" />
  </svg>
  <svg viewBox="0 0 700 700" fMarker [type]="eMarkerType.SELECTED_END" [height]="5" [width]="5" [refX]="4" [refY]="2.5">
    <path fill="var(--connection-color)" d="M0,0L700,350L0,700L150,350z" />
  </svg>
</f-connection>

With just a few lines of SVG, your connections can now clearly show direction, communicate selection, and make the entire UI feel more polished and understandable.

Next, we’ll make them glow ✨

🎨 Styling Connections and Markers

Let’s make our connections not just smart — but stylish.

First, we’ll define a custom CSS variable — connection-color and apply it to both the stroke of the connection path and the fill of any SVG markers. This way, all visual elements stay perfectly in sync.

::ng-deep {
  .f-connection {
    --connection-color: rgba(60, 60, 67); // default line color

    &.f-selected {
      --connection-color: #3451b2; // highlighted color on selection
    }

    .f-connection-drag-handle {
      fill: transparent; // invisible grab area for reattachment
    }

    .f-connection-selection {
      stroke-width: 10; // makes the selection area easier to hit
    }

    .f-connection-path {
      stroke: var(--connection-color); // applies the CSS variable
      stroke-width: 2;
    }
  }
}

💡 Why use CSS variables?

They allow you to easily switch themes, support dark/light mode, or dynamically update styles on interaction — without touching the DOM.

👆 Hover Effect

Now let’s make our connections respond to user interaction. A subtle glow on hover helps users understand that a line is clickable or draggable.

.f-connection-selection {
  stroke-width: 15;

  &:hover {
    stroke: rgba(52, 81, 178, 0.1);
  }
}

Just like that, your editor starts to feel alive — reacting to user input in a smooth, intuitive way.

✅ Done!

At this point, your connections are no longer just lines between nodes — they’re fully interactive, visually expressive, and ready for production use.

Here’s what we’ve achieved in this part:

✅ Enabled reattachment of connections with intuitive drag handles

✅ Supported reconnection from either side of the link

✅ Styled connection paths using CSS variables for easy theming

✅ Added SVG markers to visualize direction and selection

✅ Enhanced the UX with hover effects and visual feedback

Together, these improvements make a massive difference in how your flow editor feels to the user. Small touches like directional arrows or soft highlights can turn a technical tool into a truly enjoyable experience.

But we’re not stopping here.

Up next, we’ll take interactivity to the next level by adding a side panel that appears when a node is selected. This panel will allow users to:

View and edit node parameters dynamically
Bind controls to schema-driven forms
See changes reflected live in the flow

This is a huge step toward building a real low-code platform, where users don’t just connect logic — they configure and control it through a seamless UI.

Building AI Low-Code Platform in Angular — Part 3: Creating Custom Nodes and a Node Palette

Siarhei Huzarevich — Thu, 24 Jul 2025 17:24:26 +0000

In the previous article, we built a basic editor with two nodes and a single connection. Now, let’s take the next step — we’ll add custom Angular node components, interactive connectors, and a simple node palette.

It’s not a full low-code platform just yet, but we’re steadily laying the groundwork — from visual customization to dynamic interaction between elements.

In this part, we’ll implement:

🎨 A node palette with icons and labels
🧩 Custom Angular components for each node
🧵 Connectors (input/output) with interactive hover effects
🔌 Logic to create nodes and connections using Foblex Flow events

🔧 View the source code on GitHub

🔧 Explore the full application

Component Architecture

Our visual flow will be based on three main components:

Flow — the main Angular component containing f-flow and managing all nodes and connections
Node — a custom Angular component that represents a single node, linked to Foblex Flow using the fNode directive
FlowPalette — a sidebar panel containing draggable elements for the canvas

Continuing from the Previous Project

We’ll continue building on the project from the previous article.

Add Icons and Reset Styles

First, we need to load the required fonts and icons. Add the following to your index.html:

<link href="https://fonts.googleapis.com/css2?family=Inter&family=Material+Symbols+Outlined" rel="stylesheet"/>

Then, reset default styles and apply the base font by adding this to your styles.scss:

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Inter', sans-serif;
}

Defining Node Models and Initial Data

Let’s begin by defining the models for nodes and connections. Below are the TypeScript interfaces and an example set of 8 node types, which you can expand or customize later as needed:

// i-connection.ts
export interface IConnection {
  id: string;
  from: string;
  to: string;
}

// i-storage-node.ts
export interface IStorageNode {
  name: string;
  icon: string;
  shortDescription: string;
  inputs: string[];
  outputs: string[];
}

// i-node.ts
import { IStorageNode } from './i-storage-node';

export interface INode extends IStorageNode {
  id: string;
  position: { x: number; y: number };
}

Now let’s define a list of available nodes:

// data.ts
export const DATA: IStorageNode[] = [
  {
    name: "Start",
    icon: "link",
    shortDescription: "Start: incoming request",
    inputs: [],
    outputs: ["any"]
  },
  {
    name: "AI Parser",
    icon: "code_blocks",
    shortDescription: "Extract JSON fields",
    inputs: ["any"],
    outputs: ["success", "failure"]
  },
  {
    name: "Retry Loop",
    icon: "repeat",
    shortDescription: "Repeat for each item",
    inputs: ["any"],
    outputs: ["any"]
  },
  {
    name: "AI Validator",
    icon: "check_circle",
    shortDescription: "AI data checker",
    inputs: ["parsed", "retry"],
    outputs: ["valid", "invalid"]
  },
  {
    name: "AI Executor",
    icon: "psychology",
    shortDescription: "AI-powered action",
    inputs: ["valid"],
    outputs: ["done"]
  },
  {
    name: "If-Else",
    icon: "fork_right",
    shortDescription: "Conditional branching",
    inputs: ["any"],
    outputs: ["true", "false"]
  },
  {
    name: "Error Handler",
    icon: "error",
    shortDescription: "Error management",
    inputs: ["any"],
    outputs: []
  },
  {
    name: "Logger",
    icon: "terminal",
    shortDescription: "Flow logging",
    inputs: ["any"],
    outputs: []
  }
];

Creating the Node Palette

Next, we’ll create the flow-palette component — a vertical sidebar from which we can drag nodes into the canvas.

Each palette item is a div using the fExternalItem directive, which enables external drag-and-drop support with Foblex Flow.

Template (flow-palette.html)

@for (node of nodes; track node.name) {
  <div class="palette-node" fExternalItem [fData]="node" [fPreviewMatchSize]="true">
    <span class="icon">{{ node.icon }}</span>
    <span>{{ node.name }}</span>
  </div>
}

Styles (flow-palette.scss)

:host {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: fit-content;
  gap: 8px;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

::ng-deep .palette-node {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  padding: 5px;
  background-color: white;

  .icon {
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    background: linear-gradient(to right, #4b91f1, #5c2ae8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

We use ::ng-deep here because drag preview elements are appended to the document.body. Without it, styles wouldn’t apply to them.

Component (flow-palette.ts)

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { FFlowModule } from '@foblex/flow';
import { DATA } from './data';

@Component({
  selector: 'flow-palette',
  imports: [FFlowModule],
  templateUrl: './flow-palette.html',
  styleUrl: './flow-palette.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
})
export class FlowPalette {
  protected nodes = DATA;
}

Now we can add nodes from the palette directly into the flow by handling the following event:

<f-flow (fCreateNode)="createNode($event)">
</f-flow>

📦 Custom Nodes

Each node in the editor will be represented by a dedicated Angular component:

@Component({
  selector: 'node',
  ...
})
export class Node {
  public data = input.required<INode>();
}

Node Template:

<div class="connectors inputs">
  @for (connector of data().inputs; track $index) {
    <connector fNodeInput [fInputId]="connector + ' ' + data().id" fInputConnectableSide="left" />
  }
</div>
<div class="connectors outputs">
  @for (connector of data().outputs; track $index) {
    <connector fNodeOutput [fOutputId]="connector + ' ' + data().id" fOutputConnectableSide="right" />
  }
</div>

<div class="header">
  <span class="icon">{{ data().icon }}</span>
  <span>{{ data().name }}</span>
</div>

<div class="description">{{ data().shortDescription }}</div>

Styles (node.scss):

:host {
  position: relative;
  background: #ffffff;
  border-radius: 6px;
  padding: 20px 24px;
  min-width: 180px;
  max-width: 180px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: default;

  &:hover {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  }

  &.f-selected {
    outline: 2px solid #4b91f1;
    outline-offset: -2px;
    box-shadow: 0 0 0 4px rgba(75, 145, 241, 0.12);
  }

  .header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 15px;
  }

  .icon {
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    background: linear-gradient(to right, #4b91f1, #5c2ae8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .description {
    font-size: 13px;
    opacity: 0.7;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: fit-content;
  }

  .connectors {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1;

    &.inputs {
      left: -6px;
      top: 8px;
      bottom: 8px;
      justify-content: start;
    }

    &.outputs {
      right: -6px;
      top: 8px;
      bottom: 8px;
      justify-content: end;
    }
  }
}

Each node has inputs (fNodeInput) and outputs (fNodeOutput) — these are small circular components with hover animation and styles for the connected state.

🔘 Connector Component

While we could have kept the connector inline inside the node, we’re moving it to a standalone component for better style encapsulation and code separation.

Component (connector.ts):

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FFlowModule } from '@foblex/flow';

@Component({
  selector: 'connector',
  imports: [FFlowModule],
  template: '',
  styleUrl: './connector.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
})
export class Connector {}

Styles (connector.scss):

:host {
  position: relative;
  width: 12px;
  height: 12px;
  min-height: 12px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;

  &.connected {
    background-color: #4b91f1;
    box-shadow: 0 0 0 2px rgba(75, 145, 241, 0.2);
  }

  &:hover {
    transform: scale(1.4);
    box-shadow: 0 0 6px rgba(75, 145, 241, 0.4);
  }
}

🚀 Dynamically Adding Nodes from the Palette

Up to this point, we’ve been rendering nodes manually — statically defined in the template. Now it’s time to take the next step: we’ll enable users to dynamically add nodes by dragging them from the side palette into the canvas.
Here’s how the flow works:

The user drags a node from the palette.
The fCreateNode event is triggered, giving us information about what type of node was added and where it should appear.
We push the new node into a reactive array — and thanks to @for, it immediately appears on the canvas.

1. Storing nodes in a signal

We start by creating a signal to hold the list of all current nodes:

protected nodes = signal<INode[]>([]);

Signals make the UI reactive — whenever the list updates, the DOM reflects the changes.

2. Handling the fCreateNode event

Now let’s define the method that will run when a new node is added:

protected createNode(event: FCreateNodeEvent<IStorageNode>): void {
  this.nodes.update((nodes) => {
    const newNode: INode = {
      ...event.data,
      id: generateGuid(),
      position: event.rect || { x: 0, y: 0 }
    };
    return [...nodes, newNode];
  });
}

Here’s what’s happening:

We extract the node’s metadata from event.data.
We generate a unique id using generateGuid().
We use the position passed from the event — this is usually the cursor position on drop.
We return a new list of nodes with the new one added.

3. Updating the template

Let’s replace the static nodes with a dynamic list rendered using @for:

<f-flow fDraggable
        (fCreateNode)="createNode($event)">
  <f-canvas>
    @for (node of nodes(); track node.id) {
      <node
        fNode
        fDragHandle
        [fNodePosition]="node.position"
        [fNodeId]="node.id"
        [data]="node">
      </node>
    }
  </f-canvas>
</f-flow>

<flow-palette />

Key notes:

fDraggable enables node movement inside the canvas.
fNode links the element to Foblex Flow.
fDragHandle defines the draggable area inside the node.
[fNodePosition], [fNodeId], and [data] pass in the necessary parameters for rendering.

🔁 How the flow comes together

When a user drags a node from flow-palette, the fExternalItem directive fires an fCreateNode event. We handle that event in the createNode method, construct a new node object, and append it to the list. Thanks to @for, the UI instantly reflects the change.

🛠 Generating Unique IDs

To ensure each node has a unique identifier, we use a small utility function:

export function generateGuid(): string {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    const r = Math.random() * 16 | 0;
    const v = c === 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

⚙️ Logic for Creating and Rendering Connections

Now that we can add nodes from the palette, it’s time to implement the next key step: connecting nodes together — and rendering those connections inside the canvas.

🧩 What <f-connection-for-create> Does

This component goes inside and renders a temporary line when the user starts dragging a connection from an output. It also triggers the fCreateConnection event once the drag ends — either over a valid input or in empty space.

📌 Listening to fCreateConnection and Displaying Connections

Let’s update our Flow component template to handle the connection event and also render all created connections:

<f-flow fDraggable
        (fCreateNode)="createNode($event)"
        (fCreateConnection)="createConnection($event)">
  <f-canvas>
    <!-- Visual feedback during dragging -->
    <f-connection-for-create></f-connection-for-create>

    <!-- Render all established connections -->
    @for (connection of connections(); track connection.id) {
      <f-connection [fConnectionId]="connection.id"
                    [fOutputId]="connection.from"
                    [fInputId]="connection.to" />
    }

    <!-- Render all nodes -->
    @for (node of nodes(); track node.id) {
      <node
        fNode
        fDragHandle
        [fNodePosition]="node.position"
        [fNodeId]="node.id"
        [data]="node">
      </node>
    }
  </f-canvas>
</f-flow>

<flow-palette />

🔁 Handling the Connection Event

Here’s the method that handles fCreateConnection and stores the connection in a reactive signal:

protected connections = signal<IConnection[]>([]);

protected createConnection(event: FCreateConnectionEvent): void {
  if (!event.fInputId) return;

  this.connections.update((connections) => [
    ...connections,
    {
      id: generateGuid(),
      from: event.fOutputId,
      to: event.fInputId
    }
  ]);
}

Here’s what’s happening:

event.fOutputId is the ID of the output connector the user dragged from.
event.fInputId is the ID of the input the user dropped onto.
If fInputId is missing (the user released the mouse in empty space), we ignore the event.

🖇 Putting It All Together

Now we have a complete cycle in place:

Nodes are added from the palette.
The user connects outputs to inputs.
All valid connections are stored in connections() and automatically rendered in the flow via .

🧩 Conclusion

At this stage, our visual editor is starting to look much more like a real low-code platform. We’ve learned how to:

create custom Angular-based nodes;
render them inside the canvas;
drag items from a palette;
connect nodes visually using interactive connectors;
store and display the list of all connections.

The key idea in this part is the separation of logic from visual behavior. The Foblex Flow library doesn’t manage your state directly — it simply tells you what happened: a node was added, a connection started, or a drag event completed. Everything else remains under your control.

In the next part, we’ll focus on styling and connection behavior. We’ll add curved lines, color schemes, arrows, custom states, and interactions like hover, click, and delete. These enhancements will give your flow editor a polished and professional feel.

🧠 Series: Building AI Low-Code Platform in Angular
✅ Part 1: Introduction to Foblex Flow
✅ Part 2: Creating Your First Flow
✅ Part 3: Creating Custom Nodes and a Node Palette
🔄 Part 4: Styling and Handling Connections (soon)
🔄 Part 5: Creating a Node Configuration Panel (soon)
🔄 Part 6: Flow Execution and Playback Animation (soon)
🔄 Part 7: Minimap, Multi-Select and Smart Alignment (soon)

Building AI Low-Code Platform in Angular — Part 2: Creating Your First Flow

Siarhei Huzarevich — Tue, 24 Jun 2025 14:33:09 +0000

Learn how to render a flow, create basic draggable nodes, and connect them. This is the foundation for your AI Low-code platform.

In this article, we’ll go through the minimal setup needed to build an interactive flow with draggable nodes and dynamic connections — all using Foblex Flow, a native Angular library for visual interfaces.

🔧 View the source code on GitHub

🔧 Explore the full application

🚀 Installation

To add Foblex Flow to your Angular project, simply use the schematics command, which will automatically install all dependencies and perform the initial setup:

ng add @foblex/flow

🔧 Creating a Basic Flow

Let’s now create the simplest example — an interface with two nodes and a connection between their connectors. This is the minimal setup that’s ideal for getting started:

<f-flow fDraggable>
  <f-canvas>
    <f-connection fOutputId="output1" fInputId="input1"></f-connection>

    <div
      fNode
      fDragHandle
      fNodeOutput
      [fNodePosition]="{ x: 32, y: 32 }"
      fOutputId="output1"
      fOutputConnectableSide="right"
    >
      Node 1
    </div>

    <div
      fNode
      fDragHandle
      fNodeInput
      [fNodePosition]="{ x: 240, y: 32 }"
      fInputId="input1"
      fInputConnectableSide="left"
    >
      Node 2
    </div>
  </f-canvas>
</f-flow>

🎨 Styling

The library does not include any default styles, giving you full freedom in design. Below is a basic style set to get started quickly:

.f-flow {
  height: 400px;
}

.f-node {
  padding: 24px;
  color: rgba(60, 60, 67);
  text-align: center;
  background: #ffffff;
  border-radius: 2px;
  border: 0.2px solid rgba(60, 60, 67);

  &.f-selected {
    border-color: #3451b2;
    // Highlights the border when the node is selected
    // The f-selected class is automatically added by the library when a node or connection is selected.
  }
}

.f-drag-handle {
  cursor: move;
}

::ng-deep {
  .f-connection {
    .f-connection-drag-handle {
      fill: transparent;
      // By default, this element has a black fill and is used to detect the start of dragging (e.g., onmousedown).
      // We make it transparent to avoid visual clutter, while keeping it functional.
    }

    .f-connection-selection {
      stroke-width: 10;
      // This is a pseudo-connection (a copy of the main path) used to make it easier to select the connection.
      // It's slightly thicker than the actual path (which is often only 1px), making it easier to interact with.
      // It remains invisible to avoid affecting visual clarity but stays active for user interaction.
    }

    .f-connection-path {
      stroke: rgba(60, 60, 67);
      stroke-width: 2;
    }

    &.f-selected {
      .f-connection-path {
        stroke: #3451b2;
      }
    }
  }
}

🔍 Explanation

<f-flow> — the root component that manages the flow state.
<f-canvas> — the layer where nodes and connections are placed.
fNode — directive representing a node.
fNodeOutput / fNodeInput — connectors for connections. fNodeOutput is the source, and fNodeInput is the target.
<f-connection> — the component that renders a connection between two connectors by their fOutputId and fInputId.

⚠️ Note: fOutputId and fInputId may technically match, since they belong to different connector collections. However, this is not recommended, as future versions may unify these into a single fConnector directive where matching IDs would cause conflicts.

🧪 Try This

Change the [fNodePosition] coordinates
Add more fNode and <f-connection> elements
Experiment with connection sides: fOutputConnectableSide, fInputConnectableSide
Modify the connection type or behavior using the fType and fBehaviour inputs.
fType: defines the visual style of the connection. Acceptable values from the EFConnectionType enum include: straight, bezier, segment. You can also pass a string for a custom connection type.

To create a custom connection type, see documentation here.

fBehavior: defines the connection behavior, including positioning and flexibility. Acceptable values from EFConnectionBehavior include: fixed, fixed_center, floating. Default: EFConnectionBehavior.FIXED.

⚙️ Customize It

Full styling freedom — you decide how the nodes and UI will look.
Any Angular components can be used inside fNode — not limited to divs.

📌 Supports SSR, Standalone Components, Signals, and Zoneless Angular.

🐞 Common Mistakes

❌ Missing [fNodePosition] — the node won’t appear on screen.
❌ fOutputId or fInputId don’t match the ones set in connectors — the connection won’t render.
❌ Components are placed outside <f-canvas> — fNode and <f-connection> must be within it.

🔍 Under the Hood

All fNode elements are registered and stored with their coordinates.
<f-connection> finds the correct fNodeOutput and fNodeInput by ID.
Connection points are calculated and an SVG line is drawn.
When nodes are moved, connections update automatically.

⏭ What’s Next?

In the next article:

We’ll create custom Angular components as nodes
Add drag and drop events

📘 Jump To Series

✅ Part 1: Introduction to Foblex Flow
✅ Part 2: Creating Your First Node Flow (you are here)
🔄 Part 3: Creating Custom Nodes and a Node Palette (coming soon)

👉 In the meantime, explore the official documentation: flow.foblex.com

Building AI Low-Code Platform in Angular— Part 1: Introduction to Foblex Flow

Siarhei Huzarevich — Tue, 24 Jun 2025 14:10:18 +0000

Introduction to the series and the Foblex Flow library — a flexible tool for creating flow-based UIs in Angular. Learn the core concepts behind low-code architecture.

✍ Introduction

Modern web applications increasingly require visual logic and process editors — from call flow builders to no-code tools or internal dashboards.

If you work with Angular, you know how difficult it is to find a truly native solution for creating such flow interfaces.

That’s why I created Foblex Flow — a library designed specifically for Angular to build flexible and dynamic node-based UIs.

🔧 What is Foblex Flow?

Foblex Flow is an Angular library for building interactive node-and-connection-based interfaces — fully written in Angular.

With it, you can:

Render and connect nodes dynamically
Customize node templates freely
Use drag’n’drop, zooming, snapping, and grouping
Integrate with SSR, standalone components, Angular Signals, and zoneless Angular
Build complete editors with state saving and custom logic

🧩 Where You Might Use It

Workflow editors
Logic configurators (low-code / no-code)
Call routing editors
Visual back-office or CRM tools
Visual programming UIs (block logic, AI chains)

🔍 What You’ll Learn in This Series

In this series of tutorials, we’ll cover:

How to install and render a basic flow
How to use custom components as nodes
How to configure and customize connections
How to enable snapping, resize, and rotate
How to save and restore flow state
How to build a real-world editor with the library

📚 Live Examples

Here are a few interactive examples built with Foblex Flow:

🚀 Features

🔌 Dynamic node and connection management
🧠 Event-driven architecture for nodes and links
✏️ Full customization of templates and visuals
🔍 Zooming, panning, snapping, and guide support
🧱 Grouping and alignment with grid snapping
📦 Compatible with SSR, standalone components, Angular Signals, and zoneless Angular

📘 Jump To Series

✅ Part 1: Introduction to Foblex Flow (you are here)
✅ Part 2: Creating Your First Node Flow

In the meantime, check out the official documentation or explore the examples.

🙌 Thanks for Your Interest

If you like the project — leave a ⭐ on GitHub, join the discussions, and share your feedback!

Creating workflow editor with Angular

Siarhei Huzarevich — Mon, 15 Jul 2024 12:22:43 +0000

Demo
Library

In this tutorial, we will look at the process of creating a visual flow call editor using Angular and the @foblex/flow library.

The first step is to create a new Angular project:



ng new call-workflow-editor

To work with a graph, install @foblex/flow:



npm install @foblex/flow

Defining Models

To manage the components of a workflow, it is necessary to define models:



export interface IFlowModel {
  nodes: INodeModel[];
  connections: IConnectionModel[];
}

export interface INodeModel {
  key: string;
  name: string;
  outputs: string[];
  input?: string;
  position: { x: number, y: number };
  type: ENodeType;
}

export interface IConnectionModel {
  key: string;
  from: string;
  to: string;
}

Workflow elements configuration

To control the behaviour of our visual workflow call editor, we introduce an enumeration of node types (ENodeType). Our application will use five main types of nodes:

Incoming Call: designed for incoming calls. This is the first node that is activated when a call is received.
Play Text: Allows you to play a preset text to the caller. Can be used for autoresponders or informational messages.
User Input: Waits for input from the user, such as pressing buttons on a phone to navigate through a menu.
To Operator: forwards the call to an operator. Used to contact a live operator if automated options are not suitable.
Disconnect: Ends the call. Can be used after all necessary actions have been completed or if the caller has decided to end the call.

Each node type is assigned unique settings, including name, icon, color, and number of outputs. This allows you to visually distinguish nodes from each other and configure their functionality:



export enum ENodeType {
  IncomingCall = 'incoming-call',
  PlayText = 'play-text',
  UserInput = 'user-input',
  ToOperator = 'to-operator',
  Disconnect = 'disconnect'
}

export const NODE_MAP = {
  [ ENodeType.IncomingCall ]: {
    name: 'Incoming call',
    icon: 'add_call',
    color: '#39b372',
    outputs: 1
  },
  [ ENodeType.UserInput ]: {
    name: 'User Input',
    icon: 'call_log',
    color: '#2676ff',
    outputs: 3
  },
  [ ENodeType.PlayText ]: {
    name: 'Play text',
    icon: 'wifi_calling_3',
    color: '#AF94FF',
    outputs: 1
  },
  [ ENodeType.ToOperator ]: {
    name: 'To operator',
    icon: 'wifi_calling_3',
    color: '#ffb62a',
    outputs: 1
  },
  [ ENodeType.Disconnect ]: {
    name: 'Disconnect',
    icon: 'phone_disabled',
    color: '#ff859b',
    outputs: 0
  },
};

Editor component

Let's create a component for the visual editor, which will be responsible for visualization and interaction with the workflow:



ng generate component workflow-editor

In this component we will define the workflow display logic and user interaction.

Flow visualization

Displaying call flows is a key part of the editor. To do this, we use the components of the @foblex/flow library:



@Component({
  selector: 'workflow-editor',
  templateUrl: './workflow-editor.component.html',
  styleUrls: [ './workflow-editor.component.scss' ],
})
export class WorkflowEditorComponent {

  public flow: IFlowModel = {
    nodes: [],
    connections: []
  };

  public eConnectableSide = EFConnectableSide;
  public cBehavior: EFConnectionBehavior = EFConnectionBehavior.FIXED;
  public cType: EFConnectionType = EFConnectionType.SEGMENT;
}



@if(flow) {
  <f-flow fDraggable>
      <f-canvas fZoom>
          @for (connection of flow.connections;track connection.key) {
            <f-connection [fBehavior]="cBehavior"
                          [fType]="cType"
                          [fOutputId]="connection.from" [fInputId]="connection.to">
            </f-connection>
          }
          @for (node of flow.nodes;track node.key) {
            <div fNode fNodeInput [fInputId]="node.input"
                 [fInputDisabled]="!node.input"
                 [fInputConnectableSide]="eConnectableSide.TOP"
                 [fNodePosition]="node.position">
              <div>{{ node.name }}</div>
              @for (output of node.outputs;track output) {
                <div fNodeOutput [fOutputId]="output" [fOutputConnectableSide]="eConnectableSide.BOTTOM">
              }
            </div>
          }
      </f-canvas>
  </f-flow>
}

This will allow us to display the flow, but we need to add the ability to add nodes and connections, since we have nothing to display yet.

Adding new nodes

To make our visual flow call editor more interactive and functional, we provide the user with the ability to add new nodes. This allows you to create more complex and varied call processing scenarios.



public possibleNodes = Object.keys(NODE_MAP).map((key: string) => {
  return {
    ...NODE_MAP[ key ],
    type: key
  }
});

public onCreateNode(event: FCreateNodeEvent): void {
  const outputsCount = NODE_MAP[ event.data ].outputs;
  const outputs = Array.from({ length: outputsCount }).map(() => {
    return this.generateId();
  });
  this.flow.nodes.push({
    key: this.generateId(),
    name: NODE_MAP[ event.data ].name,
    outputs: outputs,
    position: event.rect,
    type: event.data,
  });
}

private generateId(): string {
  return `${ Math.random().toString(36).substr(2, 9) }`;
}

Let's add this next to the flow component and add an event to the flow component:



@for (item of possibleNodes;track item) {
  <button fExternalItem
          [style.color]="item.color"
          [fData]="item.type">
    {{ item.icon }}
  </button>
}
@if(flow) {
   <f-flow (fCreateNode)="onCreateNode($event)">
            ...flow content
   </f-flow>
}

Users can select nodes from a list and drag them onto the editor workspace using the fExternalItem directive. This action initiates the creation of a new node in the flow with the appropriate visualization and functionality settings.

Editing connections

After adding nodes to the flow, the next important step is creating connections between them. Connections determine the logic of transition from one node to another and form the final flow of call processing.

To edit and create new connections, we have provided the ability to visually interact with node components:



<f-flow (fCreateConnection)="onCreateConnection($event)"
        (fReassignConnection)="onReassignConnection($event)">
  <f-canvas fZoom>
    <f-connection-for-create></f-connection-for-create>
    ...flow content
  </f-canvas>     
</f-flow>



public onCreateConnection(event: FCreateConnectionEvent): void {
  const connection: IConnectionViewModel = {
    from: event.fOutputId,
    to: event.fInputId
  };
  this.flow.connections.push(connection);
}

public onReassignConnection(event: FReassignConnectionEvent): void {
  const connection = this.flow.connections.find(c => c.from === event.fOutputId && c.to === event.oldFInputId);
  if (connection) {
    connection.to = event.newFInputId;
  }
}

This allows users to easily modify an existing flow by adding new logical connections or changing existing ones. This approach makes the process of setting up flow calls flexible and intuitive.

Example Library