# 预配置组件

预配置组件可以理解为一个拥有完整业务功能的组件别名，预配置组件的作用是将组件配置细节封装起来，方便复用业务组件，以及简化模板配置。

# 自定义预配置组件

# registerPreConfiguredComponent API

PDFUI.module('custom', [])
.registerPreConfiguredComponent('alias-button', {
    template: '<xbutton name="pre-configured-button"></xbutton>',
    config: [{
        target: 'pre-configured-button',
        text: 'Pre-configured button'
    }]
})

运行示例：

# 内置预配置组件

# `<hand-button>`

将 state-handler 切换到 STATE_HANDLER_HAND

组件用法:

<hand-button></hand-button>

相当于:

<xbutton @tooltip tooltip-title="toolbar.tooltip.hand.title" name="hand-tool" icon-class="fv__icon-toolbar-hand" @controller="states:HandController"></xbutton>

# `<selection-dropdown>`

选择下拉框，包含 select-text-image 和 select-annotation 按钮。

组件用法:

<selection-dropdown></selection-dropdown>

相当于:

<dropdown @tooltip @controller="selection:SelectionDropdownController" name="selection-dropdown" class="fv__ui-dropdown-hide-text">
    <select-text-image-button></select-text-image-button>
    <select-annotation-button></select-annotation-button>
</dropdown>

# `<select-text-image-button>`

将 state-handler 切换到 STATE_HANDLER_SELECT_TEXT_IMAGE

组件用法:

<select-text-image-button></select-text-image-button>

相当于:

<xbutton @controller="states:SelectTextImageController" name="select-text-image" icon-class="fv__icon-toolbar-select-text-image">toolbar.buttons.selectTextImage
</xbutton>

# `<select-annotation-button>`

将 state-handler 切换到 STATE_HANDLER_SELECT_ANNOTATION

组件用法:

<select-annotation-button></select-annotation-button>

相当于:

<xbutton @controller="states:SelectAnnotationController" name="select-annotation" icon-class="fv__icon-toolbar-select-annotation">toolbar.buttons.selectAnnotation
</xbutton>

# `<snapshot-button>`

将 state-handler 切换到 STATE_HANDLER_SNAPSHOT_TOOL

组件用法:

<snapshot-button></snapshot-button>

相当于:

<xbutton @controller="states:SnapshotToolController" @tooltip tooltip-title="toolbar.buttons.snapshot" name="snapshot-button" icon-class="fv__icon-toolbar-snapshot">toolbar.buttons.snapshot</xbutton>

# `<change-color-dropdown>`

颜色下拉框，可以改变PDF viewer的背景颜色。

组件用法:

<change-color-dropdown></change-color-dropdown>

相当于:

<dropdown name="change-color-dropdown" @controller="change-color:ChangeColorController" @tooltip tooltip-title="toolbar.tooltip.changeColor.title" icon-class="fv__icon-toolbar-change-color"
          popup-class="fv__ui-change-color-dropdown-popup" class="fv__ui-change-color-dropdown" separate="false">
    <div name="change-color-dropdown-list" class="fv__ui-change-color-dropdown-list">
        <div @foreach="color in colors"
            @sync.attr.class="'fv__ui-change-color-dropdown-color-round ' + color.type"
            @sync.attr.style="color.type === 'moon' ? '' : ('background-color:' + color.background)"></div>
    </div>
</dropdown>

# `<open-file-dropdown>`

打开本地文件按钮和打开url文件按钮的下拉菜单。

组件用法:

<open-file-dropdown></open-file-dropdown>

相当于:

<dropdown @controller="OpenFileDropdownController" name="open-file-button-list" class="fv__ui-dropdown-hide-text" @cannotBeDisabled>
    <file-selector @controller="file:OpenLocalFileController" icon-class="fv__icon-toolbar-open" name="open-local-file" accept=".pdf,.gif,.jpeg,.jpg,.png,.bmp" @cannotBeDisabled>toolbar.buttons.openfile</file-selector>
    <xbutton @controller="file:OpenRemoteFileController" icon-class="fv__icon-toolbar-open-url" name="open-from-url" @cannotBeDisabled>toolbar.buttons.openFromUrl</xbutton>
</dropdown>

# `<download-file-button>`

点击下载当前打开的PDF文件的按钮。

组件用法:

<download-file-button></download-file-button>

相当于:

<xbutton @tooltip tooltip-title="toolbar.buttons.download" name="download-file-button" icon-class="fv__icon-toolbar-download" @controller="file:DownloadFileController">toolbar.buttons.download</xbutton>

# `<print:print-button>` 和 `<print:print-dialog>`

<print:print-button> 用来显示 <print:print-dialog>

这些组件定义在print addon，在使用它之前，你应该添加print addon到 addons:[]。有关addon更详细的信息，请参阅 addon简介.。

组件用法:

首先，在工具栏内或任何你需要的地方定义 <print:print-button>：

<print:print-button></print:print-button>

相当于:

<xbutton @tooltip tooltip-title="print:button-tooltip.title" name="print-button" icon-class="fv__icon-toolbar-print" @controller="print:ShowPrintDialogController">print:button-tooltip.title</xbutton>

其次，在 <template> tag中定义 <print:print-dialog>：

<print:print-dialog></print:print-dialog>

这个组件非常重要，如果没有定义这个组件，用户将无法看到打印配置的对话框。

# `<goto-prev-page-button>` 和 `<goto-next-page-button>`

组件用法:

<goto-prev-page-button></goto-prev-page-button>
<goto-next-page-button></goto-next-page-button>

相当于:

<xbutton @tooltip tooltip-title="toolbar.tooltip.previousPage.title" icon-class="fv__icon-toolbar-prev-page" name="goto-prev-page" @controller="gotoview:GotoPrevPageController"></xbutton>
<xbutton @tooltip tooltip-title="toolbar.tooltip.nextPage.title" icon-class="fv__icon-toolbar-next-page" name="goto-next-page" @controller="gotoview:GotoNextPageController"></xbutton>

# `<goto-page-input>`

包含输入和文本的组件，用于显示当前页码和总页数。其允许输入页码，然后按Enter跳转到该页面。

组件用法:

<goto-page-input></goto-page-input>

相当于:

<div class="fv__ui-toolbar-gotopage">
    <number @controller="gotoview:GotoPageController" min="1" @bind.attr.max="pageNumber" @bind.value="currentPageIndex" name="gotopage-input" @on.change="onchange" @on.keydown="onkeydown"></number>
    <span class="fv__ui-toolbar-gotopage-sep">/</span>
    <text @controller="gotoview:TotalPageTextController" @sync.text="pageNumber" name="gotopage-total">0</text>
</div>

# `<zoom-out-button>` 和 `<zoom-in-button>`

此按钮用于放大/缩小页面。

组件用法:

<zoom-out-button></zoom-out-button>
<zoom-in-button></zoom-in-button>

相当于:

<xbutton @tooltip tooltip-title="toolbar.buttons.zoomout" @controller="zoom:ZoomInAndOutController" action="zoomout" name="zoom-out" icon-class="fv__icon-toolbar-zoom-out">toolbar.buttons.zoomout</xbutton>
<xbutton @tooltip tooltip-title="toolbar.buttons.zoomin" @controller="zoom:ZoomInAndOutController" action="zoomin" name="zoom-in" icon-class="fv__icon-toolbar-zoom-in">toolbar.buttons.zoomin</xbutton>

# `<editable-zoom-dropdown>`

此下拉菜单用于放大/缩小页面，并指定到缩放的比例。

组件用法:

<editable-zoom-dropdown></editable-zoom-dropdown>

相当于:

template:

<dropdown name="editable-zoom-dropdown" @controller="zoom:EditableZoomDropdownController" class="fv__ui-editable_zoom_dropdown" editable="true">
    <dropdown-button icon-class="fv__icon-toolbar-fit-page" action="fitHeight" @controller="zoom:EditableZoomActionController" name="editable-zoom-dropdown-fitpage">toolbar.buttons.fitHeight</dropdown-button>
    <dropdown-button icon-class="fv__icon-toolbar-fit-width" action="fitWidth" @controller="zoom:EditableZoomActionController" name="editable-zoom-dropdown-fitwidth">toolbar.buttons.fitWidth</dropdown-button>
    <li class="fv__ui-dropdown-separator"></li>
    <dropdown-button @foreach="scale in $pdfui.customScalingValues" @sync.text="scale * 100 + '%'" @controller="zoom:EditableZoomToScaleValueController"></dropdown-button>
</dropdown>,

config:

{
    target: 'editable-zoom-dropdown',
    editOptions: {
        type: 'number',
        min: 25,
        max: 600,
        step: 1,
        value: 50,
        template: '${value}%'
    }
}

# `<zoom-dropdown>`

这个下拉菜单用于放大或缩小页面，类似于 <editable-zoom-dropdown>，但是不可编辑。

组件用法:

<zoom-dropdown></zoom-dropdown>

相当于:

<dropdown name="dropdown-zoom" icon-class="fv__icon-toolbar-zoom-in" class="fv__ui-dropdown-hide-text" selected="0">
    <dropdown-button name="dropdown-zoom-in" action="zoomin" @controller="zoom:DropdownZoomInAndOutController" icon-class="fv__icon-toolbar-zoom-in">toolbar.buttons.zoomin</dropdown-button>
    <dropdown-button name="dropdown-zoom-out" action="zoomout" @controller="zoom:DropdownZoomInAndOutController" icon-class="fv__icon-toolbar-zoom-out">toolbar.buttons.zoomout</dropdown-button>
    <dropdown-button name="dropdown-zoom-fitpage" action="fitHeight" @controller="zoom:ZoomActionController" icon-class="fv__icon-toolbar-fit-page">toolbar.buttons.fitHeight</dropdown-button>
    <dropdown-button name="dropdown-zoom-fitwidth" action="fitWidth" @controller="zoom:ZoomActionController" icon-class="fv__icon-toolbar-fit-width">toolbar.buttons.fitWidth</dropdown-button>
    <li class="fv__ui-dropdown-separator"></li>
    <dropdown-button @foreach="scale in $pdfui.customScalingValues" @sync.text="scale * 100 + '%'" @controller="zoom:ZoomToScaleValueController"></dropdown-button>
</dropdown>

# Page view mode buttons

页面视图模式包含一系列用于切换页面视图的按钮。

组件用法:

<single-page-button></single-page-button>
<continuous-page-button></continuous-page-button>
<facing-page-button></facing-page-button>
<continuous-facing-page-button></continuous-facing-page-button>
<h-continuous:h-continuous-button></h-continuous:h-continuous-button>

相当于:

<xbutton @tooltip tooltip-title="toolbar.tools.single-page" @controller="pagemode:SinglePageModeController" name="single-page" icon-class="fv__icon-toolbar-single-page">toolbar.tools.single-page</xbutton>
<xbutton @tooltip tooltip-title="toolbar.tools.continuous-page" @controller="pagemode:ContinuousPageModeController" name="continuous-page" icon-class="fv__icon-toolbar-continuous-page">toolbar.tools.continuous-page</xbutton>
<xbutton @tooltip tooltip="toolbar.tools.facing" @controller="pagemode:FacingPageModeController" name="facing-page" icon-class="fv__icon-toolbar-double-page">toolbar.tools.facing</xbutton>
<xbutton @tooltip tooltip="toolbar.tools.continuous-facing" @controller="pagemode:ContinuousFacingPageModeController" name="continuous-facing-page" icon-class="fv__icon-toolbar-facing-continuous-page">toolbar.tools.continuous-facing</xbutton>
<xbutton @tooltip tooltip-title="h-continuous:buttons.title" @controller="h-continuous:HContinuousViewModeController" name="h-continuous-button" icon-class="fv__icon-toolbar-h-continuous-page">h-continuous:buttons.title</xbutton>

<h-continuous:h-continuous-button> 是定义在h-continuous addon中，在使用它之前，应该添加'h-continuous' addon到addons列表。有关addon更详细的信息，请参阅《addon简介》。

# `<loupe-tool-button>` 和 `<loupe-tool-dialog>`

该按钮在被点击时会将state-handler切换到放大镜工具。

组件用法:

<loupe-tool-button></loupe-tool-button>
<template>
    <loupe-tool-dialog></loupe-tool-dialog>
</template>

相当于:

<xbutton name="loupe-button" icon-class="fv__icon-toolbar-loupe" class="fv__ui-toolbar-show-text-button" @tooltip tooltip-title="toolbar.tooltip.loupe.title" @controller="loupe:LoupeController">toolbar.tools.loupe</xbutton>
<template>
    <layer name="loupe-tool-dialog" class="fv__ui-loupe-tool-dialog" @resizable>
        <layer-header class="fv__ui-loupe-tool-header" title="loupe.title" @draggable="{type: 'parent'}"></layer-header>
        <layer-view class="fv__ui-loupe-body">
        </layer-view>
        <layer-toolbar class="loupe-tool-bottom-bar" visible="false">
            <dropdown name="loupe-tool-zoom-dropdown" @controller="loupe:LoupeToolScaleListController" editable="true">
                <dropdown-button @foreach="scaleItem in scaleList track by value" @controller="loupe:LoupeToolScaleController" @bind.text="scaleItem.text"></dropdown-button>
            </dropdown>
            <slider name="loupe-tool-zoom-slider" min="50" max="600" step="1"></slider>
            <checkbox name="loupe-tool-lock">loupe.lockButton</checkbox>
        </layer-toolbar>
    </layer>
</template>

Note： <loupe-tool-button> 和 <loupe-tool-dialog> 在layout-template需同时定义。

# `<marquee-tool-button>`

该按钮用于将当前的state-handler切换成到选取工具。

组件用法:

<marquee-tool-button></marquee-tool-button>

相当于:

<xbutton name="marquee-button" icon-class="fv__icon-toolbar-marquee" class="fv__ui-toolbar-show-text-button" @tooltip tooltip-title="toolbar.tooltip.marquee.title" @controller="marquee:MarqueeToolController">toolbar.buttons.marquee</xbutton>

# `<fpmodule:contextmenu-item-file-property>`, `<fpmodule:file-property-button>` 和 `<fpmodule:file-property-dialog>`

<fpmodule:contextmenu-item-file-property> 和 <fpmodule:file-property-button> 在被点击时会显示<fpmodule:file-property-dialog>。所有这些组件都定义在 file-property addon中。在使用它之前，需要添加 file-property addon到 addons:[]。有关addon更详细的信息，请参阅 addon简介。

<fpmodule:file-property-dialog> 组件用法：

<fpmodule:file-property-button></fpmodule:file-property-button>
<template>
    <fpmodule:file-property-dialog></fpmodule:file-property-dialog>
</template>

<fpmodule:contextmenu-item-file-property> 必须在 <contextmenu> 内部使用。

# 创建注释的按钮

以下组件是带有初始模板的内置预配置组件，用于将当前 state-handler 切换到注释创建的 state-handlers。

# `<create-drawings-dropdown>`

<dropdown @controller="drawings:DrawingsDropdownController" name="create-shape-dropdown" class="fv__ui-dropdown-hide-text">
    <create-square-button></create-square-button>
    <create-circle-button></create-circle-button>
    <create-line-button></create-line-button>
    <create-arrow-button></create-arrow-button>
    <create-polygon-button></create-polygon-button>
    <create-polyline-button></create-polyline-button>
    <create-cloud-button></create-cloud-button>
</dropdown>

# `<create-note-button>`

<xbutton name="create-text" @tooltip tooltip-title="toolbar.tooltip.note.title" @controller="states:CreateTextController" icon-class="fv__icon-toolbar-note">toolbar.create.note</xbutton>

# `<create-text-highlight-button>`

<xbutton name="create-highlight" @tooltip tooltip-title="toolbar.tooltip.highlight.title" @controller="states:CreateHighlightController" icon-class="fv__icon-toolbar-text-highlight">toolbar.create.highlight</xbutton>

# `<create-strikeout-button>`

<xbutton name="create-strikeout" @tooltip tooltip="toolbar.tooltip.strikeout.title" @controller="states:CreateStrikeoutController" icon-class="fv__icon-toolbar-strikeout">toolbar.create.strikeout</xbutton>

# `<create-underline-button>`

<xbutton name="create-underline" @tooltip tooltip-title="toolbar.tooltip.underline.title" @controller="states:CreateUnderlineController" icon-class="fv__icon-toolbar-underline">toolbar.create.underline</xbutton>

# `<create-squiggly-button>`

<xbutton name="create-squiggly" @tooltip tooltip="toolbar.tooltip.squiggly.title" @controller="states:CreateSquigglyController" icon-class="fv__icon-toolbar-squiggly">toolbar.create.squiggly</xbutton>

# `<create-replace-button>`

<xbutton name="create-replace" @tooltip tooltip="toolbar.tooltip.replace.title" @controller="states:CreateReplaceController" icon-class="fv__icon-toolbar-replace">toolbar.create.replace</xbutton>

# `<create-caret-button>`

<xbutton name="create-caret" @tooltip tooltip-title="toolbar.tooltip.caret.title" @controller="states:CreateCaretController" icon-class="fv__icon-toolbar-insert">toolbar.create.caret</xbutton>

# `<create-typewriter-button>`

<xbutton name="freetext-typewriter" @tooltip tooltip-title="toolbar.tooltip.typewriter.title" @controller="states:CreateTypewriterController" icon-class="fv__icon-toolbar-typewriter" >toolbar.create.typewriter</xbutton>

# `<create-callout-button>`

<xbutton name="freetext-callout" @tooltip tooltip-title="toolbar.tooltip.callout.title" @controller="states:CreateCalloutController" icon-class="fv__icon-toolbar-callout" >toolbar.create.callout</xbutton>

# `<create-textbox-button>`

<xbutton name="freetext-textbox" @tooltip tooltip-title="toolbar.tooltip.textbox.title" @controller="states:CreateTextboxController" icon-class="fv__icon-toolbar-textbox" >toolbar.create.textbox</xbutton>

# `<create-area-highlight-button>`

<xbutton name="create-area-highlight" @tooltip tooltip="toolbar.tooltip.areaHighlight.title" @controller="states:CreateAreaHighlightController" icon-class="fv__icon-toolbar-area-highlight">toolbar.create.areahighlight</xbutton>

# `<create-pencil-button>`

<xbutton name="pencil-tool" @tooltip tooltip-title="toolbar.tooltip.pencil.title" @controller="states:CreatePencilController" icon-class="fv__icon-toolbar-pencil">toolbar.buttons.pencil</xbutton>

# `<eraser-button>`

<xbutton name="eraser-tool" @tooltip tooltip-title="toolbar.tooltip.eraser.title" @controller="states:EraserController" icon-class="fv__icon-toolbar-eraser">toolbar.buttons.eraser</xbutton>

# `<stamp-dropdown>`

该下拉组件用于展示创建自定义stamp的所有stamp图标和按钮。

<!-- internal implementation -->

# `<create-measurement-dropdown>`

<dropdown name="create-measurement-button-list" class="fv__ui-dropdown-hide-text" @cannotBeDisabled selected="0">
    <xbutton @tooltip tooltip-title="toolbar.buttons.tooltip.distance" name="create-distance-btn" icon-class="fv__icon-toolbar-distance" @controller="distance:CreateDistanceController">toolbar.buttons.distance</xbutton>
    <xbutton @hide-on-sr @tooltip tooltip-title="toolbar.buttons.tooltip.perimeter" name="create-perimeter-btn" icon-class="fv__icon-toolbar-perimeter" @controller="distance:CreatePerimeterController">toolbar.buttons.perimeter</xbutton>
    <xbutton @hide-on-sr @tooltip tooltip-title="toolbar.buttons.tooltip.area" name="create-area-btn" icon-class="fv__icon-toolbar-area" @controller="distance:CreateAreaController">toolbar.buttons.area</xbutton>
    <xbutton @hide-on-sr @tooltip tooltip-title="toolbar.buttons.tooltip.circleArea" name="create-circle-area-btn" icon-class="fv__icon-toolbar-areacircle" @controller="distance:CreateCircleAreaController">toolbar.buttons.area</xbutton>
</dropdown>

# `<create-attachment-button>`

<xbutton name="create-fileattachment" @tooltip tooltip-title="toolbar.tooltip.fileattachment.title" @controller="states:CreateFileAttachmentController" icon-class="fv__icon-toolbar-attachment">toolbar.create.fileattachment</xbutton>

# `<create-image-button>`

<xbutton name="create-image" @tooltip tooltip-title="toolbar.tooltip.image.title" @controller="states:CreateImageController" icon-class="fv__icon-toolbar-image">toolbar.create.image</xbutton>

# `<create-link-button>`

<xbutton name="create-link" @tooltip tooltip-title="toolbar.tooltip.link.title" @controller="states:CreateLinkController" icon-class="fv__icon-toolbar-link" >toolbar.create.link</xbutton>

# `<multi-media:multi-media-button>`

该组件在 multi-media addon中定义。在使用之前，需要将 multi-media addon添加到 addons:[]。有关addon更详细的信息，请参阅《addon简介》。

# Graphics 对象组件

# 定义在 `edit-graphics` addon中的组件：

<edit-graphics:contextmenu-item-properties>:

<contextmenu-item> 组件用于显示graphic对象的属性对话框。
<edit-graphics:contextmenu-item-delete>:

<contextmenu-item> 组件用于删除graphic对象。
<edit-graphics:image-contextmenu>:

删除页面对象两个功能菜单项。条目的 <contextmenu> 组件用于image graphics 对象。

# 定义在 `path-object` addon中的组件：

<edit-pageobjects:path-contextmenu>:

带有属性和删除菜单条目的 <contextmenu> 组件用于path graphic 对象.
<edit-pageobjects:edit-all-objects-button>:

该按钮用于将当前 state-handler 切换到 'edit-all' state-handler，以修改PDF页面中当前支持的graphic对象。
<edit-pageobjects:path-objects-dropdown>:

该下拉组件用来创建不同类型的path对象。

# 定义在 `text-object` addon中的组件：

<edit-text-object:add-text-button>:

该按钮组件用于切换state-handler为 add-text。
<edit-text-object:text-bold-style-button>:

该按钮用于将当前编辑文本对象切换为粗细体样式。
<edit-text-object:text-italic-style-button>:

该按钮用于将当前编辑的文本对象切换为斜体/正常样式。
<edit-text-object:text-underline-button>:

该按钮用于将当前编辑的文本对象切换为下划线样式。
<edit-text-object:font-color-picker>:

文本颜色选取器组件用于设置当前编辑的文本对象的文本颜色。
<edit-text-object:font-style-dropdown>:

该下拉框组件用于设置当前编辑文本对象的字体样式和大小。

# PDF form 组件

以下的组件定义在 import-form 和 export-form addons中。

<import-form-module:import-form-button>

该按钮用于选择表单文件来导入表单数据。
<export-form-module:export-form-dropdown>

该按钮用于以XML文件的方式导出表单数据。
<create-text-field-button>

该按钮将当前的state-handler切换为 createTextField，来创建文本域。
<create-signature-field-button>

该按钮将当前的 state-handler 切换为 createSignatureField，来创建签名域。

# `<ink-sign-dropdown>` 和 `<create-ink-sign-dialog>`

该组件用于显示所有ink-signatures，以及创建自定义 ink-signatures。<ink-sign-dropdown> 和 <create-ink-sign-dialog> 在布局模板中需同时定义。

<ink-sign-dropdown></ink-sign-dropdown>
<template>
   <create-ink-sign-dialog></create-ink-sign-dialog>
</template>

# `<password-protect:password-protect-button>`

该按钮用于显示密码加密对话框，来对当前PDF文档进行加密。

用法

<password-protect:password-protect-button></password-protect:password-protect-button>

# `<password-protect:remove-protect-button>`

该按钮用于移除当前PDF文档的安全加密属性。

用法

<password-protect:remove-protect-button></password-protect:remove-protect-button>

# Redaction 组件

<redaction:create-redactions-dropdown>

该按钮将当前 state-handler 切换为 'create-redaction-state'。
<redaction:apply-redactions-button>

该按钮用来应用PDF文档中的所有密文注释。
<redaction:redaction-search-button>

该按钮用来切换到搜索侧边栏面板。

<bookmark-sidebar-panel>
<commentlist-sidebar-panel>
<thumbnail-sidebar-panel>
<layer-sidebar-panel>
<search-sidebar-panel>
<attachment-sidebar-panel>

# `<distance:ruler-container>` 和 `<distance:measurement-popup>`

该组件用来在创建distance注释时显示标尺和距离信息。<viewer> 组件必须在 <distance:ruler-container> 内的 <slot> tag 中，以及 <distance:measurement-popup> 必须在 <template> tag中。

<distance:ruler-container name="pdf-viewer-container-with-ruler">
    <slot>
        <viewer></viewer>
    </slot>
</distance:ruler-container>
<template>
    <distance:measurement-popup></distance:measurement-popup>
</template>

# `<page-contextmenu>`

<contextmenu name="fv--page-contextmenu">
    <full-screen:contextmenu-item-fullscreen></full-screen:contextmenu-item-fullscreen>
    <contextmenu-separator @require-modules="full-screen" @hide-on-device="ios"></contextmenu-separator>
    <contextmenu-item-select-tool></contextmenu-item-select-tool>
    <contextmenu-item-hand-tool></contextmenu-item-hand-tool>
    <contextmenu-item-marquee-zoom></contextmenu-item-marquee-zoom>
    <contextmenu-separator></contextmenu-separator>

    <contextmenu-item-zoom-actual-size></contextmenu-item-zoom-actual-size>
    <contextmenu-item-zoom-fitpage></contextmenu-item-zoom-fitpage>
    <contextmenu-item-zoom-fitwidth></contextmenu-item-zoom-fitwidth>

    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-rotate-right></contextmenu-item-rotate-right>
    <contextmenu-item-rotate-left></contextmenu-item-rotate-left>
    <contextmenu-separator></contextmenu-separator>
    <print:contextmenu-item-print></print:contextmenu-item-print>
    <contextmenu-item-search></contextmenu-item-search>
    <contextmenu-separator @require-modules="fpmodule"></contextmenu-separator>
    <fpmodule:contextmenu-item-file-property></fpmodule:contextmenu-item-file-property>
</contextmenu>

# `<default-annot-contextmenu>`

当无法找到注释的上下文菜单，以及该注释不是markup类型的注释，则会默认使用<default-annot-contextmenu>。

<contextmenu name="fv--default-annot-contextmenu">
    <contextmenu-item-reply></contextmenu-item-reply>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-properties></contextmenu-item-properties>
</contextmenu>

# `<markup-contextmenu>`

当无法找到注释的上下文菜单，以及该注释是markup类型的注释，则会默认使用<markup-contextmenu>。

原始模板:

<contextmenu name='fv--markup-contextmenu'>
    <contextmenu-item-reply></contextmenu-item-reply>
    <contextmenu-item-cut></contextmenu-item-cut>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-properties></contextmenu-item-properties>
</contextmenu>

使用:

<markup-contextmenu name="fv--line-contextmenu"></markup-contextmenu>
<markup-contextmenu name="fv--linearrow-contextmenu"></markup-contextmenu>
<markup-contextmenu name="fv--linedimension-contextmenu"></markup-contextmenu>
<markup-contextmenu name="fv--polylinedimention-contextmenu"></markup-contextmenu>
<markup-contextmenu name="fv--polygondimension-contextmenu"></markup-contextmenu>
<markup-contextmenu name="fv--circle-contextmenu"></markup-contextmenu>
<markup-contextmenu name="fv--square-contextmenu"></markup-contextmenu>
<markup-contextmenu name="fv--polyline-contextmenu"></markup-contextmenu>
<markup-contextmenu name="fv--polygon-contextmenu"></markup-contextmenu>
<markup-contextmenu name="fv--polygoncloud-contextmenu"></markup-contextmenu>
<markup-contextmenu name="fv--ink-contextmenu"></markup-contextmenu>
<markup-contextmenu name="fv--stamp-contextmenu"></markup-contextmenu>
<markup-contextmenu name="fv--text-contextmenu"></markup-contextmenu>

# `<caret-contextmenu>`

原始模板:

<contextmenu>
    <contextmenu-item-reply></contextmenu-item-reply>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-properties></contextmenu-item-properties>
</contextmenu>

使用:

<caret-contextmenu name="fv--areahighlight-contextmenu"></caret-contextmenu>
<caret-contextmenu name="fv--replace-contextmenu"></caret-contextmenu>
<caret-contextmenu name="fv--caret-contextmenu"></caret-contextmenu>

# `<textmarkup-contextmenu>`

原始模板:

<contextmenu name='fv--textmarkup-contextmenu'>
    <contextmenu-item-reply></contextmenu-item-reply>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-copy-text></contextmenu-item-copy-text>
    <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-properties></contextmenu-item-properties>
</contextmenu>

使用:

<textmarkup-contextmenu name="fv--highlight-contextmenu"></textmarkup-contextmenu>
<textmarkup-contextmenu name="fv--strikeout-contextmenu"></textmarkup-contextmenu>
<textmarkup-contextmenu name="fv--underline-contextmenu"></textmarkup-contextmenu>
<textmarkup-contextmenu name="fv--squiggly-contextmenu"></textmarkup-contextmenu>

# `<freetext-contextmenu>`

原始模板:

<contextmenu name='fv--freetext-contextmenu'>
    <contextmenu-item-cut></contextmenu-item-cut>
    <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-properties></contextmenu-item-properties>
</contextmenu>

使用:

<freetext-contextmenu name="fv--typewriter-contextmenu"></freetext-contextmenu>
<freetext-contextmenu name="fv--callout-contextmenu"></freetext-contextmenu>
<freetext-contextmenu name="fv--textbox-contextmenu"></freetext-contextmenu>

# `<action-annot-contextmenu>`

原始模板:

<contextmenu name="fv--action-annot-contextmenu">
    <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-annot-actions></contextmenu-item-annot-actions>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-properties></contextmenu-item-properties>
</contextmenu>

使用:

<action-annot-contextmenu name="fv--image-contextmenu"></action-annot-contextmenu>
<action-annot-contextmenu name="fv--link-contextmenu"></action-annot-contextmenu>

# `<fileattachment-contextmenu>`

原始模板:

<contextmenu name="fv--fileattachment-contextmenu">
    <contextmenu-item-reply></contextmenu-item-reply>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-properties></contextmenu-item-properties>
</contextmenu>

# `<media-contextmenu>`

原始模板:

<contextmenu name="fv--media-contextmenu">
    <contextmenu-item-media-download></contextmenu-item-media-download>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-properties></contextmenu-item-properties>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-media-play></contextmenu-item-media-play>
</contextmenu>

# `<sound-contextmenu>`

原始模板:

<contextmenu name="fv--sound-contextmenu">
    <contextmenu-item-media-download></contextmenu-item-media-download>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-media-play></contextmenu-item-media-play>
</contextmenu>

# `<redact-contextmenu>`

原始模板:

<contextmenu name="fv--redact-contextmenu">
    <contextmenu-item-reply></contextmenu-item-reply>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-apply></contextmenu-item-apply>
    <contextmenu-item-apply-all></contextmenu-item-apply-all>
    <contextmenu-item-place></contextmenu-item-place>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-properties></contextmenu-item-properties>
</contextmenu>

# `<edit-graphics:image-contextmenu>`

原始模板:

<contextmenu name="fv--image-graphics-object-contextmenu">
    <edit-graphics:contextmenu-item-properties name="fv--contextmenu-item-image-graphics-object-properties"></edit-graphics:contextmenu-item-properties>
    <edit-graphics:contextmenu-item-delete name="fv--contextmenu-item-image-graphics-object-delete"></edit-graphics:contextmenu-item-delete>
    </contextmenu>

# `<edit-pageobjects:path-contextmenu>`

原始模板:

<contextmenu name="fv--path-graphics-object-contextmenu">
    <edit-graphics:contextmenu-item-properties name="fv--contextmenu-item-path-graphics-object-properties"></edit-graphics:contextmenu-item-properties>
    <edit-graphics:contextmenu-item-delete name="fv--contextmenu-item-path-graphics-object-delete"></edit-graphics:contextmenu-item-delete>
</contextmenu>

# `<text-field-contextmenu>`

原始模板:

<contextmenu name='fv--text-field-contextmenu'>
    <contextmenu-item name="fv--contextmenu-item-form-sign" @controller="annot-opr:SignController">certifySign.sign</contextmenu-item>
    <contextmenu-item-form-properties></contextmenu-item-form-properties>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item-delete-annot></contextmenu-item-delete-annot>
</contextmenu>

备注: contextmenu的名称用于内部获取菜单组件，是不能被更改的。

# `<text-sel:text-selection-tooltip>`

在PDF页面中选择文本时出现的浮动组件。

# `<annottext>`

当鼠标移到注释上时出现的浮动组件。

# 预配置组件

# 自定义预配置组件

# registerPreConfiguredComponent API

# 内置预配置组件

# <hand-button>

# <selection-dropdown>

# <select-text-image-button>

# <select-annotation-button>

# <snapshot-button>

# <change-color-dropdown>

# <open-file-dropdown>

# <download-file-button>

# <print:print-button> 和 <print:print-dialog>

# <goto-prev-page-button> 和 <goto-next-page-button>

# <goto-page-input>

# <zoom-out-button> 和 <zoom-in-button>

# <editable-zoom-dropdown>

# <zoom-dropdown>

# Page view mode buttons

# <loupe-tool-button> 和 <loupe-tool-dialog>

# <marquee-tool-button>

# <fpmodule:contextmenu-item-file-property>, <fpmodule:file-property-button> 和 <fpmodule:file-property-dialog>

# 创建注释的按钮

# <create-drawings-dropdown>

# <create-note-button>

# <create-text-highlight-button>

# <create-strikeout-button>

# <create-underline-button>

# <create-squiggly-button>

# <create-replace-button>

# <create-caret-button>

# <create-typewriter-button>

# <create-callout-button>

# <create-textbox-button>

# <create-area-highlight-button>

# <create-pencil-button>

# <eraser-button>

# <stamp-dropdown>

# <create-measurement-dropdown>

# <create-attachment-button>

# <create-image-button>

# <create-link-button>

# <multi-media:multi-media-button>

# Graphics 对象组件

# 定义在 edit-graphics addon中的组件：

# 定义在 path-object addon中的组件：

# 定义在 text-object addon中的组件：

# PDF form 组件

# <ink-sign-dropdown> 和 <create-ink-sign-dialog>

# <password-protect:password-protect-button>

# <password-protect:remove-protect-button>

# Redaction 组件

# sidebar 组件

# <distance:ruler-container> 和 <distance:measurement-popup>

# Right-click menu components

# <page-contextmenu>

# <default-annot-contextmenu>

# <markup-contextmenu>

# <caret-contextmenu>

# <textmarkup-contextmenu>

# <freetext-contextmenu>

# <action-annot-contextmenu>

# <fileattachment-contextmenu>

# <media-contextmenu>

# <sound-contextmenu>

# <redact-contextmenu>

# <edit-graphics:image-contextmenu>

# <edit-pageobjects:path-contextmenu>

# <text-field-contextmenu>

# <text-sel:text-selection-tooltip>

# <annottext>

# `<hand-button>`

# `<selection-dropdown>`

# `<select-text-image-button>`

# `<select-annotation-button>`

# `<snapshot-button>`

# `<change-color-dropdown>`

# `<open-file-dropdown>`

# `<download-file-button>`

# `<print:print-button>` 和 `<print:print-dialog>`

# `<goto-prev-page-button>` 和 `<goto-next-page-button>`

# `<goto-page-input>`

# `<zoom-out-button>` 和 `<zoom-in-button>`

# `<editable-zoom-dropdown>`

# `<zoom-dropdown>`

# `<loupe-tool-button>` 和 `<loupe-tool-dialog>`

# `<marquee-tool-button>`

# `<fpmodule:contextmenu-item-file-property>`, `<fpmodule:file-property-button>` 和 `<fpmodule:file-property-dialog>`

# `<create-drawings-dropdown>`

# `<create-note-button>`

# `<create-text-highlight-button>`

# `<create-strikeout-button>`

# `<create-underline-button>`

# `<create-squiggly-button>`

# `<create-replace-button>`

# `<create-caret-button>`

# `<create-typewriter-button>`

# `<create-callout-button>`

# `<create-textbox-button>`

# `<create-area-highlight-button>`

# `<create-pencil-button>`

# `<eraser-button>`

# `<stamp-dropdown>`

# `<create-measurement-dropdown>`

# `<create-attachment-button>`

# `<create-image-button>`

# `<create-link-button>`

# `<multi-media:multi-media-button>`

# 定义在 `edit-graphics` addon中的组件：

# 定义在 `path-object` addon中的组件：

# 定义在 `text-object` addon中的组件：

# `<ink-sign-dropdown>` 和 `<create-ink-sign-dialog>`

# `<password-protect:password-protect-button>`

# `<password-protect:remove-protect-button>`

# `<distance:ruler-container>` 和 `<distance:measurement-popup>`

# `<page-contextmenu>`

# `<default-annot-contextmenu>`

# `<markup-contextmenu>`

# `<caret-contextmenu>`

# `<textmarkup-contextmenu>`

# `<freetext-contextmenu>`

# `<action-annot-contextmenu>`

# `<fileattachment-contextmenu>`

# `<media-contextmenu>`

# `<sound-contextmenu>`

# `<redact-contextmenu>`

# `<edit-graphics:image-contextmenu>`

# `<edit-pageobjects:path-contextmenu>`

# `<text-field-contextmenu>`

# `<text-sel:text-selection-tooltip>`

# `<annottext>`