feat(rotate,delete-pages): Add custom rotation angles and enhance page management UI

- Add TypeScript type definitions for merge and alternate-merge Web Workers
- Implement custom rotation angle input with increment/decrement controls for rotate tool
- Extend delete-pages tool to render page thumbnails for better UX
- Hide number input spin buttons across all number inputs via CSS
- Refactor rotateAll function to accept angle parameter instead of direction multiplier
- Update fileHandler to support delete-pages tool thumbnail rendering
- Improve type safety in alternate-merge logic with proper interface definitions
- Enhance rotate tool UI with custom angle input field and adjustment buttons
This commit is contained in:
abdullahalam123
2025-12-01 14:54:46 +05:30
parent c5764e4172
commit 09436a689d
10 changed files with 397 additions and 109 deletions

View File

@@ -117,7 +117,7 @@ async function handleSinglePdfUpload(toolId, file) {
.toString();
}
if (toolId === 'organize' || toolId === 'rotate') {
if (toolId === 'organize' || toolId === 'rotate' || toolId === 'delete-pages') {
await renderPageThumbnails(toolId, state.pdfDoc);
if (toolId === 'rotate') {
@@ -134,14 +134,19 @@ async function handleSinglePdfUpload(toolId, file) {
const rotateAllRightBtn = document.getElementById(
'rotate-all-right-btn'
);
const rotateAllCustomBtn = document.getElementById('rotate-all-custom-btn');
const rotateAllCustomInput = document.getElementById('custom-rotate-all-input') as HTMLInputElement;
const rotateAllDecrementBtn = document.getElementById('rotate-all-decrement-btn');
const rotateAllIncrementBtn = document.getElementById('rotate-all-increment-btn');
rotateAllControls.classList.remove('hidden');
createIcons({ icons });
const rotateAll = (direction) => {
const rotateAll = (angle: number) => {
// Update rotation state for ALL pages (including unrendered ones)
for (let i = 0; i < rotationState.length; i++) {
rotationState[i] = (rotationState[i] + direction * 90 + 360) % 360;
rotationState[i] = (rotationState[i] + angle);
}
// Update DOM for currently rendered pages
@@ -149,15 +154,44 @@ async function handleSinglePdfUpload(toolId, file) {
const pageIndex = parseInt((item as HTMLElement).dataset.pageIndex || '0');
const newRotation = rotationState[pageIndex];
(item as HTMLElement).dataset.rotation = newRotation.toString();
const thumbnail = item.querySelector('canvas, img');
if (thumbnail) {
(thumbnail as HTMLElement).style.transform =
`rotate(${newRotation}deg)`;
}
const input = item.querySelector('input');
if (input) {
input.value = newRotation.toString();
}
});
};
rotateAllLeftBtn.onclick = () => rotateAll(-1);
rotateAllRightBtn.onclick = () => rotateAll(1);
rotateAllLeftBtn.onclick = () => rotateAll(-90);
rotateAllRightBtn.onclick = () => rotateAll(90);
if (rotateAllCustomBtn && rotateAllCustomInput) {
rotateAllCustomBtn.onclick = () => {
const angle = parseInt(rotateAllCustomInput.value);
if (!isNaN(angle) && angle !== 0) {
rotateAll(angle);
}
};
if (rotateAllDecrementBtn) {
rotateAllDecrementBtn.onclick = () => {
let current = parseInt(rotateAllCustomInput.value) || 0;
rotateAllCustomInput.value = (current - 1).toString();
};
}
if (rotateAllIncrementBtn) {
rotateAllIncrementBtn.onclick = () => {
let current = parseInt(rotateAllCustomInput.value) || 0;
rotateAllCustomInput.value = (current + 1).toString();
};
}
}
}
}