Merge pull request #182 from inokawa/viewport-padding

Fix wrong viewportSize when component has padding
inokawa · Sep 19, 2023 · f65c6ef · f65c6ef
2 parents 7c7b499 + 9c804c4
commit f65c6ef
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 8 deletions.
diff --git a/.size-limit.json b/.size-limit.json
@@ -3,7 +3,7 @@
     "name": "Total",
     "path": "lib/index.mjs",
     "import": "*",
-    "limit": "5.10 kB"
+    "limit": "5.20 kB"
   },
   {
     "name": "VList",

diff --git a/src/core/resizer.ts b/src/core/resizer.ts
@@ -4,7 +4,9 @@ import {
   ItemResize,
   VirtualStore,
 } from "./store";
-import { exists, max, once } from "./utils";
+import { exists, computeStyle, getStyleNumber, max, once } from "./utils";
+
+const rootObserveOpts: ResizeObserverOptions = { box: "border-box" };
 
 export interface ListResizer {
   _observeRoot(root: HTMLElement): () => void;
@@ -24,9 +26,21 @@ export const createResizer = (
     // https://www.w3.org/TR/resize-observer/#intro
     return new ResizeObserver((entries) => {
       const resizes: ItemResize[] = [];
-      for (const { target, contentRect } of entries) {
+      for (const e of entries) {
+        const { target, contentRect } = e;
         if (target === rootElement) {
-          store._update(ACTION_VIEWPORT_RESIZE, contentRect[sizeKey]);
+          store._update(
+            ACTION_VIEWPORT_RESIZE,
+            contentRect[sizeKey] +
+              contentRect[isHorizontal ? "left" : "top"] +
+              // contentRect doesn't have paddingRight/paddingBottom so get them from computed style
+              // https://www.w3.org/TR/resize-observer/#css-definitions
+              getStyleNumber(
+                computeStyle(rootElement)[
+                  isHorizontal ? "paddingRight" : "paddingBottom"
+                ]
+              )
+          );
         } else {
           const index = mountedIndexes.get(target);
           if (exists(index)) {
@@ -45,7 +59,7 @@ export const createResizer = (
     _observeRoot(root: HTMLElement) {
       rootElement = root;
       const ro = getResizeObserver();
-      ro.observe(root);
+      ro.observe(root, rootObserveOpts);
       return () => {
         ro.disconnect();
       };
@@ -140,8 +154,23 @@ export const createGridResizer = (
       const resizedCols = new Set<number>();
       for (const { target, contentRect } of entries) {
         if (target === rootElement) {
-          vStore._update(ACTION_VIEWPORT_RESIZE, contentRect[heightKey]);
-          hStore._update(ACTION_VIEWPORT_RESIZE, contentRect[widthKey]);
+          // contentRect doesn't have paddingRight/paddingBottom so get them from computed style
+          // https://www.w3.org/TR/resize-observer/#css-definitions
+          // TODO subtract scroll bar width/height
+          // https://github.com/w3c/csswg-drafts/issues/3536
+          const style = computeStyle(rootElement);
+          vStore._update(
+            ACTION_VIEWPORT_RESIZE,
+            contentRect[heightKey] +
+              contentRect.top +
+              getStyleNumber(style.paddingBottom)
+          );
+          hStore._update(
+            ACTION_VIEWPORT_RESIZE,
+            contentRect[widthKey] +
+              contentRect.left +
+              getStyleNumber(style.paddingRight)
+          );
         } else {
           const cell = mountedIndexes.get(target);
           if (cell) {
@@ -216,7 +245,7 @@ export const createGridResizer = (
     _observeRoot(root: HTMLElement) {
       rootElement = root;
       const ro = getResizeObserver();
-      ro.observe(root);
+      ro.observe(root, rootObserveOpts);
       return () => {
         ro.disconnect();
       };

diff --git a/src/core/utils.ts b/src/core/utils.ts
@@ -67,3 +67,14 @@ export const once = <F extends (...args: any[]) => any>(fn: F): F => {
     return cache;
   }) as F;
 };
+
+// wrap for SSR
+export const computeStyle = (e: HTMLElement) => getComputedStyle(e);
+
+export const getStyleNumber = (v: string): number => {
+  if (v) {
+    return parseFloat(v);
+  } else {
+    return 0;
+  }
+};