AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

format js

Browse Source
This commit is contained in:
Jonathan Jenne 2023-11-29 08:41:11 +01:00
parent eb6d149333
commit 1e2083950f
5 changed files with 554 additions and 546 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
EnvelopeGenerator.Web/prettier.config.mjs
View File

@ -1,6 +1,6 @@
const config = { const config = {
trailingComma: "es5", trailingComma: "es5",
tabWidth: 4, tabWidth: 2,
semi: false, semi: false,
singleQuote: true, singleQuote: true,
}; };

272
EnvelopeGenerator.Web/wwwroot/js/annotation.js
View File

@ -1,164 +1,156 @@
class Annotation { class Annotation {
createAnnotations(document) { createAnnotations(document) {
const annotations = [] const annotations = []
document.elements.forEach((element) => { document.elements.forEach((element) => {
console.log('Creating annotation for element', element.id) console.log('Creating annotation for element', element.id)
const [annotation, formField] = const [annotation, formField] = this.createAnnotationFromElement(element)
this.createAnnotationFromElement(element) annotations.push(annotation)
annotations.push(annotation) annotations.push(formField)
annotations.push(formField) })
})
return annotations return annotations
} }
async deleteAnnotations(instance) { async deleteAnnotations(instance) {
let pageAnnotations = ( let pageAnnotations = (
await Promise.all( await Promise.all(
Array.from({ length: instance.totalPageCount }).map( Array.from({ length: instance.totalPageCount }).map((_, pageIndex) =>
(_, pageIndex) => instance.getAnnotations(pageIndex) instance.getAnnotations(pageIndex)
)
)
) )
.flatMap((annotations) => )
annotations.reduce( )
(acc, annotation) => acc.concat(annotation), .flatMap((annotations) =>
[] annotations.reduce((acc, annotation) => acc.concat(annotation), [])
) )
) .filter(
.filter( (annotation) =>
(annotation) => !!annotation.isSignature || annotation.description == 'FRAME'
!!annotation.isSignature || )
annotation.description == 'FRAME' //deleting all Annotations
) return await instance.delete(pageAnnotations)
//deleting all Annotations }
return await instance.delete(pageAnnotations)
}
async validateAnnotations(instance) { async validateAnnotations(instance) {
let pageAnnotations = ( let pageAnnotations = (
await Promise.all( await Promise.all(
Array.from({ length: instance.totalPageCount }).map( Array.from({ length: instance.totalPageCount }).map((_, pageIndex) =>
(_, pageIndex) => instance.getAnnotations(pageIndex) instance.getAnnotations(pageIndex)
)
)
) )
.flatMap((annotations) => )
annotations.reduce( )
(acc, annotation) => acc.concat(annotation), .flatMap((annotations) =>
[] annotations.reduce((acc, annotation) => acc.concat(annotation), [])
) )
) .map((annotation) => {
.map((annotation) => { console.log(annotation.toJS())
console.log(annotation.toJS())
return annotation
})
return true
}
createAnnotationFromElement(element) {
const id = PSPDFKit.generateInstantId()
const width = this.inchToPoint(element.width)
const height = this.inchToPoint(element.height)
const top = this.inchToPoint(element.top) - height / 2
const left = this.inchToPoint(element.left) - width / 2
const page = element.page - 1
const annotation = this.createSignatureAnnotation(
id,
width,
height,
top,
left,
page
)
const formField = new PSPDFKit.FormFields.SignatureFormField({
name: id,
annotationIds: PSPDFKit.Immutable.List([annotation.id]),
})
return [annotation, formField]
}
createSignatureAnnotation(id, width, height, top, left, pageIndex) {
const annotation = new PSPDFKit.Annotations.WidgetAnnotation({
id: id,
pageIndex: pageIndex,
formFieldName: id,
backgroundColor: PSPDFKit.Color.YELLOW,
blendMode: "multiply",
boundingBox: new PSPDFKit.Geometry.Rect({
width,
height,
top,
left,
}),
})
return annotation return annotation
} })
createImageAnnotation(boundingBox, pageIndex, imageAttachmentId) { return true
const frameAnnotation = new PSPDFKit.Annotations.ImageAnnotation({ }
pageIndex: pageIndex,
isSignature: false,
readOnly: true,
locked: true,
lockedContents: true,
contentType: 'image/png',
imageAttachmentId,
description: 'FRAME',
boundingBox: boundingBox,
});
return frameAnnotation
}
async createAnnotationFrameBlob(receiverName, width, height) { createAnnotationFromElement(element) {
const canvas = document.createElement('canvas') const id = PSPDFKit.generateInstantId()
canvas.width = width const width = this.inchToPoint(element.width)
canvas.height = height const height = this.inchToPoint(element.height)
const top = this.inchToPoint(element.top) - height / 2
const left = this.inchToPoint(element.left) - width / 2
const page = element.page - 1
const annotation = this.createSignatureAnnotation(
id,
width,
height,
top,
left,
page
)
const ctx = canvas.getContext('2d') const formField = new PSPDFKit.FormFields.SignatureFormField({
name: id,
annotationIds: PSPDFKit.Immutable.List([annotation.id]),
})
const date = new Date() return [annotation, formField]
const dateString = date.toLocaleDateString('de-DE') }
const signatureLength = 100 createSignatureAnnotation(id, width, height, top, left, pageIndex) {
const annotation = new PSPDFKit.Annotations.WidgetAnnotation({
id: id,
pageIndex: pageIndex,
formFieldName: id,
backgroundColor: PSPDFKit.Color.YELLOW,
blendMode: 'multiply',
boundingBox: new PSPDFKit.Geometry.Rect({
width,
height,
top,
left,
}),
})
ctx.beginPath() return annotation
}
ctx.moveTo(30, 10) createImageAnnotation(boundingBox, pageIndex, imageAttachmentId) {
ctx.lineTo(signatureLength, 10) const frameAnnotation = new PSPDFKit.Annotations.ImageAnnotation({
pageIndex: pageIndex,
isSignature: false,
readOnly: true,
locked: true,
lockedContents: true,
contentType: 'image/png',
imageAttachmentId,
description: 'FRAME',
boundingBox: boundingBox,
})
return frameAnnotation
}
ctx.moveTo(30, 10) async createAnnotationFrameBlob(receiverName, width, height) {
ctx.arcTo(10, 10, 10, 30, 20) const canvas = document.createElement('canvas')
canvas.width = width
canvas.height = height
ctx.moveTo(10, 30) const ctx = canvas.getContext('2d')
ctx.arcTo(10, 50, 30, 50, 20)
ctx.moveTo(30, 50) const date = new Date()
ctx.lineTo(signatureLength, 50) const dateString = date.toLocaleDateString('de-DE')
ctx.strokeStyle = 'darkblue' const signatureLength = 100
ctx.stroke()
ctx.fillStyle = 'black' ctx.beginPath()
ctx.font = '10px serif'
ctx.fillText('Signed by', 30, 10)
ctx.fillText(receiverName + ', ' + dateString, 15, 60)
return new Promise((resolve) => { ctx.moveTo(30, 10)
canvas.toBlob((blob) => { ctx.lineTo(signatureLength, 10)
const url = URL.createObjectURL(blob)
resolve(url)
})
})
}
inchToPoint(inch) { ctx.moveTo(30, 10)
return inch * 72 ctx.arcTo(10, 10, 10, 30, 20)
}
ctx.moveTo(10, 30)
ctx.arcTo(10, 50, 30, 50, 20)
ctx.moveTo(30, 50)
ctx.lineTo(signatureLength, 50)
ctx.strokeStyle = 'darkblue'
ctx.stroke()
ctx.fillStyle = 'black'
ctx.font = '10px serif'
ctx.fillText('Signed by', 30, 10)
ctx.fillText(receiverName + ', ' + dateString, 15, 60)
return new Promise((resolve) => {
canvas.toBlob((blob) => {
const url = URL.createObjectURL(blob)
resolve(url)
})
})
}
inchToPoint(inch) {
return inch * 72
}
} }

406
EnvelopeGenerator.Web/wwwroot/js/app.js
View File

@ -1,214 +1,230 @@
const ActionType = { const ActionType = {
Created: 0, Created: 0,
Saved: 1, Saved: 1,
Sent: 2, Sent: 2,
EmailSent: 3, EmailSent: 3,
Delivered: 4, Delivered: 4,
Seen: 5, Seen: 5,
Signed: 6, Signed: 6,
Rejected: 7, Rejected: 7,
} }
class App { class App {
constructor(container, envelopeKey) { constructor(container, envelopeKey) {
this.container = container this.container = container
this.envelopeKey = envelopeKey this.envelopeKey = envelopeKey
// Initialize classes // Initialize classes
console.debug('Initializing classes..') console.debug('Initializing classes..')
this.UI = new UI() this.UI = new UI()
this.Network = new Network() this.Network = new Network()
this.Annotation = new Annotation() this.Annotation = new Annotation()
this.Instance = null this.Instance = null
this.currentDocument = null this.currentDocument = null
this.currentReceiver = null this.currentReceiver = null
}
// This function will be called in the ShowEnvelope.razor page
// and will trigger loading of the Editor Interface
async init() {
// Load the envelope from the database
console.debug('Loading envelope from database..')
const envelopeResponse = await this.Network.getEnvelope(this.envelopeKey)
const envelopeError = !!envelopeResponse.error
if (envelopeError) {
return Swal.fire({
title: 'Fehler',
text: 'Umschlag konnte nicht geladen werden!',
icon: 'error',
})
} }
// This function will be called in the ShowEnvelope.razor page this.currentDocument = envelopeResponse.data.envelope.documents[0]
// and will trigger loading of the Editor Interface this.currentReceiver = envelopeResponse.data.receiver
async init() {
// Load the envelope from the database
console.debug('Loading envelope from database..')
const envelopeResponse = await this.Network.getEnvelope(this.envelopeKey)
const envelopeError = !!envelopeResponse.error
if (envelopeError) { // Load the document from the filestore
return Swal.fire({ console.debug('Loading document from filestore')
title: "Fehler", const documentResponse = await this.Network.getDocument(
text: "Umschlag konnte nicht geladen werden!", this.envelopeKey,
icon: "error" this.currentDocument.id
}) )
} const documentError = !!documentResponse.error
this.currentDocument = envelopeResponse.data.envelope.documents[0] if (documentError) {
this.currentReceiver = envelopeResponse.data.receiver console.error(documentResponse.error)
return Swal.fire({
// Load the document from the filestore title: 'Fehler',
console.debug('Loading document from filestore') text: 'Dokument konnte nicht geladen werden!',
const documentResponse = await this.Network.getDocument( icon: 'error',
this.envelopeKey, })
this.currentDocument.id
)
const documentError = !!documentResponse.error
if (documentError) {
console.error(documentResponse.error)
return Swal.fire({
title: "Fehler",
text: "Dokument konnte nicht geladen werden!",
icon: "error"
})
}
const arrayBuffer = documentResponse.data
// Load PSPDFKit
console.debug('Loading PSPDFKit..')
this.Instance = await this.UI.loadPSPDFKit(arrayBuffer, this.container)
this.UI.configurePSPDFKit(this.Instance, this.handleClick.bind(this))
this.Instance.addEventListener('annotations.load', this.handleAnnotationsLoad.bind(this))
this.Instance.addEventListener('annotations.change', this.handleAnnotationsChange.bind(this))
this.Instance.addEventListener('annotations.create', this.handleAnnotationsCreate.bind(this))
// Load annotations into PSPDFKit
console.debug('Loading annotations..')
try {
const annotations = this.Annotation.createAnnotations(
this.currentDocument
)
const createdAnnotations = await this.Instance.create(annotations)
await this.Network.postHistory(this.envelopeKey, ActionType.Seen)
} catch (e) {
console.error(e)
}
} }
handleAnnotationsLoad(loadedAnnotations) { const arrayBuffer = documentResponse.data
console.log('annotations loaded', loadedAnnotations.toJS())
// Load PSPDFKit
console.debug('Loading PSPDFKit..')
this.Instance = await this.UI.loadPSPDFKit(arrayBuffer, this.container)
this.UI.configurePSPDFKit(this.Instance, this.handleClick.bind(this))
this.Instance.addEventListener(
'annotations.load',
this.handleAnnotationsLoad.bind(this)
)
this.Instance.addEventListener(
'annotations.change',
this.handleAnnotationsChange.bind(this)
)
this.Instance.addEventListener(
'annotations.create',
this.handleAnnotationsCreate.bind(this)
)
// Load annotations into PSPDFKit
console.debug('Loading annotations..')
try {
const annotations = this.Annotation.createAnnotations(
this.currentDocument
)
const createdAnnotations = await this.Instance.create(annotations)
await this.Network.postHistory(this.envelopeKey, ActionType.Seen)
} catch (e) {
console.error(e)
}
}
handleAnnotationsLoad(loadedAnnotations) {
console.log('annotations loaded', loadedAnnotations.toJS())
}
handleAnnotationsChange() {}
async handleAnnotationsCreate(createdAnnotations) {
const annotation = createdAnnotations.toJS()[0]
const isFormField = !!annotation.formFieldName
const isSignature = !!annotation.isSignature
if (isFormField === false && isSignature === true) {
const left = annotation.boundingBox.left - 25
const top = annotation.boundingBox.top - 25
const width = 150
const height = 75
const imageUrl = await this.Annotation.createAnnotationFrameBlob(
this.currentReceiver.name,
width,
height
)
const request = await fetch(imageUrl)
const blob = await request.blob()
const imageAttachmentId = await this.Instance.createAttachment(blob)
const frameAnnotation = this.Annotation.createImageAnnotation(
new PSPDFKit.Geometry.Rect({
left: left,
top: top,
width: width,
height: height,
}),
annotation.pageIndex,
imageAttachmentId
)
this.Instance.create(frameAnnotation)
}
}
async handleClick(eventType) {
let result = false
switch (eventType) {
case 'RESET':
result = await this.handleReset(null)
if (result == true) {
Swal.fire({
title: 'Erfolg',
text: 'Dokument wurde zurückgesetzt',
icon: 'info',
})
} else {
Swal.fire({
title: 'Fehler',
text: 'Dokument konnte nicht zurückgesetzt werden!',
icon: 'error',
})
}
break
case 'FINISH':
result = await this.handleFinish(null)
if (result == true) {
// Redirect to success page after saving to database
window.location.href = `/EnvelopeKey/${this.envelopeKey}/Success`
} else {
alert('Fehler beim Abschließen des Dokuments!')
}
break
case 'REJECT':
alert('Dokument abgelent!')
}
}
async handleFinish(event) {
// Save changes before doing anything
try {
await this.Instance.save()
} catch (e) {
console.error(e)
return false
} }
handleAnnotationsChange() {} // Export annotation data and save to database
try {
const json = await this.Instance.exportInstantJSON()
const postEnvelopeResult = await this.Network.postEnvelope(
this.envelopeKey,
this.currentDocument.id,
JSON.stringify(json)
)
async handleAnnotationsCreate(createdAnnotations) { console.log(postEnvelopeResult)
const annotation = createdAnnotations.toJS()[0]
const isFormField = !!annotation.formFieldName
const isSignature = !!annotation.isSignature
if (isFormField === false && isSignature === true) {
const left = annotation.boundingBox.left - 25;
const top = annotation.boundingBox.top - 25;
const width = 150;
const height = 75;
const imageUrl = await this.Annotation.createAnnotationFrameBlob(this.currentReceiver.name, width, height);
const request = await fetch(imageUrl);
const blob = await request.blob();
const imageAttachmentId = await this.Instance.createAttachment(blob);
const frameAnnotation = this.Annotation.createImageAnnotation(new PSPDFKit.Geometry.Rect({
left: left,
top: top,
width: width,
height: height,
}), annotation.pageIndex, imageAttachmentId)
this.Instance.create(frameAnnotation);
}
}
async handleClick(eventType) {
let result = false
switch (eventType) {
case 'RESET':
result = await this.handleReset(null)
if (result == true) {
Swal.fire({
title: "Erfolg",
text: "Dokument wurde zurückgesetzt",
icon: "info"
})
} else {
Swal.fire({
title: "Fehler",
text: "Dokument konnte nicht zurückgesetzt werden!",
icon: "error"
})
}
break
case 'FINISH':
result = await this.handleFinish(null)
if (result == true) {
// Redirect to success page after saving to database
window.location.href = `/EnvelopeKey/${this.envelopeKey}/Success`
} else {
alert('Fehler beim Abschließen des Dokuments!')
}
break
case 'REJECT':
alert('Dokument abgelent!')
}
}
async handleFinish(event) {
// Save changes before doing anything
try {
await this.Instance.save()
} catch (e) {
console.error(e)
return false
}
// Export annotation data and save to database
try {
const json = await this.Instance.exportInstantJSON()
const postEnvelopeResult = await this.Network.postEnvelope(
this.envelopeKey,
this.currentDocument.id,
JSON.stringify(json)
)
console.log(postEnvelopeResult)
if (postEnvelopeResult === false) {
return false
}
} catch (e) {
console.error(e)
return false
}
return true
}
async handleReset(event) {
const result = await Swal.fire({
title: "Sind sie sicher?",
text: "Wollen Sie das Dokument und alle erstellten Signaturen zurücksetzen?",
icon: "question"
})
if (result.isConfirmed) {
const result = this.Annotation.deleteAnnotations(this.Instance)
return true
}
if (result.isDimissed) {
return true
}
if (postEnvelopeResult === false) {
return false return false
}
} catch (e) {
console.error(e)
return false
} }
return true
}
async handleReset(event) {
const result = await Swal.fire({
title: 'Sind sie sicher?',
text: 'Wollen Sie das Dokument und alle erstellten Signaturen zurücksetzen?',
icon: 'question',
})
if (result.isConfirmed) {
const result = this.Annotation.deleteAnnotations(this.Instance)
return true
}
if (result.isDimissed) {
return true
}
return false
}
} }

195
EnvelopeGenerator.Web/wwwroot/js/network.js
View File

@ -1,106 +1,111 @@
class Network { class Network {
getEnvelope(envelopeKey) {
return fetch(
`/api/envelope/${envelopeKey}`,
this.withCSRFToken({ credentials: 'include' })
).then(this.wrapJsonResponse.bind(this))
}
getEnvelope(envelopeKey) { getDocument(envelopeKey, documentId) {
return fetch(`/api/envelope/${envelopeKey}`, this.withCSRFToken({ credentials: 'include' })) return fetch(
.then(this.wrapJsonResponse.bind(this)) `/api/document/${envelopeKey}?index=${documentId}`,
this.withCSRFToken({ credentials: 'include' })
).then(this.wrapBinaryResponse.bind(this))
}
postEnvelope(envelopeKey, documentId, jsonString) {
const url = `/api/envelope/${envelopeKey}?index=${documentId}`
const options = {
credentials: 'include',
method: 'POST',
body: jsonString,
} }
getDocument(envelopeKey, documentId) { console.debug('PostEnvelope/Calling url: ' + url)
return fetch(`/api/document/${envelopeKey}?index=${documentId}`, this.withCSRFToken({ credentials: 'include' })) return fetch(url, this.withCSRFToken(options))
.then(this.wrapBinaryResponse.bind(this)) .then(this.handleResponse)
} .then((res) => {
postEnvelope(envelopeKey, documentId, jsonString) {
const url = `/api/envelope/${envelopeKey}?index=${documentId}`
const options = {
credentials: 'include',
method: 'POST',
body: jsonString,
}
console.debug('PostEnvelope/Calling url: ' + url)
return fetch(url, this.withCSRFToken(options))
.then(this.handleResponse)
.then((res) => {
if (!res.ok) {
return false
}
return true
})
}
postHistory(envelopeKey, actionType) {
const url = `/api/history/${envelopeKey}`
const data = {
actionType: actionType,
}
const options = {
credentials: 'include',
method: 'POST',
headers: {
'Content-Type': 'application/json; charset=utf-8',
},
body: JSON.stringify(data),
}
console.debug('PostHistory/Calling url: ' + url)
return fetch(url, this.withCSRFToken(options))
.then(this.handleResponse)
.then((res) => {
if (!res.ok) {
return false
}
return true
})
}
withCSRFToken(options) {
const token = document.getElementsByName(
'__RequestVerificationToken'
)[0].value
let headers = options.headers
options.headers = { ...headers, 'X-XSRF-TOKEN': token }
return options
}
async wrapJsonResponse(response) {
return await this.wrapResponse(response, async (res) => await res.json())
}
async wrapBinaryResponse(response) {
return await this.wrapResponse(response, async (res) => await res.arrayBuffer())
}
async wrapResponse(response, responseHandler) {
let wrappedResponse
if (response.ok) {
const data = await responseHandler(response)
wrappedResponse = new WrappedResponse(data, null)
} else {
const error = await response.json()
wrappedResponse = new WrappedResponse(null, error)
}
return wrappedResponse
}
handleResponse(res) {
if (!res.ok) { if (!res.ok) {
console.log(`Request failed with status ${res.status}`) return false
return res
} else {
return res
} }
return true
})
}
postHistory(envelopeKey, actionType) {
const url = `/api/history/${envelopeKey}`
const data = {
actionType: actionType,
} }
const options = {
credentials: 'include',
method: 'POST',
headers: {
'Content-Type': 'application/json; charset=utf-8',
},
body: JSON.stringify(data),
}
console.debug('PostHistory/Calling url: ' + url)
return fetch(url, this.withCSRFToken(options))
.then(this.handleResponse)
.then((res) => {
if (!res.ok) {
return false
}
return true
})
}
withCSRFToken(options) {
const token = document.getElementsByName('__RequestVerificationToken')[0]
.value
let headers = options.headers
options.headers = { ...headers, 'X-XSRF-TOKEN': token }
return options
}
async wrapJsonResponse(response) {
return await this.wrapResponse(response, async (res) => await res.json())
}
async wrapBinaryResponse(response) {
return await this.wrapResponse(
response,
async (res) => await res.arrayBuffer()
)
}
async wrapResponse(response, responseHandler) {
let wrappedResponse
if (response.ok) {
const data = await responseHandler(response)
wrappedResponse = new WrappedResponse(data, null)
} else {
const error = await response.json()
wrappedResponse = new WrappedResponse(null, error)
}
return wrappedResponse
}
handleResponse(res) {
if (!res.ok) {
console.log(`Request failed with status ${res.status}`)
return res
} else {
return res
}
}
} }
class WrappedResponse { class WrappedResponse {
constructor(data, error) { constructor(data, error) {
this.data = data this.data = data
this.error = error this.error = error
} }
} }

223
EnvelopeGenerator.Web/wwwroot/js/ui.js
View File

@ -1,134 +1,129 @@
class UI { class UI {
allowedToolbarItems = [ allowedToolbarItems = [
'sidebar-thumbnails', 'sidebar-thumbnails',
'sidebar-document-ouline', 'sidebar-document-ouline',
'sidebar-bookmarks', 'sidebar-bookmarks',
'pager', 'pager',
'pan', 'pan',
'zoom-out', 'zoom-out',
'zoom-in', 'zoom-in',
'zoom-mode', 'zoom-mode',
'spacer', 'spacer',
'search', 'search',
] ]
// Load the PSPDFKit UI by setting a target element as the container to render in // 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. // and a arraybuffer which represents the document that should be displayed.
loadPSPDFKit(arrayBuffer, container) { loadPSPDFKit(arrayBuffer, container) {
return PSPDFKit.load({ return PSPDFKit.load({
styleSheets: ['/css/site.css'], styleSheets: ['/css/site.css'],
container: container, container: container,
document: arrayBuffer, document: arrayBuffer,
annotationPresets: this.getPresets(), annotationPresets: this.getPresets(),
electronicSignatures: { electronicSignatures: {
creationModes: ['DRAW', 'TYPE'], creationModes: ['DRAW', 'TYPE'],
}, },
initialViewState: new PSPDFKit.ViewState({ initialViewState: new PSPDFKit.ViewState({
sidebarMode: PSPDFKit.SidebarMode.THUMBNAILS, sidebarMode: PSPDFKit.SidebarMode.THUMBNAILS,
}), }),
isEditableAnnotation: function (annotation) { isEditableAnnotation: function (annotation) {
// Check if the annotation is a signature // Check if the annotation is a signature
// This will allow new signatures, but not allow edits. // This will allow new signatures, but not allow edits.
if ( if (annotation.isSignature || annotation.description == 'FRAME') {
annotation.isSignature || return false
annotation.description == 'FRAME' }
) {
return false
}
return true return true
//return !annotation.isSignature; //return !annotation.isSignature;
}, },
customRenderers: { customRenderers: {
Annotation: this.annotationRenderer Annotation: this.annotationRenderer,
} },
}) })
} }
configurePSPDFKit(instance, handler) { configurePSPDFKit(instance, handler) {
const toolbarItems = this.getToolbarItems(instance, handler) const toolbarItems = this.getToolbarItems(instance, handler)
instance.setToolbarItems(toolbarItems) instance.setToolbarItems(toolbarItems)
console.debug('PSPDFKit configured!') console.debug('PSPDFKit configured!')
} }
annotationRenderer(data) { annotationRenderer(data) {
// leave everything as is // leave everything as is
return null return null
} }
getToolbarItems(instance, handler) { getToolbarItems(instance, handler) {
const customItems = this.getCustomItems(handler) const customItems = this.getCustomItems(handler)
const defaultItems = this.getDefaultItems(instance.toolbarItems) const defaultItems = this.getDefaultItems(instance.toolbarItems)
return defaultItems.concat(customItems) return defaultItems.concat(customItems)
} }
createElementFromHTML(html) { createElementFromHTML(html) {
const el = document.createElement('div') const el = document.createElement('div')
el.innerHTML = html.trim() el.innerHTML = html.trim()
return el.firstChild return el.firstChild
} }
getCustomItems = function (callback) { getCustomItems = function (callback) {
return [ return [
{ {
type: 'custom', type: 'custom',
id: 'button-reset', id: 'button-reset',
className: 'button-reset', className: 'button-reset',
title: 'Zurücksetzen', title: 'Zurücksetzen',
onPress() { onPress() {
console.log('RESET') console.log('RESET')
callback('RESET') callback('RESET')
}, },
icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16"> icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/> <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/>
<path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/> <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/>
</svg>`, </svg>`,
}, },
{ {
type: 'custom', type: 'custom',
id: 'button-reject', id: 'button-reject',
className: 'button-reject', className: 'button-reject',
title: 'Ablehnen', title: 'Ablehnen',
onPress() { onPress() {
console.log('REJECT') console.log('REJECT')
callback('REJECT') callback('REJECT')
}, },
icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-hand-thumbs-down" viewBox="0 0 16 16"> icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-hand-thumbs-down" viewBox="0 0 16 16">
<path d="M8.864 15.674c-.956.24-1.843-.484-1.908-1.42-.072-1.05-.23-2.015-.428-2.59-.125-.36-.479-1.012-1.04-1.638-.557-.624-1.282-1.179-2.131-1.41C2.685 8.432 2 7.85 2 7V3c0-.845.682-1.464 1.448-1.546 1.07-.113 1.564-.415 2.068-.723l.048-.029c.272-.166.578-.349.97-.484C6.931.08 7.395 0 8 0h3.5c.937 0 1.599.478 1.934 1.064.164.287.254.607.254.913 0 .152-.023.312-.077.464.201.262.38.577.488.9.11.33.172.762.004 1.15.069.13.12.268.159.403.077.27.113.567.113.856 0 .289-.036.586-.113.856-.035.12-.08.244-.138.363.394.571.418 1.2.234 1.733-.206.592-.682 1.1-1.2 1.272-.847.283-1.803.276-2.516.211a9.877 9.877 0 0 1-.443-.05 9.364 9.364 0 0 1-.062 4.51c-.138.508-.55.848-1.012.964zM11.5 1H8c-.51 0-.863.068-1.14.163-.281.097-.506.229-.776.393l-.04.025c-.555.338-1.198.73-2.49.868-.333.035-.554.29-.554.55V7c0 .255.226.543.62.65 1.095.3 1.977.997 2.614 1.709.635.71 1.064 1.475 1.238 1.977.243.7.407 1.768.482 2.85.025.362.36.595.667.518l.262-.065c.16-.04.258-.144.288-.255a8.34 8.34 0 0 0-.145-4.726.5.5 0 0 1 .595-.643h.003l.014.004.058.013a8.912 8.912 0 0 0 1.036.157c.663.06 1.457.054 2.11-.163.175-.059.45-.301.57-.651.107-.308.087-.67-.266-1.021L12.793 7l.353-.354c.043-.042.105-.14.154-.315.048-.167.075-.37.075-.581 0-.211-.027-.414-.075-.581-.05-.174-.111-.273-.154-.315l-.353-.354.353-.354c.047-.047.109-.176.005-.488a2.224 2.224 0 0 0-.505-.804l-.353-.354.353-.354c.006-.005.041-.05.041-.17a.866.866 0 0 0-.121-.415C12.4 1.272 12.063 1 11.5 1"/> <path d="M8.864 15.674c-.956.24-1.843-.484-1.908-1.42-.072-1.05-.23-2.015-.428-2.59-.125-.36-.479-1.012-1.04-1.638-.557-.624-1.282-1.179-2.131-1.41C2.685 8.432 2 7.85 2 7V3c0-.845.682-1.464 1.448-1.546 1.07-.113 1.564-.415 2.068-.723l.048-.029c.272-.166.578-.349.97-.484C6.931.08 7.395 0 8 0h3.5c.937 0 1.599.478 1.934 1.064.164.287.254.607.254.913 0 .152-.023.312-.077.464.201.262.38.577.488.9.11.33.172.762.004 1.15.069.13.12.268.159.403.077.27.113.567.113.856 0 .289-.036.586-.113.856-.035.12-.08.244-.138.363.394.571.418 1.2.234 1.733-.206.592-.682 1.1-1.2 1.272-.847.283-1.803.276-2.516.211a9.877 9.877 0 0 1-.443-.05 9.364 9.364 0 0 1-.062 4.51c-.138.508-.55.848-1.012.964zM11.5 1H8c-.51 0-.863.068-1.14.163-.281.097-.506.229-.776.393l-.04.025c-.555.338-1.198.73-2.49.868-.333.035-.554.29-.554.55V7c0 .255.226.543.62.65 1.095.3 1.977.997 2.614 1.709.635.71 1.064 1.475 1.238 1.977.243.7.407 1.768.482 2.85.025.362.36.595.667.518l.262-.065c.16-.04.258-.144.288-.255a8.34 8.34 0 0 0-.145-4.726.5.5 0 0 1 .595-.643h.003l.014.004.058.013a8.912 8.912 0 0 0 1.036.157c.663.06 1.457.054 2.11-.163.175-.059.45-.301.57-.651.107-.308.087-.67-.266-1.021L12.793 7l.353-.354c.043-.042.105-.14.154-.315.048-.167.075-.37.075-.581 0-.211-.027-.414-.075-.581-.05-.174-.111-.273-.154-.315l-.353-.354.353-.354c.047-.047.109-.176.005-.488a2.224 2.224 0 0 0-.505-.804l-.353-.354.353-.354c.006-.005.041-.05.041-.17a.866.866 0 0 0-.121-.415C12.4 1.272 12.063 1 11.5 1"/>
</svg>` </svg>`,
}, },
{ {
type: 'custom', type: 'custom',
id: 'button-finish', id: 'button-finish',
className: 'button-finish', className: 'button-finish',
title: 'Abschließen', title: 'Abschließen',
onPress() { onPress() {
console.log('FINISH') console.log('FINISH')
callback('FINISH') callback('FINISH')
}, },
}, },
] ]
}
getDefaultItems(items) {
return items.filter((item) => this.allowedToolbarItems.includes(item.type))
}
getPresets() {
const annotationPresets = PSPDFKit.defaultAnnotationPresets
annotationPresets.ink = {
lineWidth: 10,
} }
getDefaultItems(items) { annotationPresets.widget = {
return items.filter((item) => readOnly: true,
this.allowedToolbarItems.includes(item.type)
)
} }
getPresets() { return annotationPresets
const annotationPresets = PSPDFKit.defaultAnnotationPresets }
annotationPresets.ink = {
lineWidth: 10,
}
annotationPresets.widget = {
readOnly: true,
}
return annotationPresets
}
} }