Browse docs

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

Arrows

Facilitate technical coordination with vector-based arrows.

Overview

Arrows are critical for technical coordination, providing a clear visual link between reference data and project components.

  • Single-End Arrow: Point to a specific location.
  • Double-End Arrow: Connect two related points.
  • Filled Arrow: Industrial-standard solid arrowheads.

Quick Examples

Activate arrow tools with the `toolControl` message.

Single-End

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

Double-End

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

Filled

iframe.contentWindow.postMessage({
  type: 'toolControl',
  payload: { group: 'drawing', action: 'ARROW_FILLED_SINGLE_END' }
}, 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('ARROW_SINGLE_END');
// toggleTool('ARROW_FILLED_SINGLE_END');
// deactivateTool();
Complete Implementation

Live Preview

Test the arrow 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 arrow controls with core viewer setup steps.