Adding Nodes to Canvas
Dragging a node from the palette to the canvas is the primary way to add workflow steps. The NodeFactoryService creates a fully initialised WorkflowNode instance, ready for configuration.
Drag and Drop
Find the Node
Browse the palette categories or use the search box to find the node type you want.
Start Dragging
Click and hold on the node card. A semi-transparent ghost of the node follows your cursor onto the canvas. The palette stays open.
Position and Drop
Move to the desired position on the canvas. Drop snap to the 20px grid. Release to place the node. The node is created, selected, and the right panel opens for configuration.
Configure
Fill in the node's configuration form in the right panel. Required fields are highlighted in amber if left empty.
Double-Click to Add
As an alternative to drag-and-drop, double-clicking a node card in the palette places it at the centre of the current viewport. This is useful when you want to add many nodes quickly and arrange them afterwards.
What NodeFactoryService Creates
// The resulting WorkflowNode structure:
{
id: "node-8f3a2c", // unique ID
type: "http-request", // NodeType.typeCode
position: { x: 400, y: 200 },// where you dropped it
data: {
label: "HTTP Request", // NodeType.displayName
config: { // NodeType.defaultConfig
method: "GET",
timeout: 30
},
ports: [ // from NodeType.portDefinitions
{ portKey: "input", portType: "target", isMainPort: true },
{ portKey: "output", portType: "source", isMainPort: true },
{ portKey: "error", portType: "source", isErrorPort: true }
]
}
}Validation on Drop
If a node drop violates a workflow constraint, the node is rejected and a tooltip explains the issue:
- "Only one trigger allowed" — attempting to add a second trigger node
- "Trigger cannot be inside a loop" — dropping a trigger inside a loop group
- "break/continue only allowed inside loop" — placing these outside a loop body