search

jsplumb / community-edition

The community edition of jsPlumb, versions 1.x - 6.x
https://jsplumbtoolkit.com
Other
236 stars 21 forks source link

Custom overlays: Add possibility to "auto rotate" #8

Open koppor opened 10 years ago

koppor commented 10 years ago

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.

grabbed_20160728-055647

grabbed_20160728-055625

I see two solutions

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 commented 10 years ago

Agreed - desperately need ability to rotate custom overlays

sporritt commented 10 years ago

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 commented 9 years ago

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 commented 7 months ago

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.