@edgepdf/viewer-react 0.0.32 → 0.0.33

package/README.md

@@ -12,7 +12,7 @@ pnpm add @edgepdf/viewer-react @edgepdf/viewer-js
 yarn add @edgepdf/viewer-react @edgepdf/viewer-js
 ```
 
-## Usage
+## Quick Start
 
 ### Next.js
 
@@ -98,6 +98,7 @@ import {
   EdgePDFViewer,
   useMarkers,
   useViewer,
+  useZoom,
 } from '@edgepdf/viewer-react';
 import type { ViewerConfig } from '@edgepdf/types';
 
@@ -113,16 +114,17 @@ const config: ViewerConfig = {
 };
 
 function MarkerPanel() {
-  const { markers } = useMarkers();
+  const { markers, addMarker, removeMarker } = useMarkers();
   const { viewer, isInitialized } = useViewer();
-
-  // You can interact with viewer + markers here,
-  // independent of where <EdgePDFViewer /> is rendered.
+  const { zoomIn, zoomOut, currentZoom } = useZoom();
 
   return (
     <div>
       <div>Initialized: {isInitialized ? 'yes' : 'no'}</div>
       <div>Total markers: {markers.length}</div>
+      <div>Current zoom: {currentZoom}</div>
+      <button onClick={zoomIn}>Zoom In</button>
+      <button onClick={zoomOut}>Zoom Out</button>
     </div>
   );
 }
@@ -130,20 +132,577 @@ function MarkerPanel() {
 function App() {
   return (
     <ViewerProvider>
-      {/* This can be on one route/screen */}
       <MarkerPanel />
-
-      {/* And EdgePDFViewer can be on another */}
       <EdgePDFViewer config={config} />
     </ViewerProvider>
   );
 }
 ```
 
-## Building
+## API Reference
+
+### Components
+
+#### `<ViewerProvider>`
+
+Provides viewer context to child components. Must wrap all components that use viewer hooks.
+
+**Props:**
+
+```typescript
+interface ViewerProviderProps {
+  children: ReactNode;
+}
+```
+
+**Example:**
+
+```tsx
+<ViewerProvider>
+  <App />
+</ViewerProvider>
+```
+
+---
+
+#### `<EdgePDFViewer>`
+
+Main React component for the EdgePDF viewer. Must be used within a `ViewerProvider`.
+
+**Props:**
+
+```typescript
+interface EdgePDFViewerProps {
+  /** Viewer configuration */
+  config: ViewerConfig;
+  /** Optional map options */
+  mapOptions?: MapOptions;
+  /** Optional className for the container */
+  className?: string;
+  /** Optional style for the container */
+  style?: React.CSSProperties;
+  /** Show zoom controls (default: true) */
+  showZoomControls?: boolean;
+  /** Zoom controls position (only used if showZoomControls is true) */
+  zoomControlsPosition?:
+    | 'top-left'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-right';
+  /** Show zoom level in zoom controls (only used if showZoomControls is true) */
+  showZoomLevel?: boolean;
+  /** Enable annotation functionality (default: true) */
+  enableAnnotation?: boolean;
+  /** Show edit button in marker action controls (default: true) */
+  showEditButton?: boolean;
+  /** Show delete button in marker action controls (default: true) */
+  showDeleteButton?: boolean;
+  /** Default zoom level for initial view */
+  defaultZoomLevel?: number;
+  /** Callback when markers/pins are updated */
+  onPinsUpdate?: (pins: Marker[]) => void;
+  /** Callback when a marker is clicked */
+  onMarkerClick?: (marker: Marker) => void;
+  /** Callback when a marker is updated */
+  onMarkerUpdate?: (marker: Marker) => void;
+  /** Callback when a marker is deleted */
+  onMarkerDelete?: (marker: Marker) => void;
+  /** Callback when a marker is added (created by user tap/click) */
+  onMarkerAdd?: (marker: Marker) => void;
+  /** Default pins to preload (uses internal import) */
+  defaultPins?: Marker[] | MarkerData;
+  /** Children components */
+  children?: ReactNode;
+}
+```
+
+**Example:**
+
+```tsx
+<EdgePDFViewer
+  config={config}
+  showZoomControls={true}
+  zoomControlsPosition="top-right"
+  enableAnnotation={true}
+  onMarkerClick={(marker) => console.log('Marker clicked:', marker)}
+  onPinsUpdate={(pins) => console.log('Pins updated:', pins)}
+/>
+```
+
+---
+
+#### `<ZoomControls>`
+
+React component for zoom controls. Uses the JS library's zoom controls internally.
+
+**Props:**
+
+```typescript
+interface ZoomControlsProps {
+  /** Optional className for the container */
+  className?: string;
+  /** Optional style for the container */
+  style?: React.CSSProperties;
+  /** Position of the controls */
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+  /** Show zoom level display */
+  showZoomLevel?: boolean;
+}
+```
+
+**Example:**
+
+```tsx
+<EdgePDFViewer config={config}>
+  <ZoomControls position="top-right" showZoomLevel={true} />
+</EdgePDFViewer>
+```
+
+---
+
+### Hooks
+
+#### `useViewer()`
+
+Hook to access and interact with the viewer instance.
+
+**Returns:**
+
+```typescript
+interface UseViewerReturn {
+  /** Viewer instance */
+  viewer: EdgePdfViewer | null;
+  /** Whether viewer is initialized */
+  isInitialized: boolean;
+  /** Get the Leaflet map instance */
+  getMap: () => L.Map | null;
+  /** Check if viewer is initialized */
+  checkInitialized: () => boolean;
+}
+```
+
+**Example:**
+
+```tsx
+function MyComponent() {
+  const { viewer, isInitialized, getMap } = useViewer();
+
+  useEffect(() => {
+    if (isInitialized && viewer) {
+      const map = getMap();
+      // Use map...
+    }
+  }, [isInitialized, viewer, getMap]);
+
+  return <div>Viewer is {isInitialized ? 'ready' : 'loading'}</div>;
+}
+```
+
+---
+
+#### `useMarkers()`
+
+Hook to manage markers in the viewer.
+
+**Returns:**
+
+```typescript
+interface UseMarkersReturn {
+  /** Current markers */
+  markers: Marker[];
+  /** Add a new marker */
+  addMarker: (options: CreateMarkerOptions) => Marker | null;
+  /** Remove a marker by ID */
+  removeMarker: (id: string) => boolean;
+  /** Update a marker */
+  updateMarker: (id: string, updates: Partial<Marker>) => boolean;
+  /** Get a marker by ID */
+  getMarker: (id: string) => Marker | null;
+  /** Get all markers */
+  getAllMarkers: () => Marker[];
+  /** Export markers as JSON */
+  exportMarkers: () => MarkerData;
+  /** Import markers from JSON */
+  importMarkers: (data: MarkerData) => boolean;
+  /** Clear all markers */
+  clearMarkers: () => void;
+  /** Focus on a marker by panning and zooming to its position */
+  focusMarker: (
+    markerOrId: string | Marker,
+    options?: {
+      zoom?: number;
+      animate?: boolean;
+      duration?: number;
+    }
+  ) => boolean;
+}
+```
+
+**Example:**
+
+```tsx
+function MarkerControls() {
+  const {
+    markers,
+    addMarker,
+    removeMarker,
+    updateMarker,
+    exportMarkers,
+    importMarkers,
+    clearMarkers,
+    focusMarker,
+  } = useMarkers();
+
+  const handleAddMarker = () => {
+    addMarker({
+      position: [100, 200],
+      x: 100,
+      y: 200,
+      zoom: 1,
+      label: 'New Marker',
+    });
+  };
+
+  const handleExport = () => {
+    const data = exportMarkers();
+    console.log(JSON.stringify(data, null, 2));
+  };
+
+  const handleFocus = (markerId: string) => {
+    focusMarker(markerId, { zoom: 3, animate: true });
+  };
+
+  return (
+    <div>
+      <button onClick={handleAddMarker}>Add Marker</button>
+      <button onClick={handleExport}>Export Markers</button>
+      <button onClick={clearMarkers}>Clear All</button>
+      {markers.map((marker) => (
+        <div key={marker.id}>
+          {marker.label}
+          <button onClick={() => removeMarker(marker.id)}>Remove</button>
+          <button onClick={() => handleFocus(marker.id)}>Focus</button>
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+**Methods:**
+
+- **`addMarker(options: CreateMarkerOptions): Marker | null`** - Creates a new marker. Returns the created marker or `null` if viewer is not initialized.
+
+- **`removeMarker(id: string): boolean`** - Removes a marker by ID. Returns `true` if successful, `false` otherwise.
+
+- **`updateMarker(id: string, updates: Partial<Marker>): boolean`** - Updates a marker's properties. Returns `true` if successful, `false` otherwise.
+
+- **`getMarker(id: string): Marker | null`** - Gets a marker by ID. Returns the marker or `null` if not found.
+
+- **`getAllMarkers(): Marker[]`** - Gets all markers. Returns an array of all markers.
+
+- **`exportMarkers(): MarkerData`** - Exports all markers as JSON data. Returns a `MarkerData` object.
+
+- **`importMarkers(data: MarkerData): boolean`** - Imports markers from JSON data. Returns `true` if successful, `false` otherwise.
+
+- **`clearMarkers(): void`** - Removes all markers.
+
+- **`focusMarker(markerOrId: string | Marker, options?: FocusOptions): boolean`** - Focuses on a marker by panning and zooming. Returns `true` if successful, `false` otherwise.
+
+---
+
+#### `useZoom()`
+
+Hook to manage zoom in the viewer.
+
+**Returns:**
+
+```typescript
+interface UseZoomReturn {
+  /** Current zoom state */
+  zoomState: ZoomState | null;
+  /** Current zoom level */
+  currentZoom: number;
+  /** Minimum zoom level */
+  minZoom: number;
+  /** Maximum zoom level */
+  maxZoom: number;
+  /** Zoom in */
+  zoomIn: () => void;
+  /** Zoom out */
+  zoomOut: () => void;
+  /** Set zoom level */
+  setZoom: (zoom: number) => void;
+  /** Check if can zoom in */
+  canZoomIn: () => boolean;
+  /** Check if can zoom out */
+  canZoomOut: () => boolean;
+}
+```
+
+**Example:**
+
+```tsx
+function ZoomControls() {
+  const {
+    zoomIn,
+    zoomOut,
+    setZoom,
+    currentZoom,
+    minZoom,
+    maxZoom,
+    canZoomIn,
+    canZoomOut,
+  } = useZoom();
+
+  return (
+    <div>
+      <button onClick={zoomOut} disabled={!canZoomOut()}>
+        Zoom Out
+      </button>
+      <span>
+        Zoom: {currentZoom} ({minZoom}-{maxZoom})
+      </span>
+      <button onClick={zoomIn} disabled={!canZoomIn()}>
+        Zoom In
+      </button>
+      <button onClick={() => setZoom(2)}>Set Zoom to 2</button>
+    </div>
+  );
+}
+```
+
+**Methods:**
+
+- **`zoomIn(): void`** - Zooms in by one level.
+
+- **`zoomOut(): void`** - Zooms out by one level.
+
+- **`setZoom(zoom: number): void`** - Sets a specific zoom level.
+
+- **`canZoomIn(): boolean`** - Checks if can zoom in. Returns `true` if current zoom is less than max zoom.
+
+- **`canZoomOut(): boolean`** - Checks if can zoom out. Returns `true` if current zoom is greater than min zoom.
+
+---
+
+#### `useViewerContext()`
+
+Hook to access viewer context directly. Usually you should use `useViewer()`, `useMarkers()`, or `useZoom()` instead.
+
+**Returns:**
+
+```typescript
+interface ViewerContextValue {
+  /** Viewer instance */
+  viewer: EdgePdfViewer | null;
+  /** Whether viewer is initialized */
+  isInitialized: boolean;
+  /** Current markers */
+  markers: Marker[];
+  /** Current zoom state */
+  zoomState: ZoomState | null;
+  /** Internal: Function to update context value */
+  setContextValue: (
+    updates: Partial<Omit<ViewerContextValue, 'setContextValue'>>
+  ) => void;
+}
+```
+
+**Throws:**
+
+- `Error` if used outside `ViewerProvider`
+
+**Example:**
+
+```tsx
+function MyComponent() {
+  const { viewer, isInitialized, markers, zoomState } = useViewerContext();
+  // Use context values...
+}
+```
+
+---
+
+## Type Exports
+
+The library also exports TypeScript types for convenience:
+
+```typescript
+import type {
+  EdgePDFViewerProps,
+  ZoomControlsProps,
+  ViewerContextValue,
+  ViewerProviderProps,
+  UseViewerReturn,
+  UseMarkersReturn,
+  UseZoomReturn,
+} from '@edgepdf/viewer-react';
+```
+
+## Examples
+
+### Basic Usage with Markers
+
+```tsx
+import {
+  ViewerProvider,
+  EdgePDFViewer,
+  useMarkers,
+} from '@edgepdf/viewer-react';
+
+function MarkerList() {
+  const { markers, addMarker, removeMarker } = useMarkers();
+
+  return (
+    <div>
+      <h3>Markers ({markers.length})</h3>
+      {markers.map((marker) => (
+        <div key={marker.id}>
+          <strong>{marker.label}</strong>
+          <button onClick={() => removeMarker(marker.id)}>Remove</button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function App() {
+  const config = {
+    tileUrl: 'https://example.com/tiles/{z}/{x}/{y}.png',
+    imageInfo: {
+      width: 2000,
+      height: 3000,
+      tileSize: 256,
+      maxZoom: 5,
+      minZoom: 0,
+    },
+  };
+
+  return (
+    <ViewerProvider>
+      <div style={{ display: 'flex' }}>
+        <div style={{ width: '300px' }}>
+          <MarkerList />
+        </div>
+        <div style={{ flex: 1, height: '100vh' }}>
+          <EdgePDFViewer config={config} />
+        </div>
+      </div>
+    </ViewerProvider>
+  );
+}
+```
+
+### With Callbacks
+
+```tsx
+function App() {
+  const config = {
+    tileUrl: 'https://example.com/tiles/{z}/{x}/{y}.png',
+    imageInfo: {
+      width: 2000,
+      height: 3000,
+      tileSize: 256,
+      maxZoom: 5,
+      minZoom: 0,
+    },
+  };
+
+  const handleMarkerClick = (marker: Marker) => {
+    console.log('Marker clicked:', marker);
+  };
 
-Run `nx build viewer-react` to build the library.
+  const handlePinsUpdate = (pins: Marker[]) => {
+    console.log('Pins updated:', pins);
+    // Save to backend, localStorage, etc.
+  };
 
-## Running unit tests
+  return (
+    <ViewerProvider>
+      <EdgePDFViewer
+        config={config}
+        onMarkerClick={handleMarkerClick}
+        onPinsUpdate={handlePinsUpdate}
+        enableAnnotation={true}
+      />
+    </ViewerProvider>
+  );
+}
+```
 
-Run `nx test viewer-react` to execute the unit tests via [Jest](https://jestjs.io).
+### Custom Zoom Controls
+
+```tsx
+function CustomZoomControls() {
+  const { zoomIn, zoomOut, currentZoom, canZoomIn, canZoomOut } = useZoom();
+
+  return (
+    <div style={{ position: 'absolute', top: 10, right: 10, zIndex: 1000 }}>
+      <button onClick={zoomOut} disabled={!canZoomOut()}>
+        −
+      </button>
+      <span>{currentZoom}</span>
+      <button onClick={zoomIn} disabled={!canZoomIn()}>
+        +
+      </button>
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <ViewerProvider>
+      <EdgePDFViewer config={config} showZoomControls={false}>
+        <CustomZoomControls />
+      </EdgePDFViewer>
+    </ViewerProvider>
+  );
+}
+```
+
+### Import/Export Markers
+
+```tsx
+function MarkerManager() {
+  const { markers, exportMarkers, importMarkers, clearMarkers } = useMarkers();
+
+  const handleExport = () => {
+    const data = exportMarkers();
+    const blob = new Blob([JSON.stringify(data, null, 2)], {
+      type: 'application/json',
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'markers.json';
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const handleImport = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      try {
+        const data = JSON.parse(e.target?.result as string);
+        importMarkers(data);
+      } catch (error) {
+        console.error('Failed to import markers:', error);
+      }
+    };
+    reader.readAsText(file);
+  };
+
+  return (
+    <div>
+      <button onClick={handleExport}>Export Markers</button>
+      <input type="file" accept=".json" onChange={handleImport} />
+      <button onClick={clearMarkers}>Clear All</button>
+      <div>Total markers: {markers.length}</div>
+    </div>
+  );
+}
+```

package/dist/index.css

@@ -1,3 +1,5 @@
+@import "https://fonts.googleapis.com/css2?family=Lato:wght@300;400;500;600;700&display=swap";
+
 /* packages/viewer-js/dist/index.css */
 .leaflet-pane,
 .leaflet-tile,
@@ -671,6 +673,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
   display: flex;
   align-items: center;
   justify-content: center;
+  font-family: "Lato", sans-serif;
 }
 .edgepdf-marker-edit-popup-overlay {
   position: absolute;
@@ -678,14 +681,15 @@ svg.leaflet-image-layer.leaflet-interactive path {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.7);
   cursor: pointer;
 }
 .edgepdf-marker-edit-popup-content {
   position: relative;
-  background-color: #fff;
+  background-color: #1a1a1a;
   border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+  border: 1px solid #333;
   width: 90%;
   max-width: 500px;
   max-height: 90vh;
@@ -697,20 +701,20 @@ svg.leaflet-image-layer.leaflet-interactive path {
   justify-content: space-between;
   align-items: center;
   padding: 16px 20px;
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid #333;
 }
 .edgepdf-marker-edit-popup-header h3 {
   margin: 0;
   font-size: 18px;
   font-weight: 600;
-  color: #333;
+  color: #fff;
 }
 .edgepdf-marker-edit-popup-close {
   background: none;
   border: none;
   font-size: 24px;
   line-height: 1;
-  color: #666;
+  color: #fff;
   cursor: pointer;
   padding: 0;
   width: 32px;
@@ -722,8 +726,8 @@ svg.leaflet-image-layer.leaflet-interactive path {
   transition: background-color 0.2s ease;
 }
 .edgepdf-marker-edit-popup-close:hover {
-  background-color: #f0f0f0;
-  color: #333;
+  background-color: #333;
+  color: #ffa500;
 }
 .edgepdf-marker-edit-popup-body {
   padding: 20px;
@@ -739,52 +743,57 @@ svg.leaflet-image-layer.leaflet-interactive path {
   margin-bottom: 8px;
   font-size: 14px;
   font-weight: 500;
-  color: #333;
+  color: #fff;
 }
 .edgepdf-marker-edit-input {
   width: 100%;
   padding: 10px 12px;
-  border: 1px solid #ccc;
+  border: 1px solid #444;
   border-radius: 4px;
   font-size: 14px;
+  background-color: #2a2a2a;
+  color: #fff;
   box-sizing: border-box;
   transition: border-color 0.2s ease;
 }
 .edgepdf-marker-edit-input:focus {
   outline: none;
-  border-color: #1976d2;
-  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);
+  border-color: #ffa500;
+  box-shadow: 0 0 0 2px rgba(255, 165, 0, 0.2);
+}
+.edgepdf-marker-edit-input::placeholder {
+  color: #888;
 }
 .edgepdf-marker-edit-popup-footer {
   display: flex;
   justify-content: flex-end;
   gap: 12px;
   padding: 16px 20px;
-  border-top: 1px solid #e0e0e0;
+  border-top: 1px solid #333;
 }
 .edgepdf-marker-edit-button {
   padding: 10px 20px;
-  border: 1px solid #ccc;
+  border: 1px solid #444;
   border-radius: 4px;
-  background-color: #fff;
-  color: #333;
+  background-color: #2a2a2a;
+  color: #fff;
   cursor: pointer;
   font-size: 14px;
   font-weight: 500;
   transition: all 0.2s ease;
 }
 .edgepdf-marker-edit-button-cancel:hover {
-  background-color: #f0f0f0;
-  border-color: #999;
+  background-color: #333;
+  border-color: #555;
 }
 .edgepdf-marker-edit-button-save {
-  background-color: #1976d2;
-  color: #fff;
-  border-color: #1976d2;
+  background-color: #ffa500;
+  color: #000;
+  border-color: #ffa500;
 }
 .edgepdf-marker-edit-button-save:hover {
-  background-color: #1565c0;
-  border-color: #1565c0;
+  background-color: #ffd700;
+  border-color: #ffd700;
 }
 .edgepdf-marker-delete-popup {
   position: fixed;
@@ -796,6 +805,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
   display: flex;
   align-items: center;
   justify-content: center;
+  font-family: "Lato", sans-serif;
 }
 .edgepdf-marker-delete-popup-overlay {
   position: absolute;
@@ -803,14 +813,15 @@ svg.leaflet-image-layer.leaflet-interactive path {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.7);
   cursor: pointer;
 }
 .edgepdf-marker-delete-popup-content {
   position: relative;
-  background-color: #fff;
+  background-color: #1a1a1a;
   border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+  border: 1px solid #333;
   width: 90%;
   max-width: 500px;
   max-height: 90vh;
@@ -822,20 +833,20 @@ svg.leaflet-image-layer.leaflet-interactive path {
   justify-content: space-between;
   align-items: center;
   padding: 16px 20px;
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid #333;
 }
 .edgepdf-marker-delete-popup-header h3 {
   margin: 0;
   font-size: 18px;
   font-weight: 600;
-  color: #333;
+  color: #fff;
 }
 .edgepdf-marker-delete-popup-close {
   background: none;
   border: none;
   font-size: 24px;
   line-height: 1;
-  color: #666;
+  color: #fff;
   cursor: pointer;
   padding: 0;
   width: 32px;
@@ -847,8 +858,8 @@ svg.leaflet-image-layer.leaflet-interactive path {
   transition: background-color 0.2s ease;
 }
 .edgepdf-marker-delete-popup-close:hover {
-  background-color: #f0f0f0;
-  color: #333;
+  background-color: #333;
+  color: #ffa500;
 }
 .edgepdf-marker-delete-popup-body {
   padding: 20px;
@@ -856,43 +867,43 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .edgepdf-marker-delete-popup-body p {
   margin: 0;
   font-size: 14px;
-  color: #333;
+  color: #fff;
   line-height: 1.5;
 }
 .edgepdf-marker-delete-popup-body strong {
   font-weight: 600;
-  color: #d32f2f;
+  color: #ffa500;
 }
 .edgepdf-marker-delete-popup-footer {
   display: flex;
   justify-content: flex-end;
   gap: 12px;
   padding: 16px 20px;
-  border-top: 1px solid #e0e0e0;
+  border-top: 1px solid #333;
 }
 .edgepdf-marker-delete-button {
   padding: 10px 20px;
-  border: 1px solid #ccc;
+  border: 1px solid #444;
   border-radius: 4px;
-  background-color: #fff;
-  color: #333;
+  background-color: #2a2a2a;
+  color: #fff;
   cursor: pointer;
   font-size: 14px;
   font-weight: 500;
   transition: all 0.2s ease;
 }
 .edgepdf-marker-delete-button-cancel:hover {
-  background-color: #f0f0f0;
-  border-color: #999;
+  background-color: #333;
+  border-color: #555;
 }
 .edgepdf-marker-delete-button-confirm {
-  background-color: #d32f2f;
-  color: #fff;
-  border-color: #d32f2f;
+  background-color: #ffa500;
+  color: #000;
+  border-color: #ffa500;
 }
 .edgepdf-marker-delete-button-confirm:hover {
-  background-color: #b71c1c;
-  border-color: #b71c1c;
+  background-color: #ffd700;
+  border-color: #ffd700;
 }
 .edgepdf-marker-icon-overlay-container {
   background: transparent !important;

package/dist/index.js

@@ -9579,6 +9579,12 @@ var require_leaflet_src = __commonJS({
 var import_leaflet4 = __toESM(require_leaflet_src(), 1);
 var import_leaflet = __toESM(require_leaflet_src(), 1);
 var MAX_ZOOM_LEVEL = 4;
+var MARKER_SPEC = {
+  WIDTH: 30,
+  HEIGHT: 40,
+  ANCHOR_X: 16,
+  ANCHOR_Y: 36
+};
 function calculateTileCount(imageSize, tileSize, zoom) {
   if (imageSize <= 0 || tileSize <= 0 || zoom < 0) {
     return 0;
@@ -11254,6 +11260,65 @@ var MarkerManager = class {
       this.updateMarkerIcon(id, iconType);
     });
   }
+  /**
+   * Focuses on a marker by panning and zooming to its position
+   *
+   * This method smoothly animates the map view to center on the specified marker
+   * and optionally sets a specific zoom level. If no zoom level is provided,
+   * it uses the marker's saved zoom level or a reasonable default.
+   *
+   * @param markerOrId - Marker ID string or Marker object
+   * @param options - Optional focus options
+   * @param options.zoom - Target zoom level (uses marker's zoom or default if not provided)
+   * @param options.animate - Whether to animate the transition (default: true)
+   * @param options.duration - Animation duration in seconds (default: 0.5)
+   * @returns True if focus was successful, false if marker not found
+   *
+   * @example
+   * ```typescript
+   * // Focus on marker by ID
+   * markerManager.focusMarker('marker-123');
+   *
+   * // Focus with specific zoom level
+   * markerManager.focusMarker('marker-123', { zoom: 3 });
+   *
+   * // Focus without animation
+   * markerManager.focusMarker('marker-123', { animate: false });
+   *
+   * // Focus with custom duration
+   * markerManager.focusMarker('marker-123', { zoom: 2, duration: 1.0 });
+   * ```
+   */
+  focusMarker(markerOrId, options) {
+    let marker = null;
+    if (typeof markerOrId === "string") {
+      marker = this.getMarker(markerOrId);
+    } else {
+      marker = markerOrId;
+    }
+    if (!marker) {
+      console.warn(`Marker not found: ${markerOrId}`);
+      return false;
+    }
+    const targetZoom = options?.zoom ?? marker.zoom ?? 2;
+    const minZoom = this.imageInfo.minZoom ?? 0;
+    const maxZoom = this.imageInfo.maxZoom ?? 5;
+    const constrainedZoom = Math.max(minZoom, Math.min(maxZoom, targetZoom));
+    const position = [
+      marker.position[0],
+      marker.position[1]
+    ];
+    const animate = options?.animate !== false;
+    const duration = options?.duration ?? 0.5;
+    if (animate) {
+      this.map.flyTo(position, constrainedZoom, {
+        duration
+      });
+    } else {
+      this.map.setView(position, constrainedZoom);
+    }
+    return true;
+  }
   /**
    * Disposes of the marker manager and cleans up resources
    *
@@ -11276,10 +11341,9 @@ var MarkerManager = class {
     const iconUrl = `${this.iconBasePath}${iconType}.png`;
     return import_leaflet3.default.icon({
       iconUrl,
-      iconSize: [30, 40],
-      // Default marker size
-      iconAnchor: [16, 36],
-      // Point of the icon which will correspond to marker's location
+      iconSize: [MARKER_SPEC.WIDTH, MARKER_SPEC.HEIGHT],
+      iconAnchor: [MARKER_SPEC.ANCHOR_X, MARKER_SPEC.ANCHOR_Y],
+      // Anchor point aligns with marker location
       popupAnchor: [0, 0],
       // Point from which the popup should open relative to the iconAnchor
       shadowUrl: void 0,
@@ -11409,8 +11473,8 @@ var MarkerManager = class {
     }
     const overlaySize = 40;
     const borderWidth = 1;
-    const overlayAnchorX = 20;
-    const overlayAnchorY = 35;
+    const overlayAnchorX = overlaySize / 2 + (MARKER_SPEC.WIDTH / 2 - MARKER_SPEC.ANCHOR_X);
+    const overlayAnchorY = overlaySize / 2 + (MARKER_SPEC.HEIGHT / 2 - MARKER_SPEC.ANCHOR_Y);
     const overlayHTML = `
       <div style="
         width: ${overlaySize}px;
@@ -12363,6 +12427,34 @@ var EdgePdfViewer = class {
   getMarkerManager() {
     return this.markerManager;
   }
+  /**
+   * Focuses on a marker by panning and zooming to its position
+   *
+   * This is a convenience method that delegates to the marker manager's focusMarker method.
+   *
+   * @param markerOrId - Marker ID string or Marker object
+   * @param options - Optional focus options
+   * @param options.zoom - Target zoom level (uses marker's zoom or default if not provided)
+   * @param options.animate - Whether to animate the transition (default: true)
+   * @param options.duration - Animation duration in seconds (default: 0.5)
+   * @returns True if focus was successful, false if marker not found or viewer not initialized
+   *
+   * @example
+   * ```typescript
+   * // Focus on marker by ID
+   * viewer.focusMarker('marker-123');
+   *
+   * // Focus with specific zoom level
+   * viewer.focusMarker('marker-123', { zoom: 3 });
+   * ```
+   */
+  focusMarker(markerOrId, options) {
+    if (!this.markerManager) {
+      console.warn("Marker manager not available");
+      return false;
+    }
+    return this.markerManager.focusMarker(markerOrId, options);
+  }
   /**
    * Disposes of the map instance and cleans up resources
    *
@@ -12974,6 +13066,21 @@ function useMarkers() {
       console.error("Failed to clear markers:", error);
     }
   }, [viewer, isInitialized]);
+  const focusMarker = useCallback3(
+    (markerOrId, options) => {
+      if (!viewer || !isInitialized) {
+        console.warn("Viewer not initialized");
+        return false;
+      }
+      try {
+        return viewer.focusMarker(markerOrId, options);
+      } catch (error) {
+        console.error("Failed to focus marker:", error);
+        return false;
+      }
+    },
+    [viewer, isInitialized]
+  );
   return {
     markers,
     addMarker,
@@ -12983,7 +13090,8 @@ function useMarkers() {
     getAllMarkers,
     exportMarkers,
     importMarkers,
-    clearMarkers
+    clearMarkers,
+    focusMarker
   };
 }
 

package/dist/lib/use-markers.d.ts

@@ -22,6 +22,12 @@ export interface UseMarkersReturn {
     importMarkers: (data: MarkerData) => boolean;
     /** Clear all markers */
     clearMarkers: () => void;
+    /** Focus on a marker by panning and zooming to its position */
+    focusMarker: (markerOrId: string | Marker, options?: {
+        zoom?: number;
+        animate?: boolean;
+        duration?: number;
+    }) => boolean;
 }
 /**
  * Hook to manage markers in the viewer

package/dist/lib/use-markers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-markers.d.ts","sourceRoot":"","sources":["../../src/lib/use-markers.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAG9D;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,sBAAsB;IACtB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,uBAAuB;IACvB,SAAS,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,MAAM,GAAG,IAAI,CAAC;IAC3D,4BAA4B;IAC5B,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IACtC,sBAAsB;IACtB,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK,OAAO,CAAC;IAChE,yBAAyB;IACzB,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IACzC,sBAAsB;IACtB,aAAa,EAAE,MAAM,MAAM,EAAE,CAAC;IAC9B,6BAA6B;IAC7B,aAAa,EAAE,MAAM,UAAU,CAAC;IAChC,+BAA+B;IAC/B,aAAa,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC;IAC7C,wBAAwB;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,UAAU,IAAI,gBAAgB,CAkN7C"}
+{"version":3,"file":"use-markers.d.ts","sourceRoot":"","sources":["../../src/lib/use-markers.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAG9D;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,sBAAsB;IACtB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,uBAAuB;IACvB,SAAS,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,MAAM,GAAG,IAAI,CAAC;IAC3D,4BAA4B;IAC5B,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IACtC,sBAAsB;IACtB,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK,OAAO,CAAC;IAChE,yBAAyB;IACzB,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IACzC,sBAAsB;IACtB,aAAa,EAAE,MAAM,MAAM,EAAE,CAAC;IAC9B,6BAA6B;IAC7B,aAAa,EAAE,MAAM,UAAU,CAAC;IAChC,+BAA+B;IAC/B,aAAa,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC;IAC7C,wBAAwB;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,+DAA+D;IAC/D,WAAW,EAAE,CACX,UAAU,EAAE,MAAM,GAAG,MAAM,EAC3B,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,KACE,OAAO,CAAC;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,UAAU,IAAI,gBAAgB,CA2O7C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edgepdf/viewer-react",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "description": "EdgePDF Viewer - React components for viewing PDF documents with interactive markers and zoom controls",
   "type": "module",
   "main": "./dist/index.js",