Label for connector lines

[taroongunessee]

Hello, is it possible to add labels to connector lines? For example, Yes/No or If/Else?

[jerosoler]

Hi!

I'ts possible with css:

For example:

.drawflow-node.multiple .outputs .output:nth-child(1):before {
    display: block;
    content: "Yes";
    position: relative;
    right: 30px;
  }
 .drawflow-node.multiple .outputs .output:nth-child(2):before {
    display: block;
    content: "No";
    position: relative;
    right: 30px;
 }

In case use the classname "multiple"

editor.addNode(name, inputs, outputs, posx, posy, class, data, html);

Does the solution work for you?

[taroongunessee]

Hello, can the label be drawn alongside the connector line/path please? That will be much better and appealing. Thanks

[jerosoler]

In the center of line?

[taroongunessee]

Yes, or even something like this:

[lozzo]

@taroongunessee you may need to add for svg

[aughey]

Labeling ports with css can be impractical when nodes and ports are generated dynamically. In my case, I'm creating nodes on a remote system, and the remote system will "describe" what the inputs and output are. I need to label each input and output with a name to indicate what type of data goes into that port.

[gunasekharravilla]

@taroongunessee you may need to add for svg

how did you do that? please share the code snippet for dynamic labelling by user

[Boffice]

Any plans to add this as an actual js parameter instead of css class ?

[gunasekharravilla]

yes @jerosoler many people are looking for dynamic connection labelling

please plan to implement it

[rwnobrega]

[...]

[...]

Dear @jerosoler, thanks a lot for this amazing library!

Any hint on how to right-align all the labels in this example?

Edit:

Nevermind, found the solution:

display: block;
content: "Content";
transform: translate(-20px);
text-align: right;
float: right;

[hi-reeve]

any update on this issue? any plan on updating this?

[shadab19it]

yes, please share the code snippet for dynamic connection labeling

[Aravinda93]

@jerosoler Hello, Thanks a lot for this amazing library. I have a requirement to add multiple Labels on Connector so wanted to confirm if this has been implemented. It would be really nice to have the option to add multiple Labels on Connector. Something like this I want to design my application:

[jerosoler]

Hi @Aravinda93

It is not yet implemented. But I want to implement this system.

https://github.com/jerosoler/Drawflow/issues/45#issuecomment-701554099

So if you have any suggestions, please comment.

[Aravinda93]

@jerosoler Thanks a lot for the response. This is a really nice library so I have decided to use this in one of our applications. It would be nice to see the option to add multiple labels on the Connector. T

Thanks for the nice project, have a great day :)

[jerosoler]

Function for add label in the center:

    let label1 = document.querySelector(".connection.node_in_node-2.node_out_node-1.output_1.input_1");

    addLabelText(label1, "Something");

    function addLabelText(bgPath, labelText)
    {
        const newid = [bgPath.classList].join().replace(/\s/g, '');
        bgPath.childNodes[0].id = newid; 
        let textElem = document.createElementNS(bgPath.namespaceURI, "text");
        let textElemPath = document.createElementNS(bgPath.namespaceURI, "textPath");
        textElemPath.setAttribute("href", `#${newid}`);
        textElemPath.setAttribute("text-anchor", "middle");
        textElemPath.setAttribute("startOffset", "50%");
        textElemPath.classList.add("label-text");
        textElemPath.textContent = labelText;
        textElem.appendChild(textElemPath); 
        bgPath.appendChild(textElem);
    }

[hi-reeve]

Function for add label in the center:

    let label1 = document.querySelector(".connection.node_in_node-2.node_out_node-1.output_1.input_1");

    addLabelText(label1, "Something");

    function addLabelText(bgPath, labelText)
    {
        const newid = [bgPath.classList].join().replace(/\s/g, '');
        bgPath.childNodes[0].id = newid; 
        let textElem = document.createElementNS(bgPath.namespaceURI, "text");
        let textElemPath = document.createElementNS(bgPath.namespaceURI, "textPath");
        textElemPath.setAttribute("href", `#${newid}`);
        textElemPath.setAttribute("text-anchor", "middle");
        textElemPath.setAttribute("startOffset", "50%");
        textElemPath.classList.add("label-text");
        textElemPath.textContent = labelText;
        textElem.appendChild(textElemPath); 
        bgPath.appendChild(textElem);
    }

Function for add label in the center:

    let label1 = document.querySelector(".connection.node_in_node-2.node_out_node-1.output_1.input_1");

    addLabelText(label1, "Something");

    function addLabelText(bgPath, labelText)
    {
        const newid = [bgPath.classList].join().replace(/\s/g, '');
        bgPath.childNodes[0].id = newid; 
        let textElem = document.createElementNS(bgPath.namespaceURI, "text");
        let textElemPath = document.createElementNS(bgPath.namespaceURI, "textPath");
        textElemPath.setAttribute("href", `#${newid}`);
        textElemPath.setAttribute("text-anchor", "middle");
        textElemPath.setAttribute("startOffset", "50%");
        textElemPath.classList.add("label-text");
        textElemPath.textContent = labelText;
        textElem.appendChild(textElemPath); 
        bgPath.appendChild(textElem);
    }

are you gonna add this to the next release?

[jerosoler]

@zynth17 I don't think so, if I added it it would be in some other more native way.

[AK3030]

How would I go about rotating the text of the label so that it's always horizontal?

[shamilyn]

@jerosoler, I need to add an input field dynamically at the center of the connector to name the connector while clicking it...

Is there any other sample code available for that??

[jerosoler]

You can use the "clickEnd" event to detect if a line was clicked.

And javascript

if(this.connection_selected != null) {
 //Your code to add label
}

[itsrajatcodehub]

Hi @jerosoler Thanks for the great Library!

how to set the label after import the complete flow ?

this is how I'm setting the label

after the import I want the label on its place

how to do this ?

[jerosoler]

Use event "import" to add the text again.

[mushzak]

add text label function works but how I can add to into the drowflow data structure?

[mushzak]

how I can fix this rotation issue?

[mushzak]

[mushzak]

anyone had this issue and know the solution?

[mushzak]

the second question is: Is there any way to save this into the structure?

[jerosoler]

First question: Provide a codepeen to reproduce your code.

Second question: You can save data as follows. In this case it is the html of the node, but it could save in the connection as well.

• https://github.com/jerosoler/Drawflow/issues/40

[mushzak]

I'm using this function to add labels, it look like this

and it is correct only for right side:

[mushzak]

First question: Provide a codepeen to reproduce your code.

Second question: You can save data as follows. In this case it is the html of the node, but it could save in the connection as well.

• dynamically added html is not included in the export data #40

I don't see label into html of the node

[Tirguy]

Hi!

I'ts possible with css:

For example:

.drawflow-node.multiple .outputs .output:nth-child(1):before {
    display: block;
    content: "Yes";
    position: relative;
    right: 30px;
  }
 .drawflow-node.multiple .outputs .output:nth-child(2):before {
    display: block;
    content: "No";
    position: relative;
    right: 30px;
 }

In case use the classname "multiple"

editor.addNode(name, inputs, outputs, posx, posy, class, data, html);

Does the solution work for you?

It's exactly what i need...

But how can i include this JS to describe the label of each points (input or output) in the node ? I try to put this code in tag, but not seems to work...

Does this code if for all node or just for one node ? because i will need to put different names for the first output of my different nodes...

At the end of my project, module should look like this picture : But with name on each input and output that can be different on each point... I will search a solution later to change the color of each line between each input/output point which will give me a more readable digram

[jerosoler]

This css is for node with "ClassName" "multiple"

The class parameter in node.

editor.addNode(name, inputs, outputs, posx, posy, class, data, html);

[celevra]

i'm designing an Firewall Rule Generatror

that means from one node you can make a connection to "namend" inputs like Port 443, Port 8080 and so on For that i would need a lable next to the "dot" CSS is here not possible because they will be generated, every dot should have an attribute like "name"

[parthsavaliya1]

@jerosoler i want to add label with background color and some background property in connection line. is there any solution ?