Skip to main content
  1. Index

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:

  • "Grid": holds the Diagram.grid and any other static Parts that you wish to be behind everything
  • "ViewportBackground": holds Parts aligned to the viewport rather than in the document
  • "Background": behind the default layer
  • "": the default layer
  • "Foreground": in front of the default layer
  • "ViewportForeground": holds Parts aligned to the viewport rather than in the document
  • "Adornment": holds Adornments for selection and various Tools
  • "Tool": holds Parts used in the execution of various Tools

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 and not the diagram, such Parts stay fixed to a specific point in the viewport. See the legends learn 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.

Layers example

This example adds several Layers to the diagram, each named by suit, and then creates a bunch of playing card nodes at random locations. Every Part.layerName is data-bound to the "suit" 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 cards of the same suit 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 card has a Part.selectionChanged function which puts the part in the "Foreground" layer when it is selected and back in its normal suit layer when it is not selected.

zOrder example

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

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