Gojs Swap Even row node position

GoJS
1

`const $ = go.GraphObject.make;

const myDiagram = $(go.Diagram, “myDiagramDiv”, {
layout: $(go.GridLayout),
“undoManager.isEnabled”: true,
});

myDiagram.nodeTemplate = $(
go.Node,
“Auto”,
$(go.Shape, “RoundedRectangle”, { fill: “lightblue” }),
$(go.TextBlock, { margin: 5 }, new go.Binding(“text”, “key”))
);

myDiagram.groupTemplate = $(
go.Group,
“Auto”,
{
layout: $(go.GridLayout, {
wrappingColumn: 2,
cellSize: new go.Size(150, 100),
}),
background: “lightyellow”,
},
$(go.Panel, “Vertical”,
$(go.TextBlock, { font: “bold 14px sans-serif”, margin: 5 }, new go.Binding(“text”, “key”)),
$(go.Placeholder, { padding: 10 })
)
);

myDiagram.linkTemplate = $(
go.Link,
{ routing: go.Link.Orthogonal, corner: 10 },
$(go.Shape, { strokeWidth: 2, stroke: “gray” }),
$(go.Shape, { toArrow: “Standard”, stroke: “gray”, fill: “gray” })
);

myDiagram.model = new go.GraphLinksModel(
[
{ key: “Group1”, isGroup: true },

{ key: "1", group: "Group1" },
{ key: "2", group: "Group1" },
{ key: "3", group: "Group1" },
{ key: "4", group: "Group1" },
{ key: "5", group: "Group1" },
{ key: "6", group: "Group1" },
{ key: "7", group: "Group1" },
{ key: "8", group: "Group1" },
{ key: "9", group: "Group1" },
{ key: "10", group: "Group1" },

],
[
{ from: “1”, to: “2” },
{ from: “2”, to: “3” },
{ from: “3”, to: “4” },
{ from: “4”, to: “5” },
{ from: “5”, to: “6” },
{ from: “6”, to: “7” },
{ from: “7”, to: “8” },
{ from: “8”, to: “9” },
{ from: “9”, to: “10” },
]
);
`

By using this code this output generated

image
image848×695 14.6 KB

But I want that as like that

image
image839×679 13.4 KB

Means I want to swap nodes in even row like shown in attached images
And handle this I want dynamic my data come as like that as provided in code But want to generate output as like this attached in second image

2

Use the SerpentineLayout extension:
Serpentine Layout for Chains of Nodes | GoJS Diagramming Library
SerpentineLayout | GoJS API
Set SerpentineLayout.spacing and SerpentineLayout.wrap to values that gets you two nodes per row.

3

Can you please do that not to change layout , in my layout only you can do some changes in given code , reason that if I am using serpentile layout then my diagram is not coming proper and please make one function if possible that without changing layout I am using that given function and my code works

4

How does the SerpentineLayout not do what you asked for? Please explain what you want with more objective detail.

5

image

Here in attached image like visible that node always get center position and when add new node then also complete diagram links is visible like shuffled

image
image613×578 18.8 KB

And here as when new node added then randomly link positioning


layout: $(SerpentineLayout),



class SerpentineLayout extends go.Layout {
    spacing: go.Size;
    wrap: number;
    aspectRatio: number;

    constructor() {
        super();
        this.spacing = new go.Size(20, 20); // Default spacing between nodes
        this.wrap = 2; // Number of nodes before wrapping
        this.aspectRatio = 2; // Aspect ratio of the layout
    }

    doLayout(coll) {
        const diagram = this.diagram;
        if (diagram === null) return;

        const parts = this.collectParts(coll); // Gather all parts
        if (parts.count === 0) return;

        const nodes: any = new go.List<any>().addAll(parts.filter((p) => p instanceof go.Node));
        if (nodes.count === 0) return;

        const spacing = this.spacing;
        const wrap = this.wrap;

        let x = 0;
        let y = 0;
        let rowHeight = 0;
        let currentCount = 0;
        let direction = 1; // 1 for left-to-right, -1 for right-to-left

        nodes.each((node) => {
            const bounds = node.actualBounds;

            // Position the node
            node.move(new go.Point(x, y));

            // Track rowHeight and adjust x-coordinate for the next node
            rowHeight = Math.max(rowHeight, bounds.height);
            x += (bounds.width + spacing.width) * direction;

            currentCount++;

            // Wrap to the next row when the wrap count is reached
            if (currentCount >= wrap) {
                currentCount = 0; // Reset count for new row
                x = 0; // Reset x for the new row
                y += rowHeight + spacing.height; // Move down by row height plus spacing
                rowHeight = 0; // Reset row height
                direction = -direction; // Reverse direction for serpentine effect
            }
        });
    }
}
6

I’m sorry, but from your description I am unable to determine what the layout should do. Are you trying to line up certain nodes in a vertical column? How are nodes connected between such nodes supposed to be positioned off to the side? How are the links to be routed?

Basically I still have no idea of what rules you want.

Could you use TableLayout and assign row and column to each node?