Class: CustomOverlayItem

PSPDFKit.CustomOverlayItem

new PSPDFKit.CustomOverlayItem()

Custom Item to render in a page.

This record is used to persist the information for a Custom Overlay Item.

Custom Overlay Items are user defined DOM Nodes that are rendered in a page at a given position.

Example

Creating an image and rendering it as Custom Overlay Item

let img = document.createElement("img");
img.src = "https://example.com/logo.png";

const item = new PSPDFKit.CustomOverlayItem({
  id: "logo-item",
  node: img,
  pageIndex: 0,
  position: new PSPDFKit.Geometry.Point({ x: 100, y: 100 }),
  onAppear() {
    console.log('rendered!');
  }
});

instance.setCustomOverlayItem(item);

Extends

  • Immutable.Record

Members



Members

disableAutoZoom: boolean

Whether the node should not be zoomed (scaled) with the page.

Custom zoom handling makes sense when you want to display rasterized images for example, and you need to manually re-render them (maybe when using <canvas> images or want to display images at different resolutions).

To track zoom changes and manually update overlay items you can subscribe to the viewState.zoom.change event.

By default items will zoom with the page using a CSS based scale transformation.

Type:
  • boolean
Default Value:
  • false

id: string

A unique identifier to describe the custom overlay item. New IDs should be generated by the user and should be unique.

Type:
  • string

noRotate: boolean

Whether the node should not be rotated with the page.

Type:
  • boolean
Default Value:
  • false

node: Node

A reference to the DOM Node to render in the page.

Type:
  • Node

(nullable) onAppear: function

Optional callback to invoke when the custom item is created and appears in the viewport.

Type:
  • function

(nullable) onDisappear: function

Optional callback to invoke when the custom item is removed.

Type:
  • function

pageIndex: number

The page index on which the custom item is placed. It's important to notice that a custom item can only ever be on one page.

Type:
  • number

Position of this custom item in the page. The coordinates are in the PDF page space with the origin being on the top left.

Type:

See also