How to dynamically change colour of grid

GoJS
1

Hi,

We are trying to change the colour of the grid lines/background dynamically to allow live theme switching in our app. We are able to do this to nodes quite easily through bindings. However, the bindings don’t seem to work on the grid properties (unassuming because the data to bind to is in the node model data and is not available to the grid template).

Is there a way to use bindings in the grid template or do I have to update it by recreating/redrawing the grid in the diagram?

Thanks in advance

2

That is correct – the Diagram.grid is in an unmodeled Part and thus does not support data binding. But you could just set the Shape.stroke of the shape(s) in the Diagram.grid.

3

We do that initially by setting:

$(Shape, 'LineH', { stroke: '#000000', strokeWidth: 0.5 }),

within the grid template but I can’t see the stroke property when accessing the diagram.grid object (I’m using TypeScript and don’t get the type hinting). I also cant see a method to get a list of shapes in the grid to be able to set their stroke values either

4

Give each shape you want to modify a unique GraphObject.name. Then you can call Panel.findObject on the Diagram.grid.

5

I tried it with the findObject which worked using (all snippets are using TypeScript if it helps anyone else doing something similar):

  const minorHorizontal: GraphObject | null = this.diagram.grid.findObject('minorH');

  if (minorHorizontal) {
    (minorHorizontal as Shape).stroke = '#123456';
  }

, we do however have 7 different shapes so I simplified it a bit for our use by looping through the elements like so:

` this.diagram.grid.elements.each((element: GraphObject) => {
    if (element.name.startsWith('major')) {
      (element as Shape).stroke = '#123456';
    } else if (element.name.startsWith('minor')) {
      (element as Shape).stroke = '#234567';
    } else if (element.name.startsWith('snap')) {
      (element as Shape).stroke = '#345678';
    }
  });`

we have a major, a minor, and snap grid lines which all have separate colors so its quite a few items to set.

Thanks for the help