Drag and drop nodes from a sidebar


I am developing a side bar which suggest nodes for the user to proceed flow development. To improve the user experience, I am thinking to add node drag and drop capability(not exactly drag and drop) to the side bar. Once user select one node (node name) click a button that node should be displayed in the development area of current flow.
As I assume, node-red is keeping the description of the current flow (which is not yet updated in the flow description which is exposed in/flows API endpoint) in some in-memory location until the deployment. Is there anyway to update this kind of in-memory object (if exist any API) to add a node to the current flow development area. Appreciate your insights how to do this.


What advantage will that have over the current system?

Hi @malinthasa

we haven't published any apis at this low level within the editor. The follow code is how you'd do it today. I don't see why any of this would change in the future - but something to watch.

// Get the Flow JSON you want to import
// - this is for you to generate however you choose
var nodeDefinition = [{"id":RED.nodes.id(),"type":"function","z":"538e49f9.1c9f18","name":"","func":"\nreturn msg;","outputs":1,"noerr":0,"x":170,"y":240,"wires":[[]]}]
// Import it
var importResult = RED.nodes.import(nodeDefinition);
// importResult is an array of arrays:
// [new_nodes,new_links,new_workspaces,new_subflows,missingWorkspace]
// If you're only importing nodes, then importResult[0] is the array
// you care about.

// Next, add an event to the history stack so it can be undone. 
RED.history.push({t:"add",nodes:[importResult[0].map(function(n) { return n.id})],dirty: RED.nodes.dirty()});

// Mark the workspace as dirty

// Trigger a full redraw of the canvas so the new node appears