Individual rotate

src-ui/src/app/components/common/pdf-editor/pdf-editor.component.html

@@ -29,6 +29,14 @@
     @for (p of pages; track p.page; let i = $index) {
       <div class="page-item rounded p-2" cdkDrag (click)="toggleSelection(i)" [class.selected]="p.selected">
         <div class="btn-toolbar hover-actions z-10">
+          <div class="btn-group me-2">
+            <button class="btn btn-sm btn-dark" (click)="rotate(i); $event.stopPropagation()">
+              <i-bs name="arrow-counterclockwise"></i-bs>
+            </button>
+            <button class="btn btn-sm btn-dark" (click)="rotate(i); $event.stopPropagation()">
+              <i-bs name="arrow-clockwise"></i-bs>
+            </button>
+          </div>
           <div class="btn-group">
             <button class="btn btn-sm btn-dark text-danger" (click)="remove(i); $event.stopPropagation()">
               <i-bs name="trash"></i-bs>

src-ui/src/app/components/common/pdf-editor/pdf-editor.component.spec.ts

@@ -38,5 +38,7 @@ describe('PDFEditorComponent', () => {
     component.pages.push({ page: 2, rotate: 0, splitAfter: false })
     component.drop({ previousIndex: 0, currentIndex: 1 } as any)
     expect(component.pages[0].page).toBe(2)
+    component.rotate(0)
+    expect(component.pages[0].rotate).toBe(90)
   })
 })

src-ui/src/app/components/common/pdf-editor/pdf-editor.component.ts

@@ -54,6 +54,14 @@ export class PDFEditorComponent extends ConfirmDialogComponent {
     }))
   }
 
+  toggleSelection(i: number) {
+    this.pages[i].selected = !this.pages[i].selected
+  }
+
+  rotate(i: number) {
+    this.pages[i].rotate = (this.pages[i].rotate + 90) % 360
+  }
+
   rotateSelected(dir: number) {
     for (let p of this.pages) {
       if (p.selected) {
@@ -70,10 +78,6 @@ export class PDFEditorComponent extends ConfirmDialogComponent {
     this.pages[i].splitAfter = !this.pages[i].splitAfter
   }
 
-  toggleSelection(i: number) {
-    this.pages[i].selected = !this.pages[i].selected
-  }
-
   selectAll() {
     this.pages.forEach((p) => (p.selected = true))
   }