Issue for this.editor.createCurvature in angular

[neelphilips]

Hello Jerosoler, Hope you are doing well. As discussed in issue number 831. who have provided me a create Curvature code for arrow links and which is working properly. Image 1

Image 2

My issue to you as you can see in image1 my workflow and a save button on the top-right corner. Now i made changes as you can see changes in image 2 which is i have added a new workflow name which is MFG and it is connected to MAT okay. Now as soon as i click on save button i have saved this json of drawflow and which is saved properly with perfect connection but the issue is the UI which will get mess up as you can see in image 3 image 3:-

but as soon as i navigate to any other navbar and come back to my workflow page UI will get back to normal because the workflow will get create as per drawflow json. As my json was correct when i had clicked on save. but the UI was messed up.

This is the code for create Curvature

this.id = document.getElementById("drawflow"); this.editor = new Drawflow(this.id); this.registerEvents(this.editor); this.editor.reroute = true; this.editor.drawflow = this.flowChartData; this.editor.curvature = 0; this.editor.reroute_curvature_start_end = 0; this.editor.reroute_curvature = 0; this.editor.createCurvature = function (start_pos_x: any, start_pos_y: any, end_pos_x: any, end_pos_y: any, curvature_value: any, type: any) { let angle = 15; const stroke = 2; // === stroke CSS. const input_distance = 10; const fix_arrow_distance = 10; const min_x_distance = 45; const x = start_pos_x + input_distance; const y = start_pos_y; const end_x = end_pos_x - fix_arrow_distance; const end_y = end_pos_y; const center_x = ((end_x - x) / 2) + x; const center_y = ((end_y - y) / 2) + y; const distance_x = end_x - x; const distance_y = end_y - y; let minX = false; let line = ''; if (distance_x <= min_x_distance) { minX = true; } if (end_y > y) { //Down Lines if (distance_y <= angle 2) { angle = distance_y / 2; } if (minX) { if (distance_y <= angle 4) { angle = distance_y / 4; } line += M ${x} ${y} L ${x + min_x_distance - angle} ${y} A ${angle} ${angle} 1 0 1 ${x + min_x_distance} ${y + angle} L ${x + min_x_distance} ${center_y - angle} A ${angle} ${angle} 1 0 1 ${x + min_x_distance - angle} ${center_y} L ${end_x - min_x_distance} ${center_y} A ${angle} ${angle} 1 0 0 ${end_x - min_x_distance - angle} ${center_y + angle} L ${end_x - min_x_distance - angle} ${end_y - angle} A ${angle} ${angle} 1 0 0 ${end_x - min_x_distance} ${end_y} L ${end_x} ${end_y} ; } else { line += M ${x} ${y} L ${center_x - angle} ${y} A ${angle} ${angle} 1 0 1 ${center_x} ${y + angle} L ${center_x} ${center_y} L ${center_x} ${end_y - angle} A ${angle} ${angle} 1 0 0 ${center_x + angle} ${end_y} L ${end_x} ${end_y} ; } } else { // UP Lines if (distance_y -1 <= angle 2) { angle = distance_y -1 / 2; } if (minX) { if (distance_y -1 <= angle 4) { angle = distance_y -1 / 4; } line += M ${x} ${y} L ${x + min_x_distance - angle} ${y} A ${angle} ${angle} 1 0 0 ${x + min_x_distance} ${y - angle} L ${x + min_x_distance} ${center_y + angle} A ${angle} ${angle} 1 0 0 ${x + min_x_distance - angle} ${center_y} L ${end_x - min_x_distance} ${center_y} A ${angle} ${angle} 1 0 1 ${end_x - min_x_distance - angle} ${center_y - angle} L ${end_x - min_x_distance - angle} ${end_y + angle} A ${angle} ${angle} 1 0 1 ${end_x - min_x_distance} ${end_y} L ${end_x} ${end_y} ; } else { line += M ${x} ${y} L ${center_x - angle} ${y} A ${angle} ${angle} 1 0 0 ${center_x} ${y - angle} L ${center_x} ${center_y} L ${center_x} ${end_y + angle} A ${angle} ${angle} 1 0 1 ${center_x + angle} ${end_y} L ${end_x} ${end_y} ; } } let arrow = M ${end_x + 0.5} ${end_y + 0.5} L ${end_x - 10} ${end_y - 10} M ${end_x + 0.5} ${end_y - 0.5} L ${end_x - 10} ${end_y + 10}; switch (type) { case 'open': return line; break case 'close': return line + arrow; break case 'other': return line; break default: return line + arrow; break; } return line + arrow; } this.editor.start(); const elements = document.getElementsByClassName("drag-drawflow"); for (let i = 0; i < elements.length; i++) { elements[i].addEventListener("touchend", this.drop, false); elements[i].addEventListener("touchmove", this.positionMobile, false); elements[i].addEventListener("touchstart", this.drag, false); }

Thank you in advance Mate.

[jerosoler]

It seems like another problem since it has 2 of each nodes according to image 3.

It seems like some problem importing or creating the nodes.

It doesn't seem like a curvature problem.

Check your save button.

[neelphilips]

thanks for your reply, Let me explain you a little bit more about my problem. The default workflow which i will get from backend through API and i have fetched that response and store that object in this.editor. Then i have called method of createCurvature after fetching data from backend.

Now Let say if i clicked on Clear button that means to clear all nodes and all connections will be removed. Now i will just simply create 2 node to create my new workflow 1st one is abc and 2nd one is xyz and i had make a connection from abc to xyz now as soon as i click on save then i have passed the drawflow json data to backend and again fetch them and then i called create Curvature method but the thing is when i clicked on save button the connection which i have created between abc and xyz will get clone and on UI you may see double connection so is there any thing which i have to make it blank?.

[jerosoler]

View clear method https://github.com/jerosoler/Drawflow?tab=readme-ov-file#methods

[neelphilips]

Should i use this.editor.clear(); or something else?

[jerosoler]

I think that would be enough.

Consider using the import method to import the data.

[neelphilips]

If I use this.editor.clear() then as soon as the old record has been cleared afterwards while creating new nodes then I am not able to connect nodes. And it shows error in console like it cannot find outputs in draw flow json.

[neelphilips]

As soon as this.editor.clear() is called and now i tried to update workflow like adding new node(boxes) and connecting them with others existing nodes but arrow links are unable to connect with others. Even the existing old boxes are not able to connect with each other and it is giving me console error as mentioned above.

[neelphilips]

In short after this.editor.clear() i am not able to connect nodes from each other. I hope you would help me out through this. Thank you in advance mate.

[jerosoler]

Create a codepen or something live so you can reproduce your error.

[neelphilips]

Sorry to reply you late due to some personal reasons. As I have to modify method calling in my code so now its is working.