How to Assign Labels to Connections in DrawFlow Condition Node?

[ahmadshaik1608]

I'm currently working with DrawFlow and I have a requirement to assign labels to connections in the condition node. The condition node has a rhombus shape and consists of one input and two outputs.

I would like to know how I can achieve the following behaviour:

When a connection is dragged from the right end of the condition node, I want to set the label of the connection to "true".
When a connection is dragged from the bottom of the condition node, I want to set the label of the connection to "false".
I would appreciate any guidance, code examples, or suggestions on how to implement this functionality in DrawFlow.

Please feel free to share your insights or point me in the right direction. Thank you in advance for your help!

[jerosoler]

View:

• Label for connector lines #18

[ahmadshaik1608]

Thanks,

But how to identify the link coming form true output or false output in exported json.

Can we pass the outputId and node name to the create curvature function to implement node specific style to the link?

[jerosoler]

In the export with output_1 and output_2

[ahmadshaik1608]

Can you please provide with the code.

this.editor.createCurvature = function (start_x, start_y, end_x, end_y, curvature_value, type) {
....
}

Iam using this function to create curvatures, but now i want to pass the nodeid and outpuId (from which output the connection is creating) based on these values, i will put conditions inside above function and generate links respectively.

[jerosoler]

CreateCurvature function not get the nodeId.

But use events with connection created:

editor.on('connectionCreated', (obj) => {
 console.log(obj)
});

[ahmadshaik1608]

Is it possible to redraw the curvature of the connection within the 'connectionCreated' event handler? I would like to customize the curvature based on the newly created connection, its source node, and the output it is coming from.

Specifically, I'd like to adjust the curvature based on different conditions depending on the source node and the specific output that was used to create the connection.

Please help me.

[jerosoler]

You could modify the creacteCurvature function in the code.
You could modify drawflow to pass it more values.

Here, for example, there is a PR to add the input and output addresses of a node.

#32

[ahmadshaik1608]

I replaced the code mentioned there in drawflow.min.js, in angular

But not working, is there any other fix for adding the input and output addresses of a node.

[ahmadshaik1608]

I checked with that code but it is giving only the in_dir only and giving unknown for value out_dir

this.editor.createCurvature = function (start_x, start_y, end_x, end_y, curvature_value, type, out_dir = 'unknown', in_dir = 'unknown')

For the bottom node the curvature is not rendering correctly.

Please help me with this

[ahmadshaik1608]

Hi @jerosoler, Can you please help me with it

[jerosoler]

out_dir and in_dir is not drawflow is the fork drawflow. I can't help you. From what I see in the PR, it has to indicate if it is top or bottom in the curve.