Type Alias AnnotationToolbarItem

Type Declaration

• {
      className?: string;
      disabled?: boolean;
      icon?: string;
      iconClassName?: string;
      id?: string;
      onIconPress?: (event: MouseEvent, id?: string) => void;
      onPress?: (event: MouseEvent | KeyboardEvent, id?: string) => void;
      title?: string;
      type:
          | "opacity"
          | "measurementScale"
          | "color"
          | "font"
          | "spacer"
          | "linecaps-dasharray"
          | "delete"
          | "close"
          | "back"
          | "stroke-color"
          | "fill-color"
          | "background-color"
          | "line-width"
          | "blend-mode"
          | "annotation-note"
          | "border-color"
          | "border-width"
          | "border-style"
          | "line-style"
          | "overlay-text"
          | "outline-color"
          | "apply-redactions"
          | "measurementType"
          | "crop-current"
          | "crop-all";
  }

  • OptionalclassName?: 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.

  • Optionaldisabled?: 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.

  • Optionalicon?: string

    Icon for the item.

    The icon should either be an URL, a base64 encoded image or the HTML for an inline SVG.

  • OptionaliconClassName?: string

  • Optionalid?: string

    Unique identifier for the item.

    This is useful to identify items whose type is custom. Note: It is not possible to override this option for built-in toolbar items.

    Example

    // In your JavaScript
    const item = { type: 'custom', id: 'my-button', ... }
    Copy

  • OptionalonIconPress?: (event: MouseEvent, id?: string) => void

  • OptionalonPress?: (event: MouseEvent | KeyboardEvent, id?: string) => void

    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.

  • Optionaltitle?: string

    Title for the tool items.

    It is shown on hover or when the item doesn't have an icon.

  • type:
        | "opacity"
        | "measurementScale"
        | "color"
        | "font"
        | "spacer"
        | "linecaps-dasharray"
        | "delete"
        | "close"
        | "back"
        | "stroke-color"
        | "fill-color"
        | "background-color"
        | "line-width"
        | "blend-mode"
        | "annotation-note"
        | "border-color"
        | "border-width"
        | "border-style"
        | "line-style"
        | "overlay-text"
        | "outline-color"
        | "apply-redactions"
        | "measurementType"
        | "crop-current"
        | "crop-all"

    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.

    Example

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

• {
      className?: string;
      disabled?: boolean;
      icon?: string | Node;
      iconClassName?: string;
      id: string;
      node?: Node;
      onIconPress?: (event: MouseEvent, id?: string) => void;
      onPress?: (event: MouseEvent | KeyboardEvent, id?: string) => void;
      title?: string;
      type: "custom";
  }

  • OptionalclassName?: 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.

  • Optionaldisabled?: 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.

  • Optionalicon?: string | Node

    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.

  • OptionaliconClassName?: string

  • id: string

    Unique identifier for the item.

    This is useful to identify items whose type is custom. Note: It is not possible to override this option for built-in toolbar items.

    Example

    // In your JavaScript
    const item = { type: 'custom', id: 'my-button', ... }
    Copy

  • Optionalnode?: 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).

  • OptionalonIconPress?: (event: MouseEvent, id?: string) => void

  • OptionalonPress?: (event: MouseEvent | KeyboardEvent, id?: string) => void

    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.

  • Optionaltitle?: string

    Title for the tool items.

    It is shown on hover or when the item doesn't have an icon.

  • type: "custom"