Foblex/f-flow v18.0.0

18.0.0 - Waypoints, Pinch-to-Zoom, Better Content Projection

on GitHub

This release introduces editable connection waypoints (a new interaction layer for connections), adds pinch-to-zoom for touch/trackpads, improves Angular Control Flow compatibility via richer content projection, and includes a custom background example. A lot of internal refactoring was also done to keep the codebase clean and maintainable.

✨ New: Connection Waypoints (Interactive Editing)

You can now edit a connection path by adding and moving intermediate points (waypoints) directly on the connection.

UX

• Add a waypoint: drag from a candidate point onto the connection.
• Move a waypoint: drag an existing waypoint.
• Remove a waypoint: right-click a waypoint.

📷 Demo

• Live Demo

🤏 New: Pinch-to-Zoom

Zoom interaction now supports pinch gestures on:

• trackpads
• touch devices

This integrates with existing zoom behavior and keeps the UX smooth.

📷 Demo

• Live Demo

🧩 Angular Control Flow + Content Projection Improvements

Better support for @if/@for and advanced templates by extending projection slots.
You can now project nodes and connections via grouped slots like:

• [fNodes]
• [fConnections]

This enables patterns like conditional rendering of connections or dynamic node grids without breaking projection.

🎨 Custom Backgrounds + New Example

Background handling was enhanced to support custom and complex SVG patterns, plus a dedicated example was added to show advanced background setups.

📷 Demo

• Live Demo

🧹 Refactors & Internal Improvements

• Connection building and candidate generation were refactored for clarity.
• New utilities for anchors/candidates were introduced.
• Waypoint/candidate logic became more consistent across all connection types.
• Overall cleanup across interaction modules to improve maintainability.

⚠️ Breaking Changes

1) Custom connection builders: IFConnectionBuilderResponse updated

If you implemented a custom connection type / builder, the response shape has changed:

• connectionCenter was removed
• points is now required (was optional)
• candidates was added

✅ You do not have to calculate points or candidates.
If you don’t support them, return empty arrays.

export interface IFConnectionBuilderResponse {
  path: string;
  penultimatePoint: IPoint;
  secondPoint: IPoint;
  points: IPoint[];      // can be []
  candidates: IPoint[];  // can be []
}

2) Connection API cleanup: removed deprecated APIs

Removed deprecated inputs from FConnectionComponent:

• fText — removed (use FConnectionContent)
• fTextStartOffset — removed (use FConnectionContent)

Removed legacy directive:

• [fConnectionCenter] — removed (use FConnectionContent)

3) Canvas zoom API cleanup

Removed deprecated zoom aliases from FCanvasComponent:

• setZoom(...) → use setScale(...)
• resetZoom() → use resetScale()

Commits / Links

• Pinch-to-zoom: 5dfeeb5
• Waypoints feature + example:
  • 19772df
  • 229d6e3
• Anchors + refactors:
  • 3276baf
  • b18109a
• Background patterns + example: 29e28c8