API Reference

// Basic initialization with default theme (embedded)
const signSure = new SignSure({
    container: '#pdf-container',
    licenseKey: 'your-license-key',
    theme: 'default', // Always available instantly
    initialScale: 1.0,
    enableNavigation: true,
    enableZoom: true,
    maxFields: 50,
    allowResize: true,
    allowDelete: true,
    debug: false,

    // Field management options
    fieldManagement: {
        selectAll: true,     // Enable "Select All Fields" option
        deselectAll: true,   // Enable "Deselect All Fields" option
        clearAll: true       // Enable "Clear All Fields" option
    },

    // Zoom control options
    zoomControls: {
        enabled: true,       // Enable zoom controls in toolbar
        minZoom: 0.25,      // Minimum zoom level (25%)
        maxZoom: 5.0,       // Maximum zoom level (500%)
        initialZoom: 'auto', // 'auto' for best fit, or number for specific zoom
        zoomStep: 0.25,     // Zoom step increment
        fitToWidth: true    // Enable fit to width button
    }
});

// Initialize with dynamic theme (loaded on demand)
const signSureWithDarkTheme = new SignSure({
    container: '#pdf-container',
    licenseKey: 'your-license-key',
    theme: 'dark' // Loaded dynamically when first used
});

// Initialize with minimal theme
const signSureMinimal = new SignSure({
    container: '#pdf-container',
    licenseKey: 'your-license-key',
    theme: 'minimal' // Loaded dynamically when first used
});

// Load from URL
await signSure.loadPDF('https://example.com/document.pdf');

// Load from File input
const fileInput = document.getElementById('file-input');
await signSure.loadPDF(fileInput.files[0]);

// Load from ArrayBuffer
const arrayBuffer = await fetch('document.pdf').then(r => r.arrayBuffer());
await signSure.loadPDF(arrayBuffer);

if (signSure.isDocumentLoaded()) {
    console.log('Document is ready');
} else {
    console.log('No document loaded');
}

signSure.clearDocument();

const info = signSure.getDocumentInfo();
console.log(info);
// {
//   numPages: 5,
//   title: "Contract.pdf",
//   author: "John Doe",
//   subject: "Service Agreement",
//   creator: "Adobe Acrobat",
//   producer: "Adobe PDF Library",
//   creationDate: "2024-01-15T10:30:00Z",
//   modificationDate: "2024-01-15T11:45:00Z"
// }

// Add signature field
const fieldId = await signSure.addField({
    type: 'signature',
    page: 1,
    x: 100,
    y: 200,
    width: 200,
    height: 80,
    required: true,
    label: 'Customer Signature'
});

// Add text field
await signSure.addField({
    type: 'text',
    page: 1,
    x: 100,
    y: 300,
    width: 200,
    height: 30,
    required: true,
    label: 'Full Name',
    placeholder: 'Enter your full name'
});

const fields = await signSure.getFields();
console.log(fields);
// [
//   {
//     id: 'field-1',
//     type: 'signature',
//     page: 1,
//     x: 100,
//     y: 200,
//     width: 200,
//     height: 80,
//     required: true,
//     label: 'Customer Signature'
//   },
//   // ... more fields
// ]

await signSure.removeField('field-1');

// Update field position and size
await signSure.updateField('field-1', {
    x: 150,
    y: 250,
    width: 300,
    height: 100
});

// Update field label and requirements
await signSure.updateField('field-2', {
    label: 'Updated Label',
    required: true,
    placeholder: 'New placeholder text'
});

// Update field styling
await signSure.updateField('field-3', {
    style: {
        borderColor: '#ff0000',
        backgroundColor: '#fff0f0'
    }
});

// Select all fields in the document
signSure.selectAllFields();

// Listen for the event
signSure.on('fields:allSelected', (event) => {
    console.log(`Selected ${event.count} fields`);
});

// Deselect all fields in the document
signSure.deselectAllFields();

// Listen for the event
signSure.on('fields:allDeselected', (event) => {
    console.log(`Deselected ${event.count} fields`);
});

// Navigate to page 3
await signSure.goToPage(3);

// Navigate to first page
await signSure.goToPage(1);

// Navigate to last page
const totalPages = signSure.getTotalPages();
await signSure.goToPage(totalPages);

const currentPage = signSure.getCurrentPage();
console.log(`Currently viewing page: ${currentPage}`);

const totalPages = signSure.getTotalPages();
console.log(`Document has ${totalPages} pages`);

// Create page navigation
for (let i = 1; i <= totalPages; i++) {
    console.log(`Page ${i} available`);
}

// Zoom in by one step
signSure.pdfRenderer.zoomIn();

// Or access through hook methods (if using the provided hook)
this.zoomIn();

// Zoom out by one step
signSure.pdfRenderer.zoomOut();

// Or access through hook methods (if using the provided hook)
this.zoomOut();

// Set zoom to 150%
signSure.pdfRenderer.setScale(1.5);

// Set zoom to 50%
signSure.pdfRenderer.setScale(0.5);

// Or through hook methods with validation
this.setZoom(1.5);

// Fit PDF to container width
signSure.pdfRenderer.fitToWidth();

// Listen for zoom changes
signSure.on('scale:changed', (event) => {
    console.log(`Zoom changed to ${Math.round(event.newScale * 100)}%`);
});

// Export as JSON (default)
const jsonConfig = signSure.exportConfiguration();
console.log(jsonConfig);

// Export with specific options
const config = signSure.exportConfiguration({
    format: 'json',
    includeMetadata: true,
    coordinateFormat: 'pdf'
});

// Export as CSV
const csvConfig = signSure.exportConfiguration({
    format: 'csv',
    delimiter: ','
});

// Export for PyHanko PDF signing
const pyhankoConfig = signSure.exportConfiguration({
    format: 'json',
    coordinateFormat: 'pyhanko'
});

// Save configuration to file
const configBlob = new Blob([JSON.stringify(jsonConfig)], {
    type: 'application/json'
});
const url = URL.createObjectURL(configBlob);
const a = document.createElement('a');
a.href = url;
a.download = 'signature-fields.json';
a.click();

// Load PDF first
await signSure.loadPDF('document.pdf');

// Method 1: Import array of fields (recommended)
const fields = [
    {
        type: 'signature',
        page: 1,
        x: 100,
        y: 200,
        width: 200,
        height: 80,
        label: 'Client Signature'
    },
    {
        type: 'signature',
        page: 1,
        x: 350,
        y: 200,
        width: 200,
        height: 80,
        label: 'Witness Signature'
    }
];

// Clear existing fields first (optional)
signSure.fieldManager.clearAllFields();

// Import fields
const fieldIds = signSure.fieldManager.importConfiguration(fields);
console.log('Created field IDs:', fieldIds);

// Method 2: Import object with fields property
const config = {
    fields: [
        {
            type: 'signature',
            page: 2,
            x: 50,
            y: 300,
            width: 180,
            height: 70,
            label: 'Manager Approval'
        }
    ]
};
signSure.fieldManager.importConfiguration(config);

// Method 3: Import single field
const singleField = {
    type: 'signature',
    page: 1,
    x: 100,
    y: 400,
    width: 150,
    height: 60,
    label: 'Initial Here'
};
signSure.fieldManager.importConfiguration(singleField);

// Listen for import events
signSure.on('configuration:imported', (data) => {
    console.log(`Imported ${data.importedCount} fields`);
    if (data.errorCount > 0) {
        console.warn(`${data.errorCount} errors occurred`);
        data.errors.forEach(error => console.error(error));
    }
});

// Error handling
try {
    const fieldIds = signSure.fieldManager.importConfiguration(fields);
    console.log('Import successful:', fieldIds);
} catch (error) {
    console.error('Import failed:', error.message);
}

// Switch to dark theme
await signSure.switchTheme('dark');

// Switch with options
await signSure.switchTheme('minimal', { preload: true });

// Handle success/failure
const success = await signSure.switchTheme('dark');
if (success) {
    console.log('Theme applied successfully');
} else {
    console.error('Failed to apply theme');
}

const currentTheme = signSure.getCurrentTheme();
console.log('Current theme:', currentTheme); // 'default', 'dark', or 'minimal'

const availableThemes = signSure.getAvailableThemes();
console.log('Available themes:', Object.keys(availableThemes));

// Example output:
// {
//   default: {
//     name: 'Default',
//     description: 'Clean and professional default theme',
//     embedded: true
//   },
//   dark: {
//     name: 'Dark',
//     description: 'Dark theme for low-light environments',
//     path: './themes/dark.css'
//   },
//   minimal: {
//     name: 'Minimal',
//     description: 'Minimal theme with reduced visual elements',
//     path: './themes/minimal.css'
//   }
// }

// Preload themes for better performance
await signSure.preloadThemes(['dark', 'minimal']);

// Check results
const results = await signSure.preloadThemes(['dark', 'minimal']);
console.log('Preload results:', results);

// Example output:
// {
//   dark: { success: true, error: null },
//   minimal: { success: true, error: null }
// }

// Enable auto theme with default mapping
await signSure.enableAutoTheme();

// Custom theme mapping
await signSure.enableAutoTheme({
    dark: 'dark',    // Use dark theme when system prefers dark
    light: 'default' // Use default theme when system prefers light
});

// Check system preference
const themeManager = SignSure.getThemeManager();
const systemScheme = themeManager.getSystemColorScheme();
console.log('System prefers:', systemScheme); // 'dark', 'light', or 'no-preference'

// Listen for theme changes
const unsubscribe = signSure.onThemeChange((event, data) => {
    switch (event) {
        case 'theme-changed':
            console.log(`Theme changed from ${data.from} to ${data.to}`);
            break;
        case 'theme-loaded':
            console.log(`Theme loaded: ${data.theme}`);
            break;
        case 'theme-load-error':
            console.error(`Failed to load theme: ${data.theme}`, data.error);
            break;
        case 'system-theme-change':
            console.log(`System theme changed: prefers dark = ${data.prefersDark}`);
            break;
    }
});

// Unsubscribe when no longer needed
unsubscribe();

// Simple theme change listener
signSure.on('theme-changed', (event) => {
    console.log(`Theme changed to: ${event.theme}`);
});

// Listen for PDF loaded event
signSure.on('pdf:loaded', () => {
    console.log('PDF is ready!');
});

// Listen for field added event
signSure.on('field:added', (field) => {
    console.log('New field added:', field);
});

// Listen for errors
signSure.on('pdf:error', (error) => {
    console.error('PDF loading failed:', error);
});

// Remove specific event listener
signSure.off('pdf:loaded', myCallback);

// Remove all listeners for an event
signSure.off('pdf:loaded');

// Remove all listeners for all events
signSure.off();