97 lines
3.3 KiB
TypeScript
97 lines
3.3 KiB
TypeScript
//import PSPDFKit, { Instance } from 'index.d.ts';
|
|
import PSPDFKitType from "./index";
|
|
import { Instance, WidgetAnnotation } from "./index";
|
|
declare const PSPDFKit: typeof PSPDFKitType
|
|
|
|
const { List } = PSPDFKit.Immutable;
|
|
const { Rect } = PSPDFKit.Geometry;
|
|
const { SignatureFormField } = PSPDFKit.FormFields;
|
|
const { DRAW, TYPE } = PSPDFKit.ElectronicSignatureCreationMode;
|
|
|
|
|
|
export class App {
|
|
// This function will be called in the ShowEnvelope.razor page
|
|
// and will trigger loading of the Editor Interface
|
|
public static async loadPDFFromUrl (container: string, documentId: number) {
|
|
console.debug("Loading PSPDFKit..");
|
|
|
|
const arrayBuffer = await App.loadDocument(`/api/download/${documentId}`)
|
|
const instance = await App.loadPSPDFKit(arrayBuffer, container)
|
|
App.configurePSPDFKit(instance)
|
|
|
|
console.debug("PSPDFKit configured!")
|
|
|
|
const id = PSPDFKit.generateInstantId()
|
|
const annotation: WidgetAnnotation = App.createSignatureAnnotation(id, 150, 50, 50, 50, 0)
|
|
|
|
const formField = new SignatureFormField({
|
|
name: id,
|
|
annotationIds: List([annotation.id])
|
|
})
|
|
|
|
console.debug("Annotation created.")
|
|
|
|
const [createdAnnotation] = await instance.create([annotation, formField])
|
|
|
|
console.debug(createdAnnotation)
|
|
}
|
|
|
|
// Makes a call to the supplied url and fetches the binary response as an array buffer
|
|
private static loadDocument(url: string): Promise<ArrayBuffer> {
|
|
return fetch(url, { credentials: "include" })
|
|
.then(res => res.arrayBuffer())
|
|
}
|
|
|
|
// 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.
|
|
private static loadPSPDFKit(arrayBuffer: ArrayBuffer, container: string): Promise<Instance> {
|
|
const annotationPresets = PSPDFKit.defaultAnnotationPresets;
|
|
console.log(annotationPresets)
|
|
annotationPresets.ink = {
|
|
lineWidth: 10
|
|
};
|
|
|
|
return PSPDFKit.load({
|
|
container: container,
|
|
document: arrayBuffer,
|
|
annotationPresets,
|
|
electronicSignatures: {
|
|
creationModes: [TYPE, DRAW]
|
|
}
|
|
})
|
|
}
|
|
|
|
private static configurePSPDFKit(instance: Instance) {
|
|
instance.addEventListener("annotations.load", (loadedAnnotations) => {
|
|
console.log("annotations loaded", loadedAnnotations.toJS());
|
|
})
|
|
|
|
instance.addEventListener("annotations.change", () => {
|
|
console.log("annotations changed")
|
|
})
|
|
|
|
instance.addEventListener("annotations.create", (createdAnnotations) => {
|
|
console.log("annotations created", createdAnnotations.toJS());
|
|
})
|
|
}
|
|
|
|
|
|
private static createSignatureAnnotation(id: string, x: number, y: number, top: number, left: number, pageIndex: number): WidgetAnnotation {
|
|
const annotation = new PSPDFKit.Annotations.WidgetAnnotation({
|
|
id: id,
|
|
pageIndex: pageIndex,
|
|
formFieldName: id,
|
|
boundingBox: new Rect({
|
|
width: x,
|
|
height: y,
|
|
top: top,
|
|
left: left
|
|
})
|
|
})
|
|
|
|
return annotation
|
|
}
|
|
|
|
}
|
|
|