@memberjunction/ng-flow-editor 4.0.0 → 4.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +153 -0
  2. package/package.json +5 -5
package/README.md ADDED
@@ -0,0 +1,153 @@
1
+ # @memberjunction/ng-flow-editor
2
+
3
+ A generic, entity-agnostic visual flow editor component powered by Foblex Flow, with an agent-specific Flow Agent Editor for building AI agent workflows.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @memberjunction/ng-flow-editor
9
+ ```
10
+
11
+ ## Overview
12
+
13
+ The Flow Editor provides a canvas-based visual editor for building node-and-connection graphs. It wraps [Foblex Flow](https://www.foblex.com/flow) with a clean MemberJunction-style API and includes automatic layout via the Dagre graph algorithm. A specialized Agent Editor component is also included for visually designing AI agent step flows.
14
+
15
+ ```mermaid
16
+ flowchart TD
17
+ subgraph Generic["Generic Flow Editor"]
18
+ A["FlowEditorComponent"] --> B["FlowNodeComponent"]
19
+ A --> C["FlowPaletteComponent"]
20
+ A --> D["FlowToolbarComponent"]
21
+ A --> E["FlowStatusBarComponent"]
22
+ end
23
+ subgraph Agent["Agent Editor"]
24
+ F["FlowAgentEditorComponent"] --> G["AgentPropertiesPanelComponent"]
25
+ F --> H["AgentStepListComponent"]
26
+ F --> I["AgentFlowTransformerService"]
27
+ I --> A
28
+ end
29
+ subgraph Services["Services"]
30
+ J["FlowStateService"]
31
+ K["FlowLayoutService (Dagre)"]
32
+ end
33
+
34
+ A --> J
35
+ A --> K
36
+
37
+ style Generic fill:#2d6a9f,stroke:#1a4971,color:#fff
38
+ style Agent fill:#7c5295,stroke:#563a6b,color:#fff
39
+ style Services fill:#2d8659,stroke:#1a5c3a,color:#fff
40
+ ```
41
+
42
+ ## Usage
43
+
44
+ ### Module Import
45
+
46
+ ```typescript
47
+ import { FlowEditorModule } from '@memberjunction/ng-flow-editor';
48
+
49
+ @NgModule({
50
+ imports: [FlowEditorModule]
51
+ })
52
+ export class YourModule {}
53
+ ```
54
+
55
+ ### Basic Flow Editor
56
+
57
+ ```html
58
+ <mj-flow-editor
59
+ [Nodes]="myNodes"
60
+ [Connections]="myConnections"
61
+ [NodeTypes]="myNodeTypes"
62
+ [ShowMinimap]="true"
63
+ [ShowPalette]="true"
64
+ [ShowGrid]="true"
65
+ (NodeSelected)="onNodeSelected($event)"
66
+ (ConnectionCreated)="onConnectionCreated($event)"
67
+ (NodesChanged)="onNodesChanged($event)">
68
+ </mj-flow-editor>
69
+ ```
70
+
71
+ ### Agent Flow Editor
72
+
73
+ ```html
74
+ <mj-flow-agent-editor
75
+ [AgentId]="selectedAgentId"
76
+ [ReadOnly]="false"
77
+ (StepSelected)="onStepSelected($event)"
78
+ (FlowChanged)="onFlowChanged($event)">
79
+ </mj-flow-agent-editor>
80
+ ```
81
+
82
+ ## Components
83
+
84
+ | Component | Selector | Purpose |
85
+ |-----------|----------|---------|
86
+ | `FlowEditorComponent` | `mj-flow-editor` | Generic canvas-based flow editor |
87
+ | `FlowNodeComponent` | internal | Renders individual nodes on the canvas |
88
+ | `FlowPaletteComponent` | internal | Draggable palette of node types |
89
+ | `FlowToolbarComponent` | internal | Toolbar with zoom, layout, grid controls |
90
+ | `FlowStatusBarComponent` | internal | Displays node/connection counts |
91
+ | `FlowAgentEditorComponent` | `mj-flow-agent-editor` | Agent-specific flow editor wrapper |
92
+ | `AgentPropertiesPanelComponent` | internal | Agent property editing panel |
93
+ | `AgentStepListComponent` | internal | List of agent steps |
94
+
95
+ ## FlowEditorComponent API
96
+
97
+ ### Inputs
98
+
99
+ | Property | Type | Default | Description |
100
+ |----------|------|---------|-------------|
101
+ | `Nodes` | `FlowNode[]` | `[]` | Array of flow nodes |
102
+ | `Connections` | `FlowConnection[]` | `[]` | Array of connections between nodes |
103
+ | `NodeTypes` | `FlowNodeTypeConfig[]` | `[]` | Available node type definitions |
104
+ | `ReadOnly` | `boolean` | `false` | Disable editing |
105
+ | `ShowMinimap` | `boolean` | `true` | Show minimap overlay |
106
+ | `ShowPalette` | `boolean` | `true` | Show the node palette |
107
+ | `ShowGrid` | `boolean` | `true` | Show background grid |
108
+ | `ShowStatusBar` | `boolean` | `true` | Show the status bar |
109
+ | `ShowToolbar` | `boolean` | `true` | Show the toolbar |
110
+ | `ShowLegend` | `boolean` | `true` | Show the node type legend |
111
+ | `GridSize` | `number` | `20` | Grid snap size in pixels |
112
+ | `AutoLayoutDirection` | `FlowLayoutDirection` | `'vertical'` | Dagre auto-layout direction |
113
+
114
+ ### Outputs
115
+
116
+ | Event | Type | Description |
117
+ |-------|------|-------------|
118
+ | `NodeSelected` | `EventEmitter<FlowNode \| null>` | A node was selected or deselected |
119
+ | `NodeAdded` | `EventEmitter<FlowNodeAddedEvent>` | A node was added to the canvas |
120
+ | `NodeRemoved` | `EventEmitter<FlowNode>` | A node was removed |
121
+ | `NodeMoved` | `EventEmitter<FlowNodeMovedEvent>` | A node was repositioned |
122
+ | `ConnectionCreated` | `EventEmitter<FlowConnectionCreatedEvent>` | A connection was created |
123
+ | `ConnectionRemoved` | `EventEmitter<FlowConnection>` | A connection was removed |
124
+ | `ConnectionReassigned` | `EventEmitter<FlowConnectionReassignedEvent>` | A connection endpoint was moved |
125
+ | `SelectionChanged` | `EventEmitter<FlowSelectionChangedEvent>` | Selection state changed |
126
+ | `NodesChanged` | `EventEmitter<FlowNode[]>` | The nodes array was modified |
127
+ | `ConnectionsChanged` | `EventEmitter<FlowConnection[]>` | The connections array was modified |
128
+ | `NodeEditRequested` | `EventEmitter<FlowNode>` | Double-click to edit a node |
129
+
130
+ ## Exported Types
131
+
132
+ - `FlowNode` -- A node on the canvas with id, type, label, position, size, ports, badges
133
+ - `FlowConnection` -- A connection between two node ports with optional label
134
+ - `FlowNodeTypeConfig` -- Configuration for a node type (icon, color, ports, palette info)
135
+ - `FlowNodePort` -- Input/output port definition
136
+ - `FlowPosition` / `FlowSize` -- Position and size types
137
+ - `FlowSnapshot` -- Serializable snapshot of the entire flow state
138
+ - `FlowLayoutDirection` -- `'vertical' | 'horizontal'`
139
+
140
+ ## Services
141
+
142
+ | Service | Purpose |
143
+ |---------|---------|
144
+ | `FlowStateService` | Manages undo/redo, snapshots, dirty state |
145
+ | `FlowLayoutService` | Dagre-based auto-layout for flow graphs |
146
+ | `AgentFlowTransformerService` | Transforms MJ Agent entities into flow graph data |
147
+
148
+ ## Dependencies
149
+
150
+ - [@memberjunction/core](../../MJCore/README.md) -- Core MJ functionality
151
+ - [@memberjunction/core-entities](../../MJCoreEntities/README.md) -- Entity types for agent editor
152
+ - `@foblex/flow` -- Canvas rendering engine
153
+ - `@dagrejs/dagre` -- Graph layout algorithm
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@memberjunction/ng-flow-editor",
3
- "version": "4.0.0",
3
+ "version": "4.2.0",
4
4
  "description": "MemberJunction: Generic visual flow editor component powered by Foblex Flow, with an agent-specific Flow Agent Editor",
5
5
  "main": "./dist/public-api.js",
6
6
  "typings": "./dist/public-api.d.ts",
@@ -40,10 +40,10 @@
40
40
  "@foblex/mediator": "1.1.3",
41
41
  "@foblex/platform": "1.0.4",
42
42
  "@foblex/utils": "1.1.1",
43
- "@memberjunction/core": "4.0.0",
44
- "@memberjunction/core-entities": "4.0.0",
45
- "@memberjunction/global": "4.0.0",
46
- "@memberjunction/ng-code-editor": "4.0.0",
43
+ "@memberjunction/core": "4.2.0",
44
+ "@memberjunction/core-entities": "4.2.0",
45
+ "@memberjunction/global": "4.2.0",
46
+ "@memberjunction/ng-code-editor": "4.2.0",
47
47
  "rxjs": "^7.8.2",
48
48
  "tslib": "^2.8.1"
49
49
  },