I'm developing a web app using Angular, KonvaJS, and the ngx-extended-pdf-viewer library for digital document signing. In this web app, users who prepare documents add input fields made up of Konva groups containing rectangles and text. These fields need to be filled by signers. But I'm facing a problem with input field sizes that show up differently for signers.
I've ensured that the input field sizes are correctly set and saved in a MongoDB database through the backend. When the document is shown, the input fields are in the right positions for both document preparers and signers. However, when I adjust the sizes of these input fields, they look fine for the preparer but show up wrong for the signer. Interestingly, if I only move the input fields around without changing their sizes, they appear correctly for the signer.
Screenschots:
NOTE: To differentiate the Preparer and Signer view, I just added a background color!
To give more context, I've used the ngx-extended-pdf-viewer library and created a special container/wrapper using a <div> to hold Konva layers. Inside this container, Konva groups with input fields are drawn. This container maintains the same size for both preparers and signers. Importantly, both preparers and signers use the exact same code to display these Konva groups.
I've tried different approaches, including using konva layer scaling value from the preparer's view, but I haven't been able to fix the problem of inconsistent input field sizes.
I'm seeking help from the community to understand this issue better and find a way to make sure that input field sizes are the same for both document preparers and signers. If you have any ideas, suggestions, or solutions, I'd greatly appreciate your input. Thank you for your time and assistance in helping me solve this issue.
