Basic drawing tools in NR editor


#1

How difficult would it be to add some basic drawing tools to the editor?

Things like box, circle, text. Perhaps even some colour?

Grouping stuff within a tab would be so much easier using visual queues.


#2

There is already one option for organizing nodes.
Groups, well you can always leave big enough gaps between logical groups.


#3

The simple answer is - quite difficult. So not on any near term to-do list.

Everything about a flow is held in the flow file - and that doesn't have the concepts for things that aren't nodes - or things not part of the flow itself. To revisit that would be a fundamental reworking of the guts of Node-RED that we don't really have time for compared to all the other things we also have on the roadmap.


#4

Thanks for reply.


#5

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:

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


#6

Ha! Simple but potentially useful. Nice.

While there is no doubt that some kind of more generic "container" format for grouping sections of flow would be really nice (if you've ever used Microsoft Visio, you'll know how that works), horizontal swimlanes could be really useful in some circumstances for sure.

Be nice if the lanes automatically adjusted to their contents :wink: but I realise that would be back to the "quite difficult" understatement that Dave made.

Also be nice if the colours could be #rrggbb CSS types too.

Great work though, I hope this gets adopted.


#7

Certainly a vast improvement over having nothing. :smile:


#8

I started down that path, but found that most combinations made the whole flow hard to see. Without pre-defining some options, I was spending too much time tweaking the color palette, and it was too difficult to have consistency across my flows.

And since my requirements were to have a curated list of colors, I settled on these -- enough separation from each other (imo), without obscuring the wires/nodes (with and without highlights) of the flow editor.


#9

Interesting idea ... I suppose that to achieve this you had to modify the core of NR ?


#10

All valid points Steve and I'm certainly not complaining about having some pre-defined colours - I wouldn't complain anyway! :slight_smile:

However, not everyone uses the standard colour scheme so at some future point, people will doubtless be needing the capability. Still a great start though and I certainly back having this PR'd into core if possible.


#11

Yes -- it's rather tightly integrated into d3 logic for drawing the grid lines. This was necessary since svg elements don't use z-index to determine which are "on top of" each other -- that is defined by the order the elements occur on the page (*aargh)


#12

That is part of svg v2 standard it seems. No idea when/if browser support will ever arrive for that. It seems permanently stuck in "Editors Review" at the W3C.