Foblex/f-flow v17.8.0

on GitHub

17.8.0 (2025-09-15)

Features

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

• 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

• 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>