Rasterex APINPM Package/docs/components/measurement/save

Save and Auto-Save Annotations

Save current Canvas annotations, and enable or disable Canvas auto-save behavior using the SDK.

Overview

Use viewer.annotations.save(...) to save current Canvas annotations, and viewer.annotations.setAutoSave(...) to enable or disable Canvas auto-save behavior.

Save commands are 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

Save Annotations

Invoke the save operation and wait for completion:

save(...) sends saveAnnotations and waits for saveAnnotationsComplete with the matching request ID.
Use timeoutMs to define custom save timeout intervals:

Save with custom timeout

await viewer.annotations.save({
  timeoutMs: 10000
});

typescript

const result = await viewer.annotations.save();

if (result.success) {
  console.log("Saved request ID:", result.requestId);
}

Save Annotations

Result Shape

SDK save result format:

typescript

type SaveAnnotationsResult = {
  success: boolean;
  requestId: string;
  error?: string;
};

Result Shape

Auto-Save Control

Toggle auto-save configurations on Canvas:

setAutoSave(...) is a fire-and-forget command.

typescript

// Enable auto-save
viewer.annotations.setAutoSave({
  enabled: true
});

// Disable auto-save
viewer.annotations.setAutoSave({
  enabled: false
});

Auto-Save Control

Vanilla Example

Complete integration code setup for Vanilla HTML/JS environments:

<div id="viewer" style="height: 640px"></div>
<div>
  <button type="button" id="save-annotations">Save</button>
  <label>
    <input id="auto-save" type="checkbox" />
    Auto-save
  </label>
</div>
<p id="status"></p>

Vanilla Example

React Integration

Complete React Component implementation details:

tsx

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

export function SaveAnnotations() {
  const hostRef = useRef<HTMLDivElement | null>(null);
  const viewerRef = useRef<RasterexViewer | null>(null);
  const [autoSave, setAutoSave] = useState(false);
  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 saveAnnotations() {
    try {
      const result = await viewerRef.current?.annotations.save({ timeoutMs: 10000 });
      setStatus(result ? `Saved ${result.requestId}` : "Save skipped");
    } catch (error) {
      setStatus(error instanceof Error ? error.message : "Save failed");
    }
  }

  function toggleAutoSave(enabled: boolean) {
    viewerRef.current?.annotations.setAutoSave({ enabled });
    setAutoSave(enabled);
    setStatus(enabled ? "Auto-save enabled" : "Auto-save disabled");
  }

  return (
    <section>
      <div ref={hostRef} style={{ height: 640 }} />
      <button type="button" onClick={() => void viewerRef.current?.tools.set({ action: "TEXT", enabled: true })}>
        Text
      </button>
      <button type="button" onClick={() => void saveAnnotations()}>
        Save
      </button>
      <label>
        <input
          type="checkbox"
          checked={autoSave}
          onChange={(event) => toggleAutoSave(event.currentTarget.checked)}
        />
        Auto-save
      </label>
      <p>{status}</p>
    </section>
  );
}

React Integration

Canvas Broker Mapping

Broker message mapping for save APIs:

viewer.annotations.save(...) maps to saveAnnotations / saveAnnotationsComplete.
viewer.annotations.setAutoSave(...) maps to setAutoSave.