@drvillo/react-browser-e-signing 0.2.0 → 0.3.1

package/dist/index.js

@@ -101,8 +101,11 @@ function PdfViewer({
   onDocumentLoadSuccess,
   onPageDimensions,
   renderOverlay,
+  renderToolbarContent,
   className,
-  workerSrc
+  workerSrc,
+  pageMode = "scroll",
+  currentPageIndex = 0
 }) {
   useEffect(() => {
     if (typeof window === "undefined") return;
@@ -112,12 +115,16 @@ function PdfViewer({
   }, [workerSrc]);
   if (!pdfData)
     return /* @__PURE__ */ jsx("div", { "data-slot": "pdf-viewer-empty", className: cn(className), children: "Upload a PDF to begin" });
+  const maxPageIndex = Math.max(0, numPages - 1);
+  const resolvedCurrentPageIndex = Math.min(maxPageIndex, Math.max(0, currentPageIndex));
+  const pageIndices = pageMode === "single" ? [resolvedCurrentPageIndex] : Array.from({ length: numPages }, (_, pageIndex) => pageIndex);
   return /* @__PURE__ */ jsxs("div", { "data-slot": "pdf-viewer", className: cn(className), children: [
     /* @__PURE__ */ jsxs("div", { "data-slot": "pdf-viewer-toolbar", children: [
       /* @__PURE__ */ jsxs("div", { "data-slot": "pdf-viewer-page-count", children: [
         "Pages: ",
         numPages || "\u2014"
       ] }),
+      renderToolbarContent ? /* @__PURE__ */ jsx("div", { "data-slot": "pdf-viewer-toolbar-content", children: renderToolbarContent() }) : null,
       /* @__PURE__ */ jsxs("div", { "data-slot": "pdf-viewer-zoom", children: [
         /* @__PURE__ */ jsx(
           "button",
@@ -150,7 +157,7 @@ function PdfViewer({
         onLoadSuccess: (loadedPdf) => onDocumentLoadSuccess(loadedPdf.numPages),
         loading: /* @__PURE__ */ jsx("div", { "data-slot": "pdf-viewer-loading", children: "Loading PDF..." }),
         error: /* @__PURE__ */ jsx("div", { "data-slot": "pdf-viewer-error", children: "Unable to render this PDF." }),
-        children: /* @__PURE__ */ jsx("div", { "data-slot": "pdf-viewer-pages", children: Array.from({ length: numPages }, (_, pageIndex) => /* @__PURE__ */ jsxs(
+        children: /* @__PURE__ */ jsx("div", { "data-slot": "pdf-viewer-pages", children: pageIndices.map((pageIndex) => /* @__PURE__ */ jsxs(
           "div",
           {
             "data-slot": "pdf-viewer-page",
@@ -179,6 +186,49 @@ function PdfViewer({
     )
   ] });
 }
+function clampPageIndex(pageIndex, numPages) {
+  if (numPages <= 0) return 0;
+  if (pageIndex < 0) return 0;
+  if (pageIndex > numPages - 1) return numPages - 1;
+  return pageIndex;
+}
+function PdfPageNavigator({ currentPageIndex, numPages, onPageChange, className }) {
+  const resolvedPageIndex = clampPageIndex(currentPageIndex, numPages);
+  const isEmpty = numPages <= 0;
+  function handlePreviousPage() {
+    if (isEmpty) return;
+    onPageChange(clampPageIndex(resolvedPageIndex - 1, numPages));
+  }
+  function handleNextPage() {
+    if (isEmpty) return;
+    onPageChange(clampPageIndex(resolvedPageIndex + 1, numPages));
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "pdf-page-navigator", className: cn(className), children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-slot": "pdf-page-navigator-button",
+        disabled: isEmpty || resolvedPageIndex <= 0,
+        onClick: handlePreviousPage,
+        "aria-label": "Previous page",
+        children: "<"
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { "data-slot": "pdf-page-navigator-label", children: isEmpty ? "0 / 0" : `${resolvedPageIndex + 1} / ${numPages}` }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-slot": "pdf-page-navigator-button",
+        disabled: isEmpty || resolvedPageIndex >= numPages - 1,
+        onClick: handleNextPage,
+        "aria-label": "Next page",
+        children: ">"
+      }
+    )
+  ] });
+}
 var MIN_WIDTH_PERCENT = 8;
 var MIN_HEIGHT_PERCENT = 3;
 function clampPercent(value) {
@@ -263,12 +313,14 @@ function SignatureField({ field, onUpdateField, onRemoveField, preview, classNam
       event.currentTarget.releasePointerCapture(event.pointerId);
   }
   const previewText = getFieldPreviewText(field, preview);
+  const isLocked = field.locked === true;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: rootRef,
       "data-slot": "signature-field",
       "data-field-type": field.type,
+      "data-locked": isLocked ? true : void 0,
       className: cn(className),
       style: {
         position: "absolute",
@@ -276,11 +328,18 @@ function SignatureField({ field, onUpdateField, onRemoveField, preview, classNam
         top: `${field.yPercent}%`,
         width: `${field.widthPercent}%`,
         height: `${field.heightPercent}%`,
-        userSelect: "none"
+        userSelect: "none",
+        cursor: isLocked ? "default" : void 0,
+        ...isLocked && {
+          borderStyle: "dashed",
+          borderWidth: 1,
+          borderColor: "rgba(100, 116, 139, 0.55)",
+          boxSizing: "border-box"
+        }
       },
-      onPointerDown: handleDragPointerDown,
-      onPointerMove: handleDragPointerMove,
-      onPointerUp: handleDragPointerUp,
+      onPointerDown: isLocked ? void 0 : handleDragPointerDown,
+      onPointerMove: isLocked ? void 0 : handleDragPointerMove,
+      onPointerUp: isLocked ? void 0 : handleDragPointerUp,
       children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -306,7 +365,39 @@ function SignatureField({ field, onUpdateField, onRemoveField, preview, classNam
                   }
                 ) : /* @__PURE__ */ jsx("div", { "data-slot": "signature-field-preview-text", children: previewText || "\u2014" })
               ] }),
-              /* @__PURE__ */ jsx(
+              isLocked ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "signature-field-lock",
+                  "aria-label": "Locked field",
+                  style: {
+                    flexShrink: 0,
+                    display: "flex",
+                    alignItems: "flex-start",
+                    justifyContent: "center",
+                    padding: "2px",
+                    color: "rgba(71, 85, 105, 0.9)"
+                  },
+                  children: /* @__PURE__ */ jsxs(
+                    "svg",
+                    {
+                      width: "14",
+                      height: "14",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      "aria-hidden": true,
+                      children: [
+                        /* @__PURE__ */ jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
+                        /* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+                      ]
+                    }
+                  )
+                }
+              ) : /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
@@ -323,7 +414,7 @@ function SignatureField({ field, onUpdateField, onRemoveField, preview, classNam
             ]
           }
         ),
-        /* @__PURE__ */ jsx(
+        !isLocked ? /* @__PURE__ */ jsx(
           "div",
           {
             "data-slot": "signature-field-resize",
@@ -339,7 +430,7 @@ function SignatureField({ field, onUpdateField, onRemoveField, preview, classNam
             onPointerMove: handleResizePointerMove,
             onPointerUp: handleResizePointerUp
           }
-        )
+        ) : null
       ]
     }
   );
@@ -690,6 +781,87 @@ function usePdfDocument(pdfInput) {
     errorMessage
   };
 }
+var PAGE_SLOT_SELECTOR = '[data-slot="pdf-viewer-page"]';
+function clampPageIndex2(pageIndex, numPages) {
+  if (numPages <= 0) return 0;
+  if (pageIndex < 0) return 0;
+  if (pageIndex > numPages - 1) return numPages - 1;
+  return pageIndex;
+}
+function usePdfPageVisibility({
+  containerRef,
+  numPages,
+  threshold = 0.5
+}) {
+  const [currentPageIndex, setCurrentPageIndex] = useState(0);
+  const [visiblePageIndices, setVisiblePageIndices] = useState([]);
+  const resolvedThreshold = useMemo(() => {
+    if (Number.isNaN(threshold)) return 0.5;
+    if (threshold < 0) return 0;
+    if (threshold > 1) return 1;
+    return threshold;
+  }, [threshold]);
+  const scrollToPage = useCallback(
+    (pageIndex) => {
+      const container = containerRef.current;
+      if (!container || numPages <= 0) return;
+      const clampedIndex = clampPageIndex2(pageIndex, numPages);
+      const pages = container.querySelectorAll(PAGE_SLOT_SELECTOR);
+      const pageElement = pages.item(clampedIndex);
+      if (!pageElement) return;
+      pageElement.scrollIntoView({ behavior: "smooth", block: "start" });
+    },
+    [containerRef, numPages]
+  );
+  useEffect(() => {
+    if (numPages <= 0) {
+      setCurrentPageIndex(0);
+      setVisiblePageIndices([]);
+      return;
+    }
+    const container = containerRef.current;
+    if (!container) return;
+    const pages = Array.from(container.querySelectorAll(PAGE_SLOT_SELECTOR));
+    if (!pages.length) return;
+    if (typeof IntersectionObserver !== "function") {
+      setCurrentPageIndex(0);
+      setVisiblePageIndices([0]);
+      return;
+    }
+    const ratioByIndex = /* @__PURE__ */ new Map();
+    for (let index = 0; index < pages.length; index += 1) ratioByIndex.set(index, 0);
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          const index = pages.indexOf(entry.target);
+          if (index < 0) continue;
+          ratioByIndex.set(index, entry.isIntersecting ? entry.intersectionRatio : 0);
+        }
+        const nextVisible = Array.from(ratioByIndex.entries()).filter(([, ratio]) => ratio > 0).map(([index]) => index).sort((a, b) => a - b);
+        setVisiblePageIndices(nextVisible);
+        let maxRatio = -1;
+        let mostVisibleIndex = 0;
+        for (const [index, ratio] of ratioByIndex.entries()) {
+          if (ratio > maxRatio) {
+            maxRatio = ratio;
+            mostVisibleIndex = index;
+          }
+        }
+        setCurrentPageIndex(clampPageIndex2(mostVisibleIndex, numPages));
+      },
+      { threshold: [0, resolvedThreshold, 1] }
+    );
+    for (const pageElement of pages) observer.observe(pageElement);
+    return () => {
+      observer.disconnect();
+    };
+  }, [containerRef, numPages, resolvedThreshold]);
+  return {
+    currentPageIndex: clampPageIndex2(currentPageIndex, numPages),
+    visiblePageIndices,
+    scrollToPage
+  };
+}
 function clampPercent2(value) {
   if (Number.isNaN(value)) return 0;
   if (value < 0) return 0;
@@ -705,7 +877,7 @@ function buildFieldId() {
 function useFieldPlacement(options = {}) {
   const defaultWidthPercent = options.defaultWidthPercent ?? 25;
   const defaultHeightPercent = options.defaultHeightPercent ?? 5;
-  const [fields, setFields] = useState([]);
+  const [fields, setFields] = useState(options.initialFields ?? []);
   const addField = useCallback(
     ({ pageIndex, type, xPercent, yPercent }) => {
       const field = {
@@ -962,6 +1134,7 @@ var SLOTS = {
   pdfViewer: "pdf-viewer",
   pdfViewerEmpty: "pdf-viewer-empty",
   pdfViewerToolbar: "pdf-viewer-toolbar",
+  pdfViewerToolbarContent: "pdf-viewer-toolbar-content",
   pdfViewerPageCount: "pdf-viewer-page-count",
   pdfViewerZoom: "pdf-viewer-zoom",
   pdfViewerZoomButton: "pdf-viewer-zoom-button",
@@ -970,6 +1143,9 @@ var SLOTS = {
   pdfViewerPage: "pdf-viewer-page",
   pdfViewerLoading: "pdf-viewer-loading",
   pdfViewerError: "pdf-viewer-error",
+  pdfPageNavigator: "pdf-page-navigator",
+  pdfPageNavigatorButton: "pdf-page-navigator-button",
+  pdfPageNavigatorLabel: "pdf-page-navigator-label",
   fieldOverlay: "field-overlay",
   signatureField: "signature-field",
   signatureFieldContent: "signature-field-content",
@@ -979,6 +1155,7 @@ var SLOTS = {
   signatureFieldPreviewText: "signature-field-preview-text",
   signatureFieldRemove: "signature-field-remove",
   signatureFieldResize: "signature-field-resize",
+  signatureFieldLock: "signature-field-lock",
   fieldPalette: "field-palette",
   fieldPaletteButton: "field-palette-button",
   signerPanel: "signer-panel",
@@ -1016,6 +1193,6 @@ var defaults = {
   DEFAULT_FIELD_HEIGHT_PERCENT: 5
 };
 
-export { FieldOverlay, FieldPalette, PdfViewer, SIGNATURE_FONTS, SLOTS, SignatureField, SignaturePad, SignaturePreview, SignerDetailsPanel, SigningComplete, configure, defaults, loadSignatureFont, mapFromPoints, mapToPoints, modifyPdf, sha256, useFieldPlacement, usePdfDocument, useSignatureRenderer };
+export { FieldOverlay, FieldPalette, PdfPageNavigator, PdfViewer, SIGNATURE_FONTS, SLOTS, SignatureField, SignaturePad, SignaturePreview, SignerDetailsPanel, SigningComplete, configure, defaults, loadSignatureFont, mapFromPoints, mapToPoints, modifyPdf, sha256, useFieldPlacement, usePdfDocument, usePdfPageVisibility, useSignatureRenderer };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map