Nodes getting disarranged

GoJS
1

Hi,
I am having an group template with nodes as shown:

but when I am deleting the links between the nodes and submitting it as shown:

the nodes are getting disarranged as shown:

how to prevent it the code is as follows for the group template:

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("Button",
            {
                alignment: go.Spot.TopRight,
                "_buttonFillNormal": "#000000",
                "_buttonStrokeNormal": "#FFFFFF",
                "_buttonFillOver": "#000000",
                "_buttonStrokeOver": "#FFFFFF"
            },
            this.diagram(go.Shape, "XLine", { width: 5, height: 5, stroke: "#ff0000" }),
                { 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: "Bold 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

Yes, the Group.layout is a “layered” layout, so it thinks the unrelated nodes all belong in the same layer.

3

yes, what is the solution to this scenario

4

That depends on what you want to happen and when.

When do you want the layout to happen? You can control when the layout is invalidated by setting Layout.isOngoing to false and/or setting Layout.isInitial to false, or by setting other properties as discussed in GoJS Layouts -- Northwoods Software in the “Layout Invalidation” section.

5

when I am setting Layout.isInitial to false it is solving the issue but its affecting another part when I am dragging the group template it is not expanding into three nodes as it used to as shown in figure

It is only showing displaying the first node of the group as shown in figure

but then I tried setting the location of each node in the template of that group this solved the issue.The group was then expanding to three nodes but then when I am dragging the group it is not fallen on the location where I am dropping it. It is taking some arbitrary location.

6

Does your Group have a Placeholder in it? If so, then the locations of the member Nodes determine where the Group should be.

When you create the three member nodes, you should assign their locations so that they are where you want them to be when the group is expanded.

7

when I am setting the location of the individual nodes in the group then the problem I am facing is when I am dragging the nodes from the pallete they are not fallen on the location where I am dropping it.

8

Are you adding dropped Nodes to Groups in an “ExternalObjectsDropped” DiagramEvent listener?

If not, then the dropped Nodes remain as newly copied top-level Nodes, so the Diagram.layout is responsible for laying out the top-level nodes and links.