From 920dcd0879710742669659d205dbb2d27e9af285 Mon Sep 17 00:00:00 2001
From: Richard Eckart de Castilho <richard.eckart@gmail.com>
Date: Sat, 6 Jan 2024 19:53:28 +0100
Subject: [PATCH] #4430 -Highlight rows may get merged in PDF editor at high
 scale factors

- Remove the scale factor from the merge margin calculation to fix the issue
- Improve border and selection marker widths as scale factor increases (i.e. do not scale them along linarly)
- Make the border and selection marker a bit more transparent so text is better readable
---
 .../src/main/ts/src/PdfAnnotationEditor.css   |  8 ++-
 .../src/pdfanno/core/src/render/renderSpan.ts | 54 +++++++++++--------
 2 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/inception/inception-pdf-editor2/src/main/ts/src/PdfAnnotationEditor.css b/inception/inception-pdf-editor2/src/main/ts/src/PdfAnnotationEditor.css
index 87435dc8107..341bb4d89a0 100644
--- a/inception/inception-pdf-editor2/src/main/ts/src/PdfAnnotationEditor.css
+++ b/inception/inception-pdf-editor2/src/main/ts/src/PdfAnnotationEditor.css
@@ -15,16 +15,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+:root {
+  --marker-focus-width: 2px;
+}
+
  .marker-matchfocus {
  	background-color: rgba(255, 165, 0, 0.4);
   border-color: rgba(255, 165, 0, 1.0);
  }
 
 .anno-span__area.marker-focus {
-  box-shadow: 0 2px 0px 0px rgba(255,165,0) !important;
+  box-shadow: 0 var(--marker-focus-width) 0px 0px rgba(255, 165, 0, 0.6) !important;
 }
 
 .anno-knob.marker-focus {
-  box-shadow: 0 0px 2px 2px rgba(255,165,0) !important;
+  box-shadow: 0 0px 2px 2px rgba(255, 165, 0, 1.0) !important;
 }
 
diff --git a/inception/inception-pdf-editor2/src/main/ts/src/pdfanno/core/src/render/renderSpan.ts b/inception/inception-pdf-editor2/src/main/ts/src/pdfanno/core/src/render/renderSpan.ts
index 1ac321a2861..ff432cad443 100644
--- a/inception/inception-pdf-editor2/src/main/ts/src/pdfanno/core/src/render/renderSpan.ts
+++ b/inception/inception-pdf-editor2/src/main/ts/src/pdfanno/core/src/render/renderSpan.ts
@@ -99,14 +99,28 @@ export function createRect (r: Rectangle, a?: SpanAnnotation, color?: string, re
 
   a?.classList.forEach(c => rect.classList.add(c))
 
-  rect.style.top = r.y + 'px'
-  rect.style.left = r.x + 'px'
-  rect.style.width = r.w + 'px'
-  rect.style.height = r.h + 'px'
+  const defaultBorderWidth = 2 // px
+  const clippedScale = Math.max(scale(), 0.25)
+  const scaledBorderWidth = defaultBorderWidth / Math.max(0.5 * clippedScale, 1.0)
+  const borderHeightAdjustment = defaultBorderWidth - scaledBorderWidth;
+
+  // As the scaling factor increases, we can gradually reduce the height of the highlight in order
+  // for it to overlap less with the next line. Empirically, log10 seems to work better than log
+  // for this.
+  const scaleHeightAdjustment = Math.log10(Math.max(1.0, scale()))
+
+  rect.style.top = `${r.y}px`
+  rect.style.left = `${r.x}px`
+  rect.style.width = `${r.w}px`
+  rect.style.height = `${r.h - borderHeightAdjustment - scaleHeightAdjustment}px`
+  rect.style.setProperty('--marker-focus-width', `${scaledBorderWidth}px`);
+
   if (color) {
     rect.style.backgroundColor = hex2rgba(color, 0.4)
-    rect.style.borderColor = color
+    rect.style.borderColor = hex2rgba(color, 0.8)
+    rect.style.borderWidth = `${scaledBorderWidth}px`
   }
+
   rect.style.pointerEvents = 'none'
   return rect
 }
@@ -120,29 +134,27 @@ export function mergeRects (glyphs: VGlyph[]): Rectangle[] {
   }
 
   // a vertical margin of error.
-  const error = 5 * scale()
+  const baseError = 2.5 // px
 
-  let tmp = new Rectangle(glyphs[0].bbox)
-  const newRects = [tmp]
-  for (let i = 1; i < glyphs.length; i++) {
-    const rect = glyphs[i].bbox
+  let aggregateRect = new Rectangle(glyphs[0].bbox)
 
-    // if (tmp.p !== rect.p) {
-    //   console.log('Page switch')
-    // }
+  const newRects = [aggregateRect]
+  for (let i = 1; i < glyphs.length; i++) {
+    const glyphBox = glyphs[i].bbox
+    const error = Math.min(baseError, glyphBox.h)
 
-    if (tmp.p === rect.p && withinMargin(rect.top, tmp.top, error)) {
+    if (aggregateRect.p === glyphBox.p && withinMargin(glyphBox.top, aggregateRect.top, error)) {
       // Same line/same page -> Merge rects.
-      tmp.setPosition({
-        top: Math.min(tmp.top, rect.top),
-        left: Math.min(tmp.left, rect.left),
-        right: Math.max(tmp.right, rect.right),
-        bottom: Math.max(tmp.bottom, rect.bottom)
+      aggregateRect.setPosition({
+        top: Math.min(aggregateRect.top, glyphBox.top),
+        left: Math.min(aggregateRect.left, glyphBox.left),
+        right: Math.max(aggregateRect.right, glyphBox.right),
+        bottom: Math.max(aggregateRect.bottom, glyphBox.bottom)
       })
     } else {
       // New line/new page -> Create a new rect.
-      tmp = new Rectangle(rect)
-      newRects.push(tmp)
+      aggregateRect = new Rectangle(glyphBox)
+      newRects.push(aggregateRect)
     }
   }