GridLayout hiding and showing of nodes

Hi

We are using the gridlayout to arrange some nodes in a tile kind of layout

When clicking on the top diagram, we want to show only the relevant icon, I’ve managed to do this by setting the visibility on the node, but is there a way I can get it to maybe animate and move to the top left?

Second question and not such a big deal, if I can’t but is there a way to allow me to drag these nodes and have them snap in place and move the other nodes away, I can enable dragging but they just drag over each other.

What code do you execute when the user clicks on a node in the upper diagram? Do you perform a transaction on the lower diagram that sets the visible property on each Node? If so, have you set that lower Diagram’s Diagram.contentAlignment property to go.Spot.TopLeft?

Hi Walter

I am. I’ve added the contentAlignment but it is still the same, am I doing it right?

function showOnlySelectedFunction(functionNames) {
diagramDist.startTransaction(“start updating”);
functionNodes.forEach(function (fn) {
var n = diagramDist.findNodeForData(fn);
diagramDist.model.setDataProperty(n.data, “visible”, (functionNames.indexOf(fn.functionname) >= 0));
});
diagramDist.contentAlignment = go.Spot.TopLeft;
diagramDist.commitTransaction(“end updating”);
diagramDist.currentTool.stopTool();
}

Maybe.

Here’s a sample that does what I think you are asking for:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
  <script src="go.js"></script>
  <script>
    function init() {
      var $ = go.GraphObject.make;

      // initialize main Diagram
      myDiagram =
        $(go.Diagram, "myDiagramDiv",
          {
            contentAlignment: go.Spot.TopLeft,
            layout: $(go.GridLayout)
          });

      myDiagram.nodeTemplate =
        $(go.Node, "Auto",
          $(go.Shape,
            { fill: "white", stroke: "gray", strokeWidth: 2 },
            new go.Binding("stroke", "color")),
          $(go.TextBlock,
            {
              margin: new go.Margin(5, 5, 3, 5), font: "10pt sans-serif",
              minSize: new go.Size(16, 16), maxSize: new go.Size(120, NaN)
            },
            new go.Binding("text")),
          {
            click: function(e, node) {
              if (e.diagram instanceof go.Palette) {
                var color = node.data.color;
                myDiagram.commit(function(diag) {
                  diag.nodes.each(function(n) { n.visible = (n.data.color === color); })
                });
              }
            }
          }
        );

      // initialize Palette
      myPalette =
        $(go.Palette, "myPaletteDiv",
          {
            nodeTemplateMap: myDiagram.nodeTemplateMap,
            model: new go.GraphLinksModel([
              { text: "red node", color: "red" },
              { text: "green node", color: "green" },
              { text: "blue node", color: "blue" },
              { text: "orange node", color: "orange" }
            ]),
            click: function(e) {
              myDiagram.commit(function(diag) {
                diag.nodes.each(function(n) { n.visible = true; })
              });
            }
          });

      // initialize Overview
      myOverview =
        $(go.Overview, "myOverviewDiv",
          {
            observed: myDiagram,
            contentAlignment: go.Spot.Center
          });

      load();
    }

    // save a model to and load a model from Json text, displayed below the Diagram
    function save() {
      var str = myDiagram.model.toJson();
      document.getElementById("mySavedModel").value = str;
    }
    function load() {
      var str = document.getElementById("mySavedModel").value;
      myDiagram.model = go.Model.fromJson(str);
    }
  </script>
</head>
<body onload="init()">
  <div style="width: 100%; display: flex; justify-content: space-between">
    <div style="display: flex; flex-direction: column; margin: 0 2px 0 0">
      <div id="myPaletteDiv" style="flex-grow: 1; width: 100px; background-color: floralwhite; border: solid 1px black"></div>
      <div id="myOverviewDiv" style="margin: 2px 0 0 0; width: 100px; height: 100px; background-color: whitesmoke; border: solid 1px black"></div>
    </div>
    <div id="myDiagramDiv" style="flex-grow: 1; height: 400px; border: solid 1px black"></div>
  </div>
  <div id="buttons">
    <button id="loadModel" onclick="load()">Load</button>
    <button id="saveModel" onclick="save()">Save</button>
  </div>
  <textarea id="mySavedModel" style="width:100%;height:200px">
{ "class": "go.GraphLinksModel",
  "nodeDataArray": [
{"key":1, "text":"hello", "color":"green"},
{"key":2, "text":"world", "color":"red"},
{"key":3, "text":"how", "color":"blue"},
{"key":4, "text":"are", "color":"orange"},
{"key":5, "text":"you", "color":"green"},
{"key":6, "text":"today", "color":"red"}
        ]}
  </textarea>
</body>
</html>

Hi Walter

Ok the issue seems to be that I’m just setting the visibility on the node. So the diagram still sees the node as being ‘there’ if I remove the nodes the the alignment works. Is there another way of ‘hiding’ the nodes instead of deleting them of the diagram?

Most layouts automatically ignore non-visible parts. That’s what my sample is depending on, for example.

What is your Diagram.layout?