jsPlumb: fat arrow?

Question

I want a fat arrow in jsPlumb with a pretty tip.

This is what I want:

This is what I get:

How can I change the settings?

Here's what I currently use:

PaintStyle: { stroke: "#f00", strokeWidth: 20 },
connector: ["Straight"],
connectorOverlays:[["Arrow", { location:1, width:70, length:70 } ]]

I have been using arrows in SVG before. There, I could simply change the SVG code of the head to be moved forward so that the end of the line (the coordinates of the line end point) is inside the arrowhead triangle. I don't seem to be able to do this in jsPlumb.

I see it is difficult to convey the problem.

Here's a next try:

did you try negative location? Not familiar with that library but arrow point and line start at same place and since arrow point is narrower you see the line — charlietfl, Nov 04 '17 at 19:29
Good point - that's what I had originally expected. But anything <0 or >1 is taken as a number of pixels from start or end, respectively... See [docs](https://jsplumbtoolkit.com/community/doc/overlays.html#location). So you can't move "beyond" the line. — Swiss Mister, Nov 04 '17 at 19:35
Aren't you able to change `connector` location? You cloud set it to start at 5 or so. — FcoRodr, Nov 10 '17 at 10:10
Thanks @FranciscoRodríguez: Any value outside the 0..1 range is interpreted as number of pixels _within_ the straight line (negative: from start, positive: from end). But what I would need is a way to push the arrow head _outside_ the line's endpoint (or alternatively, make the line shorter). I don't see any possibility for either. — Swiss Mister, Nov 10 '17 at 10:19
What I was thinking is keep as it is the arrow and move the straight line. The pointer would be at the tip of the arrow, so it doesn't matter where to move the line (as I understand it) — FcoRodr, Nov 10 '17 at 11:15

Vaxo Basilidze · Accepted Answer · 2017-11-23T13:37:26.050

2

Setting the location to 0.99 actually did the thing for me. Try this:

PaintStyle: { stroke: "#f00", strokeWidth: 20 },
connector: ["Straight"],
connectorOverlays:[["Arrow", { location:0.99, width:70, length:70 } ]]

edited Nov 23 '17 at 13:37

answered Nov 11 '17 at 07:06

Vaxo Basilidze

1,017
13
31

Thank you @VaxoBasilidze. I'm afraid this makes no difference - please explain why you think this makes a difference. – Swiss Mister Nov 13 '17 at 20:12
@SwissMister I have edited my answer. Strange, but location: 0.99 actually does for me what you are trying to achieve. Try it also. – Vaxo Basilidze Nov 18 '17 at 10:09
Thanks @VaxoBasilidze! That is one creative discovery! That works indeed. Actually, just changing `location` from `1` to `0.99` in my original code is the right answer in the current version of jsPlumb (2.5.7). If you edit your answer, I will accept it. – Swiss Mister Nov 22 '17 at 19:59

Nandu Kalidindi · Answer 2 · 2017-11-13T22:10:38.007

1

This could probably work. Please try it out

connector: ["StateMachine", {curviness:0.001}],
connectorOverlays:[
  [
    "Arrow", 
    { location: [0.5, 0.5], width: 70, length: 70 } 
  ]
]

Check out the Overlay location section in this webpage https://jsplumbtoolkit.com/community/doc/overlays.html#adding

edited Nov 13 '17 at 22:10

answered Nov 13 '17 at 21:04

Nandu Kalidindi

6,075
1
23
36

Thanks @NanduKalidindi. No luck. Tried this before - will indeed position the arrowhead in a better way - but it doesn't point in the direction of the arrow. See https://imgur.com/a/5CHG0 – Swiss Mister Nov 13 '17 at 21:10
Surprising that it did not work, could you please create a JSFiddle if possible? – Nandu Kalidindi Nov 13 '17 at 21:13
Is your connector type fixed or could it be changed. If yes then, please try changing it to `connector:"StateMachine"` – Nandu Kalidindi Nov 13 '17 at 21:21
Very hot hint! You are right - this works. Alas, I need a "Straight" connector. Any way this could be fixed? – Swiss Mister Nov 13 '17 at 21:50
Just discovered I could set a small (albeit not zero!) `curviness` parameter to get an _almost_ straight arrow: `connector: ["StateMachine", {curviness:0.001}]` – Swiss Mister Nov 13 '17 at 21:57
@SwissMister Yep, the curviness indeed worked! I updated the answer. – Nandu Kalidindi Nov 13 '17 at 22:12
@SwissMister Mark this as answer please, if it worked! – Nandu Kalidindi Nov 17 '17 at 17:24

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

This has no solution till date I guess by looking at github, It's still an open issue. Issue was opened in 2014.

One solution would be hacking library itself to add margin or padding kind of property to Arrow Object.

update:

I tried to figure out in library itself. See this below image where it's doing some math calculations. If you're good at it, tweak it and you're done!

And extents are being user here:

Update2:

Try Location array like below: (demo: http://jsfiddle.net/crerhawn/)

["Arrow", { location:[0.5,0.5], width:70, length:70 } ]

jsPlumb: fat arrow?

3 Answers3

update:

Update2: