feat: 将 PDFViewer 的 Page 调整为 absolute 定位

orca-team · May 22, 2024 · a380251 · a380251
1 parent 298edf6
commit a380251
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 27 deletions.
diff --git a/.changeset/green-knives-return.md b/.changeset/green-knives-return.md
@@ -0,0 +1,5 @@
+---
+'@orca-fe/pdf-viewer': major
+---
+
+feat: 将 PDFViewer 的 Page 调整为 absolute 定位
diff --git a/packages/pdf-viewer/src/PDFViewer.style.ts b/packages/pdf-viewer/src/PDFViewer.style.ts
@@ -49,16 +49,18 @@ export default createUseStyles(
       position: 'relative',
       height: '100%',
       overflow: 'auto',
-      padding: '24px 0',
+      // padding: '24px 0',
       backgroundColor: '#f0f2f5',
-      paddingBottom: 48,
+      // paddingBottom: 48,
     },
     pageContainer: {
-      position: 'relative',
+      position: 'absolute',
       backgroundColor: '#fff',
-      marginLeft: 'auto',
-      marginRight: 'auto',
+      // marginLeft: 'auto',
+      // marginRight: 'auto',
       boxShadow: [0, 0, 12, 'rgba(0, 0, 0, 0.3)'],
+      left: '50%',
+      transform: 'translateX(-50%)',
     },
     page: {
       width: '100%',
@@ -95,6 +97,11 @@ export default createUseStyles(
         backgroundColor: 'rgba(0,129,255,0.3)',
       },
     },
+    pageBottomPlaceholder: {
+      position: 'absolute',
+      pointerEvents: 'none',
+      visibility: 'hidden',
+    },
   },
   {
     classNamePrefix: prefix,

diff --git a/packages/pdf-viewer/src/PDFViewer.tsx b/packages/pdf-viewer/src/PDFViewer.tsx
@@ -30,6 +30,9 @@ const ef = () => undefined;
 
 const round001 = roundBy(0.001);
 
+const PAGE_PADDING_TOP = 24;
+const PAGE_PADDING_BOTTOM = 60;
+
 const DefaultLoadingTips = () => {
   const [l] = useLocale(zhCN);
   return <div className="pdf-viewer-default-loading-tips">{l.loadingTips}</div>;
@@ -218,27 +221,32 @@ const PDFViewer = React.forwardRef<PDFViewerHandle, PDFViewerProps>((props, pRef
 
   // 根据 viewport 信息生成每一页的实际位置信息
   const {
-    topArr: pageTopArr,
+    topArr: topArrOrigin,
     maxWidth,
-    pageMaxWidth,
-    pageMaxHeight,
+    pageMaxWidth: pageMaxWidthOrigin,
+    pageMaxHeight: pageMaxHeightOrigin,
+    bottom: pageBottomOrigin,
   } = useMemo(() => {
     let top = 0;
     let maxWidth = 0;
     let pageMaxWidth = 0;
     let pageMaxHeight = 0;
     const topArr = viewports.map(({ height: _height, width: _width }) => {
-      const width = _width * PixelsPerInch.PDF_TO_CSS_UNITS;
-      const height = _height * PixelsPerInch.PDF_TO_CSS_UNITS;
+      const width = _width;
+      const height = _height;
       const _top = top;
-      top += Math.floor(height + pageGap) * scale;
-      maxWidth = Math.max(width * scale, maxWidth);
+      top += height + pageGap;
+      maxWidth = Math.max(width, maxWidth);
       pageMaxWidth = Math.max(width, pageMaxWidth);
       pageMaxHeight = Math.max(height, pageMaxHeight);
       return _top;
     });
-    return { topArr, maxWidth, pageMaxWidth, pageMaxHeight };
-  }, [viewports, pageGap, scale]);
+    return { topArr, maxWidth, pageMaxWidth, pageMaxHeight, bottom: top };
+  }, [viewports, pageGap]);
+
+  const pageTopArr = useMemo(() => topArrOrigin.map(top => top * scale * PixelsPerInch.PDF_TO_CSS_UNITS), [scale, topArrOrigin]);
+  const pageMaxWidth = pageMaxWidthOrigin * scale * PixelsPerInch.PDF_TO_CSS_UNITS;
+  const pageMaxHeight = pageMaxHeightOrigin * scale * PixelsPerInch.PDF_TO_CSS_UNITS;
 
   const [zoomMode, setZoomMode] = useState<false | 'autoWidth' | 'autoHeight'>(typeof defaultZoom === 'number' ? false : defaultZoom);
 
@@ -264,7 +272,7 @@ const PDFViewer = React.forwardRef<PDFViewerHandle, PDFViewerProps>((props, pRef
 
   useEffect(() => {
     autoZoomDebounce.run();
-  }, [zoomMode, pageMaxHeight, pageMaxWidth]);
+  }, [zoomMode, pageMaxHeightOrigin, pageMaxWidthOrigin]);
 
   // 自动调整缩放级别
   useSizeListener((size) => {
@@ -719,11 +727,13 @@ const PDFViewer = React.forwardRef<PDFViewerHandle, PDFViewerProps>((props, pRef
                 {viewports.length === 0 && !loading && !pluginLoading && emptyTips}
                 {viewports.map((viewport, pageIndex) => {
                   const shouldRender = pageIndex >= renderRange[0] && pageIndex <= renderRange[1];
+                  const top = `calc(var(--scale-factor) * ${PAGE_PADDING_TOP + Math.floor(topArrOrigin[pageIndex])}px)`;
+                  const left = `calc(var(--scale-factor) * ${Math.floor((maxWidth - viewport.width) * 0.5)}px)`;
                   const width = `calc(var(--scale-factor) * ${Math.floor(viewport.width)}px)`;
                   const height = `calc(var(--scale-factor) * ${Math.floor(viewport.height)}px)`;
-                  const gap = `calc(var(--scale-factor) * ${pageGap}px)`;
+                  // const gap = `calc(var(--scale-factor) * ${pageGap}px)`;
                   return (
-                    <div key={pageIndex} className={styles.pageContainer} style={{ width, height, marginBottom: gap }}>
+                    <div key={pageIndex} className={styles.pageContainer} style={{ top, marginLeft: left, width, height /* , marginBottom: gap*/ }}>
                       {shouldRender && (
                         <>
                           <PDFPage className={styles.page} outputScale={outputScale} index={pageIndex} zoom={zoom} render={shouldRender} />
@@ -734,6 +744,13 @@ const PDFViewer = React.forwardRef<PDFViewerHandle, PDFViewerProps>((props, pRef
                     </div>
                   );
                 })}
+                <div
+                  className={styles.pageBottomPlaceholder}
+                  data-name="page-bottom-place-holder"
+                  style={{ top: `calc(var(--scale-factor) * ${pageBottomOrigin + PAGE_PADDING_BOTTOM}px)` }}
+                >
+                  &nbsp;
+                </div>
               </ContextMenu>
               {(loading || !!pluginLoading) && loadingTips}
 

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml