Hi
I have this node template
const diamondPosition = new go.Point(2, 3);
const gatewayNodeFill = '#FFFFFF';
const dimmedNodeColor = '#DDDDDD';
const defaultPort = $(
go.Shape,
{
fill: 'transparent',
strokeWidth: 0,
width: 64,
height: 64,
alignment: go.Spot.TopLeft,
portId: '',
toSpot: new go.Spot(0.5, 0, 0, 16),
fromSpot: new go.Spot(0.5, 1, 0, -16),
fromMaxLinks: Infinity,
toMaxLinks: Infinity,
fromLinkable: true,
toLinkable: true,
},
);
const leftPort = $(
go.Shape,
'SpecialTrapezoid',
{
fill: 'transparent',
strokeWidth: 0,
width: 16,
height: 64,
alignment: go.Spot.TopLeft,
portId: 'left_port',
fromSpot: new go.Spot(0, 0.5, 16, 0),
fromMaxLinks: Infinity,
fromLinkable: true,
toLinkable: false,
},
);
const rightPort = $(
go.Shape,
'SpecialTrapezoidInverted',
{
fill: 'transparent',
strokeWidth: 0,
width: 16,
height: 64,
alignment: go.Spot.TopRight,
portId: 'right_port',
fromSpot: new go.Spot(1, 0.5, -16, 0),
fromMaxLinks: Infinity,
fromLinkable: true,
toLinkable: false
},
);
const gatewayTempalte = $(
go.Node,
go.Panel.Spot,
{
locationSpot: new go.Spot(0, 0, 16, 16),
resizable: false,
isShadowed: true,
shadowOffset: new go.Point(0, 0),
selectionAdorned: false,
linkValidation: (fromNode: go.Node, _fromPort: go.GraphObject, toNode: go.Node): boolean => {
let retVal = true; // default
if (fromNode && toNode) {
if (elementsCategoryComparator.isGateway(fromNode)) {
const fromNodeExistingLinks = fromNode
.findLinksOutOf()
.filter((link) => link.toNode.key === toNode.key);
retVal = fromNodeExistingLinks.count === 0; // no links to target node allow connect
}
}
return retVal;
},
},
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(),
new go.Binding('layerName', '', (data) => {
return data.isSelected ? 'Foreground' : '';
}),
$(
go.Panel,
go.Panel.Table,
{
shadowVisible: false,
alignment: go.Spot.TopLeft,
desiredSize: new go.Size(64, 64),
},
defaultPort,
leftPort,
rightPort
),
$(
go.Panel,
go.Panel.Position,
{
alignment: go.Spot.Center,
},
$(
go.Shape,
"RoundedRectangle",
{
angle: 45,
fill: gatewayNodeFill,
name: 'decision-item-outer-shape',
stroke: '#FF62AD',
parameter1: 3,
maxSize: new go.Size(23, 23),
},
new go.Binding('strokeWidth', 'isSelected', (selected) => {
return selected ? 2 : 1;
}),
new go.Binding('desiredSize', 'isSelected', (selected) => {
return new go.Size(selected ? 30 : 31, 32);
})
)
),
$(
go.Panel,
go.Panel.Position,
{
alignment: go.Spot.Center,
},
$(
go.Shape,
"Diamond", // the inside
{
name: 'decision-item-connection-inner-shape',
margin: 14,
desiredSize: new go.Size(30, 30),
strokeWidth: 0,
fill: 'transparent',
cursor: "move",
},
)
)
);
and this is what happens
- on diagram loads node looks perfectly fine as expected
- after user moves it something going wrong and its have shifts to left inside of the its own panel.
here is a gif
on this gif you can see
- diagram reload
- initial view
- node being moved and weird shift happens
- diagram.layoutDiagram(true) (node remains visually broken)
I’m trying to understand what I should do to fix this template in new gojs version.
previous version was 2.1.44 and it was working without any issues.
here are the custom shape I’m using for ports
go.Shape.defineFigureGenerator('SpecialTrapezoid', function (_shape, w, h) {
const param1 = 0.2;
const indent = Math.abs(param1) * w;
const geo = new go.Geometry();
geo.add(
new go.PathFigure(0, 0)
.add(new go.PathSegment(go.PathSegment.Line, w, w))
.add(new go.PathSegment(go.PathSegment.Line, w, h - w))
.add(new go.PathSegment(go.PathSegment.Line, 0, h).close())
);
if (indent < w / 2) {
geo.setSpots(indent / w, 0, (w - indent) / w, 1);
}
return geo;
});
go.Shape.defineFigureGenerator('SpecialTrapezoidInverted', function (_shape, w, h) {
const param1 = 0.2;
const indent = Math.abs(param1) * w;
const geo = new go.Geometry();
geo.add(
new go.PathFigure(w, 0)
.add(new go.PathSegment(go.PathSegment.Line, 0, w))
.add(new go.PathSegment(go.PathSegment.Line, 0, h - w))
.add(new go.PathSegment(go.PathSegment.Line, w, h).close())
);
if (indent < w / 2) {
geo.setSpots(indent / w, 0, (w - indent) / w, 1);
}
return geo;
});
which is basically makes ports looks like this
Thanks.
Vlad