I am trying to create a node with rounded rectangle as a shape. i want to achieve something with vertical expand and collapse but in my node,“auto” it keeps on stacking vertical and horizontal panel on top of eachother.
diagram.nodeTemplateMap.add(
"SimpleNode",
$(
go.Node,
"Spot",
"Vertical",
{
locationSpot: go.Spot.Center,
// margin: 20,
isShadowed: true,
shadowOffset: new go.Point(0, 0),
shadowColor: "#AFBBC2",
shadowBlur: 8,
// background: "yellow",
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(
go.Point.stringify
),
$(go.Shape, "roundedrectangle", {
//CornerRounding: 25,
fill: "#DCE5EA",
// height: 108,
width: 280,
strokeWidth: 0,
}),
$(
go.Panel,
"Horizontal",
{},
$(
go.Panel,
"Spot",
$(
go.Picture,
{
source: "",
height: 40,
width: 40,
},
new go.Binding("source", "source")
),
$(
go.TextBlock,
"ABVR",
{
margin: 2,
editable: false,
font: "bold 8pt Inter, sans-serif",
name: "TEXT",
overflow: go.TextBlock.OverflowEllipsis,
maxLines: 1,
width: 20,
// background: "lightblue",
textAlign: "center",
},
new go.Binding("text", "abbreviation")
)
),
$(
go.TextBlock,
"PLACEHOLDER",
{
width: 220,
margin: 5,
font: "bold 9pt Inter, sans-serif",
stroke: "#344C5A",
},
new go.Binding("text", "techObjPlaceholderName", (t) =>
t.toUpperCase()
)
)
),
$(
go.Panel,
"Auto",
{ alignment: new go.Spot(0.5, 0.7) },
//this is unassigned object panel
$(
go.Panel,
"Horizontal",
{ opacity: 1 },
$(go.Shape, "roundedrectangle", {
width: 45,
height: 45,
margin: 5,
fill: "white",
strokeWidth: 1,
stroke: "grey ",
}),
$(go.TextBlock, "Unassigned object", {
width: 205,
margin: 5,
font: "bold 14pt Inter, sans-serif",
opacity: 0.4,
})
),
$(
go.Panel,
"Horizontal",
{ opacity: 0 },
//this panel is for product icon
$(
go.Panel,
"Spot",
{ isClipping: true },
$(go.Shape, "roundedrectangle", {
width: 45,
height: 45,
margin: 5,
fill: "white",
strokeWidth: 1,
stroke: "grey ",
}),
$(go.Picture, {
source: "./assets/img/NEC.svg",
width: 45,
height: 45,
})
),
$(
go.Panel,
// "Auto",
{ height: 50 },
$(
go.Panel,
{},
$(go.TextBlock, "placeholder", {
margin: new go.Margin(5, 0, 0, 10),
width: 205,
font: "bold 13pt Inter, sans-serif",
// background: "blue",
})
),
$(
go.Panel,
{},
$(go.TextBlock, "placeholder", {
margin: new go.Margin(30, 0, 0, 10),
width: 205,
font: " 11pt Inter, sans-serif",
// background: "green",
stroke: "#4C606C",
})
)
)
)
)
)
);
here are couple of images which i want to achieve