From 86a702cc19c331d892bb62e818054a0c6f7b7cc3 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Wed, 4 Sep 2024 20:45:39 +0800
Subject: [PATCH] fix: wrapped element calcation size and position

Signed-off-by: Innei <i@innei.in>
---
 src/hooks/shared/use-read-percent.ts          |  3 +-
 .../shared/WrappedElementProvider.tsx         | 44 ++++++++++++-------
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/hooks/shared/use-read-percent.ts b/src/hooks/shared/use-read-percent.ts
index e0f9c7d47e..c378680b9d 100644
--- a/src/hooks/shared/use-read-percent.ts
+++ b/src/hooks/shared/use-read-percent.ts
@@ -11,8 +11,7 @@ export const useReadPercent = () => {
   const readPercent = usePageScrollLocationSelector(
     (scrollTop) => {
       const winHeight = getViewport().h
-      const deltaHeight =
-        scrollTop >= winHeight ? winHeight : (scrollTop / winHeight) * winHeight
+      const deltaHeight = scrollTop >= winHeight ? winHeight : scrollTop
 
       return (
         Math.floor(
diff --git a/src/providers/shared/WrappedElementProvider.tsx b/src/providers/shared/WrappedElementProvider.tsx
index d68a243dd7..4322437cf8 100644
--- a/src/providers/shared/WrappedElementProvider.tsx
+++ b/src/providers/shared/WrappedElementProvider.tsx
@@ -57,33 +57,43 @@ export const WrappedElementProvider: Component<WrappedElementProviderProps> = ({
   children,
   className,
   ...props
-}) => {
-  return (
-    <ProviderComposer contexts={Providers}>
-      <ArticleElementResizeObserver />
-      <Content {...props} className={className}>
-        {children}
-      </Content>
-    </ProviderComposer>
-  )
-}
-const ArticleElementResizeObserver = () => {
+}) => (
+  <ProviderComposer contexts={Providers}>
+    <ElementResizeObserver />
+    <Content {...props} className={className}>
+      {children}
+    </Content>
+  </ProviderComposer>
+)
+const ElementResizeObserver = () => {
   const setSize = useSetWrappedElementSize()
   const setPos = useSetElementPosition()
   const $element = useWrappedElement()
   useIsomorphicLayoutEffect(() => {
     if (!$element) return
-    const { height, width, x, y } = $element.getBoundingClientRect()
+    const { height, width, left, top } = $element.getBoundingClientRect()
     setSize({ h: height, w: width })
-    setPos({ x, y })
+
+    const pageX = window.scrollX + left
+    const pageY = window.scrollY + top
+    setPos({ x: pageX, y: pageY })
 
     const observer = new ResizeObserver((entries) => {
       const entry = entries[0]
-      const { height, width } = entry.contentRect
-      const { x, y } = entry.target.getBoundingClientRect()
 
-      setSize({ h: height, w: width })
-      setPos({ x, y })
+      const { height, width } = entry.contentRect
+      const { left, top } = $element.getBoundingClientRect()
+      const pageX = window.scrollX + left
+      const pageY = window.scrollY + top
+
+      setSize((size) => {
+        if (size.h === height && size.w === width) return size
+        return { h: height, w: width }
+      })
+      setPos((pos) => {
+        if (pos.x === pageX && pos.y === pageY) return pos
+        return { x: pageX, y: pageY }
+      })
     })
     observer.observe($element)
     return () => {