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 = {
trailingComma: "es5",
tabWidth: 4,
tabWidth: 2,
semi: false,
singleQuote: true,
};

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

@ -1,164 +1,156 @@
class Annotation {
createAnnotations(document) {
const annotations = []
createAnnotations(document) {
const annotations = []
document.elements.forEach((element) => {
console.log('Creating annotation for element', element.id)
document.elements.forEach((element) => {
console.log('Creating annotation for element', element.id)
const [annotation, formField] =
this.createAnnotationFromElement(element)
annotations.push(annotation)
annotations.push(formField)
})
const [annotation, formField] = this.createAnnotationFromElement(element)
annotations.push(annotation)
annotations.push(formField)
})
return annotations
}
return annotations
}
async deleteAnnotations(instance) {
let pageAnnotations = (
await Promise.all(
Array.from({ length: instance.totalPageCount }).map(
(_, pageIndex) => instance.getAnnotations(pageIndex)
)
)
async deleteAnnotations(instance) {
let pageAnnotations = (
await Promise.all(
Array.from({ length: instance.totalPageCount }).map((_, pageIndex) =>
instance.getAnnotations(pageIndex)
)
.flatMap((annotations) =>
annotations.reduce(
(acc, annotation) => acc.concat(annotation),
[]
)
)
.filter(
(annotation) =>
!!annotation.isSignature ||
annotation.description == 'FRAME'
)
//deleting all Annotations
return await instance.delete(pageAnnotations)
}
)
)
.flatMap((annotations) =>
annotations.reduce((acc, annotation) => acc.concat(annotation), [])
)
.filter(
(annotation) =>
!!annotation.isSignature || annotation.description == 'FRAME'
)
//deleting all Annotations
return await instance.delete(pageAnnotations)
}
async validateAnnotations(instance) {
let pageAnnotations = (
await Promise.all(
Array.from({ length: instance.totalPageCount }).map(
(_, pageIndex) => instance.getAnnotations(pageIndex)
)
)
async validateAnnotations(instance) {
let pageAnnotations = (
await Promise.all(
Array.from({ length: instance.totalPageCount }).map((_, pageIndex) =>
instance.getAnnotations(pageIndex)
)
.flatMap((annotations) =>
annotations.reduce(
(acc, annotation) => acc.concat(annotation),
[]
)
)
.map((annotation) => {
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,
}),
})
)
)
.flatMap((annotations) =>
annotations.reduce((acc, annotation) => acc.concat(annotation), [])
)
.map((annotation) => {
console.log(annotation.toJS())
return annotation
}
})
createImageAnnotation(boundingBox, pageIndex, imageAttachmentId) {
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
}
return true
}
async createAnnotationFrameBlob(receiverName, width, height) {
const canvas = document.createElement('canvas')
canvas.width = width
canvas.height = height
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 ctx = canvas.getContext('2d')
const formField = new PSPDFKit.FormFields.SignatureFormField({
name: id,
annotationIds: PSPDFKit.Immutable.List([annotation.id]),
})
const date = new Date()
const dateString = date.toLocaleDateString('de-DE')
return [annotation, formField]
}
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)
ctx.lineTo(signatureLength, 10)
createImageAnnotation(boundingBox, pageIndex, imageAttachmentId) {
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)
ctx.arcTo(10, 10, 10, 30, 20)
async createAnnotationFrameBlob(receiverName, width, height) {
const canvas = document.createElement('canvas')
canvas.width = width
canvas.height = height
ctx.moveTo(10, 30)
ctx.arcTo(10, 50, 30, 50, 20)
const ctx = canvas.getContext('2d')
ctx.moveTo(30, 50)
ctx.lineTo(signatureLength, 50)
const date = new Date()
const dateString = date.toLocaleDateString('de-DE')
ctx.strokeStyle = 'darkblue'
ctx.stroke()
const signatureLength = 100
ctx.fillStyle = 'black'
ctx.font = '10px serif'
ctx.fillText('Signed by', 30, 10)
ctx.fillText(receiverName + ', ' + dateString, 15, 60)
ctx.beginPath()
return new Promise((resolve) => {
canvas.toBlob((blob) => {
const url = URL.createObjectURL(blob)
resolve(url)
})
})
}
ctx.moveTo(30, 10)
ctx.lineTo(signatureLength, 10)
inchToPoint(inch) {
return inch * 72
}
ctx.moveTo(30, 10)
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 = {
Created: 0,
Saved: 1,
Sent: 2,
EmailSent: 3,
Delivered: 4,
Seen: 5,
Signed: 6,
Rejected: 7,
Created: 0,
Saved: 1,
Sent: 2,
EmailSent: 3,
Delivered: 4,
Seen: 5,
Signed: 6,
Rejected: 7,
}
class App {
constructor(container, envelopeKey) {
this.container = container
this.envelopeKey = envelopeKey
constructor(container, envelopeKey) {
this.container = container
this.envelopeKey = envelopeKey
// Initialize classes
console.debug('Initializing classes..')
this.UI = new UI()
this.Network = new Network()
this.Annotation = new Annotation()
// Initialize classes
console.debug('Initializing classes..')
this.UI = new UI()
this.Network = new Network()
this.Annotation = new Annotation()
this.Instance = null
this.currentDocument = null
this.currentReceiver = null
this.Instance = null
this.currentDocument = 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
// 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
this.currentDocument = envelopeResponse.data.envelope.documents[0]
this.currentReceiver = envelopeResponse.data.receiver
if (envelopeError) {
return Swal.fire({
title: "Fehler",
text: "Umschlag konnte nicht geladen werden!",
icon: "error"
})
}
// Load the document from the filestore
console.debug('Loading document from filestore')
const documentResponse = await this.Network.getDocument(
this.envelopeKey,
this.currentDocument.id
)
const documentError = !!documentResponse.error
this.currentDocument = envelopeResponse.data.envelope.documents[0]
this.currentReceiver = envelopeResponse.data.receiver
// Load the document from the filestore
console.debug('Loading document from filestore')
const documentResponse = await this.Network.getDocument(
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)
}
if (documentError) {
console.error(documentResponse.error)
return Swal.fire({
title: 'Fehler',
text: 'Dokument konnte nicht geladen werden!',
icon: 'error',
})
}
handleAnnotationsLoad(loadedAnnotations) {
console.log('annotations loaded', loadedAnnotations.toJS())
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) {
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) {
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
}
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
}
return false
}
}

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

@ -1,106 +1,111 @@
class Network {
getEnvelope(envelopeKey) {
return fetch(
`/api/envelope/${envelopeKey}`,
this.withCSRFToken({ credentials: 'include' })
).then(this.wrapJsonResponse.bind(this))
}
getEnvelope(envelopeKey) {
return fetch(`/api/envelope/${envelopeKey}`, this.withCSRFToken({ credentials: 'include' }))
.then(this.wrapJsonResponse.bind(this))
getDocument(envelopeKey, documentId) {
return fetch(
`/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) {
return fetch(`/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,
}
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) {
console.debug('PostEnvelope/Calling url: ' + url)
return fetch(url, this.withCSRFToken(options))
.then(this.handleResponse)
.then((res) => {
if (!res.ok) {
console.log(`Request failed with status ${res.status}`)
return res
} else {
return res
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) {
console.log(`Request failed with status ${res.status}`)
return res
} else {
return res
}
}
}
class WrappedResponse {
constructor(data, error) {
this.data = data
this.error = error
}
}
constructor(data, error) {
this.data = data
this.error = error
}
}

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

@ -1,134 +1,129 @@
class UI {
allowedToolbarItems = [
'sidebar-thumbnails',
'sidebar-document-ouline',
'sidebar-bookmarks',
'pager',
'pan',
'zoom-out',
'zoom-in',
'zoom-mode',
'spacer',
'search',
]
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.
if (
annotation.isSignature ||
annotation.description == 'FRAME'
) {
return false
}
// 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.
if (annotation.isSignature || annotation.description == 'FRAME') {
return false
}
return true
return true
//return !annotation.isSignature;
},
customRenderers: {
Annotation: this.annotationRenderer
}
})
}
//return !annotation.isSignature;
},
customRenderers: {
Annotation: this.annotationRenderer,
},
})
}
configurePSPDFKit(instance, handler) {
const toolbarItems = this.getToolbarItems(instance, handler)
instance.setToolbarItems(toolbarItems)
configurePSPDFKit(instance, handler) {
const toolbarItems = this.getToolbarItems(instance, handler)
instance.setToolbarItems(toolbarItems)
console.debug('PSPDFKit configured!')
}
console.debug('PSPDFKit configured!')
}
annotationRenderer(data) {
// leave everything as is
return null
}
annotationRenderer(data) {
// leave everything as is
return null
}
getToolbarItems(instance, handler) {
const customItems = this.getCustomItems(handler)
const defaultItems = this.getDefaultItems(instance.toolbarItems)
return defaultItems.concat(customItems)
}
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()
createElementFromHTML(html) {
const el = document.createElement('div')
el.innerHTML = html.trim()
return el.firstChild
}
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: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
getCustomItems = function (callback) {
return [
{
type: 'custom',
id: 'button-reset',
className: 'button-reset',
title: 'Zurücksetzen',
onPress() {
console.log('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">
<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"/>
</svg>`,
},
{
type: 'custom',
id: 'button-reject',
className: 'button-reject',
title: 'Ablehnen',
onPress() {
console.log('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">
},
{
type: 'custom',
id: 'button-reject',
className: 'button-reject',
title: 'Ablehnen',
onPress() {
console.log('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">
<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>`
},
{
type: 'custom',
id: 'button-finish',
className: 'button-finish',
title: 'Abschließen',
onPress() {
console.log('FINISH')
callback('FINISH')
},
},
]
</svg>`,
},
{
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,
}
getDefaultItems(items) {
return items.filter((item) =>
this.allowedToolbarItems.includes(item.type)
)
annotationPresets.widget = {
readOnly: true,
}
getPresets() {
const annotationPresets = PSPDFKit.defaultAnnotationPresets
annotationPresets.ink = {
lineWidth: 10,
}
annotationPresets.widget = {
readOnly: true,
}
return annotationPresets
}
return annotationPresets
}
}