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

GoJS
1

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)
  )
);
2

Let’s just talk about the contents (body) of the Auto Panel that is the whole group. Right now it is a loose collection of a “CloseButton”, two ports, and a Vertical Panel containing a Horizontal Panel.

I suggest that the body be a single element, a Table Panel, holding all of your current non-Panel objects.

3

Hi Walter,

Based on your suggestion I have modified the code like this bay taking two horizontal pair.In one panel I have the test and other contains the sub group ex pander and close button . I want both of the panel should align in the same level without overlapping each other when the group is collapsed. But the two horizontal panel are not aligning properly and when the group is collapsed they are overlapping each other. Like the images below.


Code is like this

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)"
            }
    ), 
        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: currentFont, margin: new go.Margin(5, 3, 0, 5), alignment: go.Spot.Left, },
        new go.Binding("text", "text"))
    
     // this Panel acts as a Button
     ),
     this.diagram(go.Panel, "Horizontal",
    { margin: new go.Margin(-5, 0, 0, 0),alignment: go.Spot.TopRight },
    this.diagram("SubGraphExpanderButton"),
    this.diagram("CloseButton",               
                { click: this.deleteSegmentwithConfirm }))
     ,
     
    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)
  )
);
4

Due to the lack of proper indentation, I find it hard to read your code. But it appears as if you did not follow my suggestion to put those objects inside a “Table” Panel and assign each of those objects row and column values.

Group, "Auto"
    Shape, "RoundedRectangle"
    Panel, "Table"
        TextBlock
        "SubGraphExpanderButton"
        "CloseButton"
        Placeholder
        (port)
        (port)

And on each of the elements of the “Table” Panel you’ll set the GraphObject properties row, column, and if desired rowSpan, columnSpan, alignment, and maybe other properties.

5

Hi Walter,

Now I have tried this with a table panel and with an extra vertical panel because without this vertical panel the port are not working , so I have to take the vertical panel. Now the problem is that the two buttons are coming just after the text block but I want those two buttons to come at the right corner. I have tried to set TopRight alignment for the buttons but still it is not working. What else I have to do to right align them .The picture of the diagram is like this.

and code is

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)"
                }
        ), 
            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, "Table",  // the header
          { defaultAlignment: go.Spot.Top },
          this.diagram(go.TextBlock, "row 0\ncol 0",    // group title near top, next to button
            {row: 0, column: 0, font: currentFont, margin: new go.Margin(3, 3, 5, 5), alignment: go.Spot.Left, },
            new go.Binding("text", "text")),
            this.diagram("SubGraphExpanderButton", { row: 0, column: 1, alignment: go.Spot.TopRight }),
            this.diagram("CloseButton", { row: 0, column: 2, alignment: go.Spot.TopRight },
                    { click: this.deleteSegmentwithConfirm })
        
         // 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)
      )
    );
6

If the only objects you put into the Table Panel are the TextBlock, the SubGraphExpanderButton, and the CloseButton, then that is exactly what you asked for.

7

I want the subgraph and close button to be align at the top right corner.

8

Then assign them to the rows and columns that you want.
http://gojs.net/latest/intro/tablePanels.html

9

I have assigned them in column 1 and cloumn 2 but they are coming just after column 0 . What I want is that column 1 and column 2 will come at the top right corner. I cannot use margin as different group width is different.

10

What do you have so far? Could you annotate this outline with the row, column, rowSpan, columnSpan, alignment, and margin values for each Table Panel element?

Group, "Auto"
  Shape, "RoundedRectangle"
  Panel, "Table"
    TextBlock
    "SubGraphExpanderButton"
    "CloseButton"
    Placeholder
    (port)
    (port)

And show the result and explain exactly what needs to be different and how.

If you want to put the ports in a Spot Panel whose main element is the Auto Panel, that’s OK.

Group, "Spot"
  Panel, "Auto"
    Shape, "RoundedRectangle"
    Panel, "Table"
      TextBlock
      "SubGraphExpanderButton"
      "CloseButton"
      Placeholder
  (port)
  (port)

Don’t quote any code unless it is properly indented. But in this case it is better not to quote any code at all, but just to work with the essential properties of the Table Panel elements.