I am trying to reduce the spacing between 2 panels
I am not sure how to do that, here is the code I use -
this.$( go.Group, "Vertical",
// @ts-ignore
{
selectionObjectName: "SHAPE", // selecting a lane causes the body of the lane to be highlit, not the label
resizable: false,
ungroupable: true,
canUngroup: true,
layout: this.$( go.GridLayout, // automatically lay out the lane's subgraph
{
wrappingColumn: 1,
cellSize: new go.Size( 1, 1 ),
spacing: new go.Size( 5, 5 ),
alignment: go.GridLayout.Position,
comparer: function ( a, b ) { // can re-order tasks within a lane
let ay = a.data.order;
let by = b.data.order;
if ( isNaN( ay ) || isNaN( by ) ) {
return 0;
}
if ( ay < by ) {
return -1;
}
if ( ay > by ) {
return 1;
}
return 0;
}
} ),
computesBoundsAfterDrag: true, // needed to prevent recomputing Group.placeholder bounds too soon
handlesDragDropForMembers: true, // don't need to define handlers on member Nodes and Links
mouseDragEnter: ( e, grp, prev ) => {
// @ts-ignore
if ( grp.canAddMembers( grp.diagram.selection ) ) {
this.highlightGroup( grp, true );
} else {
grp.diagram.currentCursor = "not-allowed";
}
},
mouseDragLeave: ( e, grp, next ) => {
this.highlightGroup( grp, false );
},
mouseDrop: ( e, grp ) => { // dropping a copy of some Nodes and Links onto this Group adds them to this Group
// don't allow drag-and-dropping a mix of regular Nodes and Groups
if ( e.diagram.selection.all( ( n ) => {
return !(n instanceof go.Group);
} ) ) {
// @ts-ignore
let ok = grp.addMembers( grp.diagram.selection, true );
if ( !ok ) {
grp.diagram.currentTool.doCancel();
}
}
}
},
new go.Binding( "location", "loc", go.Point.parse ).makeTwoWay( go.Point.stringify ),
// the lane header consisting of a TextBlock and an expander button
this.$( go.Panel, "Horizontal",
{
name: "HEADER",
angle: 0, // maybe rotate the header to read sideways going up
alignment: go.Spot.Left,
},
this.$( go.Panel, "Auto",
this.$( go.Shape, ShapeLibraryHelperService.nodeStyle( '#cfd0d3', null, 162, 4 ) ),
this.$( go.Panel, "Horizontal",
{ alignment: go.Spot.Left },
this.$( go.TextBlock, ShapeLibraryHelperService.textStyle( {
name: "Section Header",
editable: true,
margin: new go.Margin( 15, 10, 15, 10 ),
textValidation: true,
font: 'bold 12px Roboto'
} ),
new go.Binding( "text", "text" ).makeTwoWay() )
)
),
), // end Horizontal Panel
this.$( go.Panel, "Auto", // the lane consisting of a background Shape and a Placeholder representing the subgraph
this.$( go.Shape, "Rectangle", ShapeLibraryHelperService.nodeStyle( 'red', null, null, 4 ),
new go.Binding( "fill", "isHighlighted", function ( h ) {
return h ? "#D6D6D6" : "#F1F1F1";
} ).ofObject(),
new go.Binding( "desiredSize", "size", go.Size.parse ).makeTwoWay( go.Size.stringify ) ),
this.$( go.Placeholder,
{
padding: 12,
alignment: go.Spot.TopLeft
}
),
),
);
Thanks
Rory