RoundedRectangle with angle makes incoming link arrowhead look incorrect

GoJS
1

Hi!
I have a shape of RoundedRectangle

	goMake(
		go.Node,
		go.Panel.Auto,
		{
			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(),
		goMake(
			go.Panel,
			goObjectTypes.Spot,
			goMake(
				go.Shape,
				goObjectTypes.RoundedRectangle,
				{
					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,
				},
			),
			goMake(
				go.Shape,
				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.

image
image666×543 2.89 KB

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?

Thanks
Vlad.

2

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

3

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

4

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

5

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.

6

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
image

7

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.

8

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!

9

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

image
image698×636 22.1 KB

10

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

11

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