Hi,
we want to change the grid of a diagram dynamically baed on a gridSize.
The idea is to have the default grid, which can be changed in size via a slider option.
Additionally, we have a pagination grid that is a sub grid that indicates page sizes like A4, A3 etc.
The page size and page orientation are dynamically changeable.
I tried a lot of stuff but couldnt get a nice and clean implementation working.
Before we had a solution in which we set grid properties (like gridCellSize) directly.
Ideally, we want a data driven approach, like with all other templates we create.
I now found out that the grid does not support bindings in this topic: How to dynamically change colour of grid
This is really unfortunate. Is there any reason as to why it doesnt support bindings?
How would one ideally implement what we want?
I attach the grid template I have so far.
export function createGridTemplate(): go.Panel {
const $ = go.GraphObject.make;
return $(
go.Panel,
go.Panel.Grid,
{
// Use 1x1 base cell so that intervals represent exact pixel distances for the default and pagination grid respectively.
gridCellSize: new go.Size(1, 1),
data: { gridSize: 25, paginationV: 1, paginationH: 1 },
},
// Default grid lines
$(
go.Shape,
'LineH',
{
stroke: 'lightgrey',
strokeWidth: 0.5,
interval: 25,
name: 'DefaultGridH',
},
new go.Binding('interval', 'gridSize'),
),
$(
go.Shape,
'LineV',
{
stroke: 'lightgrey',
strokeWidth: 0.5,
interval: 25,
name: 'DefaultGridV',
},
new go.Binding('interval', 'gridSize', (v: number) => {
console.log(v);
return v;
}),
),
// Pagination grid lines
$(
go.Shape,
'LineH',
{
stroke: '#2d3842',
strokeDashArray: [2, 2],
strokeWidth: 0.5,
interval: 1,
name: 'PaginationGridH',
},
new go.Binding('interval', 'paginationH', (v: number) => {
console.log(v);
return v;
}),
),
$(
go.Shape,
'LineV',
{
stroke: '#2d3842',
strokeDashArray: [2, 2],
strokeWidth: 0.5,
name: 'PaginationGridV',
},
new go.Binding('interval', 'paginationV'),
),
);
}
Example screenshot.
Cheers.