# ViewerUI

Viewer UI 定义了一些用于创建和显示用户界面组件的方法，它可以被 PDFViewCtrl 调用，也可以被 UIExtension 调用，通过 Viewer UI ，我们可以自定义一些方法来定义我们自己的 UI，比如右键菜单、alert 弹窗提示、loading 加载遮罩层等等。

Viewer UI 的接口声明参考 API Reference (opens new window). 在SDK中，分别为 PDFViewCtrl 和 UIExtension 内置了两套 Viewer UI, 它们是 PDFViewCtrl 层的 TinyViewerUI (opens new window) 和 UIExtension 层的XViewer (opens new window)。实际应用中，我们根据自己是否使用 PDFViewCtrl 或 UIExtension 来选择这两个内置的 Viewer UI 。

# IViewer 定义的方法列表

createContextMenu(key, anchor, config)：创建上下文菜单组件并注册右键单击事件。可以重写此方法来自定义右键菜单。参数说明如下：
- key: 任意类型，表示上下文菜单实例的所有者，可以是 StateHandler (opens new window) 的名称或AnnotComponent的实例。
- anchor: HTMLElement，用于响应右键单击事件的HTML元素。
- config: 对象，配置项。
  - config.selector: 字符串，要触发此菜单的元素的CSS选择器，该元素应为anchor或其子元素。
  - config.items: 数组，包含默认菜单项的配置。参考JQuery contextmenu插件的文档 (opens new window)。
  - config.items[].nameI18nKey: 字符串，菜单项的国际化文本键。
返回值：IContextMenu|undefined (opens new window)，上下文菜单组件，包括显示/隐藏和销毁API。返回undefined表示不显示指定目标的右键菜单。
alert(message)：显示带有可选内容和确定按钮的警告对话框，然后在对话框关闭后返回已完成的Promise。
- message: 字符串，警告对话框的消息，使用i18next.js的词条格式。
返回值：Promise<void>
confirm(message)：显示带有可选消息和两个按钮（确定和取消）的模态对话框，然后返回一个Promise。如果用户点击确定，Promise将被完成；如果用户点击取消，Promise将被拒绝。
- message: 字符串，确认对话框的消息，使用i18next.js的词条格式。
返回值：Promise<void>
prompt(defaultValue, message, title)：显示带有可选消息的对话框，提示用户输入一些文本。
- defaultValue: 字符串，文本输入框中显示的默认值。
- message: 字符串，要显示给用户的文本。
- title: 字符串，对话框的标题。
返回值：Promise<string>，返回一个Promise，在输入框中填入的值被完成。
promptPassword(defaultValue, message, title)：显示带有可选消息的对话框，提示用户输入密码。
- defaultValue: 字符串，密码输入框中显示的默认密码。
- message: 字符串，要显示给用户的文本。
- title: 字符串，对话框的标题。
返回值：Promise<string>，返回一个Promise，在密码输入框中填入的值被完成。
loading(coverOn)：显示一个加载层，表示页面或组件的加载状态。
- coverOn: HTMLElement，目标层。
返回值：Function，一个用于关闭加载层的函数。
createTextSelectionTooltip(pageRender)：创建一个工具提示组件，当用户选择文本时显示。
- pageRender: PDFPageRender。
返回值：IFloatingTooltip (opens new window)。

# 应用方法

通常，我们可能只需要重写 Viewer UI 中的部分方法，比如重写 alert 对话框，那我们就可以通过继承 SDK 内置的 Viewer UI 来实现：


class CustomViewerUI extends UIExtension.XViewerUI {
    alert(message) {
        // 这里就可以显示自定义的 alert 对话框了，我们简单地再控制台打印一下内容
        console.log('alert:', message);
        return Promise.resolve();
    }
}

new PDFUI({
 viewerOptions: {
     viewerUI: new CustomViewerUI()
 }
})

在 PDFViewCtrl 层实现自定义 Viewer UI ，方法是相同的：

class CustomViewerUI extends PDFViewCtrl.viewerui.TinyViewerUI {
    alert(message) {
        // 这里就可以显示自定义的 alert 对话框了，我们简单地再控制台打印一下内容
        console.log('alert:', message);
        return Promise.resolve();
    }
}
new PDFViewer({
    viewerUI: new CustomViewerUI()
})

还有更多例子，可以参考这两个文档中的内容：