@tfw.in/structura-lib 0.2.0

package/dist/cjs/PdfDocumentViewer.js

@@ -0,0 +1,281 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+require('./polyfills.js');
+var PdfComponents = require('./PdfComponents.js');
+require('./worker.js');
+
+function PdfDocumentViewer({
+  fileUrl,
+  allowedPages,
+  onLoadSuccess,
+  onFileUpload,
+  onRemovePDF,
+  jsonData,
+  selectedBboxId,
+  onPdfBboxClick // Destructure new prop
+}) {
+  // console.log("[PdfDocumentViewer] Props received:", { fileUrl: !!fileUrl, jsonData: !!jsonData, selectedBboxId, onPdfBboxClick: !!onPdfBboxClick, allowedPages });
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [pageScales, setPageScales] = React.useState({}); // To store scale for each page
+  React.useEffect(() => {
+    // console.log("[PdfDocumentViewer] pageScales updated:", pageScales);
+  }, [pageScales]);
+  const handleDragOver = React.useCallback(e => {
+    e.preventDefault();
+    setIsDragging(true);
+  }, []);
+  React.useCallback(e => {
+    e.preventDefault();
+    setIsDragging(false);
+  }, []);
+  const handleDrop = React.useCallback(e => {
+    e.preventDefault();
+    setIsDragging(false);
+    // console.log('!!! [PdfDocumentViewer] Drop event triggered');
+    // First check if we have drag data (from FileTree)
+    e.dataTransfer.getData('text/plain');
+    // console.log('!!! [PdfDocumentViewer] Available data types:', e.dataTransfer.types);
+    // Handle direct file drops (from computer)
+    const files = e.dataTransfer.files;
+    if (files.length > 0) {
+      const file = files[0];
+      // console.log('!!! [PdfDocumentViewer] File dropped:', file.name, file.type);
+      if (file.type === "application/pdf") {
+        // console.log('!!! [PdfDocumentViewer] Valid PDF file, calling onFileUpload');
+        onFileUpload(file);
+      } else {
+        // console.log('!!! [PdfDocumentViewer] Invalid file type:', file.type);
+        alert("Please upload a PDF file");
+      }
+    }
+  }, [onFileUpload]);
+  const renderUploadArea = () => jsxRuntime.jsxs("div", {
+    className: `structura-upload-container ${isDragging ? 'border-blue-500 bg-blue-50' : ''}`,
+    onDragOver: handleDragOver,
+    onDragEnter: () => setIsDragging(true),
+    onDragLeave: () => setIsDragging(false),
+    onDrop: handleDrop,
+    onClick: () => {
+      var _a;
+      return (_a = document.getElementById('file-upload')) === null || _a === void 0 ? void 0 : _a.click();
+    },
+    children: [jsxRuntime.jsx("div", {
+      className: "structura-upload-icon",
+      children: jsxRuntime.jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        children: jsxRuntime.jsx("path", {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+        })
+      })
+    }), jsxRuntime.jsx("h3", {
+      className: "structura-upload-text",
+      children: "Drop PDF Here or Click to Upload"
+    }), jsxRuntime.jsx("p", {
+      className: "structura-upload-subtext",
+      children: "Drag and drop your PDF document here, or click the button below to browse files"
+    }), jsxRuntime.jsxs("button", {
+      className: "structura-upload-button",
+      children: ["Upload Document", jsxRuntime.jsx("input", {
+        type: "file",
+        id: "file-upload",
+        accept: "application/pdf",
+        onChange: e => {
+          // console.log('!!! [PdfDocumentViewer] File input change event');
+          if (e.target.files && e.target.files[0]) {
+            const file = e.target.files[0];
+            // console.log('!!! [PdfDocumentViewer] File selected:', file.name, file.type);
+            onFileUpload(file);
+          }
+        },
+        style: {
+          display: 'none'
+        }
+      })]
+    }), jsxRuntime.jsx("p", {
+      className: "structura-format-text",
+      children: "Supported format: PDF only"
+    })]
+  });
+  if (!fileUrl) {
+    return renderUploadArea();
+  }
+  // Let parent ScrollArea handle scrolling. Removed overflow-y-auto and maxHeight here.
+  return jsxRuntime.jsxs("div", {
+    className: "w-full relative",
+    children: [" ", jsxRuntime.jsxs("div", {
+      className: "relative w-full",
+      children: [jsxRuntime.jsxs("div", {
+        className: "sticky top-0 z-10 float-right mr-4 mt-4",
+        style: {
+          right: 'calc(50% - 300px + 1rem)'
+        },
+        children: [" ", jsxRuntime.jsx("button", {
+          onClick: onRemovePDF,
+          className: "p-2 bg-white rounded-full shadow-lg mr-2 text-red-500 hover:text-red-700 hover:bg-gray-50 transition-colors",
+          title: "Remove PDF",
+          children: jsxRuntime.jsx("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            className: "h-6 w-6",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            children: jsxRuntime.jsx("path", {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+            })
+          })
+        })]
+      }), jsxRuntime.jsx(PdfComponents.Document, {
+        file: fileUrl,
+        onLoadSuccess: ({
+          numPages
+        }) => {
+          // console.log('!!! [PdfDocumentViewer] PDF loaded successfully with', numPages, 'pages');
+          onLoadSuccess(numPages);
+        },
+        className: "flex flex-col w-full",
+        children: allowedPages.map(pageNum => {
+          var _a;
+          const pageIndex = pageNum - 1; // pageNum is 1-indexed
+          // Assuming jsonData.children is an array of page blocks, ordered by page number.
+          const currentPageData = (_a = jsonData === null || jsonData === void 0 ? void 0 : jsonData.children) === null || _a === void 0 ? void 0 : _a[pageIndex];
+          // console.log(`[PdfDocumentViewer] Page ${pageNum}: Attempting to get data from jsonData.children[${pageIndex}]. currentPageData found:`, !!currentPageData);
+          // Optional: Validate if it's a 'Page' type block and log a warning if not.
+          // This helps ensure that the data structure assumption holds.
+          if (currentPageData && currentPageData.block_type !== "Page") ;
+          const renderBboxes = () => {
+            // console.log(`[PdfDocumentViewer] renderBboxes for page ${pageNum}: hasCurrentPageData=${!!currentPageData}, hasChildren=${!!currentPageData?.children}, hasScale=${!!pageScales[pageNum]}`);
+            if (!currentPageData || !currentPageData.children || !pageScales[pageNum]) {
+              if (!pageScales[pageNum]) console.warn(`[PdfDocumentViewer] No scale for page ${pageNum} yet.`);
+              return null;
+            }
+            const scale = pageScales[pageNum];
+            // console.log(`[PdfDocumentViewer] Page ${pageNum}: Using scale ${scale}`);
+            let bboxesToRender = [];
+            function collectBboxes(blocks, path = "") {
+              blocks.forEach((block, index) => {
+                const currentPath = `${path}/${block.block_type}[${index}](${block.id})`;
+                // Assuming block.polygon is number[][] (array of points)
+                const points = block.polygon;
+                if (points && Array.isArray(points) && points.length >= 2 && block.block_type !== "Page") {
+                  // Calculate bbox from points
+                  const x_coords = points.map(p => p[0]);
+                  const y_coords = points.map(p => p[1]);
+                  let x_min = Math.min(...x_coords);
+                  let y_min = Math.min(...y_coords);
+                  let x_max = Math.max(...x_coords);
+                  let y_max = Math.max(...y_coords);
+                  if (x_max <= x_min || y_max <= y_min) {
+                    console.warn(`[PdfDocumentViewer] Page ${pageNum}: Invalid bbox for block ${block.id} (path: ${currentPath}) - [${x_min}, ${y_min}, ${x_max}, ${y_max}]`);
+                    return;
+                  }
+                  const style = {
+                    position: 'absolute',
+                    left: `${x_min * scale}px`,
+                    top: `${y_min * scale}px`,
+                    width: `${(x_max - x_min) * scale}px`,
+                    height: `${(y_max - y_min) * scale}px`,
+                    border: `1px solid ${block.id === selectedBboxId ? 'red' : 'rgba(0, 100, 255, 0.5)'}`,
+                    backgroundColor: `${block.id === selectedBboxId ? 'rgba(255, 0, 0, 0.2)' : 'rgba(0, 100, 255, 0.1)'}`,
+                    pointerEvents: 'auto',
+                    boxSizing: 'border-box',
+                    cursor: 'pointer',
+                    zIndex: 10 // Ensure bboxes are on top
+                  };
+                  if (bboxesToRender.length < 5 || block.id === selectedBboxId) {
+                    console.log(`[PdfDocumentViewer] Page ${pageNum}: Rendering bbox for ${block.id} (path: ${currentPath})`, {
+                      x_min,
+                      y_min,
+                      x_max,
+                      y_max,
+                      scale,
+                      finalStyle: style
+                    });
+                  }
+                  bboxesToRender.push(jsxRuntime.jsx("div", {
+                    style: style,
+                    title: `${block.id} (${block.block_type})`,
+                    onClick: e => {
+                      e.stopPropagation(); // Prevent clicks from bubbling to parent elements
+                      if (onPdfBboxClick) {
+                        // console.log(`[PdfDocumentViewer] Bbox clicked: ${block.id}`);
+                        onPdfBboxClick(block.id);
+                      }
+                    }
+                  }, block.id));
+                }
+                if (block.children) {
+                  collectBboxes(block.children, currentPath);
+                }
+              });
+            }
+            if (currentPageData.children) {
+              // console.log(`[PdfDocumentViewer] Page ${pageNum}: Starting collectBboxes for ${currentPageData.children.length} top-level blocks.`);
+              collectBboxes(currentPageData.children);
+            }
+            // console.log(`[PdfDocumentViewer] Page ${pageNum}: Collected ${bboxesToRender.length} bboxes to render.`);
+            return bboxesToRender;
+          };
+          return (
+            // The parent div for a page and its bboxes.
+            // It needs a defined width matching the page's render width for correct bbox positioning.
+            // Removed 'flex justify-center' to avoid x-offset issues with absolute bboxes.
+            // Bboxes are positioned relative to this div.
+            jsxRuntime.jsxs("div", {
+              id: `pdf-page-container-${pageNum}`,
+              className: "relative mb-4 shadow-lg mx-auto" // mx-auto will center it if parent is wider
+              ,
+              style: {
+                width: `${pageScales[pageNum] ? 600 : 'auto'}px`
+              },
+              children: [jsxRuntime.jsx(PdfComponents.Page, {
+                pageNumber: pageNum,
+                width: 600,
+                onRenderSuccess: pageProxy => {
+                  const viewport = pageProxy.getViewport({
+                    scale: 1
+                  });
+                  const newScale = 600 / viewport.width;
+                  console.log(`[PdfDocumentViewer] Page ${pageNum}: onRenderSuccess. Natural width: ${viewport.width}, calculated scale: ${newScale}`);
+                  if (pageScales[pageNum] !== newScale) {
+                    setPageScales(prev => ({
+                      ...prev,
+                      [pageNum]: newScale
+                    }));
+                  }
+                },
+                onRenderError: error => console.error(`[PdfDocumentViewer] Page ${pageNum}: onRenderError`, error),
+                className: "pdf-page-canvas" // Add a class for potential targeting
+              }), pageScales[pageNum] ? renderBboxes() : jsxRuntime.jsxs("div", {
+                style: {
+                  position: 'absolute',
+                  top: '50%',
+                  left: '50%',
+                  transform: 'translate(-50%, -50%)',
+                  color: 'orange',
+                  width: '200px',
+                  textAlign: 'center'
+                },
+                children: ["Loading page ", pageNum, "..."]
+              })]
+            }, pageNum)
+          );
+        })
+      }, `${fileUrl}`)]
+    })]
+  });
+}
+
+exports.default = PdfDocumentViewer;