-
-
Notifications
You must be signed in to change notification settings - Fork 703
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Label for connector lines #18
Comments
Hi! 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? |
Hello, can the label be drawn alongside the connector line/path please? That will be much better and appealing. Thanks |
@taroongunessee you may need to add for svg |
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. |
how did you do that? |
Any plans to add this as an actual js parameter instead of css class ? |
yes @jerosoler many people are looking for dynamic connection labelling please plan to implement it |
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; |
any update on this issue? any plan on updating this? |
|
@jerosoler Hello, Thanks a lot for this amazing library. I have a requirement to add multiple |
Hi @Aravinda93 It is not yet implemented. But I want to implement this system. So if you have any suggestions, please comment. |
@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 :) |
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? |
@zynth17 I don't think so, if I added it it would be in some other more native way. |
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
} |
Hi @jerosoler 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 ? |
Use event "import" to add the text again. |
add text label function works but how I can add to into the drowflow data structure? |
anyone had this issue and know the solution? |
the second question is: Is there any way to save this into the structure? |
First question: Provide a codepeen to reproduce your code. Second question: |
I don't see label into html of the node |
This css is for node with "ClassName" "multiple" The class parameter in node. editor.addNode(name, inputs, outputs, posx, posy, class, data, html); |
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 |
@jerosoler i want to add label with background color and some background property in connection line. is there any solution ? |
Hello, is it possible to add labels to connector lines? For example, Yes/No or If/Else?
The text was updated successfully, but these errors were encountered: