Layers and Z-ordering

All Parts that are in a Diagram actually belong to a Layer in the diagram. You can control the visibility, Z-order, and various user permissions for all of the parts in each layer.

Parts can be individually modified to toggle their visibility using Part.visible or Part.opacity. Parts can be individually Z-ordered within layers using Part.zOrder.

Standard Layers

Every Diagram starts off with several standard layers. These are their Layer.names, in order from furthest behind to most in front:

Each Part is placed in a Layer according to its Part.layerName. The default value is the empty string. Use Diagram.findLayer to find a Layer given a layer name. Change which layer a part is in by setting Part.layerName.

Changes to Parts in the "Grid", "Adornment", and "Tool" Layers are automatically ignored by the UndoManager, because Layer.isTemporary is true.

Parts in the "Grid" Layer are not selectable, because Layer.allowSelect is false. This prevents the user from selecting the background grid when it is visible.

Layers Example

This example adds several Layers to the diagram, each named by a color, and then creates a bunch of colored parts at random locations. Every Part.layerName is data-bound to the "color" property of the node data.

In addition there are checkboxes for each layer, controlling the visibility of the respective layer. You can see how all of the parts of the same color appear and disappear according to the value of the checkbox. Furthermore you can see how they all have the same depth in the Z-ordering.

Finally, each Part has a Part.selectionChanged function which puts the part in the "Foreground" layer when it is selected and back in its normal color layer when it is not selected. 

  // These new layers come in front of the standard regular layers,
  // but behind the "Foreground" layer:
  var forelayer = diagram.findLayer("Foreground");
  diagram.addLayerBefore($(go.Layer, { name: "blue" }), forelayer);
  diagram.addLayerBefore($(go.Layer, { name: "green" }), forelayer);
  diagram.addLayerBefore($(go.Layer, { name: "orange" }), forelayer);

  diagram.nodeTemplate =
    $(go.Part,  // no links or grouping, so can use the simpler Part class
      new go.Binding("layerName", "color"),
      new go.Binding("location", "loc"),
      $(go.Shape,
        { width: 100, height: 100 },
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        new go.Binding("text", "", function(x) { return x.layer.name; })
            .ofObject()),
      {
        selectionChanged: function(p) {
          if (p.isSelected) p.layerName = "Foreground";
          else p.layerName = p.data.color;
        }
      }
    );

  var array = [];
  for (var i = 0; i < 12; i++) {
    var data = { loc: new go.Point(Math.random()*500, Math.random()*150) };
    switch (Math.floor(Math.random()*3)) {
      case 0: data.color = "blue"; break;
      case 1: data.color = "green"; break;
      case 2: data.color = "orange"; break;
      default: data.color = "Foreground"; break;
    }
    array.push(data);
  }
  diagram.model.nodeDataArray = array;
  diagram.undoManager.isEnabled = true;

  // define this function so that the checkbox event handlers can call it
  toggleVisible = function(layername, e) {
    diagram.startTransaction('toggle ' + layername);
    var layer = diagram.findLayer(layername);
    if (layer !== null) layer.visible = e.currentTarget.checked;
    diagram.commitTransaction('toggle ' + layername);
  };
Layer visibility:
blue green orange Foreground

ZOrder Example

This example adds several Parts to one Layer (the default) in the diagram. Every Part.zOrder is data-bound to the "zOrder" property of the node data, as is its text.

Buttons on the Part can be used to modify the z-order of each. 

  function changeZOrder(amt, obj) {
    var data = obj.part.data;
    diagram.startTransaction('modified zOrder');
    diagram.model.setDataProperty(data, "zOrder", data.zOrder + amt);
    diagram.commitTransaction('modified zOrder');
  }

  diagram.nodeTemplate =
    $(go.Part,  "Spot",
      new go.Binding("layerName", "color"),
      new go.Binding("location", "loc"),
      new go.Binding("zOrder"),
      $(go.Shape,
        { width: 100, height: 100, stroke: 'rgb(50,50,50)', fill: 'rgb(50,100,255)' }),
      $(go.TextBlock,
        { font: "52px sans-serif", stroke: 'whitesmoke' },
        new go.Binding("text", "zOrder")),
      $("Button",
        { alignment: go.Spot.BottomLeft, alignmentFocus: go.Spot.BottomLeft,
          click: function (e, obj) { changeZOrder(-1, obj); } },
        $(go.Shape, "LineH", { width: 14, height: 14 })),
      $("Button",
        { alignment: go.Spot.BottomRight, alignmentFocus: go.Spot.BottomRight,
          click: function (e, obj) { changeZOrder(1, obj); } },
        $(go.Shape, "PlusLine", { width: 14, height: 14 }))
    );

  var array = [];
  for (var i = 0; i < 12; i++) {
    var data = { loc: new go.Point(Math.random()*500, Math.random()*200) };
    data.zOrder = (Math.floor(Math.random()*20))
    array.push(data);
  }
  diagram.model.nodeDataArray = array;
  diagram.undoManager.isEnabled = true;