Viewer API

const viewer = webViewer.viewer;

toggleDialog(config: { dialogType: DialogType; visibility?: boolean }): Promise<undefined>;

webViewer.viewer.toggleDialog({dialogType: webViewer.refs.dialog.type.PRINT, visibility:true});

getScale(): Promise<{ scale: number }>;

async function getScale() {
    return webViewer.viewer.getScale();
}

function success(result) {
    console.log(`Scale is: ${result.scale}`);
}

function failure(error) {
    console.error(`Error: ${error}`);
}

getScale().then(success, failure);

setScale(config: { scale: number }): Promise<undefined>;

webViewer.viewer.setScale({scale:140});

zoomIn(config?: { increment: number }): Promise<undefined>;

webViewer.viewer.zoomIn({increment:10});

zoomOut(config?: { decrement: number }): Promise<undefined>;

webViewer.viewer.zoomOut({decrement:10});

getCurrentPageIndex(): Promise<{ currentPageIndex: number }>;

async function getPageIndex() {
    return webViewer.viewer.getCurrentPageIndex();
}

function success(result) {
    console.log(`Page index is: ${result.currentPageIndex}`);
}

function failure(error) {
    console.error(`Error: ${error}`);
}

getPageIndex().then(success, failure);

getRotation(): Promise<{ degree: 0 | 90 | 180 | 270 }>;

async function getRotation() {
    return webViewer.viewer.getRotation();
}

function success(result) {
    console.log(`Rotation is: ${result.degree}`);
}

function failure(error) {
    console.error(`Error: ${error}`);
}

getRotation().then(success, failure);

setRotation(config: { degree: 0 | 90 | 180 | 270 | 360 }): Promise<undefined>;

webViewer.viewer.setRotation({ degree: webViewer.refs.degree.DEG_90 });

rotateClockwise(): Promise<undefined>;

webViewer.viewer.rotateClockwise();

rotateCounterClockwise(): Promise<undefined>;

webViewer.viewer.rotateCounterClockwise();

setViewMode(config: { viewMode: ViewMode }): Promise<undefined>;

webViewer.viewer.setViewMode({viewMode:webViewer.refs.viewMode.DOUBLE});

fitTo(config: { to: FitMode }): Promise<undefined>;

webViewer.viewer.fitTo({to:webViewer.refs.fit.to.WIDTH});

scrollTo(config: { type: ScrollType; value: number }): Promise<undefined>;
scrollTo(config: { type: 'PAGE'; value: number; centerPoint?: { x: number; y: number } }): Promise<undefined>;
scrollTo(config: { type: 'ANNOTATION'; value: number; select?: boolean }): Promise<undefined>;
scrollTo(config: { type: 'ANNOTATION'; name: string; pageIndex: number; select?: boolean }): Promise<undefined>;

// scroll to page 4 of the document
webViewer.viewer.scrollTo({type:webViewer.refs.scroll.type.PAGE, value:3});

scrollToNextPage(): Promise<undefined>;

webViewer.viewer.scrollToNextPage();

scrollToPreviousPage(): Promise<undefined>;

webViewer.viewer.scrollToPreviousPage();

selectAnnotationTool(config: AnnotationTool | AnnotationStampTool): Promise<undefined>;

webViewer.viewer.selectAnnotationTool({tool:webViewer.refs.annotation.tool.HIGHLIGHT});

toggleAnnotationTool(config: AnnotationTool | AnnotationStampTool): Promise<undefined>;

webViewer.viewer.toggleAnnotationTool({tool:webViewer.refs.annotation.tool.HIGHLIGHT});

openSideView(config: { type: Panel }): Promise<undefined>;

webViewer.viewer.openSideView({type:webViewer.refs.panel.open.BOOKMARK})

closeSideView(config: { type: PanelSide }): Promise<undefined>;

webViewer.viewer.closeSideView({type: webViewer.refs.panel.close.RIGHT});

togglePanel(config: { type: Panel }): Promise<undefined>;

webViewer.viewer.togglePanel({type:webViewer.refs.panel.open.BOOKMARK});

highlight(config: { rects: HighlightRect[] }): Promise<HighlightedRect[]>;
highlight(config: { keywords: HighlightKeyword[] }): Promise<HighlightedRect[]>;

webViewer.viewer.highlight({rects:[{color:"#ff00ff", pageIndex:0, rect:{left:0,right:100,top:0, bottom:100}}]});

unhighlight(config: { rects: HighlightedRect[] }): Promise<undefined>;
unhighlight(config: { mode: 'all' }): Promise<undefined>;

webViewer.viewer.unhighlight({rects:[{id:12}, {id:43}]});

webViewer.viewer.unhighlight({mode:"all"}); // removes all highlights

searchText(config: {
  keyword: string;
  caseSensitive?: boolean;
  useRegex?: boolean;
  emitEvent?: boolean;
}): Promise<undefined>;

webViewer.viewer.searchText({keyword:"hello", caseSensitive:false})

setViewVisibility(config: { view: HidableView; visibility: boolean }): Promise<undefined>;

addButton(config: {
  buttons: {
    position: 'TOOLBAR.LEFT_SECTION.FIRST' | 'TOOLBAR.LEFT_SECTION.LAST' | 'TOOLBAR.RIGHT_SECTION.FIRST' | 'TOOLBAR.RIGHT_SECTION.LAST';
    icon: IconName;
    label: string;
    onclick: Function;
    title?: string;
  }[];
}): Promise<undefined>;

openContextMenu(): Promise<undefined>;

addContextMenu(config: {
  menus: {
    type: 'MENU';
    position: 'FIRST' | 'LAST';
    icon?: string;
    label?: string;
    onclick?: Function;
  }[];
}): Promise<undefined>;

defineDocumentPanel(config: {
  items: {
    label: string;
    onclick: Function;
    icon?: string;
  }[];
}): Promise<undefined>;

defineTextSelectionMenu(config: {
  menus: {
    label: string;
    onclick: Function;
    icon?: IconName;
  };
}): Promise<undefined>;

defineAnnotSelectMenu(config: {
  html: string;
  style?: string;
  script?: string;
  tool?: AnnotType;
}): Promise<undefined>;

defineRightClickAction(config: { onclick: Function }): Promise<undefined>;

setBackgroundColor(config: { color: string }): Promise<undefined>;

webViewer.viewer.setBackgroundColor({color: "#222222"});

setPageBorderColor(config: { color: string }): Promise<undefined>;

viewer.setPageBorderColor({color: "#ff0000"});

setColor(config: { mainColor: string; subColor: string }): Promise<undefined>;

webViewer.viewer.setColor({mainColor: "#00ff00", subColor: "#0000ff"});

setTheme(config: { type: Theme }): Promise<undefined>;

webViewer.viewer.setTheme({type:webViewer.refs.theme.DARK_MODE});

setLanguage(config: { key: Language }): Promise<undefined>;

webViewer.viewer.setLanguage({ key: webViewer.refs.language.ENGLISH });

getSize(): Promise<TSize>;

async function getSize() {
    return webViewer.viewer.getSize();
}

function success(result) {
    console.log(`Size is: ${result.width}x${result.height}`);
}

function failure(error) {
    console.error(`Error: ${error}`);
}

getSize().then(success, failure);

setLogo(config: { url: string }): Promise<undefined>;

webViewer.viewer.setLogo({url: "/logo.png"});

export interface AnnotationTool {
  tool: AnnotType;
  annotation?: {
    opacity?: number;
    strokeColor?: string;
    strokeWidth?: number;
    fillColor?: string;
    strokeDashPattern?: number[];
    startPointStyle?: LineEnd;
    endPointStyle?: LineEnd;
    fontColor?: string;
    fontFamily?: string;
    fontSize?: number;
  };
}

export interface AnnotationStampTool {
  tool: AnnotType;
  width?: number;
  height?: number;
}

export interface HighlightRect {
  color: string;
  pageIndex: number;
  opacity?: number;
  rect: TRect;
}

export interface HighlightKeyword {
  keyword: string;
  color: string;
  opacity?: number;
  caseSensitive?: boolean;
  useRegex?: boolean;
}

export interface HighlightedRect {
  id: number;
}