From 5c69b5d8c00b4cf47f188bb917aa9ec802d1f18e Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 10 Mar 2023 17:25:09 +0800
Subject: [PATCH] Use bounding rects for filtering top rect

---
 .../components/templates/article/Article.tsx  |  3 ++-
 .../lib/hooks/useReadingProgressAnchor.tsx    | 25 +++++++++++--------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/web/components/templates/article/Article.tsx b/packages/web/components/templates/article/Article.tsx
index 5e672dc39..44e351e34 100644
--- a/packages/web/components/templates/article/Article.tsx
+++ b/packages/web/components/templates/article/Article.tsx
@@ -2,7 +2,6 @@ import { Box } from '../../elements/LayoutPrimitives'
 import {
   getTopOmnivoreAnchorElement,
   parseDomTree,
-  useReadingProgressAnchor,
 } from '../../../lib/hooks/useReadingProgressAnchor'
 import {
   ScrollOffsetChangeset,
@@ -46,6 +45,7 @@ export function Article(props: ArticleProps): JSX.Element {
       if (!articleContentRef.current) return
       if (!window.document.scrollingElement) return
       const anchor = getTopOmnivoreAnchorElement(articleContentRef.current)
+      console.log(' -- getTopOmnivoreAnchorElement: ', anchor)
       const topPositionPercent =
         window.scrollY / window.document.scrollingElement.scrollHeight
       const anchorIndex = Number(anchor)
@@ -106,6 +106,7 @@ export function Article(props: ArticleProps): JSX.Element {
       return
     }
 
+    console.log('props.initialAnchorIndex: ', props.initialAnchorIndex)
     const anchorElement = props.highlightHref.current
       ? document.querySelector(
           `[omnivore-highlight-id="${props.highlightHref.current}"]`
diff --git a/packages/web/lib/hooks/useReadingProgressAnchor.tsx b/packages/web/lib/hooks/useReadingProgressAnchor.tsx
index 4950f3470..d3f372db7 100644
--- a/packages/web/lib/hooks/useReadingProgressAnchor.tsx
+++ b/packages/web/lib/hooks/useReadingProgressAnchor.tsx
@@ -11,27 +11,30 @@ const ANCHOR_ELEMENTS_BLOCKED_ATTRIBUTES = [
 export const getTopOmnivoreAnchorElement = (
   articleContentElement: HTMLElement
 ): string | undefined => {
-  let lastVisibleAnchor: Element | undefined = undefined
+  let topVisibleRect: Element | undefined = undefined
   const anchors = Array.from(
     document.querySelectorAll(`[data-omnivore-anchor-idx]`)
   ).reverse()
 
   for (const anchor of anchors) {
     const rect = anchor.getBoundingClientRect()
-    if (
-      rect.top >= 0 &&
-      rect.left >= 0 &&
-      rect.bottom <= articleContentElement.clientHeight
-    ) {
-      lastVisibleAnchor = anchor
-    } else if (lastVisibleAnchor) {
-      break
+    if (rect.top >= 0 && rect.bottom <= articleContentElement.clientHeight) {
+      if (
+        topVisibleRect &&
+        topVisibleRect.getBoundingClientRect().top < rect.top
+      ) {
+        continue
+      }
+      topVisibleRect = anchor
     }
   }
 
-  return (
-    lastVisibleAnchor?.getAttribute(`data-omnivore-anchor-idx`) ?? undefined
+  console.log(
+    ' top visible rect:',
+    topVisibleRect?.getBoundingClientRect().top,
+    topVisibleRect?.getAttribute(`data-omnivore-anchor-idx`)
   )
+  return topVisibleRect?.getAttribute(`data-omnivore-anchor-idx`) ?? undefined
 }
 
 export const useReadingProgressAnchor = (