From 46684d0dd5494e66b8906c7f521770868a681a00 Mon Sep 17 00:00:00 2001
From: Jakob Wierzba <git@jakobwierzba.de>
Date: Wed, 20 Aug 2025 10:44:40 +0200
Subject: [PATCH 1/2] fix pdf redaction geometry calculations w.r.t. browser
 page zoom

---
 .../components/redaction/pdf-redaction.vue    | 68 ++++++++++++++-----
 1 file changed, 50 insertions(+), 18 deletions(-)

diff --git a/frontend/javascript/components/redaction/pdf-redaction.vue b/frontend/javascript/components/redaction/pdf-redaction.vue
index 0dc2d508a..5bb368e88 100644
--- a/frontend/javascript/components/redaction/pdf-redaction.vue
+++ b/frontend/javascript/components/redaction/pdf-redaction.vue
@@ -244,7 +244,10 @@
     <div class="row flex-grow-1">
       <div
         class="preview position-relative"
-        :class="{ ['preview--do-paint']: doPaint }"
+        :class="{
+          ['preview--do-paint']: doPaint,
+          ['preview--text-only']: textOnly
+        }"
         ref="containerWrapper"
         @wheel="mouseWheel"
         @pointerleave="pointerLeaveWrapper"
@@ -648,6 +651,9 @@ export default {
         this.page = page
 
         let maxWidth = this.$refs.containerWrapper.offsetWidth
+        if (!this.$refs.containerWrapper) {
+          console.error('containerWrapper is null?')
+        }
         // subtract the paddings (from bootstrap's row child),
         // fall back to the value calculated in default settings (like base font size)
         maxWidth -=
@@ -667,9 +673,10 @@ export default {
         // - but would have to limit effective canvas size to prevent crashes
         renderDensityFactor = Math.max(minRenderWidth / window.innerWidth, 1.0)
 
-        const pageWidth = page.view[2]
-        const scaleFactor = (renderDensityFactor * maxWidth) / pageWidth
-        const viewport = page.getViewport({ scale: scaleFactor })
+        this.intrinsicPageWidth = page.view[2]
+        this.intrinsicpageHeight = page.view[3]
+        this.scaleFactor = (renderDensityFactor * maxWidth) / this.intrinsicPageWidth
+        const viewport = page.getViewport({ scale: this.scaleFactor })
 
         this.viewport = viewport
         const canvas = this.canvas
@@ -681,11 +688,11 @@ export default {
         const hPx = viewport.height / renderDensityFactor + 'px'
         console.log('PdfRedaction loadPage', {
           renderDensityFactor,
-          scaleFactor,
+          scaleFactor: this.scaleFactor,
           maxWidth,
           canvasViewportSize: [viewport.width, viewport.height],
           canvasCss: [wPx, hPx],
-          pageSize: [pageWidth, page.view[3]]
+          pageSize: [this.intrinsicPageWidth, this.intrinsicPageHeight]
         })
         canvas.style.width = wPx
         canvas.style.height = hPx
@@ -910,9 +917,8 @@ export default {
         }
       })
       return {
-        width: this.viewport.width,
-        height: this.viewport.height,
-        scaleFactor: this.scaleFactor,
+        width: this.intrinsicPageWidth,
+        height: this.intrinsicPageHeight,
         pageNumber,
         rects: this.rectanglesPerPage[pageNumber],
         texts
@@ -955,6 +961,7 @@ export default {
       this.drawRectangles()
     },
     mouseDown(e, override) {
+      if (e.button !== 0) return
       if (!this.doPaint && !override) {
         return
       }
@@ -971,6 +978,9 @@ export default {
         console.log(selection)
         this.startDrag = null
         this.handleSelection(selection)
+        // TODO: in Firefox, selection can be the outer .redactContainer
+        // when cursor/drag crosses the center??
+        // the following command then removes *the whole div*
         selection.removeAllRanges()
         return
       }
@@ -981,6 +991,9 @@ export default {
 
       const endDrag = this.endDrag
       this.endDrag = null
+      if (endDrag === null) {
+        return
+      }
       if (
         Math.abs(endDrag[0] - this.startDrag[0]) < 3 &&
         Math.abs(endDrag[1] - this.startDrag[1]) < 3
@@ -1009,7 +1022,12 @@ export default {
 
       this.addAction({
         type: 'redact',
-        rects: [[x, y, w, h]],
+        rects: [[
+          x / this.scaleFactor,
+          y / this.scaleFactor,
+          w / this.scaleFactor,
+          h / this.scaleFactor
+        ]],
         page: this.currentPage,
         texts
       })
@@ -1208,21 +1226,30 @@ export default {
       }
       this.applyActionsOnPageLoad()
     },
-    drawRectangle(ctx, rect) {
+    drawRectangle(ctx, rect, doScale = false) {
       const [x, y, w, h] = rect
+      const f = doScale ? this.scaleFactor : 1
       ctx.fillStyle = '#000'
-      ctx.fillRect(x, y, w, h)
+      ctx.fillRect(x * f, y * f, w * f, h * f)
     },
     drawRectangles() {
-      const ctx = this.redactCanvas.getContext('2d')
+      const ctx = this.redactCanvas.getContext?.('2d')
+      if (!ctx) {
+        console.warn('assume text mode, bail')
+        return
+      }
       ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
       if (this.rectanglesPerPage[this.currentPage] !== undefined) {
         this.rectanglesPerPage[this.currentPage].forEach((r) => {
-          this.drawRectangle(ctx, r)
+          this.drawRectangle(ctx, r, true)
         })
       }
       if (this.startDrag && this.endDrag) {
-        this.drawRectangle(ctx, this.getRect(this.startDrag, this.endDrag))
+        this.drawRectangle(
+          ctx,
+          this.getRect(this.startDrag, this.endDrag),
+          false
+        )
       }
     },
     applyActionsOnPageLoad() {
@@ -1425,7 +1452,12 @@ export default {
             textAfter: text.replace(match, replace)
           }
         ],
-        rects: [[x - padding, y, width + padding * 2, height]],
+        rects: [[
+          (x - padding) / this.scaleFactor,
+          y / this.scaleFactor,
+          (width + padding * 2) / this.scaleFactor,
+          height / this.scaleFactor, 
+        ]],
         page: this.currentPage
       }
     },
@@ -1521,8 +1553,8 @@ export default {
   overflow: hidden;
 }
 
-.preview--do-paint[style],
-.preview--do-paint .redactContainer[style] {
+.preview--do-paint.preview--text-only[style],
+.preview--do-paint.preview--text-only .redactContainer[style] {
   user-select: text !important;
 }
 

From 86c68c94e14a6911c708216d298d4d25d29cc452 Mon Sep 17 00:00:00 2001
From: Jakob Wierzba <git@jakobwierzba.de>
Date: Mon, 1 Sep 2025 12:37:56 +0200
Subject: [PATCH 2/2] =?UTF-8?q?fix=20redaction=20coordinates=20for=20PDF?=
 =?UTF-8?q?=20pages=20rotated=20by=2090=C2=B0/270=C2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../javascript/components/redaction/pdf-redaction.vue    | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/javascript/components/redaction/pdf-redaction.vue b/frontend/javascript/components/redaction/pdf-redaction.vue
index 5bb368e88..78d00f830 100644
--- a/frontend/javascript/components/redaction/pdf-redaction.vue
+++ b/frontend/javascript/components/redaction/pdf-redaction.vue
@@ -673,8 +673,10 @@ export default {
         // - but would have to limit effective canvas size to prevent crashes
         renderDensityFactor = Math.max(minRenderWidth / window.innerWidth, 1.0)
 
-        this.intrinsicPageWidth = page.view[2]
-        this.intrinsicpageHeight = page.view[3]
+        // is the page rotated by ±{90, 270}?
+        const flipWidthHeight = Math.abs(page.rotate) % 180 === 90
+        this.intrinsicPageWidth = flipWidthHeight ? page.view[3] : page.view[2]
+        this.intrinsicPageHeight = flipWidthHeight ? page.view[2] : page.view[3]
         this.scaleFactor = (renderDensityFactor * maxWidth) / this.intrinsicPageWidth
         const viewport = page.getViewport({ scale: this.scaleFactor })
 
@@ -687,6 +689,9 @@ export default {
         const wPx = viewport.width / renderDensityFactor + 'px'
         const hPx = viewport.height / renderDensityFactor + 'px'
         console.log('PdfRedaction loadPage', {
+          flipWidthHeight,
+          page,
+          viewport,
           renderDensityFactor,
           scaleFactor: this.scaleFactor,
           maxWidth,