Interface: AnnotationToolbarItem

NutrientViewer.AnnotationToolbarItem

Describes the properties of a Annotation Toolbar Item.

Check out our guides for more examples.

Members



Members

(nullable) className: string

Useful to set a custom CSS class name on the parent. The class is applied based on the following logic:

  • For built-in toolbar items, theclassName is appended to the default item ones.
  • For custom items, it is applied to the parent of the node you passed.
  • For custom items, the icon's parent gets the same classname with an -Icon suffix.

For eg: If you have passed a custom item with an icon, the icon's parent will get the classname my-custom-item-Icon if you passed the classname as my-custom-item.

For default items theclassName is appended to the default item ones.

Type:
  • string

(nullable) disabled: boolean

Whether the item is disabled or not.

The property can be used to force a built in toolbar item to be disabled by setting it to true.

Type:
  • boolean

(nullable) icon: string

Icon for the custom item.

In case of mobile devices, the icon is displayed on the first level of the annotation toolbar. Once you click on the icon, the node element opens on the second level.

If you do not pass the icon, the node is present on the first level.

Type:
  • string

(nullable) id: string

Unique identifier for the item.

This is required for custom items.

Type:
  • string
Example
NutrientViewer.load({
  ...otherOptions,
  annotationToolbarItems: (annotation, { defaultAnnotationToolbarItems }) => {
    return [...defaultAnnotationToolbarItems, { type: 'custom', id: "my-button", ... }]
  }
});

Note: It is ***not*** possible to override this option for built-in toolbar items.

(nullable) node: Node

The custom tool items can define a DOM node. NutrientViewer renders this node instead of a standard tool button.

In this case the tool item is rendered inside of a container which gets the title and className attributes set.

The selected and disabled are used just to toggle the PSPDFKit-Tool-Node-active and PSPDFKit-Tool-Node-disabled class names but making the node effectively selected or disabled is up to the implementation of the item.

The onPress event is registered and fires any time the item is either clicked or tapped (on touch devices).

Type:
  • Node

(nullable) onPress: function

Callback to invoke when the item is clicked or tapped (on touch devices). It gets the event as first argument, the id of the tool item as the second for custom items.

Type:
  • function

(nullable) title: string

Title for the tool items. It is shown on hover.

Type:
  • string

type: string

required

The type of an annotation toolbar item.

It can either be custom for user defined items, or one of the built-in annotation toolbar types.

The built-in types are:

  • stroke-color
  • fill-color
  • background-color
  • opacity
  • line-width
  • line-style
  • linecaps-dasharray
  • blend-mode
  • delete
  • spacer
  • annotation-note
  • border-style
  • border-width
  • border-color
  • apply-redactions
  • color
  • font
  • outline-color
  • overlay-text
  • note-icon

Different annotations have different built-in toolbar items but all of them belong to the one mentioned above. If you pass a type that isn't supported by an annotation, you will get an error.

Note: It is not possible to override this option for built-in toolbar items.

Type:
  • string
Example
NutrientViewer.load({
  ...otherOptions,
  annotationToolbarItems: (annotation, { defaultAnnotationToolbarItems }) => {
    return [...defaultAnnotationToolbarItems, { type: 'custom', ... }]
  }
});

See also