Group Border Pos fix + Temporal issue Fix + Added Radio Tag at Signer Page

src/components/client/TagsCon.tsx

@@ -695,6 +695,49 @@ const TagsCon: React.FC<TagsConProps> = ({
                         {/* CHECKBOX FIELD - END */}
 
 
+                        {/* RADIO FIELD - START */}
+                        {
+                            item.type == "RADIO" &&
+                            <div
+                                id={item.navigationOrder}
+                                tabIndex={1}
+                                className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
+                            >
+                                <input
+                                    type="radio"
+                                    name={item.group ?? `radio-group-${item.recipientId}`} // group by recipient or group id
+                                    value={item.id}
+                                    checked={item.checked ?? false}
+                                    onChange={(e) => {
+                                        if (!e.target.checked) return;
+
+                                        // Uncheck all other radio tags in same group, check this one
+                                        setDroppedItems(
+                                            droppedItems.map((tag, i) => {
+                                                if (tag.type !== "RADIO") return tag;
+
+                                                // Same group = same name attribute
+                                                const sameGroup = (item.group && tag.group)
+                                                    ? item.group === tag.group
+                                                    : tag.recipientId === item.recipientId; // fallback
+
+                                                if (!sameGroup) return tag;
+
+                                                return {
+                                                    ...tag,
+                                                    checked: tag.id === item.id,
+                                                    update: true
+                                                };
+                                            })
+                                        );
+                                    }}
+                                    className="w-4 h-4 cursor-pointer accent-[var(--primary)]"
+                                />
+                            </div>
+                        }
+                        {/* RADIO FIELD - END */}
+
+
                         {/* SIGNATURE FIELD - START */}
                         {
                             item.type == "SIGNATURE" &&

src/components/process/processStepTwo/DroppedItemsTagsCon.tsx

@@ -457,23 +457,14 @@ const DroppedItemsTagsCon = forwardRef(({
             return;
         }
 
-        let targetContainer = groupElements[0].parentElement?.parentElement;
-
-        if (!targetContainer) {
-            console.log("No target container found");
-            return;
-        }
-
-        let containerRect = targetContainer.getBoundingClientRect();
-
-        // Use consistent offset values
-        const offsetX = 10;
-        const offsetY = 10;
-
-        // Ensure DOM is fully updated before positioning
         requestAnimationFrame(() => {
             requestAnimationFrame(() => {
-                handleGroupBorderPosition(groupElements, containerRect, offsetX, offsetY);
+                let targetContainer = groupElements[0].parentElement?.parentElement;
+
+                if (!targetContainer) return;
+                let containerRect = targetContainer.getBoundingClientRect();
+
+                handleGroupBorderPosition(groupElements, containerRect, 10, 10);
             });
         });
     };
@@ -489,13 +480,23 @@ const DroppedItemsTagsCon = forwardRef(({
         }
     }, [selectedTag])
 
-    const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, containerRect: DOMRect, offsetX: number, offsetY: number) => {
+    const handleGroupBorderPosition = (
+        groupElements: NodeListOf<HTMLElement>,
+        containerRect: DOMRect,
+        offsetX: number,
+        offsetY: number
+    ) => {
         if (!groupElements || groupElements.length == 0) return;
 
         const groupId = groupElements[0].getAttribute('group');
         if (!groupId) return;
 
-        // Calculate the bounding box of all group elements
+        const scale = scaleFactor ?? 1;
+        const scaleX = renderedWidth && pageWidth ? renderedWidth / pageWidth : 1;
+        const scaleY = renderedHeight && pageHeight ? renderedHeight / pageHeight : 1;
+        const combinedScaleX = scaleX * scale;
+        const combinedScaleY = scaleY * scale;
+
         let minLeft = Infinity, minTop = Infinity, maxRight = -Infinity, maxBottom = -Infinity;
 
         groupElements.forEach(element => {
@@ -503,10 +504,11 @@ const DroppedItemsTagsCon = forwardRef(({
             if (!parentElement) return;
 
             const rect = parentElement.getBoundingClientRect();
-            const relativeLeft = rect.left - containerRect.left;
+
-            const relativeTop = rect.top - containerRect.top;
+            const relativeLeft = (rect.left - containerRect.left) / combinedScaleX;
-            const relativeRight = relativeLeft + rect.width;
+            const relativeTop = (rect.top - containerRect.top) / combinedScaleY;
-            const relativeBottom = relativeTop + rect.height;
+            const relativeRight = relativeLeft + rect.width / combinedScaleX;
+            const relativeBottom = relativeTop + rect.height / combinedScaleY;
 
             minLeft = Math.min(minLeft, relativeLeft);
             minTop = Math.min(minTop, relativeTop);
@@ -514,7 +516,6 @@ const DroppedItemsTagsCon = forwardRef(({
             maxBottom = Math.max(maxBottom, relativeBottom);
         });
 
-        // Add some padding around the group
         const padding = 10;
         minLeft -= padding;
         minTop -= padding;
@@ -524,38 +525,34 @@ const DroppedItemsTagsCon = forwardRef(({
         const width = maxRight - minLeft;
         const height = maxBottom - minTop;
 
-        // Update or create border elements
         const borderPositions = ['top', 'right', 'bottom', 'left'];
 
         borderPositions.forEach(position => {
-            let borderElement = document.querySelector(`[border-group='${groupId}'][border-pos='${position}']`) as HTMLElement;
+            let borderElement = document.querySelector(
+                `[border-group='${groupId}'][border-pos='${position}']`
+            ) as HTMLElement;
 
             if (!borderElement) {
-                // Create border element if it doesn't exist
                 borderElement = document.createElement('div');
                 borderElement.className = `group-border ${position == 'bottom' ? 'bottom-border' : ''}`;
                 borderElement.setAttribute('border-group', groupId);
                 borderElement.setAttribute('border-pos', position);
 
-                // Add the + icon for bottom border
                 if (position == 'bottom') {
                     const addIcon = document.createElement('div');
-                    addIcon.innerHTML = '<IoAdd />'; // You might need to adjust this based on your icon system
+                    addIcon.innerHTML = '<IoAdd />';
                     addIcon.onclick = () => {
-                        // Find the original item to pass to handleAddGroupItemClicked
+                        const originalItem = droppedItems[pageIdkey]?.find(
-                        const originalItem = droppedItems[key]?.find(item => 'group' in item && item.group == groupId);
+                            item => 'group' in item && item.group == groupId
-                        if (originalItem) {
+                        );
-                            handleAddGroupItemClicked(key, originalItem);
+                        if (originalItem) handleAddGroupItemClicked(pageIdkey, originalItem);
-                        }
                     };
                     borderElement.appendChild(addIcon);
                 }
 
-                // Append to container
                 groupElements[0].parentElement?.parentElement?.appendChild(borderElement);
             }
 
-            // Position the border element
             borderElement.style.position = 'absolute';
             borderElement.style.display = 'block';
             borderElement.style.pointerEvents = position == 'bottom' ? 'auto' : 'none';