ngx-workflow 0.2.0 → 0.4.0

package/README.md

@@ -18,12 +18,16 @@ A powerful, highly customizable Angular library for building interactive node-ba
 - **History**: Robust Undo/Redo history stack with Ctrl+Z/Ctrl+Shift+Z
 - **Theming**: Explicit `colorMode` and CSS variables for easy styling with dark mode support
 - **Smart Alignment**: Visual alignment guides and drag snapping
+- **True Recursive Sub-flows**: Create nested graph structures with relative positioning and drag-Nest support
+- **Performance Virtualization**: Optimizes rendering for large graphs by culling off-screen nodes
 
 ### Advanced Features
 - **Snap-to-Grid**: Configurable grid snapping for precise node placement
 - **Space Panning**: Professional canvas panning with Space + Drag
 - **Export Controls**: Built-in UI for PNG, SVG, and clipboard export
 - **Clipboard Operations**: Full copy/paste/cut support with Ctrl+C/V/X and localStorage persistence
+- **Smart Routing**: Use `type: 'smart'` for edges that automatically route around nodes (obstacle avoidance)
+- **Interactive Labels**: Clickable edge labels with pointer events and hover states
 - **Connection Validation**: Prevent invalid connections with custom validators
 - **Collision Detection**: Optional collision prevention to stop nodes from overlapping
 - **Edge Reconnection**: Drag edge endpoints to reconnect them
@@ -36,7 +40,7 @@ A powerful, highly customizable Angular library for building interactive node-ba
 
 ### Built-in UI Components
 - **Search Bar**: Press `Ctrl+F` to search nodes by label/id.
-- **Properties Panel**: Sidebar for editing node properties (auto-shows on selection).
+- **Properties Panel**: Sidebar for editing node and edge properties (auto-shows on selection/double-click).
 - **Context Menu**: Right-click canvas/nodes/edges for actions.
 - **Layout Alignment**: Auto-align selected nodes (if `showLayoutControls` is true).
 - **Minimap**: Navigable overview of complex flows.
@@ -242,11 +246,14 @@ interface Edge {
   sourceHandle?: string;   // ID of source handle (optional)
   targetHandle?: string;   // ID of target handle (optional)
   label?: string;          // Label text displayed on the edge
-  type?: 'bezier' | 'straight' | 'step'; // Path type (default: 'bezier')
-  animated?: boolean;      // Show animation (dashed moving line)?
+  type?: 'bezier' | 'straight' | 'step' | 'smoothstep' | 'smart' | 'dashed'; // Path type
+  animated?: boolean;      // Show animation?
+  animationType?: 'flow' | 'dot' | 'both'; // Type of animation
+  animationDuration?: string; // CSS duration (e.g., '2s')
+  animationStyle?: object; // Style for animation element (e.g., { fill: 'red' })
   markerStart?: string;    // Start marker ID (e.g., 'arrow', 'dot')
   markerEnd?: string;      // End marker ID
-  style?: object;          // SVG styles (stroke, stroke-width, etc.)
+  style?: object;          // SVG styles (stroke, stroke-width, strokeDasharray, etc.)
 }
 ```