Options
All
  • Public
  • Public/Protected
  • All
Menu

GcDocs PDF Viewer - v2.2.8

Index

Enumerations

Classes

Interfaces

Type aliases

Variables

Functions

Type aliases

AnnotationMarkedStateType

AnnotationMarkedStateType: "Marked" | "Unmarked"

Marked states.

AnnotationReviewStateType

AnnotationReviewStateType: "None" | "Accepted" | "Cancelled" | "Completed" | "Rejected"

Review states.

AnnotationStateModel

AnnotationStateModel: "Marked" | "Review"

Annotation state model.

AnnotationTypeName

AnnotationTypeName: "Text" | "Link" | "FreeText" | "Line" | "Square" | "Circle" | "Polygon" | "PolyLine" | "Highlight" | "Underline" | "Squiggly" | "Strikeout" | "Stamp" | "Caret" | "Ink" | "Popup" | "FileAttachment" | "Sound" | "Movie" | "Widget" | "Screen" | "PrinterMark" | "TrapNet" | "WaterMark" | "Redact" | "Signature" | "ThreadBead" | "RadioButton" | "Checkbox" | "PushButton" | "Choice" | "TextWidget"

Annotation type.

BaseToolProps

BaseToolProps: { canvasSize: { height: number; width: number }; enabled: boolean; in17n: i18n; onChanged: (isDirty: boolean) => void; settings?: SignToolSettings; signToolStorage: SignToolStorage }

Sign tool component properties.

Type declaration

  • canvasSize: { height: number; width: number }
    • height: number
    • width: number
  • enabled: boolean
  • in17n: i18n
  • onChanged: (isDirty: boolean) => void
      • (isDirty: boolean): void
      • Parameters

        • isDirty: boolean

        Returns void

  • Optional settings?: SignToolSettings
  • signToolStorage: SignToolStorage

ClientMessage

ClientMessage: Message & { clientId: string; data?: ClientMessageParameters; type: ClientMessageType | ClientRequestType }

Client transport message.

ColorEditorLocalization

ColorEditorLocalization: { textB: string; textColorPicker: string; textG: string; textHex: string; textHue: string; textLightness: string; textOpacity: string; textPalettes: string; textR: string; textSaturation: string; textStandardColors: string; textWebColorNames: Record<string, string>; textWebColors: string }

Color editor localization properties.

Type declaration

  • textB: string

    Label for B input

  • textColorPicker: string

    Text for color picker label.

  • textG: string

    Label for G input

  • textHex: string

    Label for Hex input

  • textHue: string

    Label for Hue slider

  • textLightness: string

    Label for Lightness slider

  • textOpacity: string

    Opacity text.

  • textPalettes: string

    Text for Palettes label.

  • textR: string

    Label for R input

  • textSaturation: string

    Label for Saturation slider

  • textStandardColors: string

    Text for Standard Colors label.

  • textWebColorNames: Record<string, string>

    Web color names.

  • textWebColors: string

    Text for WebColors palette label.

DocumentInformation

DocumentInformation: { Author?: undefined | string; CreationDate?: undefined | string; Creator?: undefined | string; FileName: string; FileSizeBytes: number; IsAcroFormPresent?: undefined | false | true; IsLinearized?: undefined | false | true; IsXFAPresent?: undefined | false | true; Keywords: string; ModDate?: undefined | string; PDFFormatVersion?: undefined | string; PageSizeInches?: undefined | { height: number; width: number }; PagesCount?: undefined | number; Producer?: undefined | string; Subject?: undefined | string; Title?: undefined | string }

PDF metadata provides additional information about a PDF document, including file name, title, date of creation, author, title, etc.

Type declaration

  • Optional Author?: undefined | string

    Author name.

  • Optional CreationDate?: undefined | string

    Creation date

  • Optional Creator?: undefined | string

    Application that was used to create the file.

  • FileName: string

    File name.

  • FileSizeBytes: number

    File size in bytes.

  • Optional IsAcroFormPresent?: undefined | false | true

    Indicates whether the document contains an Acro Form.

  • Optional IsLinearized?: undefined | false | true

    Indicates whether the document is linearized.

  • Optional IsXFAPresent?: undefined | false | true

    Determines whether the AcroForm contains XFA data.

  • Keywords: string

    Document keywords.

  • Optional ModDate?: undefined | string

    Modification date.

  • Optional PDFFormatVersion?: undefined | string

    PDF version.

  • Optional PageSizeInches?: undefined | { height: number; width: number }

    Page size (inches).

  • Optional PagesCount?: undefined | number

    PAges count.

  • Optional Producer?: undefined | string

    Producer name.

  • Optional Subject?: undefined | string

    Document subject.

  • Optional Title?: undefined | string

    Document title.

FieldValidationResult

FieldValidationResult: { invalidLabel?: undefined | string; valid: boolean }

Field validation result.

Type declaration

  • Optional invalidLabel?: undefined | string
  • valid: boolean

FindOptions

FindOptions: { EndsWith: boolean; HighlightAll: boolean; MatchCase: boolean; Proximity: boolean; SearchBackward: boolean; StartsWith: boolean; Text: string; WholeWord: boolean; Wildcards: boolean }

Defines options to perform search.

Type declaration

  • EndsWith: boolean

    Specifies whether to search for at the beginning of Text.

  • HighlightAll: boolean

    Highlight all search results.

  • MatchCase: boolean

    Specifies whether the search is case sensitive.

  • Proximity: boolean

    Proximity searching is a way to search for two or more words that occur within a certain number of words from each other.

  • SearchBackward: boolean

    Specifies whether to perform the search in the backward order.

  • StartsWith: boolean

    Specifies whether to search for at the beginning of the word.

  • Text: string

    The text to search for.

  • WholeWord: boolean

    Specifies whether to search for the specified whole word only.

  • Wildcards: boolean

    Specifies whether a search query is wildcards. Note, wildcards search cannot be combined with options like 'EndsWith', 'StartsWith', 'WholeWord'.

FormFieldMapping

FormFieldMapping: { hidden?: undefined | false | true; nolabel?: undefined | false | true; orderindex?: undefined | number; rowcustomcss?: undefined | string; validator?: undefined | ((fieldValue: string | string[], field: WidgetAnnotation, args: { caller: ValidationCallerType }) => boolean | string) } & GcProps

Appearance, behavior and validation settings for the input field inside the Form Filler dialog.

FormFillerSettings

FormFillerSettings: { applyAfterFailedValidation?: "confirm" | "reject" | "apply" | Function; beforeApplyChanges?: undefined | ((formFiller: any) => boolean); beforeFieldChange?: undefined | ((field: WidgetAnnotation, formFiller: any) => boolean); layout?: "Auto" | "OneColumn" | "TwoColumns"; mappings: {}; onInitialize?: undefined | ((formFiller: any) => void); title?: undefined | string; validator?: undefined | ((fieldValue: string | string[], field: WidgetAnnotation, args: { caller: ValidationCallerType }) => boolean | string) }

Form filler dialog settings.

Type declaration

  • Optional applyAfterFailedValidation?: "confirm" | "reject" | "apply" | Function

    The type of action to execute if form validation fails after clicking Apply button.

    default

    confirm

    example

    Reject apply changes when validation fails:

         options.formFiller = {
               applyAfterFailedValidation: 'reject'
         }
    example

    Execute custom function and reject changes

         options.formFiller = {
               applyAfterFailedValidation: function() {
                  alert('Validation failed, changes rejected.');
                  return false;
               }
         }
    example

    Execute custom function and accept changes

         options.formFiller = {
               applyAfterFailedValidation: function() {
                  alert('Validation failed, but changes will be accepted.');
                  return true;
               }
         }
  • Optional beforeApplyChanges?: undefined | ((formFiller: any) => boolean)

    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
    // Split address value into two address fields before applying changes:
    var viewer = new GcPdfViewer("#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;
       },
    };
  • Optional beforeFieldChange?: undefined | ((field: WidgetAnnotation, 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.

  • Optional layout?: "Auto" | "OneColumn" | "TwoColumns"

    Form Filler dialog layout type.

    default

    The default is 'Auto' - layout will switch to 'OneColumn' for a small device screen.

    example
         options.formFiller = {
               layout: 'OneColumn'
         }
  • mappings: {}

    Form fields mappings, key - field name, value - @see FormFieldMapping.

  • Optional onInitialize?: undefined | ((formFiller: any) => void)

    The onInitialize event handler is called after the list of fields is loaded and initialized but not yet rendered.

    example
    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);
               }
           }
       }
    }
  • Optional title?: undefined | string

    Dialog title.

    default

    'Form Filler'

    example
          options.formFiller = {
                title: 'Please fill the form'
          };
  • Optional validator?: undefined | ((fieldValue: string | string[], field: WidgetAnnotation, args: { caller: ValidationCallerType }) => boolean | 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.

GcPdfSearcherOptions

GcPdfSearcherOptions: { caseSensitive: boolean; endsWith: boolean; entireWord: boolean; findPrevious: boolean; highlightAll: boolean; phraseSearch: boolean; proximity: boolean; query: string; startsWith: boolean; wildcards: boolean }

GcPdfSearcher options.

Type declaration

  • caseSensitive: boolean

    Indicates caseSensitive search.

  • endsWith: boolean

    Indicates endsWith search.

  • entireWord: boolean

    Indicates entireWord search.

  • findPrevious: boolean

    Search direction.

  • highlightAll: boolean

    Indicates highlightAll search.

  • phraseSearch: boolean

    Indicates phrase search.

  • proximity: boolean

    Indicates proximity search.

  • query: string

    Search query.

  • startsWith: boolean

    Indicates startsWith search.

  • wildcards: boolean

    Indicates wildcards search.

GcProps

GcProps: { autocomplete?: string | "on" | "off" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-local-prefix" | "tel-local-suffix" | "tel-extension" | "impp" | "url" | "photo"; autofocus?: undefined | false | true; defaultvalue?: undefined | string; disabled?: undefined | false | true; displayname?: undefined | string; inputmode?: "numeric" | "string"; max?: any; maxlength?: undefined | number; min?: any; minlength?: undefined | number; multiline?: undefined | false | true; multiple?: undefined | false | true; orderindex?: undefined | number; pattern?: undefined | string; placeholder?: undefined | string; readonly?: undefined | false | true; required?: undefined | false | true; spellcheck?: "true" | "false"; title?: undefined | string; type?: "text" | "date" | "time" | "month" | "week" | "number" | "tel" | "search" | "textarea" | string; validateoninput?: undefined | false | true; validationmessage?: undefined | string }

Additional appearance and behavior properties for the input field.

Type declaration

  • Optional autocomplete?: string | "on" | "off" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-local-prefix" | "tel-local-suffix" | "tel-extension" | "impp" | "url" | "photo"

    The autocomplete attribute lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field. Note, the behavior of this property depends on the browser implementation.

    see

    https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

    see

    https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill

  • Optional autofocus?: undefined | false | true

    Indicates whether a field should automatically get focus when the Form filler dialog is activated or when the page loads.

  • Optional defaultvalue?: undefined | string

    The default value.

  • Optional disabled?: undefined | false | true

    Indicates whether a field is disabled, or not.

  • Optional displayname?: undefined | string

    Use the displayname property to specify the text that will appear as a field label in the Form Filler dialog box. Applicable only for the Form Filler dialog box.

  • Optional inputmode?: "numeric" | "string"

    If your recommended (or required) password syntax rules would benefit from an alternate text entry interface than the standard keyboard, you can use the inputmode property to request a specific one. The most obvious use case for this is if the password is required to be numeric (such as a PIN). Mobile devices with virtual keyboards, for example, may opt to switch to a numeric keypad layout instead of a full keyboard, to make entering the password easier.

  • Optional max?: any

    The maximum value to accept for the input. Applicable for date or number input.

  • Optional maxlength?: undefined | number

    The maximum number of characters the input should accept.

  • Optional min?: any

    The minimum value to accept for the input. Applicable for date or number input.

  • Optional minlength?: undefined | number

    The minimum number of characters long the input can be and still be considered valid.

  • Optional multiline?: undefined | false | true

    Set this property to true if you want to use multiline text input element.

  • Optional multiple?: undefined | false | true

    A boolean property which, if present, indicates that the user can enter a list of multiple e-mail addresses, separated by commas and, optionally, whitespace characters.

  • Optional orderindex?: undefined | number
  • Optional pattern?: undefined | string

    The pattern property specifies a regular expression that the field value is checked against.

    example

    pattern for email validation: "\S+@\S+.\S+"

  • Optional placeholder?: undefined | string

    Represents the placeholder text in an input or textarea element when value is empty.

  • Optional readonly?: undefined | false | true

    Indicates whether the field is read-only, or not.

  • Optional required?: undefined | false | true

    When present, it specifies that an input field must be filled.

  • Optional spellcheck?: "true" | "false"

    The spellcheck property is an enumerated attribute defines whether the element may be checked for spelling errors Note that the spellcheck property may have limited support by some browser vendors.

    see

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text#spellcheck

  • Optional title?: undefined | string

    Use the title property to specify text that most browsers will display as a tooltip.

  • Optional type?: "text" | "date" | "time" | "month" | "week" | "number" | "tel" | "search" | "textarea" | string

    State of the input type attribute.

    see

    https://html.spec.whatwg.org/ section "4.10.5 The input element" for other input types.

  • Optional validateoninput?: undefined | false | true

    True indicates whether validation should be performed immediately during user input, otherwise input validation will be performed on blur event.

  • Optional validationmessage?: undefined | string

    Representing a localized message that describes the validation constraints that the control does not satisfy (if any).

GcRightSidebarState

GcRightSidebarState: "collapsed" | "expanded" | "hidden"

Right sidebar state.

GcRightSidebarTool

GcRightSidebarTool: "none" | "reply-tool"

Right sidebar tool.

ImageToolModel

ImageToolModel: { hasImage?: undefined | false | true }

Image tool component state model.

Type declaration

  • Optional hasImage?: undefined | false | true

LineEndStyle

LineEndStyle: "Square" | "Circle" | "None" | "Diamond" | "OpenArrow" | "ClosedArrow" | "Butt" | "ROpenArrow" | "RClosedArrow" | "Slash"

Line end style.

LinkDestinationType

LinkDestinationType: "XYZ" | "Fit" | "FitH" | "FitBH" | "FitV" | "FitBV" | "FitR" | "FitB"

Link destination type.

LinkType

LinkType: "url" | "action" | "dest" | "js" | "unknown"

Link annotation type.

LogLevel

LogLevel: "None" | "Critical" | "Error" | "Warning" | "Information" | "Debug" | "Trace"

Message

Message: { correlationId?: undefined | string }

Base transport message.

Type declaration

  • Optional correlationId?: undefined | string

    Auto-generated correlation Id.

ModificationParameters

ModificationParameters: { data?: { annotation: AnnotationBase; pageIndex: number } | { annotationId: string; pageIndex: number } | StructureChanges; type: ModificationType }

ClientMessageType.Modification connection message arguments.

Type declaration

  • Optional data?: { annotation: AnnotationBase; pageIndex: number } | { annotationId: string; pageIndex: number } | StructureChanges
  • type: ModificationType

ModificationsState

ModificationsState: { lastChangeType: ModificationType; newAnnotations: { annotation: AnnotationBase; pageIndex: number }[]; removedAnnotations: { annotationId: string; pageIndex: number }[]; structure?: StructureChanges; undoCount: number; undoIndex: number; updatedAnnotations: { annotation: AnnotationBase; pageIndex: number }[]; version: number }

Shared document modifications.

Type declaration

  • lastChangeType: ModificationType
  • newAnnotations: { annotation: AnnotationBase; pageIndex: number }[]
  • removedAnnotations: { annotationId: string; pageIndex: number }[]
  • Optional structure?: StructureChanges
  • undoCount: number
  • undoIndex: number
  • updatedAnnotations: { annotation: AnnotationBase; pageIndex: number }[]
  • version: number

NamedAction

NamedAction: "GoBack" | "GoForward" | "NextPage" | "PrevPage" | "LastPage" | "FirstPage"

Named action. Used by link annotation. See PDF reference, table 8.45 - Named action.

PdfToolbarLayout

PdfToolbarLayout: { annotationEditor: ToolbarLayout; formEditor: ToolbarLayout; viewer: ToolbarLayout }

Defines the layout of the toolbar for different viewer modes: viewer, annotationEditor, formEditor.

Type declaration

  • annotationEditor: ToolbarLayout

    The toolbar layout for the Annotation editor mode.

  • formEditor: ToolbarLayout

    The toolbar layout for the Form editor mode.

  • viewer: ToolbarLayout

    The toolbar layout for viewer mode.

RulerLine

RulerLine: { color?: undefined | string; position?: undefined | number; size?: undefined | number; type?: "solid" | "dashed" }

Ruler line settings.

Type declaration

  • Optional color?: undefined | string

    Line color.

  • Optional position?: undefined | number

    The vertical position of the ruler as a percentage, starting from the bottom. The valid value must be in the range 0-100.

  • Optional size?: undefined | number

    The ruler line width.

  • Optional type?: "solid" | "dashed"

    Line type.

ServerMessage

ServerMessage: Message & { data?: ServerMessageParameters; type: ServerMessageType }

Server transport message.

ShareDocumentParameters

ShareDocumentParameters: { accessMode: SharedAccessMode; documentId: string; modificationsState: ModificationsState; userName: string }

ClientMessageType.ShareDocument connection message arguments.

Type declaration

SharedDocumentInfo

SharedDocumentInfo: { accessMode: SharedAccessMode; documentId: string; fileName: string; ownerUserName: string; userName: string }

Information about shared document.

Type declaration

  • accessMode: SharedAccessMode
  • documentId: string
  • fileName: string
  • ownerUserName: string
  • userName: string

SignToolDialogModel

SignToolDialogModel: { autoResizeCanvas?: undefined | false | true; canvasSize?: undefined | { height: number; width: number }; convertToContent?: undefined | false | true; enabled: boolean; hideSaveSignature?: undefined | false | true; isChanged: boolean; location?: "Center" | "Top" | "Right" | "Bottom" | "Left" | "TopLeft" | "TopRight" | "BottomRight" | "BottomLeft" | { x: number; y: number }; pageIndex?: undefined | number; saveSignature?: undefined | false | true; selectedTab?: SignToolType; showModal: boolean; subject?: undefined | string; tabs?: undefined | "Type" | "Draw" | "Image"; title?: undefined | string }

Type declaration

  • Optional autoResizeCanvas?: undefined | false | true
  • Optional canvasSize?: undefined | { height: number; width: number }
  • Optional convertToContent?: undefined | false | true
  • enabled: boolean
  • Optional hideSaveSignature?: undefined | false | true
  • isChanged: boolean
  • Optional location?: "Center" | "Top" | "Right" | "Bottom" | "Left" | "TopLeft" | "TopRight" | "BottomRight" | "BottomLeft" | { x: number; y: number }
  • Optional pageIndex?: undefined | number
  • Optional saveSignature?: undefined | false | true
  • Optional selectedTab?: SignToolType
  • showModal: boolean
  • Optional subject?: undefined | string
  • Optional tabs?: undefined | "Type" | "Draw" | "Image"
  • Optional title?: undefined | string

SignToolModel

SignToolModel: { penColor?: undefined | string; penWidth?: undefined | number }

Sign tool component state model.

Type declaration

  • Optional penColor?: undefined | string
  • Optional penWidth?: undefined | number

SignToolSettings

SignToolSettings: { afterAdd?: undefined | ((result: { annotation: AnnotationBase; pageIndex: number }) => void); afterShow?: undefined | ((signatureDialog: any) => void); autoResizeCanvas?: undefined | false | true; beforeAdd?: undefined | ((activeTool: any, signatureDialog: any) => boolean); beforeHide?: undefined | ((signatureDialog: any) => boolean); beforeShow?: undefined | ((signatureDialog: any) => boolean); bold?: undefined | false | true; canvasSize?: undefined | { height: number; width: number }; convertToContent?: undefined | false | true; destinationScale?: undefined | number; dialogLocation?: "Center" | "Top" | "Right" | "Bottom" | "Left" | { x: number; y: number }; fontName?: undefined | string; fontNames?: string[]; fontSize?: undefined | number; hasImage?: undefined | false | true; hideDialogFooter?: undefined | false | true; hideDialogTitle?: undefined | false | true; hideSaveSignature?: undefined | false | true; hideTabs?: undefined | false | true; hideToolbar?: undefined | false | true; italic?: undefined | false | true; location?: "Center" | "Top" | "Right" | "Bottom" | "Left" | "TopLeft" | "TopRight" | "BottomRight" | "BottomLeft" | { x: number; y: number }; pageIndex?: undefined | number; penColor?: undefined | string; penWidth?: undefined | number; ruler?: { Draw: RulerLine[] | false; Image: RulerLine[] | false; Type: RulerLine[] | false } | false; saveSignature?: undefined | false | true; selectedTab?: "Type" | "Draw" | "Image"; subject?: undefined | string; tabs?: ("Type" | "Draw" | "Image")[]; text?: undefined | string; textColor?: undefined | string; title?: undefined | string }

Appearance settings for the Signature Tool dialog.

Type declaration

  • Optional afterAdd?: undefined | ((result: { annotation: AnnotationBase; pageIndex: number }) => void)

    The afterAdd event handler will be called when the result annotation is added and signature dialog is closed.

    example
    var viewer = new GcPdfViewer("#root");
    viewer.options.signTool = {
       afterAdd: function() {
           // Put your code here.
           return true;
       },
    };
    example
    // Update the title of the result annotation and convert the annotation to content:
    var viewer = new GcPdfViewer(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;
            }
        }
    });
  • Optional afterShow?: undefined | ((signatureDialog: any) => void)

    The afterShow event handler will be called after the dialog is shown.

    example
    var viewer = new GcPdfViewer("#root");
    viewer.options.signTool = {
       afterShow: function() {
           alert('The dialog is shown.');
       },
    };
  • Optional autoResizeCanvas?: undefined | false | true

    Automatically adjust the canvas size so that it shrinks to fit the window when the window size is small.

    default

    true;

  • Optional beforeAdd?: undefined | ((activeTool: any, signatureDialog: any) => boolean)

    The beforeAdd event handler will be called when the Add button is clicked. Return false if you want to cancel default add action.

    example
    var viewer = new GcPdfViewer("#root");
    viewer.options.signTool = {
       beforeAdd: function() {
           // Put your code here.
           return true;
       },
    };
  • Optional beforeHide?: undefined | ((signatureDialog: any) => boolean)

    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
    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
    var viewer = new GcPdfViewer("#root");
    viewer.options.signTool = {
       beforeHide: function() {
           // Return false to prevent the dialog from closing:
           return false;
       },
    };
  • Optional beforeShow?: undefined | ((signatureDialog: any) => boolean)

    The beforeShow event handler will be called before the dialog is shown. Return false if you want to prevent the dialog from showing.

    example
    var viewer = new GcPdfViewer("#root");
    viewer.options.signTool = {
       beforeShow: function() {
           // Return false to cancel showing the dialog:
           return false;
       },
    };
  • Optional bold?: undefined | false | true

    Bold text style for the "Type" tab.

    default

    false

  • Optional canvasSize?: undefined | { height: number; width: number }

    The size of the canvas in pixels.

    default

    {width: 500; height: 200}

  • Optional convertToContent?: undefined | false | true

    Convert the result stamp to content.

    default

    false

    example
    var viewer = new GcPdfViewer("#root", signTool: { convertToContent: true });
  • Optional destinationScale?: undefined | 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

  • Optional dialogLocation?: "Center" | "Top" | "Right" | "Bottom" | "Left" | { x: number; y: number }

    Dialog location within window rectangle. Origin is top/left.

    default

    'Center'

  • Optional fontName?: undefined | string

    The default font name that will be used for the "Type" tab.

    default

    'Brush Script MT'

  • Optional fontNames?: string[]

    Array of the available font names.

    default

    ['Arial', 'Verdana', 'Helvetica', 'Tahoma', 'Trebuchet MS', 'Times New Roman', 'Georgia', 'Garamond', 'Courier New', 'Brush Script MT']

  • Optional fontSize?: undefined | number

    The default font size that will be used for the "Type" tab.

    default

    48

  • Optional hasImage?: undefined | false | true

    If true, the signature tool will try to load an image from local storage for the Image tab.

    default

    false

    example
    // Create the viewer:
    var viewer = new GcPdfViewer({ 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'));
  • Optional hideDialogFooter?: undefined | false | true

    Specifies whether to hide dialog footer.

    default

    false

  • Optional hideDialogTitle?: undefined | false | true

    Specifies whether to hide dialog title.

    default

    false

  • Optional hideSaveSignature?: undefined | false | true

    Specifies whether to hide the "Save signature" button.

    default

    false

  • Optional hideTabs?: undefined | false | true

    Specifies whether to hide tab buttons.

    default

    false

  • Optional hideToolbar?: undefined | false | true

    Specifies whether to hide the toolbar which can be used to customize typing and drawing styles.

    default

    false

  • Optional italic?: undefined | false | true

    Italic text style for the "Type" tab.

    default

    true

  • Optional location?: "Center" | "Top" | "Right" | "Bottom" | "Left" | "TopLeft" | "TopRight" | "BottomRight" | "BottomLeft" | { x: number; y: number }

    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'

  • Optional pageIndex?: undefined | number

    Destination page index.

    default

    The default is the visible page index.

  • Optional penColor?: undefined | string

    Pen color.

    default

    #000000

    example
          options.signTool = {
                penColor: '#00ff00'
          };
  • Optional penWidth?: undefined | number

    Pen width.

    default

    2

  • Optional ruler?: { Draw: RulerLine[] | false; Image: RulerLine[] | false; Type: RulerLine[] | false } | false

    Canvas ruler lines customization.

    example
    // Hide all ruler lines:
    viewer.options.signTool = { ruler: false };
    example
    // Hide the ruler for the Draw tab:
    viewer.options.signTool = { ruler: { Draw: false } };
    example
    // 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 }]
      }
    };
  • Optional saveSignature?: undefined | false | true

    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

  • Optional selectedTab?: "Type" | "Draw" | "Image"

    Initially selected tab.

    default

    Default is 'Draw'

    example
    var viewer = new GcPdfViewer("#host", {
       signTool: { selectedTab: 'Type' }
    });
  • Optional subject?: undefined | string

    Result annotation subject.

    default

    empty string

  • Optional tabs?: ("Type" | "Draw" | "Image")[]

    Array of the available tabs. The order of the tabs is preserved. Possible values are: 'Type', 'Draw', 'Image'.

    default

    ['Type', 'Draw', 'Image']

  • Optional text?: undefined | string

    The default text that will be used for the "Type" tab.

  • Optional textColor?: undefined | string

    Text color.

    default

    #000000

    example
          options.signTool = {
                textColor: '#00ff00'
          };
  • Optional title?: undefined | string

    Dialog title.

    default

    'Add Signature'

    example
          options.signTool = {
                title: 'Signature'
          };

SignToolType

SignToolType: "Type" | "Draw" | "Image"

Signature tool type.

StampCategory

StampCategory: { dpi: number; id: string; isDynamic: boolean; name: string; stampImageUrls?: string[]; stampImages: string[] }

Image stamp category data model.

Type declaration

  • dpi: number

    Optional. Images resolution.

  • id: string

    Category identifier.

  • isDynamic: boolean

    Indicates whether the category contains dynamic stamps. Dynamic stamp images are updated for each new stamp instance.

  • name: string

    Category display name.

  • Optional stampImageUrls?: string[]

    Optional. Full URIs for image stamps. If specified, the stampImageUrls settings will be used instead of the stampImages array.

  • stampImages: string[]

    Stamp image names.

StartParameters

StartParameters: { clientId: string; userName: string }

ClientMessageType.Start connection message arguments.

Type declaration

  • clientId: string
  • userName: string

StopParameters

StopParameters: { clientId: string }

ClientMessageType.Stop connection message arguments.

Type declaration

  • clientId: string

TypeToolModel

TypeToolModel: { bold?: undefined | false | true; fontName?: undefined | string; fontSize?: undefined | number; italic?: undefined | false | true; text?: undefined | string; textColor?: undefined | string }

Type tool component state model.

Type declaration

  • Optional bold?: undefined | false | true
  • Optional fontName?: undefined | string
  • Optional fontSize?: undefined | number
  • Optional italic?: undefined | false | true
  • Optional text?: undefined | string
  • Optional textColor?: undefined | string

UnshareDocumentParameters

UnshareDocumentParameters: { documentId: string; userName: string }

ClientMessageType.UnshareDocument connection message arguments.

Type declaration

  • documentId: string
  • userName: string

UserAccess

UserAccess: { accessMode: SharedAccessMode; userName: string }

User access mode.

Type declaration

ValidationCallerType

ValidationCallerType: "form-filler" | "annotation-layer" | "user-code"

Validation caller name.

ViewerFeatureName

ViewerFeatureName: "JavaScript" | "AllAttachments" | "FileAttachments" | "SoundAttachments" | "DragAndDrop" | "SubmitForm" | "Print"

The name of the GcPdfViewer's feature. Used by the disableFeatures option.

WidgetFieldTypeName

WidgetFieldTypeName: "Tx" | "Btn" | "Ch"

Field widget type. Tx - text field Btn - button field Ch - choice widget field

Variables

Const SELECTED_RESULT_CLASS

SELECTED_RESULT_CLASS: string = "search-result__selected"

Const _maxSearchResultsCount

_maxSearchResultsCount: 25 = 25

_searchPanel

_searchPanel: SearchPanel | null

searchResultId

searchResultId: number = 0

Functions

applyInverseTransform

  • applyInverseTransform(p: number[], m: number[]): number[]
  • Apply inverse matrix transformation.

    Parameters

    • p: number[]

      x, y point

    • m: number[]

      transform matrix

    Returns number[]

applyTransform

  • applyTransform(p: number[], m: number[]): number[]
  • Apply matrix transform.

    Parameters

    • p: number[]

      x, y point

    • m: number[]

      transform matrix

    Returns number[]

arrayFrom

  • arrayFrom(arr: any, callbackFn: any, thisArg: any): any[]
  • Parameters

    • arr: any
    • callbackFn: any
    • thisArg: any

    Returns any[]

buildAudioFile

  • buildAudioFile(audioData: Uint8Array, audioOptions: { bytesPerSample: number; numChannels: number; sampleRate: number; subchunk2Size: number }): Uint8Array
  • Build sound file using audio data provided by parameter audioData and audioOptions used to generate RIFF header.

    Parameters

    • audioData: Uint8Array
    • audioOptions: { bytesPerSample: number; numChannels: number; sampleRate: number; subchunk2Size: number }
      • bytesPerSample: number
      • numChannels: number
      • sampleRate: number
      • subchunk2Size: number

    Returns Uint8Array

buildWaveHeader

  • buildWaveHeader(opts: { bytesPerSample: number; numChannels: number; sampleRate: number; subchunk2Size: number }): ArrayBuffer
  • Build a header for the WAVE audio format.

    Parameters

    • opts: { bytesPerSample: number; numChannels: number; sampleRate: number; subchunk2Size: number }
      • bytesPerSample: number
      • numChannels: number
      • sampleRate: number
      • subchunk2Size: number

    Returns ArrayBuffer

changeRectangleOrigin

  • changeRectangleOrigin(bounds: number[], viewBox: number[], destOrigin?: "TopLeft" | "BottomLeft"): number[]
  • Change bounds origin.

    Parameters

    • bounds: number[]
    • viewBox: number[]
    • Default value destOrigin: "TopLeft" | "BottomLeft" = "BottomLeft"

    Returns number[]

classListContains

  • classListContains(element: HTMLElement, className: string): boolean
  • Cross-browser element.classList.contains

    Parameters

    • element: HTMLElement

      HTML DOM element

    • className: string

      Class name without dot.

    Returns boolean

convertToPdfPoint

  • convertToPdfPoint(x: number, y: number, transform: number[]): number[]
  • Converts viewport coordinates to the PDF location. For examples, useful for converting canvas pixel location into PDF one.

    see

    convertToViewportPoint

    Parameters

    • x: number

      The x-coordinate.

    • y: number

      The y-coordinate.

    • transform: number[]

    Returns number[]

    Array containing x and y properties of the point in the PDF coordinate space.

convertToViewportPoint

  • convertToViewportPoint(x: number, y: number, transform: number[]): number[]
  • Converts PDF point to the viewport coordinates. For examples, useful for converting PDF location into canvas pixel coordinates.

    see

    convertToPdfPoint

    see

    {@link convertToViewportRectangle}

    Parameters

    • x: number

      The x-coordinate.

    • y: number

      The y-coordinate.

    • transform: number[]

    Returns number[]

    Array containing x and y properties of the point in the viewport coordinate space.

createBlob

  • createBlob(data: any, contentType?: string): Blob
  • Creates a Blob object which represents a file-like object of immutable, raw data.

    Parameters

    • data: any

      ArrayBuffer, ArrayBufferView, Blob or DOMString object

    • Default value contentType: string = ""

      The content type to assign to the new Blob; this will be the value of its type property. The default value is an empty string.

    Returns Blob

createObjectURLClosure

  • createObjectURLClosure(): createObjectURL
  • Creates ObjectURL closure. Used when Blob/createObjectURL is not available, falling back to data schema.

    Returns createObjectURL

downloadData

  • downloadData(data: Blob | BlobPart | Uint8Array | ArrayBuffer | ArrayBufferView | string, filename?: undefined | string, contentType?: string): boolean
  • Download binary data.

    Parameters

    • data: Blob | BlobPart | Uint8Array | ArrayBuffer | ArrayBufferView | string
    • Optional filename: undefined | string
    • Default value contentType: string = "application/octet-stream"

    Returns boolean

downloadUrl

  • downloadUrl(fileUrl: string, filename?: undefined | string): boolean
  • Download file using specified URL.

    Parameters

    • fileUrl: string
    • Optional filename: undefined | string

    Returns boolean

ensureResizableDialogBehavior

  • ensureResizableDialogBehavior(dialog: HTMLElement, dragHandleClass?: string, allowResize?: boolean, minHeight?: number, minWidth?: number): void
  • Ensure ResizableDialogBehavior is attached.

    Parameters

    • dialog: HTMLElement

      dialog element to be dragged and resized.

    • Default value dragHandleClass: string = "draghandle"

      class name for drag handle(s)

    • Default value allowResize: boolean = true

      allow resize dialog

    • Default value minHeight: number = 200

      minimum dialog height

    • Default value minWidth: number = 300

      minimum dialog width

    Returns void

findElementIndex

  • findElementIndex(el: Element): number
  • Get element's numerical index in its parent element.

    Parameters

    • el: Element

      HTML DOM element

    Returns number

findSelfOrAncestor

  • findSelfOrAncestor(el: HTMLElement | null, className: string): HTMLElement | null
  • Search parent element by class name.

    Parameters

    • el: HTMLElement | null

      HTML DOM element

    • className: string

      Class name without dot.

    Returns HTMLElement | null

findSelfOrAncestorAttr

  • findSelfOrAncestorAttr(el: HTMLElement | null, attrName: string): HTMLElement | null
  • Search parent element by attribute name.

    Parameters

    • el: HTMLElement | null

      HTML DOM element

    • attrName: string

    Returns HTMLElement | null

getAxialAlignedBoundingBox

  • getAxialAlignedBoundingBox(r: any, m: any): number[]
  • Applies the transform to the rectangle and finds the minimum axially aligned bounding box.

    Parameters

    • r: any
    • m: any

    Returns number[]

getCharacterType

  • getCharacterType(charCode: any): number

getDisplayPixelRatio

  • getDisplayPixelRatio(ctx?: any): DeviceOutputScale
  • Get display device pixel ratio.

    Parameters

    • Optional ctx: any

      Optional. canvas context

    Returns DeviceOutputScale

getEventTarget

  • getEventTarget(e: any): any
  • Find correct event target.

    Parameters

    • e: any

    Returns any

isDescendant

  • isDescendant(child: Element, parent: Element): boolean
  • Checks if element is nested within parent element on any level.

    Parameters

    • child: Element
    • parent: Element

    Returns boolean

makeAbsoluteUrl

  • makeAbsoluteUrl(relativeUrl: string, baseUrl?: undefined | string): string
  • Make absolute url from relative one.

    Parameters

    • relativeUrl: string

      Relative url.

    • Optional baseUrl: undefined | string

      Optional, base url for result url concatenation

    Returns string

mergeObject

  • mergeObject(destinationObj: any, sourceVal: any, preserveNonEmpty?: boolean): any
  • Merge everything from sourceObj to destinationObj, returns destinationObj. Note, by default, non-empty primitive values are NOT preserved in the destination object.

    Parameters

    • destinationObj: any

      Destination object

    • sourceVal: any

      Source object

    • Default value preserveNonEmpty: boolean = false

      Set to true if you don't want to replace non-empty primitive values.

    Returns any

pdfDateStringToDate

  • pdfDateStringToDate(input?: string | Date): Date | null
  • Convert a PDF date string to a JavaScript Date object.

    The PDF date string format is described in section 7.9.4 of the official PDF 32000-1:2008 specification. However, in the PDF 1.7 reference (sixth edition) Adobe describes the same format including a trailing apostrophe. This syntax in incorrect, but Adobe Acrobat creates PDF files that contain them. We ignore all apostrophes as they are not necessary for date parsing.

    Moreover, Adobe Acrobat doesn't handle changing the date to universal time and doesn't use the user's time zone (effectively ignoring the HH' and mm' parts of the date string).

    Parameters

    • Optional input: string | Date

    Returns Date | null

releaseImageResources

  • releaseImageResources(img: HTMLImageElement): void
  • Releases image resources.

    Parameters

    • img: HTMLImageElement

    Returns void

scrollIntoView

  • scrollIntoView(element: HTMLElement, spot: { left?: undefined | number; top?: undefined | number }, skipOverflowHiddenElements?: boolean, parent?: any | null): void
  • Scrolls specified element into view of its parent. Note, by default scrolling is done according offsetParent, so, check parent position style if needed.

    Parameters

    • element: HTMLElement

      The element to be visible.

    • spot: { left?: undefined | number; top?: undefined | number }

      An object with optional top and left properties, specifying the offset from the top left edge.

      • Optional left?: undefined | number
      • Optional top?: undefined | number
    • Default value skipOverflowHiddenElements: boolean = false

      Ignore elements that have the CSS rule overflow: hidden; set. The default is false.

    • Default value parent: any | null = null

    Returns void

setInputCheckedState

  • setInputCheckedState(element: HTMLInputElement, isChecked: boolean, linkService: any): void
  • Set the checked state of an input element, toggles the visibility of the canvas's appearance if needed.

    Parameters

    • element: HTMLInputElement
    • isChecked: boolean
    • linkService: any

    Returns void

updateAnnotationContentPosition

  • updateAnnotationContentPosition(node: AnnotationBase, diffx?: undefined | number, diffy?: undefined | number): void
  • Method is called when the annotation bounds position is changed.

    Parameters

    • node: AnnotationBase
    • Optional diffx: undefined | number

      moved distance for x axis

    • Optional diffy: undefined | number

      moved distance for y axis

    Returns void

Legend

  • Constructor
  • Property
  • Method
  • Accessor
  • Inherited constructor
  • Inherited property
  • Inherited method
  • Static property
  • Static method