Tags: Foblex/f-flow
Tags
feat(flow): improve large-diagram performance and drag interactions (#… …280) * feat(flow): add cache, virtualization, and drag infrastructure * test(e2e): expand interaction coverage for examples * chore(package): update metadata and bump @foblex/m-render to 3.0.5 * docs(portal): refresh examples, guides, showcase, and community files * docs(examples): rename and regroup performance demos * docs(examples): elevate AI low-code demo as flagship reference app --------- Co-authored-by: shuzarevich <s.huzarevich@gmail.com>
Magnetic Alignment, Documentation Improvements (#267) * feat(magnetic-lines): add magnetic line management features - Implemented AddMagneticToStore and RemoveMagneticFromStore services - Created corresponding request classes for magnetic line operations - Developed MagneticLinesRenderer for rendering magnetic lines - Added findClosestMagneticGuides utility for alignment calculations - Introduced MagneticLinesScheduleRenderer for scheduled rendering - Updated component templates to support new magnetic line features Signed-off-by: Siarhei Huzarevich <shuzarevich@gmail.com> * feat(index): enhance public API by exporting additional modules and interfaces - Added exports for core functionalities to the main index file - Introduced new interfaces for node resize and rotate event data - Implemented a store for connection markers and plugins - Refactored existing methods to utilize the new store structure - Updated drag handler to improve event handling consistency * refactor(drag-handler): rename classes and update imports for consistency - Renamed FDragHandlerBase to DragHandlerBase for clarity. - Updated references in multiple files to use the new class name. - Changed FDragInjector to DragHandlerInjector for better naming. - Adjusted import paths for FDragStartedEvent to reflect new structure. - Cleaned up unused imports and improved code formatting. * refactor(drag-canvas): rename classes and update imports for consistency - Renamed FCanvasMoveFinalizeExecution to DragCanvasFinalize - Renamed FCanvasMoveFinalizeRequest to DragCanvasFinalizeRequest - Renamed FCanvasDragHandler to DragCanvasHandler - Updated imports across multiple files to reflect new class names - Adjusted method signatures to use new request and handler classes * feat(connection): implement create connection drag handler and requests - Added CreateConnectionCreateDragHandler to manage drag events for connections - Introduced CreateConnectionCreateDragHandlerRequest for handling drag initiation - Renamed and updated existing request classes for consistency - Implemented conversion methods for pointer positions between flow and canvas spaces - Enhanced connection preparation logic to support new drag handler * refactor(connection): update connector references and types for consistency - Renamed IConnectorAndRect to IConnectorRectRef for clarity - Updated GetConnectorAndRectRequest to GetConnectorRectReferenceRequest - Modified related methods to use new connector reference types - Adjusted drag handler to accommodate new connector structure - Refactored connection calculation logic to align with new types * refactor(connector): rename input and output store executions for consistency - Renamed AddInputToStore to AddConnectorToStore for clarity - Renamed RemoveInputFromStore to RemoveConnectorFromStore for consistency - Updated request classes to reflect new naming conventions - Adjusted handling logic to accommodate new connector types - Modified imports across multiple files to align with new naming * refactor(connection): rename move connection waypoint files and classes for consistency - Renamed MoveConnectionWaypointFinalize to DragConnectionWaypointFinalize - Renamed MoveConnectionWaypointPreparation to DragConnectionWaypointPreparation - Updated imports and references to reflect new class names - Adjusted request classes to use DragConnectionWaypointFinalizeRequest - Modified handler classes to use DragConnectionWaypointHandler * feat(connection): implement create connection handler and drag logic - Added CreateConnectionHandler to manage connection creation. - Refactored drag handler to utilize new CreateConnectionHandler. - Updated event handling to improve connection creation flow. - Enhanced type safety in connector reference interfaces. - Registered CreateConnectionHandler in the injector for dependency management. * feat(connection): add FReassignConnectionEvent class for connection reassignment - Introduced FReassignConnectionEvent to handle connection reassignment events. - Added deprecated compatibility API methods for backward compatibility. - Updated import paths for consistency across files. - Refactored connection handling logic in preparation and finalize execution files. * feat(reassign-connection): implement reassign connection handlers and logic - Added ReassignConnectionHandler to manage connection reassignment. - Created ReassignConnectionSourceHandler and ReassignConnectionTargetHandler for handling source and target logic. - Updated drag handler logic to support reassigning connections. - Renamed and refactored related files and interfaces for consistency. - Adjusted injection tokens and request classes for new handlers. * refactor(drag-handler): migrate drag handler imports to infrastructure - Updated import paths for DragHandlerBase and related classes to use the new infrastructure module - Renamed drag handler files for consistency and clarity - Ensured all references to the old drag handler module are removed * feat(drag-handler): enhance drag handlers with kind property - Added a `kind` property to `CreateConnectionHandler`, `DragCanvasHandler`, and `DragConnectionWaypointHandler`. - Updated `getEvent` method in `DragHandlerBase` to utilize the new `kind` property. - Introduced `DropToGroupHandler` with a new `kind` identifier. - Refactored related files to ensure consistency in drag handler implementations. - Created a new `DragSession` class to manage drag-and-drop sessions. * feat(drag-handler): enhance drag handlers with kind property - Added a `kind` property to `CreateConnectionHandler`, `DragCanvasHandler`, and `DragConnectionWaypointHandler`. - Updated `getEvent` method in `DragHandlerBase` to utilize the new `kind` property. - Introduced `DropToGroupHandler` with a new `kind` identifier. - Refactored related files to ensure consistency in drag handler implementations. - Created a new `DragSession` class to manage drag-and-drop sessions. * refactor(store): migrate fOutputs to FConnectorRegistry for better management - Replaced direct usage of fOutputs with outputs registry in multiple files - Updated methods to utilize new outputs API for adding, removing, and retrieving connectors - Improved error handling by using require method for output retrieval - Enhanced code readability and maintainability by centralizing output management * refactor(store): migrate fInputs to FConnectorRegistry for improved structure - Replaced direct access to fInputs with FConnectorRegistry for inputs - Updated methods to use the new inputs registry for adding and removing connectors - Simplified input retrieval logic across multiple files - Ensured consistency in handling input connectors throughout the store * refactor(store): migrate outlets to FConnectorRegistry for improved management - Updated outlet handling to use FConnectorRegistry instead of fOutlets - Changed method signatures to return FNodeOutletBase where applicable - Removed deprecated outlet handling methods - Ensured consistent outlet management across the store * refactor(store): simplify node retrieval by removing generic type specification - Removed generic type specification from getAll() calls in multiple files - Updated methods to directly retrieve nodes without specifying FNodeBase - Improved code readability and maintainability * refactor(store): migrate connection handling to new registry structure - Replaced FConnectionBase with FConnectionForCreateComponent in AddConnectionForCreateToStoreRequest - Updated AddSnapConnectionToStoreRequest to use FSnapConnectionComponent - Removed generic type specification from connection retrieval methods - Introduced FConnectionRegistry and FNodeRegistry for better management - Simplified connection retrieval logic across multiple handlers * refactor(store): migrate connection markers to new registry structure - Replaced FConnectionMarkerStore with FConnectionMarkerRegistry. - Updated _findConnectionMarkers method to remove generic type specification. - Introduced unique ID generation for connection markers. - Exported FConnectionMarkerRegistry in the index file. * feat(ai-low-code-platform): add low-code platform component and styles - Created a new standalone component for the low-code platform. - Added HTML template with an iframe for external content. - Implemented SCSS styles for flow connections and nodes. - Updated documentation to reflect the new component usage. - Renamed existing documentation file to match the new component name. * refactor(drag-node): reorganize drag node handlers and related requests - Renamed and reorganized drag node connection handlers for clarity - Updated exports in index files to reflect new structure - Removed deprecated methods and adjusted references accordingly - Introduced new request classes for handling drag node operations - Improved connection handling logic for source and target nodes * refactor(drag-node): rename and update drag node handlers and requests - Renamed MoveDragHandler to DragNodeItemHandler for clarity - Updated references in AttachDragNodeHandlerFromSelection to use DragNodeHandler - Refactored CreateDragNodeSummaryHandler to utilize DragNodeHandler - Adjusted parameters in various methods to replace MoveDragHandler with DragNodeItemHandler - Consolidated imports to reflect new file structure and naming conventions * refactor(drag-node): rename and update drag node handlers and requests - Renamed `create-drag-node-summary-handler` to `create-drag-node-handler` - Updated references to `DragNodeItemHandler` to use `DragNodeHandler` - Renamed event request classes for clarity - Adjusted method names for consistency in drag node handling - Removed deprecated fields and methods related to drag node events * refactor(pinch-to-zoom): rename and reorganize pinch-to-zoom components - Renamed SingleSelect to SelectByPointer and updated related files - Updated references from SingleSelectRequest to SelectByPointerRequest - Refactored PinchToZoomHandler and PinchToZoomPreparation for clarity - Adjusted imports and exports in multiple files for consistency - Improved handling of selection logic in SelectByPointer * refactor(magnetic-lines): rename and reorganize magnetic lines components - Renamed files related to magnetic lines for consistency. - Updated imports to reflect new file names. - Refactored the magnetic lines handling logic. - Consolidated related functionalities into a single module. * refactor(select-all): rename and reorganize select-all components - Renamed `select-all.execution.ts` to `select-all.ts` - Renamed `select-all.request.ts` to `select-all-request.ts` - Updated imports in related files to reflect new names - Added new index files for better module exports - Introduced `mediator-harness` and `component-harness` for testing utilities * refactor(components): rename and reorganize various components and exports - Renamed redrawLine to _redrawLine for consistency - Updated export statements to remove .execution suffix - Renamed test files to match new component names - Adjusted import paths to reflect renamed files * refactor(selection-area): integrate selection area handling and update related components - Added SelectionAreaHandler for managing selection area interactions - Refactored FSelectionArea to use new handler and updated its lifecycle methods - Updated FComponentsStore to include selection area instance - Renamed and reorganized selection area related files for clarity - Adjusted imports and dependencies across multiple files * feat(magnetic-rects): implement magnetic rects functionality - Added MagneticRects component for equal spacing snapping. - Implemented MagneticRectsHandler to manage rendering and snapping logic. - Created calculateMagneticRects function for calculating spacing. - Updated drag-node-handler to include magnetic rects handling. - Enhanced examples and documentation for magnetic rects feature. * refactor(draggable-flow): update component structure and improve functionality - Removed fixed height from f-flow component for better responsiveness - Added fLoaded event handler to trigger canvas reset on load - Adjusted node positions for improved layout consistency - Updated documentation to reflect new selection and connection features * refactor(docs): update component documentation for clarity and consistency - Removed redundant descriptions and consolidated API sections. - Standardized input and output formatting across components. - Added type definitions for better clarity on expected structures. - Updated deprecated notices for legacy components. - Improved overall readability and organization of documentation. * chore(docs): remove 'Get Involved' section from multiple documentation files - Removed the 'Get Involved' section from connection-rules.md - Removed the 'Get Involved' section from event-system.md - Removed the 'Get Involved' section from f-canvas-component.md - Removed the 'Get Involved' section from f-connection-component.md - Removed the 'Get Involved' section from f-drag-handle-directive.md - Removed the 'Get Involved' section from f-draggable-directive.md - Removed the 'Get Involved' section from f-flow-component.md - Removed the 'Get Involved' section from f-group-directive.md - Removed the 'Get Involved' section from f-magnetic-lines-component.md - Removed the 'Get Involved' section from f-node-directive.md - Removed the 'Get Involved' section from f-node-input-directive.md - Removed the 'Get Involved' section from f-node-outlet-directive.md - Removed the 'Get Involved' section from f-node-output-directive.md - Removed the 'Get Involved' section from f-resize-handle-directive.md - Removed the 'Get Involved' section from f-rotate-handle-directive.md - Updated 'Get Involved' to 'Support Foblex Flow' in get-started.md - Updated 'Get Involved' to 'Support Foblex Flow' in intro.md - Removed the 'Get Involved' section from selection-system.md * refactor(selection): improve pointer event handling and selection logic - Replaced pointer events with mouse events for better compatibility - Reduced wait time during pointer interactions for improved performance - Updated assertions to check for correct selection behavior - Added fNodeId attributes to HTML elements for better identification * chore(changelog): update CHANGELOG for version 18.1.0 release - Added magnetic alignment extensions with `f-magnetic-lines` and `f-magnetic-rects` plugins. - Reworked connection interactions with new drag flows and updated waypoint handlers. - Refreshed draggable infrastructure for improved selection behavior. - Expanded public API to include magnetic plugins and testing utilities. - Updated documentation for multiple components and guides for consistency. * docs(roadmap): update roadmap with performance improvements and recent features - Added a new section for performance improvements focusing on reducing recalculations. - Included details on magnetic alignment features for better interaction. - Updated recently completed features with links to examples and release versions. --------- Signed-off-by: Siarhei Huzarevich <shuzarevich@gmail.com> Co-authored-by: shuzarevich <s.huzarevich@redcore.group>
release v18.0.0 (#265) * refactor(connections): rename components and remove deprecated properties - Renamed component files and classes for consistency. - Removed deprecated properties fText and fTextStartOffset from FConnectionComponent. - Updated references in templates to reflect the new component names. - Adjusted stylesheets to match the renamed components. - Modified tests to accommodate the changes in component structure. Signed-off-by: Siarhei Huzarevich <shuzarevich@gmail.com> * refactor(assign-node-to-connection-on-drop example): rename component files and update properties - Renamed component files to remove the '.component' suffix. - Updated event handler names for consistency. - Changed property names in connections to 'source' and 'target'. - Refactored connection logic to use signals for state management. - Improved readability by simplifying the component structure. Signed-off-by: Siarhei Huzarevich <shuzarevich@gmail.com> * refactor(drag-handle example): rename component files and update properties - Renamed component files from drag-handle.component.* to drag-handle.* - Updated import paths in documentation.config.ts and examples.config.ts - Changed method names in drag-handle.component.ts for clarity - Adjusted template bindings in drag-handle.component.html - Refactored test descriptions in drag-handle.component.cy.ts for consistency Signed-off-by: Siarhei Huzarevich <shuzarevich@gmail.com> * refactor(connections): rename execution classes and update request properties - Renamed execution classes from `*Execution` to `*` for consistency. - Updated request properties from `fConnection` and `fComponent` to `connection` and `component` respectively. - Refactored handle methods to destructure request parameters for clarity. - Removed deprecated properties and ensured all references are updated accordingly. Signed-off-by: Siarhei Huzarevich <shuzarevich@gmail.com> * refactor(internal reactivity): enhance debounce and listen functionality - Updated debounceTime function to return an object with callback and cleanup methods - Refactored listen method in FChannelHub to handle subscriptions and cleanups more effectively - Renamed execution files for ListenCountChanges and ListenDataChanges for consistency - Removed unnecessary whitespace and improved code formatting across multiple files Signed-off-by: Siarhei Huzarevich <shuzarevich@gmail.com> * refactor(zoom): rename execution classes and update request properties - Renamed AddZoomToStoreExecution to AddZoomToStore - Renamed RemoveZoomFromStoreExecution to RemoveZoomFromStore - Renamed SetZoomExecution to SetZoom - Renamed ResetZoomExecution to ResetZoom - Updated request properties to use consistent naming conventions - Added constants for pinch normalization factors and thresholds Signed-off-by: Siarhei Huzarevich <shuzarevich@gmail.com> * feat(pinch-to-zoom): implement pinch-to-zoom functionality - Added calculateTouchCenter function to determine the center of two touch points. - Implemented calculateTouchDistance function to measure distance between two touch points. - Created PinchToZoomHandler class to manage pinch-to-zoom interactions. - Developed PinchToZoomPreparation and PinchToZoomFinalize classes for handling zoom requests. - Introduced normalization for pinch steps with normalizePinchStep function. Signed-off-by: Siarhei Huzarevich <shuzarevich@gmail.com> * refactor(single-select): rename and restructure single select components - Renamed FSingleSelectRequest to SingleSelectRequest for clarity - Updated FSingleSelectExecution to SingleSelect and adjusted its logic - Changed import paths to reflect new naming conventions - Removed deprecated references to old single select files - Enhanced readability and maintainability of the single select logic Signed-off-by: Siarhei Huzarevich <shuzarevich@gmail.com> * refactor(components): rename and restructure connection-related files - Renamed multiple files for better clarity and organization. - Updated import paths to reflect new file locations. - Consolidated exports in index files for easier access. - Removed deprecated components and requests. - Enhanced the structure of connection control points and related logic. Signed-off-by: Siarhei Huzarevich <shuzarevich@gmail.com> * feat(connection): add buildConnectionAnchors utility and refactor related code - Introduced buildConnectionAnchors function to streamline anchor point creation - Replaced calculateUserAnchorPoints with buildConnectionAnchors in multiple files - Added joinSegmentPaths utility for concatenating segment paths - Updated index exports to include new utilities Signed-off-by: Siarhei Huzarevich <shuzarevich@gmail.com> * refactor(app): clean up unused imports and commented code - Removed unused imports from app.component.ts for clarity - Simplified app.component.html by changing router-outlet syntax - Deleted commented-out methods and code to improve maintainability - Updated package.json by removing unnecessary dependencies * feat(connection): add control points support and improve candidate/pivot handling - Introduced new control points functionality for connections (candidates + user-defined pivots) - Added utilities for calculating curve and polyline candidates - Added helpers to locate/resolve candidate and pivot positions along a connection - Improved connection control points management for more predictable candidate lifecycle - Refactored connection building logic for clarity and maintainability - Removed deprecated control point APIs and legacy management methods * refactor(connection): rename and restructure connection-related files - Renamed control point candidate interface to IPivotCandidate - Updated references to control points and candidates throughout the codebase - Refactored connection-related utility functions to use pivot terminology - Adjusted imports to reflect new file structure and naming conventions - Removed unused exports and cleaned up related code * feat(connection): add editable waypoints with candidates + demo example - Introduced Connection Waypoints: interactive waypoints to shape connection routes - Added waypoint candidates to suggest insertion points and enable drag-to-add UX - Implemented waypoint operations: insert from candidate, drag-to-move, right-click delete - Emitted fConnectionWaypointsChanged to keep user state in sync - Added "Connection Waypoints" example showcasing all built-in connection types (straight, segment, bezier, adaptive-curve) with show/enable toggles and styling - Refactored picking/handling logic and related utils for clarity and maintainability * feat(connection): implement waypoints management with drag-and-drop support - Added FConnectionWaypoints component for managing waypoints - Created HTML template for rendering waypoints and candidates - Implemented methods for inserting, selecting, moving, and removing waypoints - Introduced findExistingWaypoint utility for waypoint detection - Updated moveConnectionWaypointHandler to support waypoint manipulation * refactor(connection): rename connection-markers component files and methods - Renamed connection-markers.component.html to connection-markers.html - Renamed connection-markers.component.scss to connection-markers.scss - Renamed connection-markers.component.ts to connection-markers.ts - Updated template and style URLs in the component decorator - Changed method name from onLoaded to loaded - Adjusted ViewChild usage for canvas reference * refactor(connection): rename and update node move preparation classes - Renamed FNodeMovePreparationRequest to MoveNodePreparationRequest - Updated references to the renamed class throughout the codebase - Simplified constructor parameters to be readonly - Refactored FNodeMovePreparationExecution to MoveNodePreparation - Improved method names for clarity in drag-and-drop functionality * refactor(connection): replace pivots with waypoints in connection calculations - Updated tests to use waypoints instead of pivots for path calculations. - Refactored candidate calculation functions to return IPoint instead of IWaypointCandidate. - Adjusted connection-related components to handle waypoints consistently. - Removed unused imports and cleaned up related code for clarity. * chore(connection): implement waypoint removal and update connection logic - Added a method to remove waypoints by index from the connection. - Updated the waypoints management to reflect changes in the connection. - Refactored the connection waypoint handling to improve clarity and maintainability. - Renamed internal variables for consistency with the waypoint terminology. * chore(connection): implement removal of connection waypoints - Added RemoveConnectionWaypoint class to handle waypoint removal. - Created RemoveConnectionWaypointRequest class for request structure. - Implemented logic to find connections and update waypoints accordingly. - Emitted connection waypoints changed event after removal. * chore(release): bump version to 18.0.0 and update CHANGELOG - Added interactive waypoint editing for connections with drag-and-drop. - Implemented pinch-to-zoom functionality for touch devices. - Improved content projection for Angular Control Flow compatibility. - Enhanced support for custom SVG backgrounds and added examples. - Refactored connection and interaction modules for better maintainability. BREAKING CHANGE: - Updated `IFConnectionBuilderResponse` interface: removed `connectionCenter`, made `points` required, and added `candidates`. - Removed deprecated inputs from `FConnectionComponent` and `FCanvasComponent`. Signed-off-by: Siarhei Huzarevich <shuzarevich@gmail.com> --------- Signed-off-by: Siarhei Huzarevich <shuzarevich@gmail.com> Co-authored-by: shuzarevich <s.huzarevich@redcore.group>
PreviousNext