in my diagram view need to re-order or re-arrange and save in 3 pages and each page will have nodes in 4 Rows and 4 Columns… like custom arrangement and user needs to drag and swap the position of 4x4 nodes as per his wish in horizontal or vertical or diagonal and need to save it with changed positions and upon callback should retrieve the same.
public initDiagram(): go.Diagram {
const $ = go.GraphObject.make;
let dia = $(go.Diagram, {
"undoManager.isEnabled": false,
"animationManager.isEnabled": true,
// "allowDragOut": false,
// "allowMove": false,
// "allowDrop": false,
"allowVerticalScroll": false,
"allowHorizontalScroll": false,
"allowDelete": false,
"allowCopy": false,
"allowClipboard": false,
"allowGroup": false,
"allowInsert": false,
model: new go.GraphLinksModel(
{
nodeKeyProperty: 'key',
linkKeyProperty: 'key' // IMPORTANT! must be defined for merges and data sync when using GraphLinksModel
}
),
layout: $(go.GridLayout,
{
spacing: new go.Size(20, 20), // Adjust spacing as needed
wrappingColumn: 4,
sorting: go.GridLayout.Ascending,
isRealtime: false,
comparer: (pa, pb) => {
var da = pa.data;
var db = pb.data;
if (da.key < db.key) return -1;
if (da.key > db.key) return 1;
return 0;
}
}),
contentAlignment: go.Spot.TopLeft, // Align the entire diagram content to the top left
});
dia.commandHandler.archetypeGroupData = { key: "Group", isGroup: true };
// dia.toolManager.dragSelectingTool.isEnabled = false;
dia.nodeTemplate = $(
go.Node,
"Vertical",
{
resizable: false,
resizeObjectName: "SHAPE",
},
new go.Binding("text", "name"), //for sorting
$(
go.Picture, // flag image, only visible if a nation is specified
{ visible: false, desiredSize: new go.Size(50, 50), margin: 10 },
new go.Binding("source", "callTypeDialCode", imgTypeConverter),
new go.Binding("visible", "callTypeDialCode", (nat) => nat !== undefined),
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)
),
$(
go.TextBlock,
{
alignment: go.Spot.Bottom,
alignmentFocus: go.Spot.BottomCenter,
// margin: 2,
maxSize: new go.Size(160, NaN),
stroke: "white",
},
new go.Binding("text", "name"),
new go.Binding("stroke", "isHighlighted", h => h ? "darkcyan" : "#ffffff").ofObject(),
new go.Binding("Border.stroke", "isHighlighted", h => h ? "#5b5b5b" : "#ffffff").ofObject(),
new go.Binding("font", "isHighlighted", h => h ? "bold 14pt sans-serif" : "12pt sans-serif").ofObject(),
),
{
toolTip: $(
"ToolTip",
{ "Border.stroke": "#5b5b5b", "Border.strokeWidth": 2 },
$(
go.TextBlock,
{ margin: 8, stroke: "#5b5b5b", font: "bold 16px sans-serif" },
new go.Binding("text", "name"),
)
),
},
); //END of NODE Template
return dia;
};
And there is no grouping or category like in swim lanes or kanban sample… And am not sure which function is exactly doing this re-ordering in any of the samples in both directions… and only able see the change of node in one direction only… How should I proceed or use or change which function using the above mentioned samples to meet my requirement… Request your guidance or any sample references…