{WebTwainObject}.Viewer

/**
 * Create a Dynamsoft Viewer instance and bind it to the WebTwain instance.
 * @param element Specify an HTML element to create the viewer.
 */
bind(element: HTMLDivElement): boolean;

/**
 * Clear the selected area(s) on the current page.
 */
clearSelectedAreas(): void;

/**
 * Add a custom page DIV element and specify its position and display order.
 * Generate an independent CustomElement object. 
 * @param element Specify the HTMLDivElement.
 * @param location Define where to place the custom element. The allowed values are "left" and "right", and the default value is "right".
 * @param bCover The default value is `false`, that is, the created CustomElement is displayed according to the set area. If set to true, the main viewer will be covered by the CustomElement.
 */
createCustomElement(
    element: HTMLDivElement, 
    location?: string, 
    bCover?: boolean
): CustomElement;

interface CustomElement {
    /**
     * Show the custome element.
     */
    show(): boolean;
    /**
     * Hide the custome element.
     */
    hide(): boolean;
    /**
     * Remove the custome element.
     */
    dispose(): boolean;
};

/** 
 * Generate an independent ImageEditor object.
 * @param editorSettings Configure the object.
 */
createImageEditor(
    editorSettings?: EditorSettings
): ImageEditor;

interface ImageEditor {
    /**
     * Show the ImageEditor object.
     */
    show(): boolean;
    /**
     * Hide the ImageEditor object.
     */
    hide(): boolean;
    /**
     * Remove the ImageEditor object.
     */
    dispose(): boolean;
};

/**
 * Generate a independent ThumbnailViewer object.
 * @param thumbnailViewerSettings Configure the ThumbnailViewer object
 */
createThumbnailViewer(
    thumbnailViewerSettings?: thumbnailViewerSettings
): ThumbnailViewer;

interface ThumbnailViewer {
    /**
     * Show the ThumbnailViewer object.
     */
    show(): boolean;
    /**
     * Hide the ThumbnailViewer object.
     */
    hide(): boolean;
    /**
     * Remove the ThumbnailViewer object.
     */
    dispose(): boolean;
    /**
     * Change the view mode of the thumbnail viewer.
     * @param viewMode Specify the new mode.
     */
    updateViewMode(viewMode: ViewMode): void;
    /**
     * Bind a listner to the specified event. You can bind one or multiple listeners to the same event.
     * @param eventName Specify the event name.
     * @param callback Specify the listner.
     */
    on(eventName: string, callback: (event: ThumbnailViewerEvent | KeyboardEvent, domEvent?: MouseEvent) => void): void; 
    /**
     * Unbind event listener(s) from the specified viewer event.
     * @param eventName Specify the event.
     * @param callback Specify the listener to remove
     */
    off(eventName: string, callback?: () => void): void; 
    /**
     * Whether to allow keyboard control. Default: true.
     */
    allowKeyboardControl: boolean;
    /**
     * Whether to allow page dragging to reorder the pages.
     * Default: true.
     */
    allowPageDragging: boolean;
    /**
     * Whether to allow resizing of the thumbnail viewer. 
     * Default: false.
     */
    allowResizing: boolean;
    /**
     * Set or return the CSS rule for the background of the thumbnail viewer.
     * Default: "rgb(255, 255, 255)".
     */
    background: string;
    /**
     * Set or return the CSS rule for the border of the thumbnail viewer.
     * Default: "".
     */
    border: string;
    /**
     * Set or return the CSS rule for the background of the page the mouse hovers over in the thumbnail viewer.
     * Default: "rgb(239, 246, 253)".
     */
    hoverPageBackground: string;
    /**
     * Set or return the CSS rule for the border of the page the mouse hovers over in the thumbnail viewer.
     * Default: "1px solid rgb(238, 238, 238)".
     */
    hoverPageBorder: string;
    /**
     * Set or return the location of the thumbnail viewer. Allowed values are "left", "right", "top", "bottom".
     * Default: "left".
     */
    location: string;
    /**
     * Set or return the CSS rule for the background of a normal page in the thumbnail viewer.
     * Default: "transparent".
     */
    pageBackground: string;
    /**
     * Set or return the CSS rule for the border of a normal page in the thumbnail viewer.
     * Default: "1px solid rgb(238, 238, 238)".
     */
    pageBorder: string;
    /**
     * Set or return the margin between two adjacent images and the margin between an image and the border of the thumbnail viewer. The value can either be in pixels or percentage.
     * Default: 10.
     */
    pageMargin: number | string;
    /**
     * Set or return the CSS rule for the background of the placeholder which appears when you drag page(s) to reorder them in the thumbnail viewer.
     * Default: "rgb(251, 236, 136)".
     */
    placeholderBackground: string;
    /**
     * Set or return whether the pages are arranged vertically or horizontally.
     * Default: "vertical". Allowed values are "vertical" and "horizontal".
     */
    scrollDirection: string;
    /**
     * Set or return the CSS rule for the background of the selected page(s) in the thumbnail viewer.
     * Default: "rgb(199, 222, 252)".
     */
    selectedPageBackground: string;
    /**
     * Set or return the CSS rule for the border of the selected page(s) in the thumbnail viewer.
     * Default: "1px solid rgb(125,162,206)".
     */
    selectedPageBorder: string;
    /**
     * Set or return whether page numbers are shown.
     * Default: false.
     */
    showPageNumber: boolean;
    /**
     * Set or return the size of the thumbnail viewer. The value can either be in pixels or percentage (based on the width or height of the entire viewer).
     * Default: "30%".
     */
    size: number | string;
};
interface ThumbnailViewerEvent {
    // The index of the current page.
    index: number;
    // The x-coordinate of the browser page.
    pageX: number; 
    // The y-coordinate of the browser page.
    pageY: number; 
};
interface ViewMode {
    /**
     * Specify the number of images per row.
     */
    columns: number;
    /**
     * Specify the number of images per column.
     */
    rows: number;    
    /**
     * Set or return whether the pages are arranged vertically or horizontally.
     * Default: "vertical". Allowed values are "vertical" and "horizontal".
     */
    scrollDirection: string;
}

/** 
 * Show the first page and return the index which should be 0. If there is no page in the viewer, -1 is returned.
 */
first():number; 

/**
 * Set how the page is fit in the viewer.
 * @param type Specify how to fit. Allowed values are "width" and "height"
 */
fitWindow(
    type?: string
): void

/**
 * Show the specified page and return its index.
 * @param index Specify the page.
 */
gotoPage(
    index: number
): number;

/**
 * Hide the viewer.
 */
hide(): boolean;

/** 
 * Show the last page and return its index. If there is no page in the viewer, -1 is returned.
 */
last():number; 

/**
 * Show the next page and return its index. If there is no page in the viewer, -1 is returned.
 */
next(): number; 

/**
 * Unbind event listener(s) from the specified viewer event.
 * @param eventName Specify the event.
 * @param callback Specify the listener to remove
 */
Viewer.off(
    eventName: string, 
    callback?: () => void
): void; 

/**
 * Bind a listner to the specified event. You can bind one or multiple listeners to the same event.
 * @param eventName Specify the event name.
 * @param callback Specify the listner.
 */
Viewer.on(
    eventName: string, 
    callback: (event: ViewerEvent) => void
): void; 

/**
 * Show the previous page and return its index. If there is no page in the viewer, -1 is returned.
 */
previous(): number; 

/**
 * Refresh the viewer.
 */
render(): boolean; 

/**
 * Set one or more rectangular area(s) on the current page.
 * @param areas Specify the rectangular area(s).
 */
setSelectedAreas(
    areas: Area[]
): void;

interface Area {
    left: number,
    top: number,
    right: number,
    bottom: number,
};

/**
 * Set the view mode of the viewer.
 * @param columns Specify the number of images per column.
 * @param rows Specify the number of images per row.
 */
setViewMode(
    columns: number,
    rows: number
): boolean;

/**
 * Show the viewer.
 */
show(): boolean; 

/**
 * Unbind and destroy the viewer.
 */
unbind(): boolean; 

/**
 * Set whether to load files dropped over the viewer area.
 * The default value is true.
 */
acceptDrop: boolean; 

/**
 * Return or set the background of the viewer. 
 */
background: string;

/**
 * Return or set the border of the viewer.
 */
border: string; 

/**
 * Return or set the shape of the cursor.
 */
cursor: string; 

/**
 * Return or set the height of the viewer.
 */ 
height: number | string;

/**
 * Return the postfix of the Ids of the elements in the viewer.
 */ 
readonly idPostfix: string;

/**
 * Return or set whether to scroll the viewer automatically when new pages are imported.
 * Default: true;
 */
ifAutoScroll: string; 

/**
 * Return or set the inner border of the viewer.
 */
innerBorder: string; 

/**
 * Return or set the margin between images.
 */
pageMargin: number | string; 

/**
 * Set the border color of the selected area 
 */
selectedAreaBorderColor: string; 

/**
 * Set the selected page background color of the Thumbnail viewer.
 */
selectedPageBackground: string; 

/**
 * Return or set the border style for selected page(s).
 */
selectedPageBorder: string; 

/**
 * Specify an aspect ratio to be used when selecting an rectangular area on a page.
 */
selectionRectAspectRatio: number | string; 

/**
 * Return or set whether to show the page numbers.
 */

/**
 * Set whether to use single page mode. 
 */
singlePageMode: boolean; 

/**
 * Return or set the width of the viewer.
 */ 
width: number | string;

/**
 * Return or set the zoom factor, and then the current page will be enlarged or reduced.
 */
zoom: number;

/** 
 * Built-in callbacks that are triggered for a certain mouse event or keyboard event on a page.
 * @param eventName Specify the event.
 * @param callback Specify the callback.
 * @argument dwtEvent The viewer-specific event object.
 * @argument domEvent The original mouse event object.
 */
on(
    eventName: string, 
    callback: (event: ViewerEvent | KeyboardEvent, domEvent: MouseEvent) => void
): void;

interface ViewerEvent{ 
    // The index of the current page.
    index: number; 
    //The x-coordinate of the upper-left corner of the page. 
    imageX: number; 
    //The y-coordinate of the upper-left corner of the page.
    imageY: number; 
    // The x-coordinate of the browser page.
    pageX: number; 
    // The y-coordinate of the browser page.
    pageY: number; 
};

/**
 * This event is triggered when user selects an area (draws a rectangle) or move a selected area on the current page.
 * @argument index The index of the current page.
 * @argument rect Some attribute values of the selected area.
 */
on('pageAreaSelected', 
    (index: number, rect: rect)=> void
): void; 

interface rect{ 
    // The index of the selected area. The index is 0-based. This is useful when you have multiple selected areas on one page.
    areaIndex: number;
    // The x-coordinate of the upper-left corner of the area.
    x: number;
    // The y-coordinate of the upper-left corner of the area.
    y: number;
    // The width of the selected area.
    width: number;
    // The height of the selected area.
    height: number;
};

/**
 * This event is triggered when selected area(s) get cleared (when the user clicks outside of the drawn rectangle).
 * @argument index The index of the current page.
 */
on('pageAreaUnselected', 
    (index: number) => void
): void; 

/**
 * This event is triggered when a page is rendered.
 * @argument index The index of the current page.
 */
on('pageRendered', 
    (index: number) => void
): void; 

/**
 * This event is triggered when width & height of the viewer has been changed.
 * @argument width The new width of the viewer.
 * @argument height The new height of the viewer.
 */
on('resize', 
    (width：number, height：number) => void
): void; 

/**
 * This event is triggered when the top page currently displayed in the viewer changes.
 * @argument index The index of the current page.
 */
on('topPageChanged', 
     (index: number) => void
): void;