feat(annotation.js): Konfigurierte Beschriftungen

EnvelopeGenerator.Web/Controllers/ConfigController.cs

@@ -11,9 +11,9 @@ public class ConfigController : ControllerBase
 {
     private readonly AnnotationParams _annotParams;
 
-    public ConfigController(IOptions<AnnotationParams> annotationParamsOptions)
+    public ConfigController(IOptionsMonitor<AnnotationParams> annotationParamsOptions)
     {
-        _annotParams = annotationParamsOptions.Value;
+        _annotParams = annotationParamsOptions.CurrentValue;
     }
 
     [HttpGet("Annotations")]

EnvelopeGenerator.Web/appsettings.json

@@ -162,18 +162,32 @@
         "MarginTop": 0
       },
       {
-        "Name": "City",
+        "Name": "CityLabel",
         "VerBoundAnnotName": "Signature",
         "WidthRatio": 1.2,
         "HeightRatio": 0.5,
-        "MarginTopRatio": 0.48
+        "MarginTopRatio": 0.25
       },
       {
-        "Name": "Date",
+        "Name": "City",
+        "VerBoundAnnotName": "CityLabel",
+        "WidthRatio": 1.2,
+        "HeightRatio": 0.5,
+        "MarginTopRatio": 0
+      },
+      {
+        "Name": "DateLabel",
         "VerBoundAnnotName": "City",
         "WidthRatio": 1.55,
         "HeightRatio": 0.5,
-        "MarginTopRatio": 0.45
+        "MarginTopRatio": 0.10
+      },
+      {
+        "Name": "Date",
+        "VerBoundAnnotName": "DateLabel",
+        "WidthRatio": 1.55,
+        "HeightRatio": 0.5,
+        "MarginTopRatio": 0
       }
     ]
   }

EnvelopeGenerator.Web/wwwroot/js/annotation.js

@@ -22,11 +22,12 @@
     }
 
     static async createSignature(element) {
+        const annotParams = await getAnnotationParams(element.left, element.top);
         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 width = annotParams.signature.width;
+        const height = annotParams.signature.height;
+        const top = annotParams.signature.top;
+        const left = annotParams.signature.left;
         const page = element.page - 1
 
         //signatures
@@ -36,12 +37,7 @@
             formFieldName: id,
             backgroundColor: PSPDFKit.Color.YELLOW,
             blendMode: 'multiply',
-            boundingBox: new PSPDFKit.Geometry.Rect({
-                width,
-                height,
-                top,
-                left,
-            }),
+            boundingBox: new PSPDFKit.Geometry.Rect(annotParams.signature),
         })
 
         const formField = new PSPDFKit.FormFields.SignatureFormField({
@@ -62,12 +58,7 @@
             formFieldName: id_city,
             backgroundColor: PSPDFKit.Color.DarkBlue,
             blendMode: 'multiply',
-            boundingBox: new PSPDFKit.Geometry.Rect({
-                width: width * 1.2,
-                height: height / 2,
-                top: top + height + date_place_top_shift + 25,
-                left: left,
-            }),
+            boundingBox: new PSPDFKit.Geometry.Rect(annotParams.city),
             fontSize: 8
         })
 
@@ -86,12 +77,7 @@
             formFieldName: id_date,
             backgroundColor: PSPDFKit.Color.DarkBlue,
             blendMode: 'multiply',
-            boundingBox: new PSPDFKit.Geometry.Rect({
-                width: width * 1.55,
-                height: height / 2,
-                top: top + 2 * height + date_place_top_shift + 23,
-                left: left
-            }),
+            boundingBox: new PSPDFKit.Geometry.Rect(annotParams.date),
             fontSize: 8,
             backgroundColor: PSPDFKit.Color.TRANSPARENT,
             fontColor: PSPDFKit.Color.Black,
@@ -122,12 +108,7 @@
             pageIndex: page,
             formFieldName: id_date_label,
             blendMode: 'multiply',
-            boundingBox: new PSPDFKit.Geometry.Rect({
-                width: width * 0.75,
-                height: height / 2,
-                top: top + height + 23 + label_top_shift + date_place_top_shift + (height) + 4,
-                left: left
-            }),
+            boundingBox: new PSPDFKit.Geometry.Rect(annotParams.datelabel),
             fontSize: 8,
             backgroundColor: PSPDFKit.Color.TRANSPARENT,
             fontColor: PSPDFKit.Color.Black,
@@ -149,12 +130,7 @@
             pageIndex: page,
             formFieldName: id_city_label,
             blendMode: 'multiply',
-            boundingBox: new PSPDFKit.Geometry.Rect({
-                width: width * 1.2,
-                height: height / 2,
-                top: top + height + 25 + label_top_shift + date_place_top_shift,
-                left: left
-            }),
+            boundingBox: new PSPDFKit.Geometry.Rect(annotParams.citylabel),
             fontSize: 8,
             backgroundColor: PSPDFKit.Color.TRANSPARENT,
             fontColor: PSPDFKit.Color.Black,

EnvelopeGenerator.Web/wwwroot/js/network.js

@@ -204,10 +204,22 @@ async function logout() {
     });
 }
 
-function getAnnotationParams() {
+function getAnnotationParams(leftInInch = 0, topInInch = 0, inchToPointFactor = 72) {
     return fetch(`${window.location.origin}/api/Config/Annotations`, {
         credentials: 'include',
         method: 'GET'
     })
-    .then(res => res.json());
+    .then(res => res.json())
+    .then(annotParams => {
+        for(var key in annotParams){
+            var annot = annotParams[key];
+            annot.width *= inchToPointFactor;
+            annot.height *= inchToPointFactor;
+            annot.left += leftInInch;
+            annot.left *= inchToPointFactor;
+            annot.top += topInInch;
+            annot.top *= inchToPointFactor;
+        }
+        return annotParams;
+    });
 }

EnvelopeGenerator.Web/wwwroot/js/network.min.js

@@ -1 +1 @@
-async function setLangAsync(n,t){document.getElementById("selectedFlag").className="fi "+t+" me-2";await fetch(`/lang/${n}`,{method:"POST",headers:{"Content-Type":"application/json"}})}async function setLanguage(n){const t=await fetch("/lang",{method:"GET",headers:{"Content-Type":"application/json"}}).then(n=>n.json()).then(t=>t.includes(n)).catch(()=>!1);if(t)return await fetch(`/lang/${n}`,{method:"POST",headers:{"Content-Type":"application/json"}}).then(n=>{if(n.redirected)window.location.href=n.url;else if(!n.ok)return Promise.reject("Failed to set language")})}async function logout(){return await fetch(`/auth/logout`,{method:"POST",headers:{"Content-Type":"application/json"}}).then(n=>{n.ok&&(window.location.href="/")})}function getAnnotationParams(){return fetch(`${window.location.origin}/api/Config/Annotations`,{credentials:"include",method:"GET"}).then(n=>n.json())}class Network{async getEnvelope(n){return this.getRequest(`/api/envelope/${n}`).then(this.wrapJsonResponse.bind(this))}async postEnvelope(n,t,i){return this.postRequest(`/api/envelope/${n}?index=${t}`,i).then(this.wrapJsonResponse.bind(this))}async getDocument(n,t){return this.getRequest(`/api/document/${n}?index=${t}`).then(this.wrapBinaryResponse.bind(this))}async openDocument(n){return this.postRequest(`/api/document/${n}`,{}).then(this.wrapJsonResponse.bind(this))}withCSRFToken(n){const t=getCSRFToken;let i=n.headers;return n.headers={...i,...t},n}getCSRFToken(){const n=document.getElementsByName("__RequestVerificationToken")[0].value;return{"X-XSRF-TOKEN":n}}getRequest(n){const t=this.getCSRFToken(),i={credentials:"include",method:"GET",headers:{...t}};return fetch(n,i)}postRequest(n,t){const i=this.getCSRFToken(),r={credentials:"include",method:"POST",headers:{...i,"Content-Type":"application/json; charset=utf-8"},body:JSON.stringify(t)};return fetch(n,r)}async wrapJsonResponse(n){return await this.wrapResponse(n,async n=>await n.json())}async wrapBinaryResponse(n){return await this.wrapResponse(n,async n=>await n.arrayBuffer())}async wrapResponse(n,t){let i;if(n.status===200){const r=await t(n);i=new WrappedResponse(r,null)}else if(n.status===403){const t=await n.json();i=new WrappedResponse(null,t)}else i=new WrappedResponse(null,null);return i}}class WrappedResponse{constructor(n,t){this.data=n;this.error=t;this.fatal=n===null&&t===null}}
+async function setLangAsync(n,t){document.getElementById("selectedFlag").className="fi "+t+" me-2";await fetch(`/lang/${n}`,{method:"POST",headers:{"Content-Type":"application/json"}})}async function setLanguage(n){const t=await fetch("/lang",{method:"GET",headers:{"Content-Type":"application/json"}}).then(n=>n.json()).then(t=>t.includes(n)).catch(()=>!1);if(t)return await fetch(`/lang/${n}`,{method:"POST",headers:{"Content-Type":"application/json"}}).then(n=>{if(n.redirected)window.location.href=n.url;else if(!n.ok)return Promise.reject("Failed to set language")})}async function logout(){return await fetch(`/auth/logout`,{method:"POST",headers:{"Content-Type":"application/json"}}).then(n=>{n.ok&&(window.location.href="/")})}function getAnnotationParams(n=0,t=0,i=72){return fetch(`${window.location.origin}/api/Config/Annotations`,{credentials:"include",method:"GET"}).then(n=>n.json()).then(r=>{var f,u;for(f in r)u=r[f],u.width*=i,u.height*=i,u.left+=n,u.left*=i,u.top+=t,u.top*=i;return r})}class Network{async getEnvelope(n){return this.getRequest(`/api/envelope/${n}`).then(this.wrapJsonResponse.bind(this))}async postEnvelope(n,t,i){return this.postRequest(`/api/envelope/${n}?index=${t}`,i).then(this.wrapJsonResponse.bind(this))}async getDocument(n,t){return this.getRequest(`/api/document/${n}?index=${t}`).then(this.wrapBinaryResponse.bind(this))}async openDocument(n){return this.postRequest(`/api/document/${n}`,{}).then(this.wrapJsonResponse.bind(this))}withCSRFToken(n){const t=getCSRFToken;let i=n.headers;return n.headers={...i,...t},n}getCSRFToken(){const n=document.getElementsByName("__RequestVerificationToken")[0].value;return{"X-XSRF-TOKEN":n}}getRequest(n){const t=this.getCSRFToken(),i={credentials:"include",method:"GET",headers:{...t}};return fetch(n,i)}postRequest(n,t){const i=this.getCSRFToken(),r={credentials:"include",method:"POST",headers:{...i,"Content-Type":"application/json; charset=utf-8"},body:JSON.stringify(t)};return fetch(n,r)}async wrapJsonResponse(n){return await this.wrapResponse(n,async n=>await n.json())}async wrapBinaryResponse(n){return await this.wrapResponse(n,async n=>await n.arrayBuffer())}async wrapResponse(n,t){let i;if(n.status===200){const r=await t(n);i=new WrappedResponse(r,null)}else if(n.status===403){const t=await n.json();i=new WrappedResponse(null,t)}else i=new WrappedResponse(null,null);return i}}class WrappedResponse{constructor(n,t){this.data=n;this.error=t;this.fatal=n===null&&t===null}}