minimize return statement

- Initialize `currentDocument` and `currentReceiver` directly in constructor
- Replace `Instance` with `pdfKit` for clearer naming
- Remove redundant envelope/document loading in `init`
- Update all method references to use `this.pdfKit`

EnvelopeGenerator.Web/Views/Shared/_Layout.cshtml

@@ -53,7 +53,6 @@
     <script src="~/js/lazy.min.js" asp-append-version="true"></script>
     <script src="~/js/ui.min.js" asp-append-version="true"></script>
     <script src="~/js/annotation.js" asp-append-version="true"></script>
-    <script src="~/js/network.min.js" asp-append-version="true"></script>
     <script src="~/js/app.min.js" asp-append-version="true"></script>
     <script src="~/lib/pspdfkit/dist-2024.3.2/pspdfkit.js"></script>
     <script src="~/js/util.min.js" asp-append-version="true"></script>

EnvelopeGenerator.Web/wwwroot/js/app.js

@@ -1,73 +1,42 @@
-const ActionType = {
-    Created: 0,
-    Saved: 1,
-    Sent: 2,
-    EmailSent: 3,
-    Delivered: 4,
-    Seen: 5,
-    Signed: 6,
-    Rejected: 7,
-}
-
 class App {
     constructor(envelopeKey, envelopeReceiver, documentBytes, licenseKey, locale, container) {
         this.container = container ?? `#${this.constructor.name.toLowerCase()}`;
         this.envelopeKey = envelopeKey
-        this.Instance = null
-        this.currentDocument = null
-        this.currentReceiver = null
-        this.signatureCount = 0;
+        this.pdfKit = null
+        this.currentDocument = envelopeReceiver.envelope.documents[0]
+        this.currentReceiver = envelopeReceiver.receiver
+        this.signatureCount = envelopeReceiver.envelope.documents[0].elements.length;
         this.envelopeReceiver = envelopeReceiver;
         this.documentBytes = documentBytes;
         this.licenseKey = licenseKey;
         this.locale = locale;
     }
 
-    // This function will be called from the ShowEnvelope.razor page
-    // and will trigger loading of the Editor Interface
     async init() {
-        // Load the envelope from the database
-        this.currentDocument = this.envelopeReceiver.envelope.documents[0]
-        this.currentReceiver = this.envelopeReceiver.receiver
-
-        // Load the document from the filestore
-        const documentResponse = this.documentBytes
-
-        if (documentResponse.fatal || documentResponse.error) {
-            return Swal.fire({
-                title: 'Fehler',
-                text: 'Dokument konnte nicht geladen werden!',
-                icon: 'error',
-            })
-        }
-
-        const arrayBuffer = this.documentBytes
-
         // Load PSPDFKit
-        this.Instance = await UI.loadPSPDFKit(arrayBuffer, this.container, this.licenseKey, this.locale)
-        UI.addToolbarItems(this.Instance, this.handleClick.bind(this))
+        this.pdfKit = await loadPSPDFKit(this.documentBytes, this.container, this.licenseKey, this.locale)
+        addToolbarItems(this.pdfKit, this.handleClick.bind(this))
 
-        this.Instance.addEventListener(
+        this.pdfKit.addEventListener(
             'annotations.load',
             this.handleAnnotationsLoad.bind(this)
         )
-        this.Instance.addEventListener(
+        this.pdfKit.addEventListener(
             'annotations.change',
             this.handleAnnotationsChange.bind(this)
         )
-        this.Instance.addEventListener(
+        this.pdfKit.addEventListener(
             'annotations.create',
             this.handleAnnotationsCreate.bind(this)
         )
 
-        this.Instance.addEventListener("annotations.willChange", _ => {
+        this.pdfKit.addEventListener("annotations.willChange", _ => {
             Comp.ActPanel.Toggle();
         });
 
         // Load annotations into PSPDFKit
         try {
-            this.signatureCount = this.currentDocument.elements.length
-            await createAnnotations(this.currentDocument, this.Instance)
+            await createAnnotations(this.currentDocument, this.pdfKit)
         } catch (e) {
             console.error("Error loading annotations:", e);
         }
@@ -107,7 +76,7 @@ class App {
 
             const request = await fetch(imageUrl)
             const blob = await request.blob()
-            const imageAttachmentId = await this.Instance.createAttachment(blob)
+            const imageAttachmentId = await this.pdfKit.createAttachment(blob)
 
             const frameAnnotation = createImageAnnotation(
                 new PSPDFKit.Geometry.Rect({
@@ -120,7 +89,7 @@ class App {
                 imageAttachmentId
             )
 
-            this.Instance.create(frameAnnotation)
+            this.pdfKit.create(frameAnnotation)
         }
     }
 
@@ -180,7 +149,7 @@ class App {
                         return;
                     const res = result.value;
                     if (res.ok) {
-                        redirRejected()
+                        reload()
                     }
                     else
                         Swal.showValidationMessage(`Request failed: ${res.message}`);
@@ -206,7 +175,7 @@ class App {
     }
 
     async handleFinish(event) {
-        const iJSON = await this.Instance.exportInstantJSON()
+        const iJSON = await this.pdfKit.exportInstantJSON()
         const iFormFieldValues = await iJSON.formFieldValues;
 
         //check required
@@ -260,7 +229,7 @@ class App {
                 //---
                 // Save changes before doing anything
                 try {
-                    await this.Instance.save()
+                    await this.pdfKit.save()
                 } catch (e) {
                     Swal.fire({
                         title: 'Fehler',
@@ -304,7 +273,7 @@ class App {
 
 
     async validateAnnotations(totalSignatures) {
-        const annotations = await getAnnotations(this.Instance)
+        const annotations = await getAnnotations(this.pdfKit)
         const filtered = annotations
             .map(a => a.toJS())
             .filter(a => a.isSignature)
@@ -325,7 +294,7 @@ class App {
         })
 
         if (result.isConfirmed) {
-            const result = await deleteAnnotations(this.Instance)
+            const result = await deleteAnnotations(this.pdfKit)
         }
 
         return result

EnvelopeGenerator.Web/wwwroot/js/app.min.js

@@ -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.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)}catch(i){console.error("Error loading annotations:",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=`/Envelope/${this.envelopeKey}`);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(`
+class App{constructor(n,t,i,r,u,f){this.container=f??`#${this.constructor.name.toLowerCase()}`;this.envelopeKey=n;this.pdfKit=null;this.currentDocument=t.envelope.documents[0];this.currentReceiver=t.receiver;this.signatureCount=t.envelope.documents[0].elements.length;this.envelopeReceiver=t;this.documentBytes=i;this.licenseKey=r;this.locale=u}async init(){this.pdfKit=await loadPSPDFKit(this.documentBytes,this.container,this.licenseKey,this.locale);addToolbarItems(this.pdfKit,this.handleClick.bind(this));this.pdfKit.addEventListener("annotations.load",this.handleAnnotationsLoad.bind(this));this.pdfKit.addEventListener("annotations.change",this.handleAnnotationsChange.bind(this));this.pdfKit.addEventListener("annotations.create",this.handleAnnotationsCreate.bind(this));this.pdfKit.addEventListener("annotations.willChange",()=>{Comp.ActPanel.Toggle()});try{await createAnnotations(this.currentDocument,this.pdfKit)}catch(n){console.error("Error loading annotations:",n)}[...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.pdfKit.createAttachment(s),c=createImageAnnotation(new PSPDFKit.Geometry.Rect({left:r,top:u,width:n,height:i}),t.pageIndex,h);this.pdfKit.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=`/Envelope/${this.envelopeKey}`);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}
-                        `)}},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 t=await signEnvelope(await n);if(t.ok)return!0;if(t.status===403)return Swal.fire({title:"Warnung",text:"Umschlag ist nicht mehr verfügbar.",icon:"warning"}),!1;throw new Error;}catch(i){return Swal.fire({title:"Fehler",text:"Umschlag konnte nicht signiert werden!",icon:"error"}),!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}}
+                        `)}},allowOutsideClick:()=>!Swal.isLoading()}).then(n=>{if(n.isConfirmed){const t=n.value;t.ok?reload():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.pdfKit.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.pdfKit.save()}catch(i){return Swal.fire({title:"Fehler",text:"Umschlag konnte nicht signiert werden!",icon:"error"}),!1}try{const t=await signEnvelope(await n);if(t.ok)return!0;if(t.status===403)return Swal.fire({title:"Warnung",text:"Umschlag ist nicht mehr verfügbar.",icon:"warning"}),!1;throw new Error;}catch(i){return Swal.fire({title:"Fehler",text:"Umschlag konnte nicht signiert werden!",icon:"error"}),!1}}else return!1})}async validateAnnotations(n){const t=await getAnnotations(this.pdfKit),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.pdfKit)}return n}}

EnvelopeGenerator.Web/wwwroot/js/envelope-api.js

@@ -1,12 +1,13 @@
 //#region parameters
 const env = Object.freeze({
-  xsrfToken: document.getElementsByName('__RequestVerificationToken')[0].value,
-  envKey: document.querySelector('meta[name="env-key"]').getAttribute('content')
+  __lazyXsrfToken: new Lazy(() => document.getElementsByName('__RequestVerificationToken')[0].value),
+  get xsrfToken() {
+    return this.__lazyXsrfToken.value;
+  }
 })
 
 const url = Object.freeze({
   reject: `/api/annotation/reject`,
-  rejectRedir: `/envelope/${env.envKey}`,
   share: `/api/readonly`
 });
 //#endregion
@@ -45,6 +46,10 @@ function postRequest(url, body = undefined) {
   return sendRequest('POST', url, body);
 }
 
+function reload() {
+  window.location.reload();
+}
+
 function redirect(url) {
   window.location.href = url;
 }
@@ -79,10 +84,6 @@ function shareEnvelope(receiverMail, dateValid) {
 }
 //#endregion
 
-function redirRejected() {
-  redirect(url.rejectRedir);
-}
-
 async function setLanguage(language) {
   const hasLang = await getJson('/api/localization/lang')
     .then(langs => langs.includes(language));

EnvelopeGenerator.Web/wwwroot/js/envelope-api.min.js

@@ -1 +1 @@
-function sendRequest(n,t,i=undefined){const r={credentials:"include",method:n,headers:{"X-XSRF-TOKEN":env.xsrfToken}};return i!==undefined&&(r.body=JSON.stringify(i),r.headers["Content-Type"]="application/json"),fetch(t,r)}function getRequest(n){return sendRequest("GET",n)}function getJson(n){return sendRequest("GET",n).then(n=>{if(n.ok)return n.json();throw new Error(`Request failed with status ${n.status}`);})}function postRequest(n,t=undefined){return sendRequest("POST",n,t)}function redirect(n){window.location.href=n}function signEnvelope(n){return postRequest(`/api/annotation`,n)}async function getAnnotationParams(n=0,t=0,i=72){var f,r;const u=await getJson("/api/Config/Annotations");for(f in u)r=u[f],r.width*=i,r.height*=i,r.left+=n-.7,r.left*=i,r.top+=t-.5,r.top*=i;return u}function rejectEnvelope(n){return postRequest(url.reject,n)}function shareEnvelope(n,t){return postRequest(url.share,{receiverMail:n,dateValid:t})}function redirRejected(){redirect(url.rejectRedir)}async function setLanguage(n){const t=await getJson("/api/localization/lang").then(t=>t.includes(n));t&&postRequest(`/api/localization/lang/${n}`).then(n=>{n.redirected&&redirect(n.url)})}function logout(){return postRequest(`/auth/logout`).then(n=>{n.ok&&(window.location.href="/")})}const env=Object.freeze({xsrfToken:document.getElementsByName("__RequestVerificationToken")[0].value,envKey:document.querySelector('meta[name="env-key"]').getAttribute("content")}),url=Object.freeze({reject:`/api/annotation/reject`,rejectRedir:`/envelope/${env.envKey}`,share:`/api/readonly`});
+function sendRequest(n,t,i=undefined){const r={credentials:"include",method:n,headers:{"X-XSRF-TOKEN":env.xsrfToken}};return i!==undefined&&(r.body=JSON.stringify(i),r.headers["Content-Type"]="application/json"),fetch(t,r)}function getRequest(n){return sendRequest("GET",n)}function getJson(n){return sendRequest("GET",n).then(n=>{if(n.ok)return n.json();throw new Error(`Request failed with status ${n.status}`);})}function postRequest(n,t=undefined){return sendRequest("POST",n,t)}function reload(){window.location.reload()}function redirect(n){window.location.href=n}function signEnvelope(n){return postRequest(`/api/annotation`,n)}async function getAnnotationParams(n=0,t=0,i=72){var f,r;const u=await getJson("/api/Config/Annotations");for(f in u)r=u[f],r.width*=i,r.height*=i,r.left+=n-.7,r.left*=i,r.top+=t-.5,r.top*=i;return u}function rejectEnvelope(n){return postRequest(url.reject,n)}function shareEnvelope(n,t){return postRequest(url.share,{receiverMail:n,dateValid:t})}async function setLanguage(n){const t=await getJson("/api/localization/lang").then(t=>t.includes(n));t&&postRequest(`/api/localization/lang/${n}`).then(n=>{n.redirected&&redirect(n.url)})}function logout(){return postRequest(`/auth/logout`).then(n=>{n.ok&&(window.location.href="/")})}const env=Object.freeze({__lazyXsrfToken:new Lazy(()=>document.getElementsByName("__RequestVerificationToken")[0].value),get xsrfToken(){return this.__lazyXsrfToken.value}}),url=Object.freeze({reject:`/api/annotation/reject`,share:`/api/readonly`});

EnvelopeGenerator.Web/wwwroot/js/ui.js

@@ -1,188 +1,158 @@
-class UI {
-  static allowedToolbarItems = [
-    'sidebar-thumbnails',
-    'sidebar-document-ouline',
-    'sidebar-bookmarks',
-    'pager',
-    'pan',
-    'zoom-out',
-    'zoom-in',
-    'zoom-mode',
-    'spacer',
-    'search',
-    'export-pdf'
-  ]
+function loadPSPDFKit(arrayBuffer, container, licenseKey, locale) {
+  return PSPDFKit.load({
+    inlineWorkers: false,
+    locale: locale,
+    licenseKey: licenseKey,
+    styleSheets: ['/css/site.css'],
+    container: container,
+    document: arrayBuffer,
+    annotationPresets: getPresets(),
+    electronicSignatures: {
+      creationModes: ['DRAW', 'TYPE', 'IMAGE'],
+    },
+    initialViewState: new PSPDFKit.ViewState({
+      sidebarMode: PSPDFKit.SidebarMode.THUMBNAILS,
+    }),
+    isEditableAnnotation: function (annotation) {
+      return !(annotation.isSignature || annotation.description === 'FRAME')
+    },
+  });
+}
 
-  // 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.
-  static Instance
-  static loadPSPDFKit(arrayBuffer, container, licenseKey, locale) {
-    UI.Instance = PSPDFKit.load({
-      inlineWorkers: false,
-      locale: locale,
-      licenseKey: licenseKey,
-      styleSheets: ['/css/site.css'],
-      container: container,
-      document: arrayBuffer,
-      annotationPresets: UI.getPresets(),
-      electronicSignatures: {
-        creationModes: ['DRAW', 'TYPE', 'IMAGE'],
+const allowedToolbarItems = [
+  'sidebar-thumbnails',
+  'sidebar-document-ouline',
+  'sidebar-bookmarks',
+  'pager',
+  'pan',
+  'zoom-out',
+  'zoom-in',
+  'zoom-mode',
+  'spacer',
+  'search',
+  'export-pdf'
+]
+
+function addToolbarItems(instance, handler) {
+  var toolbarItems = instance.toolbarItems.filter((item) => allowedToolbarItems.includes(item.type));
+
+  if (IS_READONLY)
+    toolbarItems = toolbarItems.concat(getReadOnlyItems(handler));
+  else
+    toolbarItems = toolbarItems.concat(getWritableItems(handler));
+
+  if (!IS_DESKTOP_SIZE && !IS_READONLY)
+    toolbarItems = toolbarItems.concat(getMobileWritableItems(handler));
+
+  instance.setToolbarItems(toolbarItems)
+}
+
+function getWritableItems(callback) {
+  return [
+    {
+      type: 'custom',
+      id: 'button-share',
+      className: 'button-share',
+      title: 'Teilen',
+      onPress() {
+        callback('SHARE')
       },
-      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 !annotation.isSignature;
-      },
-      customRenderers: {
-        Annotation: UI.annotationRenderer,
-      },
-    })
-
-    return UI.Instance;
-  }
-
-  static addToolbarItems(instance, handler) {
-    var toolbarItems = instance.toolbarItems.filter((item) => UI.allowedToolbarItems.includes(item.type));
-
-    if (IS_READONLY)    
-      toolbarItems = toolbarItems.concat(UI.getReadOnlyItems(handler));
-    else
-      toolbarItems = toolbarItems.concat(UI.getWritableItems(handler));
-
-    if (!IS_DESKTOP_SIZE && !IS_READONLY)
-      toolbarItems = toolbarItems.concat(UI.getMobileWritableItems(handler));
-
-    instance.setToolbarItems(toolbarItems)
-  }
-
-  static annotationRenderer(data) {
-    // leave everything as is
-    return null
-  }
-
-  static createElementFromHTML(html) {
-    const el = document.createElement('div')
-    el.innerHTML = html.trim()
-
-    return el.firstChild
-  }
-
-  static getWritableItems = function (callback) {
-    return [
-      {
-        type: 'custom',
-        id: 'button-share',
-        className: 'button-share',
-        title: 'Teilen',
-        onPress() {
-          callback('SHARE')
-        },
-        icon: `<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      icon: `<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M20 13V17.5C20 20.5577 16 20.5 12 20.5C8 20.5 4 20.5577 4 17.5V13M12 3L12 15M12 3L16 7M12 3L8 7" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>`,
+    },
+    {
+      type: 'custom',
+      id: 'button-logout',
+      className: 'button-logout',
+      title: 'logout',
+      onPress() {
+        callback('LOGOUT')
       },
-      {
-        type: 'custom',
-        id: 'button-logout',
-        className: 'button-logout',
-        title: 'logout',
-        onPress() {
-          callback('LOGOUT')
-        },
-        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-box-arrow-left" viewBox="0 0 16 16">
+      icon: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-box-arrow-left" viewBox="0 0 16 16">
                 <path fill-rule="evenodd" d="M6 12.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v2a.5.5 0 0 1-1 0v-2A1.5 1.5 0 0 1 6.5 2h8A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 5 12.5v-2a.5.5 0 0 1 1 0z"/>
                 <path fill-rule="evenodd" d="M.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L1.707 7.5H10.5a.5.5 0 0 1 0 1H1.707l2.147 2.146a.5.5 0 0 1-.708.708z"/>
               </svg>`
-      },
-      {
-        type: 'custom',
-        id: 'mock',
-        className: 'mock',
-        title: 'Mock',
-        icon: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-box-arrow-left" viewBox="0 0 16 16"></svg>`
-      }
-    ];
-  }
+    },
+    {
+      type: 'custom',
+      id: 'mock',
+      className: 'mock',
+      title: 'Mock',
+      icon: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-box-arrow-left" viewBox="0 0 16 16"></svg>`
+    }
+  ];
+}
 
-  static getReadOnlyItems = function (callback) {
-    return [
-      {
-        type: 'custom',
-        id: 'button-copy-url',
-        className: 'button-copy-url',
-        title: 'Teilen',
-        onPress() {
-          callback('COPY_URL')
-        },
-        icon: `<svg viewBox="4 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+function getReadOnlyItems(callback) {
+  return [
+    {
+      type: 'custom',
+      id: 'button-copy-url',
+      className: 'button-copy-url',
+      title: 'Teilen',
+      onPress() {
+        callback('COPY_URL')
+      },
+      icon: `<svg viewBox="4 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M15 3H9C6.79086 3 5 4.79086 5 7V15" stroke="#222222"/>
                 <path d="M8.5 11.5C8.5 10.3156 8.50074 9.46912 8.57435 8.81625C8.64681 8.17346 8.78457 7.78051 9.01662 7.4781C9.14962 7.30477 9.30477 7.14962 9.4781 7.01662C9.78051 6.78457 10.1735 6.64681 10.8163 6.57435C11.4691 6.50074 12.3156 6.5 13.5 6.5C14.6844 6.5 15.5309 6.50074 16.1837 6.57435C16.8265 6.64681 17.2195 6.78457 17.5219 7.01662C17.6952 7.14962 17.8504 7.30477 17.9834 7.4781C18.2154 7.78051 18.3532 8.17346 18.4257 8.81625C18.4993 9.46912 18.5 10.3156 18.5 11.5V15.5C18.5 16.6844 18.4993 17.5309 18.4257 18.1837C18.3532 18.8265 18.2154 19.2195 17.9834 19.5219C17.8504 19.6952 17.6952 19.8504 17.5219 19.9834C17.2195 20.2154 16.8265 20.3532 16.1837 20.4257C15.5309 20.4993 14.6844 20.5 13.5 20.5C12.3156 20.5 11.4691 20.4993 10.8163 20.4257C10.1735 20.3532 9.78051 20.2154 9.4781 19.9834C9.30477 19.8504 9.14962 19.6952 9.01662 19.5219C8.78457 19.2195 8.64681 18.8265 8.57435 18.1837C8.50074 17.5309 8.5 16.6844 8.5 15.5V11.5Z" stroke="#222222"/>
               </svg>`,
-      }
-    ];
-  }
+    }
+  ];
+}
 
-  static getMobileWritableItems = function (callback) {
-    return [
-      {
-        type: 'custom',
-        id: 'button-finish',
-        className: 'button-finish',
-        onPress() {
-          callback('FINISH')
-        },
-        icon: `<svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="-4 -4 26 26">
+function getMobileWritableItems(callback) {
+  return [
+    {
+      type: 'custom',
+      id: 'button-finish',
+      className: 'button-finish',
+      onPress() {
+        callback('FINISH')
+      },
+      icon: `<svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="-4 -4 26 26">
                   <path d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z" />
                   <path d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z" />
               </svg>`
+    },
+    {
+      type: 'custom',
+      id: 'button-reject',
+      className: 'button-reject',
+      title: 'Ablehnen',
+      onPress() {
+        callback('REJECT')
       },
-      {
-        type: 'custom',
-        id: 'button-reject',
-        className: 'button-reject',
-        title: 'Ablehnen',
-        onPress() {
-          callback('REJECT')
-        },
-        icon: `<svg width="25px" height="25px" viewBox="43.5 43.5 512 512" version="1.1" fill="currentColor" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      icon: `<svg width="25px" height="25px" viewBox="43.5 43.5 512 512" version="1.1" fill="currentColor" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                 <path class="st0" d="M263.24,43.5c-117.36,0-212.5,95.14-212.5,212.5s95.14,212.5,212.5,212.5s212.5-95.14,212.5-212.5    S380.6,43.5,263.24,43.5z M367.83,298.36c17.18,17.18,17.18,45.04,0,62.23v0c-17.18,17.18-45.04,17.18-62.23,0l-42.36-42.36    l-42.36,42.36c-17.18,17.18-45.04,17.18-62.23,0v0c-17.18-17.18-17.18-45.04,0-62.23L201.01,256l-42.36-42.36    c-17.18-17.18-17.18-45.04,0-62.23v0c17.18-17.18,45.04-17.18,62.23,0l42.36,42.36l42.36-42.36c17.18-17.18,45.04-17.18,62.23,0v0    c17.18,17.18,17.18,45.04,0,62.23L325.46,256L367.83,298.36z" />
               </svg>`,
+    },
+    {
+      type: 'custom',
+      id: 'button-reset',
+      className: 'button-reset',
+      title: 'Zurücksetzen',
+      onPress() {
+        callback('RESET')
       },
-      {
-        type: 'custom',
-        id: 'button-reset',
-        className: 'button-reset',
-        title: 'Zurü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="-1 -1 16 16">
+      icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="-1 -1 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>`,
-      }
-    ];
+    }
+  ];
+}
+
+function getPresets() {
+  const annotationPresets = PSPDFKit.defaultAnnotationPresets
+  annotationPresets.ink = {
+    lineWidth: 10,
   }
 
-  static getPresets() {
-    const annotationPresets = PSPDFKit.defaultAnnotationPresets
-    annotationPresets.ink = {
-      lineWidth: 10,
-    }
-
-    annotationPresets.widget = {
-      readOnly: true,
-    }
-
-    return annotationPresets
+  annotationPresets.widget = {
+    readOnly: true,
   }
+
+  return annotationPresets
 }

EnvelopeGenerator.Web/wwwroot/js/ui.min.js

@@ -1,13 +1,12 @@
-class UI{static allowedToolbarItems=["sidebar-thumbnails","sidebar-document-ouline","sidebar-bookmarks","pager","pan","zoom-out","zoom-in","zoom-mode","spacer","search","export-pdf"];static Instance
-  static loadPSPDFKit(n,t,i,r){return UI.Instance=PSPDFKit.load({inlineWorkers:!1,locale:r,licenseKey:i,styleSheets:["/css/site.css"],container:t,document:n,annotationPresets:UI.getPresets(),electronicSignatures:{creationModes:["DRAW","TYPE","IMAGE"]},initialViewState:new PSPDFKit.ViewState({sidebarMode:PSPDFKit.SidebarMode.THUMBNAILS}),isEditableAnnotation:function(n){return n.isSignature||n.description=="FRAME"?!1:!0},customRenderers:{Annotation:UI.annotationRenderer}}),UI.Instance}static addToolbarItems(n,t){var i=n.toolbarItems.filter(n=>UI.allowedToolbarItems.includes(n.type));i=IS_READONLY?i.concat(UI.getReadOnlyItems(t)):i.concat(UI.getWritableItems(t));IS_DESKTOP_SIZE||IS_READONLY||(i=i.concat(UI.getMobileWritableItems(t)));n.setToolbarItems(i)}static annotationRenderer(){return null}static createElementFromHTML(n){const t=document.createElement("div");return t.innerHTML=n.trim(),t.firstChild}static getWritableItems=function(n){return[{type:"custom",id:"button-share",className:"button-share",title:"Teilen",onPress(){n("SHARE")},icon:`<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+function loadPSPDFKit(n,t,i,r){return PSPDFKit.load({inlineWorkers:!1,locale:r,licenseKey:i,styleSheets:["/css/site.css"],container:t,document:n,annotationPresets:getPresets(),electronicSignatures:{creationModes:["DRAW","TYPE","IMAGE"]},initialViewState:new PSPDFKit.ViewState({sidebarMode:PSPDFKit.SidebarMode.THUMBNAILS}),isEditableAnnotation:function(n){return!(n.isSignature||n.description==="FRAME")}})}function addToolbarItems(n,t){var i=n.toolbarItems.filter(n=>allowedToolbarItems.includes(n.type));i=IS_READONLY?i.concat(getReadOnlyItems(t)):i.concat(getWritableItems(t));IS_DESKTOP_SIZE||IS_READONLY||(i=i.concat(getMobileWritableItems(t)));n.setToolbarItems(i)}function getWritableItems(n){return[{type:"custom",id:"button-share",className:"button-share",title:"Teilen",onPress(){n("SHARE")},icon:`<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M20 13V17.5C20 20.5577 16 20.5 12 20.5C8 20.5 4 20.5577 4 17.5V13M12 3L12 15M12 3L16 7M12 3L8 7" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>`},{type:"custom",id:"button-logout",className:"button-logout",title:"logout",onPress(){n("LOGOUT")},icon:`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-box-arrow-left" viewBox="0 0 16 16">
                 <path fill-rule="evenodd" d="M6 12.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v2a.5.5 0 0 1-1 0v-2A1.5 1.5 0 0 1 6.5 2h8A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 5 12.5v-2a.5.5 0 0 1 1 0z"/>
                 <path fill-rule="evenodd" d="M.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L1.707 7.5H10.5a.5.5 0 0 1 0 1H1.707l2.147 2.146a.5.5 0 0 1-.708.708z"/>
-              </svg>`},{type:"custom",id:"mock",className:"mock",title:"Mock",icon:`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-box-arrow-left" viewBox="0 0 16 16"></svg>`}]};static getReadOnlyItems=function(n){return[{type:"custom",id:"button-copy-url",className:"button-copy-url",title:"Teilen",onPress(){n("COPY_URL")},icon:`<svg viewBox="4 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+              </svg>`},{type:"custom",id:"mock",className:"mock",title:"Mock",icon:`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-box-arrow-left" viewBox="0 0 16 16"></svg>`}]}function getReadOnlyItems(n){return[{type:"custom",id:"button-copy-url",className:"button-copy-url",title:"Teilen",onPress(){n("COPY_URL")},icon:`<svg viewBox="4 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M15 3H9C6.79086 3 5 4.79086 5 7V15" stroke="#222222"/>
                 <path d="M8.5 11.5C8.5 10.3156 8.50074 9.46912 8.57435 8.81625C8.64681 8.17346 8.78457 7.78051 9.01662 7.4781C9.14962 7.30477 9.30477 7.14962 9.4781 7.01662C9.78051 6.78457 10.1735 6.64681 10.8163 6.57435C11.4691 6.50074 12.3156 6.5 13.5 6.5C14.6844 6.5 15.5309 6.50074 16.1837 6.57435C16.8265 6.64681 17.2195 6.78457 17.5219 7.01662C17.6952 7.14962 17.8504 7.30477 17.9834 7.4781C18.2154 7.78051 18.3532 8.17346 18.4257 8.81625C18.4993 9.46912 18.5 10.3156 18.5 11.5V15.5C18.5 16.6844 18.4993 17.5309 18.4257 18.1837C18.3532 18.8265 18.2154 19.2195 17.9834 19.5219C17.8504 19.6952 17.6952 19.8504 17.5219 19.9834C17.2195 20.2154 16.8265 20.3532 16.1837 20.4257C15.5309 20.4993 14.6844 20.5 13.5 20.5C12.3156 20.5 11.4691 20.4993 10.8163 20.4257C10.1735 20.3532 9.78051 20.2154 9.4781 19.9834C9.30477 19.8504 9.14962 19.6952 9.01662 19.5219C8.78457 19.2195 8.64681 18.8265 8.57435 18.1837C8.50074 17.5309 8.5 16.6844 8.5 15.5V11.5Z" stroke="#222222"/>
-              </svg>`}]};static getMobileWritableItems=function(n){return[{type:"custom",id:"button-finish",className:"button-finish",onPress(){n("FINISH")},icon:`<svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="-4 -4 26 26">
+              </svg>`}]}function getMobileWritableItems(n){return[{type:"custom",id:"button-finish",className:"button-finish",onPress(){n("FINISH")},icon:`<svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="-4 -4 26 26">
                   <path d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z" />
                   <path d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z" />
               </svg>`},{type:"custom",id:"button-reject",className:"button-reject",title:"Ablehnen",onPress(){n("REJECT")},icon:`<svg width="25px" height="25px" viewBox="43.5 43.5 512 512" version="1.1" fill="currentColor" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -15,4 +14,4 @@ class UI{static allowedToolbarItems=["sidebar-thumbnails","sidebar-document-ouli
               </svg>`},{type:"custom",id:"button-reset",className:"button-reset",title:"Zurücksetzen",onPress(){n("RESET")},icon:`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="-1 -1 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>`}]};static getPresets(){const n=PSPDFKit.defaultAnnotationPresets;return n.ink={lineWidth:10},n.widget={readOnly:!0},n}}
+              </svg>`}]}function getPresets(){const n=PSPDFKit.defaultAnnotationPresets;return n.ink={lineWidth:10},n.widget={readOnly:!0},n}const allowedToolbarItems=["sidebar-thumbnails","sidebar-document-ouline","sidebar-bookmarks","pager","pan","zoom-out","zoom-in","zoom-mode","spacer","search","export-pdf"];