Overview

Establish drawing scale, measure quantities, review annotations in a side panel, and export the annotation list.

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.

Match the shared React Vite measurement design: a header and engineering ribbon sit above Canvas, while a collapsible sidebar contains active scale, calibration, and scale-calculator controls. In NPM mode, use documented scale snapshots and calibration events rather than the reference project’s older call shapes.

• Measurement guide
• Scale API
• Calibration API

Keep Canvas primary. The sidebar exposes scale state and forms; a floating banner appears only while the operator is picking a reference line.

• Header: sidebar toggle, document URL and Open action, connection status.
• Ribbon: Select, Length, Area, and Path; measurement actions stay disabled until a scale snapshot confirms an active scale.
• Active-scale card: selected label, system, precision, and calibrated or uncalibrated state from the latest snapshot.
• Calibrate tab: Start, Cancel, picked-line feedback, Metric or Imperial input form, Calculate, candidate preview, and Apply.
• Calculator tab: metric or imperial ratio inputs and preset ratios that create a complete NPM scale with isSelected: true.
• Scale library: render snapshot scales; selecting a row re-adds a complete known scale with isSelected: true, then waits for a snapshot. Delete applies only to host-owned local presets.

Follow this order to avoid measurements based on an unconfirmed scale.

• 1Open the intended drawing and retain its active file index.
• 2Subscribe to scale snapshots and read the current scale before enabling tools.
• 3Open the calibration sidebar when no confirmed active scale is available or when the operator requests an update.
• 4Add a validated manual scale or run the guided calibration state machine.
• 5Wait for the NPM scale snapshot that confirms the active scale.
• 6Enable the appropriate measurement tool, then review, save, export, or extract measurements through documented APIs.
• 7Clear workflow-specific state when changing drawings, cancelling calibration, or unmounting.

Use these pages to implement the NPM takeoff workflow.