Create new annotation button for Web Document Viewer UI
In This Topic
Here is JavaScript code that shows how to create UI button, which starts building process of mark annotation, and register new button in annotation menu in toolbar of web document viewer:
// create settings for document viewer with annotation support
var docViewerSettings = new Vintasoft.Imaging.DocumentViewer.WebDocumentViewerSettingsJS("documentViewerContainer", { annotations: true });
// get items of document viewer
var docViewerItems = docViewerSettings.get_Items();
// get the main menu of document viewer
var mainMenu = docViewerItems.getItemByRegisteredId("mainMenu");
// if main menu is found
if (mainMenu != null) {
// get items of main menu
var mainMenuItems = mainMenu.get_Items();
// add "Annotation" menu panel to the main menu
mainMenuItems.addItem("annotationsMenuPanel");
// get the "Annotations" menu
var annotationsMenuPanel = mainMenuItems.getItemByRegisteredId("annotationsMenuPanel");
// get items of "Annotations" menu
var annotationsMenuPanelItems = annotationsMenuPanel.get_Items();
/**
* Creates "Tick annotation" button that starts building process of mark annotation.
*/
function __createMarkAnnotationWithTickType() {
// create "Add Cross annotation" button that starts building of Mark annotation in annotation viewer
var addTickAnnotationButton = new Vintasoft.Imaging.DocumentViewer.UIElements.WebUiAnnotationButtonJS({
cssClass: "vsdv-annotations-addTickButton",
title: "Tick annotation",
localizationId: "addTickAnnotationButton",
}, "MarkAnnotation");
// subscribe to the "annotationCreated" of button
Vintasoft.Shared.subscribeToEvent(addTickAnnotationButton, "annotationCreated", __addTickAnnotationButton_annotationCreated);
// return button
return addTickAnnotationButton;
}
/**
* Handler of "annotationCreated" event raised by "Tick annotation" button.
*/
function __addTickAnnotationButton_annotationCreated(event, annotation) {
// specify the Tick type for annotation
annotation.set_MarkType(new Vintasoft.Imaging.Annotation.WebMarkAnnotationTypeEnumJS("Tick"));
}
// register the "Add Tick annotation" button in web UI elements factory
Vintasoft.Imaging.DocumentViewer.WebUiElementsFactoryJS.registerElement("addTickAnnotationButton", __createMarkAnnotationWithTickType);
// get "addAnnotationToolbar" panel
var addAnnotationToolbarPanel = annotationsMenuPanelItems.getItemByRegisteredId("addAnnotationToolbarPanel");
// get items (buttons) of "addAnnotationToolbar" panel
var addAnnotationToolbarPanelItems = addAnnotationToolbarPanel.get_Items();
// add "addTickAnnotation" button to the "addAnnotationToolbar" panel
addAnnotationToolbarPanelItems.addItem("addTickAnnotationButton");
}
// create the document viewer
var docViewer = new Vintasoft.Imaging.DocumentViewer.WebDocumentViewerJS(docViewerSettings);