Align

The align workflow posts an `align` message with two source file URLs and starts an interactive alignment flow in the viewer.

The viewer waits for the operator to pick reference points and then continues through the same completion and error lifecycle used by compare.

Send the two file URLs to start interactive alignment.

viewerWindow.postMessage({
  type: 'align',
  payload: {
    backgroundUrl: 'https://example.com/rev-a.pdf',
    overlayUrl: 'https://example.com/rev-b.pdf',
    dpi: 300
  }
}, '*');

window.addEventListener('message', (event) => {
  if (event.data?.type === 'comparisonComplete') {
    console.log('Aligned result:', event.data.payload.fileUrl);
  }

  if (event.data?.type === 'comparisonError') {
    console.error(event.data.payload.reason || event.data.payload.message);
  }
});

Align follows the same result event pattern as compare, with the viewer driving the interactive point-picking step.

viewerWindow.postMessage({
  type: 'align',
  payload: {
    backgroundUrl: bgUrl,
    overlayUrl: overlayUrl,
    dpi: 300
  }
}, '*');

// No extra host message is required during interactive align.
// Wait for completion or error from the viewer.

window.addEventListener('message', (event) => {
  if (event.data?.type === 'comparisonComplete') {
    openResult(event.data.payload.fileUrl);
  }
});

This example starts the interactive align flow and then waits for completion or failure from the viewer.

function alignFiles(backgroundUrl, overlayUrl) {
  viewerWindow.postMessage({
    type: 'align',
    payload: {
      backgroundUrl,
      overlayUrl,
      dpi: 300
    }
  }, '*');
}

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

  if (data.type === 'comparisonComplete') {
    console.log('Align result:', data.payload.fileUrl);
    return;
  }

  if (data.type === 'comparisonError') {
    console.error(data.payload.reason || data.payload.message);
  }
});

Use compare for direct revision diffs when the source files are already aligned.

• Compare: Compare
• Technical Reference: API References
• Overview: Compare Overview