Add elements first draft

src/main/resources/messages_en_GB.properties

@@ -25,6 +25,9 @@ downloadPdf=Download PDF
 text=Text
 font=Font
 element-id=Element ID
+group-id=Group ID
+comma-separated-values=Element values (separated by commas)
+element-value=Element value
 selectFillter=-- Select --
 pageNum=Page Number 
 sizes.small=Small
@@ -521,8 +524,11 @@ add-elements.header=Add Elements
 add-elements.upload=Upload Image
 add-elements.draw=Draw Signature
 add-elements.text=Text Input
-add-elements.textbox=Text Box
 add-elements.checkbox=Check Box
+add-elements.dropdown=Dropdown
+add-elements.optionList=Option List
+add-elements.radioButton=Radio Button
+add-elements.textbox=Text Box
 add-elements.clear=Clear
 add-elements.add=Add
 

src/main/resources/static/js/draggable-utils.js

@@ -184,7 +184,9 @@ const DraggableUtils = {
     parseTransform(element) {
         
     },
-    async getOverlayedPdfDocument() {
+    async getOverlaidPdfDocument() {
+        var radioGroups = new Map();
+
         const pdfBytes = await this.pdfDoc.getData();
         const pdfDocModified = await PDFLib.PDFDocument.load(pdfBytes, { ignoreEncryption: true });
         this.storePageContents();
@@ -213,18 +215,46 @@ const DraggableUtils = {
 
                     // draw the image
                     page.drawImage(pdfImageObject, translatedPositions);
-                } else if (draggableElement.firstChild.nodeName == "INPUT" && draggableElement.firstChild.getAttribute("type") == "textarea") {
-                    const translatedPositions = this.rescaleForPage(page, draggableData, offsetWidth, offsetHeight);
-                    const fieldKey = draggableElement.firstChild.getAttribute("name");
-                    const form = pdfDocModified.getForm();
-                    const field = form.createTextField(fieldKey);
-                    field.addToPage(page, translatedPositions);
                 } else if (draggableElement.firstChild.nodeName == "INPUT" && draggableElement.firstChild.getAttribute("type") == "checkbox") {
                     const translatedPositions = this.rescaleForPage(page, draggableData, offsetWidth, offsetHeight);
                     const fieldKey = draggableElement.firstChild.getAttribute("name");
                     const form = pdfDocModified.getForm();
                     const field = form.createCheckBox(fieldKey);
                     field.addToPage(page, translatedPositions);
+                } else if (draggableElement.firstChild.nodeName == "DIV" && draggableElement.firstChild.getAttribute("type") == "dropdown") {
+                    const translatedPositions = this.rescaleForPage(page, draggableData, offsetWidth, offsetHeight);
+                    const fieldKey = draggableElement.firstChild.getAttribute("name");
+                    const fieldValues = JSON.parse(draggableElement.firstChild.getAttribute("values"));
+                    const form = pdfDocModified.getForm();
+                    const field = form.createDropdown(fieldKey);
+                    field.addOptions(fieldValues)
+                    field.addToPage(page, translatedPositions);
+                } else if (draggableElement.firstChild.nodeName == "DIV" && draggableElement.firstChild.getAttribute("type") == "optionList") {
+                    const translatedPositions = this.rescaleForPage(page, draggableData, offsetWidth, offsetHeight);
+                    const fieldKey = draggableElement.firstChild.getAttribute("name");
+                    const fieldValues = JSON.parse(draggableElement.firstChild.getAttribute("values"));
+                    const form = pdfDocModified.getForm();
+                    const field = form.createOptionList(fieldKey);
+                    field.addOptions(fieldValues)
+                    field.addToPage(page, translatedPositions);
+                } else if (draggableElement.firstChild.nodeName == "INPUT" && draggableElement.firstChild.getAttribute("type") == "radio") { //
+                    const translatedPositions = this.rescaleForPage(page, draggableData, offsetWidth, offsetHeight);
+                    const fieldKey = draggableElement.firstChild.getAttribute("name");
+                    const buttonValue = draggableElement.firstChild.getAttribute("buttonValue");
+                    const form = pdfDocModified.getForm();
+                    var radioGroup = radioGroups.get(fieldKey);
+                    if (!radioGroup) {
+                        radioGroup = form.createRadioGroup(fieldKey);
+                        radioGroups.set(fieldKey, radioGroup);
+                    }
+                    radioGroup.addOptionToPage(buttonValue, page, translatedPositions)
+                    console.log("added radio")
+                } else if (draggableElement.firstChild.nodeName == "INPUT" && draggableElement.firstChild.getAttribute("type") == "textarea") {
+                    const translatedPositions = this.rescaleForPage(page, draggableData, offsetWidth, offsetHeight);
+                    const fieldKey = draggableElement.firstChild.getAttribute("name");
+                    const form = pdfDocModified.getForm();
+                    const field = form.createTextField(fieldKey);
+                    field.addToPage(page, translatedPositions);
                 }
             }
         }

src/main/resources/templates/add-elements.html

@@ -64,16 +64,6 @@
                         </script>
 
                         <!-- add elements UIs -->
-                        <div class="add-element-list">
-                            <button id="addCheckBoxButton">Add Checkbox</button>
-                            <script>
-                                document.getElementById("addCheckBoxButton").addEventListener("click", () => {
-                                    const inp = document.createElement('input');
-                                    inp.setAttribute("type", "checkbox");
-                                    DraggableUtils.addDraggableElement(inp, false);
-                                });
-                            </script>
-                        </div>
                         <div class="tab-group show-on-file-selected">
                             <div class="tab-container" th:title="#{add-elements.upload}">
                                 <div th:replace="~{fragments/common :: fileSelector(name='image-upload', multiple=true, accept='image/*', inputText=#{imgPrompt})}"></div>
@@ -251,6 +241,92 @@
                                 </th:block>
 
                             </div>
+                            <div class="tab-container" th:title="#{add-elements.checkbox}">
+                                <label class="form-check-label" for="checkboxId" th:text="#{element-id}"></label>
+                                <input type="text" class="form-control" id="checkboxId" name="checkboxId">
+                                <div class="margin-auto-parent">
+                                    <button id="save-checkbox" class="btn btn-outline-success mt-2 margin-center" onclick="addDraggableFromCheckBox()" th:text="#{sign.add}"></button>
+                                </div>
+                                <script>
+                                    function addDraggableFromCheckBox() {
+                                        const id = document.getElementById('checkboxId').value;
+                                        const checkbox = document.createElement('input');
+                                        checkbox.setAttribute('type', 'checkbox');
+                                        checkbox.setAttribute('name', id);
+                                        const wrapper = DraggableUtils.addDraggableElement(checkbox, false);
+                                    }
+                                </script>
+                            </div>
+                            <div class="tab-container" th:title="#{add-elements.dropdown}">
+                                <label class="form-check-label" for="dropdownId" th:text="#{element-id}"></label>
+                                <input type="text" class="form-control" id="dropdownId" name="dropdownId">
+
+                                <label class="form-check-label" for="dropdownValues" th:text="#{comma-separated-values}"></label>
+                                <input type="text" class="form-control" id="dropdownValues" name="dropdownValues">
+
+                                <div class="margin-auto-parent">
+                                    <button id="save-dropdown" class="btn btn-outline-success mt-2 margin-center" onclick="addDraggableFromDropdown()" th:text="#{sign.add}"></button>
+                                </div>
+                                <script th:inline="javascript">
+                                    function addDraggableFromDropdown() {
+                                        const dropdownLabel = /*[[#{add-elements.dropdown}]]*/ '';
+                                        const id = document.getElementById('dropdownId').value;
+                                        const values = document.getElementById('dropdownValues').value.split(",");
+                                        const dropdown = document.createElement('div');
+                                        dropdown.setAttribute('type', 'dropdown');
+                                        dropdown.setAttribute('name', id);
+                                        dropdown.setAttribute('values', JSON.stringify(values));
+                                        dropdown.innerHTML = `${dropdownLabel}: ${id}`;
+                                        const wrapper = DraggableUtils.addDraggableElement(dropdown, true);
+                                    }
+                                </script>
+                            </div>
+                            <div class="tab-container" th:title="#{add-elements.optionList}">
+                                <label class="form-check-label" for="optionListId" th:text="#{element-id}"></label>
+                                <input type="text" class="form-control" id="optionListId" name="optionListId">
+
+                                <label class="form-check-label" for="optionListValues" th:text="#{comma-separated-values}"></label>
+                                <input type="text" class="form-control" id="optionListValues" name="optionListValues">
+
+                                <div class="margin-auto-parent">
+                                    <button id="save-optionList" class="btn btn-outline-success mt-2 margin-center" onclick="addDraggableFromoptionList()" th:text="#{sign.add}"></button>
+                                </div>
+                                <script th:inline="javascript">
+                                    function addDraggableFromoptionList() {
+                                        const optionListLabel = /*[[#{add-elements.optionList}]]*/ '';
+                                        const id = document.getElementById('optionListId').value;
+                                        const values = document.getElementById('optionListValues').value.split(",");
+                                        const optionList = document.createElement('div');
+                                        optionList.setAttribute('type', 'optionList');
+                                        optionList.setAttribute('name', id);
+                                        optionList.setAttribute('values', JSON.stringify(values));
+                                        optionList.innerHTML = `${optionListLabel}: ${id}`;
+                                        const wrapper = DraggableUtils.addDraggableElement(optionList, true);
+                                    }
+                                </script>
+                            </div>
+                            <div class="tab-container" th:title="#{add-elements.radioButton}">
+                                <label class="form-check-label" for="radioButtonId" th:text="#{group-id}"></label>
+                                <input type="text" class="form-control" id="radioButtonId" name="radioButton">
+
+                                <label class="form-check-label" for="radioButtonValue" th:text="#{element-value}"></label>
+                                <input type="text" class="form-control" id="radioButtonValue" name="radioButton">
+
+                                <div class="margin-auto-parent">
+                                    <button id="save-radioButton" class="btn btn-outline-success mt-2 margin-center" onclick="addDraggableFromRadioButton()" th:text="#{sign.add}"></button>
+                                </div>
+                                <script>
+                                    function addDraggableFromRadioButton() {
+                                        const id = document.getElementById('radioButtonId').value;
+                                        const value = document.getElementById('radioButtonValue').value;
+                                        const radioButton = document.createElement('input');
+                                        radioButton.setAttribute('type', 'radio');
+                                        radioButton.setAttribute('name', id);
+                                        radioButton.setAttribute('buttonValue', value);
+                                        const wrapper = DraggableUtils.addDraggableElement(radioButton, false);
+                                    }
+                                </script>
+                            </div>
                             <div class="tab-container" th:title="#{add-elements.textbox}">
                                 <label class="form-check-label" for="textboxId" th:text="#{element-id}"></label>
                                 <input type="text" class="form-control" id="textboxId" name="textboxId">
@@ -272,22 +348,6 @@
                                     }
                                 </script>
                             </div>
-                            <div class="tab-container" th:title="#{add-elements.checkbox}">
-                                <label class="form-check-label" for="checkboxId" th:text="#{element-id}"></label>
-                                <input type="text" class="form-control" id="checkboxId" name="checkboxId">
-                                <div class="margin-auto-parent">
-                                    <button id="save-checkbox" class="btn btn-outline-success mt-2 margin-center" onclick="addDraggableFromCheckBox()" th:text="#{sign.add}"></button>
-                                </div>
-                                <script>
-                                    function addDraggableFromCheckBox() {
-                                        const id = document.getElementById('checkboxId').value;
-                                        const checkbox = document.createElement('input');
-                                        checkbox.setAttribute('type', 'checkbox');
-                                        checkbox.setAttribute('name', id);
-                                        const wrapper = DraggableUtils.addDraggableElement(checkbox, false);
-                                    }
-                                </script>
-                            </div>
 
                         </div>
 
@@ -338,6 +398,13 @@
                                     top: 0px;
                                     left: 0;
                                 }
+                                .draggable-canvas > div {
+                                    width: 100%;
+                                    height: 100%;
+                                    line-height: normal;
+                                    color: rgb(var(--base-font-color));
+                                    background-color: rgba(var(--body-background-color), 0.5);
+                                }
                             </style>
                         </div>
 
@@ -348,7 +415,7 @@
                         
                         <script>
                             document.getElementById("download-pdf").addEventListener('click', async() => {
-                                const modifiedPdf = await DraggableUtils.getOverlayedPdfDocument();
+                                const modifiedPdf = await DraggableUtils.getOverlaidPdfDocument();
                                 const modifiedPdfBytes = await modifiedPdf.save();
                                 const blob = new Blob([modifiedPdfBytes], { type: 'application/pdf' });
                                 const link = document.createElement('a');

src/main/resources/templates/other/add-image.html

@@ -122,7 +122,7 @@
                         </div>
                         <script>
                             document.getElementById("download-pdf").addEventListener('click', async() => {
-                                const modifiedPdf = await DraggableUtils.getOverlayedPdfDocument();
+                                const modifiedPdf = await DraggableUtils.getOverlaidPdfDocument();
                                 const modifiedPdfBytes = await modifiedPdf.save();
                                 const blob = new Blob([modifiedPdfBytes], { type: 'application/pdf' });
                                 const link = document.createElement('a');

src/main/resources/templates/sign.html

@@ -299,7 +299,7 @@ select#font-select, select#font-select option {
                         
                         <script>
                             document.getElementById("download-pdf").addEventListener('click', async() => {
-                                const modifiedPdf = await DraggableUtils.getOverlayedPdfDocument();
+                                const modifiedPdf = await DraggableUtils.getOverlaidPdfDocument();
                                 const modifiedPdfBytes = await modifiedPdf.save();
                                 const blob = new Blob([modifiedPdfBytes], { type: 'application/pdf' });
                                 const link = document.createElement('a');