Foblex/f-flow v17.7.0

on GitHub

Features

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

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