Rasterex APINPM Package/docs/components/annotation/clear

Clear

Manage active drawing states by clearing or deactivating annotation tools.

Overview

Effective document control requires a clean workspace. Use clear commands to reset the active drawing tool context and return to standard selection/navigation mode.

The SDK provides a dedicated viewer.tools.clear() method to reset the active drawing state without technical friction.

  • Reset Canvas Context: Revert immediately back to standard navigation/selection pointer.
  • Fire and Forget: Reset active state programmatically without complex callback flows.
  • Selective Deactivation: Alternatively, deactivate a single tool by disabling it while preserving other states.

Quick Examples

Manage active tools programmatically using the tools namespace API:

Clear active annotation tool

// Reset the active drawing state and return to standard selection mode
viewer.tools.clear();

Disable a specific active tool

// Disable a specific tool (e.g., TEXT annotation)
await viewer.tools.set({
  action: "TEXT",
  enabled: false
});

Full Implementation

Configure tool activation and clear states in your integration code:

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

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

const statusEl = document.querySelector("#status");

function setStatus(message) {
  if (statusEl) statusEl.textContent = message;
}

async function startViewer() {
  await viewer.mount();
  await viewer.ready();
  
  await viewer.documents.open({
    url: "https://pdfobject.com/pdf/sample.pdf",
    displayName: "sample.pdf"
  });

  setStatus("Viewer ready");
}

async function enableAnnotation(action) {
  setStatus("Activating " + action + "...");
  try {
    const result = await viewer.tools.set({
      action,
      enabled: true,
      style: {
        strokeColor: "#dc2626",
        fillColor: "#fee2e2",
        strokeWidth: 2
      }
    });

    if (result.success) {
      setStatus(action + " active");
    } else {
      setStatus("Failed: " + result.error);
    }
  } catch (error) {
    setStatus("Tool activation error");
  }
}

document.querySelectorAll("[data-action]").forEach((button) => {
  button.addEventListener("click", () => {
    enableAnnotation(button.dataset.action).catch(console.error);
  });
});

document.querySelector("#clear-btn")?.addEventListener("click", () => {
  // Reset all active tools
  viewer.tools.clear();
  setStatus("Drawing tools cleared");
});

startViewer().catch(console.error);
Full Implementation

Broker Mapping

The SDK translates high-level method calls into underlying Canvas events:

  • `viewer.tools.clear()`: Sends the grouped Canvas toolControl command with { command: "clear" }. It is fire-and-forget.