When subgraph expander button is collapsing it should not cover or hide the other button in group

@utpal wrote:

Hi,
In the group template have used both subgraph expander button and a close button.Buy when I am using subgraph button for collapsing the group its hiding the close button. I want that subgraph button should not do this. It should align before close button when group is collapsed.

Before Collapse

After Collapse

Group template code

this.graph.groupTemplate = this.diagram(go.Group, "Auto", nodeStyle,
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding("isSubGraphExpanded").makeTwoWay(),
{

       layout: this.diagram(go.LayeredDigraphLayout,
                 {
                     direction: 0, columnSpacing: 10,
                     isOngoing: false,

                 }),
       mouseDragEnter: function (e, grp, prev) { highlightGroup(e, grp, true); },
       mouseDragLeave: function (e, grp, next) { highlightGroup(e, grp, false); },
       computesBoundsAfterDrag: false,
       mouseDrop: finishDrop,
       handlesDragDropForMembers: false
   },
  this.diagram(go.Shape, "RoundedRectangle", // surrounds everything
   new go.Binding("background", "isHighlighted", function (h)
   { return h ? "rgba(255,0,0,0.2)" : "transparent"; }).ofObject(),
            {
                parameter1: 5,
                fill: "rgba(128,128,128,0.33)"
            }
    ), this.diagram("CloseButton",
                { click: this.deleteSegmentwithConfirm }),
        makePort(this, "T", go.Spot.Top, false, true),
    this.diagram(go.Panel, "Vertical",  // position header above the subgraph
        { defaultAlignment: go.Spot.TopLeft },
    this.diagram(go.Panel, "Horizontal",  // the header
      { defaultAlignment: go.Spot.Top },
      this.diagram(go.TextBlock,     // group title near top, next to button
        { font: "normal 12pt Sans-Serif", alignment: go.Spot.Left, },
        new go.Binding("text", "text")),
      this.diagram("SubGraphExpanderButton", { margin: new go.Margin(3, 3, 5, 5), alignment: go.Spot.Right })  // this Panel acts as a Button
     ),
    this.diagram(go.Placeholder,     // represents area for all member parts
      { padding: new go.Margin(0, 10), background: "transparent" }),
     makePort(this, "B", go.Spot.Bottom, true, false)
  )
);

Posts: 2

Participants: 2

Read full topic