Diagram Grid causes screen jittering when dragging around

GoJS
1

This does not happen with my code running gojs-angular 1 wrapper. It has started happening after the migration to gojs-angular 2.

If I have a process bigger than the diagram’s size, I zoom in and if drag around the diagram, it is not smooth at all and I get a lot of screen jittering.

If I drag around the diagram when not zooming (i.e my full process is visible in the diagram) then it seems fine.

This only occurs when the diagram grid is visible. If I turn it off, there is no issue…

In the code, I have the following :

 grid: $(go.Panel, 'Grid',
        $(go.Shape, 'LineH', { stroke: 'lightgray', strokeWidth: 0.5 }),
        $(go.Shape, 'LineH', { stroke: 'gray', strokeWidth: 0.5, interval: 10 }),
        $(go.Shape, 'LineV', { stroke: 'lightgray', strokeWidth: 0.5 }),
        $(go.Shape, 'LineV', { stroke: 'gray', strokeWidth: 0.5, interval: 10 })
      ),

and this is where I check if the grid should be visible. I was thinking that this may be the issue, but again this works just fine with the previous version of gojs-angular

  public ngDoCheck(): void {
    if (this.myDiagramComponent && this.myDiagramComponent.diagram instanceof go.Diagram) {
      this.myDiagramComponent.diagram.grid.visible = this.showGrid;
    }
  }
2

I’m not real familiar with Angular, but is your this.showGrid property an @Input?

3

no it’s not an Input. Just a public property in my designer component which is set to true or false when clicking on a button. Since the property is et in ngDoCheck, whenever the button is clicked and the property changes, digram.grid.visible gets updated.
I don’t think the problem comes from setting the value though. The jittering only occurs when moving around the diagram while dragging the grid.

4

It is odd, but this issue only occurs when my laptop is plugged to my external monitor with dual screen activated.
If I view the diagram on my laptop with no external monitor, the jittering does not occur.

I have a high-spec laptop but with a low-range graphics card. This is weird though because I can run games or run high-demanding programs like photoshop with dual screen activated. I can’t imagine a diagram with a bunch of nodes is that demanding :p

And again, without the grid turned on,it works fine. Maybe you want to check if something is wrong with the rendering.

I will mark this as resolved for now because I don’t need dual screen in production.