@edgepdf/viewer-js 0.0.32 → 0.0.34

package/README.md

@@ -8,18 +8,19 @@ Core JavaScript library for the EdgePDF viewer, providing Leaflet map integratio
 npm install @edgepdf/viewer-js
 # or
 pnpm add @edgepdf/viewer-js
+# or
+yarn add @edgepdf/viewer-js
 ```
 
 **Note:** Leaflet is bundled with this library, so you don't need to install it separately. **CSS styles are automatically injected** when you import the library - no manual CSS import needed!
 
-## Usage
+## Quick Start
 
 ### Basic Example
 
 ```typescript
 import { EdgePdfViewer } from '@edgepdf/viewer-js';
 import type { ViewerConfig } from '@edgepdf/types';
-// CSS is automatically injected - no need to import styles manually!
 
 // Get container element
 const container = document.getElementById('map-container');
@@ -40,6 +41,16 @@ const config: ViewerConfig = {
 const viewer = new EdgePdfViewer({ container, config });
 viewer.initialize();
 
+// Access marker manager
+const markerManager = viewer.getMarkerManager();
+if (markerManager) {
+  // Create a marker
+  const marker = markerManager.createMarker({
+    position: [1500, 1000], // [lat, lng] in Leaflet coordinates
+    label: 'My Marker',
+  });
+}
+
 // Cleanup when done
 viewer.dispose();
 ```
@@ -49,7 +60,6 @@ viewer.dispose();
 ```typescript
 import { EdgePdfViewer } from '@edgepdf/viewer-js';
 import type { ViewerConfig, MapOptions } from '@edgepdf/types';
-// CSS is automatically injected - no need to import styles manually!
 
 const config: ViewerConfig = {
   tileUrl: 'https://example.com/tiles/{z}/{x}/{y}.png',
@@ -129,10 +139,448 @@ Checks if the map is initialized.
 
 **Returns:** `true` if map is initialized, `false` otherwise
 
+##### `getTileLayerManager(): TileLayerManager | null`
+
+Gets the tile layer manager instance.
+
+**Returns:** The tile layer manager, or `null` if not created
+
+##### `getCoordinateMapper(): CoordinateMapper | null`
+
+Gets the coordinate mapper instance.
+
+**Returns:** The coordinate mapper, or `null` if not created
+
+##### `getZoomController(): ZoomController | null`
+
+Gets the zoom controller instance.
+
+**Returns:** The zoom controller, or `null` if not created
+
+##### `getMarkerManager(): MarkerManager | null`
+
+Gets the marker manager instance.
+
+**Returns:** The marker manager, or `null` if not created
+
+##### `focusMarker(markerOrId: string | Marker, options?: FocusOptions): boolean`
+
+Focuses on a marker by panning and zooming to its position.
+
+**Parameters:**
+
+- `markerOrId` - Marker ID string or Marker object
+- `options` - Optional focus options
+  - `zoom?: number` - Target zoom level (uses marker's zoom or default if not provided)
+  - `animate?: boolean` - Whether to animate the transition (default: true)
+  - `duration?: number` - Animation duration in seconds (default: 0.5)
+  - `offsetLeft?: number` - Pixel offset to move focus marker to the left (default: 0)
+  - `offsetRight?: number` - Pixel offset to move focus marker to the right (default: 0)
+  - `offsetTop?: number` - Pixel offset to move focus marker upward (default: 0)
+  - `offsetBottom?: number` - Pixel offset to move focus marker downward (default: 0)
+
+**Returns:** `true` if focus was successful, `false` if marker not found or viewer not initialized
+
+**Example:**
+```typescript
+// Focus with offset to account for overlay
+viewer.focusMarker('marker-123', { offsetLeft: 100, offsetTop: 50 });
+```
+
 ##### `dispose(): void`
 
 Disposes of the map instance and cleans up resources. This should be called when the viewer is no longer needed to prevent memory leaks and event listener issues.
 
+---
+
+### MarkerManager
+
+Manages markers on the Leaflet map. Access via `viewer.getMarkerManager()`.
+
+#### Methods
+
+##### `createMarker(options: CreateMarkerOptions): Marker`
+
+Creates a new marker from coordinates.
+
+**Parameters:**
+
+- `options.position?: LeafletCoords` - Leaflet coordinates [lat, lng]
+- `options.imageCoords?: ImageCoords` - Image pixel coordinates {x, y}
+- `options.label?: string` - Marker label/tooltip text
+- `options.description?: string` - Marker description
+- `options.href?: string` - Link URL (optional)
+- `options.target?: string` - Link target (optional)
+- `options.showLabel?: boolean` - Show label/tooltip
+- `options.id?: string` - Custom marker ID (auto-generated if not provided)
+- `options.iconType?: 'pin-gray' | 'pin-yellow'` - Icon type for the marker
+- `options.referenceId?: string` - Reference ID for linking to external systems
+- `options.draggable?: boolean` - Enable dragging for this specific marker
+- `options.editable?: boolean` - Enable editing for this specific marker
+- `options.deletable?: boolean` - Enable deleting for this specific marker
+
+**Returns:** The created marker
+
+**Throws:**
+
+- `Error` if neither position nor imageCoords is provided
+- `Error` if coordinates are invalid or out of bounds
+
+##### `getMarker(id: string): Marker | null`
+
+Gets a marker by ID.
+
+**Returns:** The marker, or `null` if not found
+
+##### `getAllMarkers(): Marker[]`
+
+Gets all markers.
+
+**Returns:** Array of all markers
+
+##### `getMarkerCount(): number`
+
+Gets the total number of markers.
+
+**Returns:** Number of markers
+
+##### `hasMarker(id: string): boolean`
+
+Checks if a marker exists.
+
+**Returns:** `true` if marker exists, `false` otherwise
+
+##### `updateMarker(id: string, updates: Partial<Marker>): boolean`
+
+Updates a marker's properties.
+
+**Parameters:**
+
+- `id` - Marker ID
+- `updates` - Partial marker object with properties to update
+
+**Returns:** `true` if marker was updated, `false` if not found
+
+##### `updateMarkerPosition(id: string, position: LeafletCoords): boolean`
+
+Updates a marker's position.
+
+**Parameters:**
+
+- `id` - Marker ID
+- `position` - New Leaflet coordinates [lat, lng]
+
+**Returns:** `true` if marker was updated, `false` if not found
+
+##### `updateMarkerIcon(id: string, iconType: 'pin-gray' | 'pin-yellow'): boolean`
+
+Updates the icon type for a specific marker.
+
+**Returns:** `true` if marker was updated, `false` if not found
+
+##### `updateAllMarkerIcons(iconType: 'pin-gray' | 'pin-yellow'): void`
+
+Updates all markers to use a new icon type.
+
+##### `removeMarker(id: string): boolean`
+
+Removes a marker by ID.
+
+**Returns:** `true` if marker was removed, `false` if not found
+
+##### `removeAllMarkers(): void`
+
+Removes all markers.
+
+##### `deleteMarker(id: string): boolean`
+
+Deletes a marker by ID (triggers delete event).
+
+**Returns:** `true` if marker was deleted, `false` if not found
+
+##### `exportMarkers(): MarkerData`
+
+Exports all markers as JSON data.
+
+**Returns:** MarkerData object containing all markers and metadata
+
+##### `importMarkers(data: MarkerData, options?: ImportOptions): ImportResult`
+
+Imports markers from MarkerData.
+
+**Parameters:**
+
+- `data` - MarkerData object to import
+- `options` - Import options
+  - `clearExisting?: boolean` - If true, removes all existing markers before import (default: false)
+  - `validateCoordinates?: boolean` - If true, validates coordinates are within bounds (default: true)
+
+**Returns:** Import result with success status and details
+
+##### `setInteractionConfig(config: Partial<MarkerInteractionConfig>): void`
+
+Sets marker interaction configuration.
+
+**Parameters:**
+
+- `config.draggable?: boolean` - Enable dragging markers
+- `config.selectable?: boolean` - Enable selecting markers
+- `config.showTooltips?: boolean` - Show tooltips on hover
+- `config.showPopups?: boolean` - Show popups on click
+- `config.multiSelect?: boolean` - Allow multiple marker selection
+- `config.showEditButton?: boolean` - Show edit button in popups
+- `config.showDeleteButton?: boolean` - Show delete button in popups
+- `config.onEdit?: (marker: Marker) => Promise<Marker | null>` - Custom edit handler
+- `config.onDelete?: (marker: Marker) => Promise<boolean>` - Custom delete handler
+- `config.onActiveMarkerChange?: (marker: Marker | null) => void` - Active marker change callback
+
+##### `getInteractionConfig(): MarkerInteractionConfig`
+
+Gets the current interaction configuration.
+
+**Returns:** Current interaction configuration
+
+##### `selectMarker(id: string): boolean`
+
+Selects a marker.
+
+**Returns:** `true` if marker was selected, `false` if not found
+
+##### `deselectMarker(id: string): boolean`
+
+Deselects a marker.
+
+**Returns:** `true` if marker was deselected, `false` if not found
+
+##### `deselectAllMarkers(): void`
+
+Deselects all markers.
+
+##### `getSelectionState(): MarkerSelectionState`
+
+Gets the current selection state.
+
+**Returns:** Selection state object with selected IDs and count
+
+##### `isMarkerSelected(id: string): boolean`
+
+Checks if a marker is selected.
+
+**Returns:** `true` if marker is selected, `false` otherwise
+
+##### `setActiveMarker(id: string | null): boolean`
+
+Sets the active marker (for popup management).
+
+**Returns:** `true` if active marker was set, `false` if marker not found
+
+##### `getActiveMarker(): Marker | null`
+
+Gets the currently active marker.
+
+**Returns:** The active marker, or `null` if no marker is active
+
+##### `focusMarker(markerOrId: string | Marker, options?: FocusOptions): boolean`
+
+Focuses on a marker by panning and zooming to its position.
+
+**Parameters:**
+
+- `markerOrId` - Marker ID string or Marker object
+- `options` - Optional focus options
+  - `zoom?: number` - Target zoom level
+  - `animate?: boolean` - Whether to animate (default: true)
+  - `duration?: number` - Animation duration in seconds (default: 0.5)
+  - `offsetLeft?: number` - Pixel offset to move focus marker to the left (default: 0)
+  - `offsetRight?: number` - Pixel offset to move focus marker to the right (default: 0)
+  - `offsetTop?: number` - Pixel offset to move focus marker upward (default: 0)
+  - `offsetBottom?: number` - Pixel offset to move focus marker downward (default: 0)
+
+**Returns:** `true` if focus was successful, `false` if marker not found
+
+**Example:**
+```typescript
+// Focus with offset to account for overlay
+markerManager.focusMarker('marker-123', { offsetLeft: 100, offsetTop: 50 });
+```
+
+##### `setDefaultIconType(iconType: 'pin-gray' | 'pin-yellow'): void`
+
+Sets the default icon type for new markers.
+
+##### `getDefaultIconType(): 'pin-gray' | 'pin-yellow'`
+
+Gets the current default icon type.
+
+**Returns:** Current default icon type
+
+##### `setIconBasePath(basePath: string): void`
+
+Sets the base path for marker icons.
+
+**Example:**
+
+```typescript
+// Use library's built-in icons (default)
+markerManager.setIconBasePath('./images/');
+
+// Use custom icons from public folder
+markerManager.setIconBasePath('/');
+
+// Use icons from a CDN
+markerManager.setIconBasePath('https://cdn.example.com/icons/');
+```
+
+##### `getIconBasePath(): string`
+
+Gets the current base path for marker icons.
+
+**Returns:** The current icon base path
+
+##### `on(eventType: MarkerEventType, callback: (event: MarkerEvent) => void): () => void`
+
+Registers an event listener.
+
+**Parameters:**
+
+- `eventType` - Event type: 'click' | 'dragstart' | 'drag' | 'dragend' | 'edit' | 'delete'
+- `callback` - Callback function
+
+**Returns:** Unsubscribe function
+
+**Example:**
+
+```typescript
+const unsubscribe = markerManager.on('click', (event) => {
+  console.log('Marker clicked:', event.marker.id);
+});
+
+// Later, to unsubscribe:
+unsubscribe();
+```
+
+##### `off(eventType: MarkerEventType, callback: (event: MarkerEvent) => void): void`
+
+Unregisters an event listener.
+
+##### `removeAllListeners(eventType?: MarkerEventType): void`
+
+Removes all event listeners for a specific event type, or all events if no type is provided.
+
+##### `dispose(): void`
+
+Disposes of the marker manager and cleans up resources.
+
+---
+
+### ZoomController
+
+Manages zoom state and operations. Access via `viewer.getZoomController()`.
+
+#### Methods
+
+##### `zoomIn(options?: { animate?: boolean }): boolean`
+
+Zooms in by one level.
+
+**Parameters:**
+
+- `options.animate?: boolean` - Whether to animate the zoom (default: true)
+
+**Returns:** `true` if zoomed in, `false` if already at max zoom
+
+##### `zoomOut(options?: { animate?: boolean }): boolean`
+
+Zooms out by one level.
+
+**Parameters:**
+
+- `options.animate?: boolean` - Whether to animate the zoom (default: true)
+
+**Returns:** `true` if zoomed out, `false` if already at min zoom
+
+##### `setZoom(zoom: number, options?: { animate?: boolean }): void`
+
+Sets a specific zoom level.
+
+**Parameters:**
+
+- `zoom` - Target zoom level
+- `options.animate?: boolean` - Whether to animate the zoom (default: true)
+
+**Throws:**
+
+- `Error` if zoom is not a finite number
+
+##### `getZoom(): number`
+
+Gets the current zoom level.
+
+**Returns:** Current zoom level
+
+##### `getZoomState(): ZoomState`
+
+Gets the current zoom state.
+
+**Returns:** Zoom state object with currentZoom, minZoom, maxZoom
+
+##### `getMinZoom(): number`
+
+Gets the minimum zoom level.
+
+**Returns:** Minimum zoom level
+
+##### `getMaxZoom(): number`
+
+Gets the maximum zoom level.
+
+**Returns:** Maximum zoom level
+
+##### `canZoomIn(): boolean`
+
+Checks if can zoom in.
+
+**Returns:** `true` if can zoom in, `false` otherwise
+
+##### `canZoomOut(): boolean`
+
+Checks if can zoom out.
+
+**Returns:** `true` if can zoom out, `false` otherwise
+
+##### `onZoomChange(listener: (state: ZoomState) => void): () => void`
+
+Registers a zoom change listener.
+
+**Returns:** Unsubscribe function
+
+##### `removeAllListeners(): void`
+
+Removes all zoom change listeners.
+
+##### `dispose(): void`
+
+Disposes of the zoom controller and cleans up resources.
+
+---
+
+### Utility Functions
+
+#### `createZoomControls(container: HTMLElement, zoomController: ZoomController, options?: ZoomControlsOptions): HTMLElement`
+
+Creates zoom control buttons (zoom in/out) in the specified container.
+
+**Parameters:**
+
+- `container` - Container element
+- `zoomController` - Zoom controller instance
+- `options` - Optional configuration
+  - `position?: ZoomControlsPosition` - Position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' (default: 'top-right')
+
+**Returns:** The created controls element
+
+---
+
 ## Configuration
 
 ### ViewerConfig
@@ -229,16 +677,77 @@ The viewer uses Leaflet's `CRS.Simple` coordinate system, which treats coordinat
 - Y-axis: vertical pixel position (0 to image height)
 - Origin: top-left corner (0, 0)
 
-## Building
+## Examples
+
+### Working with Markers
+
+```typescript
+const viewer = new EdgePdfViewer({ container, config });
+viewer.initialize();
+
+const markerManager = viewer.getMarkerManager();
+if (!markerManager) return;
+
+// Create a marker
+const marker = markerManager.createMarker({
+  position: [1500, 1000],
+  label: 'My Marker',
+  description: 'This is a marker description',
+  iconType: 'pin-yellow',
+});
+
+// Update marker
+markerManager.updateMarker(marker.id, {
+  label: 'Updated Label',
+  description: 'Updated description',
+});
+
+// Listen to marker events
+markerManager.on('click', (event) => {
+  console.log('Marker clicked:', event.marker);
+});
 
-Run `nx build viewer-js` to build the library.
+markerManager.on('dragend', (event) => {
+  console.log('Marker dragged to:', event.marker.position);
+});
 
-## Running Tests
+// Export markers
+const markerData = markerManager.exportMarkers();
+console.log(JSON.stringify(markerData, null, 2));
 
-Run `nx test viewer-js` to execute the unit tests via [Jest](https://jestjs.io).
+// Import markers
+markerManager.importMarkers(markerData, {
+  clearExisting: true,
+  validateCoordinates: true,
+});
+```
 
-Run `nx test viewer-js --coverage` to generate coverage reports.
+### Working with Zoom
 
-## License
+```typescript
+const viewer = new EdgePdfViewer({ container, config });
+viewer.initialize();
 
-MIT
+const zoomController = viewer.getZoomController();
+if (!zoomController) return;
+
+// Zoom in
+zoomController.zoomIn();
+
+// Zoom out
+zoomController.zoomOut();
+
+// Set specific zoom level
+zoomController.setZoom(3);
+
+// Get zoom state
+const zoomState = zoomController.getZoomState();
+console.log('Current zoom:', zoomState.currentZoom);
+console.log('Min zoom:', zoomState.minZoom);
+console.log('Max zoom:', zoomState.maxZoom);
+
+// Listen to zoom changes
+zoomController.onZoomChange((state) => {
+  console.log('Zoom changed to:', state.currentZoom);
+});
+```

package/dist/index.css

@@ -1,3 +1,5 @@
+@import "https://fonts.googleapis.com/css2?family=Lato:wght@300;400;500;600;700&display=swap";
+
 /* node_modules/.pnpm/leaflet@1.9.4/node_modules/leaflet/dist/leaflet.css */
 .leaflet-pane,
 .leaflet-tile,
@@ -673,6 +675,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;
@@ -680,14 +683,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;
@@ -699,20 +703,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;
@@ -724,8 +728,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;
@@ -741,52 +745,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;
@@ -798,6 +807,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;
@@ -805,14 +815,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;
@@ -824,20 +835,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;
@@ -849,8 +860,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;
@@ -858,43 +869,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

@@ -9589,6 +9589,12 @@ var S3_PREFIX = {
   PROCESSED: "processed"
 };
 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;
@@ -11290,6 +11296,98 @@ 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)
+   * @param options.offsetLeft - Pixel offset to move focus marker to the left (default: 0)
+   * @param options.offsetRight - Pixel offset to move focus marker to the right (default: 0)
+   * @param options.offsetTop - Pixel offset to move focus marker upward (default: 0)
+   * @param options.offsetBottom - Pixel offset to move focus marker downward (default: 0)
+   * @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 });
+   *
+   * // Focus with offset to account for overlay
+   * markerManager.focusMarker('marker-123', { offsetLeft: 100, offsetTop: 50 });
+   * ```
+   */
+  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;
+    const offsetX = (options?.offsetRight ?? 0) - (options?.offsetLeft ?? 0);
+    const offsetY = (options?.offsetBottom ?? 0) - (options?.offsetTop ?? 0);
+    if (offsetX !== 0 || offsetY !== 0) {
+      const currentZoom = this.map.getZoom();
+      const needsZoomChange = currentZoom !== constrainedZoom;
+      if (needsZoomChange) {
+        this.map.setZoom(constrainedZoom, { animate: false });
+      }
+      const markerPoint = this.map.latLngToContainerPoint(position);
+      const offsetPoint = import_leaflet3.default.point(
+        markerPoint.x + offsetX,
+        markerPoint.y + offsetY
+      );
+      const offsetLatLng = this.map.containerPointToLatLng(offsetPoint);
+      if (needsZoomChange && animate) {
+        this.map.setZoom(currentZoom, { animate: false });
+      }
+      if (animate) {
+        this.map.flyTo(offsetLatLng, constrainedZoom, {
+          duration
+        });
+      } else {
+        this.map.setView(offsetLatLng, constrainedZoom);
+      }
+    } else {
+      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
    *
@@ -11312,10 +11410,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,
@@ -11445,8 +11542,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;
@@ -12407,6 +12504,41 @@ 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)
+   * @param options.offsetLeft - Pixel offset to move focus marker to the left (default: 0)
+   * @param options.offsetRight - Pixel offset to move focus marker to the right (default: 0)
+   * @param options.offsetTop - Pixel offset to move focus marker upward (default: 0)
+   * @param options.offsetBottom - Pixel offset to move focus marker downward (default: 0)
+   * @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 });
+   *
+   * // Focus with offset to account for overlay
+   * viewer.focusMarker('marker-123', { offsetLeft: 100, offsetTop: 50 });
+   * ```
+   */
+  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
    *

package/dist/lib/marker-manager.d.ts

@@ -373,6 +373,51 @@ export declare class MarkerManager {
      * @param iconType - Icon type to apply to all markers
      */
     updateAllMarkerIcons(iconType: 'pin-gray' | 'pin-yellow'): void;
+    /**
+     * 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)
+     * @param options.offsetLeft - Pixel offset to move focus marker to the left (default: 0)
+     * @param options.offsetRight - Pixel offset to move focus marker to the right (default: 0)
+     * @param options.offsetTop - Pixel offset to move focus marker upward (default: 0)
+     * @param options.offsetBottom - Pixel offset to move focus marker downward (default: 0)
+     * @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 });
+     *
+     * // Focus with offset to account for overlay
+     * markerManager.focusMarker('marker-123', { offsetLeft: 100, offsetTop: 50 });
+     * ```
+     */
+    focusMarker(markerOrId: string | Marker, options?: {
+        zoom?: number;
+        animate?: boolean;
+        duration?: number;
+        offsetLeft?: number;
+        offsetRight?: number;
+        offsetTop?: number;
+        offsetBottom?: number;
+    }): boolean;
     /**
      * Disposes of the marker manager and cleans up resources
      *

package/dist/lib/marker-manager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"marker-manager.d.ts","sourceRoot":"","sources":["../../src/lib/marker-manager.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"marker-manager.d.ts","sourceRoot":"","sources":["../../src/lib/marker-manager.ts"],"names":[],"mappings":"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"}

package/dist/lib/viewer.d.ts

@@ -124,6 +124,43 @@ export declare class EdgePdfViewer {
      * @returns The marker manager, or null if not created
      */
     getMarkerManager(): MarkerManager | null;
+    /**
+     * 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)
+     * @param options.offsetLeft - Pixel offset to move focus marker to the left (default: 0)
+     * @param options.offsetRight - Pixel offset to move focus marker to the right (default: 0)
+     * @param options.offsetTop - Pixel offset to move focus marker upward (default: 0)
+     * @param options.offsetBottom - Pixel offset to move focus marker downward (default: 0)
+     * @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 });
+     *
+     * // Focus with offset to account for overlay
+     * viewer.focusMarker('marker-123', { offsetLeft: 100, offsetTop: 50 });
+     * ```
+     */
+    focusMarker(markerOrId: string | import('@edgepdf/types').Marker, options?: {
+        zoom?: number;
+        animate?: boolean;
+        duration?: number;
+        offsetLeft?: number;
+        offsetRight?: number;
+        offsetTop?: number;
+        offsetBottom?: number;
+    }): boolean;
     /**
      * Disposes of the map instance and cleans up resources
      *

package/dist/lib/viewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"viewer.d.ts","sourceRoot":"","sources":["../../src/lib/viewer.ts"],"names":[],"mappings":"AAAA,OAAO,CAAC,MAAM,SAAS,CAAC;AACxB,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIpD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,aAAa;IACxB,OAAO,CAAC,GAAG,CAAsB;IACjC,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,MAAM,CAAe;IAC7B,OAAO,CAAC,UAAU,CAAC,CAAa;IAChC,OAAO,CAAC,gBAAgB,CAAiC;IACzD,OAAO,CAAC,gBAAgB,CAAiC;IACzD,OAAO,CAAC,cAAc,CAA+B;IACrD,OAAO,CAAC,aAAa,CAA8B;IAEnD;;;;;;;;;;OAUG;gBACS,OAAO,EAAE;QACnB,SAAS,EAAE,WAAW,CAAC;QACvB,MAAM,EAAE,YAAY,CAAC;QACrB,UAAU,CAAC,EAAE,UAAU,CAAC;KACzB;IAmBD;;;;;;;OAOG;IACH,UAAU,IAAI,IAAI;IA6FlB;;;;;;OAMG;IACH,OAAO,CAAC,2BAA2B;IAmBnC;;;;OAIG;IACH,OAAO,CAAC,qBAAqB;IAuB7B;;;;OAIG;IACH,MAAM,IAAI,CAAC,CAAC,GAAG,GAAG,IAAI;IAItB;;;;OAIG;IACH,aAAa,IAAI,OAAO;IAIxB;;;;;;;OAOG;IACH,OAAO,CAAC,YAAY;IAwBpB;;;;OAIG;IACH,mBAAmB,IAAI,gBAAgB,GAAG,IAAI;IAI9C;;;;OAIG;IACH,mBAAmB,IAAI,gBAAgB,GAAG,IAAI;IAI9C;;;;OAIG;IACH,iBAAiB,IAAI,cAAc,GAAG,IAAI;IAI1C;;;;OAIG;IACH,gBAAgB,IAAI,aAAa,GAAG,IAAI;IAIxC;;;;;OAKG;IACH,OAAO,IAAI,IAAI;CA0BhB"}
+{"version":3,"file":"viewer.d.ts","sourceRoot":"","sources":["../../src/lib/viewer.ts"],"names":[],"mappings":"AAAA,OAAO,CAAC,MAAM,SAAS,CAAC;AACxB,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIpD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,aAAa;IACxB,OAAO,CAAC,GAAG,CAAsB;IACjC,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,MAAM,CAAe;IAC7B,OAAO,CAAC,UAAU,CAAC,CAAa;IAChC,OAAO,CAAC,gBAAgB,CAAiC;IACzD,OAAO,CAAC,gBAAgB,CAAiC;IACzD,OAAO,CAAC,cAAc,CAA+B;IACrD,OAAO,CAAC,aAAa,CAA8B;IAEnD;;;;;;;;;;OAUG;gBACS,OAAO,EAAE;QACnB,SAAS,EAAE,WAAW,CAAC;QACvB,MAAM,EAAE,YAAY,CAAC;QACrB,UAAU,CAAC,EAAE,UAAU,CAAC;KACzB;IAmBD;;;;;;;OAOG;IACH,UAAU,IAAI,IAAI;IA6FlB;;;;;;OAMG;IACH,OAAO,CAAC,2BAA2B;IAmBnC;;;;OAIG;IACH,OAAO,CAAC,qBAAqB;IAuB7B;;;;OAIG;IACH,MAAM,IAAI,CAAC,CAAC,GAAG,GAAG,IAAI;IAItB;;;;OAIG;IACH,aAAa,IAAI,OAAO;IAIxB;;;;;;;OAOG;IACH,OAAO,CAAC,YAAY;IAwBpB;;;;OAIG;IACH,mBAAmB,IAAI,gBAAgB,GAAG,IAAI;IAI9C;;;;OAIG;IACH,mBAAmB,IAAI,gBAAgB,GAAG,IAAI;IAI9C;;;;OAIG;IACH,iBAAiB,IAAI,cAAc,GAAG,IAAI;IAI1C;;;;OAIG;IACH,gBAAgB,IAAI,aAAa,GAAG,IAAI;IAIxC;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BG;IACH,WAAW,CACT,UAAU,EAAE,MAAM,GAAG,OAAO,gBAAgB,EAAE,MAAM,EACpD,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,GACA,OAAO;IASV;;;;;OAKG;IACH,OAAO,IAAI,IAAI;CA0BhB"}

package/package.json

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