@tfw.in/structura-lib 0.2.0

package/dist/esm/PdfDocumentViewer.js

@@ -0,0 +1,294 @@
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, defineProperty as _defineProperty, toConsumableArray as _toConsumableArray } from './_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useCallback } from 'react';
+import './polyfills.js';
+import { Document, Page } from './PdfComponents.js';
+import './worker.js';
+
+function PdfDocumentViewer(_ref2) {
+  var fileUrl = _ref2.fileUrl,
+    allowedPages = _ref2.allowedPages,
+    _onLoadSuccess = _ref2.onLoadSuccess,
+    onFileUpload = _ref2.onFileUpload,
+    onRemovePDF = _ref2.onRemovePDF,
+    jsonData = _ref2.jsonData,
+    selectedBboxId = _ref2.selectedBboxId,
+    onPdfBboxClick = _ref2.onPdfBboxClick;
+  // console.log("[PdfDocumentViewer] Props received:", { fileUrl: !!fileUrl, jsonData: !!jsonData, selectedBboxId, onPdfBboxClick: !!onPdfBboxClick, allowedPages });
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    pageScales = _useState4[0],
+    setPageScales = _useState4[1]; // To store scale for each page
+  useEffect(function () {
+    // console.log("[PdfDocumentViewer] pageScales updated:", pageScales);
+  }, [pageScales]);
+  var handleDragOver = useCallback(function (e) {
+    e.preventDefault();
+    setIsDragging(true);
+  }, []);
+  useCallback(function (e) {
+    e.preventDefault();
+    setIsDragging(false);
+  }, []);
+  var handleDrop = useCallback(function (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)
+    var files = e.dataTransfer.files;
+    if (files.length > 0) {
+      var 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]);
+  var renderUploadArea = function renderUploadArea() {
+    return jsxs("div", {
+      className: "structura-upload-container ".concat(isDragging ? 'border-blue-500 bg-blue-50' : ''),
+      onDragOver: handleDragOver,
+      onDragEnter: function onDragEnter() {
+        return setIsDragging(true);
+      },
+      onDragLeave: function onDragLeave() {
+        return setIsDragging(false);
+      },
+      onDrop: handleDrop,
+      onClick: function onClick() {
+        var _a;
+        return (_a = document.getElementById('file-upload')) === null || _a === void 0 ? void 0 : _a.click();
+      },
+      children: [jsx("div", {
+        className: "structura-upload-icon",
+        children: jsx("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          children: 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"
+          })
+        })
+      }), jsx("h3", {
+        className: "structura-upload-text",
+        children: "Drop PDF Here or Click to Upload"
+      }), jsx("p", {
+        className: "structura-upload-subtext",
+        children: "Drag and drop your PDF document here, or click the button below to browse files"
+      }), jsxs("button", {
+        className: "structura-upload-button",
+        children: ["Upload Document", jsx("input", {
+          type: "file",
+          id: "file-upload",
+          accept: "application/pdf",
+          onChange: function onChange(e) {
+            // console.log('!!! [PdfDocumentViewer] File input change event');
+            if (e.target.files && e.target.files[0]) {
+              var file = e.target.files[0];
+              // console.log('!!! [PdfDocumentViewer] File selected:', file.name, file.type);
+              onFileUpload(file);
+            }
+          },
+          style: {
+            display: 'none'
+          }
+        })]
+      }), 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 jsxs("div", {
+    className: "w-full relative",
+    children: [" ", jsxs("div", {
+      className: "relative w-full",
+      children: [jsxs("div", {
+        className: "sticky top-0 z-10 float-right mr-4 mt-4",
+        style: {
+          right: 'calc(50% - 300px + 1rem)'
+        },
+        children: [" ", 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: jsx("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            className: "h-6 w-6",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            children: 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"
+            })
+          })
+        })]
+      }), jsx(Document, {
+        file: fileUrl,
+        onLoadSuccess: function onLoadSuccess(_ref3) {
+          var numPages = _ref3.numPages;
+          // console.log('!!! [PdfDocumentViewer] PDF loaded successfully with', numPages, 'pages');
+          _onLoadSuccess(numPages);
+        },
+        className: "flex flex-col w-full",
+        children: allowedPages.map(function (pageNum) {
+          var _a;
+          var pageIndex = pageNum - 1; // pageNum is 1-indexed
+          // Assuming jsonData.children is an array of page blocks, ordered by page number.
+          var 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") ;
+          var renderBboxes = function 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 ".concat(pageNum, " yet."));
+              return null;
+            }
+            var scale = pageScales[pageNum];
+            // console.log(`[PdfDocumentViewer] Page ${pageNum}: Using scale ${scale}`);
+            var bboxesToRender = [];
+            function collectBboxes(blocks) {
+              var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+              blocks.forEach(function (block, index) {
+                var currentPath = "".concat(path, "/").concat(block.block_type, "[").concat(index, "](").concat(block.id, ")");
+                // Assuming block.polygon is number[][] (array of points)
+                var points = block.polygon;
+                if (points && Array.isArray(points) && points.length >= 2 && block.block_type !== "Page") {
+                  // Calculate bbox from points
+                  var x_coords = points.map(function (p) {
+                    return p[0];
+                  });
+                  var y_coords = points.map(function (p) {
+                    return p[1];
+                  });
+                  var x_min = Math.min.apply(Math, _toConsumableArray(x_coords));
+                  var y_min = Math.min.apply(Math, _toConsumableArray(y_coords));
+                  var x_max = Math.max.apply(Math, _toConsumableArray(x_coords));
+                  var y_max = Math.max.apply(Math, _toConsumableArray(y_coords));
+                  if (x_max <= x_min || y_max <= y_min) {
+                    console.warn("[PdfDocumentViewer] Page ".concat(pageNum, ": Invalid bbox for block ").concat(block.id, " (path: ").concat(currentPath, ") - [").concat(x_min, ", ").concat(y_min, ", ").concat(x_max, ", ").concat(y_max, "]"));
+                    return;
+                  }
+                  var style = {
+                    position: 'absolute',
+                    left: "".concat(x_min * scale, "px"),
+                    top: "".concat(y_min * scale, "px"),
+                    width: "".concat((x_max - x_min) * scale, "px"),
+                    height: "".concat((y_max - y_min) * scale, "px"),
+                    border: "1px solid ".concat(block.id === selectedBboxId ? 'red' : 'rgba(0, 100, 255, 0.5)'),
+                    backgroundColor: "".concat(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 ".concat(pageNum, ": Rendering bbox for ").concat(block.id, " (path: ").concat(currentPath, ")"), {
+                      x_min: x_min,
+                      y_min: y_min,
+                      x_max: x_max,
+                      y_max: y_max,
+                      scale: scale,
+                      finalStyle: style
+                    });
+                  }
+                  bboxesToRender.push(jsx("div", {
+                    style: style,
+                    title: "".concat(block.id, " (").concat(block.block_type, ")"),
+                    onClick: function 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.
+            jsxs("div", {
+              id: "pdf-page-container-".concat(pageNum),
+              className: "relative mb-4 shadow-lg mx-auto" // mx-auto will center it if parent is wider
+              ,
+              style: {
+                width: "".concat(pageScales[pageNum] ? 600 : 'auto', "px")
+              },
+              children: [jsx(Page, {
+                pageNumber: pageNum,
+                width: 600,
+                onRenderSuccess: function onRenderSuccess(pageProxy) {
+                  var viewport = pageProxy.getViewport({
+                    scale: 1
+                  });
+                  var newScale = 600 / viewport.width;
+                  console.log("[PdfDocumentViewer] Page ".concat(pageNum, ": onRenderSuccess. Natural width: ").concat(viewport.width, ", calculated scale: ").concat(newScale));
+                  if (pageScales[pageNum] !== newScale) {
+                    setPageScales(function (prev) {
+                      return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty({}, pageNum, newScale));
+                    });
+                  }
+                },
+                onRenderError: function onRenderError(error) {
+                  return console.error("[PdfDocumentViewer] Page ".concat(pageNum, ": onRenderError"), error);
+                },
+                className: "pdf-page-canvas" // Add a class for potential targeting
+              }), pageScales[pageNum] ? renderBboxes() : jsxs("div", {
+                style: {
+                  position: 'absolute',
+                  top: '50%',
+                  left: '50%',
+                  transform: 'translate(-50%, -50%)',
+                  color: 'orange',
+                  width: '200px',
+                  textAlign: 'center'
+                },
+                children: ["Loading page ", pageNum, "..."]
+              })]
+            }, pageNum)
+          );
+        })
+      }, "".concat(fileUrl))]
+    })]
+  });
+}
+
+export { PdfDocumentViewer as default };