Browse docs

OverviewInstallationCanvasAll ComponentsFilesPDFCADAnnotationMeasurementPlacementAPI Key ManagementSymbol ManagementCollaborationCompareBatch ExportNavigationAll CapabilitiesStyles
Message API/docs/components/annotation/shapes

Shapes

Mark equipment zones, room areas, and site boundaries.

Overview

Shapes allow site teams to define specific boundaries and zones.

  • Cloud: Highlight revision areas and change zones.
  • Rectangle: Mark equipment footprints and room boundaries.
  • Ellipse: Circle specific components or regions.

Quick Examples

Activate shape tools with the `toolControl` message.

Cloud

iframe.contentWindow.postMessage({
  type: 'toolControl',
  payload: { group: 'drawing', action: 'SHAPE_CLOUD' }
}, viewerOrigin);

Rectangle

iframe.contentWindow.postMessage({
  type: 'toolControl',
  payload: { group: 'drawing', action: 'SHAPE_RECTANGLE' }
}, viewerOrigin);

Ellipse

iframe.contentWindow.postMessage({
  type: 'toolControl',
  payload: { group: 'drawing', action: 'SHAPE_ELLIPSE' }
}, viewerOrigin);

Deactivate

iframe.contentWindow.postMessage({
  type: 'toolControl',
  payload: { command: 'clear' }
}, viewerOrigin);

Complete Implementation

Complete workflow: initialize the canvas, load a file, then manage tool activation.

// CONFIGURATION
const VIEWER_URL = 'https://your-canvas-domain.com';
const VIEWER_ORIGIN = 'https://your-canvas-domain.com';
let activeTool = null;

// INITIALIZE CANVAS
const iframe = document.querySelector('[data-viewer-iframe]');
iframe.src = VIEWER_URL;

iframe.addEventListener('load', () => {
  // LOAD FILE
  iframe.contentWindow.postMessage({
    type: 'view',
    payload: { fileUrl: 'https://example.com/document.pdf' }
  }, VIEWER_ORIGIN);
});

// LISTEN FOR EVENTS
window.addEventListener('message', (event) => {
  if (event.origin !== VIEWER_ORIGIN) return;
  if (event.data.type === 'fileInfo') {
    console.log('File loaded:', event.data.payload.fileInfo.name);
  }
});

// TOOL CONTROL
function activateTool(action) {
  iframe.contentWindow.postMessage({
    type: 'toolControl',
    payload: { group: 'drawing', action: action }
  }, VIEWER_ORIGIN);
  activeTool = action;
}

function deactivateTool() {
  iframe.contentWindow.postMessage({
    type: 'toolControl',
    payload: { command: 'clear' }
  }, VIEWER_ORIGIN);
  activeTool = null;
}

function toggleTool(action) {
  activeTool === action ? deactivateTool() : activateTool(action);
}

// USAGE
// activateTool('SHAPE_CLOUD');
// toggleTool('SHAPE_RECTANGLE');
// deactivateTool();
Complete Implementation

Live Preview

Test the shape tools in real-time.

Interactive Workbench

Live Viewer Preview

Launch the interactive preview to explore the viewer capabilities. Use the dashboard within the modal to test different tools and configurations.

Additional Resources

Connect shape controls with core viewer setup steps.