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

@@ -58,12 +58,7 @@
             formFieldName: id_city,
             backgroundColor: PSPDFKit.Color.DarkBlue,
             blendMode: 'multiply',
-            boundingBox: new PSPDFKit.Geometry.Rect({
+            boundingBox: new PSPDFKit.Geometry.Rect(annotParams.city),
-                width: width * 1.2,
-                height: height / 2,
-                top: top + height + date_place_top_shift + 25,
-                left: left,
-            }),
             fontSize: 8
         })
 
@@ -82,12 +77,7 @@
             formFieldName: id_date,
             backgroundColor: PSPDFKit.Color.DarkBlue,
             blendMode: 'multiply',
-            boundingBox: new PSPDFKit.Geometry.Rect({
+            boundingBox: new PSPDFKit.Geometry.Rect(annotParams.date),
-                width: width * 1.55,
-                height: height / 2,
-                top: top + 2 * height + date_place_top_shift + 23,
-                left: left
-            }),
             fontSize: 8,
             backgroundColor: PSPDFKit.Color.TRANSPARENT,
             fontColor: PSPDFKit.Color.Black,
@@ -118,12 +108,7 @@
             pageIndex: page,
             formFieldName: id_date_label,
             blendMode: 'multiply',
-            boundingBox: new PSPDFKit.Geometry.Rect({
+            boundingBox: new PSPDFKit.Geometry.Rect(annotParams.datelabel),
-                width: width * 0.75,
-                height: height / 2,
-                top: top + height + 23 + label_top_shift + date_place_top_shift + (height) + 4,
-                left: left
-            }),
             fontSize: 8,
             backgroundColor: PSPDFKit.Color.TRANSPARENT,
             fontColor: PSPDFKit.Color.Black,
@@ -145,12 +130,7 @@
             pageIndex: page,
             formFieldName: id_city_label,
             blendMode: 'multiply',
-            boundingBox: new PSPDFKit.Geometry.Rect({
+            boundingBox: new PSPDFKit.Geometry.Rect(annotParams.citylabel),
-                width: width * 1.2,
-                height: height / 2,
-                top: top + height + 25 + label_top_shift + date_place_top_shift,
-                left: left
-            }),
             fontSize: 8,
             backgroundColor: PSPDFKit.Color.TRANSPARENT,
             fontColor: PSPDFKit.Color.Black,

EnvelopeGenerator.Web/wwwroot/js/network.js

@@ -215,8 +215,10 @@ function getAnnotationParams(leftInInch = 0, topInInch = 0, inchToPointFactor =
             var annot = annotParams[key];
             annot.width *= inchToPointFactor;
             annot.height *= inchToPointFactor;
-            annot.left = (leftInInch + annot.left) * inchToPointFactor - annot.width / 2;
+            annot.left += leftInInch;
-            annot.top = (topInInch + annot.top) * inchToPointFactor - annot.height / 2;
+            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(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.width/2,u.top=(t+u.top)*i-u.height/2;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}}
+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}}