Rasterex APINPM Package/docs/components/measurement/delete

Delete Annotations

Delete annotations and measurements in Canvas using the SDK.

Overview

Use viewer.annotations.delete(...) to delete an annotation or measurement in Canvas.

Delete 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

Selectors

Delete target elements using guid or uniqueId:

For delete, the SDK sends uniqueId ?? guid to Canvas. If both are provided, uniqueId takes priority.

typescript

// Delete by GUID
viewer.annotations.delete({
  guid: "annotation-guid"
});

// Delete by Unique ID
viewer.annotations.delete({
  uniqueId: "annotation-unique-id"
});

Selectors

Select Then Delete

A common flow is to track selection updates and delete the active annotation:

typescript

let selectedGuid: string | null = null;

const stopSelected = viewer.annotations.on("selected", (event) => {
  selectedGuid = event.guid;
});

function deleteSelectedAnnotation() {
  if (!selectedGuid) return;

  viewer.annotations.delete({
    guid: selectedGuid
  });
}

Select Then Delete

Confirmation Events

Delete calls are fire-and-forget, but you can listen for confirmation events emitted by Canvas:

typescript

const stopDeleted = viewer.annotations.on("deleted", (event) => {
  console.log("Annotation deleted:", event.guid);
});

viewer.annotations.delete({
  guid: "annotation-guid"
});

Confirmation Events

Vanilla Example

Complete integration code setup for Vanilla HTML/JS environments:

<div id="viewer" style="height: 640px"></div>
<button type="button" id="delete-selected">Delete Selected</button>
<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 DeleteAnnotation() {
  const hostRef = useRef<HTMLDivElement | null>(null);
  const viewerRef = useRef<RasterexViewer | null>(null);
  const [selectedGuid, setSelectedGuid] = useState<string | null>(null);
  const [status, setStatus] = useState("Loading viewer");

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

    const stopSelected = viewer.annotations.on("selected", (event) => {
      if (!disposed) {
        setSelectedGuid(event.guid);
        setStatus(`Selected ${event.guid}`);
      }
    });

    const stopDeleted = viewer.annotations.on("deleted", (event) => {
      if (!disposed) {
        setSelectedGuid((current) => (current === event.guid ? null : current));
        setStatus(`Deleted ${event.guid}`);
      }
    });

    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;
      stopSelected();
      stopDeleted();
      viewer.destroy();
      viewerRef.current = null;
    };
  }, []);

  function deleteSelected() {
    if (!selectedGuid) {
      setStatus("Select an annotation first");
      return;
    }

    viewerRef.current?.annotations.delete({
      guid: selectedGuid
    });
  }

  return (
    <section>
      <div ref={hostRef} style={{ height: 640 }} />
      <button type="button" onClick={deleteSelected}>Delete Selected</button>
      <p>{status}</p>
    </section>
  );
}

React Integration

Canvas Broker Mapping

Broker message mapping for delete APIs:

viewer.annotations.delete(...) maps to deleteAnnotation.
viewer.annotations.on("deleted", ...) listens to annotationDeleted.