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

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

@@ -1,4 +1,4 @@
-import { g as getAugmentedNamespace, a as getDefaultExportFromCjs } from "./index-tUex1DtC.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.56",
+  "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"
@@ -134,7 +135,7 @@
             class="image-wrapper"
             :style="{
               transform: `translate(${position.x}px, ${position.y}px) rotate(${rotation}deg) scale(${scale})`,
-              transformOrigin: transformOrigin,
+              transformOrigin: 'top center',
             }"
           >
             <img
@@ -488,7 +489,14 @@ const lastPosition = ref({ x: 0, y: 0 });
 const initialAutoFitScale = ref<number | null>(null); // 记录初始自适应缩放比例
 const isCalculatingAutoFit = ref(false); // 标记是否正在计算自适应宽度（显示 loading）
 const isImageReady = ref(false); // 标记图片是否已准备好显示（自适应宽度计算完成）
-const transformOrigin = ref('top center'); // 缩放中心点，动态调整以实现智能缩放
+
+// 自适应宽度“贴合宽度”时隐藏横向滚动条（避免 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(
@@ -651,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 };
   }
@@ -697,36 +717,30 @@ const zoom = (delta, isWheel = false) => {
   const oldScale = scale.value;
   const newScale = scale.value + delta * step;
   
-  // 计算新的缩放比例
-  let finalScale = newScale;
+  // 更新缩放比例
   if (newScale <= props.minScale) {
-    finalScale = props.minScale;
+    scale.value = props.minScale;
   } else if (newScale >= props.maxScale) {
-    finalScale = props.maxScale;
+    scale.value = props.maxScale;
+  } else {
+    scale.value = newScale;
   }
   
-  // 更新缩放比例
-  scale.value = finalScale;
-  
-  // 缩放后调整位置和缩放中心点
+  // 缩放后调整位置，确保图片不会超出容器
   // 使用 nextTick 确保 DOM 已更新
   nextTick(() => {
-    if (containerRef.value) {
-      if (finalScale > oldScale) {
-        // 放大时，确保图片左侧不会超出容器
-        adjustPositionAfterZoom();
-      } else if (finalScale < oldScale) {
-        // 缩小时，智能调整缩放中心点和位置
-        adjustPositionAfterZoomOut();
-      }
-    }
+    adjustPositionAfterZoom(oldScale, scale.value);
   });
 };
 
 /**
- * 放大后调整位置，确保图片左侧不会超出容器
+ * 缩放后调整位置
+ * 根据缩放前后的比例，智能调整图片位置，确保：
+ * 1. 图片不会超出容器顶部和左侧
+ * 2. 在自适应宽度范围内时，保持居中显示
+ * 3. 超过自适应宽度时，保持左侧对齐，向右向下扩展/向左向上收缩
  */
-const adjustPositionAfterZoom = () => {
+const adjustPositionAfterZoom = (oldScale: number, newScale: number) => {
   if (!containerRef.value) return;
   
   const container = containerRef.value;
@@ -740,91 +754,43 @@ const adjustPositionAfterZoom = () => {
   // 计算缩放后的图片宽度（考虑旋转）
   const normalizedRotation = ((rotation.value % 360) + 360) % 360;
   const isRotated = normalizedRotation === 90 || normalizedRotation === 270;
-  const scaledWidth = isRotated 
-    ? currentPageSize.height * scale.value 
-    : currentPageSize.width * scale.value;
+  const imageBaseWidth = isRotated ? currentPageSize.height : currentPageSize.width;
+  const newScaledWidth = imageBaseWidth * newScale;
+  const oldScaledWidth = imageBaseWidth * oldScale;
   
-  // 如果图片宽度小于等于容器宽度，不需要调整
-  if (scaledWidth <= containerWidth) {
-    return;
-  }
+  // 判断是否超过自适应宽度
+  const isOverAutoFitWidth = props.autoFitWidth && initialAutoFitScale.value !== null
+    ? newScale > initialAutoFitScale.value
+    : newScaledWidth > containerWidth;
   
-  // 由于 transformOrigin 是 'top center'，缩放时图片从顶部中心扩展
-  // 图片在容器中默认居中（因为 image-wrapper-container 设置了 align-items: center）
-  // 图片左侧距离容器左侧的距离 = (容器宽度 - 图片宽度) / 2 + position.x
-  const imageLeftOffset = (containerWidth - scaledWidth) / 2 + position.value.x;
-  
-  // 如果图片左侧超出容器左侧（imageLeftOffset < 0），需要调整
-  if (imageLeftOffset < 0) {
-    // 调整 position.x，使图片左侧对齐容器左侧
-    // 目标：imageLeftOffset = 0
-    // 即：(containerWidth - scaledWidth) / 2 + position.x = 0
-    // 所以：position.x = -(containerWidth - scaledWidth) / 2
-    position.value = {
-      ...position.value,
-      x: -(containerWidth - scaledWidth) / 2,
-    };
+  if (isOverAutoFitWidth) {
+    // 超过自适应宽度：强制左侧对齐，向右扩展/向左收缩
+    // 直接计算并设置左侧对齐的位置，确保不会有左侧空白
+    
+    // 由于图片在容器中默认居中（align-items: center）
+    // 图片左侧位置 = (容器宽度 - 图片宽度) / 2 + position.x
+    // 要使左侧对齐容器左侧（左侧位置 = 0）：
+    // 0 = (containerWidth - newScaledWidth) / 2 + position.x
+    // position.x = -(containerWidth - newScaledWidth) / 2
     
-    // 确保容器的滚动位置为 0，使图片左侧可见
-    // 使用 requestAnimationFrame 确保在浏览器渲染后执行
-    requestAnimationFrame(() => {
-      if (containerRef.value) {
-        containerRef.value.scrollLeft = 0;
-      }
-    });
-  }
-};
-
-/**
- * 缩小后调整位置，确保图片左侧不会超出容器
- * 不改变缩放中心点，只调整位置
- */
-const adjustPositionAfterZoomOut = () => {
-  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 scaledWidth = isRotated 
-    ? currentPageSize.height * scale.value 
-    : currentPageSize.width * scale.value;
-  
-  // 如果图片宽度小于等于容器宽度，不需要调整
-  if (scaledWidth <= containerWidth) {
-    return;
-  }
-  
-  // 由于 transformOrigin 是 'top center'，缩放时图片从顶部中心扩展
-  // 图片在容器中默认居中（因为 image-wrapper-container 设置了 align-items: center）
-  // 图片左侧距离容器左侧的距离 = (容器宽度 - 图片宽度) / 2 + position.x
-  const imageLeftOffset = (containerWidth - scaledWidth) / 2 + position.value.x;
-  
-  // 如果图片左侧超出容器左侧（imageLeftOffset < 0），需要调整
-  if (imageLeftOffset < 0) {
-    // 调整 position.x，使图片左侧对齐容器左侧
-    // 目标：imageLeftOffset = 0
-    // 即：(containerWidth - scaledWidth) / 2 + position.x = 0
-    // 所以：position.x = -(containerWidth - scaledWidth) / 2
     position.value = {
-      ...position.value,
-      x: -(containerWidth - scaledWidth) / 2,
+      x: -(containerWidth - newScaledWidth) / 2,
+      y: Math.max(0, position.value.y), // 确保顶部不超出
     };
     
-    // 确保容器的滚动位置为 0，使图片左侧可见
-    // 使用 requestAnimationFrame 确保在浏览器渲染后执行
+    // 确保容器滚动位置正确，使图片左上角可见
     requestAnimationFrame(() => {
       if (containerRef.value) {
         containerRef.value.scrollLeft = 0;
+        if (position.value.y === 0) {
+          containerRef.value.scrollTop = 0;
+        }
       }
     });
+  } else {
+    // 在自适应宽度范围内：保持居中显示，不调整位置
+    // position 保持为 { x: 0, y: 0 }，图片会自动居中
+    // 这里不需要做任何调整，让原有的居中逻辑生效即可
   }
 };
 
@@ -1130,7 +1096,6 @@ const reset = () => {
   }
 
   position.value = { x: 0, y: 0 };
-  transformOrigin.value = 'top center'; // 重置缩放中心点为默认值
 
   // 重置文本选择状态和批注状态
   showAnnotationPopup.value = false;
@@ -1180,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(
@@ -1207,7 +1171,7 @@ const calculateAutoFitScale = () => {
     return 1;
   }
 
-  // 计算缩放比例，使图片宽度完全适应容器宽度
+  // 计算缩放比例，使图片宽度适应容器宽度（带 1px 安全余量）
   const calculatedScale = containerWidth / imageWidth;
   const finalScale = Math.max(
     props.minScale,
@@ -3098,6 +3062,12 @@ defineExpose({
   overflow: auto;
 }
 
+// 自适应宽度贴合阶段：隐藏横向滚动条（保留纵向滚动）
+.image-container.hide-horizontal-scroll {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
 // 自适应宽度计算 Loading
 .auto-fit-loading {
   position: absolute;