AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(annotation): Die klassenbasierte Struktur wurde entfernt und die Methode createSignature in die Methode createAnnotations integriert.

Browse Source
This commit is contained in:
Developer 02 2025-03-26 10:15:05 +01:00
parent c45e6875d0
commit fb0022bd2c
3 changed files with 128 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,32 +1,8 @@
class Annotation { 
static async createAnnotations(document, instance) { async function createAnnotations(document, instance) {
const signatures = [] const signatures = [];
for(var element of document.elements) { for(var element of document.elements) {
const [annotation, formField, annotation_date, formFieldDate, annotation_city, formFieldCity, annotation_position, formFieldPosition, annotation_date_label, formFieldDateLabel, annotation_city_label, formFieldCityLabel, annotation_position_label, formFieldPositionLabel] = await Annotation.createSignature(element)
signatures.push(annotation)
signatures.push(formField)
signatures.push(annotation_date)
signatures.push(formFieldDate)
signatures.push(annotation_city)
signatures.push(formFieldCity)
signatures.push(annotation_position)
signatures.push(formFieldPosition)
signatures.push(annotation_date_label)
signatures.push(formFieldDateLabel)
signatures.push(annotation_city_label)
signatures.push(formFieldCityLabel)
signatures.push(annotation_position_label)
signatures.push(formFieldPositionLabel)
}
await instance.create(signatures)
}
static async createSignature(element) {
const annotParams = await getAnnotationParams(element.left, element.top); const annotParams = await getAnnotationParams(element.left, element.top);
const page = element.page - 1 const page = element.page - 1
@ -179,43 +155,29 @@
readOnly: true readOnly: true
}) })
return [annotation, formField, annotation_date, formFieldDate, annotation_city, formFieldCity, annotation_position, formFieldPosition, annotation_date_label, formFieldDateLabel, annotation_city_label, formFieldCityLabel, annotation_position_label, formFieldPositionLabel] signatures.push(annotation)
signatures.push(formField)
signatures.push(annotation_date)
signatures.push(formFieldDate)
signatures.push(annotation_city)
signatures.push(formFieldCity)
signatures.push(annotation_position)
signatures.push(formFieldPosition)
signatures.push(annotation_date_label)
signatures.push(formFieldDateLabel)
signatures.push(annotation_city_label)
signatures.push(formFieldCityLabel)
signatures.push(annotation_position_label)
signatures.push(formFieldPositionLabel)
} }
static createTextBox(element) { await instance.create(signatures);
const id = PSPDFKit.generateInstantId()
const width = Annotation.inchToPoint(element.width)
const height = Annotation.inchToPoint(element.height)
const top = Annotation.inchToPoint(element.top) - height / 2
const left = Annotation.inchToPoint(element.left) - width / 2
const page = element.page - 1
//shift
top += height + 10
const annotation = new PSPDFKit.Annotations.WidgetAnnotation({
id: id,
pageIndex: page,
formFieldName: id,
backgroundColor: PSPDFKit.Color.YELLOW,
blendMode: 'multiply',
boundingBox: new PSPDFKit.Geometry.Rect({
width,
height,
top,
left,
}),
})
const formField = new PSPDFKit.FormFields.SignatureFormField({
name: id,
annotationIds: PSPDFKit.Immutable.List([annotation.id]),
})
return [annotation, formField]
} }
static async getAnnotations(instance) { async function getAnnotations(instance) {
const array = await Promise.all( const array = await Promise.all(
Array.from({ length: instance.totalPageCount }).map((_, pageIndex) => Array.from({ length: instance.totalPageCount }).map((_, pageIndex) =>
instance.getAnnotations(pageIndex) instance.getAnnotations(pageIndex)
@ -227,15 +189,15 @@
) )
} }
static async deleteAnnotations(instance) { async function deleteAnnotations(instance) {
const allAnnotations = await Annotation.getAnnotations(instance) const allAnnotations = await getAnnotations(instance)
const pageAnnotations = allAnnotations.filter(Annotation.isSignature) const pageAnnotations = allAnnotations.filter(isSignature)
//deleting all Annotations //deleting all Annotations
return await instance.delete(pageAnnotations) return await instance.delete(pageAnnotations)
} }
static async validateAnnotations(instance) { async function validateAnnotations(instance) {
const allAnnotations = await Annotation.getAnnotations(instance) const allAnnotations = await getAnnotations(instance)
const pageAnnotations = allAnnotations const pageAnnotations = allAnnotations
.map((annotation) => { .map((annotation) => {
return annotation return annotation
@ -244,11 +206,11 @@
return true return true
} }
static isSignature(annotation) { function isSignature(annotation) {
return !!annotation.isSignature || annotation.description == 'FRAME' return !!annotation.isSignature || annotation.description == 'FRAME'
} }
static createImageAnnotation(boundingBox, pageIndex, imageAttachmentId) { function createImageAnnotation(boundingBox, pageIndex, imageAttachmentId) {
const frameAnnotation = new PSPDFKit.Annotations.ImageAnnotation({ const frameAnnotation = new PSPDFKit.Annotations.ImageAnnotation({
pageIndex: pageIndex, pageIndex: pageIndex,
isSignature: false, isSignature: false,
@ -263,7 +225,7 @@
return frameAnnotation return frameAnnotation
} }
static async createAnnotationFrameBlob(receiverName, receiverSignature, timestamp, width, height) { async function createAnnotationFrameBlob(receiverName, receiverSignature, timestamp, width, height) {
Comp.SignatureProgress.SignedCount += 1; Comp.SignatureProgress.SignedCount += 1;
const canvas = document.createElement('canvas') const canvas = document.createElement('canvas')
const scale = 4 const scale = 4
@ -317,29 +279,24 @@
}) })
} }
static inchToPoint(inch) {
return inch * 72
}
//required //required
static #requiredFieldNames = new Array() requiredFieldNames = new Array()
static markFieldAsRequired(formField) { function markFieldAsRequired(formField) {
this.#requiredFieldNames.push(formField.name) requiredFieldNames.push(formField.name)
} }
static isFieldRequired(formField) { function isFieldRequired(formField) {
return this.#requiredFieldNames.includes(formField.name) return requiredFieldNames.includes(formField.name)
} }
//city //city
static #cityFieldNames = new Array() cityFieldNames = new Array()
static markFieldAsCity(formField) { function markFieldAsCity(formField) {
this.#cityFieldNames.push(formField.name) cityFieldNames.push(formField.name)
} }
static isCityField(formField) { function isCityField(formField) {
return this.#cityFieldNames.includes(formField.name) return cityFieldNames.includes(formField.name)
}
} }

14
EnvelopeGenerator.Web/wwwroot/js/app.js
View File

@ -70,7 +70,7 @@ class App {
// Load annotations into PSPDFKit // Load annotations into PSPDFKit
try { try {
this.signatureCount = this.currentDocument.elements.length this.signatureCount = this.currentDocument.elements.length
await Annotation.createAnnotations(this.currentDocument, this.Instance) await createAnnotations(this.currentDocument, this.Instance)
const openResponse = await this.Network.openDocument(this.envelopeKey) const openResponse = await this.Network.openDocument(this.envelopeKey)
@ -109,7 +109,7 @@ class App {
const height = 75 const height = 75
const timestamp = new Date() const timestamp = new Date()
const imageUrl = await Annotation.createAnnotationFrameBlob( const imageUrl = await createAnnotationFrameBlob(
this.envelopeReceiver.name, this.envelopeReceiver.name,
this.currentReceiver.signature, this.currentReceiver.signature,
timestamp, timestamp,
@ -121,7 +121,7 @@ class App {
const blob = await request.blob() const blob = await request.blob()
const imageAttachmentId = await this.Instance.createAttachment(blob) const imageAttachmentId = await this.Instance.createAttachment(blob)
const frameAnnotation = Annotation.createImageAnnotation( const frameAnnotation = createImageAnnotation(
new PSPDFKit.Geometry.Rect({ new PSPDFKit.Geometry.Rect({
left: left, left: left,
top: top, top: top,
@ -222,7 +222,7 @@ class App {
const iFormFieldValues = await iJSON.formFieldValues; const iFormFieldValues = await iJSON.formFieldValues;
//check required //check required
const iReqFields = iFormFieldValues.filter(f => Annotation.isFieldRequired(f)) const iReqFields = iFormFieldValues.filter(f => isFieldRequired(f))
const hasEmptyReq = iReqFields.some(f => (f.value === undefined || f.value === null || f.value === "")) const hasEmptyReq = iReqFields.some(f => (f.value === undefined || f.value === null || f.value === ""))
if (hasEmptyReq) { if (hasEmptyReq) {
@ -236,7 +236,7 @@ class App {
//check city //check city
const city_regex = new RegExp("^[a-zA-Z\\u0080-\\u024F]+(?:([\\ \\-\\']|(\\.\\ ))[a-zA-Z\\u0080-\\u024F]+)*$") const city_regex = new RegExp("^[a-zA-Z\\u0080-\\u024F]+(?:([\\ \\-\\']|(\\.\\ ))[a-zA-Z\\u0080-\\u024F]+)*$")
const iCityFields = iFormFieldValues.filter(f => Annotation.isCityField(f)) const iCityFields = iFormFieldValues.filter(f => isCityField(f))
for (var f of iCityFields) for (var f of iCityFields)
if (!IS_MOBILE_DEVICE && !city_regex.test(f.value)) { if (!IS_MOBILE_DEVICE && !city_regex.test(f.value)) {
Swal.fire({ Swal.fire({
@ -322,7 +322,7 @@ class App {
async validateAnnotations(totalSignatures) { async validateAnnotations(totalSignatures) {
const annotations = await Annotation.getAnnotations(this.Instance) const annotations = await getAnnotations(this.Instance)
const filtered = annotations const filtered = annotations
.map(a => a.toJS()) .map(a => a.toJS())
.filter(a => a.isSignature) .filter(a => a.isSignature)
@ -343,7 +343,7 @@ class App {
}) })
if (result.isConfirmed) { if (result.isConfirmed) {
const result = await Annotation.deleteAnnotations(this.Instance) const result = await deleteAnnotations(this.Instance)
} }
return result return result

4
EnvelopeGenerator.Web/wwwroot/js/app.min.js vendored
View File

@ -1,3 +1,3 @@
const ActionType={Created:0,Saved:1,Sent:2,EmailSent:3,Delivered:4,Seen:5,Signed:6,Rejected:7};class App{constructor(n,t,i,r,u,f){this.container=f??`#${this.constructor.name.toLowerCase()}`;this.envelopeKey=n;this.Network=new Network;this.Instance=null;this.currentDocument=null;this.currentReceiver=null;this.signatureCount=0;this.envelopeReceiver=t;this.documentBytes=i;this.licenseKey=r;this.locale=u}async init(){this.currentDocument=this.envelopeReceiver.envelope.documents[0];this.currentReceiver=this.envelopeReceiver.receiver;const n=this.documentBytes;if(n.fatal||n.error)return Swal.fire({title:"Fehler",text:"Dokument konnte nicht geladen werden!",icon:"error"});const t=this.documentBytes;this.Instance=await UI.loadPSPDFKit(t,this.container,this.licenseKey,this.locale);UI.addToolbarItems(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));this.Instance.addEventListener("annotations.willChange",()=>{Comp.ActPanel.Toggle()});try{this.signatureCount=this.currentDocument.elements.length;await Annotation.createAnnotations(this.currentDocument,this.Instance);const n=await this.Network.openDocument(this.envelopeKey);if(n.fatal||n.error)return Swal.fire({title:"Fehler",text:"Umschlag konnte nicht geöffnet werden!",icon:"error"})}catch(i){}[...document.getElementsByClassName("btn_refresh")].forEach(n=>n.addEventListener("click",()=>this.handleClick("RESET")));[...document.getElementsByClassName("btn_complete")].forEach(n=>n.addEventListener("click",()=>this.handleClick("FINISH")));[...document.getElementsByClassName("btn_reject")].forEach(n=>n.addEventListener("click",()=>this.handleClick("REJECT")))}handleAnnotationsLoad(n){n.toJS()}handleAnnotationsChange(){}async handleAnnotationsCreate(n){const t=n.toJS()[0],i=!!t.formFieldName,r=!!t.isSignature;if(i===!1&&r===!0){const r=t.boundingBox.left-20,u=t.boundingBox.top-20,n=150,i=75,f=new Date,e=await Annotation.createAnnotationFrameBlob(this.envelopeReceiver.name,this.currentReceiver.signature,f,n,i),o=await fetch(e),s=await o.blob(),h=await this.Instance.createAttachment(s),c=Annotation.createImageAnnotation(new PSPDFKit.Geometry.Rect({left:r,top:u,width:n,height:i}),t.pageIndex,h);this.Instance.create(c)}}async handleClick(n){let t=!1;switch(n){case"RESET":t=await this.handleReset(null);Comp.SignatureProgress.SignedCount=0;t.isConfirmed&&Swal.fire({title:"Erfolg",text:"Dokument wurde zurückgesetzt",icon:"info"});break;case"FINISH":t=await this.handleFinish(null);t==!0&&(window.location.href=`/EnvelopeKey/${this.envelopeKey}/Success`);break;case"REJECT":Swal.fire({title:localized.rejection,html:`<div class="text-start fs-6 p-0 m-0">${localized.rejectionReasonQ}</div>`,icon:"question",input:"text",inputAttributes:{autocapitalize:"off"},showCancelButton:!0,confirmButtonColor:"#3085d6",cancelButtonColor:"#d33",confirmButtonText:localized.complete,cancelButtonText:localized.back,showLoaderOnConfirm:!0,preConfirm:async n=>{try{return await rejectEnvelope(n)}catch(t){Swal.showValidationMessage(` const ActionType={Created:0,Saved:1,Sent:2,EmailSent:3,Delivered:4,Seen:5,Signed:6,Rejected:7};class App{constructor(n,t,i,r,u,f){this.container=f??`#${this.constructor.name.toLowerCase()}`;this.envelopeKey=n;this.Network=new Network;this.Instance=null;this.currentDocument=null;this.currentReceiver=null;this.signatureCount=0;this.envelopeReceiver=t;this.documentBytes=i;this.licenseKey=r;this.locale=u}async init(){this.currentDocument=this.envelopeReceiver.envelope.documents[0];this.currentReceiver=this.envelopeReceiver.receiver;const n=this.documentBytes;if(n.fatal||n.error)return Swal.fire({title:"Fehler",text:"Dokument konnte nicht geladen werden!",icon:"error"});const t=this.documentBytes;this.Instance=await UI.loadPSPDFKit(t,this.container,this.licenseKey,this.locale);UI.addToolbarItems(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));this.Instance.addEventListener("annotations.willChange",()=>{Comp.ActPanel.Toggle()});try{this.signatureCount=this.currentDocument.elements.length;await createAnnotations(this.currentDocument,this.Instance);const n=await this.Network.openDocument(this.envelopeKey);if(n.fatal||n.error)return Swal.fire({title:"Fehler",text:"Umschlag konnte nicht geöffnet werden!",icon:"error"})}catch(i){}[...document.getElementsByClassName("btn_refresh")].forEach(n=>n.addEventListener("click",()=>this.handleClick("RESET")));[...document.getElementsByClassName("btn_complete")].forEach(n=>n.addEventListener("click",()=>this.handleClick("FINISH")));[...document.getElementsByClassName("btn_reject")].forEach(n=>n.addEventListener("click",()=>this.handleClick("REJECT")))}handleAnnotationsLoad(n){n.toJS()}handleAnnotationsChange(){}async handleAnnotationsCreate(n){const t=n.toJS()[0],i=!!t.formFieldName,r=!!t.isSignature;if(i===!1&&r===!0){const r=t.boundingBox.left-20,u=t.boundingBox.top-20,n=150,i=75,f=new Date,e=await createAnnotationFrameBlob(this.envelopeReceiver.name,this.currentReceiver.signature,f,n,i),o=await fetch(e),s=await o.blob(),h=await this.Instance.createAttachment(s),c=createImageAnnotation(new PSPDFKit.Geometry.Rect({left:r,top:u,width:n,height:i}),t.pageIndex,h);this.Instance.create(c)}}async handleClick(n){let t=!1;switch(n){case"RESET":t=await this.handleReset(null);Comp.SignatureProgress.SignedCount=0;t.isConfirmed&&Swal.fire({title:"Erfolg",text:"Dokument wurde zurückgesetzt",icon:"info"});break;case"FINISH":t=await this.handleFinish(null);t==!0&&(window.location.href=`/EnvelopeKey/${this.envelopeKey}/Success`);break;case"REJECT":Swal.fire({title:localized.rejection,html:`<div class="text-start fs-6 p-0 m-0">${localized.rejectionReasonQ}</div>`,icon:"question",input:"text",inputAttributes:{autocapitalize:"off"},showCancelButton:!0,confirmButtonColor:"#3085d6",cancelButtonColor:"#d33",confirmButtonText:localized.complete,cancelButtonText:localized.back,showLoaderOnConfirm:!0,preConfirm:async n=>{try{return await rejectEnvelope(n)}catch(t){Swal.showValidationMessage(`
Request failed: ${t} Request failed: ${t}
`)}},allowOutsideClick:()=>!Swal.isLoading()}).then(n=>{if(n.isConfirmed){const t=n.value;t.ok?redirRejected():Swal.showValidationMessage(`Request failed: ${t.message}`)}});break;case"COPY_URL":const n=window.location.href.replace(/\/readonly/gi,"");navigator.clipboard.writeText(n).then(function(){bsNotify("Kopiert",{alert_type:"success",delay:4,icon_name:"check_circle"})}).catch(function(){bsNotify("Unerwarteter Fehler",{alert_type:"danger",delay:4,icon_name:"error"})});break;case"SHARE":Comp.ShareBackdrop.show();break;case"LOGOUT":await logout()}}async handleFinish(){const n=await this.Instance.exportInstantJSON(),t=await n.formFieldValues,r=t.filter(n=>Annotation.isFieldRequired(n)),u=r.some(n=>n.value===undefined||n.value===null||n.value==="");if(u)return Swal.fire({title:"Warnung",text:"Bitte füllen Sie alle Standortinformationen vollständig aus!",icon:"warning"}),!1;const f=new RegExp("^[a-zA-Z\\u0080-\\u024F]+(?:([\\ \\-\\']|(\\.\\ ))[a-zA-Z\\u0080-\\u024F]+)*$"),e=t.filter(n=>Annotation.isCityField(n));for(var i of e)if(!IS_MOBILE_DEVICE&&!f.test(i.value))return Swal.fire({title:"Warnung",text:`Bitte überprüfen Sie die eingegebene Ortsangabe "${i.value}" auf korrekte Formatierung. Beispiele für richtige Formate sind: München, Île-de-France, Sauðárkrókur, San Francisco, St. Catharines usw.`,icon:"warning"}),!1;const o=await this.validateAnnotations(this.signatureCount);return o===!1?(Swal.fire({title:"Warnung",text:"Es wurden nicht alle Signaturfelder ausgefüllt!",icon:"warning"}),!1):Swal.fire({title:localized.confirmation,html:`<div class="text-start fs-6 p-0 m-0">${localized.sigAgree}</div>`,icon:"question",showCancelButton:!0,confirmButtonColor:"#3085d6",cancelButtonColor:"#d33",confirmButtonText:localized.finalize,cancelButtonText:localized.back}).then(async t=>{if(t.isConfirmed){try{await this.Instance.save()}catch(i){return Swal.fire({title:"Fehler",text:"Umschlag konnte nicht signiert werden!",icon:"error"}),!1}try{const i=await n,t=await this.Network.postEnvelope(this.envelopeKey,this.currentDocument.id,i);return t.fatal?(Swal.fire({title:"Fehler",text:"Umschlag konnte nicht signiert werden!",icon:"error"}),!1):t.error?(Swal.fire({title:"Warnung",text:"Umschlag ist nicht mehr verfügbar.",icon:"warning"}),!1):!0}catch(i){return!1}}else return!1})}async validateAnnotations(n){const t=await Annotation.getAnnotations(this.Instance),i=t.map(n=>n.toJS()).filter(n=>n.isSignature);return n>i.length?!1:!0}async handleReset(){const n=await Swal.fire({title:"Sind sie sicher?",text:"Wollen Sie das Dokument und alle erstellten Signaturen zurücksetzen?",icon:"question",showCancelButton:!0});if(n.isConfirmed){const n=await Annotation.deleteAnnotations(this.Instance)}return n}} `)}},allowOutsideClick:()=>!Swal.isLoading()}).then(n=>{if(n.isConfirmed){const t=n.value;t.ok?redirRejected():Swal.showValidationMessage(`Request failed: ${t.message}`)}});break;case"COPY_URL":const n=window.location.href.replace(/\/readonly/gi,"");navigator.clipboard.writeText(n).then(function(){bsNotify("Kopiert",{alert_type:"success",delay:4,icon_name:"check_circle"})}).catch(function(){bsNotify("Unerwarteter Fehler",{alert_type:"danger",delay:4,icon_name:"error"})});break;case"SHARE":Comp.ShareBackdrop.show();break;case"LOGOUT":await logout()}}async handleFinish(){const n=await this.Instance.exportInstantJSON(),t=await n.formFieldValues,r=t.filter(n=>isFieldRequired(n)),u=r.some(n=>n.value===undefined||n.value===null||n.value==="");if(u)return Swal.fire({title:"Warnung",text:"Bitte füllen Sie alle Standortinformationen vollständig aus!",icon:"warning"}),!1;const f=new RegExp("^[a-zA-Z\\u0080-\\u024F]+(?:([\\ \\-\\']|(\\.\\ ))[a-zA-Z\\u0080-\\u024F]+)*$"),e=t.filter(n=>isCityField(n));for(var i of e)if(!IS_MOBILE_DEVICE&&!f.test(i.value))return Swal.fire({title:"Warnung",text:`Bitte überprüfen Sie die eingegebene Ortsangabe "${i.value}" auf korrekte Formatierung. Beispiele für richtige Formate sind: München, Île-de-France, Sauðárkrókur, San Francisco, St. Catharines usw.`,icon:"warning"}),!1;const o=await this.validateAnnotations(this.signatureCount);return o===!1?(Swal.fire({title:"Warnung",text:"Es wurden nicht alle Signaturfelder ausgefüllt!",icon:"warning"}),!1):Swal.fire({title:localized.confirmation,html:`<div class="text-start fs-6 p-0 m-0">${localized.sigAgree}</div>`,icon:"question",showCancelButton:!0,confirmButtonColor:"#3085d6",cancelButtonColor:"#d33",confirmButtonText:localized.finalize,cancelButtonText:localized.back}).then(async t=>{if(t.isConfirmed){try{await this.Instance.save()}catch(i){return Swal.fire({title:"Fehler",text:"Umschlag konnte nicht signiert werden!",icon:"error"}),!1}try{const i=await n,t=await this.Network.postEnvelope(this.envelopeKey,this.currentDocument.id,i);return t.fatal?(Swal.fire({title:"Fehler",text:"Umschlag konnte nicht signiert werden!",icon:"error"}),!1):t.error?(Swal.fire({title:"Warnung",text:"Umschlag ist nicht mehr verfügbar.",icon:"warning"}),!1):!0}catch(i){return!1}}else return!1})}async validateAnnotations(n){const t=await getAnnotations(this.Instance),i=t.map(n=>n.toJS()).filter(n=>n.isSignature);return n>i.length?!1:!0}async handleReset(){const n=await Swal.fire({title:"Sind sie sicher?",text:"Wollen Sie das Dokument und alle erstellten Signaturen zurücksetzen?",icon:"question",showCancelButton:!0});if(n.isConfirmed){const n=await deleteAnnotations(this.Instance)}return n}}