import { WidgetAnnotation, GcProps, LineAnnotation, CircleAnnotation, SquareAnnotation, RedactAnnotation, TextAnnotation, InkAnnotation, PolyLineAnnotation, PolygonAnnotation, FreeTextAnnotation, FileAttachmentAnnotation, SoundAnnotation, ButtonWidget, ChoiceWidget, TextWidget, StampAnnotation, AnnotationBase, SignatureAnnotation, LinkAnnotation, PopupAnnotation, HighlightAnnotation, UnderlineAnnotation, SquigglyAnnotation, StrikeOutAnnotation, AnnotationTypeName } from "./Annotations/AnnotationTypes"; import { RichMediaAnnotation } from "./Annotations/RichMediaAnnotation"; import { ValidationCallerType } from "./FormFiller/types"; import { DocumentListItem, FieldAppearanceRenderingType, JsExecutionConfig, KeyboardShortcutDefinition, OpenParameters, OptionalContentConfig, SaveSettings, StampCategory, ViewerFeatureName } from "./Models/ViewerTypes"; import { LogLevel } from "./SharedDocuments/types"; import { ISupportApiBase } from "./SupportApi/ISupportApiBase"; import { TableDataExportFormat } from "./SupportApi/types"; import { ClientTableExtractOptions } from "./TableDataExtraction/types"; import { PageDisplayType, SaveAsOptions, SaveAsFormat } from "./Toolbar/controls/types"; import { UndoStorageOptions } from "./Undo/types"; /** * Configuration options for the Page Navigation toolbar component */ export type NavigationControlOptions = { /** * Show/hide the 'First Page' navigation button * @default false */ showFirstButton?: boolean; /** * Show/hide the 'Previous Page' navigation button * @default true */ showPrevButton?: boolean; /** * Show/hide the page number input and counter display * @default true */ showPageInput?: boolean; /** * Show/hide the 'Next Page' navigation button * @default true */ showNextButton?: boolean; /** * Show/hide the 'Last Page' navigation button * @default false */ showLastButton?: boolean; /** * Width of the page input container in pixels * @default 70 * @minimum 50 */ pageInputWidth?: number; /** * Custom format for the page counter text * Available placeholders: * - {{current}}: Current page number * - {{total}}: Total page count * @default "{{current}} / {{total}}" */ pageCounterFormat?: string; /** * Display text when no document is loaded * @default "-- / --" */ emptyPageCounterFormat?: string; /** * Controls the sizing of navigation buttons * - 'compact': 30px width * - 'standard': 40px width * - number: Custom width in pixels * @default 'compact' */ buttonSizing?: 'compact' | 'standard' | number; }; /** * Settings for the Reply Tool. **/ export type ReplyToolSettings = { /** * Enables read-only mode, preventing any modifications. **/ readOnly?: boolean; /** * Allows adding notes. **/ allowAddNote?: boolean; /** * Allows changing the user name. **/ allowChangeUserName?: boolean; /** * Allows adding replies. **/ allowAddReply?: boolean; /** * Allows deleting notes or replies. **/ allowDelete?: boolean; /** * Allows setting a status on notes or replies. **/ allowStatus?: boolean; /** * Allows modifying notes created by other users. **/ allowChangeOtherUser?: boolean; /** * Allows deleting notes or replies created by other users. **/ allowDeleteOtherUser?: boolean; /** * Allows setting a status on notes or replies created by other users. **/ allowStatusOtherUser?: boolean; /** * Allows adding replies to notes created by other users. **/ allowAddReplyOtherUser?: boolean; /** * Controls whether the Reply Tool automatically expands when a comment is added via the context menu. * * @property {boolean} [autoExpandOnCommentAdd=true] - Set to `true` to enable automatic expansion, * or `false` to disable it. * * @example * ```javascript * // Disable automatic expansion of the Reply Tool. * var viewer = new DsPdfViewer("#root", { replyTool: { autoExpandOnCommentAdd: false } }); * ``` **/ autoExpandOnCommentAdd?: boolean; /** * Defines the color used for temporarily highlighting an annotation on the PDF page * when it is selected in the comments list within the Reply Tool. * * @property {string} [annotationFocusColor='#ff0000'] - The highlight color in hex format. * This setting is also utilized in the `showAnnotationFocusOutline` method if the * color parameter is not explicitly specified. * * @example * ```javascript * var viewer = new DsPdfViewer("#root", { replyTool: { annotationFocusColor: "blue" } }); * ``` */ annotationFocusColor?: string; /** * If set to `true`, comment icons will be filled with the color used in the annotation. **/ useColoredIcons?: boolean; /** * Enables the use of relative dates in comment headers. * * @property {boolean} [useRelativeDates=true] - * - `true`: Displays relative dates (e.g., "5 minutes ago"). * - `false`: Displays absolute dates instead. * * @example * ```javascript * // Enable relative dates (default behavior). * var viewer = new DsPdfViewer("#root", { replyTool: { useRelativeDates: true } }); * * // Disable relative dates. * var viewer = new DsPdfViewer("#root", { replyTool: { useRelativeDates: false } }); * ``` **/ useRelativeDates?: boolean; /** * Specifies the custom format for absolute dates in comment headers. * * @property {string} [dateFormat="yyyy-mm-dd HH:MM"] - The format to use when displaying absolute dates. * Ignored if `useRelativeDates` is `true`. * * @example * ```javascript * // Use a custom format for absolute dates. * var viewer = new DsPdfViewer("#root", { replyTool: { useRelativeDates: false, dateFormat: "dd.mm.yyyy HH:MM" } }); * ``` **/ dateFormat?: string; /** * Optional filter function to determine which annotations should be displayed in the Reply Tool. * If the function returns `true`, the annotation is shown; if `false`, it is hidden. * If not provided, the default behavior is used. * * @param {AnnotationBase} annotation - The annotation being evaluated. * @param {number} index - The index of the annotation in the array. * @param {AnnotationBase[]} array - The full list of annotations. * @returns {boolean} `true` to display the annotation, `false` to hide it. * * @example * ```javascript * // Show only text annotations in the Reply Tool * var viewer = new DsPdfViewer("#root", { * replyTool: { * annotationFilter: (annotation) => annotation.annotationType === 1 // AnnotationType.TEXT * } * }); * ``` */ annotationFilter?: (annotation: AnnotationBase, index: number, array: AnnotationBase[]) => undefined | boolean; }; /** * Settings for configuring the Support API in the viewer. **/ export type SupportApiSettings = { /** * URL to the Support API service that will be used to enable PDF editing features. **/ apiUrl: string; /** * Specifies a custom implementation of the SupportApi for editing functions. * When this property is set, the viewer will use the provided custom implementation instead of a separate service. * All other properties (apiUrl, webSocketUrl, and token) will be ignored. * @example * ```javascript * // Example * var viewer = new DsPdfViewer("#root", { * supportApi: { * implementation: new CustomSupportApi() * } * }); * ``` **/ implementation: ISupportApiBase; /** * Authentication or antiforgery token. In each subsequent SupportApi request, the token is passed in the request for server-side validation. * You can use ASP.NET Core Antiforgery to generate and verify security token, see {@link https://docs.microsoft.com/en-us/aspnet/core/security/anti-request-forgery?view=aspnetcore-6.0|Prevent Cross-Site Request Forgery (XSRF/CSRF) attacks in ASP.NET Core} for details. * @example * ```javascript * // Specify antiforgery token on client side: * const viewer = new DsPdfViewer("#viewer", { * supportApi: { * apiUrl: "192.168.0.1/support-api", * token: "support-api-demo-net-core-token", * webSocketUrl: false * } * }); * ``` * @example * ```csharp * // Here is an example of how to validate the token on the server side inside the SupportApi service project: * * // Startup.cs: * GcPdfViewerController.Settings.VerifyToken += VerifyAuthToken; * * private void VerifyAuthToken(object sender, SupportApi.Models.VerifyTokenEventArgs e) * { * string token = e.Token; * if (token != "support-api-demo-net-core-token") * { * e.Reject = true; * } * } * ``` **/ token?: string; /** * Set this setting to true if you are using the Web Forms (WEB API 2) version of the SupportApi service. * Note, in most cases, you do not need to set this setting, the server type is determined by the viewer automatically. * @example * ```javascript * const viewer = new DsPdfViewer("#viewer", { * supportApi: { * apiUrl: "/api/pdf-viewer", * webSocketUrl: "/signalr", * legacyServer: true, * token: "support-api-demo-net-core-token" * } * }); * ``` **/ legacyServer?: boolean; /** * The internal Support API client uses the fetch API to make requests to the server. * Use the requestInit setting to configure fetch options (like authorization headers, etc), * see https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch for details. * @example * ```javascript * // Include Basic Authentication headers: * const viewer = new DsPdfViewer("#viewer", { * supportApi: { * apiUrl: "192.168.0.1/support-api", * requestInit: { * headers: { * "Authorization": "Basic " + btoa(unescape(encodeURIComponent("USERNAME:PASSWORD"))), * "CustomHeader": "Custom header value" * } * } * } * }); * ``` **/ requestInit?: RequestInit; /** * Optional. SignalR socket URL for persistent connections. * Persistent connections are required for collaboration mode. * Set this setting to false to disable persistent connections. * @default /signalr **/ webSocketUrl?: string | false; /** * Automatically reconnect to the server at the specified interval in milliseconds. * Used by persistent connections. * @default 5000 **/ reconnectInterval?: number; /** * Suppress Support API informational messages (e.g. Support API reconnect messages). * @example * ```javascript * // Suppress informational messages only: * const viewer = new DsPdfViewer("#viewer", { * supportApi: { * apiUrl: "http://192.168.0.1/support-api", * webSocketUrl: false, * suppressInfoMessages: true * } * }); * ``` **/ suppressInfoMessages?: boolean; /** * Suppress Support API error messages (e.g. messages about the Support API availability / version mismatch). * @example * ```javascript * // Suppress both error and informational messages: * const viewer = new DsPdfViewer("#viewer", { * supportApi: { * apiUrl: "http://192.168.0.1/support-api", * webSocketUrl: false, * suppressInfoMessages: true, * suppressErrorMessages: true * } * }); * ``` **/ suppressErrorMessages?: boolean; /** * Not used. * @ignore **/ docBaseUrl?: string; }; /** * Configuration options for the text markup context sub-menu. */ export type TextMarkupContextMenuSettings = { /** * Defines the available color options in the text markup context menu. * * - An array of colors applies the same color options to all markup types. * - An object with specific markup types allows defining different color sets for each type. * - Setting this to `false` disables the color selection in the text markup context menu. * * @example * ```javascript * // Customize available colors for all text markup types: * textMarkupContextMenu: { * colors: [ * { value: "#ff0000", displayName: "Red" }, * { value: "#000000", displayName: "Black" } * ] * } * ``` * * @example * ```javascript * // Hide all color options in the text markup sub-menu: * textMarkupContextMenu: { colors: [] } * ``` * * @example * ```javascript * // Define specific colors for each text markup type: * textMarkupContextMenu: { * colors: { * highlight: [ * { value: "#ff0000", displayName: "Red" }, * { value: "#000000", displayName: "Black" } * ], * underline: [ * { value: "#ff0000", displayName: "Red" } * ], * strikeout: [ * { value: "#000000", displayName: "Black" } * ], * squiggly: [ * { value: "#ff0000", displayName: "Red" } * ] * } * } * ``` */ colors: { value: string; displayName: string; }[] | { highlight?: { value: string; displayName: string; }[]; underline?: { value: string; displayName: string; }[]; strikeout?: { value: string; displayName: string; }[]; squiggly?: { value: string; displayName: string; }[]; } | false; }; /** * GcDocs PDF Viewer options class. **/ export declare class ViewerOptions { /** * ViewerOptions constructor * @param options viewer options object. * @ignore * @example * ```javascript * // Create options object: * var options = { snapAlignment: false, supportApi: 'api/pdf-viewer'}; * // Pass options object to the DsPdfViewer constructor: * var viewer = new DsPdfViewer("#root", options); * ``` */ constructor(options?: Partial); /** * Use this option to change the default SVG icons to custom ones. * Available icon keys: 'undo2', 'font-bold', 'font-italic', 'checkbox-checked', 'checkbox-unchecked', 'close', 'aspect-ratio', 'search', 'chevron', 'chevron-accent', * 'animated-spinner', 'drag-handle', 'download', 'keyboard', 'brush', 'image', 'image-list', 'save', 'theme-change', 'single-page', 'continuous-view', 'view-mode', 'show-view-tools', * 'show-edit-tools', 'show-form-editor', 'toggle-annotation-properties', 'toggle-form-properties', 'edit-converted-to-content', 'edit-free-text', 'edit-ink', 'edit-text', 'edit-square', * 'edit-line', 'edit-link', 'edit-circle', 'edit-stamp', 'add-stamp-accent', 'edit-sign-tool', 'edit-file-attachment', 'edit-sound', 'edit-polyline', 'edit-polygon', 'edit-popup', * 'edit-redact', 'edit-redact-apply', 'edit-redact-applied', 'edit-unknown-type', 'edit-widget-signature', 'edit-widget-tx-field', 'edit-widget-tx-text-area', 'edit-widget-tx-comb', * 'edit-widget-tx-password', 'edit-widget-btn-checkbox', 'edit-widget-btn-radio', 'edit-widget-btn-push', 'edit-widget-btn-submit', 'edit-widget-btn-reset', 'edit-widget-ch-combo', * 'edit-widget-ch-list-box', 'edit-widget-unknown-type', 'edit-undo', 'edit-redo', 'remove-attachment', 'edit-select', 'edit-erase', 'form-filler', 'field-invalid', 'new-document', * 'new-page', 'delete-page', 'print', 'rotate', 'confirm-ok', 'confirm-cancel', 'open', 'open-pdf', 'text-selection', 'hide-annotations', 'pan', 'bookmarks', 'structure-tree', 'layers', 'thumbnails', 'articles', 'attachments', 'documents-list', 'share', 'shared-documents-list', 'view-mode-on', 'view-mode-off', 'edit-mode-on', 'edit-mode-off', 'remove-user', 'doc-properties', 'about', 'pdf-doc-title', 'close-icon-sm', 'menu-dots', 'comments-status-accepted', 'comments-status-cancelled', 'comments-status-completed', 'comments-status-rejected', 'context-copy', 'context-paste', 'context-cut', 'context-delete', 'move-to-top-page', 'move-to-bottom-page', 'arrow-expand-horizontal', 'arrow-expand-all', 'magnify-minus-outline', 'magnify-plus-outline', 'magnify', 'text-tools', 'draw-tools', 'attachment-tools', 'form-tools', 'page-tools', 'resize-handle-h'. * @example * ```javascript * var viewer = new DsPdfViewer(selector, { * customIcons: { * 'open': '', * 'search': '' * } * }); * ``` **/ customIcons?: { [iconKey: string]: Element | string; }; /** * If set to true, disables browser history during navigation inside PDF document. * * @example * ```javascript * var viewer = new DsPdfViewer(selector, { * disableHistory: true * }); * ``` */ disableHistory: boolean; /** * Contains default values for a new annotations and fields. * @example * ```javascript * // Change the default sticky note and text annotation color to Red: * var viewer = new DsPdfViewer("#root", { * editorDefaults: { * stickyNote: { color: "#ff0000" }, * textAnnotation: {color: "#ff0000" } * }, * supportApi: 'api/pdf-viewer' * }); * ``` * @example * ```javascript * // Change the default square annotation appearance: * var viewer = new DsPdfViewer("#root", { * editorDefaults: { * squareAnnotation: { * annotationType: 5, // AnnotationTypeCode.SQUARE * subtype: "Square", * borderStyle: { width: 5, style: 1, horizontalCornerRadius: 0, verticalCornerRadius: 0 }, * color: [0, 0, 0], * interiorColor: [255, 0, 0], * } * }, * supportApi: 'api/pdf-viewer' * }); * ``` * */ editorDefaults: { /** * Array of the available font names. * @default [ * { value: 'Helv', name: 'Helvetica' }, { value: 'HelveticaRegular', name: 'Helvetica-Oblique' }, { value: 'HelveticaBold', name: 'Helvetica-Bold' }, { value: 'HelveticaBoldItalic', name: 'Helvetica-BoldOblique' }, * { value: 'TimesRegular', name: 'Times-Roman' }, { value: 'TimesItalic', name: 'Times-Italic' }, { value: 'TimesBold', name: 'Times-Bold' }, { value: 'TimesBoldItalic', name: 'Times-BoldItalic' }, * { value: 'CourierRegular', name: 'Courier' }, { value: 'CourierItalic', name: 'Courier-Oblique' }, { value: 'CourierBold', name: 'Courier-Bold' }, { value: 'CourierBoldItalic', name: 'Courier-BoldOblique' }, * { value: 'Symbol', name: 'Symbol' } * ] * @example * ```javascript * var viewer = new DsPdfViewer("#root", { * editorDefaults: { fontNames: [{value: 'Arial', name: 'Arial'}, {value: 'Verdana', name: 'Verdana'}] }, * supportApi: { apiUrl: 'support-api/gc-pdf-viewer', webSocketUrl: false } * }); * ``` **/ fontNames?: { value: string; name: string; }[]; /** * Set this setting to true if you do not want to display an additional floating bar for editor mode. * * @example * ```javascript * var viewer = new DsPdfViewer("#root", { * editorDefaults: { hideFloatingBar: true }, * supportApi: { apiUrl: 'support-api/gc-pdf-viewer', webSocketUrl: false } * }); * ``` **/ hideFloatingBar?: boolean; /** * When the rememberLastValues setting is set to true (or undefined), the last used property values will be used as default values for new annotations. * @default undefined * @example * ```javascript * // Do not use the last used property values as defaults: * var viewer = new DsPdfViewer("#root", { editorDefaults: { rememberLastValues: false } }); * ``` **/ rememberLastValues?: boolean; /** * Determines which annotation properties should persist during editing operations. * * @remarks * When enabled, these property values will be remembered and automatically applied: * - When creating new annotations of the same type * - When adding form widgets * - During subsequent editing sessions * * This creates a consistent editing experience by maintaining property values * between annotation actions. * * @defaultValue * ```typescript * [ * "appearanceColor", "borderStyle", "color", "interiorColor", * "backgroundColor", "borderColor", "opacity", "textAlignment", * "printableFlag", "open", "lineStart", "lineEnd", * "markBorderColor", "markFillColor", "overlayFillColor", * "overlayText", "overlayTextJustification", "newWindow", * "calloutLineEnd", "fontSize", "fontName", "name", * "readOnly", "required", "hasEditFlag" * ] * ``` * * @example * Remember only the borderStyle property: * ```javascript * const viewer = new DsPdfViewer("#root", { * editorDefaults: { * rememberLastValues: true, * lastValueKeys: ["borderStyle"] * } * }); * ``` */ lastValueKeys?: string[]; /** * The `printResolution` option specifies the resolution (in dots per inch - DPI) used for printing PDF documents. * It determines the quality and detail of the rendered images during the printing process. Higher DPI values * produce sharper and more detailed printed output but may also increase memory usage and rendering time. * * @type {number} * @default 150 - If not specified, the default resolution is 150 DPI. * @example * ```javascript * // Example: Set the print resolution to 300 DPI * var viewer = new DsPdfViewer("#root", { * printResolution: 300 * }); * ``` */ printResolution?: number; /** * The `printSingleJobMode` option controls whether all pages are printed as a single print job, * regardless of their individual orientation. When set to `true`, the viewer sends all pages as a single * print task, which may cause pages with different orientations to be printed incorrectly. When set to `false` * (the default), pages with different orientations are printed separately to preserve their intended layout. * * @type {boolean} * @default false * @example * ```javascript * // Example: Enable single print job mode to force all pages to be printed together * var viewer = new DsPdfViewer("#root", { * printSingleJobMode: true * }); * ``` */ printSingleJobMode?: boolean; /** * Resize handle size in pixels. * @default 8 * @example * ```javascript * var viewer = new DsPdfViewer("#root", { * editorDefaults: { * resizeHandleSize: 20, * moveHandleSize: 40 * }, * supportApi: { apiUrl: 'support-api/gc-pdf-viewer', webSocketUrl: false } * }); * ``` **/ resizeHandleSize?: number; /** * Move handle size in pixels. * @default 14 * @example * ```javascript * var viewer = new DsPdfViewer("#root", { * editorDefaults: { * moveHandleSize: 40 * }, * supportApi: { apiUrl: 'support-api/gc-pdf-viewer', webSocketUrl: false } * }); * ``` **/ moveHandleSize?: number; /** * Dot handle size in pixels. Used for callout points. * @default 8 * @example * ```javascript * var viewer = new DsPdfViewer("#root", { * editorDefaults: { * dotHandleSize: 20 * }, * supportApi: { apiUrl: 'support-api/gc-pdf-viewer', webSocketUrl: false } * }); * ``` **/ dotHandleSize?: number; /** * The URL where the standard font files are located. Include the trailing slash. * @example * ```javascript * // Example with relative URL: * var viewer = new DsPdfViewer("#root", { standardFontDataUrl: "resources/standard_fonts/" }); * * // Example with absolute URL: * var viewer = new DsPdfViewer("#root", { standardFontDataUrl: "http://localhost:8080/resources/standard_fonts/" }); * ``` **/ standardFontDataUrl?: string; /** * Default properties for Sticky note. **/ stickyNote?: { color?: string; contents?: string; }; /** * Default properties for Line annotation. * */ lineAnnotation?: Partial; /** * Default properties for Circle annotation. * */ circleAnnotation?: Partial; /** * Default properties for Square annotation. * */ squareAnnotation?: Partial; /** * Default properties for Link annotation. * */ linkAnnotation?: Partial; /** * Default properties for Redact annotation. * */ redactAnnotation?: Partial; /** * Default properties for Ink annotation. * */ inkAnnotation?: Partial; /** * Default properties for PolyLine annotation. * */ polyLineAnnotation?: Partial; /** * Default properties for Polygon annotation. * */ polygonAnnotation?: Partial; /** * Default properties for Text annotation. **/ textAnnotation?: Partial; /** * Default properties for FreeText annotation. * */ freeTextAnnotation?: Partial; /** * Default properties for FileAttachment annotation. **/ fileAttachmentAnnotation?: Partial; /** * Default properties for Rich Media annotation. **/ richMediaAnnotation?: Partial; /** * Default properties for Sound annotation. **/ soundAnnotation?: Partial; /** * Default properties for Stamp annotation. **/ stampAnnotation?: Partial; /** * Default properties for Highlight annotation. **/ highlightAnnotation?: Partial; /** * Default properties for Underline annotation. **/ underlineAnnotation?: Partial; /** * Default properties for Squiggly annotation. **/ squigglyAnnotation?: Partial; /** * Default properties for StrikeOut annotation. **/ strikeOutAnnotation?: Partial; /** * Default properties for Popup annotation. * */ popupAnnotation?: Partial; /** * Default properties for CheckBox button widget. **/ checkBoxButton?: Partial; /** * Default properties for Radio button widget. **/ radioButton?: Partial; /** * Default properties for Push button widget. * */ pushButton?: Partial; /** * Default properties for Reset button widget. * */ resetButton?: Partial; /** * Default properties for Submit button widget. **/ submitButton?: Partial; /** * Default properties for Combo choice widget. **/ comboChoice?: Partial; /** * Default properties for ListBox choice widget. **/ listBoxChoice?: Partial; /** * Default properties for Password field widget. * */ passwordField?: Partial; /** * Default properties for TextArea widget. **/ textArea?: Partial; /** * Default properties for Text field widget. **/ textField?: Partial; /** * Default properties for Signature field widget. * */ signatureField?: Partial; /** * Default properties for Comb Text field widget. **/ combTextField?: Partial; }; /** * Use this option to enable annotation tools from the form editor or field tools from the annotation editor. * @default * ```javascript * { * annotationEditor: 'annotations', * formEditor: 'fields' * } * ``` * @example * ```javascript * viewer.options.allowedTools = { formEditor: 'all' }; * ``` **/ allowedTools: { viewer?: 'all' | 'annotations' | 'fields' | string[]; annotationEditor?: 'all' | 'annotations' | 'fields' | string[]; formEditor?: 'all' | 'annotations' | 'fields' | string[]; }; /** * Form fields appearance rendering settings. * Use this option to customize a specific rendering type for the appearance of form fields. * Available appearance rendering types: * * "Custom" - Default. The custom appearance has some improvements over the web appearance, * for example you can specify background / border colors. * * "Web" - Standard form field appearance using platform-native styling. See https://developer.mozilla.org/en-US/docs/Web/CSS/appearance for details. * * "Predefined" - Predefined appearance stream from PDF when available, if appearance stream is not available, custom appearance will be used. * @example * ```javascript * // Use standard form field appearance using platform-native styling for radio, checkbox and push buttons. * var viewer = new DsPdfViewer("#root", { fieldsAppearance: { radioButton: "Web", checkBoxButton: "Web", pushButton: "Web" } }); * ``` * @example * ```javascript * // Use predefined appearance stream from PDF when available: * var viewer = new DsPdfViewer("#root", { fieldsAppearance: { radioButton: "Predefined", checkBoxButton: "Predefined", pushButton: "Predefined" } }); * ``` **/ fieldsAppearance: { /** * Radio button appearance rendering type. **/ radioButton?: FieldAppearanceRenderingType; /** * Check-box button appearance rendering type. **/ checkBoxButton?: FieldAppearanceRenderingType; /** * Push button appearance rendering type. **/ pushButton?: FieldAppearanceRenderingType; }; /** * Lock open timeout period in milliseconds. * The user will not be able to open another document using the "open" method during the period * specified by the lockOpenTimeout option or until the previous document is loaded. * @ignore exclude from docs * @default 20000 * @example * ```javascript * // Change lock open timeout to 5 sec: * var viewer = new DsPdfViewer("#root", { lockOpenTimeout: 5000 ); * viewer.open("doc1.pdf"); * // The next time the open method is called, the viewer will * // wait a maximum of 5 seconds for the previous document to open. * viewer.open("doc2.pdf"); * ``` **/ lockOpenTimeout: number; /** * Configuration options for the PDF viewer's navigation toolbar component. * * @remarks * Provides fine-grained control over the navigation controls in the PDF viewer toolbar, * allowing customization of which buttons appear and their behavior. The navigation controls * include page navigation buttons and page number display/input. * * @example * Basic usage showing only previous/next buttons: * ```typescript * var viewer = new DsPdfViewer("#root", { * navigation: { * showFirstButton: false, * showLastButton: false, * showPageInput: false * } * }); * ``` * * @example * Custom page input width and format: * ```typescript * var viewer = new DsPdfViewer("#root", { * navigation: { * pageInputWidth: 100, * pageCounterFormat: "Page {{current}} of {{total}}", * showFirstButton: true, * showLastButton: true * } * }); * ``` * * @example * Complete configuration with all options: * ```typescript * var viewer = new DsPdfViewer("#root", { * navigation: { * showFirstButton: true, // Show first page button * showPrevButton: true, // Show previous page button * showPageInput: true, // Show page number input * showNextButton: true, // Show next page button * showLastButton: true, // Show last page button * pageInputWidth: 90, // Width of page input in pixels * pageCounterFormat: "{{current}}/{{total}}" // Custom page counter format * } * }); * ``` * * @see {@link NavigationControlOptions} for the complete interface definition. */ navigation?: NavigationControlOptions; /** * Specifies the default file name to be used when creating a new document within the viewer. * This option is different from `friendlyFileName` as it specifically sets the name for newly created documents, * rather than naming an existing document. * * @type {string} * @default "new-document.pdf" * * @example * // Initialize the viewer with a custom file name for new documents * var viewer = new DsPdfViewer("#root", { newDocumentFileName: "sample.pdf" }); */ newDocumentFileName?: string; /** * Page display type. * @example * ```javascript * // Example: Switch the page display mode to "TwoPage". * var viewer = new DsPdfViewer("#root", { * pageDisplay: "TwoPage" * }); * ``` */ pageDisplay?: PageDisplayType; /** * Default viewer's save settings, used when user clicks the Save button. * * @type {SaveSettings} * @example * ```javascript * // Save the document in PDF format with a custom progress message. * var viewer = new DsPdfViewer("#root", { saveSettings: { format: "PDF", progressMessage: "Saving PDF..." } }); * * // Save only the first three pages of the document in PNG format. * var viewer = new DsPdfViewer("#root", { saveSettings: { format: "PNG", pages: "0-2" } }); * * // Save the document with a signature and reload it in the viewer. * var viewer = new DsPdfViewer("#root", { saveSettings: { sign: { ...signatureDetails }, reload: true } }); * * // Save the document with a zoom factor of 2.0 when saving as PNG. * var viewer = new DsPdfViewer("#root", { saveSettings: { format: "PNG", zoomFactor: 2.0 } }); * * // Save the document in linearized PDF format for fast web viewing. * var viewer = new DsPdfViewer("#root", { saveSettings: { format: "PDF", saveMode: "Linearized" } }); * ``` */ saveSettings: SaveSettings; /** * "Save As" dropdown button options. * @type {SaveAsOptions | SaveAsFormat} * @example * ```javascript * // Limit the save as options available in the dropdown menu to "PDF" and "PNG". * var viewer = new DsPdfViewer("#root", { saveAsOptions: { availableFormats: ["PDF", "PNG"] } }); * * // Show the "Save As" button dropdown with default available formats. * var viewer = new DsPdfViewer("#root", { saveAsOptions: { showSaveAsButton: true } }); * * // Hide the "Save As" dropdown button. * var viewer = new DsPdfViewer("#root", { saveAsOptions: { showSaveAsButton: false } }); * ``` */ saveAsOptions?: SaveAsOptions | SaveAsFormat; /** * The Snap Alignment feature customization settings. * The *tolerance* setting is the distance between the edges of two objects within which the object that is being * moved or resized snaps to the other object. Margin is the extra space before or after the edge of a field or page. * The *margin* setting is the distance from the target object to which the edge of the object being moved or resized snaps. * The *center* setting allows to snap objects to centers of other objects (in addition to edges). * @default * ```javascript * { snapAlignment: true } * By default, snap tolerance is 5pt, * snap margin between objects and page edges is 10pt, * snap to center is true. * ``` * @example * ```javascript * // Enable vertical snap margin: * var viewer = new DsPdfViewer("#root", { snapAlignment: { margin: { vertical: 10, horizontal: false} }, supportApi: 'api/pdf-viewer'}); * ``` * @example * ```javascript * // Change tolerance and snap margins: * viewer.options.snapAlignment = { tolerance: 5, margin: 20 }; * ``` **/ snapAlignment: true | false | { tolerance: number | { horizontal: number | false; vertical: number | false; }; margin: false | true | number | { horizontal: number | boolean; vertical: number | boolean; }; center: false | true | { horizontal: boolean; vertical: boolean; }; }; /** * By default, the viewer uses its own context menu. * Set this option to true if you want to use the browser context menu. * Please, note, if you set this option to true, some functions of the * context menu will not be available (for example, actions of the Editor and Reply tool). * @default false * @example * ```javascript * // Enable native browser context menu: * var viewer = new DsPdfViewer("#root", { useNativeContextMenu: true } ); * ``` * */ useNativeContextMenu: boolean; /** * This function will be called when context menu is about to be shown. * You can use this function to customize context menu. * Return false if you want to prevent open context menu action. * @default undefined * @example * ```javascript * // This code shows how to modify the context menu and * // add search using Google and Bing search engines: * viewer.options.onBeforeOpenContextMenu = function (items, mousePosition, viewer) { * var selectedText = viewer.getSelectedText(); * if (selectedText) { * // Remove existent items: * items.splice(0, items.length); * // Add own menu items: * items.push({ * type: 'button', * text: 'Search using Google', * onClick: function () { * window.open('http://www.google.com/search?q=' + encodeURI(selectedText), '_blank'); * } * }); * items.push({ * type: 'button', * text: 'Search using Bing', * onClick: function () { * window.open('https://www.bing.com/search?q=' + encodeURI(selectedText), '_blank'); * } * }); * } * return true; * }; * ``` **/ onBeforeOpenContextMenu?: Function; /** * This function will be called when context menu is about to be hidden. * Return false if you want to prevent close context menu action. * @default undefined * @example * ```javascript * viewer.options.onBeforeCloseContextMenu = function(e) { * console.log("The context menu will be closed soon."); * return true; * }; * ``` * @default undefined * @example * ```javascript * viewer.options.onBeforeCloseContextMenu = function(e) { * if(!confirm("Do you want to close context menu?")) { * console.log("The context menu will not be closed."); * return false; * } * console.log("The context menu will be closed."); * return true; * }; * ``` * */ onBeforeCloseContextMenu?: Function; /** * Controls the display of the context menu when text is selected. * - "Auto": Automatically determines whether to show the context menu based on the device type. * - "On": Always show the context menu when text is selected. * - "Off": Never show the context menu when text is selected. * Default value is "Auto". * On systems with mice, "Auto" behaves like "Off". * On small devices (phones, tablets) without mice, "Auto" behaves like "On". * @example * // Configure the viewer to always show the context menu when text is selected * var viewer = new DsPdfViewer(selector, { * showContextMenuOnSelection: "On" * }); * @example * // Configure the viewer to never show the context menu when text is selected * var viewer = new DsPdfViewer(selector, { * showContextMenuOnSelection: "Off" * }); */ showContextMenuOnSelection?: "Auto" | "On" | "Off" | boolean; /** * Specifies whether the modification date of an annotation can be edited in the UI. * * @type {boolean} * @default false * @description If set to `true`, the modification date field in the property grid UI will be editable. * By default, it is set to `false`, making the modification date read-only. * @example * // Configure the Viewer to allow editing of the Modification Date in the Annotation Editor UI * var viewer = new DsPdfViewer(selector, { * allowModificationDateEdit: true * }); */ allowModificationDateEdit?: boolean; /** * Configuration options for the text markup context sub-menu. * * @example * ```javascript * // Disable the text markup context sub-menu: * var viewer = new DsPdfViewer(selector, { * textMarkupContextMenu: false * }); * ``` * * @example * ```javascript * // Customize the available colors in the text markup context menu: * var viewer = new DsPdfViewer(selector, { * textMarkupContextMenu: { * colors: [ * { value: "#ff0000", displayName: "Red" }, * { value: "#000000", displayName: "Black" } * ] * } * }); * ``` * * @example * ```javascript * // Define different colors for specific text markup types: * var viewer = new DsPdfViewer(selector, { * textMarkupContextMenu: { * colors: { * highlight: [ * { value: "#ff0000", displayName: "Red" }, * { value: "#000000", displayName: "Black" } * ], * underline: [ * { value: "#ff0000", displayName: "Red" } * ] * } * } * }); * ``` * * @example * ```javascript * // Hide all color options in the text markup context menu: * var viewer = new DsPdfViewer(selector, { * textMarkupContextMenu: { colors: [] } * }); * ``` */ textMarkupContextMenu?: TextMarkupContextMenuSettings | false; /** * Undo state storage options. * @example * ```javascript * // Disable undo storage: * var viewer = new DsPdfViewer(selector, { * undo: false * }); * ``` * @example * ```javascript * // Do not track "Open" and "Close" commands: * var viewer = new DsPdfViewer(selector, { * undo: { skipCommands: "Open" } * }); * ``` **/ undo?: UndoStorageOptions | false; /** * An optional content is a collection of graphics that can be made visible or invisible dynamically. * Use the optionalContentConfig option to configure optional content visibility * @ignore exclude from docs **/ optionalContentConfig?: OptionalContentConfig; /** * The Reply Tool settings. * @default * Default settings are: * * readOnly: false, * * allowAddNote: true, * * allowChangeUserName: true, * * allowAddReply: true, * * allowDelete: true, * * allowStatus: true, * * allowChangeOtherUser: true, * * allowDeleteOtherUser: true, * * allowStatusOtherUser: true, * * allowAddReplyOtherUser: true * ```javascript * // Prevent changing or deleting another user's comments: * var viewer = new DsPdfViewer('#root', { replyTool: { allowChangeOtherUser: false, * allowDeleteOtherUser: false }, * userName: 'John', supportApi: 'api/pdf-viewer' }); * viewer.addReplyTool('expanded'); * ``` * @example * ```javascript * // Disallow change author name (allowChangeUserName is false) * // and disallow add changes to comments of other users (allowChangeOtherUser is false): * var viewer = new DsPdfViewer('#root', { replyTool: { allowChangeOtherUser: false, * allowChangeUserName: false }, * userName: 'John', supportApi: 'api/pdf-viewer' }); * viewer.addReplyTool('expanded'); * ``` * @example * ```javascript * // Add read-only reply tool: * var viewer = new DsPdfViewer('#root', { * replyTool: { readOnly: true }, * userName: 'John', * supportApi: 'api/pdf-viewer' }); * viewer.addReplyTool('expanded'); * ``` * @example * ```javascript * // Hide "Add Sticky Note" item from context menu: * var viewer = new DsPdfViewer('#root', { replyTool: { allowAddNote: false }, * userName: 'John', supportApi: 'api/pdf-viewer' }); * viewer.addReplyTool(); * ``` **/ replyTool?: ReplyToolSettings; /** * Author's user name. * This option is used by the Annotation Editor and Reply Tool as the default for the Author field. * @example * ```javascript * var viewer = new DsPdfViewer('#root', { userName: 'John', supportApi: 'api/pdf-viewer' }); * ``` * */ userName?: string; /** * Used by form submission and for theme urls. * @example * ```javascript * var viewer = new DsPdfViewer("#root", { baseUrl: "http://localhost/mysite/" }); * ``` * */ baseUrl?: string; /** * Toolbar buttons. * Available values are: * ['open', '$navigation', '$split', 'text-selection', 'pan', '$zoom', '$fullscreen', 'rotate', 'view-mode', * 'theme-change', 'download', 'print', 'save', 'hide-annotations', 'doc-title', 'doc-properties', 'about'], * 'all' * 'none' * @deprecated * @ignore exclude from docs */ buttons?: string[] | "all" | 'none'; /** * Text selection cursor settings. * @description * ```javascript * Settings description: * caretBlinkTime - milliseconds, caret blink period * caretStopBlinkTime - milliseconds, stop caret blink time, 0 - don't stop * color - The caret color * width - The caret width * allowForPan - Allow to move caret using keys even when pan tool activated. * ``` * @example * ```javascript * // Hide the caret: * var viewer = new DsPdfViewer("#root", { caret: false } ); * ``` * @example * ```javascript * // Change the caret color and width: * var viewer = new DsPdfViewer("#root", { caret: {"color": "#ff0000", "width": 2} } ); * ``` **/ caret?: true | false | { caretBlinkTime: number; caretStopBlinkTime: number; color: string; width: number; allowForPan: boolean; }; /** * Document's sharing settings. * The sharing is used only when the document is open in collaboration mode * using the Share dialog box or from the Shared documents panel. * @example * ```javascript * // Disallow user names unknown to the server: * var viewer = new DsPdfViewer("#root", { sharing: { disallowUnknownUsers: true }, supportApi: "api/pdf-viewer" } ); * ``` * @example * ```javascript * // Specify known user names, and disallow other user names: * var viewer = new DsPdfViewer("#root", { * sharing: { * knownUserNames: ["Jaime Smith", "Jane Smith"], * disallowUnknownUsers: true, * }, * supportApi: "api/pdf-viewer" * }); * ``` * */ sharing?: { /** * Prevent sharing the document with users which are not known by the Server Api * or not specified in the knownUserNames setting. * @default false * */ disallowUnknownUsers?: boolean; /** * Known user names. If specified, these user names will appear * as suggestions in the Sharing dialog, otherwise the Sharing dialog * will display the user names loaded from the Support Api. * */ knownUserNames?: string[]; /** * If specified, these colors will be used as color for presence indicators. * key - user name, value = color. * @example * ```javascript * var viewer = new DsPdfViewer("#root", { * sharing: { * knownUserNames: ['Jame Smith', 'Lisa'], * presenceColors: { 'Anonymous': '#999999', 'Jame Smith': 'red', 'Lisa': 'blue' } * }, * supportApi: "api/pdf-viewer" * }); * ``` * */ presenceColors?: { [userName: string]: string; }; /** * Determines the type of presence for collaboration users. * * 'on' - the presence of all users, including the active one, will be shown. * * 'others' - all users except the active user will be shown. * * 'off' - presence will not be shown. * @default 'on' * @example * ```javascript * // Change presence mode to 'others': * var viewer = new DsPdfViewer("#root", { * sharing: { * presenceMode: 'others' * }, * supportApi: "api/pdf-viewer" * }); * ``` * @example * ```javascript * // Turn off presence indicators: * var viewer = new DsPdfViewer("#root", { * sharing: { * presenceMode: 'off' * }, * supportApi: "api/pdf-viewer" * }); * ``` **/ presenceMode: 'on' | 'others' | 'off' | true | false; }; /** * Annotation coordinates round precision. Used by the Annotation and Form editor. * @default 1 * @example * ```javascript * // Change the default rounding precision to 0.001: * var viewer = new DsPdfViewer("#root", { coordinatesPrecision: 0.001 } ); * ``` **/ coordinatesPrecision: number; /** * Origin coordinates for the PDF page. * The option is used for a properties panel of the Annotation and Form editor. * @default TopLeft * @example * ```javascript * // Change the coordinates origin to bottom/left point: * var viewer = new DsPdfViewer("#root", { coordinatesOrigin: "BottomLeft" } ); * ``` * */ coordinatesOrigin?: 'TopLeft' | 'BottomLeft'; /** * Use the disableFeatures option to disable certain features * of the DsPdfViewer depending on your company security policy. * Note, you can specify the disableFeatures option only during the DsPdfViewer initialization. * @example * ```javascript * // Disable DragAndDrop operations, JavaScript actions, File and Sound attachments: * var viewer = new DsPdfViewer("#root", { disableFeatures: ['DragAndDrop', 'JavaScript', 'AllAttachments'] } ); * ``` * @example * ```javascript * // Disable DragAndDrop for the DsPdfViewer: * var viewer = new DsPdfViewer(selector, { * disableFeatures: ['DragAndDrop'] * }); * ``` **/ disableFeatures?: ViewerFeatureName[]; /** * Set this option to true if you wish to disable initial view settings specified in a PDF document. * @default false * @example * ```javascript * var viewer = new DsPdfViewer("#root", { ignoreInitialView: true } ); * ``` **/ ignoreInitialView?: boolean; /** * Set this option to true if you wish to disable page labels. * @example * ```javascript * var viewer = new DsPdfViewer("#root", { disablePageLabels: true } ); * ``` **/ disablePageLabels?: boolean; /** * The externalLinkTarget option sets the value of the target attribute of a link annotation. * The externalLinkTarget option specifies where to open the linked document. * Possible values are: 'blank', 'self', 'parent', 'top', 'none'. * @default 'none' * @example * ```javascript * var viewer = new DsPdfViewer("#root", { externalLinkTarget: "blank" } ); * ``` * */ externalLinkTarget?: 'blank' | 'self' | 'parent' | 'top' | 'none'; /** * Form filler dialog settings. * @example * ```javascript * var formFiller = { * mapping: { * 'UserNameField1': { * title: 'User Name', * displayname: 'username', * placeholder: 'Enter here...', * validateoninput: true, * validator: function(fieldValue, field) { * if(fieldValue.length >= 3) * return true; * else * return 'username must be at least 3 characters'; * } * }, * 'fld2': { hidden: true }, * 'Country Combo Box': { * displayname: 'Country', * required: true * }, * 'fld3': { displayName: 'First name!', * title: 'Please enter your first name.', * rowCustomCSS: 'given-name-row' * } * } * }; * var viewer = new DsPdfViewer('#root', { formFiller: formFiller }); * viewer.addDefaultPanels(); * ``` * @example * ```javascript * var viewer = new DsPdfViewer(selector, { * renderInteractiveForms: true, * formFiller: { * validator: function(val) {return (val ? null : 'The field cannot be empty'); } * } * }); * ``` **/ formFiller?: FormFillerSettings; /** * Optional JS actions execution configuration. * @example * Execute long operation before JS execution and repaint visible pages after JS execution. * ```javascript * viewer.options.jsExecutionConfig = { * before: function() { * // Returned promise will be awaited before further JS execution. * return new Promise(function(resolve) { * setTimeout(resolve, 1000); * }); * }, * after: function() { * viewer.repaint(); * } * } * ``` * @example * Adjust jsCode before execution * ```javascript * viewer.options.jsExecutionConfig = { * before: function(args) { * args.jsCode = args.jsCode.replace("app.alert", "app.showMessage"); * }, * } * ``` * @example * Cancel JS execution * ```javascript * viewer.options.jsExecutionConfig = { * before: function(args) { * args.cancel = true; * }, * } * ``` **/ jsExecutionConfig?: JsExecutionConfig; /** * PDF Organizer dialog settings. * @ignore exclude from docs **/ pdfOrganizer?: PdfOrganizerSettings; /** * Replace Text dialog settings. * @ignore exclude from docs **/ replaceText?: ReplaceTextSettings; /** * Configuration settings for table data extraction. * Defines options for extraction behavior, UI customization, and export formats. */ tableDataExtraction?: TableDataExtractionSettings; /** * Render dynamic Xfa forms if any. * @default The default value is true. * @example * ```javascript * // Turn off XFA forms rendering. * var viewer = new DsPdfViewer(selector, { enableXfa: false }); * ``` **/ enableXfa?: boolean; /** * Second toolbar options. * @example * ```javascript * // Create custom second toolbar with key "custom-toolbar-key": * var React = viewer.getType("React"); //@ts-ignore * var toolbarControls =[React.createElement("label", null, "Custom toolbar"), //@ts-ignore * React.createElement("button", { onClick: () => { alert("Execute action."); }, title: "Action title" }, "Action")]; * // Register custom second toolbar for key "custom-toolbar-key": * viewer.options.secondToolbar = { * render: function(toolbarKey) { * if(toolbarKey === "custom-toolbar-key") * return toolbarControls; * return null; * } * }; * // Show custom second toolbar: * viewer.showSecondToolbar("custom-toolbar-key"); * ``` **/ secondToolbar?: { /** * Handler method which can be used to render custom second toolbar controls. //@ts-ignore * The method should return array of the JSX.Element controls or null. **/ render?: (toolbarKey: string) => any[] | null; }; /** * Configuration options for the signature tool. * Allows customizing the appearance and behavior of the signing tool. * * @example * ```javascript * var viewer = new DsPdfViewer(selector, { * signTool: { * title: 'Sign document', // Custom title for the signature tool * penColor: '#ff0000', // Color of the signature pen * penWidth: 5 // Thickness of the signature stroke * } * }); * ``` */ signTool?: SignToolSettings; /** * User interface language. * Note, in order to use the language option, * you must specify the language option value during * the viewer initialization phase. * @example * ```javascript * // Set UI language to Japanese: * var viewer = new DsPdfViewer(selector, { language: 'ja' }); * viewer.addDefaultPanels(); * ``` * @example * ```javascript * function loadPdfViewer(selector) { * // Define custom translations: * var myTranslations = { * "toolbar": { * "open-document": "Open MY document", * "pan": "My Pan tool", * } * }; * // Initialize translations: * DsPdfViewer.i18n.init({ * resources: { myLang: { translation: myTranslations } } * }).then(function(t) { * // Translations initialized and ready to go. * // Now create PDF viewer: * var viewer = new DsPdfViewer(selector, { language: 'myLang' }); * viewer.addDefaultPanels(); * //viewer.open("sample.pdf"); * }); * } * loadPdfViewer('#root'); * ``` **/ language?: 'en' | string; /** * The maximum supported canvas size in total pixels, i.e. width * height. * When the canvas scaling exceeds the maxCanvasPixels option, the CSS scaling will be used instead of re-rendering page to the canvas. * @default The default value for PC/Mac is 4096 * 4096 = 16777216 (16 mega-pixels). * The default value for iOS/Android is 2560 x 2048 = 5242880 (5 mega-pixels). **/ maxCanvasPixels?: number; /** * Arbitrary data associated with the viewer. * This data is sent to the server when the document is saved. * @example * ```javascript * var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' } ); * viewer.options.userData = { secretNumber: 5, innerData: { innerContent: 'content' } }; * viewer.applyOptions(); * viewer.open('sample.pdf'); * ``` **/ userData: any; /** * Enable a floating search bar instead of the sidebar search panel. * @default Default value is true. * @example * ```javascript * var viewer = new DsPdfViewer("#root", { useFloatingSearchBar: false }); * ``` **/ useFloatingSearchBar: boolean; /** * Color settings for text selection and for active / inactive search result highlight. * * selectionColor: Changes the default color used to highlight the currently selected search result from the search results list, in the document. * * inactiveHighlightColor: Changes the default color used to highlight all the search results in the document. * * selectionColor: Changes the default color used to mark the selected text in the document. * @example * ```javascript * var options = { * useCanvasForSelection: { * selectionColor: "rgba(0, 0, 0, 0.25)", * highlightColor: "rgba(255, 94, 255, 0.35)", * inactiveHighlightColor: "rgba(125, 30, 176, 0.35)" * } * }; * var viewer = new DsPdfViewer("#root", options ); * viewer.addSearchPanel(); * viewer.open("sample.pdf"); * ``` **/ useCanvasForSelection: any; /** * Render interactive form elements. * @example * ```javascript * // Do not render interactive form: * var viewer = new DsPdfViewer("#root", { renderInteractiveForms: false } ); * ``` **/ renderInteractiveForms: boolean; /** * Set this option to true if you want to use the fileData property even if the document cannot be parsed as a valid PDF document. * @example * ```javascript * // Below is an example of how to display invalid file data when an error occurs: * var viewer = new DsPdfViewer('#root', { keepFileData: true }); * viewer.onError.register(function(eventArgs) { * var message = eventArgs.message; * if (message.indexOf("Invalid PDF structure") !== -1) { * console.log('Unable to load pdf document, pdf document is broken.'); * console.log("File data:"); * // Output file data to console: * console.log(viewer.fileData); * } else { * console.log('Unexpected error: ' + message); * } * }); * viewer.open('sample.pdf'); * ``` */ keepFileData: boolean; /** * PDF document renderer type - canvas or svg. * @example * ```javascript * var viewer = new DsPdfViewer("#root", { renderer: "svg" } ); * ``` */ renderer: 'canvas' | 'svg'; /** * Used when file name not available. * @example * ```javascript * viewer.options.friendlyFileName = "myFileName.pdf"; * viewer.applyOptions(); * ``` * */ friendlyFileName?: string; /** * Specifies the PDF file name, URL, or binary data to be loaded in the Viewer. * @example * ```javascript * var viewer = new DsPdfViewer("#root", { file: 'GcPdf.pdf' } ); * ``` * */ file?: string | any; /** * The onInitialized handler will be called immediately after the viewer is instantiated. * @example * ```javascript * var viewer = new DsPdfViewer("#root", { * onInitialized: (viewer)=> { * // put viewer initialization code here. * } * }); * ``` **/ onInitialized?: (viewer: any) => void; /** * Parameters object used by the "open" method. * @example * ```javascript * // Include Basic Authentication headers: * var viewer = new DsPdfViewer('#root', { * openParameters: { * headers: { * "Authorization": "Basic " + btoa(unescape(encodeURIComponent("USERNAME:PASSWORD"))), * "CustomHeader": "Custom header value" * } * } * }); * ``` * * @example * Example of initializing the PDF viewer with stream loading disabled. * This forces the PDF to load entirely at once instead of using Range requests (chunked loading). * Useful if the server does not support partial content (206) or for debugging. * ```javascript * // Create a new PDF viewer instance bound to the DOM element with ID 'root' * var viewer = new DsPdfViewer('#root', { * // Viewer configuration options * openParameters: { * // Disables streaming behavior - loads the entire PDF in one request * disableStream: true // Set to 'false' to enable Range requests (default) * } * }); * ``` * **/ openParameters?: OpenParameters; /** * A predefined password for protected pdf documents. * @example * ```javascript * viewer.options.password = "abc123"; * viewer.open("protected.pdf"); * ``` **/ password: string; /** * * @ignore exclude from docs. **/ supportApiPassword?: string; /** * Track view changes and restore previous state on next page load. * Note for trackFile - we are tracking opened file only when you open document using URI, not binary data. * @default * ```javascript * { * trackViewMode: true, trackMouseMode: true, trackScale: true, trackSidebar: true, trackSidebarWidth: true, * trackPageRotation: false, trackFullScreen: false, trackTheme: false, trackFile: false, * }; * ``` * @example * ```javascript * // disable tracking view changes: * var viewer = new DsPdfViewer("#root", { restoreViewStateOnLoad: false } ); * ``` * @example * ```javascript * // Track only scale (zoom): * var viewer = new DsPdfViewer("#root", { restoreViewStateOnLoad: { trackScale: true } }); * ``` * */ restoreViewStateOnLoad?: false | true | { trackViewMode?: boolean; trackMouseMode?: boolean; trackScale?: boolean; trackPageRotation?: boolean; trackFullScreen?: boolean; trackTheme?: boolean; trackSidebar?: boolean; trackSidebarWidth?: boolean; trackFile?: boolean; }; /** * URL to document list service used by DocumentListPanel (see addDocumentListPanel method). * The service should return JSON string with available documents array, e.g.: * [{"path": "doc1.pdf"}, {"path": "doc2.pdf", "name": "Hello doc 2", "title": "title 2"}] * or * ["pdf1.pdf", "pdf2.pdf"] * @default "/documents" * @example * ```javascript * // Load document list from external service: * var viewer = new DsPdfViewer("#root", { documentListUrl: "documents.json" } ); * ``` * Here is the content of the documents.json file: * ``` * [ * { * "path": "/sample1.pdf", * "name": "Simple text", * "title": "Sample 1" * }, * { * "path": "/sample2.pdf", * "previewContent": "Preview HTML content goes here.", * "title": "Sample 2" * }, * { * "path": "/sample3.pdf", * "name": "Open sample3.pdf", * "title": "Sample 3" * } * ] * ``` * @example * ```javascript * // Load document list using DATA URI: * var viewer = new DsPdfViewer("#root", { documentListUrl: 'data:,[{"path": "doc1.pdf"}, {"path": "doc2.pdf", "name": "Hello doc 2", "title": "title 2"}]' } ); * ``` * @example * ```javascript * // Use predefined document list: * var options = {}; * options.documentListUrl = [ * { * path: "/sample1.pdf", * name: "Open sample1.pdf", * title: "Sample 1" * }, * { * path: "/sample2.pdf", * name: "Open sample2.pdf", * title: "Sample 2" * }, * { * path: "/sample3.pdf", * name: "Open sample3.pdf", * title: "Sample 3" * } * ]; * var viewer = new DsPdfViewer("#root", options); * ``` * @example * ```javascript * // Use predefined document list with custom preview content: * var options = {}; * options.documentListUrl = [ * { * path: "/sample1.pdf", * title: "Sample 1", * previewContent: `
*

* Sample 1 *

*
*

Long sample 1 description goes here.

* eye * * *

*
*
` * }, * { * path: "/sample2.pdf", * title: "Sample 2", * previewContent: `
*

* Sample 2 *

*
*

Long sample 2 description goes here.

* eye * * *

*
*
` * }, * { * path: "/sample3.pdf", * name: "Open sample3.pdf", * title: "Sample 3 without custom preview content" * } * ]; * * var viewer = new DsPdfViewer("#root", options); * viewer.addDefaultPanels(); * const documentListPanelHandle = viewer.addDocumentListPanel(); * viewer.onAfterOpen.register(function() { * viewer.leftSidebar.menu.panels.open(documentListPanelHandle.id); * }); * ``` **/ documentListUrl: string | DocumentListItem[]; /** * URL to the Web Worker script. * The Web Worker script runs in the background and is used to load * and render PDF documents in a parallel background thread. * Please, note, that rendering a PDF on the main thread (without a Web Worker script) * can slow down the performance of the PDF viewer when loading large PDF files. * @example * ```javascript * var viewer = new DsPdfViewer("#root", { workerSrc: "http://localhost:5000/dspdfviewer.worker.js" } ); * ``` **/ workerSrc: string; /** * Zoom control options. * @example * ```javascript * var viewer = new DsPdfViewer("#root", { * zoomOptions: { * minZoom: 0.5, * maxZoom: 1.5, * dropdownZoomFactorValues: [0.5, 0.7, 1, 1.5] * } * }); * ``` **/ zoomOptions?: { /** * Defines min zoom factor * @default 0.25 (25%) **/ minZoom?: number; /** * Defines max zoom factor * @default 3 (300%) **/ maxZoom?: number; /** * Defines zoom factor array to show in Zoom Control Dropdown in Toolbar * @default [0.5, 1, 1.5, 2, 3] **/ dropdownZoomFactorValues?: number[]; }; /** * Zoom by mouse wheel settings. * @example * ```javascript * // Enable zoom with the mouse wheel without pressing the Control or Meta keys: * var viewer = new DsPdfViewer("#root", { zoomByMouseWheel: { always: true } } ); * ``` **/ zoomByMouseWheel: { always: boolean; ctrlKey: boolean; metaKey: boolean; }; /** * Use theme option to change default viewer theme. * Set this option to false if you want to disable the loading of * the built-in theme - this can be useful when you are already has theme css reference. * @example * ```javascript * // Load dark-yellow theme: * var viewer = new DsPdfViewer("#root", { theme: "dark-yellow.css", themes: ["themes/viewer", "themes/light-blue", "themes/dark-yellow"] } ); * ``` * @example * ```javascript * // * // Don't load built-in theme: * var viewer = new DsPdfViewer("#root", { theme: false } ); * ``` **/ theme: string | false; /** * Available viewer themes. * @example * ```javascript * var viewer = new DsPdfViewer("#root", { themes: ["themes/viewer", "themes/light-blue", "themes/dark-yellow"] } ); * ``` **/ themes: string[]; /** * Use the requireTheme option to apply built-in CSS theme, the option will inject theme styles directly into the page head. * Note, only known built-in theme can be specified, otherwise the viewer will fail. * Available built-in themes: "viewer", "dark", "dark-yellow", "gc-blue", "light", "light-blue". * This option takes precedence over the "theme" option which can be used to specify custom theme. * @example * ```javascript * var viewer = new DsPdfViewer(selector, { * requireTheme: "light" * }); * ``` **/ requireTheme?: "light" | "dark" | "viewer" | "light-blue" | "themes/dark-yellow" | "gc-blue" | null; /** * Use this option if you want to hide annotation popups. * Possible values are: * - ['Text', 'Link', 'Line', 'Square', 'Circle', 'Polygon', 'PolyLine', * 'Ink', 'Popup', 'FileAttachment', 'Sound', 'Redact', 'Stamp'] * - true (to hide popups for all annotations) * - 'All' (same behavior as true) * - 'None' (to show all popups) * @default undefined * @example * ```javascript * // Example: hide popups for all annotations * var viewer = new DsPdfViewer("#root", { hideAnnotationPopups: true }); * * // Example: hide popups for specific annotation types (Redact, Circle, and Square) * var viewer = new DsPdfViewer("#root", { hideAnnotationPopups: ["Redact", "Circle", "Square"] }); * * // Example: show all annotation popups * var viewer = new DsPdfViewer("#root", { hideAnnotationPopups: 'None' }); * ``` */ hideAnnotationPopups?: AnnotationTypeName | 'All' | 'None' | boolean; /** * Set this option to hide the timestamp in annotation popups. * @default false * @example * // Example: hide timestamps in annotation popups * var viewer = new DsPdfViewer("#root", { hidePopupTimestamp: true }); */ hidePopupTimestamp?: boolean; /** * Allows you to specify a custom format for displaying the date and time of annotations. * By default, it uses a locale-based format. You can set your own format string * (e.g., 'YYYY-MM-DD HH:mm:ss') to suit your preferences. * * @default undefined * @example * // Example: set a custom date and time format: * var viewer = new DsPdfViewer("#root", { annotationDateTimeFormat: 'YYYY-MM-DD HH:mm:ss' }); **/ annotationDateTimeFormat?: string; /** * Specifies annotation types which will be hidden when 'hide-annotations' button is checked. * Possible values are: ['Text', 'Link', 'FreeText', 'Line', 'Square', 'Circle', 'Polygon', * 'PolyLine', 'Ink', 'Popup', 'FileAttachment', 'Sound', 'ThreadBead', 'RadioButton', 'Checkbox', * 'PushButton', 'Choice', 'TextWidget', 'Redact', 'Stamp', 'Highlight', 'Underline', 'Squiggly', 'StrikeOut'] or true or 'All' (true and 'All' have the same behavior). * @default ['Text', 'FreeText', 'Line', 'Square', 'Circle', 'Polygon', 'PolyLine', 'Ink', 'Popup', 'Sound', 'Polygon', 'RadioButton', 'Checkbox', 'PushButton', 'Choice', 'TextWidget', 'Redact', 'Stamp', 'Highlight', 'Underline', 'Squiggly', 'StrikeOut']; * @example * ```javascript * // Hide all possible annotations. * let options = { hideAnnotationTypes: 'All' }; * ``` * @example * ```javascript * // Hide Push button and Redact annotations only. * let options = { hideAnnotationTypes: ['PushButton', 'Redact'] }; * ``` **/ hideAnnotationTypes?: AnnotationTypeName[] | 'All' | 'None' | boolean; /** * The URI to a folder where the external font CMap tables are stored. * @default 'resources/bcmaps/' * @example * ```javascript * var viewer = new DsPdfViewer("#root", { cMapUrl: "../data/cmaps/" } ); * ``` * */ cMapUrl?: string; /** * Indicates if the viewer should look for a compressed version of the CMap file with the extension '.bin'. * @default true * @example * ```javascript * var viewer = new DsPdfViewer("#root", { cMapPacked: false } ); * ``` * */ cMapPacked?: boolean; /** * Use the stamp option to configure Stamp button settings. * @default undefined * @example * ```javascript * // Specify your own set of predefined stamps. * var viewer = new DsPdfViewer("#root", { *  stamp: { *    stampCategories: [ *           { name: 'Nature', stampImageUrls: ['http://localhost:8080/150/160/nature.png', 'http://localhost:8080/250/140/nature.png', 'http://localhost:8080/250/150/nature.png'] }, *           { name: 'Nature 2', stampImageUrls: ['http://localhost:8080/170/150/nature.png', 'http://localhost:8080/210/130/nature.png', 'http://localhost:8080/250/120/nature.png'] } *    ] *  } * }); * ``` * @example * ```javascript * // Disable predefined stamps drop-down. * var viewer = new DsPdfViewer("#root", { *  stamp: { *    stampCategories: false *  } * }); * ``` **/ stamp: { /** * Optional. Default image resolution(DPI) for stamp images without DPI. **/ dpi?: number; /** * Stamp categories. **/ stampCategories?: StampCategory[] | boolean; /** * Optional. Selected image url. **/ selectedImageUrl?: string; }; /** * URL to an external Web API service which will be used to enable PDF editing features. * @example * ```javascript * var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer' } ); * ``` * @example * Turn on debug logging for persistent connections. * ```javascript * var viewer = new DsPdfViewer('#root', { supportApi: 'api/pdf-viewer', logLevel: 'Debug' } ); * ``` **/ supportApi?: string | SupportApiSettings; /** * The logging level used for persistent connections using signalr client. * Note that the ASP .NET version of the signalr client supports only 'Trace' log level. * @example * Turn on logging. * ```javascript * var viewer = new DsPdfViewer('#root', { logLevel: 'Trace' } ); * ``` **/ logLevel?: LogLevel; /** * @property {Object | boolean} scrollWhileEditing - Configures the behavior of two-finger scrolling while editing annotations. * * - If set to `true`, enables two-finger scrolling on all supported devices. * - If set to `false`, disables two-finger scrolling entirely during annotation editing. * - If an object is provided, it allows further customization: * * @property {("Touch" | "Pointer" | "All")} [eventsMode="All"] - Specifies the type of input events that trigger scrolling. * - `"Touch"`: Enables two-finger scrolling for touch events only. * - `"Pointer"`: Enables scrolling for pointer events only. * - `"All"`: Enables scrolling for both touch and pointer events. * * @property {number} scrollSpeed - Defines the speed of the scrolling effect. A higher value increases scroll sensitivity. * * This option is intended for testing purposes only and is excluded from the documentation. * * @ignore exclude from docs. */ scrollWhileEditing: { eventsMode?: "Touch" | "Pointer" | "All"; scrollSpeed: number; } | boolean; /** * Keyboard shortcut definitions. * Available built-in action tools: "zoomin" | "zoomout" | "zoom_pagesize" | "zoom_clientsize" | "select_all" | "rotate" | "pan" | "holdToPan" | * "selection" | "open" | "search" | "print" | "move_caret_left" | "move_caret_right" | "move_caret_up" | "move_caret_down" | * "move_caret_document_start" | "move_caret_document_end" | "move_caret_sequence_start" | "move_caret_sequence_end" | * "confirm-ok" | "confirm-cancel" | "scrollUp" | "scrollDown". * @example * Override keyboard shortcut "Ctrl +" * ```javascript * var viewer = new DsPdfViewer("#root", { * shortcuts: { * 107: { * ctrl: true, * tool: function(event) { * DsPdfViewer.findControl("#root").zoomValue += 10; * event.preventDefault(); * } * } * } * }); * ``` * @example * Remove all default shortcuts * ```javascript * var viewer = new DsPdfViewer("#root"); * viewer.options.shortcuts = {}; * ``` * @example * Disable grab when space is pressed * ```javascript * viewer.options.shortcuts["32"] = () => { }; * ``` * @example * Redefine and disable Ctrl+Z. Ctrl+Y * ```javascript * var viewer = new DsPdfViewer("#viewer", { * shortcuts: { * "Z": { * ctrl: true, * tool: function(e) { } * }, * "Y": { * ctrl: true, * tool: function(e) { } * } * } * }); * ``` * @example * Bind the "P" shortcut to the holdToPan action, leave the Ctrl+P shortcut for the "print" action * ```javascript * viewer.options.shortcuts["P"] = [{ ctrl: true, tool: "print" }, { tool: "holdToPan" }]; * ``` * @example * Create custom shortcut * ```javascript * viewer.options.shortcuts["E"] = { * ctrl: true, * alt: true, * tool: function(e) { alert("Ctrl+Alt+E pressed."); } * }; * ``` **/ shortcuts: { [keyCode: string]: KeyboardShortcutDefinition | KeyboardShortcutDefinition[]; }; } /** * Ruler line settings. **/ export type RulerLine = { /** * Line color. **/ color?: string; /** * The vertical position of the ruler as a percentage, starting from the bottom. * The valid value must be in the range 0-100. **/ position?: number; /** * The ruler line width. **/ size?: number; /** * Line type. **/ type?: 'solid' | 'dashed'; }; /** * Defines appearance, behavior, and validation settings for the input field inside the Form Filler dialog. */ export type InputFieldMapping = { /** * @property {boolean} [hidden] - Set to true to hide the field from the list of Form Filler fields. */ hidden?: boolean; /** * @property {boolean} [nolabel] - Set to true to hide the field label and display the full-width input control. */ nolabel?: boolean; /** * @property {number} [orderindex] - Optional. Specifies the order of fields in the Form Filler dialog box. */ orderindex?: number; /** * @property {string} [rowcustomcss] - Applies an additional custom CSS class to the outer DOM container of the form field input control. */ rowcustomcss?: string; /** * @property {(fieldValue: string | string[], field: WidgetAnnotation, args: { caller: ValidationCallerType }) => boolean | string} [validator] * - Custom validator function called on the mapped field before saving changes or after changing the value * if {@link GcProps.validateoninput} is set to true. * Return true or null for a successful result. Return a string with a validation error message for failure * (to be displayed in the user interface). */ validator?: (fieldValue: string | string[], field: WidgetAnnotation, args: { caller: ValidationCallerType; }) => boolean | string; }; /** * Defines appearance, behavior, and validation settings for the input field inside the Form Filler dialog. */ export type FormFieldMapping = InputFieldMapping & GcProps; /** * Appearance settings for the Signature Tool dialog. **/ export type SignToolSettings = { /** * Dialog location within window rectangle. Origin is top/left. * @default 'Center' **/ dialogLocation?: 'Center' | 'Top' | 'Right' | 'Bottom' | 'Left' | { x: number; y: number; }; /** * Specifies whether to hide tab buttons. * @default false **/ hideTabs?: boolean; /** * Specifies whether to hide the toolbar which can be used to customize typing and drawing styles. * @default false **/ hideToolbar?: boolean; /** * Specifies whether to hide dialog title. * @default false **/ hideDialogTitle?: boolean; /** * Specifies whether to hide the "Save signature" button. * @default false **/ hideSaveSignature?: boolean; /** * Specifies whether to hide dialog footer. * @default false **/ hideDialogFooter?: boolean; /** * Array of the available tabs. The order of the tabs is preserved. * Possible values are: 'Type', 'Draw', 'Image'. * @default ['Type', 'Draw', 'Image'] **/ tabs?: ('Type' | 'Draw' | 'Image')[]; /** * Initially selected tab. * @default Default is 'Draw' * @example * ```javascript * var viewer = new DsPdfViewer("#host", { * signTool: { selectedTab: 'Type' } * }); * ``` **/ selectedTab?: 'Type' | 'Draw' | 'Image'; /** * Dialog title. * @default 'Add Signature' * @example * ```javascript * options.signTool = { * title: 'Signature' * }; * ``` * */ title?: string; /** * Pen color. * @default #000000 * @example * ```javascript * options.signTool = { * penColor: '#00ff00' * }; * ``` **/ penColor?: string; /** * Pen width. * @default 2 **/ penWidth?: number; /** * The default text that will be used for the "Type" tab. **/ text?: string; /** * Text color. * @default #000000 * @example * ```javascript * options.signTool = { * textColor: '#00ff00' * }; * ``` **/ textColor?: string; /** * The default font size that will be used for the "Type" tab. * @default 48 **/ fontSize?: number; /** * The default font name that will be used for the "Type" tab. * @default 'Brush Script MT' **/ fontName?: string; /** * Array of the available font names. * @default ['Arial', 'Verdana', 'Helvetica', 'Tahoma', 'Trebuchet MS', 'Times New Roman', 'Georgia', 'Garamond', 'Courier New', 'Brush Script MT'] * */ fontNames?: string[]; /** * Italic text style for the "Type" tab. * @default true **/ italic?: boolean; /** * Bold text style for the "Type" tab. * @default false **/ bold?: boolean; /** * If true, the signature tool will try to load an image from local storage for the Image tab. * @default false * @example * ```javascript * // Create the viewer: * var viewer = new DsPdfViewer({ userName: 'John', signTool: { hasImage: true, saveSignature: true, selectedTab: 'Image', tabs: ['Image'] } }); * // save image for use with Image tab: * viewer.signToolStorage.saveImage('Image', document.querySelector('img')); * ``` **/ hasImage?: boolean; /** * Indicates whether the signature data must be saved * into browser's local storage for later use. * The saved data is owned by the active user, which can be set using the currentUserName property. * @default false **/ saveSignature?: boolean; /** * Result annotation type. * @default 'stamp' * @ignore exclude from docs **/ annotationType?: 'stamp' | 'signature'; /** * Convert the result stamp to content. * @default false * @example * ```javascript * var viewer = new DsPdfViewer("#root", signTool: { convertToContent: true }); * ``` **/ convertToContent?: boolean; /** * Result annotation subject. * @default empty string **/ subject?: string; /** * Destination page index. * @default The default is the visible page index. **/ pageIndex?: number; /** * The size of the canvas in pixels. * @default {width: 500; height: 200} **/ canvasSize?: { width: number; height: number; }; /** * Automatically adjust the canvas size so that it shrinks to fit the window when the window size is small. * @default true; **/ autoResizeCanvas?: boolean; /** * The result location of the annotation on the page. * Note, when you specify the exact location (using {x, y} values), the origin is at the bottom left corner. * @default 'BottomRight' **/ location?: 'Center' | 'Top' | 'Right' | 'Bottom' | 'Left' | 'TopLeft' | 'TopRight' | 'BottomRight' | 'BottomLeft' | { x: number; y: number; }; /** * The target value for the canvas scale. * The result annotation bounds will be scaled using this value. * For example, if destinationScale is 0.5 and canvasSize is 400/200, * the size of the result annotation will be 200/100. * @default 0.5 **/ destinationScale?: number; /** * Canvas ruler lines customization. * @example * ```javascript * // Hide all ruler lines: * viewer.options.signTool = { ruler: false }; * ``` * @example * ```javascript * // Hide the ruler for the Draw tab: * viewer.options.signTool = { ruler: { Draw: false } }; * ``` * @example * ```javascript * // Define a custom ruler lines for the Draw tab: * viewer.options.signTool = { * ruler: { * Draw: [{ color: "#ff0000", size: 5, type: "dashed", position: 50 }, *        { color: "#ff00ff", size: 2, type: "solid", position: 80 }] *   } * }; * ``` **/ ruler?: { /** * Ruler lines for the 'Image' tab: **/ Draw: RulerLine[] | false; /** * Ruler lines for the 'Type' tab: **/ Type: RulerLine[] | false; /** * Ruler lines for the 'Image' tab: **/ Image: RulerLine[] | false; } | false; /** * The beforeShow event handler will be called before the dialog is shown. * Return false if you want to prevent the dialog from showing. * @example * ```javascript * var viewer = new DsPdfViewer("#root"); * viewer.options.signTool = { * beforeShow: function() { * // Return false to cancel showing the dialog: * return false; * }, * }; * ``` **/ beforeShow?: (signatureDialog: any) => boolean; /** * The afterShow event handler will be called after the dialog is shown. * @example * ```javascript * var viewer = new DsPdfViewer("#root"); * viewer.options.signTool = { * afterShow: function() { * alert('The dialog is shown.'); * }, * }; * ``` **/ afterShow?: (signatureDialog: any) => void; /** * The beforeAdd event handler will be called when the Add button is clicked. * Return false if you want to cancel default add action. * @example * ```javascript * var viewer = new DsPdfViewer("#root"); * viewer.options.signTool = { * beforeAdd: function() { * // Put your code here. * return true; * }, * }; * ``` * */ beforeAdd?: (activeTool: any, signatureDialog: any) => boolean; /** * The afterAdd event handler will be called when the result annotation is added and signature dialog is closed. * @example * ```javascript * var viewer = new DsPdfViewer("#root"); * viewer.options.signTool = { * afterAdd: function() { * // Put your code here. * return true; * }, * }; * ``` * @example * ```javascript * // Update the title of the result annotation and convert the annotation to content: * var viewer = new DsPdfViewer(selector, { * supportApi: { * apiUrl: 'http://127.0.0.1:5001/support-api/gc-pdf-viewer', * webSocketUrl: false * }, * signTool: { * afterAdd: function(result) { * var annotation = result.annotation; * annotation.title = 'New Title'; * annotation.convertToContent = true; * viewer.updateAnnotation(result.pageIndex, annotation); * return true; * } * } * }); * ``` **/ afterAdd?: (result: { pageIndex: number; annotation: AnnotationBase; }) => void; /** * The beforeHide event handler will be called before the dialog is closed. * Return false if you want to to prevent the dialog from closing. * * @example * ```javascript * viewer.options.signTool = { * subject: "subject1", * beforeHide: function (dialog) { * // You can execute any custom code when the dialog is about to hide: * console.log("dialog subject is " + dialog.subject); * } * }; * ``` * @example * ```javascript * var viewer = new DsPdfViewer("#root"); * viewer.options.signTool = { * beforeHide: function() { * // Return false to prevent the dialog from closing: * return false; * }, * }; * ``` **/ beforeHide?: (signatureDialog: any) => boolean; }; /** * Form filler dialog settings. **/ export type FormFillerSettings = { /** * The type of action to execute if form validation fails after clicking Apply button. * @default confirm * @example * Reject apply changes when validation fails: * ```javascript * options.formFiller = { * applyAfterFailedValidation: 'reject' * } * ``` * @example * Execute custom function and reject changes * ```javascript * options.formFiller = { * applyAfterFailedValidation: function() { * alert('Validation failed, changes rejected.'); * return false; * } * } * ``` * @example * Execute custom function and accept changes * ```javascript * options.formFiller = { * applyAfterFailedValidation: function() { * alert('Validation failed, but changes will be accepted.'); * return true; * } * } * ``` * */ applyAfterFailedValidation?: 'confirm' | 'reject' | 'apply' | Function; /** * Form Filler dialog layout type. * @default The default is 'Auto' - layout will switch to 'OneColumn' for a small device screen. * @example * ```javascript * options.formFiller = { * layout: 'OneColumn' * } * ``` * */ layout?: 'Auto' | 'OneColumn' | 'TwoColumns'; /** * Dialog title. * @default 'Form Filler' * @example * ```javascript * options.formFiller = { * title: 'Please fill the form' * }; * ``` * */ title?: string; /** * The validator function which will be called for each field before saving changes * or on user input when field's mapping settings contains validateOnInput flag. * You can return a string value with message about validation error, this message will be shown in UI. * Return true or null for success result. * */ validator?: (fieldValue: string | string[], field: WidgetAnnotation, args: { caller: ValidationCallerType; }) => boolean | string; /** * The onInitialize event handler is called after the list of fields is loaded and initialized but not yet rendered. * @example * ```javascript * options.formFiller = { * // Combine two address fields into one after loading fields * onInitialize: function(formFiller) { * var addr1 = formFiller.getFieldByName('Addr1'); * var addr2 = formFiller.getFieldByName('Addr2'); * if(addr1 && addr2) { * if(addr2.fieldValue) { * addr1.fieldValue = addr1.fieldValue + '\n' + addr2.fieldValue; * addr2.fieldValue = ''; * formFiller.onFieldChanged(addr1); * formFiller.onFieldChanged(addr2); * } * } * } * } * ``` * */ onInitialize?: (formFiller: any) => void; /** * The beforeApplyChanges event handler will be called when the Apply button is clicked after success fields validation. * Return false if you want to cancel apply changes. * @example * ```javascript * // Split address value into two address fields before applying changes: * var viewer = new DsPdfViewer("#root"); * viewer.options.formFiller = { * beforeApplyChanges: function(formFiller) { * var addr1 = formFiller.getFieldByName('Addr1'); * var addr2 = formFiller.getFieldByName('Addr2'); * if(addr1 && addr2) { * var s = addr1.fieldValue; * var nlInd = s.indexOf('\n'); * if(nlInd !== -1) { * var firstPart = s.substring(0, nlInd).replace(/\n+/g, ' '); * var secondPart = s.substr(nlInd).replace(/\n+/g, ' '); * addr1.fieldValue = firstPart; * addr2.fieldValue = secondPart; * } else { * addr2.fieldValue = ''; * } * formFiller.onFieldChanged(addr1); * formFiller.onFieldChanged(addr2); * } * return true; * }, * }; * ``` * */ beforeApplyChanges?: (formFiller: any) => boolean; /** * The beforeFieldChange event handler will be called right before the field value changed. * Return false if you want to cancel the field value change. * */ beforeFieldChange?: (field: WidgetAnnotation, formFiller: any) => boolean; /** * Form fields mappings, * key - field name, * value - {@link FormFieldMapping}. * */ mappings: { [fieldName: string]: FormFieldMapping; }; }; /** * PDF Organizer dialog settings. **/ export type PdfOrganizerSettings = { /** * PDF Organizer dialog layout type. * @default The default is 'Auto' - layout will switch to 'OneColumn' for a small device screen. * @example * ```javascript * options.formFiller = { * layout: 'OneColumn' * } * ``` **/ layout?: 'Auto' | 'OneColumn' | 'TwoColumns'; /** * Dialog title. * @default 'PDF Organizer' * @example * ```javascript * options.pdfOrganizer = { * title: 'PDF document structure' * }; * ``` * */ title?: string; }; /** * Replace Text dialog settings. **/ export type ReplaceTextSettings = { /** * Dialog title. * @default 'Replace Text' * @example * ```javascript * options.replaceText = { * title: 'Replace text in document' * }; * ``` * */ title?: string; }; /** * Configuration options for the Table Data Extraction panel. * Defines settings for table data extraction behavior, appearance, and export capabilities. */ export type TableDataExtractionSettings = { /** * Specifies the formats available for exporting extracted table data. * * @type {TableDataExportFormat[]} * @default ['tsv', 'csv', 'json', 'xlsx', 'xml', 'html'] * * @example * // Allow only CSV and JSON exports * options.tableDataExtraction = { * allowedExportFormats: ['csv', 'json'] * }; * * @remarks * Supported formats: * - 'tsv': Tab-separated values * - 'csv': Comma-separated values * - 'json': JavaScript Object Notation * - 'xlsx': Microsoft Excel format * - 'xml': Extensible Markup Language * - 'html': HyperText Markup Language table */ allowedExportFormats?: TableDataExportFormat[]; /** * Advanced configuration for table extraction algorithms. * * @type {ClientTableExtractOptions} * * @example * // Configure extraction precision parameters * options.tableDataExtraction = { * extractOptions: { * CoefPrecision: 0.3, * CoefTokenization: 0.1, * MinimumRowHeight: 15 * } * }; * * @property {number} [CoefPrecision] - Precision coefficient for cell detection (0-1) * @property {number} [CoefTokenization] - Text tokenization sensitivity (0-1) * @property {number} [MinimumDistanceBetweenRows] - Minimum row spacing in pixels * @property {number} [MinimumDistanceBetweenCols] - Minimum column spacing in pixels */ extractOptions?: ClientTableExtractOptions; /** * UI customization options for the Table Extraction Panel. */ appearance?: { /** * Controls visibility and ordering of extraction parameters in the options panel. * * @type {(ExtractTableOptionType[] | boolean)} * @default ["CoefMinimumDistanceBetweenRows", "CoefMinimumDistanceBetweenCols", "MinimumRowHeight", "MinimumColWidth"] * * @example * ```javascript * // Show specific options in custom order * options.tableDataExtraction = { * appearance: { * visibleOptions: ['CoefPrecision', 'MinimumRowHeight'] * } * }; * ``` * * @example * ```javascript * // Hide all options * options.tableDataExtraction = { * appearance: { * visibleOptions: false * } * }; * ``` * * @remarks * When array is provided, only listed options will be visible in the specified order. * When set to false, all options will be hidden from the UI. */ visibleOptions?: ExtractTableOptionType[] | boolean; /** * Visual styling options for the table extraction editor interface. * * @example * ```javascript * viewer.options.tableDataExtraction = { * appearance: { * visualEditor: { * lineColor: "red", * selectionAreaColor: "rgba(255,0,0,0.2)", * hideSelectionArea: false * } * } * }; * ``` */ visualEditor?: { /** * Determines whether auto - scrolling is enabled when the cursor reaches the edge of the page during table selection. * When set to `true` or`undefined`, auto - scrolling is enabled, allowing the page to scroll automatically as the cursor approaches the edge. * If set to`false`, auto - scrolling is disabled. */ enableAutoScroll?: boolean; /** * Color of the grid lines in the visual editor * @type {string} * @default "#3a87fd" (blue) * @example "red", "#FF0000", "rgb(255,0,0)" */ lineColor?: string; /** * Empty cell background color * @type {string} * @default rgba(165, 151, 151, 0.2) */ emptyCellColor?: string; /** * Additional CSS styles to apply to the visual editor * @type {string} * @example "border: 1px dashed black; background-color: yellow;" */ cssText?: string; /** * Background color of the selection area * @type {string} * @default "rgba(58, 135, 253, 0.2)" (light blue) * @example "rgba(255,0,0,0.3)" for semi-transparent red */ selectionAreaColor?: string; /** * Opacity level of the selection area (0-1) * @type {string} * @default "0.2" */ selectionAreaOpacity?: string; /** * Whether to hide the selection area highlight * @type {boolean} * @default false */ hideSelectionArea?: boolean; }; }; }; /** * Represents the type of options available for table extraction. * * These options are used to configure various parameters for extracting table data, * such as precision, tokenization, and layout settings. */ export type ExtractTableOptionType = "CoefPrecision" | "CoefTokenization" | "CoefDuplicateTokens" | "CoefHorzOverlay" | "CoefVertOverlay" | "CoefMinimumDistanceBetweenRows" | "CoefMinimumDistanceBetweenCols" | "IncludeInvisibleText" | "MinimumColWidth" | "MinimumRowHeight"; /** * The default set of table extraction options that are visible in the Table Extraction Panel. * * These options determine which settings are available for editing by default. * * @ignore exclude from docs. * * @type {ExtractTableOptionType[]} * @default ["CoefMinimumDistanceBetweenRows", "CoefMinimumDistanceBetweenCols", "MinimumRowHeight", "MinimumColWidth"] * @example * ```javascript * options.tableDataExtraction = { * visibleOptions: ['CoefPrecision', 'CoefTokenization'] * }; * ``` */ export declare const DEFAULT_VISIBLE_EXTRACT_OPTIONS: ExtractTableOptionType[];