@file-viewer/renderer-image 2.1.16 → 2.1.18

package/dist/image.js

@@ -1,4 +1,4 @@
-import { createFileViewerTranslator, createFileViewerZoomChangeEmitter as createZoomChangeEmitter, registerFileViewerZoomProvider, unregisterFileViewerZoomProvider, } from '@file-viewer/core';
+import { createFileViewerTranslator, createFileViewerZoomChangeEmitter as createZoomChangeEmitter, resolveFileViewerFitScale, registerFileViewerZoomProvider, unregisterFileViewerZoomProvider, } from '@file-viewer/core';
 const imageMimeMap = {
     avif: 'image/avif',
     bmp: 'image/bmp',
@@ -27,8 +27,8 @@ const imageStyle = `
 @media (prefers-color-scheme:dark){.file-viewer[data-viewer-theme='system'] .image-viewer{background:#101820}}
 @media (max-width:767px){.image-stage{padding:12px}.image-lightbox{padding:16px}.image-lightbox button{top:12px;right:12px}}
 `;
-const createStyle = () => {
-    const style = document.createElement('style');
+const createStyle = (documentRef) => {
+    const style = documentRef.createElement('style');
     style.textContent = imageStyle;
     return style;
 };
@@ -71,16 +71,16 @@ const resolveImageUrl = async (buffer, type) => {
 const roundImageScale = (value) => {
     return Number(value.toFixed(3));
 };
-const createLightbox = (src, t) => {
-    const lightbox = document.createElement('div');
+const createLightbox = (documentRef, src, t) => {
+    const lightbox = documentRef.createElement('div');
     lightbox.className = 'image-lightbox';
     lightbox.hidden = true;
     lightbox.setAttribute('role', 'dialog');
     lightbox.setAttribute('aria-modal', 'true');
-    const image = document.createElement('img');
+    const image = documentRef.createElement('img');
     image.alt = t('image.lightbox.alt');
     image.src = src;
-    const closeButton = document.createElement('button');
+    const closeButton = documentRef.createElement('button');
     closeButton.type = 'button';
     closeButton.setAttribute('aria-label', t('image.lightbox.close'));
     closeButton.textContent = 'x';
@@ -108,27 +108,28 @@ const createLightbox = (src, t) => {
     };
 };
 export default async function renderImage(buffer, target, type, context) {
+    var _a;
     const t = createFileViewerTranslator(context === null || context === void 0 ? void 0 : context.options);
+    const documentRef = target.ownerDocument || document;
     const src = await resolveImageUrl(buffer, type);
     let userZoom = 1;
     let fitScale = 1;
     let currentScale = 1;
     let viewportHeight = 0;
     const zoomEmitter = createZoomChangeEmitter();
-    const root = document.createElement('div');
+    const root = documentRef.createElement('div');
     root.className = 'image-viewer';
     root.dataset.viewerZoomProvider = 'image';
-    const stage = document.createElement('div');
+    const stage = documentRef.createElement('div');
     stage.className = 'image-stage';
-    const image = document.createElement('img');
+    const image = documentRef.createElement('img');
     image.alt = t('image.alt');
     image.src = src;
     stage.append(image);
     root.append(stage);
-    const lightbox = createLightbox(src, t);
+    const lightbox = createLightbox(documentRef, src, t);
     const openLightbox = () => lightbox.open();
     image.addEventListener('click', openLightbox);
-    document.body.append(lightbox.element);
     const getMinScale = () => Math.min(0.1, fitScale || 0.1);
     const clampScale = (value) => {
         const minScale = getMinScale();
@@ -181,6 +182,51 @@ export default async function renderImage(buffer, target, type, context) {
         zoomEmitter.emit();
         return getZoomState();
     };
+    const fitImage = (request) => {
+        var _a, _b;
+        const naturalWidth = image.naturalWidth || 0;
+        const naturalHeight = image.naturalHeight || 0;
+        if (!naturalWidth || !naturalHeight) {
+            return {
+                applied: false,
+                mode: request.mode,
+                resize: request.resize,
+                source: request.source,
+                reason: 'image-not-ready',
+                provider: 'zoom',
+            };
+        }
+        const mode = request.mode === 'auto' ? 'scale-down' : request.mode;
+        const scale = resolveFileViewerFitScale({
+            mode,
+            viewportWidth: Math.max(1, request.viewportWidth || root.clientWidth || 0),
+            viewportHeight: Math.max(1, request.viewportHeight || root.clientHeight || viewportHeight || 0),
+            contentWidth: naturalWidth,
+            contentHeight: naturalHeight,
+            currentScale,
+            minScale: (_a = request.minScale) !== null && _a !== void 0 ? _a : getMinScale(),
+            maxScale: (_b = request.maxScale) !== null && _b !== void 0 ? _b : 5,
+        });
+        if (!scale) {
+            return {
+                applied: false,
+                mode: request.mode,
+                resize: request.resize,
+                source: request.source,
+                reason: 'unmeasurable',
+                provider: 'zoom',
+            };
+        }
+        const state = setZoom(scale);
+        return {
+            applied: true,
+            mode: request.mode,
+            resize: request.resize,
+            scale: state.scale,
+            source: request.source,
+            provider: 'zoom',
+        };
+    };
     registerFileViewerZoomProvider(root, {
         zoomIn: () => setZoom(currentScale + 0.15),
         zoomOut: () => setZoom(currentScale - 0.15),
@@ -191,10 +237,12 @@ export default async function renderImage(buffer, target, type, context) {
             return getZoomState();
         },
         setZoom,
+        fit: fitImage,
         getState: getZoomState,
         subscribe: zoomEmitter.subscribe,
     });
-    target.replaceChildren(createStyle(), root);
+    target.replaceChildren(createStyle(documentRef), root);
+    (((_a = context === null || context === void 0 ? void 0 : context.surface) === null || _a === void 0 ? void 0 : _a.shadowRoot) || target).append(lightbox.element);
     updateViewportSize();
     return {
         $el: target,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@file-viewer/renderer-image",
-  "version": "2.1.16",
+  "version": "2.1.18",
   "private": false,
   "type": "module",
   "description": "Standalone image renderer plugin for Flyfish File Viewer with native image preview, HEIC/HEIF conversion, lightbox, and unified zoom support.",
@@ -34,7 +34,7 @@
   },
   "funding": {
     "type": "individual",
-    "url": "https://dev.flyfish.group/shop"
+    "url": "https://dev.flyfish.group/donate?source=npm"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -54,7 +54,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@file-viewer/core": "^2.1.16",
+    "@file-viewer/core": "^2.1.18",
     "heic2any": "^0.0.4"
   },
   "devDependencies": {