Request: Add node-name as a CSS class to flow display

Core Development Feature Requests
1

Hi all, I'd like to request that a node's name be added as a class to the top-level <g> entry for a node in a flow:

e.g. In this example of an http-in node in a flow, what was:

<g class="red-ui-flow-node red-ui-flow-node-group" id="40d3d7c3d870e1cf" transform="translate(340,305)">

becomes:

<g class="red-ui-flow-node red-ui-flow-node-group http-in" id="40d3d7c3d870e1cf" transform="translate(340,305)">

This would make it possible for node definitions to better control the styling of nodes based on their type and simply using CSS.

Even better, a group of related node types could use a single SVG brand icon but could vary the color of the icon (lets say) based on the node type. Here is an example of a simple SVG that uses a fill color based on a CSS variable with a default:

<svg id="emoji" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
  <g id="color">
    <path fill="var(--web-emoji-fill, hsl(201, 73%, 87%))" stroke-width="1.175" d="m22.08 21.58s8.815-1.028 13.74-5.069c0 0 11.09 6.391 13.88 5.289 0 0 2.792 13.74 5.73 13.96 0 0-5.436 13-4.775 13.66 0 0-13.44 2.424-14.62 6.244 0 0-8.228-7.934-14.1-5.583 0 0-3.232-13.08-5.73-13.59 0 0 7.199-12.86 5.877-14.91z"/>
  </g>
  <g id="hair"/>
  <g id="skin"/>
  <g id="skin-shadow"/>
  <g id="line">
    <line x1="8.112" x2="63.89" y1="36" y2="36" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
    <line x1="36" x2="36" y1="8.112" y2="63.89" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
    <line x1="55.72" x2="16.28" y1="16.28" y2="55.72" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
    <line x1="55.72" x2="16.28" y1="55.72" y2="16.28" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
    <path fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="m36.14 55.88s-6.289-6.553-14.69-5.373c0 0 0.1913-9.123-5.838-14.25 0 0 6.442-6.65 5.997-14.67 0 0 9.38-0.112 14.32-6.1 0 0 6.289 6.553 14.31 6.108 0 0 0.112 9.38 6.214 14.68 0 0-6.44 6.649-5.995 14.09 0 0-9.38-0.469-14.32 5.519z"/>
    <path fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="m49.25 35.48s-3.624 4.594-3.49 9.856c0 0-6.702 0.5071-10.04 3.803 0 0-3.846-3.97-9.214-3.803 0 0-0.9087-6.074-4.256-9.612 0 0 4.338-4.547 4.091-9.856 0 0 6.501-0.1241 10.12-4.052 0 0 3.352 4.093 9.297 4.052 0 0 0.1421 6.365 3.49 9.612z"/>
  </g>
</svg>

With the requested change, it would be possible for the package that supplies the node to include a CSS file with a color override for a node type:

.http-in {
  --web-emoji-fill: hsl(0, 73%, 87%)
}

Which would change the color fill for that specific node type from light blue to light red.

Obviously, the fill colour is not the only thing that could be changed. But it probably makes most sense when using custom SVG files as node icons. (I've used http-in as the example node here but clearly this would generally be used on custom node types).

2

But does that mean that theme writers need to specify every single node type in order to override anything node authors may specify?

3

Absolutely not. No, that is one of the benefits. There is no backward incompatibility. If you don't supply custom CSS, nothing changes.

Typically, theme writers would ignore this feature as indeed, they currently ignore a node's "color" setting (which a theme cannot currently override anyway unless the node specifies the color as a CSS variable - as I've started to do with UIBUILDER).

Also, there is no requirement on node authors to do anything at all, nothing changes in that case.

Where authors do want to use this capability (typically those developers with related node-collections who want to have a clear "brand" for their nodes), they can add appropriate CSS, and optionally, custom icons. CSS variables are the obvious use-case here because they can have a default value which is used if no override is provided.

4

I'm assuming you mean to use the node type "http in" rather than node name "My http node"?

Unfortunately node type is not unique. For example these two nodes come from two different packages, node-red-dashboard and @flowfuse/node-red-dashboard, but they both have node type "ui_template"

image
image268Ă—172 6.14 KB

Imagine how difficult it would be to tell which was which if a newly installed set of nodes re-styled existing ones of the same type!

5

They HAVE to be unique. In the example you give, one is ui_template and the other is ui-template. You cannot have two different node-types with the same name, Node-RED rejects one of them. This is why I suggested the use of the node-type as a CSS class name.

In theory, this is actually possible right now. A node type can do all sorts of nasty things inside node-red quite easily. That is why Allan has been touting his new security tool.

But anyone who did this would get short shrift from the community. Don't mess with other people's nodes unless those nodes actually invite it.

Adding this capability does not change anything fundamental, it simply makes it easier for node authors to be a little more creative by making Node-RED slightly more flexible.

6

Oops. Damn eyes!

2 Likes