Drawing Revision Comparison and Alignment SDK

Choose a base drawing and revision, follow comparison status, then annotate the completed result.

The linked React, TypeScript, and Vite reference application uses an iframe and PostMessage. Use it to study the operator workflow and host UI; follow the NPM implementation pages below for the SDK methods and events used by this workflow.

The repository currently requires shared demo source outside the clone. Connect that source and configure a reachable Rasterex Canvas before running the example, as explained in the repository setup instructions.

Use the NPM SDK to compare drawing revisions with an older background drawing and a newer overlay drawing, or align the drawings first when their coordinates differ. The operator should always know whether Canvas is ready, processing, waiting for alignment points, complete, or failed.

The reference UI is a dark engineering workspace: a small application header, a persistent action ribbon, a collapsible sidebar, a large Canvas viewport, and a footer status area. Preserve that information hierarchy in host UI while using only NPM SDK methods and events.

• Ribbon: Compare Documents, Align Drawings, and a compact status badge.
• Sidebar: background and overlay sources, DPI, background/overlay/equal colors, output name, and result metadata after completion.
• Canvas viewport: normal drawing surface, processing overlay, and a focused instruction while the operator picks interactive alignment points.
• Footer or live region: current operation message and error feedback that remains available when the sidebar is collapsed.

The host UI should advance only on documented events, not when a command has been clicked.

• 1Mount the NPM viewer and register compare listeners.
• 2Collect and validate distinct background and overlay sources plus rendering options.
• 3Use Compare when the source coordinates already match.
• 4Use interactive Align when the drawings are shifted, rotated, scaled, cropped, scanned, or exported differently.
• 5Keep actions locked while Canvas processes or waits for point selection.
• 6Show result metadata after a result payload confirms completion.
• 7Use error events to unlock retry.
• 8Unsubscribe and destroy the viewer when the route is left.

Coordinate agreement is the decision point. Direct compare can complete on offset drawings, but it creates a misleading diff because unchanged geometry appears changed.

• Compare directly when page size, orientation, scale, margins, and layout coordinates are already equivalent.
• Align interactively when the drawings do not share coordinates and an operator can select matching points in Canvas.
• Do not call direct compare merely because both URLs are valid; visually verify whether the sources share the same coordinate system.

The revision setup is a stateful workspace. These states make the real operator workflow understandable and prevent premature success feedback.

• 1Ready: Compare and Align are enabled.
• 2Processing: show progressStart message over Canvas and lock the action ribbon.
• 3Pick points: an empty comparisonComplete from interactive align tells the operator to select matching points; remain locked.
• 4Complete: a result payload shows metadata.
• 5Error: comparisonError displays recoverable feedback and returns Compare and Align to an enabled state.

Use these pages to implement and verify the workflow.

Use component documentation for exact payload fields and event types.

• Compare API
• Align API
• Revision API technical reference