This is my diagram and nodes.
and sharing the node template for this diagram.
$$(go.Panel, 'Spot',
$$(go.Shape, 'RoundedRectangle', {
name: 'rect1',
width: 120,
portId: '',
fromLinkable: true,
toLinkable: true,
toLinkableDuplicates: true,
fromLinkableDuplicates: true,
pickable: true,
isActionable: true,
strokeWidth: 1,
fill: 'orange',
height: 200
},
),
$$(go.Shape, 'RoundedBottomRectangle', { // some geometry
name: 'rect2',
fill: 'white',
pickable: true,
isActionable: true,
strokeWidth: 0,
alignment: go.Spot.BottomCenter,
height: 150
},
),
$$(go.Panel, 'Spot', {
alignmentFocus: go.Spot.Center,
alignment: new go.Spot(1, 0, 0, 50)
},
$$(go.Shape, 'RoundedRectangle', {
name: 'rounded_square',
width: 40,
height: 40,
strokeWidth: 1,
stroke: 'grey',
alignment: go.Spot.Center,
alignmentFocus: go.Spot.Center,
shadowVisible: true,
parameter1: 5
},),
$$(go.Picture, {
alignment: go.Spot.Center,
alignmentFocus: go.Spot.Center,
desiredSize: new go.Size(18, 18),
source: 'image_path'
}),
$$(go.TextBlock, {
text: 'some_text',
alignment: new go.Spot(0, 0, 12, 19),
alignmentFocus: go.Spot.LeftCenter
}),
$$(go.TextBlock, {
text: 'some_text',
alignment: new go.Spot(0, 0, 12, 38),
alignmentFocus: go.Spot.LeftCenter
})
// so on
)
)
Link template for this diagram
myDiagram.linkTemplate = $$(Link,
{
corner: 0,
},
new go.Binding('toSpot', '', function (data) {
return new go.Spot(0, 0, 0, 50)
}),
new go.Binding('fromSpot', '', function (data) {
return new go.Spot(1, 0, 0, 50)
}),
$$(go.Shape, {strokeWidth: 1, stroke: 'lightgrey'}),
)
Now, I have been trying to align nodes to top align (same y coordinate )
so I am using following code
myDiagram.layout = $(go.LayeredDigraphLayout, {
setsPortSpots: false,
layerSpacing: 200, // spacing between parent and child [Horizontal]
columnSpacing: 70, // spacing between siblings [Vertical]
alignOption: go.LayeredDigraphLayout.AlignUpperRight,
// to fix the placement of setup node which is not connected to the main tree
layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource
})
But this not getting align to this