Type Alias: SignToolSettings

SignToolSettings: object

Appearance settings for the Signature Tool dialog.

Type declaration

afterAdd()?

optional afterAdd: (result) => void

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

Parameters

result

annotation

AnnotationBase

pageIndex

number

Returns

void

Examples

var viewer = new DsPdfViewer("#root");
viewer.options.signTool = {
   afterAdd: function() {
       // Put your code here.
       return true;
   },
};

// 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;
		}
	}
});

afterShow()?

optional afterShow: (signatureDialog) => void

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

Parameters

signatureDialog

any

Returns

void

Example

var viewer = new DsPdfViewer("#root");
viewer.options.signTool = {
   afterShow: function() {
       alert('The dialog is shown.');
   },
};

autoResizeCanvas?

optional autoResizeCanvas: boolean

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

Default

true;

beforeAdd()?

optional beforeAdd: (activeTool, signatureDialog) => boolean

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

Parameters

activeTool

any

signatureDialog

any

Returns

boolean

Example

var viewer = new DsPdfViewer("#root");
viewer.options.signTool = {
   beforeAdd: function() {
       // Put your code here.
       return true;
   },
};

beforeHide()?

optional beforeHide: (signatureDialog) => 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.

Parameters

signatureDialog

any

Returns

boolean

Examples

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);
  }
};

var viewer = new DsPdfViewer("#root");
viewer.options.signTool = {
   beforeHide: function() {
       // Return false to prevent the dialog from closing:
       return false;
   },
};

beforeShow()?

optional beforeShow: (signatureDialog) => boolean

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

Parameters

signatureDialog

any

Returns

boolean

Example

var viewer = new DsPdfViewer("#root");
viewer.options.signTool = {
   beforeShow: function() {
       // Return false to cancel showing the dialog:
       return false;
   },
};

bold?

optional bold: boolean

Bold text style for the "Type" tab.

Default

false

canvasSize?

optional canvasSize: object

The size of the canvas in pixels.

Default

{width: 500; height: 200}

canvasSize.height

height: number

canvasSize.width

width: number

convertToContent?

optional convertToContent: boolean

Convert the result stamp to content.

Default

false

Example

var viewer = new DsPdfViewer("#root", signTool: { convertToContent: true });

destinationScale?

optional destinationScale: 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

dialogLocation?

optional dialogLocation: "Center" | "Top" | "Right" | "Bottom" | "Left" | { x: number; y: number; }

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

Default

'Center'

fontName?

optional fontName: string

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

Default

'Brush Script MT'

fontNames?

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']

fontSize?

optional fontSize: number

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

Default

48

hasImage?

optional hasImage: boolean

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 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'));

hideDialogFooter?

optional hideDialogFooter: boolean

Specifies whether to hide dialog footer.

Default

false

hideDialogTitle?

optional hideDialogTitle: boolean

Specifies whether to hide dialog title.

Default

false

hideSaveSignature?

optional hideSaveSignature: boolean

Specifies whether to hide the "Save signature" button.

Default

false

hideTabs?

optional hideTabs: boolean

Specifies whether to hide tab buttons.

Default

false

hideToolbar?

optional hideToolbar: boolean

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

Default

false

italic?

optional italic: boolean

Italic text style for the "Type" tab.

Default

true

location?

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'

pageIndex?

optional pageIndex: number

Destination page index.

Default

The default is the visible page index.

penColor?

optional penColor: string

Pen color.

Default

#000000

Example

      options.signTool = {
            penColor: '#00ff00'
      };

penWidth?

optional penWidth: number

Pen width.

Default

2

ruler?

optional ruler: { Draw: RulerLine[] | false; Image: RulerLine[] | false; Type: RulerLine[] | false; } | false

Canvas ruler lines customization.

Type declaration

{ Draw: RulerLine[] | false; Image: RulerLine[] | false; Type: RulerLine[] | false; }

false

Examples

// Hide all ruler lines:
viewer.options.signTool = { ruler: false };

// Hide the ruler for the Draw tab:
viewer.options.signTool = { ruler: { Draw: false } };

// 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 }]
  }
};

saveSignature?

optional saveSignature: 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

selectedTab?

optional selectedTab: "Type" | "Draw" | "Image"

Initially selected tab.

Default

Default is 'Draw'

Example

var viewer = new DsPdfViewer("#host", {
   signTool: { selectedTab: 'Type' }
});

subject?

optional subject: string

Result annotation subject.

Default

empty string

tabs?

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']

text?

optional text: string

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

textColor?

optional textColor: string

Text color.

Default

#000000

Example

      options.signTool = {
            textColor: '#00ff00'
      };

title?

optional title: string

Dialog title.

Default

'Add Signature'

Example

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