@cannyminds/dms-file-viewers 0.14.0 → 0.16.0

package/dist/chunk-P5FH7LK7.mjs

@@ -1,639 +0,0 @@
-"use client";
-import {
-  getFileExtension
-} from "./chunk-M57PSU4O.mjs";
-import {
-  FileIcon_default,
-  mergeToolbarConfig
-} from "./chunk-DFBVN4MO.mjs";
-
-// src/components/viewers/TIFFViewer.tsx
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
-import {
-  Box,
-  Card,
-  CardContent,
-  CardHeader,
-  Divider,
-  LinearProgress,
-  Stack,
-  Typography,
-  IconButton
-} from "@mui/material";
-import DownloadIcon from "@mui/icons-material/Download";
-import PrintIcon from "@mui/icons-material/Print";
-import FullscreenIcon from "@mui/icons-material/Fullscreen";
-import FirstPageIcon from "@mui/icons-material/FirstPage";
-import LastPageIcon from "@mui/icons-material/LastPage";
-import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
-import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import ZoomInIcon from "@mui/icons-material/ZoomIn";
-import ZoomOutIcon from "@mui/icons-material/ZoomOut";
-import FitScreenIcon from "@mui/icons-material/FitScreen";
-import AspectRatioIcon from "@mui/icons-material/AspectRatio";
-import InfoIcon from "@mui/icons-material/Info";
-import DescriptionIcon from "@mui/icons-material/Description";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var resolveDocumentName = (file, fileName, url) => {
-  if (file?.name) {
-    return file.name;
-  }
-  if (fileName) {
-    return fileName;
-  }
-  if (url) {
-    const parts = url.split("?")[0]?.split("#")[0]?.split("/") ?? [];
-    return parts[parts.length - 1] || "document.tiff";
-  }
-  return "document.tiff";
-};
-var TIFFViewerContent = ({
-  sourceDescription,
-  file,
-  url,
-  fileName,
-  totalPages = 1,
-  className = "",
-  style = {},
-  width = "100%",
-  height = "100%",
-  onLoad,
-  onError,
-  onDownloadClick,
-  onPrintClick,
-  onMetadataClick,
-  onPropertiesClick,
-  pageLoader,
-  showDownload = true,
-  showPrint = true,
-  showMetadata = false,
-  showProperties = false,
-  // Extract props that shouldn't be passed to DOM elements
-  mimeType,
-  fileSize,
-  showPageCount,
-  showPageNavigation,
-  showZoomControls,
-  showSearch,
-  customRegistry,
-  initialSearchText,
-  initialSearchPages,
-  autoOpenSearch,
-  autoExecuteSearch,
-  onSearchComplete,
-  toolbarActions,
-  ...props
-}) => {
-  const [currentPage, setCurrentPage] = useState(1);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const [fitMode, setFitMode] = useState("fit-page");
-  const [zoom, setZoom] = useState(100);
-  const [viewportWidth, setViewportWidth] = useState(0);
-  const [viewportHeight, setViewportHeight] = useState(0);
-  const [isFullScreen, setIsFullScreen] = useState(false);
-  const [imageUrl, setImageUrl] = useState(null);
-  const [pageImages, setPageImages] = useState(/* @__PURE__ */ new Map());
-  const [internalLoading, setInternalLoading] = useState(false);
-  const [imageSize, setImageSize] = useState(null);
-  const viewportRef = useRef(null);
-  const containerRef = useRef(null);
-  const imgRef = useRef(null);
-  const pageLoaderRef = useRef(pageLoader);
-  useEffect(() => {
-    pageLoaderRef.current = pageLoader;
-  }, [pageLoader]);
-  const updatePageImage = useCallback((pageData, pageNumber) => {
-    const blob = new Blob([pageData]);
-    const imageUrl2 = URL.createObjectURL(blob);
-    setPageImages((prev) => {
-      const oldUrl = prev.get(pageNumber);
-      if (oldUrl && oldUrl !== imageUrl2) {
-        URL.revokeObjectURL(oldUrl);
-      }
-      return new Map(prev).set(pageNumber, imageUrl2);
-    });
-    setCurrentPage(pageNumber);
-    setImageUrl(imageUrl2);
-  }, []);
-  useEffect(() => {
-    const loadInitialPage = async () => {
-      if (pageLoaderRef.current && !pageImages.has(1) && currentPage === 1) {
-        setInternalLoading(true);
-        setError(null);
-        try {
-          const pageData = await pageLoaderRef.current(1);
-          if (pageData) {
-            updatePageImage(pageData, 1);
-          } else {
-            setError("Failed to load page 1");
-          }
-        } catch (err) {
-          const message = err instanceof Error ? err.message : "Unable to load page 1";
-          setError(message);
-          onError?.(new Error(message));
-        } finally {
-          setInternalLoading(false);
-        }
-      }
-    };
-    loadInitialPage();
-  }, [pageImages, currentPage, updatePageImage, onError]);
-  const handlePageChange = useCallback(async (newPageNumber) => {
-    if (!pageLoaderRef.current) {
-      console.warn("pageLoader not provided - page navigation disabled");
-      return;
-    }
-    const cachedUrl = pageImages.get(newPageNumber);
-    if (cachedUrl) {
-      setCurrentPage(newPageNumber);
-      setImageUrl(cachedUrl);
-      return;
-    }
-    setInternalLoading(true);
-    setError(null);
-    try {
-      const pageData = await pageLoaderRef.current(newPageNumber);
-      if (pageData) {
-        updatePageImage(pageData, newPageNumber);
-      } else {
-        setError(`Failed to load page ${newPageNumber}`);
-      }
-    } catch (err) {
-      const message = err instanceof Error ? err.message : `Unable to load page ${newPageNumber}`;
-      setError(message);
-      onError?.(new Error(message));
-    } finally {
-      setInternalLoading(false);
-    }
-  }, [pageImages, onError, updatePageImage]);
-  const resolvedFileName = useMemo(
-    () => fileName || sourceDescription,
-    [fileName, sourceDescription]
-  );
-  const fileExtension = useMemo(
-    () => getFileExtension(resolvedFileName || ""),
-    [resolvedFileName]
-  );
-  const loadImage = useCallback(async (resetPage = false) => {
-    if (!file && !url) {
-      setImageUrl(null);
-      if (resetPage) setCurrentPage(1);
-      setError(null);
-      return;
-    }
-    setIsLoading(true);
-    setError(null);
-    try {
-      let imageDataUrl;
-      if (file) {
-        imageDataUrl = URL.createObjectURL(file);
-      } else if (url) {
-        imageDataUrl = url;
-      } else {
-        throw new Error("No file or URL provided");
-      }
-      setImageUrl(imageDataUrl);
-      if (resetPage) {
-        setCurrentPage(1);
-        setFitMode("fit-page");
-        setZoom(100);
-      }
-      onLoad?.();
-    } catch (err) {
-      const message = err instanceof Error ? err.message : "Unable to load image file";
-      setError(message);
-      setImageUrl(null);
-      if (resetPage) {
-        setCurrentPage(1);
-        setFitMode("fit-width");
-        setZoom(100);
-      }
-      onError?.(new Error(message));
-    } finally {
-      setIsLoading(false);
-    }
-  }, [file, url, onLoad, onError]);
-  const [previousFileSource, setPreviousFileSource] = useState({});
-  useEffect(() => {
-    const currentFileSource = { file, url };
-    const isNewFile = previousFileSource.file !== file || previousFileSource.url !== url;
-    if (isNewFile) {
-      setPreviousFileSource(currentFileSource);
-      void loadImage(true);
-    } else {
-      void loadImage(false);
-    }
-  }, [file, url, loadImage, previousFileSource.file, previousFileSource.url]);
-  useEffect(() => {
-    return () => {
-      pageImages.forEach((url2) => {
-        URL.revokeObjectURL(url2);
-      });
-      if (imageUrl && file && !pageImages.has(currentPage)) {
-        URL.revokeObjectURL(imageUrl);
-      }
-    };
-  }, []);
-  const hasImage = !!imageUrl;
-  const hasMultiplePages = totalPages > 1;
-  const MARGIN = 40;
-  const MIN_ZOOM = 25;
-  const MAX_ZOOM = 400;
-  const ZOOM_LEVELS = [25, 50, 75, 100, 125, 150, 200, 300, 400];
-  const calculateFitZoom = useCallback((mode) => {
-    if (!imageSize || viewportWidth <= 0) return null;
-    const availableWidth = viewportWidth - MARGIN;
-    if (mode === "fit-width") {
-      const calculatedZoom = Math.round(availableWidth / imageSize.width * 100);
-      return Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, calculatedZoom));
-    }
-    if (mode === "fit-page" && viewportHeight > 0) {
-      const availableHeight = viewportHeight - MARGIN;
-      const scaleW = availableWidth / imageSize.width;
-      const scaleH = availableHeight / imageSize.height;
-      const calculatedZoom = Math.round(Math.min(scaleW, scaleH) * 100);
-      return Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, calculatedZoom));
-    }
-    return null;
-  }, [imageSize, viewportWidth, viewportHeight]);
-  useEffect(() => {
-    if (!hasImage || !imageSize) return;
-    const newZoom = calculateFitZoom(fitMode);
-    if (newZoom !== null) {
-      setZoom(newZoom);
-    }
-  }, [currentPage, hasImage, imageSize, fitMode, calculateFitZoom]);
-  useEffect(() => {
-    if (typeof window === "undefined" || typeof ResizeObserver === "undefined") {
-      return void 0;
-    }
-    if (!viewportRef.current) {
-      return void 0;
-    }
-    const updateSize = () => {
-      const bounds = viewportRef.current?.getBoundingClientRect();
-      if (bounds) {
-        setViewportWidth(bounds.width);
-        setViewportHeight(bounds.height);
-      }
-    };
-    updateSize();
-    const observer = new ResizeObserver(updateSize);
-    observer.observe(viewportRef.current);
-    return () => {
-      observer.disconnect();
-    };
-  }, []);
-  const handleZoomIn = useCallback(() => {
-    setFitMode("zoom");
-    setZoom((value) => {
-      const nextLevel = ZOOM_LEVELS.find((level) => level > value);
-      return nextLevel || MAX_ZOOM;
-    });
-  }, []);
-  const handleZoomOut = useCallback(() => {
-    setFitMode("zoom");
-    setZoom((value) => {
-      const prevLevel = [...ZOOM_LEVELS].reverse().find((level) => level < value);
-      return prevLevel || MIN_ZOOM;
-    });
-  }, []);
-  const handleFitWidth = useCallback(() => {
-    setFitMode("fit-width");
-    const newZoom = calculateFitZoom("fit-width");
-    if (newZoom !== null) {
-      setZoom(newZoom);
-    }
-  }, [calculateFitZoom]);
-  const handleFitPage = useCallback(() => {
-    setFitMode("fit-page");
-    const newZoom = calculateFitZoom("fit-page");
-    if (newZoom !== null) {
-      setZoom(newZoom);
-    }
-  }, [calculateFitZoom]);
-  const handleFirstPage = useCallback(() => {
-    handlePageChange(1);
-  }, [handlePageChange]);
-  const handleLastPage = useCallback(() => {
-    handlePageChange(totalPages);
-  }, [handlePageChange, totalPages]);
-  const handlePreviousPage = useCallback(() => {
-    const newPage = Math.max(currentPage - 1, 1);
-    if (newPage !== currentPage) {
-      handlePageChange(newPage);
-    }
-  }, [currentPage, handlePageChange]);
-  const handleNextPage = useCallback(() => {
-    const newPage = Math.min(currentPage + 1, totalPages);
-    if (newPage !== currentPage) {
-      handlePageChange(newPage);
-    }
-  }, [currentPage, totalPages, handlePageChange]);
-  const handleToggleFullScreen = useCallback(() => {
-    if (!isFullScreen && containerRef.current?.requestFullscreen) {
-      containerRef.current.requestFullscreen();
-      setIsFullScreen(true);
-    } else if (isFullScreen && document.exitFullscreen) {
-      document.exitFullscreen();
-      setIsFullScreen(false);
-    }
-  }, [isFullScreen]);
-  const toolbar = mergeToolbarConfig({ showDownload, showPrint, showMetadata, showProperties, onDownloadClick, onPrintClick, onMetadataClick, onPropertiesClick, toolbarActions });
-  const displayScale = zoom;
-  const handleImageLoad = useCallback((e) => {
-    const img = e.currentTarget;
-    setImageSize({ width: img.naturalWidth, height: img.naturalHeight });
-    if (!hasImage) {
-      onLoad?.();
-    }
-  }, [hasImage, onLoad]);
-  const renderImage = () => {
-    if (!imageUrl) {
-      return /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "No image available." });
-    }
-    let imgStyle = {
-      display: "block",
-      borderRadius: "4px"
-    };
-    if (imageSize) {
-      const zoomFactor = zoom / 100;
-      const scaledWidth = imageSize.width * zoomFactor;
-      const scaledHeight = imageSize.height * zoomFactor;
-      imgStyle = {
-        ...imgStyle,
-        width: `${scaledWidth}px`,
-        height: `${scaledHeight}px`,
-        maxWidth: "none",
-        maxHeight: "none"
-      };
-    }
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        component: "img",
-        ref: imgRef,
-        src: imageUrl,
-        alt: `${resolvedFileName} page ${currentPage}`,
-        onLoad: handleImageLoad,
-        onError: () => {
-          setError("Failed to load image");
-          onError?.(new Error("Failed to load image"));
-        },
-        sx: {
-          ...imgStyle,
-          boxShadow: 1,
-          backgroundColor: "#fff",
-          margin: "20px"
-        }
-      }
-    );
-  };
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      ref: containerRef,
-      className: `tiff-viewer ${className}`,
-      sx: {
-        width,
-        height,
-        display: "flex",
-        flexDirection: "column",
-        overflow: "hidden",
-        ...style
-      },
-      ...props,
-      children: /* @__PURE__ */ jsxs(Card, { sx: { height: "100%", width: "100%", display: "flex", flexDirection: "column", overflow: "hidden" }, elevation: 1, children: [
-        /* @__PURE__ */ jsx(
-          CardHeader,
-          {
-            avatar: /* @__PURE__ */ jsx(FileIcon_default, { ext: fileExtension, size: 32 }),
-            title: /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", fontWeight: 500, children: resolvedFileName }),
-            sx: { pb: 1 }
-          }
-        ),
-        /* @__PURE__ */ jsx(Box, { sx: { px: 2, pb: 1, display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", flexWrap: "wrap", gap: 1, children: [
-          hasMultiplePages && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                size: "small",
-                onClick: handleFirstPage,
-                disabled: currentPage === 1,
-                title: "First Page",
-                "aria-label": "Go to first page",
-                children: /* @__PURE__ */ jsx(FirstPageIcon, { fontSize: "small" })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                size: "small",
-                onClick: handlePreviousPage,
-                disabled: currentPage === 1,
-                title: "Previous Page",
-                "aria-label": "Go to previous page",
-                children: /* @__PURE__ */ jsx(ChevronLeftIcon, { fontSize: "small" })
-              }
-            ),
-            /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.secondary", sx: { minWidth: 100, textAlign: "center" }, children: [
-              "Page ",
-              currentPage,
-              " of ",
-              totalPages
-            ] }),
-            /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                size: "small",
-                onClick: handleNextPage,
-                disabled: currentPage === totalPages,
-                title: "Next Page",
-                "aria-label": "Go to next page",
-                children: /* @__PURE__ */ jsx(ChevronRightIcon, { fontSize: "small" })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                size: "small",
-                onClick: handleLastPage,
-                disabled: currentPage === totalPages,
-                title: "Last Page",
-                "aria-label": "Go to last page",
-                children: /* @__PURE__ */ jsx(LastPageIcon, { fontSize: "small" })
-              }
-            ),
-            /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { mx: 1 } })
-          ] }),
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              size: "small",
-              onClick: handleZoomOut,
-              disabled: !hasImage || zoom <= 25,
-              title: "Zoom Out",
-              "aria-label": "Zoom out",
-              children: /* @__PURE__ */ jsx(ZoomOutIcon, { fontSize: "small" })
-            }
-          ),
-          /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { minWidth: 64, textAlign: "center" }, children: hasImage ? `${displayScale}%` : "\u2014" }),
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              size: "small",
-              onClick: handleZoomIn,
-              disabled: !hasImage || zoom >= 400,
-              title: "Zoom In",
-              "aria-label": "Zoom in",
-              children: /* @__PURE__ */ jsx(ZoomInIcon, { fontSize: "small" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              size: "small",
-              onClick: handleFitWidth,
-              disabled: !hasImage,
-              title: "Fit to Width",
-              "aria-label": "Fit to width",
-              color: fitMode === "fit-width" ? "primary" : "default",
-              children: /* @__PURE__ */ jsx(AspectRatioIcon, { fontSize: "small" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              size: "small",
-              onClick: handleFitPage,
-              disabled: !hasImage,
-              title: "Fit to Page",
-              "aria-label": "Fit to page",
-              color: fitMode === "fit-page" ? "primary" : "default",
-              children: /* @__PURE__ */ jsx(FitScreenIcon, { fontSize: "small" })
-            }
-          ),
-          /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { mx: 1 } }),
-          !toolbar.isHidden("download") && /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              size: "small",
-              onClick: toolbar.getHandler("download", onDownloadClick),
-              disabled: toolbar.isDisabled("download"),
-              title: toolbar.getLabel("download") || "Download",
-              "aria-label": "Download TIFF",
-              children: toolbar.getIcon("download") || /* @__PURE__ */ jsx(DownloadIcon, { fontSize: "small" })
-            }
-          ),
-          !toolbar.isHidden("print") && /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              size: "small",
-              onClick: toolbar.getHandler("print", onPrintClick),
-              disabled: toolbar.isDisabled("print"),
-              title: toolbar.getLabel("print") || "Print",
-              "aria-label": "Print TIFF",
-              children: toolbar.getIcon("print") || /* @__PURE__ */ jsx(PrintIcon, { fontSize: "small" })
-            }
-          ),
-          !toolbar.isHidden("fullscreen") && /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              size: "small",
-              onClick: toolbar.getHandler("fullscreen", handleToggleFullScreen),
-              disabled: toolbar.isDisabled("fullscreen"),
-              title: toolbar.getLabel("fullscreen") || "Fullscreen",
-              "aria-label": "Toggle fullscreen",
-              children: toolbar.getIcon("fullscreen") || /* @__PURE__ */ jsx(FullscreenIcon, { fontSize: "small" })
-            }
-          ),
-          !toolbar.isHidden("metadata") && /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              size: "small",
-              onClick: toolbar.getHandler("metadata", onMetadataClick),
-              disabled: toolbar.isDisabled("metadata"),
-              title: toolbar.getLabel("metadata") || "Document Metadata",
-              "aria-label": "View document metadata",
-              children: toolbar.getIcon("metadata") || /* @__PURE__ */ jsx(DescriptionIcon, { fontSize: "small" })
-            }
-          ),
-          !toolbar.isHidden("properties") && /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              size: "small",
-              onClick: toolbar.getHandler("properties", onPropertiesClick),
-              disabled: toolbar.isDisabled("properties"),
-              title: toolbar.getLabel("properties") || "Document Properties",
-              "aria-label": "View document properties",
-              children: toolbar.getIcon("properties") || /* @__PURE__ */ jsx(InfoIcon, { fontSize: "small" })
-            }
-          )
-        ] }) }),
-        (isLoading || internalLoading) && /* @__PURE__ */ jsx(LinearProgress, { sx: { mx: 3, mb: 1 } }),
-        error && /* @__PURE__ */ jsx(Typography, { color: "error", variant: "body2", sx: { px: 3, pb: 1 }, children: error }),
-        /* @__PURE__ */ jsx(Divider, {}),
-        /* @__PURE__ */ jsx(
-          CardContent,
-          {
-            sx: {
-              flexGrow: 1,
-              flexShrink: 1,
-              minHeight: 0,
-              p: 0,
-              overflow: "hidden",
-              backgroundColor: "#f6f8fa",
-              position: "relative"
-            },
-            children: /* @__PURE__ */ jsx(
-              Box,
-              {
-                ref: viewportRef,
-                sx: {
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  right: 0,
-                  bottom: 0,
-                  overflow: "auto"
-                },
-                children: /* @__PURE__ */ jsx(
-                  Box,
-                  {
-                    sx: {
-                      minWidth: "100%",
-                      minHeight: "100%",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center"
-                    },
-                    children: renderImage()
-                  }
-                )
-              }
-            )
-          }
-        )
-      ] })
-    }
-  );
-};
-var TIFFViewer = (props) => {
-  const sourceDescription = useMemo(
-    () => resolveDocumentName(props.file, props.fileName, props.url),
-    [props.file, props.fileName, props.url]
-  );
-  return /* @__PURE__ */ jsx(TIFFViewerContent, { ...props, sourceDescription });
-};
-
-export {
-  TIFFViewer
-};
-//# sourceMappingURL=chunk-P5FH7LK7.mjs.map