# Pre-configured component

Pre-configured components are set in advance with text, icons, event handling and other information and assigning an alias, and then use alias in layout template directory, It is useful to simplify the template and reuse component in different appearance templates.

# Custom pre-configured component

# registerPreConfiguredComponent API

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

Runnable example:

# Built-in pre-configured components

# `<hand-button>`

Switch the state-handler to STATE_HANDLER_HAND

component usage:

<hand-button></hand-button>

Equivalent to:

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

# `<selection-dropdown>`

A dropdown with select-text-image button and select-annotation button.

component usage:

<selection-dropdown></selection-dropdown>

Equivalent to:

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

Switch the state-handler to STATE_HANDLER_SELECT_TEXT_IMAGE

component usage:

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

Equivalent to:

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

# `<select-annotation-button>`

Switch the state-handler to STATE_HANDLER_SELECT_ANNOTATION

component usage:

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

Equivalent to:

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

# `<snapshot-button>`

Switch the state-handler to STATE_HANDLER_SNAPSHOT_TOOL

component usage:

<snapshot-button></snapshot-button>

Equivalent to:

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

A dropdown with colors to change background color of PDF viewer.

component usage:

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

Equivalent to:

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

A dropdown with open-local-file button and open-url-file button.

Component usage:

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

Equivalent to:

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

A button that clicks to download current opening PDF file.

Component usage:

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

Equivalent to:

<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>` and `<print:print-dialog>`

The function of <print:print-button> is to click to display the <print:print-dialog>

These components are defined in print addon, before using it, you should add the print addon into addons:[]. For more details about addons, please refer to Introduction to addons.

Component usage

At first, define the <print:print-button> inside the toolbar or anywhere you need:

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

Its Equivalent to

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

At the second, define <print:print-dialog> inside a <template> tag:

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

This component is essential, because if this component is not defined, the user will not be able to see the print configuration dialog.

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

These buttons are used to jump pages to previous or next.

Component usage

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

Equivalent to

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

It is a component with input and text that displays the current page number and the total number of pages. It also allows you to enter page numbers and then press enter to jump to the page.

Component usage

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

Equivalent to

<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>` and `<zoom-in-button>`

These two buttons are used to zoom in/out of the page.

Component usage

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

Equivalent to

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

This dropdown is used to zoom in/out on the page to specify the scale value.

Component usage

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

Its equivalent to

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

This dropdown is used to zoom in/out on the pages like <editable-zoom-dropdown>, but it is un-editable.

Component usage

<zoom-dropdown></zoom-dropdown>

Equivalent to

<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

Page view mode contains a series of buttons which are used to switch page view.

Component usage

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

Equivalent to

<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> is defined in h-continuous addon, before using it, you should add the 'h-continuous' addon into addons list. For more details about addon, please refer to Introduction to addons.

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

A button which is used to switch state-handler to loupe tool when being clicked.

Component usage

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

Equivalent to

<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： The <loupe-tool-button> and
<loupe-tool-dialog> should be defined in layout-template at the same time.

# `<marquee-tool-button>`

A button which is used to switch the current state-handler to the marquee tool.

Component usage

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

Equivalent to

<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>` and `<fpmodule:file-property-dialog>`

<fpmodule:contextmenu-item-file-property> and <fpmodule:file-property-button> are used to display <fpmodule:file-property-dialog> when being clicked. All of these components are defined in the file-property addon. Before using it, you should add the file-property addon into addons:[]. For more details about addons, please refer to Introduction to addons.

Component usage<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> must be used inside of <contextmenu>.

# Buttons to create annotations

The following components are built-in pre-configured components with their initial template which are used to switch current state-handler to state-handlers for annotation creation.

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

It's a dropdown component exhibits all stamp icons and a button for creating custom 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>`

This component is defined in the multi-media addon. Before using it, you should add the multi-media addon into addons:[], For more details about addons, please refer to Introduction to addons.

# Graphics object components

# Components defined in `edit-graphics` addon

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

A <contextmenu-item> component IS used to show graphic object's properties dialog.
<edit-graphics:contextmenu-item-delete>:

A <contextmenu-item> component IS used to delete a graphic object.
<edit-graphics:image-contextmenu>:

A <contextmenu> component with properties & delete items is used for image graphics object.

# Components defined in `path-object` addon

<edit-pageobjects:path-contextmenu>:

A <contextmenu> with properties & delete items is used for path graphic object.
<edit-pageobjects:edit-all-objects-button>:

A button which is used to switch current state-handler to 'edit-all' state-handler to modify currently supported graphic objects in PDF page.
<edit-pageobjects:path-objects-dropdown>:

A dropdown component which is used to create different types of path objects.

# Components defined in `text-object` addon

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

A button component which is used to switch state-handler into add-text.
<edit-text-object:text-bold-style-button>:

A button to toggle the current editing text object to bold/thin style.
<edit-text-object:text-italic-style-button>:

A button to toggle the current editing text object to italic/normal style.
<edit-text-object:text-underline-button>:

A button to toggle the underline of current editting text object.
<edit-text-object:font-color-picker>:

A color-picker component which is used to set text color of current editing text object.
<edit-text-object:font-style-dropdown>:

A dropdown component which is used to set font style & size of the current editing text object.

# PDF form components

The following components are defined in import-form and export-form addons.

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

A button which is used to select a form file to import form data.
<export-form-module:export-form-dropdown>

A button which is used to export form data as a xml file.
<create-text-field-button>

A button which is used to switch the current state-handler to createTextField to create text field.
<create-signature-field-button>

A button which is used to switch the current state-handler to createSignatureField to create signature field.

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

These components are used to display all ink-signatures and create custom ink-signatures. They should be defined in the layout-template at the same time.

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

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

This button is used to display the password protection dialog to encrypt current PDF document.

Usage

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

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

This button is used to remove security of the current PDF document.

Usage

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

# Redaction components

<redaction:create-redactions-dropdown>

A button to switch current state-handler to 'create-redaction-state'
<redaction:apply-redactions-button>

A button to apply all redactions in PDF document.
<redaction:redaction-search-button>

A button to toggle search sidebar panel.

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

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

These two components show ruler and measurement information when creating distance annotation. The <viewer> component should be wrapped in <distance:ruler-container> with <slot> and <distance:measurement-popup> should be wrapped in a <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>`

If the contextmenu for the annotation cannot be found, and that annotation is not a markup, this will be used by default.

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

If the contextmenu for the annotation cannot be found, and that annotation is a markup, this will be used by default.

Original template:

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

Using

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

Original template:

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

Usage:

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

Original template:

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

Usage:

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

Original template:

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

Usage:

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

Original template:

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

Usage:

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

# `<fileattachment-contextmenu>`

Original template:

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

Original template:

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

Original template:

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

Original template:

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

Original template:

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

Original template:

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

Original template:

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

Note: The name of the contextmenu is used internally to obtain the menu components and cannot be changed!

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

A floating component that appears when you select text in a PDF page.

# `<annottext>`

A floating component that appears when mouse over an annotation.

← viewer component @controller →

# Pre-configured component

# Custom pre-configured component

# registerPreConfiguredComponent API

# Built-in pre-configured components

# <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> and <print:print-dialog>

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

# <goto-page-input>

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

# <editable-zoom-dropdown>

# <zoom-dropdown>

# Page view mode buttons

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

# <marquee-tool-button>

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

# Buttons to create annotations

# <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 object components

# Components defined in edit-graphics addon

# Components defined in path-object addon

# Components defined in text-object addon

# PDF form components

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

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

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

# Redaction components

# sidebar components

# <distance:ruler-container> and <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>` and `<print:print-dialog>`

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

# `<goto-page-input>`

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

# `<editable-zoom-dropdown>`

# `<zoom-dropdown>`

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

# `<marquee-tool-button>`

# `<fpmodule:contextmenu-item-file-property>`, `<fpmodule:file-property-button>` and `<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>`

# Components defined in `edit-graphics` addon

# Components defined in `path-object` addon

# Components defined in `text-object` addon

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

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

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

# `<distance:ruler-container>` and `<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>`