New APIs

WebViewer UI (beta) provides new APIs for common functions.

Disabling text selection

$(viewerElement).on('documentLoaded', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setTextSelection(false);
});
$(viewerElement).on('documentLoaded', () => {
  const viewerInstance = viewer.getInstance();
  const searchValue = 'test';
  const caseSensitive = false;
  const wholeWord = true;
  const wildcard = false;
  const regex = false;
  viewerInstance.executeSearch(searchValue, { caseSensitive, wholeWord, wildcard, regex });
});
const searchListener = (searchValue, { caseSensitive, wholeWord, wildcard, regex }, results) => {
  // typeof searchValue === string
  // typeof caseSensitive === boolean
  // typeof wholeWord === boolean
  // typeof wildcard === boolean
  // typeof regex === boolean
  // typeof results === array
  // triggered by ui or programmatic search
};

$(viewerElement).on('documentLoaded', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.addSearchListener(searchListener);
});

$(viewerElement).on('documentUnloaded', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.removeSearchListener(searchListener);
});

Adding custom button to the top tool bar

$(viewerElement).on('ready', () => {
  viewerInstance.setToolBarButtons((toolBarButtons) => {
    toolBarButtons.push({
      name: 'GoogleButton',
      img: 'https://www.google.ca/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
      onClick: () => {
        window.open("https://www.google.ca");
      }
    });
    toolBarButtons.reverse();
    toolBarButtons.push({
      name: 'TestButton',
      label: 'Test',
      onClick: () => {
        alert('Test');
      }
    });
    return toolBarButtons;
  });
});
'spacer' in the toolBarButtons array renders an empty div with 'flex: 1' that fills up any remaining space.

Adding custom tool to the annotation tool bar

To create a new annotation and tool, refer to creating custom annotations.

Once the new annotation and its tool is created, you can use the new APIs to add to the tool bar with custom icon.

// create your own custom tool
const CustomTool = function() {
  // ...
};

const name = 'MyCustomTool';
const tool = new CustomTool(viewerInstance.docViewer, name);

$(viewerElement).on('ready', () => {
  // add to tool mode map
  viewerInstance.addToolMode(tool, name);

  // add to the tool bar with icon and link it to the custom tool
  viewerInstance.addCustomAnnotationTool({
    name,
    img: 'path/to/image.png' // or dataURL
  });
});