@anaralabs/lector 3.14.7 → 3.14.9

package/dist/_tsup-dts-rollup.d.ts

@@ -153,18 +153,6 @@ declare interface AnnotationTooltipProps {
  */
 export declare function applyContextRecolor(ctx: CanvasRenderingContext2D, map: RenderColorMap, options?: RecolorContextOptions): (finalizeRender?: boolean) => void;
 
-/**
- * Calculates the highlight rectangles for a given text match.
- *
- * @param pageProxy - The PDF page proxy object
- * @param textMatch - An object containing:
- *   - pageNumber: The page number where the match is found
- *   - text: The text content containing the match (usually a larger chunk of text)
- *   - matchIndex: The index within the text where the match starts
- *   - searchText: (Optional) The exact search term to highlight. If provided, only highlights
- *                 this exact term instead of the entire text. If not provided, highlights the full text.
- * @returns An array of HighlightRect objects representing the areas to highlight
- */
 export declare function calculateHighlightRects(pageProxy: PDFPageProxy, textMatch: TextPosition): Promise<HighlightRect[]>;
 
 export declare const cancellable: <T extends Promise<unknown>>(promise: T) => {
@@ -639,6 +627,8 @@ export declare const Thumbnails: ({ children, ...props }: HTMLProps<HTMLDivEleme
 
 export declare const TotalPages: ({ ...props }: HTMLProps<HTMLDivElement>) => JSX.Element;
 
+export declare const USE_LAYOUT_ZOOM: boolean;
+
 declare const useAnnotations: () => AnnotationState;
 export { useAnnotations }
 export { useAnnotations as useAnnotations_alias_1 }

package/dist/index.js

@@ -2,7 +2,7 @@
 
 import React, { createContext, memo, forwardRef, useMemo, cloneElement, useEffect, useRef, useState, useCallback, useContext, useLayoutEffect, createRef } from 'react';
 import { createPortal } from 'react-dom';
-import { useFloating, autoUpdate, offset, shift, useDismiss, useInteractions, inline, flip } from '@floating-ui/react';
+import { useFloating, autoUpdate, offset, flip, shift, useDismiss, useInteractions, inline } from '@floating-ui/react';
 import { useStore, createStore } from 'zustand';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useDebounce } from 'use-debounce';
@@ -219,6 +219,7 @@ function createDarkModeColorMap(colors) {
 }
 
 // src/lib/zoom.ts
+var USE_LAYOUT_ZOOM = typeof navigator !== "undefined" && /AppleWebKit/i.test(navigator.userAgent) && !/Chrome|Chromium|Android/i.test(navigator.userAgent);
 var getFitWidthZoom = (containerWidth, viewports, zoomOptions) => {
   const { minZoom, maxZoom } = zoomOptions;
   const maxPageWidth = Math.max(...viewports.map((viewport) => viewport.width));
@@ -2588,21 +2589,28 @@ var useDetailCanvasLayer = ({
       }
       const scrollX = scrollContainer.scrollLeft / zoom;
       const scrollY = scrollContainer.scrollTop / zoom;
-      const viewportWidth = scrollContainer.clientWidth / zoom;
-      const viewportHeight = scrollContainer.clientHeight / zoom;
+      const containerStyle = getComputedStyle(scrollContainer);
+      const padLeft = parseFloat(containerStyle.paddingLeft) || 0;
+      const padRight = parseFloat(containerStyle.paddingRight) || 0;
+      const padTop = parseFloat(containerStyle.paddingTop) || 0;
+      const padBottom = parseFloat(containerStyle.paddingBottom) || 0;
+      const viewportWidth = (scrollContainer.clientWidth - padLeft - padRight) / zoom;
+      const viewportHeight = (scrollContainer.clientHeight - padTop - padBottom) / zoom;
+      const viewX = scrollX + padLeft / zoom;
+      const viewY = scrollY + padTop / zoom;
       const pageRect = pageContainer.getBoundingClientRect();
       const containerRect = scrollContainer.getBoundingClientRect();
       const pageLeft = (pageRect.left - containerRect.left) / zoom + scrollX;
       const pageTop = (pageRect.top - containerRect.top) / zoom + scrollY;
-      const visibleLeft = Math.max(0, scrollX - pageLeft);
-      const visibleTop = Math.max(0, scrollY - pageTop);
+      const visibleLeft = Math.max(0, viewX - pageLeft);
+      const visibleTop = Math.max(0, viewY - pageTop);
       const visibleRight = Math.min(
         pageWidth,
-        scrollX + viewportWidth - pageLeft
+        viewX + viewportWidth - pageLeft
       );
       const visibleBottom = Math.min(
         pageHeight,
-        scrollY + viewportHeight - pageTop
+        viewY + viewportHeight - pageTop
       );
       const visibleWidth = Math.max(0, visibleRight - visibleLeft);
       const visibleHeight = Math.max(0, visibleBottom - visibleTop);
@@ -2628,7 +2636,7 @@ var useDetailCanvasLayer = ({
       );
       const eps = 1 / effectiveScale;
       const painted = paintedRef.current;
-      if (painted && painted.proxy === pdfPageProxy && painted.key === contentKey && painted.scale === effectiveScale && visibleLeft >= painted.left - eps && visibleTop >= painted.top - eps && visibleRight <= painted.left + painted.width + eps && visibleBottom <= painted.top + painted.height + eps) {
+      if (painted && painted.proxy === pdfPageProxy && painted.key === contentKey && painted.scale >= effectiveScale - 1e-3 && visibleLeft >= painted.left - eps && visibleTop >= painted.top - eps && visibleRight <= painted.left + painted.width + eps && visibleBottom <= painted.top + painted.height + eps) {
         renderingTask?.cancel();
         renderingTask = null;
         return;
@@ -3304,17 +3312,22 @@ var useSelectionDimensions = () => {
 var SelectionTooltip = ({ children }) => {
   const [isOpen, setIsOpen] = useState(false);
   const lastSelectionRef = useRef(null);
+  const isPointerDownRef = useRef(false);
   const viewportRef = usePdf((state) => state.viewportRef);
   const { refs, floatingStyles, context } = useFloating({
     placement: "bottom",
     open: isOpen,
     onOpenChange: setIsOpen,
     whileElementsMounted: autoUpdate,
-    middleware: [offset(10), shift({ padding: 8 })]
+    middleware: [offset(10), flip({ padding: 8 }), shift({ padding: 8 })]
   });
   const dismiss = useDismiss(context);
   const { getFloatingProps } = useInteractions([dismiss]);
   const updateTooltipPosition = useCallback(() => {
+    if (isPointerDownRef.current) {
+      setIsOpen(false);
+      return;
+    }
     const selection = document.getSelection();
     if (!selection || selection.isCollapsed) {
       setIsOpen(false);
@@ -3324,19 +3337,19 @@ var SelectionTooltip = ({ children }) => {
     const range = selection.getRangeAt(0);
     if (!range) return;
     const rects = range.getClientRects();
+    const firstRect = rects[0];
     const lastRect = rects[rects.length - 1];
     lastSelectionRef.current = range;
-    if (lastRect) {
+    if (firstRect && lastRect) {
       refs.setReference({
         getBoundingClientRect: () => ({
           width: lastRect.width,
-          height: lastRect.height,
+          height: lastRect.bottom - firstRect.top,
           x: lastRect.left,
-          y: lastRect.bottom,
-          // Position below the last line of selection
-          top: lastRect.bottom,
+          y: firstRect.top,
+          top: firstRect.top,
           right: lastRect.right,
-          bottom: lastRect.bottom + lastRect.height,
+          bottom: lastRect.bottom,
           left: lastRect.left
         }),
         getClientRects: () => [lastRect]
@@ -3346,6 +3359,31 @@ var SelectionTooltip = ({ children }) => {
       setIsOpen(false);
     }
   }, [refs]);
+  useEffect(() => {
+    const handlePointerDown = (event) => {
+      if (event.button === 0 && viewportRef.current?.contains(event.target) && !refs.floating.current?.contains(event.target)) {
+        isPointerDownRef.current = true;
+      }
+    };
+    const handlePointerUp = () => {
+      if (!isPointerDownRef.current) return;
+      isPointerDownRef.current = false;
+      requestAnimationFrame(updateTooltipPosition);
+    };
+    const handleBlur = () => {
+      isPointerDownRef.current = false;
+    };
+    window.addEventListener("blur", handleBlur);
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    document.addEventListener("pointerup", handlePointerUp, true);
+    document.addEventListener("pointercancel", handlePointerUp, true);
+    return () => {
+      window.removeEventListener("blur", handleBlur);
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+      document.removeEventListener("pointerup", handlePointerUp, true);
+      document.removeEventListener("pointercancel", handlePointerUp, true);
+    };
+  }, [updateTooltipPosition, viewportRef, refs.floating]);
   useEffect(() => {
     const handleSelectionChange = () => {
       const selection = document.getSelection();
@@ -6380,6 +6418,9 @@ var useViewportContainer = ({
   elementWrapperRef,
   elementRef
 }) => {
+  const store = PDFStore.useContext();
+  const isPinching = usePdf((state) => state.isPinching);
+  const gestureTransformAppliedRef = useRef(false);
   const originRef = useRef([0, 0]);
   const wheelInertia = useRef({
     active: false,
@@ -6410,7 +6451,23 @@ var useViewportContainer = ({
       const { zoom: zoom2, translateX, translateY } = transformations.current;
       const naturalWidth = parseFloat(elementRef.current.style.width) || elementRef.current.offsetWidth;
       const naturalHeight = parseFloat(elementRef.current.style.height) || elementRef.current.offsetHeight;
-      elementRef.current.style.transform = `scale3d(${zoom2}, ${zoom2}, 1)`;
+      if (USE_LAYOUT_ZOOM) {
+        const element = elementRef.current;
+        if (store.getState().isPinching) {
+          const layoutZoom = parseFloat(element.style.zoom) || 1;
+          const gestureScale = zoom2 / layoutZoom;
+          element.style.transform = `scale3d(${gestureScale}, ${gestureScale}, 1)`;
+          element.style.willChange = "transform";
+          gestureTransformAppliedRef.current = true;
+        } else {
+          element.style.zoom = String(zoom2);
+          element.style.transform = "none";
+          element.style.willChange = "auto";
+          gestureTransformAppliedRef.current = false;
+        }
+      } else {
+        elementRef.current.style.transform = `scale3d(${zoom2}, ${zoom2}, 1)`;
+      }
       elementWrapperRef.current.style.width = `${naturalWidth * zoom2}px`;
       elementWrapperRef.current.style.height = `${naturalHeight * zoom2}px`;
       containerRef.current.scrollTop = translateY;
@@ -6424,8 +6481,12 @@ var useViewportContainer = ({
         });
       }
     },
-    [containerRef, elementRef, elementWrapperRef, updateZoom]
+    [containerRef, elementRef, elementWrapperRef, updateZoom, store]
   );
+  useEffect(() => {
+    if (USE_LAYOUT_ZOOM && gestureTransformAppliedRef.current && !isPinching)
+      updateTransform();
+  }, [isPinching, updateTransform]);
   useEffect(() => {
     return () => {
       if (zoomRafRef.current !== null) {
@@ -6743,7 +6804,6 @@ var Pages = ({
       ...props,
       style: {
         display: "flex",
-        justifyContent: "center",
         height: "100%",
         position: "relative",
         overflow: "auto",
@@ -6754,7 +6814,10 @@ var Pages = ({
         {
           ref: elementWrapperRef,
           style: {
-            width: "max-content"
+            width: "max-content",
+            marginLeft: "auto",
+            marginRight: "auto",
+            flexShrink: 0
           },
           children: /* @__PURE__ */ jsx(
             "div",
@@ -6767,8 +6830,7 @@ var Pages = ({
                 alignItems: "center",
                 flexDirection: "column",
                 transformOrigin: "0 0",
-                willChange: "transform",
-                // width: "max-content",
+                willChange: USE_LAYOUT_ZOOM ? "auto" : "transform",
                 width: largestPageWidth,
                 margin: "0 auto"
               },
@@ -7497,8 +7559,19 @@ var useSearch = () => {
 
 // src/hooks/search/useSearchPosition.tsx
 async function calculateHighlightRects(pageProxy, textMatch) {
-  const textContent = await pageProxy.getTextContent();
-  const items = textContent.items;
+  const reader = pageProxy.streamTextContent().getReader();
+  const items = [];
+  try {
+    for (; ; ) {
+      const { value, done } = await reader.read();
+      if (done) break;
+      items.push(
+        ...value.items.filter((item) => "str" in item)
+      );
+    }
+  } finally {
+    reader.releaseLock();
+  }
   const matchLength = textMatch.searchText ? textMatch.searchText.length : textMatch.text.length;
   const matchRects = [];
   let currentIndex = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@anaralabs/lector",
-	"version": "3.14.7",
+	"version": "3.14.9",
 	"description": "A headless PDF viewer for React",
 	"author": "andrewdr (https://github.com/andrewdoro)",
 	"license": "MIT",