How can we format the first textblock (word 'success') to the right side of the shape circle and also second textblock should present at the bottom of the circle shape?
Attached the fiddle link as well.
Helps much appreacited
gojs node template
myDiagram.nodeTemplate =
$(go.Node, "Auto", {
movable: false
},
$(go.Panel, "Vertical",
$(go.TextBlock, {
margin: 5,
font: '14px "Open Sans", sans-serif'
},
new go.Binding("text", "status")),
$(go.Panel, "Auto", {
background: "white"
},
$(go.Shape, "Circle", {
strokeWidth: 4,
margin: go.Margin.parse("10 5 10 5"),
height: 75,
width: 75,
cursor: "pointer"
},
new go.Binding("fill", "color"), new go.Binding("stroke", "strokeColor")
),
$(go.Panel, "Vertical",
$(go.Picture, {
source: "https://msdnshared.blob.core.windows.net/media/2017/05/icon.png",
background: "white",
width: 25,
height: 25
})
)
),
$(go.TextBlock, {
margin: 5,
font: '14px "Open Sans", sans-serif'
},
new go.Binding("text", "name"))
)
);
I've adapted your code a little bit:
myDiagram.nodeTemplate =
$(go.Node, "Spot",
{
locationObjectName: "ICON", locationSpot: go.Spot.Center,
movable: false
},
$(go.Panel, "Auto",
{
name: "ICON", background: "white",
portId: "", cursor: "pointer",
fromSpot: new go.Spot(0.5, 1, 0, 20)
},
$(go.Shape, "Circle",
{ strokeWidth: 4, width: 75, height: 75, margin: 5 },
new go.Binding("fill", "color"),
new go.Binding("stroke", "strokeColor")),
$(go.Picture, "https://msdnshared.blob.core.windows.net/media/2017/05/icon.png",
{ width: 25, height: 25, background: "white" })
),
$(go.TextBlock,
{
alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top,
margin: 5, font: '14px "Open Sans", sans-serif'
},
new go.Binding("text", "name")),
$(go.TextBlock,
{
alignment: go.Spot.Right, alignmentFocus: go.Spot.Left,
font: '14px "Open Sans", sans-serif'
},
new go.Binding("text", "status"))
);