Connection customization

[urveerendra]

Firstly thank you for giving a base & themed reference which can be extended to many of our custom requirements. After doing many customizations on node, now I am working with customizing the connections with below points, Needed ur inputs on these,

1. Avoiding colliding connections or avoiding overlapping connections
2. Avoiding connections colliding with nodes
3. Creating curvature with slant connections( have got connections with horizontal/vertical connections) needed something which can be connected slantly(e.g., 45deg)

[jerosoler]

1. and 2. You will have to modify the createcurvature function. View: #20

You will have to take into account the nodes and have their getBBox (Width, height, x and y). I see the problem in the connections that do not overlap, it can be more difficult, since there is no straight line.

3. You mean this? -https://github.com/jerosoler/Drawflow/issues/454

[urveerendra]

Thanks for the immediate reply, For point 1 and 2 : I did try with the various examples provided in the examples of #20 . But my requirement is something unique, where in we build kind of circuits where connections cannot overlap, something like this image (attached)

where in we have to avoid the overlaping(colliding) of any connection on the circuit or to avoid overlap on the equipment itself.

I used collision detection (https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection) function for the node overlapping.

Not seeing much option for SVG colliding/overlapping, do u have any other thoughts?

For Point 3 : we have 2 nodes kept in ( 2 different positions) slope positions, where we have to optimally connect those components. trying this connections with "v" and "L" in the editor.createcurvature . any other option left other than this?

like in the below picture.

[jerosoler]

Point 1. It is as you describe with the collision system, as long as the object is rectangular.

Point 2 is tricky. I think it would have to be done the same as 1 and with the change of the same lines. Depending on the objects maybe it could be predicted.

Point 3, the best is Lineto. Or Vertical or Horizontal with transformation.

Another option is if you put in drawflow: editor.curvature = 0.1; In this case it is a curve "C" Curveto.

---

One question, the lines will be created by the user or is it only to generate the drawing?

If not created by the user, maybe you could store it in the node or in the connection itself.

Modifying the library a bit.

[ArG97]

Hi, i want to make the lines like this...like curvy at start of the node and end of the node for vertical .... need your assists

[jerosoler]

Hi! @ArG97 For vertical lines view:

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

[ArG97]

Hi! @ArG97 For vertical lines view:

• Vertical ports or drawing connections from node edges #20

Thank you!!