This object defines the properties of a custom annotation renderer.
It's returned from a PSPDFKit.CustomRenderers.AnnotationCustomRendererCallback function.
Note that when append=false
(which is the default value for the
property), the default appearance of the annotation is not rendered,
including the pointer event listeners.
This means that, if you want you custom content to select the annotation when clicked, you'll have to add some logic to support it.
You can add an event listener to your node in your custom renderer code, and
also supply a callback to the onDisappear
property to remove
the listener:
PSPDFKit.load({
customRenderers: {
Annotation: ({ annotation }) => {
function selectAnnotation(event) {
event.stopImmediatePropagation();
instance.setSelectedAnnotation(annotation.id);
}
const node = document.createElement("div").appendChild(document.createTextNode("Custom rendered!"));
node.addEventListener("pointerdown", selectAnnotation, {
capture: true
});
return {
node,
append: false,
onDisappear: () => {
node.removeEventListener("pointerdown", selectAnnotation, {
capture: true
});
}
};
}
}
});
The onDisappear
callback function will be run whenever the
returned node reference changes, and when the custom rendered component
unmounts (is removed from the DOM). With this in mind, and in order to save
the browser some unnecessary work, you could rewrite the previous example as
follows:
let node
PSPDFKit.load({
customRenderers: {
Annotation: ({ annotation }) => {
function selectAnnotation(event) {
event.stopImmediatePropagation();
instance.setSelectedAnnotation(annotation.id);
}
if (!node) {
node = document.createElement("div").appendChild(document.createTextNode("Custom rendered!"));
node.addEventListener("pointerdown", selectAnnotation, {
capture: true
});
}
return {
node,
append: false,
onDisappear: () => {
node.removeEventListener("pointerdown", selectAnnotation, {
capture: true
});
}
};
}
}
});
In this example the onDisappear()
reference changes on every
call, but since the node
reference doesn't change,
onDisappear()
will only be called when the component unmounts.
Note that the component does not only unmount when the page it's included is scrolled some pages out, but also, for example, when the annotation it's associated with is selected in the UI, in which case the component is unmounted and mounted again.
Properties:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
node |
Node | DOM node to be rendered. |
||
append |
boolean | <nullable> |
false |
Whether the DOM node should be appended after the annotation, or replace it. |
noZoom |
boolean | <nullable> |
false |
Whether to automatically zoom the DOM node as the current PSPDFKit.ViewState#zoomLevel changes. |
onDisappear |
function | <nullable> |
Callback to be called whenever the custom DOM node is unmounted. |