I am trying to create a custom link type that will render as a bezier curve with a visible stub at each end, and transparent in the middle. I want to show a shape at the end of each of the stubs. Something like this (https://jsfiddle.net/cfarmerga/6xuoyez2/74/):
I thought I had this working, but it fails for this kind of long link…
In this case (https://jsfiddle.net/cfarmerga/6xuoyez2/120/), I am also placing a Square shape at what I hoped to be the midpoint of the link, relying on what I read in the “Labels on Links” topic saying it will be positioned in the middle of a link. It looks like it’s placing the square at an attractive automatic position (red circle), but not in the actual middle of my long link. In the above screenshot, the midpoint would be down nearer the bottom right corner of the link. My strategy for placing the shapes in the right place along the curve was to calculate and apply a segmentOffset, which seemed to work well for the simpler short links. Because the shapes aren’t really originating at the actual midpoint of my longer link, my math doesn’t work now, and the shapes (pointed to by red arrows) end up moved too high.
So, my whole goal here is to place shapes at arbitrary points along the bezier curve to create the look for my stubs, and the way I thought I could do that was to translate them via segmentOffset from their location at the link midpoint. Now I realize that I don’t really know the starting point for the shape, so I can’t calculate an appropriate segmentOffset. Is there a better way I can place the shapes to they always end up on the curve?