@koi-br/ocr-web-sdk 1.0.55 → 1.0.57

package/dist/{tiff.min-CpubOvNg.mjs → tiff.min-CBNriamS.mjs}

@@ -1,4 +1,4 @@
-import { g as getAugmentedNamespace, a as getDefaultExportFromCjs } from "./index-7NzuKZi7.mjs";
+import { g as getAugmentedNamespace, a as getDefaultExportFromCjs } from "./index--nfCgExV.mjs";
 function _mergeNamespaces(U, W) {
   for (var Z = 0; Z < W.length; Z++) {
     const s0 = W[Z];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koi-br/ocr-web-sdk",
-  "version": "1.0.55",
+  "version": "1.0.57",
   "description": "一个支持多种Office文件格式预览的Vue3组件SDK，包括PDF、Word、Excel、图片、OFD、TIF等格式",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/preview/ImagePreview.vue

@@ -105,6 +105,7 @@
     <div
       ref="containerRef"
       class="image-container"
+      :class="{ 'hide-horizontal-scroll': shouldHideHorizontalScroll }"
       @mousedown="startPan"
       @mousemove="pan"
       @mouseup="handleMouseUp"
@@ -489,6 +490,14 @@ const initialAutoFitScale = ref<number | null>(null); // 记录初始自适应
 const isCalculatingAutoFit = ref(false); // 标记是否正在计算自适应宽度（显示 loading）
 const isImageReady = ref(false); // 标记图片是否已准备好显示（自适应宽度计算完成）
 
+// 自适应宽度“贴合宽度”时隐藏横向滚动条（避免 transform 带来的 1px 溢出触发横向滚动条）
+// 仅在 scale <= initialAutoFitScale 的阶段生效，不影响用户放大后的横向滚动/拖拽查看逻辑
+const shouldHideHorizontalScroll = computed(() => {
+  if (!props.autoFitWidth) return false;
+  if (initialAutoFitScale.value === null) return false;
+  return scale.value <= initialAutoFitScale.value + 0.001;
+});
+
 // 监听图片URL变化，当有新图片时立即隐藏（等待自适应宽度计算）
 watch(
   () => imageUrls.value,
@@ -650,7 +659,19 @@ const getPageBlocksData = (pageNo: number) => {
 
 // 计算指定页面缩放后的尺寸（考虑旋转）
 const getPageScaledSize = (pageNo: number) => {
-  const pageSize = imageSizes.get(pageNo);
+  // 某些情况下（尤其是多页最后一页）图片尺寸可能还没写入 imageSizes，
+  // 此时如果返回 0，会导致 page 容器走 "auto" 高度（未缩放高度），从而出现底部留白。
+  // 在自适应宽度模式下，兜底使用第一页尺寸作为基准，保证容器高度按 scale 计算。
+  let pageSize = imageSizes.get(pageNo);
+  if (
+    (!pageSize || pageSize.width === 0 || pageSize.height === 0) &&
+    props.autoFitWidth
+  ) {
+    const firstPageSize = imageSizes.get(1);
+    if (firstPageSize && firstPageSize.width > 0 && firstPageSize.height > 0) {
+      pageSize = firstPageSize;
+    }
+  }
   if (!pageSize || pageSize.width === 0 || pageSize.height === 0) {
     return { width: 0, height: 0 };
   }
@@ -693,7 +714,10 @@ const zoom = (delta, isWheel = false) => {
   isUserZooming.value = true;
 
   const step = isWheel ? props.wheelStep : props.clickStep; // 滚轮缩放使用更小的步长
+  const oldScale = scale.value;
   const newScale = scale.value + delta * step;
+  
+  // 更新缩放比例
   if (newScale <= props.minScale) {
     scale.value = props.minScale;
   } else if (newScale >= props.maxScale) {
@@ -701,6 +725,73 @@ const zoom = (delta, isWheel = false) => {
   } else {
     scale.value = newScale;
   }
+  
+  // 缩放后调整位置，确保图片不会超出容器
+  // 使用 nextTick 确保 DOM 已更新
+  nextTick(() => {
+    adjustPositionAfterZoom(oldScale, scale.value);
+  });
+};
+
+/**
+ * 缩放后调整位置
+ * 根据缩放前后的比例，智能调整图片位置，确保：
+ * 1. 图片不会超出容器顶部和左侧
+ * 2. 在自适应宽度范围内时，保持居中显示
+ * 3. 超过自适应宽度时，保持左侧对齐，向右向下扩展/向左向上收缩
+ */
+const adjustPositionAfterZoom = (oldScale: number, newScale: number) => {
+  if (!containerRef.value) return;
+  
+  const container = containerRef.value;
+  const containerRect = container.getBoundingClientRect();
+  const containerWidth = containerRect.width;
+  
+  // 获取当前页的图片尺寸
+  const currentPageSize = imageSizes.get(currentPage.value);
+  if (!currentPageSize || currentPageSize.width === 0) return;
+  
+  // 计算缩放后的图片宽度（考虑旋转）
+  const normalizedRotation = ((rotation.value % 360) + 360) % 360;
+  const isRotated = normalizedRotation === 90 || normalizedRotation === 270;
+  const imageBaseWidth = isRotated ? currentPageSize.height : currentPageSize.width;
+  const newScaledWidth = imageBaseWidth * newScale;
+  const oldScaledWidth = imageBaseWidth * oldScale;
+  
+  // 判断是否超过自适应宽度
+  const isOverAutoFitWidth = props.autoFitWidth && initialAutoFitScale.value !== null
+    ? newScale > initialAutoFitScale.value
+    : newScaledWidth > containerWidth;
+  
+  if (isOverAutoFitWidth) {
+    // 超过自适应宽度：强制左侧对齐，向右扩展/向左收缩
+    // 直接计算并设置左侧对齐的位置，确保不会有左侧空白
+    
+    // 由于图片在容器中默认居中（align-items: center）
+    // 图片左侧位置 = (容器宽度 - 图片宽度) / 2 + position.x
+    // 要使左侧对齐容器左侧（左侧位置 = 0）：
+    // 0 = (containerWidth - newScaledWidth) / 2 + position.x
+    // position.x = -(containerWidth - newScaledWidth) / 2
+    
+    position.value = {
+      x: -(containerWidth - newScaledWidth) / 2,
+      y: Math.max(0, position.value.y), // 确保顶部不超出
+    };
+    
+    // 确保容器滚动位置正确，使图片左上角可见
+    requestAnimationFrame(() => {
+      if (containerRef.value) {
+        containerRef.value.scrollLeft = 0;
+        if (position.value.y === 0) {
+          containerRef.value.scrollTop = 0;
+        }
+      }
+    });
+  } else {
+    // 在自适应宽度范围内：保持居中显示，不调整位置
+    // position 保持为 { x: 0, y: 0 }，图片会自动居中
+    // 这里不需要做任何调整，让原有的居中逻辑生效即可
+  }
 };
 
 const handleWheel = (e: WheelEvent) => {
@@ -1054,10 +1145,9 @@ const calculateAutoFitScale = () => {
     return 1;
   }
 
-  const containerRect = containerRef.value.getBoundingClientRect();
-  // 使用容器的完整宽度，但预留足够空间避免因浏览器渲染误差导致横向滚动条
-  // 预留 4px 以确保不会因为任何渲染误差导致滚动条
-  const containerWidth = containerRect.width - 4;
+  // 使用容器可用内容宽度（clientWidth 不包含滚动条），避免因为纵向滚动条/小数像素导致横向滚动条
+  // 再额外预留 1px，防止浏览器渲染/缩放的舍入误差触发横向滚动条
+  const containerWidth = containerRef.value.clientWidth - 1;
 
   if (containerWidth <= 0) {
     console.log(
@@ -1081,7 +1171,7 @@ const calculateAutoFitScale = () => {
     return 1;
   }
 
-  // 计算缩放比例，使图片宽度完全适应容器宽度
+  // 计算缩放比例，使图片宽度适应容器宽度（带 1px 安全余量）
   const calculatedScale = containerWidth / imageWidth;
   const finalScale = Math.max(
     props.minScale,
@@ -2972,6 +3062,12 @@ defineExpose({
   overflow: auto;
 }
 
+// 自适应宽度贴合阶段：隐藏横向滚动条（保留纵向滚动）
+.image-container.hide-horizontal-scroll {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
 // 自适应宽度计算 Loading
 .auto-fit-loading {
   position: absolute;