@papyrus-sdk/ui-react 0.2.21 → 0.2.22

package/dist/index.mjs

@@ -3,6 +3,8 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useViewerStore } from "@papyrus-sdk/core";
 import { jsx, jsxs } from "react/jsx-runtime";
+var MOBILE_LANDSCAPE_MAX_HEIGHT_PX = 500;
+var MOBILE_VIEWPORT_QUERY = `(max-width: 639px), (orientation: landscape) and (max-height: ${MOBILE_LANDSCAPE_MAX_HEIGHT_PX}px)`;
 var Topbar = ({
   engine,
   showBrand = false,
@@ -57,7 +59,7 @@ var Topbar = ({
   }, [hasMobileMenu]);
   useEffect(() => {
     if (!canUseDOM || typeof window.matchMedia !== "function") return;
-    const mediaQuery = window.matchMedia("(max-width: 639px)");
+    const mediaQuery = window.matchMedia(MOBILE_VIEWPORT_QUERY);
     const updateViewport = () => setIsMobileViewport(mediaQuery.matches);
     updateViewport();
     if (typeof mediaQuery.addEventListener === "function") {
@@ -1770,8 +1772,12 @@ var PageRenderer = ({
     activeSearchIndex,
     textLayerVersion
   ]);
-  const handleMouseDown = (e) => {
-    const target = e.target;
+  const getTouchPoint = (event) => {
+    const touch = event.touches[0] ?? event.changedTouches[0];
+    if (!touch) return null;
+    return { x: touch.clientX, y: touch.clientY };
+  };
+  const handlePointerDown = (clientX, clientY, target) => {
     const clickedInsideAnnotation = Boolean(
       target?.closest("[data-papyrus-annotation-id]")
     );
@@ -1785,8 +1791,8 @@ var PageRenderer = ({
     if (activeTool === "ink") {
       const rect2 = containerRef.current?.getBoundingClientRect();
       if (!rect2) return;
-      const x2 = (e.clientX - rect2.left) / rect2.width;
-      const y2 = (e.clientY - rect2.top) / rect2.height;
+      const x2 = (clientX - rect2.left) / rect2.width;
+      const y2 = (clientY - rect2.top) / rect2.height;
       setIsInkDrawing(true);
       setInkPoints([{ x: x2, y: y2 }]);
       return;
@@ -1795,25 +1801,25 @@ var PageRenderer = ({
     const rect = containerRef.current?.getBoundingClientRect();
     if (!rect) return;
     setIsDragging(true);
-    const x = e.clientX - rect.left;
-    const y = e.clientY - rect.top;
+    const x = clientX - rect.left;
+    const y = clientY - rect.top;
     setStartPos({ x, y });
     setCurrentRect({ x, y, w: 0, h: 0 });
   };
-  const handleMouseMove = (e) => {
+  const handlePointerMove = (clientX, clientY) => {
     if (isInkDrawing) {
       const rect2 = containerRef.current?.getBoundingClientRect();
       if (!rect2) return;
-      const x = (e.clientX - rect2.left) / rect2.width;
-      const y = (e.clientY - rect2.top) / rect2.height;
+      const x = (clientX - rect2.left) / rect2.width;
+      const y = (clientY - rect2.top) / rect2.height;
       setInkPoints((prev) => [...prev, { x, y }]);
       return;
     }
     if (!isDragging) return;
     const rect = containerRef.current?.getBoundingClientRect();
     if (!rect) return;
-    const currentX = e.clientX - rect.left;
-    const currentY = e.clientY - rect.top;
+    const currentX = clientX - rect.left;
+    const currentY = clientY - rect.top;
     setCurrentRect({
       x: Math.min(startPos.x, currentX),
       y: Math.min(startPos.y, currentY),
@@ -1821,7 +1827,7 @@ var PageRenderer = ({
       h: Math.abs(currentY - startPos.y)
     });
   };
-  const handleMouseUp = (e) => {
+  const handlePointerUp = () => {
     if (isInkDrawing) {
       setIsInkDrawing(false);
       if (inkPoints.length > 1) {
@@ -1986,6 +1992,37 @@ var PageRenderer = ({
       }
     }
   };
+  const handleMouseDown = (e) => {
+    handlePointerDown(e.clientX, e.clientY, e.target);
+  };
+  const handleMouseMove = (e) => {
+    handlePointerMove(e.clientX, e.clientY);
+  };
+  const handleMouseUp = () => {
+    handlePointerUp();
+  };
+  const handleTouchStart = (event) => {
+    if (event.touches.length > 1) return;
+    const point = getTouchPoint(event);
+    if (!point) return;
+    handlePointerDown(point.x, point.y, event.target);
+    if ((activeTool === "ink" || !canSelectText) && event.cancelable) {
+      event.preventDefault();
+    }
+  };
+  const handleTouchMove = (event) => {
+    if (event.touches.length > 1) return;
+    const point = getTouchPoint(event);
+    if (!point) return;
+    handlePointerMove(point.x, point.y);
+    if ((isInkDrawing || isDragging) && event.cancelable) {
+      event.preventDefault();
+    }
+  };
+  const handleTouchEnd = (event) => {
+    if (event.touches.length > 0) return;
+    handlePointerUp();
+  };
   const getPageFilter = () => {
     switch (pageTheme) {
       case "sepia":
@@ -2003,10 +2040,18 @@ var PageRenderer = ({
     {
       ref: containerRef,
       className: `relative inline-block shadow-2xl bg-white mb-10 ${canSelectText ? "" : "no-select cursor-crosshair"}`,
-      style: { scrollMarginTop: "20px", minHeight: "100px" },
+      style: {
+        scrollMarginTop: "20px",
+        minHeight: "100px",
+        touchAction: activeTool === "ink" || activeTool === "text" || activeTool === "comment" ? "none" : "auto"
+      },
       onMouseDown: handleMouseDown,
       onMouseMove: handleMouseMove,
       onMouseUp: handleMouseUp,
+      onTouchStart: handleTouchStart,
+      onTouchMove: handleTouchMove,
+      onTouchEnd: handleTouchEnd,
+      onTouchCancel: handleTouchEnd,
       children: [
         loading && /* @__PURE__ */ jsx4("div", { className: "absolute inset-0 bg-gray-50 flex items-center justify-center z-10 animate-pulse", children: /* @__PURE__ */ jsx4("span", { className: "text-[10px] font-black text-gray-400 uppercase tracking-widest", children: "Sincronizando..." }) }),
         /* @__PURE__ */ jsx4(
@@ -2482,9 +2527,12 @@ var MIN_ZOOM = 0.2;
 var MAX_ZOOM = 5;
 var WIDTH_SNAP_PX = 4;
 var WIDTH_HYSTERESIS_PX = 6;
+var HEIGHT_SNAP_PX = 4;
+var HEIGHT_HYSTERESIS_PX = 6;
 var MOBILE_HEADER_HIDE_DELTA_PX = 28;
 var MOBILE_HEADER_SHOW_DELTA_PX = 16;
 var MOBILE_HEADER_TOP_RESET_PX = 12;
+var MOBILE_LANDSCAPE_MAX_HEIGHT_PX2 = 500;
 var Viewer = ({ engine, style }) => {
   const viewerState = useViewerStore5();
   const {
@@ -2510,6 +2558,7 @@ var Viewer = ({ engine, style }) => {
   const jumpRef = useRef4(false);
   const jumpTimerRef = useRef4(null);
   const lastWidthRef = useRef4(null);
+  const lastHeightRef = useRef4(null);
   const lastScrollTopRef = useRef4(0);
   const scrollDownAccumulatorRef = useRef4(0);
   const scrollUpAccumulatorRef = useRef4(0);
@@ -2523,11 +2572,14 @@ var Viewer = ({ engine, style }) => {
     rafId: null
   });
   const [availableWidth, setAvailableWidth] = useState5(null);
+  const [availableHeight, setAvailableHeight] = useState5(null);
   const [basePageSize, setBasePageSize] = useState5(null);
   const [pageSizes, setPageSizes] = useState5({});
   const [colorPickerOpen, setColorPickerOpen] = useState5(false);
-  const isCompact = availableWidth !== null && availableWidth < 820;
-  const isMobileViewport = availableWidth !== null && availableWidth < 640;
+  const isLandscape = availableWidth !== null && availableHeight !== null && availableWidth > availableHeight;
+  const isLandscapeShort = isLandscape && availableHeight !== null && availableHeight <= MOBILE_LANDSCAPE_MAX_HEIGHT_PX2;
+  const isCompact = availableWidth !== null && (availableWidth < 820 || isLandscapeShort);
+  const isMobileViewport = availableWidth !== null && (availableWidth < 640 || isLandscapeShort);
   const paddingY = isCompact ? "py-10" : "py-16";
   const toolDockPosition = isCompact ? "bottom-4" : "bottom-8";
   const colorPalette = [
@@ -2578,21 +2630,32 @@ var Viewer = ({ engine, style }) => {
     const measurementTarget = viewerElement.parentElement ?? viewerElement;
     let rafId = null;
     const normalizeWidth = (rawWidth) => Math.max(0, Math.floor(rawWidth / WIDTH_SNAP_PX) * WIDTH_SNAP_PX);
-    const updateWidth = () => {
+    const normalizeHeight = (rawHeight) => Math.max(0, Math.floor(rawHeight / HEIGHT_SNAP_PX) * HEIGHT_SNAP_PX);
+    const updateSize = () => {
       const rawWidth = measurementTarget.getBoundingClientRect?.().width ?? measurementTarget.clientWidth ?? measurementTarget.offsetWidth;
+      const rawHeight = measurementTarget.getBoundingClientRect?.().height ?? measurementTarget.clientHeight ?? measurementTarget.offsetHeight;
       const nextWidth = normalizeWidth(rawWidth);
-      if (nextWidth <= 0) return;
+      const nextHeight = normalizeHeight(rawHeight);
+      if (nextWidth <= 0 || nextHeight <= 0) return;
       const previousWidth = lastWidthRef.current;
-      if (previousWidth != null && Math.abs(nextWidth - previousWidth) < WIDTH_HYSTERESIS_PX)
-        return;
-      lastWidthRef.current = nextWidth;
-      setAvailableWidth(nextWidth);
+      const previousHeight = lastHeightRef.current;
+      const widthChanged = previousWidth == null || Math.abs(nextWidth - previousWidth) >= WIDTH_HYSTERESIS_PX;
+      const heightChanged = previousHeight == null || Math.abs(nextHeight - previousHeight) >= HEIGHT_HYSTERESIS_PX;
+      if (!widthChanged && !heightChanged) return;
+      if (widthChanged) {
+        lastWidthRef.current = nextWidth;
+        setAvailableWidth(nextWidth);
+      }
+      if (heightChanged) {
+        lastHeightRef.current = nextHeight;
+        setAvailableHeight(nextHeight);
+      }
     };
     const scheduleWidthUpdate = () => {
       if (rafId != null) cancelAnimationFrame(rafId);
       rafId = requestAnimationFrame(() => {
         rafId = null;
-        updateWidth();
+        updateSize();
       });
     };
     scheduleWidthUpdate();