RoundedRectangle with angle makes incoming link arrowhead look incorrect

I have a shape of RoundedRectangle

			resizable: false,
			shadowOffset: new go.Point(0, 0),
			selectionAdorned: false,
		new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
		new go.Binding('deletable', 'deletable'),
		new go.Binding('movable', 'movable'),
		new go.Binding('selectable', 'selectable'),
		new go.Binding('isSelected', 'isSelected').makeTwoWay(),
		new go.Binding('isHighlighted', 'isHighlighted').makeTwoWay(),
					angle: 45,
					strokeWidth:  1,
					fill: 'white',
					name: 'decision-item-outer-shape',
					stroke: '#FF62AD',
					desiredSize: new go.Size(GatewayNodeSize, GatewayNodeSize),
					parameter1: 3,
					portId: '',
					fromSpot: new go.Spot(1,1),
					toSpot: new go.Spot(0,0),
                    fromLinkable: true,
                    toLinkable: true,
				goObjectTypes.RoundedRectangle, // the inside
					name: 'decision-item-inner-shape',
					angle: 45,
					margin: 12,
					desiredSize: new go.Size(GatewayNodeSize - 12, GatewayNodeSize - 12),
					strokeWidth: 0,
					stroke: transparentFillColor,
					fill: transparentFillColor,
					parameter1: 3,

and here is how income link arrowhead looks like.

Defining another go.Spot value for toSpot prop doesn’t make any effect for arrowhead direction.
I’m pretty sure that it should be handled form link template side, but I have no clue what exactly should be done there.
Any suggestions?


Is there a reason you need to specify the toSpot at all?

yes, all of our relations are strictly top to bottom directions.
Incoming links should be attached only in specific spot of the element.

previosly I’ve used Diamond predefined shape, but now I need to update design of this element, and now it has rounded corners, and I didn’t found the way to set border radius on Diamond

A Spot that is (0, 0) tells the link to go in or come out at a 45-degree angle. You have rotated the Shape, thereby shifting the connection point and the connection angle. Try a Spot that is (0.0001, 0) or (0, 0.0001). Offsets to the Spot will not change the intended connection angle.

go.Spot(0, 0.0001) - worked for a toSpot, I’m not sure that I understand the idea behind this, so I’m not sure which value to set for fromSpot
Can you please elaborate on that @walter

For a (0, 0) Spot, Link.getLinkDirection will return 225, but it won’t for a Spot where the x and y values are different.

That method is also what rotates the angle based on the angle of the port.

its go.Spot(1,1) for fromSpot prop.

UPD! I’ve tried to set go.Spot(1,0.9999) and it looks good.
Thanks @walter!

Actually, I’m surprised that it doesnt help when this node is inside of go.Group.
It looks exactly like it would looks without changes to from/toSpot props

Maybe it would be simpler if you made the Panel the port rather than the rotated Shape.

hmm, I think you are right @walter it make sense, didnt thought of it at all, I’ll give it a try, thanks!