Add counter clockwise rotation

photown · Dec 27, 2023 · e0c0aba · e0c0aba
1 parent 3fa1e73
commit e0c0aba
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -332,7 +332,7 @@
             </button>
           </div>
           <div class="separator"></div>
-          <button id="rotate" title="Rotate clockwise" disabled>
+          <button id="rotate-clockwise" title="Rotate clockwise" disabled>
             <svg
               xmlns="http://www.w3.org/2000/svg"
               height="32"
@@ -344,6 +344,22 @@
               />
             </svg>
           </button>
+          <button
+            id="rotate-counterclockwise"
+            title="Rotate counter-clockwise"
+            disabled
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              height="32"
+              viewBox="0 -960 960 960"
+              width="32"
+            >
+              <path
+                d="M512.667-120q-46.486 0-91.538-12.897-45.053-12.898-83.54-38.642l23.744-24.564q34.744 22.026 72.539 32.142 37.795 10.115 78.795 10.115 118.795 0 201.91-83.115 83.116-83.116 83.116-201.911 0-118.282-83.116-201.654-83.115-83.372-201.91-83.372h-63.334l87.436 87.436-24.41 27.642-132-132.001 132-131.487 24.41 27.641-87.436 86.923h63.334q132.205 0 225.538 93.303 93.334 93.302 93.334 225.463 0 65.824-25.039 123.863-25.038 58.038-68.538 101.538t-101.509 68.539Q578.444-120 512.667-120ZM266.205-263.077 88.461-440.821l177.744-177.23 177.231 177.23-177.231 177.744Zm0-47.025 129.077-129.077-129.077-129.077-129.077 129.077 129.077 129.077Zm0-129.077Z"
+              />
+            </svg>
+          </button>
         </div>
       </div>
       <div id="socials">

diff --git a/src/Main.ts b/src/Main.ts
@@ -208,7 +208,7 @@ function onPageLoad() {
       }
     });
 
-    view.setOnRotateClickListener(async function () {
+    view.setOnRotateClockwiseClickListener(async function () {
       const formInputValues: FormInputValues = view.extractFormInputValues();
       const overlays: Overlays = extractOverlays();
 
@@ -229,6 +229,27 @@ function onPageLoad() {
       loadPdf(fileName, savedBytes);
     });
 
+    view.setOnRotateCounterClockwiseClickListener(async function () {
+      const formInputValues: FormInputValues = view.extractFormInputValues();
+      const overlays: Overlays = extractOverlays();
+
+      if (
+        overlays.pagesOverlays.size > 0 &&
+        !confirm(
+          "You won't be able to edit the text and/or images you've added after rotating the PDF. Proceed anyway?"
+        )
+      ) {
+        return;
+      }
+
+      const savedBytes = await pdfDocument.savePdf(
+        formInputValues,
+        overlays,
+        /* rotateBy = */ -90
+      );
+      loadPdf(fileName, savedBytes);
+    });
+
     view.setOnSaveClickedListener(async function () {
       const formInputValues: FormInputValues = view.extractFormInputValues();
       const overlays: Overlays = extractOverlays();

diff --git a/src/View.ts b/src/View.ts
@@ -50,9 +50,12 @@ export class View {
     (document.getElementById("next") as HTMLElement).removeAttribute(
       "disabled"
     );
-    (document.getElementById("rotate") as HTMLElement).removeAttribute(
-      "disabled"
-    );
+    (
+      document.getElementById("rotate-clockwise") as HTMLElement
+    ).removeAttribute("disabled");
+    (
+      document.getElementById("rotate-counterclockwise") as HTMLElement
+    ).removeAttribute("disabled");
   }
 
   public disableNavButtons() {
@@ -84,10 +87,13 @@ export class View {
       "disabled",
       "true"
     );
-    (document.getElementById("rotate") as HTMLElement).setAttribute(
+    (document.getElementById("rotate-clockwise") as HTMLElement).setAttribute(
       "disabled",
       "true"
     );
+    (
+      document.getElementById("rotate-counterclockwise") as HTMLElement
+    ).setAttribute("disabled", "true");
   }
 
   public setOnNextClickedListener(onClickListener: () => void) {
@@ -135,11 +141,21 @@ export class View {
     );
   }
 
-  public setOnRotateClickListener(onRotateClickListener: () => Promise<void>) {
-    (document.getElementById("rotate") as HTMLElement).onclick =
+  public setOnRotateClockwiseClickListener(
+    onRotateClickListener: () => Promise<void>
+  ) {
+    (document.getElementById("rotate-clockwise") as HTMLElement).onclick =
       onRotateClickListener;
   }
 
+  public setOnRotateCounterClockwiseClickListener(
+    onRotateClickListener: () => Promise<void>
+  ) {
+    (
+      document.getElementById("rotate-counterclockwise") as HTMLElement
+    ).onclick = onRotateClickListener;
+  }
+
   public setOnCurrentPageFocusOutListener(
     onFocusOutListener: (event: FocusEvent) => void
   ) {