Flow Studio
NodeFactoryService
NodeFactoryService translates a NodeType definition and a canvas position into a WorkflowNode instance ready for the workflowStore. It is called every time a user drags a node from the palette onto the canvas.
createNode()
// packages/flow-studio-services/src/factories/NodeFactoryService.ts
export class NodeFactoryService {
createNode(nodeType: NodeType, position: XYPosition): WorkflowNode {
const nodeId = `${nodeType.typeCode}-${generateShortId()}`;
return {
id: nodeId,
type: nodeType.typeCode, // maps to WorkflowCanvas.nodeTypes key
position,
data: {
label: nodeType.displayName, // default label = displayName
config: { ...nodeType.defaultConfig }, // copy of default form values
formId: nodeType.formId,
ports: nodeType.ports,
nodeType: nodeType.typeCode,
icon: nodeType.icon,
color: nodeType.color,
},
// React Flow internal properties
selected: false,
dragging: false,
};
}
}What createNode() Sets
| Property | Source |
|---|---|
id | Generated: typeCode + "-" + shortId() (e.g., "http-request-x7k2") |
type | The typeCode — used by React Flow to look up the renderer |
position | Drop position on canvas (from drag event) |
data.label | NodeType.displayName (user can rename after) |
data.config | Deep copy of NodeType.defaultConfig (editable per instance) |
data.formId | NodeType.formId (which Atlas Form to show in Right Panel) |
data.ports | NodeType.ports (static port definitions) |
After createNode()
The returned WorkflowNode is dispatched to the workflowStore:
// In the canvas drag handler
const node = nodeFactoryService.createNode(draggedNodeType, dropPosition);
workflowStore.getState().addNode(node);
// isDirty is set to true, triggering the save prompt