UI - add labels inside the switch node

Core Development
1

Hi,
I've added labels inside a custom switch node I wrote. The problem is that when I edit de node the redraw function does not call an annonymous function to get the new labels texts.
I'm new to the enter(),append(),exit() paradigm, so I'm a bit lost!

Here is my code:

var output_group = d._ports.enter().append("g").attr("class","port_output");
output_group.append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
                                    .on("mousedown",(function(){var node = d; return function(d,i){portMouseDown(node,PORT_TYPE_OUTPUT,i);}})() )
                                    .on("touchstart",(function(){var node = d; return function(d,i){portMouseDown(node,PORT_TYPE_OUTPUT,i);}})() )
                                    .on("mouseup",(function(){var node = d; return function(d,i){portMouseUp(node,PORT_TYPE_OUTPUT,i);}})() )
                                    .on("touchend",(function(){var node = d; return function(d,i){portMouseUp(node,PORT_TYPE_OUTPUT,i);}})() )
                                    .on("mouseover",(function(){var node = d; return function(d,i){portMouseOver(d3.select(this),node,PORT_TYPE_OUTPUT,i);}})())
                                    .on("mouseout",(function(){var node = d; return function(d,i) {portMouseOut(d3.select(this),node,PORT_TYPE_OUTPUT,i);}})());`

                                // NxC Add label nos outputs
                                if(d.type == "Pergunta") {
    	                            output_group.append("svg:text").attr("class", "outport_label").attr("x", -8).attr("y", 5)
    	                            	.style("font-size","10px").style("stroke", "#000").style("stroke-width", "0")
    	                            	.text(function(idx) {
    	                            		return d.rules[idx].v;
    	                            	});
                                }

The function in bold only gets called on the 1st redraw() call, not on the next ones.
Any ideas?

Thanks!

2

This looks like you are customising nodered itself rather than just a creating a node... Is that right?

A node is only redraw if it's dirty property is set to true. The property is reset when it gets drawn. Not sure if thats what you're hitting, but I'm not totally clear on what you are trying.

3

Yes, customising node.

The thing is that de node is getting redrawn, the "output_group.append(..." is getting called, but the anonymous func inside the "tex()" not.
I think that the "dirty" flag is set, because I need the redraw after editing the node.

4

The output_group selection is the result of d._ports.enter(). The enter() selection causes d3 to look at d._ports and identify any elements in that array that do not already have visual elements. That means it is the list of outputs that have been added since it was last called. So it will only get called once.

If you want to refresh the labels on every redraw, then need to do that outside of the output_group selection.

A bit later down in the redraw function is the code:

if (d._ports) {
    numOutputs = d.outputs || 1;
    y = (d.h/2)-((numOutputs-1)/2)*13;
    var x = d.w - 5;
    d._ports.each(function(d,i) {
            var port = d3.select(this);
            //port.attr("y",(y+13*i)-5).attr("x",x);
            port.attr("transform", function(d) { return "translate("+x+","+((y+13*i)-5)+")";});
    });
}

Inside the each loop you could do something like:

port.selectAll(".outport_label").text(function(idx) { return d.rules[idx].v; });
5

Thank you so much. Since I'm in the foreach I did like this:

port.selectAll(".outport_label").text(d.rules[i].v);

works!