Group highlight on mouse over on group title

Core Development Feature Requests
1

Hi There,

I just discovered the possibility of using a transparent group borders which I really like since the grouping is only shown when needed:

tmp5

I see the text but no border - less clutter, clearer flow.

Now seeing this, I naturally move the mouse cursor to the group title but nothing happens. Only if I cross over the border is the group border shown.

Hence my request: show the group board when the cursor is moved over the group title.

EDIT: unfortunately this is non-trivially doable since the highlight is done using CSS pointerEvents which - AFAIK - aren't triggerable via jQuery. The group label would need an on('mouse{over|out}',...) somewhere here and that could trigger some jQuery magic ...

3 Likes
2

Update: actually got this working using the CSS class red-ui-flow-group-hovered. All I did was add this code:

g.append('svg:text')
    .attr("class","red-ui-flow-group-label")
    .on("mouseover", function() {
            let grpId = $(g[0]).attr('id');
            $(`#group_select_${grpId}`).addClass('red-ui-flow-group-hovered');
            d3.event.preventDefault();})
    .on("mouseout", function() {
            let grpId = $(g[0]).attr('id');
            $(`#group_select_${grpId}`).removeClass('red-ui-flow-group-hovered');
            d3.event.preventDefault();});

over here.

The server-less Node-RED has a demonstration of how that works.

As an aside, I noticed that clicking and holding the group title allows me to move the group. Yet doing the same within the group but off the title doesn't work. So to have the group title highlight when mouse-over is consistent with being able to move a group using the title.

tmp6

EDIT: added animation

3

Of course you can move a group by dragging anywhere on the border, and the cursor changes to 'move' to indicate this.
It's interesting to discover that you can move the group by dragging on the title because (on Node-red unmolested) the cursor does not change here.

I didn't try your additional code but this CSS will change the colour of the title and cursor on hover:

.red-ui-flow-group-label tspan.red-ui-flow-group-label-text:hover {
        fill:red;
        cursor: move;
}

I couldn't get it to change the background colour of the title bar, there does not seem to be an available div to style.

Not sure I'd want to keep the colour change on hover, but I will leave the cursor change in my editor css file.

4

Sure but this about the border being invisible, so there is no border to move with. But that's also not my intention here. It's experimenting with non-opaque[1] borders to see whether they can reduce clutter but still provide details on the workings of a flow (i.e. via the group title).

I honestly didn't think about moving groups because this is something for a project that has a Node-RED viewer and a Node-RED editor - two different components that are styled completely differently.

Just throwing it out there to see whether others also like it. It will probably never make it into Node-RED but that's not the point here.

[1] = is it unopaque, inopaque, non-opaque - opaque being the opposite of what I'm doing.

5

Transparent?

1 Like
6

Of course! Monday mornings ... :slight_smile:

7

In my view, the heading absolutely should have the same interactivity as the border of the group since you can already double-click it to open the group settings and grab it to move the group.

In fact, I would say that not changing the mouse pointer on hover is a BUG. That should be fixed. It should be treated the same as the border.

2 Likes