fix pdf redaction w.r.t. page zoom, cross-browser inaccuracies, text mode, 2nd try

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,12 @@ 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 })
+        // 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 })
 
         this.viewport = viewport
         const canvas = this.canvas
@@ -680,12 +689,15 @@ export default {
         const wPx = viewport.width / renderDensityFactor + 'px'
         const hPx = viewport.height / renderDensityFactor + 'px'
         console.log('PdfRedaction loadPage', {
+          flipWidthHeight,
+          page,
+          viewport,
           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 +922,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 +966,7 @@ export default {
       this.drawRectangles()
     },
     mouseDown(e, override) {
+      if (e.button !== 0) return
       if (!this.doPaint && !override) {
         return
       }
@@ -971,6 +983,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 +996,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 +1027,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 +1231,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 +1457,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 +1558,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;
 }