# Type alias SignToolSettings

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

Appearance settings for the Signature Tool dialog.

#### Type declaration

- ##### `Optional` afterAdd?: ((result: { annotation: AnnotationBase; pageIndex: number }) => void)

  - - (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 DsPdfViewer("#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 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;
                  }
              }
          });

      #### Parameters

      - ##### result: { annotation: AnnotationBase; pageIndex: number }

        - ##### annotation: AnnotationBase

        - ##### pageIndex: number

      #### Returns void

- ##### `Optional` afterShow?: ((signatureDialog: any) => void)

  - - (signatureDialog: any): void

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

      ### Example

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

      #### Parameters

      - ##### signatureDialog: any

      #### Returns void

- ##### `Optional` autoResizeCanvas?: boolean

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

  ### Default

  true;

- ##### `Optional` beforeAdd?: ((activeTool: any, signatureDialog: any) => boolean)

  - - (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 DsPdfViewer("#root");
          viewer.options.signTool = {
             beforeAdd: function() {
                 // Put your code here.
                 return true;
             },
          };

      #### Parameters

      - ##### activeTool: any

      - ##### signatureDialog: any

      #### Returns boolean

- ##### `Optional` beforeHide?: ((signatureDialog: any) => boolean)

  - - (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 DsPdfViewer("#root");
          viewer.options.signTool = {
             beforeHide: function() {
                 // Return false to prevent the dialog from closing:
                 return false;
             },
          };

      #### Parameters

      - ##### signatureDialog: any

      #### Returns boolean

- ##### `Optional` beforeShow?: ((signatureDialog: any) => boolean)

  - - (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 DsPdfViewer("#root");
          viewer.options.signTool = {
             beforeShow: function() {
                 // Return false to cancel showing the dialog:
                 return false;
             },
          };

      #### Parameters

      - ##### signatureDialog: any

      #### Returns boolean

- ##### `Optional` bold?: boolean

  Bold text style for the "Type" tab.

  ### Default

  false

- ##### `Optional` canvasSize?: { height: number; width: number }

  The size of the canvas in pixels.

  ### Default

  - ##### height: number

  - ##### width: number

- ##### `Optional` convertToContent?: boolean

  Convert the result stamp to content.

  ### Default

  false

  ### Example

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

- ##### `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

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

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

  ### Default

  'Center'

- ##### `Optional` fontName?: 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?: number

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

  ### Default

  48

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

- ##### `Optional` hideDialogFooter?: boolean

  Specifies whether to hide dialog footer.

  ### Default

  false

- ##### `Optional` hideDialogTitle?: boolean

  Specifies whether to hide dialog title.

  ### Default

  false

- ##### `Optional` hideSaveSignature?: boolean

  Specifies whether to hide the "Save signature" button.

  ### Default

  false

- ##### `Optional` hideTabs?: boolean

  Specifies whether to hide tab buttons.

  ### Default

  false

- ##### `Optional` hideToolbar?: boolean

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

  ### Default

  false

- ##### `Optional` italic?: boolean

  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?: number

  Destination page index.

  ### Default

  The default is the visible page index.

- ##### `Optional` penColor?: string

  Pen color.

  ### Default

  #000000

  ### Example

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

- ##### `Optional` penWidth?: 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?: 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

- ##### `Optional` selectedTab?: "Type" | "Draw" | "Image"

  Initially selected tab.

  ### Default

  Default is 'Draw'

  ### Example

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

- ##### `Optional` subject?: 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?: string

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

- ##### `Optional` textColor?: string

  Text color.

  ### Default

  #000000

  ### Example

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

- ##### `Optional` title?: string

  Dialog title.

  ### Default

  'Add Signature'

  ### Example

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