I am using Group node in Gojs Diagram using panel table in the Format of Row And Column,
but in that case blue Color of node is not visible in Downloaded SVG as below.
Original Diagram:
SVG Downloaded Diagram :
GroupNode Code:
var groupTemplate =
$(go.Group, “Auto”,
{
layout: $(go.LayeredDigraphLayout,
{
direction: 90,
layerSpacing: 120,
columnSpacing: 40,
linkSpacing: 4,
setsPortSpots: false,
packOption: go.LayeredDigraphLayout.PackMedian, //change For Bug
}),
isSubGraphExpanded: false,
fromSpot: go.Spot.BottomSide,
toSpot: go.Spot.TopSide,
},
$(go.Shape, "RoundedRectangle",
{
fromSpot: go.Spot.BottomSide,
toSpot: go.Spot.TopSide,
stretch: go.GraphObject.Fill,
//alignment: go.Spot.Left,
alignment: go.Spot.Center,
fill: null
},
new go.Binding("stroke", "isHighlighted", h => h ? "#0047AB" : "#5A5A5A").ofObject(),
new go.Binding("strokeWidth", "isHighlighted", h => h ? 4.8 : 1.2).ofObject()
),
$(go.Panel, "Table",
{row: 0, margin: 0.5 }, // avoid overlapping border with table contents
$(go.RowColumnDefinition, {
row: 0,
background: "#3366ff",
}
),
$(go.RowColumnDefinition,
{
row: 1,
isRow: true,
minimum: 50,
}
),
//// header is white
$("SubGraphExpanderButton", {
row: 0, column: 0, margin: 3,
}),
$(go.TextBlock, // title is centered in header
{
row: 0, column: 1, font: "bold 14px Sans-Serif",
textAlign: "right", stretch: go.GraphObject.Horizontal,
editable: true,
name: 'myTextBlock',
},
new go.Binding("text", "text"),
new go.Binding("text","name"),
),
$(go.Placeholder, // becomes zero-sized when Group.isSubGraphExpanded is false
{
row: 1, columnSpan: 2, padding: 100,
minSize: new go.Size(300, NaN),
stretch: go.GraphObject.Horizontal,
},
new go.Binding("padding", "isSubGraphExpanded",
exp => exp ? 100 : 0).ofObject())
//new go.Binding("visible", "isSubGraphExpanded").ofObject()
),
{
selectionAdornmentTemplate:
$(go.Adornment, "Auto",
$(go.Shape, "RoundedRectangle",
{
fill: null,
stroke: "#0047AB",
strokeWidth: 6
}),
$(go.Placeholder)
) // end Adornment
}
);