17.9.5 – Unified Installation Flow and Rendering Performance Improvements

🚀 Highlights

This release improves the installation & setup experience across both Angular CLI and Nx workspaces without requiring Nx dependencies, and includes significant rendering and performance optimizations for connections and zooming inside the canvas.

---

✨ Features

• Connectable Side Modes

  • Added automatic and manual connection side resolution.
  • Updated examples demonstrating connector side behavior.

• Connection Rendering Improvements

  • Introduced AdaptiveCurveBuilder for adaptive curve formatting.
  • Updated connection type examples to reflect improved curve handling.

• Performance Enhancements

  • Reduced redraw and recalculation cost for large node graphs.
  • Noticeably smoother dragging and transform interactions.

• Examples & Pages

  • Improved custom 404 page handling and routing consistency.

---

🐛 Bug Fixes

• Canvas & Connection Rendering

  • Fixed Safari (macOS) issue where paths could be partially clipped.
  • Reduced layout thrashing and improved zoom smoothness.
  • Optimized path recalculation logic for stability.

• Dragging

  • Restored and stabilized will-change & transform optimizations on drag.
  • Ensured consistent absolute positioning for nodes and groups.

• Selection

  • Fixed unintended text/element selection when interacting with connections.

---

📚 Documentation

• Updated supported Angular version info.
• Refined FNodeInputDirective documentation narrative.

---

🔧 Install / Update

Angular CLI:

ng add @foblex/flow

NX:

nx g @foblex/flow:add

No additional dependencies required — installation is unified.

🌍 Links
• Docs: https://flow.foblex.com
• Examples: https://flow.foblex.com/examples
• Repo: https://github.com/foblex/flow

v17.8.5 Calculated Connectable Sides for Connectors — Manual & Calculated Modes

This release adds fine-grained control over which side of a connector can be used for connections. You can fix sides (LEFT/RIGHT/TOP/BOTTOM), let the system calculate the best side, or restrict calculation to horizontal/vertical axes. There’s also an AUTO mode.

Two modes are showcased in the demo:

• Manual mode — switch input/output sides explicitly to see how links behave when sides are fixed.
• Calculated mode — set side to CALCULATE so it’s picked dynamically based on node positions.

This gives you precise behavior for static layouts and smooth auto-routing for dynamic ones.

API

export enum EFConnectableSide {
  LEFT = 'left',
  TOP = 'top',
  RIGHT = 'right',
  BOTTOM = 'bottom',
  CALCULATE = 'calculate',
  CALCULATE_HORIZONTAL = 'calculate_horizontal',
  CALCULATE_VERTICAL = 'calculate_vertical',
  AUTO = 'auto',
}

Demo

A short video and screenshots are attached to this release showing:

• toggling between Manual / Calculated modes;
• how connections reroute when nodes move;
• differences between CALCULATE, CALCULATE_HORIZONTAL, and CALCULATE_VERTICAL.

💡 If you find this library useful, please consider giving it a ⭐️ on GitHub — it really helps the project grow!

2025-10-05.21.48.32.mov

v17.8.0

17.8.0 (2025-09-15)

Features

• Connection Content - https://flow.foblex.com/examples/connection-content

2025-09-15.22.49.30.mov

• Added fConnectionContent directive for placing custom content (labels, icons, buttons) along connections with position, offset, and alignment options. (a1cda4a)

• Connection Validation - https://flow.foblex.com/examples/connection-rules

2025-09-15.22.52.07.mov

• Extended connection validation rules:

  • Previously, connections could only be restricted by input ID (fInputId).
  • Now, restrictions can also be applied by input category (fInputCategory — a free string label for grouping).
  • On the output side, developers can define fCanBeConnectedInputs, listing allowed IDs and/or categories.
  • During drag, the system checks both; only matching inputs are valid targets.
  • Visual feedback:
    • .f-connections-dragging is applied to the container.
    • Valid inputs receive .f-connector-connectable.
    • Invalid inputs remain unstyled (example styles dim them).
  • This gives immediate visual feedback and makes rules more flexible for real-world editors.
    (704333f, 1977850)

• UX & Examples

  • Added redirects for documentation and examples routes, updated sitemap for new URLs. (ef941ad)
  • Introduced Showcase feature with configuration and example items. (bfc39fc)

• Reactivity & Refactors

  • Migrated connector IDs and related properties to Angular Signals. (223460d, 9051239, 9cadd41)
  • Refactored Dagre Layout example and improved connection handling. (498a86b)

Deprecations

• Marked fConnectionCenter directive and fText property as deprecated. Use fConnectionContent instead. (8532fba)

Bug Fixes

• Updated Angular dependencies to latest patch versions. (f57f99d)
• Updated edit link patterns in documentation and examples configuration. (d08f54d)
• Fixed image URLs and demo link in showcase.ts for local paths. (3b428b0)
• Added Material Design styles for form fields and select components in test examples. (0e176b7)

Migration Notes

Replace fText property:

  <f-connection ... fText="Label"></f-connection>

with:

  <f-connection ...>
    <div fConnectionContent [position]="0.5">Label</div>
  </f-connection>

Replace `fConnectionCenter directive:

  <f-connection ...>
    <div fConnectionCenter>...</div>
  </f-connection>

with:

  <f-connection ...>
    <div fConnectionContent [position]="0.5" align="along">...</div>
  </f-connection>

v17.7.0

Features

• Grouping Improvements
  • Refactored the Grouping Example and the Drag-to-Group Example.

grouping-video.mov

drag-to-group-video.mov

• Added fAutoSizeToFitChildren — automatically resizes parent nodes and groups to fit the combined size of their children.
• Added fAutoExpandOnChildHit — expands parent nodes and groups in real time when child nodes are moved inside and do not fit.
• Improved drag-to-group behavior: dropping into a node or group that is already part of another parent now correctly validates the target (previously it always defaulted to its existing parent).
• New Copy/Paste Example
  • Copy-Paste Example demonstrates how to implement cut, copy, and paste functionality in Foblex Flow.
  • Shows how to duplicate nodes (with their connections), remove selected elements, and insert them back while keeping IDs and connections consistent.
• New Undo/Redo Example

undo-redo-video.mov

• Undo-Redo V2 Example demonstrates how to add undo and redo functionality to a flow editor.
• Built on top of @foblex/mutator, a lightweight state management utility that tracks state changes, snapshots, and history.
• Provides a full time-travel editing experience, allowing users to revert and reapply actions for a smoother workflow.

🧹 Improvements

• Grouping internals were refactored and clarified, including renaming of execution classes and better separation of responsibilities.

📚 Documentation

• Updated documentation to reflect new features and API changes:
  • FNodeDirective
  • FFlowComponent
  • FCanvasComponent

🐞 Bug Fixes

• resolve drag-and-drop issues on macOS by improving event handling (#187) (142745c)
• smooth wheel zoom (#198) (e302e75)

⚠️ Breaking Changes

• CSS Class Rename:
  • .f-parent-for-drop → .f-grouping-over-boundary
• New CSS Class:
  • .f-grouping-drop-active — applied to nodes or groups that are valid drop targets for grouping.

If you are using custom styles based on the old .f-parent-for-drop selector, you will need to update your CSS.

🔎 TL;DR

• Groups now support auto-resize and auto-expand on child moves.
• Drag-to-group behavior is more robust.
• Breaking change: CSS class .f-parent-for-drop renamed.
• Documentation updated.
• Two new examples: Copy/Paste and Undo/Redo V2.

💬 If Foblex Flow has been helpful — a GitHub star is always appreciated 🙂
🌟 Star the repo

release 17.6.0

Features

• Improved Connection Reassignment

  • Enhanced the logic and UX for reassigning connections, allowing both source and target to be dynamically changed.
  • Updated class names for clarity and improved drag handle behavior and styling.
    (7aef9f3, bbb6d56, d8de100)

• Signal-based Refactors for Reactivity

  • Refactored the following to use Angular Signals for more efficient change detection and reactivity:
    • fConnectionCenter
      (421b0ef, 439760c)
    • fDefs, fTextComponent
      (06e9457)
    • fId across multiple interfaces and components
      (3034d5d)
    • fPath logic
      (a1b1314)
    • fSelection initialization and management
      (31b6af1)

• Minimap Improvements

  • Restructured the minimap component.
  • Enhanced input handling and upgraded it to support new Angular features.
    (c7a3be9)

• Debounced fCanvasChange Event

  • Added optional debounce to the fCanvasChange event in FCanvasComponent to reduce event noise during rapid updates.
  • Configurable via debounceTime input

• New fDragBlocker Directive

  • Introduced fDragBlocker directive to block drag-and-drop interactions within specific areas of the canvas.
  • Useful for excluding certain zones (like panels or overlays) from initiating node movement or connection creation.

🐞 Bug Fixes

• Drag-and-Drop on macOS
  • Fixed issues with drag-and-drop interactions on macOS by improving event handling.
    (#187, 142745c)

⚠️ Breaking Changes

• Updated FReassignConnectionEvent structure

  • The event model was redesigned to support both source and target reassignment with more detailed context.

  Before:

  new FReassignConnectionEvent(
    fConnectionId: string,
    fOutputId: string,
    oldFInputId: string,
    newFInputId: string | undefined,
    fDropPosition: IPoint
  )

  After:

  new FReassignConnectionEvent(
    connectionId: string,
    isSourceReassign: boolean,
    isTargetReassign: boolean,
    oldSourceId: string,
    newSourceId: string | undefined,
    oldTargetId: string,
    newTargetId: string | undefined,
    dropPoint: IPoint
  )

This change improves the accuracy of reassignment tracking and enables more flexible behavior in advanced flow editors.

Full Changelog: v17.5.5...v17.6.0

Foblex Flow v17.5.5.

What's Changed

• Rotate Handle by @siarheihuzarevich in #141
• Add f minimap class input for custom minimap node styling by @siarheihuzarevich in #154
• fix: update date in environment and increment package version to 17.4.3 by @siarheihuzarevich in #155
• Fix issues by @siarheihuzarevich in #157
• Membership Page by @siarheihuzarevich in #158
• Release v17.5.0 by @siarheihuzarevich in #159
• fix: update @foblex/drag-toolkit to version 1.1.1 and increment packa… by @siarheihuzarevich in #166
• 164 bug critical cannot create connection if you drop it on any disabled input like html element by @siarheihuzarevich in #167
• 168 node from the palette are not consided as a node by @siarheihuzarevich in #172
• Feature/shuzarevich/ci cd workflows for publishing by @siarheihuzarevich in #174
• Add fOffset and fRadius inputs to the docs of connections by @nook24 in #176
• Added padding example to fitToScreen notes by @relliv in #148
• summary nodes move event by @siarheihuzarevich in #185

New Contributors

• @nook24 made their first contribution in #176
• @relliv made their first contribution in #148

Full Changelog: v17.4.0...v17.5.5

Foblex Flow v17.5.0.

17.5.0 (2025-05-11)

Features

• Added Angular schematics support for ng-add and ng-update commands. (ea3e8ec)
• Added fMinimapClass input for custom minimap node styling. (7c8e13c)
• Added membership page components and enhanced flow connection properties. (6170b46)
• Enhanced resize handle functionality with minimum size support and improved styling. (29fbcd4)
• Implemented node rotation functionality. (b58f982)
• Implemented walkthrough functionality with tooltips and animations. (ba93db5)

---

Bug Fixes

• Adjusted node positioning calculations to account for transformation scale. (0295846)
• Refactored background component executions to use readonly properties and improve dependency injection. (a18dddd)
• Refactored canvas components to use readonly properties and introduce mediatorEffect for better state management. (5c3512b)
• Updated @foblex/m-render to version 2.5.9 and incremented package version to 17.4.4. (c51a174)
• Fixed drag handler to correctly append and remove elements; added pointer-events to connection styles. (dcc5de3)
• Fixed f-background component to use ContentChild decorator and improve pattern handling. (9fb09ba)
• Updated node input/output IDs to include index for better connection management. (95c7691)

---

Documentation

• Added Rotate Handle example. (1f51f4f)

v17.4.0

Features

• Added CustomTriggers for fDraggable, fZoom to allow for custom drag and zoom triggers (34c87b8)
• Enhance f-flow components with loading handlers and improved styling (abd779c)
• Added fDragStarted with data and fDragEnded events (4ef0e17)
• Added Connection Validation to prevent connections between incompatible connectors (4ef0e17)
• Added Grid System for fDraggable to allow for movement in grid increments (23f39c5)
• Added fEmitOnNodeIntersect event to know when a node is intersected by connection (23f39c5)
• Refactor styles and components for f-flow integration (05ada49)
• Added Top, Left, Bottom, Right Resize Handles (05ada49)

Documentation

• Added StressTestWithConnections example (7e7e4f5)
• Added ConnectabilityCheck examples (fac0ff1)
• Added AssignNodeToConnection example (377b610)
• Added ConnectionText and CustomConnectionType examples (eb248c0)
• Added ConnectionCenter examples (9b7d1ed)
• Added AddNodeToPalette example (d1d2ab9)
• Added GridSystem example (ec4cef8)
• Added Undo/Redo example (82c57cd)
• Added DragStart/EndEvents example (87daaaa)
• Added CustomEventTriggers example (015865d)
• Updated ResizeHandle example (6735cf5)
• Updated AutoSnap example (fcfce91)

V17.2.1

What's Changed

• Grid dragging by @siarheihuzarevich in #119
• F draggable refactoring by @siarheihuzarevich in #123

Full Changelog: v17.1.1...v17.2.1

v17.1.1

What's Changed

• Attach node to connection on drop by @siarheihuzarevich in #100
• 103 bug typeerror cannot read properties of undefined reading fgroupscontainer by @siarheihuzarevich in #104
• Update to new MRender v2.5.3 by @siarheihuzarevich in #105
• feat: Added group to fSelectionChange event by @siarheihuzarevich in #106
• 84 snap to helpline grid system by @siarheihuzarevich in #107
• 109 rotating connection by @siarheihuzarevich in #110
• Line alignment optimization by @siarheihuzarevich in #113
• F zoom triggers by @siarheihuzarevich in #117

Full Changelog: v17.0.0...v17.1.1