Tools Interaction

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

const navigationTools: Array<{ label: string; action: NavigationToolAction }> = [
  { label: "Zoom In", action: "ZOOM_IN" },
  { label: "Zoom Out", action: "ZOOM_OUT" },
  { label: "Fit Width", action: "FIT_WIDTH" },
  { label: "Fit Window", action: "FIT_TO_WINDOW" },
  { label: "Markups", action: "HIDE_MARKUPS" }
];

export function NavigationTools() {
  const hostRef = useRef<HTMLDivElement | null>(null);
  const viewerRef = useRef<RasterexViewer | null>(null);
  const [searchText, setSearchText] = useState("");
  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/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;
      viewer.destroy();
      viewerRef.current = null;
    };
  }, []);

  async function runNavigation(action: NavigationToolAction) {
    const result = await viewerRef.current?.tools.navigation.set({
      action,
      enabled: true
    });

    setStatus(result?.success ? `${action} complete` : result?.error ?? "Navigation failed");
  }

  async function search() {
    const result = await viewerRef.current?.tools.navigation.set({
      action: "SEARCH_TEXT",
      enabled: true,
      searchText,
      searchForward: true,
      searchCaseSensitive: false
    });

    setStatus(result?.success ? "Search started" : result?.error ?? "Search failed");
  }

  async function clearNavigation() {
    const result = await viewerRef.current?.tools.navigation.clear();
    setStatus(result?.success ? "Navigation cleared" : result?.error ?? "Clear failed");
  }

  return (
    <section>
      <div ref={hostRef} style={{ height: 640 }} />
      <div>
        {navigationTools.map((tool) => (
          <button
            key={tool.action}
            type="button"
            onClick={() => void runNavigation(tool.action)}
          >
            {tool.label}
          </button>
        ))}
        <input
          type="search"
          value={searchText}
          onChange={(event) => setSearchText(event.currentTarget.value)}
          placeholder="Search text"
        />
        <button type="button" onClick={() => void search()}>
          Search
        </button>
        <button type="button" onClick={() => void clearNavigation()}>
          Clear
        </button>
      </div>
      <p>{status}</p>
    </section>
  );
}