Browse docs

OverviewInstallationCanvasAll ComponentsFilesPDFCADAnnotationMeasurementPlacementAPI Key ManagementSymbol ManagementCollaborationCompareBatch ExportNavigationAll CapabilitiesStyles
Message API/docs/components/cad/layers

Layers

Request layer snapshots and update CAD layer visibility from the host.

Overview

Layer workflows let the host inspect the current CAD layer list and control visibility using the identifiers returned by the viewer.

This is the right entry point when your UI needs discipline filters, drawing legend controls, or quick hide/show operations for named layer groups.

  • Request current layer state with `getLayers`.
  • Listen for `layersSnapshot` and render the returned collection.
  • Send `setLayerVisibility` with one or more selectors to update visibility.

Quick Examples

Start by requesting the current snapshot, then use the returned indexes, ids, or names when updating visibility.

Request layers

parent.postMessage({
  type: 'getLayers',
  payload: { requestId: 'layers-1' }
}, '*');

Listen for layersSnapshot

window.addEventListener('message', (event) => {
  if (event.data?.type !== 'layersSnapshot') return;

  const payload = event.data.payload;
  renderLayerPanel(payload.layers);
});

Hide by layer name

parent.postMessage({
  type: 'setLayerVisibility',
  payload: {
    requestId: 'layers-hide-1',
    names: ['A-WALL', 'A-DOOR'],
    visible: false
  }
}, '*');

Show all layers

parent.postMessage({
  type: 'setLayerVisibility',
  payload: {
    requestId: 'layers-show-all',
    all: true,
    visible: true
  }
}, '*');

Control flow

The host owns the panel state, but the viewer remains the source of truth for the live layer list.

Host Sends

1. Host requests layers

Call `getLayers` when the CAD panel opens or when the active file changes.

javascript
viewerWindow.postMessage({
  type: 'getLayers',
  payload: { requestId: 'layers-open' }
}, '*');
Canvas Emits

2. Viewer returns layersSnapshot

The viewer responds with a normalized list of layers, including names, ids, visibility, and kind.

javascript
window.addEventListener('message', (event) => {
  if (event.data?.type !== 'layersSnapshot') return;

  console.log(event.data.payload.layers);
});
Host Sends

3. Host posts visibility updates

Use the snapshot fields to target the exact layer or collection that should be hidden or shown.

javascript
viewerWindow.postMessage({
  type: 'setLayerVisibility',
  payload: { requestId: 'layer-toggle', index: 3, visible: false }
}, '*');

Complete Implementation

This pattern is enough to build a simple layer panel with host-side rendering and viewer-side state.

let layers = [];

window.addEventListener('message', (event) => {
  const data = event.data;
  if (data?.type !== 'layersSnapshot') return;

  layers = data.payload.layers;
  renderLayers(layers);
});

function loadLayers() {
  viewerWindow.postMessage({
    type: 'getLayers',
    payload: { requestId: 'layers-init' }
  }, '*');
}

function toggleLayer(index, visible) {
  viewerWindow.postMessage({
    type: 'setLayerVisibility',
    payload: { requestId: 'layer-' + index, index, visible }
  }, '*');
}
Complete Implementation

Additional Resources

Use the related pages below when you need the matching block workflow or the full payload reference.