sharper signature frame and text
This commit is contained in:
Jonathan Jenne
@@ -1,230 +1,236 @@
|
||||
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 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.Instance = null
|
||||
this.currentDocument = null
|
||||
this.currentReceiver = null
|
||||
}
|
||||
|
||||
this.currentDocument = envelopeResponse.data.envelope.documents[0]
|
||||
this.currentReceiver = envelopeResponse.data.receiver
|
||||
// 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
|
||||
|
||||
// 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.openDocument(this.envelopeKey)
|
||||
} 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',
|
||||
})
|
||||
if (envelopeError) {
|
||||
return Swal.fire({
|
||||
title: 'Fehler',
|
||||
text: 'Umschlag konnte nicht geladen werden!',
|
||||
icon: 'error',
|
||||
})
|
||||
}
|
||||
|
||||
break
|
||||
this.currentDocument = envelopeResponse.data.envelope.documents[0]
|
||||
this.currentReceiver = envelopeResponse.data.receiver
|
||||
|
||||
case 'FINISH':
|
||||
result = await this.handleFinish(null)
|
||||
// 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 (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!')
|
||||
if (documentError) {
|
||||
console.error(documentResponse.error)
|
||||
return Swal.fire({
|
||||
title: 'Fehler',
|
||||
text: 'Dokument konnte nicht geladen werden!',
|
||||
icon: 'error',
|
||||
})
|
||||
}
|
||||
|
||||
break
|
||||
const arrayBuffer = documentResponse.data
|
||||
|
||||
case 'REJECT':
|
||||
alert('Dokument abgelent!')
|
||||
}
|
||||
}
|
||||
// Load PSPDFKit
|
||||
console.debug('Loading PSPDFKit..')
|
||||
this.Instance = await this.UI.loadPSPDFKit(arrayBuffer, this.container)
|
||||
this.UI.configurePSPDFKit(this.Instance, this.handleClick.bind(this))
|
||||
|
||||
async handleFinish(event) {
|
||||
// Save changes before doing anything
|
||||
try {
|
||||
await this.Instance.save()
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
return false
|
||||
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.openDocument(this.envelopeKey)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
|
||||
// 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)
|
||||
)
|
||||
handleAnnotationsLoad(loadedAnnotations) {
|
||||
console.log('annotations loaded', loadedAnnotations.toJS())
|
||||
}
|
||||
|
||||
console.log(postEnvelopeResult)
|
||||
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
|
||||
|
||||
console.log(createdAnnotations)
|
||||
|
||||
console.log(annotation)
|
||||
|
||||
const imageUrl = await this.Annotation.createAnnotationFrameBlob(
|
||||
this.currentReceiver.name,
|
||||
this.currentReceiver.signature,
|
||||
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
|
||||
}
|
||||
} 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
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user