Rasterex API/docs/components/cad/layers

Layers

Request CAD and PDF layer snapshots, inspect layer details, and update layer visibility from the host.

Overview

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

Layer snapshots include normalized visibility plus additive raw details for vector CAD layers when the broker provides them. Existing layer fields stay unchanged.

  • Request the current layer state with getLayers and listen for layersSnapshot.
  • Use layer.visible as the normalized show/hide boolean.
  • Use layer.kind to distinguish vector layers from PDF layers.
  • For vector CAD layers, target visibility updates by index. For PDF layers, target by id.
  • After every setLayerVisibility request, the viewer responds with a fresh layersSnapshot, even when no target matches.

Layer Fields

Use these fields when rendering layer rows or deciding which selector to send back to the viewer.

  • visible is the normalized show/hide boolean.
  • kind is vector or pdf.
  • details.state is the raw vector layer state.
  • details.defaultstate is the original or default state.
  • details.isplottable is the raw CAD plot flag.

Quick Examples

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

Request layers

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

Listen for layersSnapshot

window.addEventListener('message', (event) => {
  const { type, payload } = event.data || {};

  if (type === 'layersSnapshot') {
    console.log(payload.layers);
    renderLayerPanel(payload.layers);
  }
});

Hide one vector layer

viewerIframe.contentWindow.postMessage({
  type: 'setLayerVisibility',
  payload: {
    requestId: 'layer-hide-1',
    index: 0,
    visible: false
  }
}, '*');

Show multiple vector layers

viewerIframe.contentWindow.postMessage({
  type: 'setLayerVisibility',
  payload: {
    requestId: 'layers-show-1',
    indexes: [0, 1, 2],
    visible: true
  }
}, '*');

Hide by layer name

viewerIframe.contentWindow.postMessage({
  type: 'setLayerVisibility',
  payload: {
    requestId: 'layer-name-1',
    name: 'Layer 1',
    visible: false
  }
}, '*');

Hide a PDF layer by id

viewerIframe.contentWindow.postMessage({
  type: 'setLayerVisibility',
  payload: {
    requestId: 'pdf-layer-1',
    id: 5,
    visible: false
  }
}, '*');

Show all layers

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

Response Shape

The viewer responds to getLayers with layersSnapshot. The same response type is also sent after every setLayerVisibility request.

{
  type: 'layersSnapshot',
  payload: {
    requestId: 'layers-1',
    fileId: '...',
    fileIndex: 0,
    fileName: 'drawing.dwg',
    layers: [
      {
        index: 0,
        id: undefined,
        name: 'Layer 1',
        color: '#00FFFF',
        visible: true,
        kind: 'vector',
        details: {
          state: 1,
          defaultstate: 1,
          isplottable: 1
        }
      }
    ]
  }
}
Response Shape

Targeting Rules

Choose the selector from the layer row returned by layersSnapshot. Visibility requests can update one layer, multiple layers, named layers, PDF layers, or every layer.

  • Use index or indexes for vector CAD layers.
  • Use id or ids for PDF layers.
  • Use name or names when the frontend already has stable layer names.
  • Use all when the visibility change should apply to every layer.
  • If no target matches, the response still returns the current snapshot.

Control flow

The host owns the panel state, but the canvas 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
viewerIframe.contentWindow.postMessage({
  type: 'getLayers',
  payload: { requestId: 'layers-open' }
}, '*');
Canvas Emits

2. Canvas returns layersSnapshot

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

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 index for vector CAD layers, id for PDF layers, or all for a global visibility change.

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

4. Canvas returns the updated snapshot

After setLayerVisibility, the viewer sends layersSnapshot again with the same requestId when available.

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

  console.log(event.data.payload.requestId);
  console.log(event.data.payload.layers);
});

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() {
  viewerIframe.contentWindow.postMessage({
    type: 'getLayers',
    payload: { requestId: 'layers-init' }
  }, '*');
}

function toggleLayer(index, visible) {
  viewerIframe.contentWindow.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.