Custom overlays: Add possibility to "auto rotate"

[koppor]

I want to add custom overlays to my connections. I am going to include double arrows, squares, and arrows without being filled. Therefore, I think, I need to use the "Custom" overlay type. It works pretty well besides that the orientation of the custom overlay does not change when the connection is attached at another side of the shape.

In the case of arrows, they are rotated when a connection moves from the side to the top of the shape. Demo at http://liveweave.com/4FAhD6.

I see two solutions

• Offer property autorotate
• Offer overlay type CustomRotate

autorotate: Here, the default attachment is the right side of the shape. jsPlumb rotates the result of the "create" function according to the attachment. Possibly using the CSS transform: rotate(90deg); property.

CustomRotate: Here, the user has to specify four createFunctions: createTop, createRight, createBottom, and createLeft. jsPlumb calls the appropriate function when rendering the connection.

[liamlevesque]

Agreed - desperately need ability to rotate custom overlays

[sporritt]

My preference out of the two methods outlined above is for the second one, in which it is the writer of the Overlay whose responsibility it is to change the visual representation. But I haven't the time to do this in the near future.

[linjinjin123]

I have the same demand in my project. Is this problem solved？I can't find any update for this demand.
Or could you please give me some advice to achieve it? @sporritt

[rojasjandro89]

I'm facing the same problem. I need to orientate custom overlays but I don't see the option to do it.

I could tap into the drag events to recalculate the orientation based on the elements position but it seems there's something similar already implemented within the library (arrows auto-orientate)... don't want to reinvent the wheel.