diff --git a/EnvelopeGenerator.Web/prettier.config.mjs b/EnvelopeGenerator.Web/prettier.config.mjs index 4b099337..2914e005 100644 --- a/EnvelopeGenerator.Web/prettier.config.mjs +++ b/EnvelopeGenerator.Web/prettier.config.mjs @@ -1,6 +1,6 @@ const config = { trailingComma: "es5", - tabWidth: 4, + tabWidth: 2, semi: false, singleQuote: true, }; diff --git a/EnvelopeGenerator.Web/wwwroot/js/annotation.js b/EnvelopeGenerator.Web/wwwroot/js/annotation.js index e2c21ba4..e31ff26e 100644 --- a/EnvelopeGenerator.Web/wwwroot/js/annotation.js +++ b/EnvelopeGenerator.Web/wwwroot/js/annotation.js @@ -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 + } } diff --git a/EnvelopeGenerator.Web/wwwroot/js/app.js b/EnvelopeGenerator.Web/wwwroot/js/app.js index 55b726a0..b6e8a447 100644 --- a/EnvelopeGenerator.Web/wwwroot/js/app.js +++ b/EnvelopeGenerator.Web/wwwroot/js/app.js @@ -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 + } } diff --git a/EnvelopeGenerator.Web/wwwroot/js/network.js b/EnvelopeGenerator.Web/wwwroot/js/network.js index 7db547d7..dd0cd609 100644 --- a/EnvelopeGenerator.Web/wwwroot/js/network.js +++ b/EnvelopeGenerator.Web/wwwroot/js/network.js @@ -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 - } -} \ No newline at end of file + constructor(data, error) { + this.data = data + this.error = error + } +} diff --git a/EnvelopeGenerator.Web/wwwroot/js/ui.js b/EnvelopeGenerator.Web/wwwroot/js/ui.js index 192c0441..efaba1f6 100644 --- a/EnvelopeGenerator.Web/wwwroot/js/ui.js +++ b/EnvelopeGenerator.Web/wwwroot/js/ui.js @@ -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: ` + 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-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') - }, - }, - ] + `, + }, + { + 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 + } }