Arrows as endpoints, text on path, shadows

[teodorsandu]

Hi, this is a feature request, not an issue.

Would be nice to be able set endpoints as arrows(instead of overlays with location:0 or 1). Also, if t is possible, the tip of the arrow to be sharp.
The connector itself would be good if would end at the foldback of the arrow (see jsfiddle).

Text on path - reusing the path of the connector.(reverse text direction if upside down?)

Shadows - using feGaussianBlur?

http://jsfiddle.net/relu902/v48Lo7ur/

[sporritt]

@teodorsandu the issue you mention about connectors not being sharp is something i know about and want to fix in a future release. It is caused by, as i think you know, the fact that the connector doesnt stop at the beginning of the overlay. There are several approaches i could take to this. I am hoping to pick one and implement it for the next major release.

Speaking of which, text on a path is also on the roadmap. Because it isnt supported in vml, which ie8 uses, and all 1.x releases of jsPlumb work with ie8, i havent yet done it. Version 2 will be the first major release to support svg only, and then i will start looking at this, as well as a bunch of other things that are not possible in vml.

[sporritt]

@pavitrakumar78 i see this issue was locked - you wouldnt actually have been able to comment. i have no idea why i did that, sorry.

[pavitrakumar78]

@sporritt no problem! so, is there a fix that is being worked on for the upcoming versions? I've yet to completely read the internals of the connectors in jsPlumb, so I am not sure how to make the connectors end before the edge where it is supposed to be connected IF there is an arrow. I'll see if I can come up with some solution. If you could give me some useful pointers, that'd be great!

[davidpn11]

The problem of having an arrow as a endpoint can be solved with a work around.
You can put the arrow an then an endpoint about the size of the arrow with a transparent color.
Something like this:
Endpoint: ['Dot', { radius: 15 }], endpointStyle: {fill: 'black'}, Connector: 'Flowchart', ConnectionOverlays: [ ['Arrow', { location: 1, id: 'arrow', length: 14, foldback: 0.8 }] ],

I hope it helped =)

[pavitrakumar78]

@davidpn11 hey! Thanks for the suggestion!
I don't understand how it would help (I am not near my computer - so I can't try it atm) the arrows not being pointy issue. If I add both an arrow and a dot endpoint, the dot endpoint would just appear over the arrow - am I missing something?

[davidpn11]

Hey @pavitrakumar78 .
Thanks for the quick reply. Maybe I misunderstood the problem.
I was having the problem of wanting the endpoint as an arrow, with the possibility of drag the arrow to another element. Using a bigger and transparent endpoint solved this issue for me, cause it feels like you are clicking the arrow.
You can see watch I meant in the gif bellow.
Sorry if that was not the problem =/

[pavitrakumar78]

@davidpn11 No problem! It appears you misunderstood this issue :)
My problem is this:

The arrows are not pointed i.e the actual position of the arrow should be further away from where it is currently drawn or the line should end before the pointy section of the arrow. This problem is more prominent when the arrow size/stroke size gets bigger.

Examples of problem are here and here fiddle by OP of this issue.

[alexanderadam]

I know that this is an old issue but did anyone find a bugfix for this issue?
Others also seem to have this problem but the provided answer aren't really solving this.

[Mayank-khator]

Hi @sporritt/All ,

I have an issue as below, can anyone suggest:

1st : Arrows looks incomplete.
2nd: Arrows look distorted.

Pls suggest me how i can resolve the same.

Note: I am using older version