Rasterex APINPM Package/docs/components/measurement/count-point-mode

Count Point Mode

Enable or disable count-point insertion mode for a count annotation using the SDK.

Overview

Use viewer.annotations.setCountPointMode(...) to enable or disable count-point insertion mode for a count annotation.

Count point mode is available after the viewer is mounted, Canvas is ready, a document is open, and your app knows the target count annotation GUID.

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/floor-plan.pdf",
  displayName: "Floor Plan.pdf"
});

Overview

Toggling Count Point Mode

Enable or disable insertion mode programmatically by passing the annotation GUID:

setCountPointMode(...) is fire-and-forget. Canvas does not return a command result event.

typescript

// Enable count point mode
viewer.annotations.setCountPointMode({
  guid: "count-annotation-guid",
  enabled: true
});

// Disable count point mode
viewer.annotations.setCountPointMode({
  guid: "count-annotation-guid",
  enabled: false
});

Toggling Count Point Mode

Track the Active Count Annotation

Use selection events to store the currently active count GUID:

typescript

let activeCountGuid: string | null = null;

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

Track the Active Count Annotation

Toggle Button Pattern

Typical implementation for toolbar toggle button handlers:

typescript

let countPointModeEnabled = false;

function toggleCountPointMode() {
  if (!activeCountGuid) return;

  countPointModeEnabled = !countPointModeEnabled;

  viewer.annotations.setCountPointMode({
    guid: activeCountGuid,
    enabled: countPointModeEnabled
  });
}

Toggle Button Pattern

When to Disable

Always disable count point mode when targeting transitions or state clear:

The selected annotation changes.
The active document or file tab changes.
The component unmounts.
The user deactivates the toggle.

typescript

function disableCountPointMode() {
  if (!activeCountGuid || !countPointModeEnabled) return;

  viewer.annotations.setCountPointMode({
    guid: activeCountGuid,
    enabled: false
  });

  countPointModeEnabled = false;
}

When to Disable

Vanilla Example

Complete integration code setup for Vanilla HTML/JS environments:

<div id="viewer" style="height: 640px"></div>
<div>
  <button type="button" id="count-tool">Count Tool</button>
  <button type="button" id="toggle-count-points">Toggle Count Points</button>
</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 CountPointMode() {
  const hostRef = useRef<HTMLDivElement | null>(null);
  const viewerRef = useRef<RasterexViewer | null>(null);
  const activeCountGuidRef = useRef<string | null>(null);
  const countPointModeEnabledRef = useRef(false);
  const [activeCountGuid, setActiveCountGuid] = useState<string | null>(null);
  const [enabled, setEnabled] = useState(false);
  const [status, setStatus] = useState("Loading viewer");

  function disableCountPointMode() {
    const viewer = viewerRef.current;
    const guid = activeCountGuidRef.current;

    if (!viewer || !guid || !countPointModeEnabledRef.current) return;

    viewer.annotations.setCountPointMode({ guid, enabled: false });
    countPointModeEnabledRef.current = false;
    setEnabled(false);
  }

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

    const stopSelected = viewer.annotations.on("selected", (event) => {
      if (disposed) return;

      if (activeCountGuidRef.current && activeCountGuidRef.current !== event.guid) {
        disableCountPointMode();
      }

      activeCountGuidRef.current = event.guid;
      setActiveCountGuid(event.guid);
      setStatus(`Selected ${event.guid}`);
    });

    async function start() {
      await viewer.mount();
      await viewer.ready();
      await viewer.documents.open({
        url: "https://files.example.com/floor-plan.pdf",
        displayName: "Floor Plan.pdf"
      });
      if (!disposed) setStatus("Ready");
    }

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

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

  async function enableCountTool() {
    await viewerRef.current?.tools.set({ action: "COUNT", enabled: true });
  }

  function toggleCountPointMode() {
    const viewer = viewerRef.current;
    const guid = activeCountGuidRef.current;

    if (!viewer || !guid) {
      setStatus("Select a count annotation first");
      return;
    }

    const nextEnabled = !countPointModeEnabledRef.current;
    viewer.annotations.setCountPointMode({ guid, enabled: nextEnabled });
    countPointModeEnabledRef.current = nextEnabled;
    setEnabled(nextEnabled);
    setStatus(nextEnabled ? "Count point mode enabled" : "Count point mode disabled");
  }

  return (
    <section>
      <div ref={hostRef} style={{ height: 640 }} />
      <button type="button" onClick={() => void enableCountTool()}>
        Count Tool
      </button>
      <button type="button" aria-pressed={enabled} onClick={toggleCountPointMode}>
        Count Points
      </button>
      <p>{activeCountGuid ? `Target: ${activeCountGuid}` : "No count annotation selected"}</p>
      <p>{status}</p>
    </section>
  );
}

React Integration

Canvas Broker Mapping

Broker message mapping for setCountPointMode API:

viewer.annotations.setCountPointMode(...) maps to insertCountPointMode.