class UI {
allowedToolbarItems = [
'sidebar-thumbnails',
'sidebar-document-ouline',
'sidebar-bookmarks',
'pager',
'pan',
'zoom-out',
'zoom-in',
'zoom-mode',
'spacer',
'search',
]
// Load the PSPDFKit UI by setting a target element as the container to render in
// and a arraybuffer which represents the document that should be displayed.
loadPSPDFKit(arrayBuffer, container) {
return PSPDFKit.load({
styleSheets: ['/css/site.css'],
container: container,
document: arrayBuffer,
annotationPresets: this.getPresets(),
electronicSignatures: {
creationModes: ['DRAW', 'TYPE'],
},
initialViewState: new PSPDFKit.ViewState({
sidebarMode: PSPDFKit.SidebarMode.THUMBNAILS,
}),
isEditableAnnotation: function (annotation) {
// Check if the annotation is a signature
// This will allow new signatures, but not allow edits.
console.log(annotation.isSignature, annotation.description)
if (
annotation.isSignature ||
annotation.description == 'FRAME'
) {
return false
}
return true
//return !annotation.isSignature;
},
customRenderers: {
Annotation: this.annotationRenderer
}
})
}
configurePSPDFKit(instance, handler) {
const toolbarItems = this.getToolbarItems(instance, handler)
instance.setToolbarItems(toolbarItems)
console.debug('PSPDFKit configured!')
}
annotationRenderer(data) {
console.log(data)
console.log(data.annotation.toJS())
// leave everything as is
return null
}
getToolbarItems(instance, handler) {
const customItems = this.getCustomItems(handler)
const defaultItems = this.getDefaultItems(instance.toolbarItems)
return defaultItems.concat(customItems)
}
createElementFromHTML(html) {
const el = document.createElement('div')
el.innerHTML = html.trim()
return el.firstChild
}
getCustomItems = function (callback) {
return [
{
type: 'custom',
id: 'button-reset',
className: 'button-reset',
title: 'Zurücksetzen',
onPress() {
console.log('RESET')
callback('RESET')
},
icon: ``,
},
{
type: 'custom',
id: 'button-reject',
className: 'button-reject',
title: 'Ablehnen',
onPress() {
console.log('REJECT')
callback('REJECT')
},
icon: ``
},
{
type: 'custom',
id: 'button-finish',
className: 'button-finish',
title: 'Abschließen',
onPress() {
console.log('FINISH')
callback('FINISH')
},
},
]
}
getDefaultItems(items) {
return items.filter((item) =>
this.allowedToolbarItems.includes(item.type)
)
}
getPresets() {
const annotationPresets = PSPDFKit.defaultAnnotationPresets
annotationPresets.ink = {
lineWidth: 10,
}
annotationPresets.widget = {
readOnly: true,
}
return annotationPresets
}
}