Skip to content

CHANGELOG.md

Latest commit

 

History

History
965 lines (672 loc) · 56.7 KB

CHANGELOG.md

File metadata and controls

965 lines (672 loc) · 56.7 KB

Changelog

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

Unreleased

18.6.0 (2026-04-26)

Highlights

  • Smart Auto-Layout on Resize — the new withReflowOnResize plugin watches every node's size and shifts surrounding nodes the moment one grows or shrinks, so dynamic layouts stay clean without a manual relayout call. The behaviour is configurable via five orthogonal knobs (mode, scope, axis, delta source, collision) plus a FReflowController for runtime overrides and an fReflowIgnore directive for nodes that must stay pinned.
  • Layer Ordering — the order of the three built-in canvas layers (groups, connections, nodes) is now configurable. Pass [fLayers] per canvas, or set the app-wide default through withFCanvas({ layers }) inside provideFFlow(...). The default stays groups → connections → nodes, so existing apps are unaffected.

Features

  • reflow: add the withReflowOnResize provider feature plus FReflowController, fReflowIgnore directive, and a planner that combines mode (CENTER_OF_MASS / X_RANGE / DOWNSTREAM_CONNECTIONS), scope (GLOBAL / GROUP / CONNECTED_SUBGRAPH), axis (BOTH / VERTICAL / HORIZONTAL), delta source (EDGE_BASED / CENTER_BASED), and collision (STOP / CHAIN_PUSH) into one declarative reflow plan.
  • canvas: add the EFCanvasLayer enum, the [fLayers] input on <f-canvas>, and the withFCanvas({ layers }) provider feature for app-wide layer ordering. Per-canvas input takes precedence over the provider value; missing layers fall back to their default position; unknown values and duplicates are silently dropped.
  • examples: add seven dedicated /examples/reflow-on-resize sub-demos covering the basic case and each knob (mode, scope, collision, delta source, axis, runtime controller).
  • examples: add /examples/canvas-layers with three buttons that promote groups, connections, or nodes to the top while preserving the relative order of the other two layers.

Documentation

  • Add examples/reflow-on-resize page with live demos for each knob and a runtime controller walkthrough.
  • Add examples/canvas-layers page describing both [fLayers] and withFCanvas({ layers }) and the precedence between them.

⚠ BREAKING CHANGES

  • virtualization: removed the fVirtualForTrackBy input on *fVirtualFor. The input was declared but never wired into the directive's rendering path, so providing a trackBy function had no effect. Templates that reference it must drop the expression (e.g. *fVirtualFor="let item of items(); trackBy trackFn;" → *fVirtualFor="let item of items();"). No runtime behavior changes — identity reconciliation was never actually performed.

18.5.0 (2026-04-14)

Highlights

  • Workspace reorganized around Nx apps/libs - the repository now uses independent apps/* and libs/* projects instead of the older flat workspace layout, which makes example apps, portal builds, and package publishing easier to reason about.
  • Layout engine support expanded - Foblex Flow now ships a shared layout-engine abstraction, published Dagre and ELK adapters, and dedicated manual plus auto-layout examples for both engines.
  • Render lifecycle became explicit - fNodesRendered and fFullRendered are now emitted separately, with the internal flow render lifecycle extracted into dedicated handlers instead of staying embedded in FFlowComponent.
  • Reference apps were rebuilt as standalone Angular apps - Schema Designer, UML Diagram, Tournament Bracket, and Call Center Flow now live under apps/example-apps/*, have dedicated portal pages, and can be built or served independently.
  • Cypress coverage was extended around editor interactions - regression tests now cover palette node creation, assign-node-on-drop flows, connector side behavior, resize-linked redraws, and drag-to-group scenarios.
  • Connection worker internals were decomposed and hardened - the worker-backed redraw path was split into smaller pipeline pieces and kept integrated inside the broader connection redraw system.

Features

  • Add the core layout-engine integration surface plus provideFLayout(...).
  • Publish @foblex/flow-dagre-layout and @foblex/flow-elk-layout.
  • Add Dagre and ELK examples in both direct-layout and auto-layout variants.
  • Add fNodesRendered and fFullRendered outputs for finer-grained flow render lifecycle tracking.
  • Ship built-in connection markers and keep connection redraw fully inside the main f-flow package.
  • Add standalone reference apps for schema design, UML architecture diagrams, tournament brackets, and call-center IVR routing.

Improvements

  • Split the old examples workspace into independently buildable Nx projects, including standalone example apps and portal-driven embeds.
  • Automate portal prerender route generation, sitemap generation, and embedded-page verification in the portal toolchain.
  • Standardize portal reference-app previews, markdown example pages, and per-app README.md files for the standalone examples.
  • Expand end-to-end regression coverage for interaction-heavy example scenarios.
  • Decompose the connection-worker redraw flow into smaller worker/runtime/pipeline units without removing the worker-backed strategy itself.

Fixes

  • Correct group bounds calculations and flow surface sizing so grouped layouts and viewport sizing stay in sync.
  • Stop exporting testing helpers from the published primary package so runtime bundles no longer pull TestBed / @angular/core/testing, which restores compatibility with Native Federation and similar microfrontend setups.

Documentation

  • Add and refresh standalone example documentation for Schema Designer, UML Diagram, Tournament Bracket, and Call Center Flow.
  • Update the main README, examples overview, and portal metadata to reflect layout-engine demos and the expanded reference-app lineup.

18.4.0 (2026-04-02)

Highlights

  • Home page hero flow redesigned - the landing page now uses a richer, modular flow showcase with dedicated hero nodes, connectors, and refreshed showcase copy.
  • Default SCSS theme shipped for Foblex Flow - the package now exposes a ready-to-use theme entrypoint, domain mixins, and public --ff-* tokens for nodes, groups, connectors, connections, plugins, and external items.
  • Auto-pan shipped as an opt-in flow plugin - f-auto-pan now extends supported drag sessions with edge-based viewport panning and a dedicated example/docs page.
  • Examples portal controls refreshed - the examples UI now uses reusable toolbar/overlay primitives plus dedicated native input/select components instead of one-off Material form controls.
  • Rounded connector geometry hardened - worker payload generation, rotated intersection math, and corner-radius normalization were updated so rounded connectors behave more predictably across drag, resize, and redraw flows.
  • Trackpad pinch-to-zoom smoothed - wheel-based gesture zoom now follows trackpad deltas more closely instead of snapping to the mouse-wheel minimum step.
  • Installation docs aligned across Angular, Nx, and manual setup - install sections now describe ng add, nx g @foblex/flow:add, and explicit companion-package installation consistently across README, guides, and blog tutorials.
  • Undeclared CDK runtime dependency removed - fConnectionContent now uses a local number coercion helper instead of importing @angular/cdk/coercion.

Features

  • hero-flow: replace the previous home page background implementation with a dedicated hero flow system composed from reusable node, wrapper, and connector components.
  • theme: add a shipped @foblex/flow/styles/default entrypoint, public SCSS mixins, token layers, and packaged style assets for selective or full-theme usage.
  • auto-pan: add the f-auto-pan plugin, drag-session runtime support, unit coverage, Cypress coverage, and a dedicated example for edge-triggered viewport panning during drag.
  • examples-portal: add reusable example toolbar/overlay/input/select primitives and move shared example control styling onto the new theme-aligned defaults.

Improvements

  • Migrate examples and guides off the old shared _flow-common.scss helper toward the new public theme API and token surface.
  • Update ng add to append the default theme stylesheet automatically for application projects, and align package metadata with the documented setup path.
  • Replace ad-hoc Material select/form-field usage in affected examples with the new portal UI controls and shared styling tokens.
  • Refresh showcase taxonomy and example chrome so portal pages present a cleaner, more consistent visual system.
  • Remove stale repository/docs leftovers after retiring the old changelog bundle tooling and the deprecated multiple-flows example.

Fixes

  • connection-worker: fall back from worker-based floating geometry for rounded connectors instead of producing incorrect intersections for unsupported shapes.
  • connections: calculate floating intersections against rotated rounded connectors during redraw, create, reassign, drag, and resize flows.
  • connectors: normalize oversized corner radii before connector geometry is used for rounded intersection calculations.
  • connection-content: remove the runtime dependency on @angular/cdk/coercion by replacing it with a local number coercion helper.
  • zoom: smooth wheel-based pinch-to-zoom on trackpads by separating gesture-wheel normalization from mouse-wheel stepping.

Documentation

  • Normalize install docs across README, guides, and blog tutorials so Angular, Nx, and manual installation paths use the same dependency story.
  • Sync install-related package metadata and schematic companion dependency versions with the documented setup commands.
  • Expand styling documentation with dedicated guides for mixins/scoping, token overrides, and practical styling recipes, and add the new pages to docs navigation, prerender routes, and sitemap.
  • Add a dedicated v18.4.0 release article, document f-auto-pan in the guides and examples, and remove the obsolete markdown page for the deleted multiple-flows demo.

⚠️ Breaking Changes

Canvas dragging host class was renamed

Use .f-canvas-dragging instead of .canvas-dragging in custom styles and examples.

The legacy .canvas-dragging class is still emitted for compatibility in 18.4.0, but it is now deprecated and should be treated as transitional only.

Migration Notes

Update CSS selectors:

/* Old */
f-canvas.canvas-dragging {

}

/* New */
f-canvas.f-canvas-dragging {

}

18.3.0 (2026-03-17)

Highlights

  • Projected connection gradients - gradient strokes are now opt-in through projected f-connection-gradient config instead of always living on the connection component itself.
  • Connection redraw work reduced - unchanged connections now skip redundant marker generation and repeated line re-initialization when their render signature stays the same.
  • Connection worker production loading fixed - production bundles now start the connection worker from a blob URL instead of requesting worker/f-connection.worker.ts, avoiding MIME type failures on deployed apps.
  • Docs, examples, and roadmap updated - the custom connection example, connection guides, and roadmap docs now reflect the projected gradient model and the recent release history.

Improvements

  • Gradient DOM identifiers now stay stable per connection instance, even when a connection is reassigned to different source or target connectors.
  • Gradient rendering now avoids unnecessary DOM writes for unchanged coordinates and colors.
  • Connection marker rendering now skips redundant regeneration when the effective marker inputs have not changed.
  • Connection redraw caching now short-circuits repeated setLine() / initialize() work for unchanged routes and waypoint state.

Fixes

  • connection-worker: production builds now inline the worker runtime via Blob and URL.createObjectURL, which removes requests for worker/f-connection.worker.ts and the related MIME type error.

Documentation

  • Updated f-connection, f-connection-for-create, and f-snap-connection guides to document projected gradient usage.
  • Updated the connection gradients example page to explain when and why projected gradients should be used.
  • Rebuilt the roadmap documentation around release history and added a dedicated roadmap markdown page to the docs navigation.
  • Added a dedicated v18.3.0 release article covering projected gradients, redraw caching, and production worker hardening.

⚠️ Breaking Changes

Connection gradient colors moved off the connection components

Gradient colors are no longer configured directly on:

  • f-connection
  • f-connection-for-create
  • f-snap-connection

Use projected f-connection-gradient instead.

Migration Notes

Move gradient colors from the connection inputs to the projected gradient config:

<!-- Old -->
<f-connection
  fOutputId="out-1"
  fInputId="in-1"
  fStartColor="#4f46e5"
  fEndColor="#06b6d4"
></f-connection>

<!-- New -->
<f-connection fOutputId="out-1" fInputId="in-1">
  <f-connection-gradient
    fStartColor="#4f46e5"
    fEndColor="#06b6d4"
  ></f-connection-gradient>
</f-connection>

18.2.0 (2026-03-09)

Highlights

  • Zoom during drag-and-drop - wheel zoom now stays available during active drag interactions instead of being blocked for the whole drag session (77673e3).
  • Connection rendering pipeline refresh - added optional flow caching, worker-assisted connection calculation, and chunked redraws for large diagrams (77673e3).
  • Drag-and-drop interactions reworked - refactored external item, minimap, resize, rotate, and related connection flows (2019ea4, 77673e3).
  • Public API growth - exported f-cache, f-virtual, and f-connection-worker (77673e3).
  • Examples and docs refresh - standardized example structure, rebuilt pro examples, and expanded Cypress coverage (c58fd1f, f231423, 454a323).

Features

  • flow/cache: add fCache input on f-flow and a new public f-cache module with cache providers, registration, invalidation, and cached rect helpers (77673e3).
  • connection-worker: add worker-backed connection calculation and expose f-connection-worker (77673e3).
  • virtualization: add fVirtualFor for progressive rendering of large projected node lists (77673e3).
  • minimap: add fNodeRenderLimit to skip expensive minimap rendering for very large scenes (77673e3).
  • resize-node: keep dependent connections in sync while resizing nodes, including soft-parent scenarios (77673e3).
  • drag-and-drop: improve external item handling, pointer normalization, and create-node/drop-to-group integration (77673e3).
  • zoom/drag-and-drop: allow wheel zoom during active drag sessions by rebasing drag context for node drag, external item drag, resize, rotate, connection create/reassign, waypoint drag, and container assignment (77673e3).

Improvements

  • Separated node and connection change streams, added debounced layer sorting, and chunked connection redraws (77673e3).
  • Improved zoom behavior during supported drag-and-drop flows, with direct support for canvas drag and selection-area interactions and drag-context rebasing for node, external-item, resize, rotate, connection, waypoint, and container-assignment flows (77673e3).
  • Improved connection context resolution and cache reuse across redraws, node drag, and resize flows (77673e3).
  • Reworked minimap, external item, resize, and rotate handler architecture for more consistent internal interaction flow (2019ea4).
  • Standardized example authoring, lazy imports, markdown embeds, and example style checks (f231423).
  • Rebuilt the UML architecture demo with signal-based Angular state and modularized the tournament bracket pro example (454a323).
  • Expanded Cypress regression coverage for interactions and examples (c58fd1f).

Fixes

  • flow: correct node padding tuple order used for child bounding calculations (1ef5bb4).
  • zoom: use the dominant wheel axis so Shift + wheel / horizontal wheel zoom behaves correctly (77673e3).
  • selection: simplify selectable rectangle calculations and remove stale scaling dependencies (77673e3).
  • minimap: batch SVG drawing and clear the canvas when rendering is intentionally skipped (77673e3).

Documentation

  • Updated multiple guides and example pages to match the new example structure and API naming (f231423).
  • Refreshed stress test example descriptions and example metadata to document cache, virtualization, connection toggles, routing modes, and marker-heavy rendering scenarios (f231423).

⚠️ Breaking Changes

External Item directive class names were renamed

Examples had to update their imports from @foblex/flow:

  • FExternalItemDirective -> FExternalItem
  • FExternalItemPlaceholderDirective -> FExternalItemPlaceholder
  • FExternalItemPreviewDirective -> FExternalItemPreview

Migration Notes

Update imports:

import {
  FExternalItemDirective,
  FExternalItemPlaceholderDirective,
  FExternalItemPreviewDirective,
} from '@foblex/flow';

to:

import {
  FExternalItem,
  FExternalItemPlaceholder,
  FExternalItemPreview,
} from '@foblex/flow';

18.1.0 (2026-02-16)

Highlights

  • Magnetic alignment extensions - added f-magnetic-lines and f-magnetic-rects plugins with dedicated examples.
  • Connection interactions reworked - new create/reassign connection drag flows and updated waypoint drag handlers.
  • Draggable infrastructure refresh - unified handler architecture and improved pointer-based selection behavior.
  • Public API growth - exported magnetic plugins and testing utilities from public-api.

Features

  • magnetic-lines: add magnetic line management features (8a48f35)
  • magnetic-rects: implement magnetic rects functionality (7d37007)
  • drag-handler: add kind property support in handlers (1a642fd)
  • examples: add AI low-code platform example (4ad841b)

Improvements

  • Refactored storage internals to registries (FConnectorRegistry, connection/node/marker registries) for more consistent component lifecycle handling (6b40453, be42f88, 13a2b32, 05d8bf6, 8988370)
  • Reworked selection and selection-area flow to improve pointer handling and interaction predictability (ba716d2, 4158d34)
  • Performed broad naming and structure cleanup for draggable/connection modules to improve maintainability (3af7539, 3253671, 9ecf603, 989ba17, cb5b883, dd58542)
  • Extended public API exports with f-magnetic-lines, f-magnetic-rects, and testing modules (08a864c)

Documentation

  • Updated multiple guides/components docs for consistency and removed outdated sections (99af791, 83d8882)
  • Updated draggable-flow demo docs/layout for better responsiveness and clearer interaction examples (1115ecf)`

18.0.0 (2026-01-26)

Highlights

  • Connection Waypoints (new feature) — interactive waypoint editing for connections with candidate points and drag-and-drop.
  • Pinch-to-zoom (new feature) — smooth multi-touch zoom for trackpads and touch devices.
  • Control Flow + Content Projection compatibility — improved support for @if/@for rendering by extending projection slots for nodes/connections.
  • Custom Backgrounds — richer SVG pattern support plus a new example for advanced backgrounds.

Features

  • zoom: add pinch-to-zoom support for touch/trackpad gestures (5dfeeb5)
  • connection: introduce waypoints with candidates + drag-to-add / drag-to-move interactions and demo example (19772df, 229d6e3)
  • connection: add anchors utility and refactor connection builders + candidate generation (3276baf, b18109a)
  • canvas: improve content projection for Angular Control Flow usage (@if/@for) by supporting grouped slots ([fNodes], [fConnections]) (b18109a)
  • background: support custom/complex SVG patterns + add a dedicated example (29e28c8)
  • showcase: add AI Low Code Platform entry and links (6013ee7, dd84ae8)

Improvements

  • Refactored multiple connection/interaction modules to improve readability, maintainability and internal consistency.
  • Candidate/waypoint handling is now more predictable across all connection types.

Documentation

  • fix url to custom-connection-type component in guide (a6421ac)

⚠️ Breaking Changes

1) Custom connection builders: IFConnectionBuilderResponse updated

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

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

✅ Note: you don’t have to calculate or return points or candidates yourself.
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) FConnection API cleanup: removed deprecated inputs

Deprecated connection inputs were removed from FConnectionComponent:

  • fText - removed (use FConnectionContent instead)
  • fTextStartOffset - removed (use FConnectionContent instead)

Removed legacy directive:

  • [fConnectionCenter] - removed (use FConnectionContent instead)

3) FCanvas API cleanup

Removed deprecated zoom aliases from FCanvasComponent:

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

17.9.5 (2025-10-27)

Features

  • Connection Connectable Side

    • Added connectable-side calculation modes (manual & automatic).
    • Updated documentation and example to demonstrate both connection-side strategies. (00b4d56, 7def789, 8180976)

  • Connection Rendering Improvements

    • Introduced AdaptiveCurveBuilder and updated connection type examples. (0f1448a)

  • Performance Enhancements

    • Improved performance for large-scale node dragging and stress testing scenarios. (0fc9da4)

  • Examples / Documentation

    • Enhanced 404 fallback page routing and rendering behavior. (72cfdc5)

Bug Fixes

  • Rendering Stability

    • Optimized connection rendering and recalculation logic for smoother updates.
    • Fixed Safari macOS issue where connection paths could render partially clipped.
    • Improved zoom performance by reducing unnecessary layout thrashing. (e6a7321)

  • Canvas Drag Handling

    • Added / restored will-change and transform properties for smoother dragging. (f40a1ec, 3800230)

  • Node Positioning

    • Enforced absolute layout positioning for nodes and groups. (b03a611)

  • Content Selection Behavior

    • Fixed unintended selection inside connections. (633ff5f)

Documentation

  • Updated supported Angular version from 12 to 15 in documentation. (467c8e4)

  • Improved FNodeInputDirective documentation. (8ef88e1, d72a91f)

17.8.0 (2025-09-15)

Features

  • Connection Content - Example

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

  • Connection Validation - Example

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

17.7.0 (2025-08-24)

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

🐞 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.

17.6.0 (2025-07-23)

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:

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

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)

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)

17.4.0 (2025-02-10)

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)

17.0.1 (2024-12-29)

Features

  • Removed RXJS dependency (52811e3)
  • Positioning support for fText (52811e3)

Bug Fixes

  • IOS issue with recalculate after animation (369c54d)

Documentation

  • Added AutoSnap example (7e7e4f5)
  • Added Background example (6735cf5)
  • Added ConnectionBehaviours examples (fac0ff1)
  • Added ConnectionMarkers example (377b610)
  • Added ConnectionType and CustomConnectionType examples (eb248c0)
  • Added Connector examples (9b7d1ed)
  • Added CustomConnections example (fcfce91)
  • Added DragToGroup example (d1d2ab9)
  • Added HelpInPositioning example (ec4cef8)
  • Added Minimap example (82c57cd)
  • Added NodeSelection example (87daaaa)
  • Added RemoveOnDrop and CreateOnDrop examples (015865d)
  • Added SelectionArea example (71bf4fc)
  • Added TournamentBracket example (a934e8c)
  • Added UmlDiagram example (1f48560)
  • Added Zoom example (044452f)

Tests

  • Added E2E tests: DragHandle, DragToConnect, DragToReassign (3513d63)
  • Fixed: RemoveOnDrop and DragToReassign tests (a1a2a79)

16.0.0 (2024-09-24)

Features

  • Added centerNodeOrGroup functionality #44 (131ae19)
  • Added getFlowState functionality #46 (c5841fd)
  • Added Server Side Rendering (SSR) support (ba73083)
  • Added snap connection to create functionality (82b3872)
  • Added snap connection to reassign functionality (37972df)
  • Added SSR support to m-render (a3d6595)
  • Changed imports from @foblex/core to @foblex/mediator, @foblex/platform, @foblex/2d (30a60da)
  • Changed imports from @foblex/core to @foblex/utils, @foblex/drag-toolkit (26d9631)
  • Cleanup after delete @foblex/core (9aa5717)
  • Updated f-canvas user api (978d764)

Bug Fixes

  • Fixed After adding a Node, all the connections disappear #51 (c47621d)
  • Fixed Cannot access 'AddPatternToBackgroundExecution' before initialization #53 (ecfed74)
  • Fixed create connection target incorrect position with scale (ec323c5)
  • Fixed doesn't work for angular 12 #48 (70064b0)
  • Fixed tests after removing @foblex/core (60a4e92)
  • Fixed undefined snap connection (739f414)

Tests

  • Added FindClosestInputUsingSnapThresholdExecution tests (bcf1bda)

Documentation

  • Added center node or group functionality (01584c1)
  • Added custom nodes example (6f2bd7b)
  • Added drag to connect and drag to reassign examples (afdd469)
  • Added drag-handle example (8fb4399)
  • Added grouping example (766e456)
  • Added resize handle example (4f23af5)
  • Added snap-connection documentation and example (dd4895f)

12.6.0 (2024-09-07)

Features

  • Added dagre layout example (737dd1f)
  • Added db management flow example (4a605a3)
  • Added elkjs layout example (9695e08)
  • Added examples common styles (5e96e98)
  • Added f-group functionality (8a3c8ce)
  • Added fDragHandle documentation (a655fdc)
  • Modified layers sorting functionality after adding f-group (3c60249)
  • Moved external item drag and drop functionality to component directory (8b9dbb1)
  • Moved selection area drag and drop functionality to component directory (121a63e)
  • Updated to m-render v1.2.2 (bdaa267)

Bug Fixes

  • Fixed dagre layout trackby unique key (102a771)
  • Foblex Core is unable to slide the schema #37 (55a4070)
  • Prevent selection when drag fExternalItem (036e192)

Documentation

  • Added custom connection type example (b574306)
  • Added db-management-flow dark theme (1f8fe45)
  • Added f-group to db-management example (65902f5)
  • Added group example (dfd428b)
  • Added node with connectors example (fb3bcb7)
  • Updated Output and Input Documentation (d942f88)

Tests

  • Added test to change items layers functionality (01f27dd)

12.5.0 (2024-08-11)

Features

  • Add various site icons and upgrade library to Zoneless (e561e69)
  • Added minimap functionality (f5eece6)
  • Added Zoneless support (a8c5812)
  • Update to m-render v1.2.1 (8067764)

Documentation

  • Added minimap documentation (ccbdb99)
  • Added minimap examples (5646066)
  • Remove old changelogs and switch to standard-version (ff5b9e5)

[12.4.0] - 2024-08-05

Bug Fixes

  • Incorrect canvas position when using canvas.fitToScreen (#28)
  • Items outside the flow are selected when dragging fExternalItem (#27)
  • Fixed incorrect rendering of connection lines in complex layouts.

Features

  • Describe documentation on how to add a custom background (#9)
  • Added support for multi-layered canvas backgrounds.

[12.3.0] - 2024-07-20

Bug Fixes

  • Resolved issues with node animations causing performance drops.
  • Fixed bug where context menu would not appear in certain conditions.

[12.2.2] - 2024-06-13

Bug Fixes

  • Move selected items without pressing ctrl (#10)
  • Fixed issue with node snapping to grid not working properly.
  • Resolved performance issues when handling large numbers of nodes.

Features

  • Create connection with undefined fInput when user drops connection on the canvas.
  • Added option to customize node colors dynamically.

[12.2.1] - 2024-05-30

Bug Fixes

  • Corrected display problems with mat-tooltips on smaller screens.

Features

  • Added new layout options for better node organization.

[12.2.0] - 2024-04-25

Features

  • Custom connection types (#6)
  • Introduced new node resizing handles for better UX.

[12.1.5] - 2024-04-10

Bug Fixes

  • Fixed issue with nodes overlapping when auto-arrange is used.
  • Improved stability of the canvas rendering engine.

Features

  • Added support for custom node shapes.

[12.1.0] - 2024-03-28

Bug Fixes

  • Resolved issues with drag-and-drop functionality in nested containers.
  • Fixed alignment issues with text labels on nodes.

[12.0.7] - 2024-03-26

Bug Fixes

  • fOutlet directive to allow multiple connections.
  • Corrected alignment issues with the connection labels.

[12.0.1] - 2024-03-20

Bug Fixes

  • fitToParent mixin toCenter parameter in scaled context.
  • Fixed bugs related to zooming and panning in the canvas.

[1.5.2] - 2024-03-14

Bug Fixes

  • Change id attributes for connectors to data attributes.
  • Improved error handling for connection failures.

[1.5.1] - 2024-03-12

Bug Fixes

  • Change id attributes to fId.
  • Resolved issues with duplicate node IDs causing conflicts.

Features

  • Segment connection type.
  • Bezier connection type.
  • FConnectionCenterComponent.
  • FConnectionCenterDirective.

[1.4.0] - 2024-02-28

Bug Fixes

  • Fixed issues with the selection area being inaccurate.
  • Corrected mat-tooltips not displaying for all node types.

Features

  • Added batch node editing capabilities.
  • Introduced dark mode for the entire interface.

[1.3.4] - 2024-02-23

Bug Fixes

  • Issue with the selection area not being removed after dragging.
  • FNodeDirective instead of FNodeComponent.
  • Fixed minor UI glitches in the node editor.

[1.3.0] - 2024-01-10

Features

  • Selection Area functionality.
  • Added keyboard shortcuts for faster node manipulation.

Bug Fixes

  • Single selection issue after dragging.
  • Fixed inconsistencies in node alignment after dragging.

[1.2.2] - 2023-10-12

Bug Fixes

  • fitToParent mixin in scaled context.
  • oneToOne mixin in scaled context.
  • Fixed issue with connection points not aligning correctly.

Features

  • Line Alignment component.
  • Added support for snapping nodes to guidelines.

[1.2.0] - 2023-08-30

Bug Fixes

  • Fixed rendering issues with high DPI screens.
  • Corrected problem with nodes not saving their state properly.

Features

  • Introduced node grouping functionality.
  • Added ability to lock nodes in place.

[1.1.0] - 2023-06-15

Bug Fixes

  • Resolved conflicts when merging nodes with similar attributes.

Features

  • New theme options for customizing the look and feel of the canvas.
  • Added real-time collaboration indicators.

[1.0.2] - 2023-02-02

Features

  • Reassign connection functionality.
  • Introduced basic node editing capabilities.