449 lines
15 KiB
TypeScript
449 lines
15 KiB
TypeScript
import PSPDFKitType, { Action, AnnotationsUnion, SignatureFormField as SignatureFormFieldType } from "./index";
|
||
import { Instance, WidgetAnnotation, ToolbarItem } from "./index";
|
||
import { EnvelopeResponse, Envelope, User, Element, Document, IFunction } from "./interfaces";
|
||
|
||
declare const PSPDFKit: typeof PSPDFKitType
|
||
|
||
const { List } = PSPDFKit.Immutable;
|
||
const { Rect } = PSPDFKit.Geometry;
|
||
const { SignatureFormField } = PSPDFKit.FormFields;
|
||
const { DRAW, TYPE } = PSPDFKit.ElectronicSignatureCreationMode;
|
||
const { DISABLED } = PSPDFKit.AutoSaveMode;
|
||
|
||
enum ActionType {
|
||
Created = 0,
|
||
Saved = 1,
|
||
Sent = 2,
|
||
EmailSent = 3,
|
||
Delivered = 4,
|
||
Seen = 5,
|
||
Signed = 6,
|
||
Rejected = 7,
|
||
}
|
||
|
||
export class App {
|
||
public static Instance: Instance;
|
||
public static currentDocument: Document;
|
||
public static envelopeKey: string;
|
||
|
||
public static UI: UI;
|
||
public static Network: Network;
|
||
public static Annotation: Annotation;
|
||
|
||
// This function will be called in the ShowEnvelope.razor page
|
||
// and will trigger loading of the Editor Interface
|
||
public static async init(container: string, envelopeKey: string) {
|
||
|
||
// Initialize classes
|
||
console.debug("Initializing classes..")
|
||
App.UI = new UI();
|
||
App.Network = new Network();
|
||
App.Annotation = new Annotation();
|
||
|
||
// Load the envelope from the database
|
||
console.debug("Loading envelope from database..")
|
||
const envelopeObject: EnvelopeResponse = await App.Network.getEnvelope(envelopeKey);
|
||
|
||
console.debug(envelopeObject)
|
||
|
||
App.envelopeKey = envelopeKey;
|
||
App.currentDocument = envelopeObject.envelope.documents[0];
|
||
|
||
// Load the document from the filestore
|
||
console.debug("Loading document from filestore")
|
||
let arrayBuffer
|
||
try {
|
||
arrayBuffer = await App.Network.getDocument(envelopeKey, App.currentDocument.id);
|
||
} catch (e) {
|
||
console.error(e)
|
||
}
|
||
|
||
// Load PSPDFKit
|
||
console.debug("Loading PSPDFKit..")
|
||
App.Instance = await App.UI.loadPSPDFKit(arrayBuffer, container)
|
||
App.UI.configurePSPDFKit(this.Instance, App.handleClick)
|
||
|
||
// Load annotations into PSPDFKit
|
||
console.debug("Loading annotations..")
|
||
const annotations = App.Annotation.createAnnotations(App.currentDocument)
|
||
const createdAnnotations = await App.Instance.create(annotations)
|
||
|
||
const description = "Umschlag wurde ge<67>ffnet"
|
||
await App.Network.postHistory(App.envelopeKey, ActionType.Seen, description);
|
||
}
|
||
|
||
public static async handleClick(eventType: string) {
|
||
let result = false;
|
||
|
||
switch (eventType) {
|
||
case "RESET":
|
||
result = await App.handleReset(null)
|
||
|
||
if (result == true) {
|
||
alert("Dokument zur<75>ckgesetzt!");
|
||
} else {
|
||
alert("Fehler beim Zur<75>cksetzen des Dokuments!")
|
||
}
|
||
|
||
break;
|
||
|
||
case "FINISH":
|
||
result = await App.handleFinish(null)
|
||
|
||
if (result == true) {
|
||
// TODO: Redirect to success page
|
||
alert("Dokument erfolgreich signiert!")
|
||
} else {
|
||
alert("Fehler beim Abschlie<69>en des Dokuments!")
|
||
}
|
||
|
||
break;
|
||
}
|
||
}
|
||
|
||
public static async handleFinish(event: any): Promise<boolean> {
|
||
|
||
// Save changes before doing anything
|
||
try {
|
||
await App.Instance.save();
|
||
} catch (e) {
|
||
console.error(e);
|
||
return false;
|
||
}
|
||
|
||
// Export annotation data and save to database
|
||
try {
|
||
const json = await App.Instance.exportInstantJSON()
|
||
const postEnvelopeResult: boolean = await App.Network.postEnvelope(App.envelopeKey, App.currentDocument.id, JSON.stringify(json))
|
||
|
||
if (postEnvelopeResult === false) {
|
||
return false;
|
||
}
|
||
|
||
} catch (e) {
|
||
console.error(e);
|
||
return false;
|
||
}
|
||
|
||
// Flatten the annotations and save the document to disk
|
||
try {
|
||
const buffer = await App.Instance.exportPDF({ flatten: true });
|
||
const postDocumentResult: boolean = await App.Network.postDocument(App.envelopeKey, App.currentDocument.id, buffer);
|
||
|
||
if (postDocumentResult === false) {
|
||
return false;
|
||
}
|
||
|
||
} catch (e) {
|
||
console.error(e);
|
||
return false;
|
||
}
|
||
|
||
try {
|
||
const description = "Dokument wurde signiert"
|
||
await App.Network.postHistory(App.envelopeKey, ActionType.Signed, description);
|
||
} catch (e) {
|
||
console.error(e);
|
||
return false;
|
||
}
|
||
|
||
return true;
|
||
|
||
}
|
||
|
||
public static async handleReset(event: any): Promise<boolean> {
|
||
if (confirm("Wollen Sie das Dokument und alle erstellten Signaturen zur<75>cksetzen?")) {
|
||
const result = App.Annotation.deleteAnnotations(App.Instance)
|
||
return true;
|
||
} else {
|
||
return true;
|
||
}
|
||
}
|
||
|
||
private static async downloadDocument() {
|
||
const buffer = await App.Instance.exportPDF({ flatten: true });
|
||
const supportsDownloadAttribute = HTMLAnchorElement.prototype.hasOwnProperty("download");
|
||
const blob = new Blob([buffer], { type: "application/pdf" });
|
||
|
||
if (!supportsDownloadAttribute) {
|
||
const reader = new FileReader();
|
||
reader.onloadend = function () {
|
||
const dataUrl = reader.result;
|
||
downloadPdf(dataUrl);
|
||
};
|
||
reader.readAsDataURL(blob);
|
||
} else {
|
||
const objectUrl = window.URL.createObjectURL(blob);
|
||
downloadPdf(objectUrl);
|
||
window.URL.revokeObjectURL(objectUrl);
|
||
}
|
||
function downloadPdf(blob) {
|
||
const a = document.createElement("a");
|
||
a.href = blob;
|
||
a.style.display = "none";
|
||
a.download = "download.pdf";
|
||
a.setAttribute("download", "download.pdf");
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
}
|
||
}
|
||
}
|
||
|
||
class Annotation {
|
||
public createAnnotations(document: Document): AnnotationsUnion[] {
|
||
const annotations: any[] = [];
|
||
|
||
document.elements.forEach((element: Element) => {
|
||
console.log("Creating annotation for element", element.id)
|
||
|
||
const [annotation, formField] = this.createAnnotationFromElement(element)
|
||
annotations.push(annotation);
|
||
annotations.push(formField);
|
||
})
|
||
|
||
return annotations;
|
||
}
|
||
|
||
public async deleteAnnotations(instance: Instance): Promise<any> {
|
||
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);
|
||
//deleting all Annotations
|
||
return await instance.delete(pageAnnotations);
|
||
}
|
||
|
||
private createAnnotationFromElement(element: Element): [annotation: WidgetAnnotation, formField: SignatureFormFieldType] {
|
||
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: WidgetAnnotation = this.createSignatureAnnotation(id, width, height, top, left, page)
|
||
console.log(annotation)
|
||
|
||
const formField = new SignatureFormField({
|
||
name: id,
|
||
annotationIds: List([annotation.id])
|
||
})
|
||
console.log(formField)
|
||
|
||
return [annotation, formField]
|
||
}
|
||
|
||
private createSignatureAnnotation(id: string, width: number, height: number, top: number, left: number, pageIndex: number): WidgetAnnotation {
|
||
const annotation = new PSPDFKit.Annotations.WidgetAnnotation({
|
||
id: id,
|
||
pageIndex: pageIndex,
|
||
formFieldName: id,
|
||
boundingBox: new Rect({ width, height, top, left })
|
||
})
|
||
|
||
return annotation
|
||
}
|
||
|
||
private inchToPoint(inch: number): number {
|
||
return inch * 72;
|
||
}
|
||
}
|
||
|
||
class Network {
|
||
public getEnvelope(envelopeKey: string): Promise<any> {
|
||
return fetch(`/api/envelope/${envelopeKey}`, { credentials: "include" })
|
||
.then(res => res.json());
|
||
}
|
||
|
||
public getDocument(envelopeKey: string, documentId: number): Promise<ArrayBuffer> {
|
||
return fetch(`/api/document/${envelopeKey}?index=${documentId}`, { credentials: "include" })
|
||
.then(res => res.arrayBuffer());
|
||
}
|
||
|
||
public postDocument(envelopeKey: string, documentId: number, buffer: ArrayBuffer): Promise<any> {
|
||
const url = `/api/document/${envelopeKey}?index=${documentId}`;
|
||
const options: RequestInit = {
|
||
credentials: "include",
|
||
method: "POST",
|
||
body: buffer
|
||
}
|
||
|
||
console.debug("PostDocument/Calling url: " + url)
|
||
return fetch(url, options)
|
||
.then(this.handleResponse)
|
||
.then((res: Response) => {
|
||
if (!res.ok) {
|
||
return false;
|
||
};
|
||
return true;
|
||
});
|
||
}
|
||
|
||
public postEnvelope(envelopeKey: string, documentId: number, jsonString: string): Promise<boolean> {
|
||
const url = `/api/envelope/${envelopeKey}?index=${documentId}`;
|
||
const options: RequestInit = {
|
||
credentials: "include",
|
||
method: "POST",
|
||
body: jsonString
|
||
}
|
||
|
||
console.debug("PostEnvelope/Calling url: " + url)
|
||
return fetch(url, options)
|
||
.then(this.handleResponse)
|
||
.then((res: Response) => {
|
||
if (!res.ok) {
|
||
return false;
|
||
};
|
||
return true;
|
||
});
|
||
}
|
||
|
||
public postHistory(envelopeKey: string, actionType: ActionType, actionDescription: string): Promise<boolean> {
|
||
const url = `/api/history/${envelopeKey}`;
|
||
|
||
const data = {
|
||
actionDescription: actionDescription,
|
||
actionType: actionType.toString()
|
||
}
|
||
|
||
const options: RequestInit = {
|
||
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, options)
|
||
.then(this.handleResponse)
|
||
.then((res: Response) => {
|
||
if (!res.ok) {
|
||
return false;
|
||
};
|
||
return true;
|
||
});
|
||
}
|
||
|
||
private handleResponse(res: Response) {
|
||
if (!res.ok) {
|
||
console.log(`Request failed with status ${res.status}`)
|
||
return res
|
||
} else {
|
||
return res
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
class UI {
|
||
public allowedToolbarItems: string[] = [
|
||
"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.
|
||
public loadPSPDFKit(arrayBuffer: ArrayBuffer, container: string): Promise<Instance> {
|
||
return PSPDFKit.load({
|
||
container: container,
|
||
document: arrayBuffer,
|
||
autoSaveMode: DISABLED,
|
||
annotationPresets: this.getPresets(),
|
||
electronicSignatures: {
|
||
creationModes: [DRAW, TYPE]
|
||
},
|
||
isEditableAnnotation: function (annotation: WidgetAnnotation) {
|
||
// Check if the annotation is a signature
|
||
// This will allow new signatures, but not allow edits.
|
||
return !annotation.isSignature;
|
||
}
|
||
})
|
||
}
|
||
|
||
public configurePSPDFKit(instance: Instance, handler: any) {
|
||
instance.addEventListener("annotations.load", (loadedAnnotations) => {
|
||
console.log("annotations loaded", loadedAnnotations.toJS());
|
||
})
|
||
|
||
instance.addEventListener("annotations.change", () => {
|
||
console.log("annotations changed")
|
||
})
|
||
|
||
instance.addEventListener("annotations.create", async (createdAnnotations) => {
|
||
console.log("annotations created");
|
||
})
|
||
|
||
const toolbarItems = this.getToolbarItems(instance, handler)
|
||
instance.setToolbarItems(toolbarItems)
|
||
|
||
console.debug("PSPDFKit configured!");
|
||
}
|
||
|
||
public getToolbarItems(instance: Instance, handler: any): ToolbarItem[] {
|
||
const customItems = this.getCustomItems(handler)
|
||
const defaultItems: Array<ToolbarItem> = this.getDefaultItems(instance.toolbarItems)
|
||
return defaultItems.concat(customItems)
|
||
}
|
||
|
||
private getCustomItems = function (callback: any) {
|
||
const customItems: ToolbarItem[] = [
|
||
{
|
||
type: "custom",
|
||
id: "button-reset",
|
||
className: "button-reset",
|
||
title: "Zur<75>cksetzen",
|
||
onPress() {
|
||
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-finish",
|
||
className: "button-finish",
|
||
title: "Abschlie<69>en",
|
||
onPress() {
|
||
callback("FINISH")
|
||
},
|
||
icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-check2-circle" viewBox="0 0 16 16">
|
||
<path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z"/>
|
||
<path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z" />
|
||
</svg>`
|
||
}
|
||
]
|
||
return customItems
|
||
}
|
||
|
||
private getDefaultItems(items: ToolbarItem[]): ToolbarItem[] {
|
||
return items.filter((item) => this.allowedToolbarItems.includes(item.type))
|
||
}
|
||
|
||
private getPresets() {
|
||
const annotationPresets = PSPDFKit.defaultAnnotationPresets;
|
||
annotationPresets.ink = {
|
||
lineWidth: 10
|
||
};
|
||
|
||
annotationPresets.widget = {
|
||
readOnly: true
|
||
}
|
||
|
||
return annotationPresets;
|
||
}
|
||
} |