Rasterex APINPM Package/docs/components/measurement/extraction

Data Extraction

Read a snapshot of the current Canvas annotations and measurements using the SDK.

Overview

Use viewer.annotations.getData(...) to read a snapshot of the current Canvas annotations and measurements.

Data extraction is available after the viewer is mounted, Canvas is ready, and a document is open.

typescript

import { createViewer } from "@rasterex/viewer";

const viewer = createViewer({
  container: "#viewer"
});

await viewer.mount();
await viewer.ready();

await viewer.documents.open({
  url: "https://files.example.com/sample.pdf",
  displayName: "Sample PDF.pdf"
});

Overview

Read All Annotation Data

Fetch active annotation markups:

getData(...) sends getAnnotationData and waits for the matching response payload with the same request ID.

typescript

const result = await viewer.annotations.getData({
  filter: "all"
});

console.log(result.items);

Read All Annotation Data

Filters

Filter the extracted items using the filter property:

all: Extract all annotation and measurement markup.
annotations: Non-measurement markups only.
measurements: Measurement markups only.
drawing: CAD drawing features (normalized to annotations).

typescript

const measurements = await viewer.annotations.getData({
  filter: "measurements"
});

Filters

Result Shape

The SDK structures results as follows. See Annotation JSON Schema for the full observed annotation item shape.

typescript

type GetAnnotationDataResult = {
  filter: string;
  requestId: string;
  items: AnnotationDataItem[];
  count?: number;
};

type AnnotationDataItem = {
  [key: string]: unknown;
  guid?: string;
  isMeasure?: boolean;
  markupnumber?: number;
  type?: number;
  timestamp?: number;
  data?: Record<string, unknown>;
  Tool?: string | null;
};

Result Shape

Vanilla Example

Complete integration code setup for Vanilla HTML/JS environments:

<div id="viewer" style="height: 640px"></div>
<div>
  <button type="button" id="length-tool">Length</button>
  <button type="button" id="read-annotations">Read Annotations</button>
  <button type="button" id="read-measurements">Read Measurements</button>
</div>
<pre id="annotation-data"></pre>

Vanilla Example

React Integration

Complete React Component implementation details:

tsx

import { useEffect, useRef, useState } from "react";
import {
  createViewer,
  type AnnotationDataFilter,
  type AnnotationDataItem,
  type RasterexViewer
} from "@rasterex/viewer";

export function AnnotationDataExtraction() {
  const hostRef = useRef<HTMLDivElement | null>(null);
  const viewerRef = useRef<RasterexViewer | null>(null);
  const [items, setItems] = useState<AnnotationDataItem[]>([]);
  const [status, setStatus] = useState("Loading viewer");

  useEffect(() => {
    let disposed = false;
    const viewer = createViewer({ container: hostRef.current! });
    viewerRef.current = viewer;

    async function start() {
      await viewer.mount();
      await viewer.ready();
      await viewer.documents.open({
        url: "https://files.example.com/sample.pdf",
        displayName: "Sample PDF.pdf"
      });
      if (!disposed) setStatus("Ready");
    }

    void start().catch((error) => {
      if (!disposed) setStatus(error instanceof Error ? error.message : "Viewer failed");
    });

    return () => {
      disposed = true;
      viewer.destroy();
      viewerRef.current = null;
    };
  }, []);

  async function readData(filter: AnnotationDataFilter) {
    const result = await viewerRef.current?.annotations.getData({ filter });
    setItems(result?.items ?? []);
    setStatus(`${result?.items.length ?? 0} items`);
  }

  return (
    <section>
      <div ref={hostRef} style={{ height: 640 }} />
      <div>
        <button type="button" onClick={() => void readData("annotations")}>
          Read Annotations
        </button>
        <button type="button" onClick={() => void readData("measurements")}>
          Read Measurements
        </button>
      </div>
      <p>{status}</p>
      <pre>{JSON.stringify(items, null, 2)}</pre>
    </section>
  );
}

React Integration

Canvas Broker Mapping

Broker message mapping for annotation data extraction:

viewer.annotations.getData(...) maps to getAnnotationData request and response.