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.
Every Diagram starts off with several standard layers. These are their Layer.names, in order from furthest behind to most in front:
The Layers "ViewportBackground" and "ViewportForeground" are for adding Parts that do not move with the Diagram scale or position, because they are aligned to the viewport, so such Parts stay fixed to a specific point in the viewport. See the Legends intro page for more discussion.
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", "Tool", and "Viewport..." Layers are automatically ignored by the UndoManager, because Layer.isTemporary is true. Those Parts are also not selectable.
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:
const forelayer = diagram.findLayer("Foreground");
diagram.addLayerBefore(new go.Layer({ name: "blue" }), forelayer);
diagram.addLayerBefore(new go.Layer({ name: "green" }), forelayer);
diagram.addLayerBefore(new go.Layer({ name: "orange" }), forelayer);
diagram.nodeTemplate = // no links or grouping, so can use the simpler Part class
new go.Part("Spot", {
selectionChanged: p => {
p.layerName = (p.isSelected ? "Foreground" : p.data.color);
},
layerChanged: (p, oldLayer, newLayer) => {
if (newLayer !== null) p.elt(1).text = newLayer.name;
}
})
.bind("layerName", "color")
.bind("location", "loc")
.add(
new go.Shape({ width: 80, height: 80 })
.bind("fill", "color"),
new go.TextBlock({ stroke: "white", font: "bold 12px sans-serif" })
);
const array = [];
for (let i = 0; i < 12; i++) {
const data = { loc: new go.Point(Math.random()*520, Math.random()*200) };
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 = (layername, e) => {
diagram.commit(d => {
const layer = d.findLayer(layername);
if (layer !== null) layer.visible = e.currentTarget.checked;
}, 'toggle ' + layername);
};
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) {
diagram.commit(d => {
const data = obj.part.data;
d.model.set(data, "zOrder", data.zOrder + amt);
}, 'modified zOrder');
}
diagram.nodeTemplate =
new go.Part("Spot")
.bind("layerName", "color")
.bind("location", "loc")
.bind("zOrder")
.add(
new go.Shape({
width: 100, height: 100,
stroke: 'rgb(50,50,50)', fill: 'rgb(50,100,255)'
}),
new go.TextBlock({ font: "52px sans-serif", stroke: 'whitesmoke' })
.bind("text", "zOrder"),
go.GraphObject.build("Button", {
alignment: go.Spot.BottomLeft, alignmentFocus: go.Spot.BottomLeft,
click: (e, obj) => changeZOrder(-1, obj)
})
.add(
new go.Shape("LineH", { width: 14, height: 14 })
),
go.GraphObject.build("Button", {
alignment: go.Spot.BottomRight, alignmentFocus: go.Spot.BottomRight,
click: (e, obj) => changeZOrder(1, obj)
})
.add(
new go.Shape("PlusLine", { width: 14, height: 14 })
)
);
const array = [];
for (let i = 0; i < 12; i++) {
const 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;