lite-image-preview 1.0.3 → 1.1.0

package/README.md

@@ -83,12 +83,13 @@ If the image fails to load, `previewImage()` throws an error.
 
 ## API overview
 
-### `previewImage(url, dispose?)`
+### `previewImage(url, dispose?, options?)`
 
 Opens a preview dialog for a raster image.
 
 * `url` — Image URL.
 * `dispose?` — Optional callback invoked after the dialog fully closes.
+* `options?` — Optional preview configuration (see `ImagePreviewOptions`).
 
 Returns:
 
@@ -234,6 +235,13 @@ The package exports the main types so advanced consumers can build custom adapte
 * `TransformState`
 * `ViewBox`
 * `PreviewCloseHandle`
+* `ImagePreviewOptions`
+
+`ImagePreviewOptions` includes:
+- `minScale?: number` — minimum zoom scale (default: 0.1)
+- `maxScale?: number` — maximum zoom scale (default: 8)
+- `fitPadding?: number` — padding around the image when fitting to stage (default: 0)
+- `fitMaxScale?: number` — maximum scale when fitting to stage (default: 1)
 
 ---
 

package/dist/main.cjs

@@ -237,7 +237,7 @@ function createPreview(content, initAdapter, dispose) {
 function createTransformAdapter(content, stage, baseWidth, baseHeight, options) {
 	const minScale = options?.minScale ?? .1;
 	const maxScale = options?.maxScale ?? 8;
-	const fitPadding = options?.fitPadding ?? 32;
+	const fitPadding = options?.fitPadding ?? 0;
 	const fitMaxScale = options?.fitMaxScale ?? 1;
 	const prev = {
 		transform: content.style.transform,
@@ -527,7 +527,7 @@ function bindGestures(content, adapter) {
 * The returned promise resolves to a close handle when the preview is ready.
 * If the image fails to load, the promise resolves to null.
 */
-async function previewImage(url, dispose) {
+async function previewImage(url, dispose, options) {
 	const img = document.createElement("img");
 	img.src = url;
 	img.alt = "";
@@ -545,10 +545,11 @@ async function previewImage(url, dispose) {
 	}
 	return createPreview(img, (stage) => {
 		return createTransformAdapter(img, stage, img.naturalWidth || 1, img.naturalHeight || 1, {
-			minScale: .1,
-			maxScale: 8,
-			fitPadding: 32,
-			fitMaxScale: 1
+			minScale: 0,
+			maxScale: 20,
+			fitPadding: 0,
+			fitMaxScale: 1,
+			...options
 		});
 	}, dispose);
 }

package/dist/main.d.ts

@@ -85,6 +85,27 @@ interface PreviewAdapter extends PreviewController {
  * Factory function used by createPreview to initialize a rendering adapter.
  */
 type PreviewAdapterFactory = (stage: HTMLElement) => PreviewAdapter;
+/**
+ * Options for image previews.
+ */
+interface ImagePreviewOptions {
+  /**
+   * Minimum zoom scale (default: 0.1).
+   */
+  minScale?: number;
+  /**
+   * Maximum zoom scale (default: 8).
+   */
+  maxScale?: number;
+  /**
+   * Padding around the image when fitting to stage (default: 0).
+   */
+  fitPadding?: number;
+  /**
+   * Maximum scale when fitting to stage (default: 1).
+   */
+  fitMaxScale?: number;
+}
 //#endregion
 //#region src/preview.d.ts
 /**
@@ -105,7 +126,7 @@ declare function createPreview(content: HTMLElement, initAdapter: PreviewAdapter
  * The returned promise resolves to a close handle when the preview is ready.
  * If the image fails to load, the promise resolves to null.
  */
-declare function previewImage(url: string, dispose?: () => void): Promise<PreviewCloseHandle>;
+declare function previewImage(url: string, dispose?: () => void, options?: ImagePreviewOptions): Promise<PreviewCloseHandle>;
 /**
  * Open an SVG preview dialog.
  *
@@ -113,4 +134,4 @@ declare function previewImage(url: string, dispose?: () => void): Promise<Previe
  */
 declare function previewSvg(svg: SVGSVGElement, dispose?: () => void): Promise<PreviewCloseHandle>;
 //#endregion
-export { type Point, type PreviewAdapter, type PreviewAdapterFactory, type PreviewCloseHandle, type PreviewController, type TransformState, type ViewBox, createPreview, previewImage, previewSvg };
+export { type ImagePreviewOptions, type Point, type PreviewAdapter, type PreviewAdapterFactory, type PreviewCloseHandle, type PreviewController, type TransformState, type ViewBox, createPreview, previewImage, previewSvg };

package/dist/main.js

@@ -236,7 +236,7 @@ function createPreview(content, initAdapter, dispose) {
 function createTransformAdapter(content, stage, baseWidth, baseHeight, options) {
 	const minScale = options?.minScale ?? .1;
 	const maxScale = options?.maxScale ?? 8;
-	const fitPadding = options?.fitPadding ?? 32;
+	const fitPadding = options?.fitPadding ?? 0;
 	const fitMaxScale = options?.fitMaxScale ?? 1;
 	const prev = {
 		transform: content.style.transform,
@@ -526,7 +526,7 @@ function bindGestures(content, adapter) {
 * The returned promise resolves to a close handle when the preview is ready.
 * If the image fails to load, the promise resolves to null.
 */
-async function previewImage(url, dispose) {
+async function previewImage(url, dispose, options) {
 	const img = document.createElement("img");
 	img.src = url;
 	img.alt = "";
@@ -544,10 +544,11 @@ async function previewImage(url, dispose) {
 	}
 	return createPreview(img, (stage) => {
 		return createTransformAdapter(img, stage, img.naturalWidth || 1, img.naturalHeight || 1, {
-			minScale: .1,
-			maxScale: 8,
-			fitPadding: 32,
-			fitMaxScale: 1
+			minScale: 0,
+			maxScale: 20,
+			fitPadding: 0,
+			fitMaxScale: 1,
+			...options
 		});
 	}, dispose);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lite-image-preview",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Lightweight image and SVG preview dialog with smooth pinch zoom, crisp SVG scaling, and mobile-friendly gesture handling.",
   "keywords": [
     "front-end",

package/src/main.ts

@@ -6,6 +6,7 @@ export type {
     PreviewController,
     PreviewAdapter,
     PreviewAdapterFactory,
+    ImagePreviewOptions,
 } from './types'
 
 export { createPreview, previewImage, previewSvg } from './preview'

package/src/preview.ts

@@ -5,6 +5,7 @@ import type {
     PreviewCloseHandle,
     TransformState,
     ViewBox,
+    ImagePreviewOptions,
 } from './types'
 import {
     clamp,
@@ -184,16 +185,11 @@ function createTransformAdapter(
     stage: HTMLElement,
     baseWidth: number,
     baseHeight: number,
-    options?: {
-        minScale?: number
-        maxScale?: number
-        fitPadding?: number
-        fitMaxScale?: number
-    }
+    options?: ImagePreviewOptions
 ): PreviewAdapter {
     const minScale = options?.minScale ?? 0.1
     const maxScale = options?.maxScale ?? 8
-    const fitPadding = options?.fitPadding ?? 32
+    const fitPadding = options?.fitPadding ?? 0
     const fitMaxScale = options?.fitMaxScale ?? 1
 
     const prev = {
@@ -573,7 +569,8 @@ function bindGestures(
  */
 export async function previewImage(
     url: string,
-    dispose?: () => void
+    dispose?: () => void,
+    options?: ImagePreviewOptions
 ): Promise<PreviewCloseHandle> {
     const img = document.createElement('img')
 
@@ -602,8 +599,9 @@ export async function previewImage(
             return createTransformAdapter(img, stage, w, h, {
                 minScale: 0,
                 maxScale: 20,
-                fitPadding: 10,
+                fitPadding: 0,
                 fitMaxScale: 1,
+                ...options,
             })
         },
         dispose

package/src/types.ts

@@ -96,3 +96,25 @@ export interface PreviewAdapter extends PreviewController {
  * Factory function used by createPreview to initialize a rendering adapter.
  */
 export type PreviewAdapterFactory = (stage: HTMLElement) => PreviewAdapter
+
+/**
+ * Options for image previews.
+ */
+export interface ImagePreviewOptions {
+    /**
+     * Minimum zoom scale (default: 0.1).
+     */
+    minScale?: number
+    /**
+     * Maximum zoom scale (default: 8).
+     */
+    maxScale?: number
+    /**
+     * Padding around the image when fitting to stage (default: 0).
+     */
+    fitPadding?: number
+    /**
+     * Maximum scale when fitting to stage (default: 1).
+     */
+    fitMaxScale?: number
+}