GOJS diagram - change background color with undo-redo capability

GoJS
1

My application has a GOJS diagram. Its background color need to be changed with undo-redo capability. How this can be done in javascript/angularJS?
I have tried using the grid.areaBackground as below, then the color changes but undo-redo is not working.

code for diagram is as below:

var diagram = GO(go.Diagram, element[0], 
				      {
				    	  "commandHandler.zoomFactor": 1.2,
				    	  allowMove:false,
				    	  allowLink:false,
				    	  allowDelete:false,
						  allowZoom:false,
						  allowCopy: false,
						  isEnabled: true,
						  "grid.visible": true,
						  "grid.gridCellSize": new go.Size(100, 100),
						  "grid.background":"red",
						  "toolManager.mouseWheelBehavior": go.ToolManager.WheelScroll
				      });

and my code for applying color change:

diagram.grid.areaBackground = $scope.selectedMemoColor;

Is there any way to bind the diagram background color and apply color change with undo-redo functionality?

2

As described at GoJS Layers -- Northwoods Software, the “Grid” Layer is intentionally supposed to be ignored by the UndoManager.

But I’m concerned that there would be some undesired side-effects if you were to set Layer.isTemporary to false on the “Grid” Layer, so I do not recommend that.

Instead it might be easier if you overrode UndoManager.skipsEvent so as not to skip the ChangedEvent corresponding to your modification of that property. For example, in your load function (or wherever you are creating a new Model), you could do something like:

  function load() {
    myDiagram.model = go.Model.fromJson(. . .);

    myDiagram.model.undoManager.skipsEvent = function(e) {
      if (e && e.object === myDiagram.grid && e.change === go.ChangedEvent.Property && e.propertyName === "areaBackground") return false;
      return go.UndoManager.prototype.skipsEvent.call(this, e);
    };
  }

This is written in JavaScript – if you are writing in TypeScript you can do so more nicely.

3

Works perfectly. Thanks.
I have one more question, how can I hide the gridcell lines? They are shown in gray color in the diagram.

4

Wait – why are you showing the Diagram.grid unless you wanted to show those grid lines?

Or are you asking how to temporarily turn off the grid? Normally, that would be just to set myDiagram.grid.visible = false. But in your case that would also hide the background color that you implemented by setting the myDiagram.grid.background.

So you could set the Shape.stroke of each of the Shapes in the “Grid” Panel: If you are using the default grid, its implementation is provided as an example at GoJS Grid Patterns -- Northwoods Software. Something like:

myDiagram.grid.elements.each(function(s) { s.stroke = ???; })

where “???” is whatever background color you currently have.

5

I tried changing stroke color as you mentioned above,but then undo-redo is not working properly (for the grid lines).

I just need to change the diagram’s background color with undo/redo functionality only.
Is it possible to achieve this without using grid? Can you please provide an ideal solution.
Sorry for the trouble.

6

If you want, you could continue using the Diagram.grid, assuming you have no other visual use for it besides its background color. Just set each of the grid’s Shape elements to be not visible. Or just remove all of the Shapes from that “Grid” Panel.