Gojs grid lag problem

GoJS
1

Can you try the code below locally?

When you move the grid, you will encounter freezing problem. What is the reason of this

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Basic GoJS Sample</title>
  <meta name="description" content="Interactive GoJS diagram demonstrating creating new nodes and links, reconnecting links, grouping and ungrouping, and context menus and tooltips for nodes, for links, and for the diagram background." />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Copyright 1998-2020 by Northwoods Software Corporation. -->

  <script src="go.js"></script>
  <script id="code">
    function init() {
      if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this

      var $ = go.GraphObject.make;  // for conciseness in defining templates

      myDiagram =
        $(go.Diagram, "myDiagramDiv");
		  
		  myDiagram.grid = $(go.Panel, "Grid",
                {
                    gridCellSize: new go.Size(8, 8)
                },
                $(go.Shape, "LineH", { stroke: "#eaeaea", strokeDashArray: [1, 1], strokeDashOffset:0.5 }),
                $(go.Shape, "LineV", { stroke: "#eaeaea", strokeDashArray: [1, 1], strokeDashOffset:0.5 }),
                $(go.Shape, "LineH", { stroke: "#d7e8fa", interval: 4, strokeDashArray: [1, 1], strokeDashOffset:0.5 }),
                $(go.Shape, "LineV", { stroke: "#d7e8fa", interval: 4, strokeDashArray: [1, 1], strokeDashOffset:0.5 })
            );

      myDiagram.nodeTemplate =
        $(go.Node, "Auto",
          { locationSpot: go.Spot.Center },
          $(go.Shape, "RoundedRectangle",
            {
              fill: "white", // the default fill, if there is no data bound value
              portId: "", cursor: "pointer",  // the Shape is the port, not the whole Node
              // allow all kinds of links from and to this port
              fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
              toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
            },
            new go.Binding("fill", "color")),
          $(go.TextBlock,
            {
              font: "bold 14px sans-serif",
              stroke: '#333',
              margin: 6,  // make some extra space for the shape around the text
              isMultiline: false,  // don't allow newlines in text
              editable: true  // allow in-place editing by user
            },
            new go.Binding("text", "text").makeTwoWay())
        );

      myDiagram.linkTemplate =
        $(go.Link,
          { toShortLength: 3, relinkableFrom: true, relinkableTo: true },  // allow the user to relink existing links
          $(go.Shape,
            { strokeWidth: 2 },
            new go.Binding("stroke", "color")),
          $(go.Shape,
            { toArrow: "Standard", stroke: null },
            new go.Binding("fill", "color"))
        );

      myDiagram.groupTemplate =
        $(go.Group, "Vertical",
          {
            selectionObjectName: "PANEL",  // selection handle goes around shape, not label
            ungroupable: true  // enable Ctrl-Shift-G to ungroup a selected Group
          },
          $(go.TextBlock,
            {
              //alignment: go.Spot.Right,
              font: "bold 19px sans-serif",
              isMultiline: false,  // don't allow newlines in text
              editable: true  // allow in-place editing by user
            },
            new go.Binding("text", "text").makeTwoWay(),
            new go.Binding("stroke", "color")),
          $(go.Panel, "Auto",
            { name: "PANEL" },
            $(go.Shape, "Rectangle",  // the rectangular shape around the members
              {
                fill: "rgba(128,128,128,0.2)", stroke: "gray", strokeWidth: 3,
                portId: "", cursor: "pointer",  // the Shape is the port, not the whole Node
                // allow all kinds of links from and to this port
                fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
                toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
              }),
            $(go.Placeholder, { margin: 10, background: "transparent" })  // represents where the members are
          )
        );

      var nodeDataArray = [
        { key: 1, text: "Alpha", color: "lightblue" },
        { key: 2, text: "Beta", color: "orange" },
        { key: 3, text: "Gamma", color: "lightgreen", group: 5 },
        { key: 4, text: "Delta", color: "pink", group: 5 },
        { key: 5, text: "Epsilon", color: "green", isGroup: true }
      ];
      var linkDataArray = [
        { from: 1, to: 2, color: "blue" },
        { from: 2, to: 2 },
        { from: 3, to: 4, color: "green" },
        { from: 3, to: 1, color: "purple" }
      ];
      myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
    }
  </script>
</head>
<body onload="init()">
<div id="sample">
  <div id="myDiagramDiv" style="border: solid 1px black; width:1800px; height:800px"></div>
</div>
</body>
</html>
2

I don’t see any freezing problem – I can pan around for a long time. What browser and platform are you on?

But I do see that drawing is slower than optimal. The DIV width is 1800px, so it’s a pretty big image. And I believe the grid is what is causing it to draw slower, as you can see by turning off the grid. Try this:

        $(go.Diagram, "myDiagramDiv",
          {
            grid: . . .,
            "panningTool.doActivate": function() {
              this.diagram.grid.visible = false;
              go.PanningTool.prototype.doActivate.call(this);
            },
            "panningTool.doDeactivate": function() {
              this.diagram.grid.visible = true;
              go.PanningTool.prototype.doDeactivate.call(this);
            },
            "draggingTool.doActivate": function() {
              this.diagram.grid.visible = false;
              go.DraggingTool.prototype.doActivate.call(this);
            },
            "draggingTool.doDeactivate": function() {
              this.diagram.grid.visible = true;
              go.DraggingTool.prototype.doDeactivate.call(this);
            }
          })