Basic drawing tools in NR editor

Well, this seems a good time to let (another) cat outta the bag... so here goes nothin'!

Earlier this year, I developed a new feature for the node-red Editor -- Swimlanes -- in order to visually separate portions of flows by task, owner, context, whatever. Here is an example of how it looks in one of my projects:

image

The swimlane information is stored as 2 new properties on the flow (tab) itself, so there are no extra nodes needed. The tab Edit panel is enhanced to allow adding, editing, and moving the swimlanes -- like so:

image

In addition, the "headers" for each swimlane (the semi-opaque rect on the left) can be dragged and resized right in the node-red Editor. The implementation is similar to the grid lines, in that they are background display only and can be turned on/off as necessary.

I do have several other improvements planned, so the nodes can move with the lanes. My employer has given me permission to contribute this work back to the community, if Nick and the team think it would be useful to the general public. Anyway, just wanted to get a conversation started, fwiw...
__
Steve

17 Likes