feat(highlights): Better rect smoothing (#596)

* feat(highlights): Better rect smoothening

* chore: use array instead of map

* chore: pr comment

* chore: rename to combineRects

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: Conrad Chan

src/highlight/__tests__/highlightUtil-test.ts

@@ -1,6 +1,6 @@
 import {
     centerHighlight,
-    combineRectsByRow,
+    combineRects,
     dedupeRects,
     getBoundingRect,
     getShapeRelativeToContainer,
@@ -74,7 +74,7 @@ describe('highlightUtil', () => {
         });
     });
 
-    describe('combineRectsByRow()', () => {
+    describe('combineRects()', () => {
         test('should combine rects by row', () => {
             const rects = [
                 {
@@ -95,6 +95,12 @@ describe('highlightUtil', () => {
                     x: 300,
                     y: 199.5,
                 },
+                {
+                    height: 21,
+                    width: 100,
+                    x: 500,
+                    y: 200,
+                }, // this rect, while having the same y coordinate as the previous rects is not near enough in the x coordinate to combine so should be it's own rect
                 {
                     height: 23,
                     width: 100,
@@ -103,15 +109,16 @@ describe('highlightUtil', () => {
                 },
             ];
 
-            const result = combineRectsByRow(rects);
-            expect(result).toHaveLength(2);
+            const result = combineRects(rects);
+            expect(result).toHaveLength(3);
             expect(result[0]).toEqual({
                 height: 22,
                 width: 300,
                 x: 100,
                 y: 199.5,
             });
             expect(result[1]).toEqual(rects[3]);
+            expect(result[2]).toEqual(rects[4]);
         });
     });
 

src/highlight/highlightUtil.ts

@@ -93,18 +93,40 @@ export const dedupeRects = (rects: Shape[], threshold = 0.1): Shape[] => {
     return dedupedRects;
 };
 
-export const combineRectsByRow = (rects: Shape[]): Shape[] => {
-    const dedupedRects = dedupeRects(rects);
-
-    const rows = dedupedRects.reduce((groups, rect) => {
-        const { y } = rect;
-        const roundedY = Math.round(y);
-        groups[roundedY] = groups[roundedY] || [];
-        groups[roundedY].push(rect);
-        return groups;
-    }, {} as Record<number, Shape[]>);
-
-    return Object.values(rows).map(group => getBoundingRect(group));
+export const combineRects = (rects: Shape[]): Shape[] => {
+    const result: Shape[] = [];
+
+    dedupeRects(rects).forEach(rect => {
+        const { height, width, x, y } = rect;
+        const lastRect = result.pop();
+
+        if (!lastRect) {
+            result.push(rect);
+            return;
+        }
+
+        // This algorithm employs a hueristic that assumes rects are returned in ascending y coordinate
+        // followed by ascending x coordinate.
+        // If there is already a previous rect, check first to see if the current rect is approximately
+        // close enough (in both the x and y coordinate) to be considered as part of the same rect
+        // If it is not close enough then add the current rect as a separate rect in the array
+        const { height: lastHeight, width: lastWidth, x: lastX, y: lastY } = lastRect;
+        const lastMaxX = lastX + lastWidth;
+        const thresholdX = getThreshold(lastWidth, width, 0.3);
+        const thresholdY = getThreshold(lastHeight, height, 0.6);
+        const isXCloseEnough = Math.abs(x - lastMaxX) < thresholdX;
+        const isYCloseEnough = Math.abs(y - lastY) < thresholdY;
+
+        // If rect is close enough, add the rect to the existing entry, otherwise add it as a new entry
+        if (isXCloseEnough && isYCloseEnough) {
+            result.push(getBoundingRect([lastRect, rect]));
+        } else {
+            result.push(lastRect);
+            result.push(rect);
+        }
+    });
+
+    return result;
 };
 
 export const getShapeRelativeToContainer = (shape: Shape, containerShape: Shape): Shape => {

src/store/highlight/actions.ts

@@ -1,5 +1,5 @@
 import { createAction } from '@reduxjs/toolkit';
-import { combineRectsByRow } from '../../highlight/highlightUtil';
+import { combineRects } from '../../highlight/highlightUtil';
 import { SelectionItem } from './types';
 import { Shape } from '../../@types';
 
@@ -94,7 +94,7 @@ export const setSelectionAction = createAction(
             payload: {
                 containerRect: getShape(containerRect),
                 location,
-                rects: combineRectsByRow(rects.map(getShape)),
+                rects: combineRects(rects.map(getShape)),
             },
         };
     },