WebViewer UI

The vite.ui-hmr.config.js file is a specialized Vite configuration designed to enable Hot Module Replacement (HMR) and Fast Refresh for the WebViewer UI development environment. It includes several custom plugins to handle legacy code patterns and specific UI requirements:

• Theme Support: themeSCSSPlugin handles themed SCSS via query parameters.
• SVG Inlining: svgInlinePlugin automatically inlines .svg files as raw strings, stripping width and height attributes.
• Legacy Compatibility:
  • cjsToEsmPlugin: Converts specific CommonJS patterns (like require('redux-logger')) to ESM.
  • stripReactHotLoaderPlugin: Removes react-hot-loader wrappers to allow Vite's native Fast Refresh to work.
• Icon Handling: iconGlobPlugin transforms dynamic require() calls for icons into Vite import.meta.glob calls for eager loading.
• Node Polyfills: Provides process, buffer, util, and stream globals.
• Emotion Integration: Configures React to use @emotion/react as the JSX runtime.

The WebViewer UI API is initialized via a default export function that takes a Redux store, an instanceDocViewerKey, an instanceI18n object, and an instanceRootNode. This function populates the window object with two primary namespaces: Core and UI.

• Core: Contains access to WebViewer Core functionalities like Tools, Annotations, Actions, and the documentViewer.
• UI: Contains the high-level API for controlling the user interface, panels, tools, and settings.

Note that the documentViewer is retrieved using the provided instanceDocViewerKey or a default key from the store state.

// The API is initialized by calling the default export
// with the required WebViewer UI dependencies.
import initializeUI from './src/apis/index.js';

initializeUI(store, instanceDocViewerKey, instanceI18n, instanceRootNode);

// After initialization, you can access the APIs via the window object:
// window.Core -> Core functionalities
// window.UI -> UI control functionalities

When instantiating GroupedItems, you can provide the following properties in the configuration object:

The Flyout component is used to create flyout menus in the WebViewer UI. You can instantiate it with a unique dataElement and an array of items. Items can be simple objects with labels and click handlers, or they can be nested to create sub-menus.

FlyoutItem Configuration

Each item in the items array can be one of the following:

• An object defining the item properties (see flyoutItemBase).
• A string, which acts as a divider.
• A React element.
• An object with a type that matches a valid FLYOUT_ITEM_TYPES value.

flyoutItemBase properties:

• label (string, optional): The text displayed for the item.
• onClick (function, optional): The callback triggered when the item is clicked.
• icon (string, optional): A path to an image, base64 data, or a filename of an .svg from the WebViewer icons folder (e.g., icon-save to use icon-save.svg).
• render (string or function, optional): A preset component name (e.g., 'stylePanel') or a custom render function.
• children (Array, optional): An array of FlyoutItem objects to create a nested sub-menu.
• dataElement (string, optional): A unique identifier for the item.

const flyout = new UI.Components.Flyout({
  dataElement: 'exampleFlyout',
  label: 'Flyout',
});

flyout.setItems([
  {
    label: 'Item 1',
    onClick: () => {
      console.log('Item 1 clicked');
    },
  },
  {
    label: 'Sub-menu',
    children: [
      {
        label: 'Nested Item',
        onClick: () => console.log('Nested clicked'),
      }
    ]
  },
  'divider-string' // Acts as a divider
]);