fix: 修复精确预览放大后右侧留白丢失

This commit is contained in:
SkyJourney
2026-07-31 23:42:04 +08:00
parent 6f62cfebd6
commit dc026835b7
4 changed files with 63 additions and 2 deletions
+14 -2
View File
@@ -19,13 +19,16 @@ import {
import pdfWorkerUrl from "pdfjs-dist/build/pdf.worker.min.mjs?url"; import pdfWorkerUrl from "pdfjs-dist/build/pdf.worker.min.mjs?url";
import { import {
getPdfCanvasRenderScale, getPdfCanvasRenderScale,
getPdfPageCssDimensions getPdfPageCssDimensions,
getPrecisePdfDocumentWidth
} from "./pdf-page-geometry"; } from "./pdf-page-geometry";
import { createPdfAnnotationLinkService } from "./pdf-annotation-links"; import { createPdfAnnotationLinkService } from "./pdf-annotation-links";
import { PdfPageRenderQueue } from "./pdf-render-queue"; import { PdfPageRenderQueue } from "./pdf-render-queue";
GlobalWorkerOptions.workerSrc = pdfWorkerUrl; GlobalWorkerOptions.workerSrc = pdfWorkerUrl;
const PRECISE_PDF_INLINE_GUTTER = 30;
type PdfJsAnnotationLinkService = Parameters< type PdfJsAnnotationLinkService = Parameters<
AnnotationLayer["render"] AnnotationLayer["render"]
>[0]["linkService"]; >[0]["linkService"];
@@ -455,8 +458,17 @@ export function PrecisePdfPreview({
return <div className="precise-pdf-status"></div>; return <div className="precise-pdf-status"></div>;
} }
const documentWidth = getPrecisePdfDocumentWidth(
pages.map((page) => page.width),
zoomPercent / 100,
PRECISE_PDF_INLINE_GUTTER
);
return ( return (
<div className="precise-pdf-document"> <div
className="precise-pdf-document"
style={{ width: `${documentWidth}px` }}
>
{pages.map((page) => ( {pages.map((page) => (
<PrecisePdfPage <PrecisePdfPage
key={page.pageNumber} key={page.pageNumber}
+19
View File
@@ -31,3 +31,22 @@ export function getPdfCanvasRenderScale(
} }
return (displayWidthCssPixels / widthPoints) * devicePixelRatio; return (displayWidthCssPixels / widthPoints) * devicePixelRatio;
} }
export function getPrecisePdfDocumentWidth(
pageWidthsPoints: readonly number[],
displayScale: number,
inlineGutter: number
) {
const maximumPageWidth = Math.max(0, ...pageWidthsPoints);
if (
maximumPageWidth <= 0 ||
displayScale <= 0 ||
inlineGutter < 0
) {
return 0;
}
return Math.ceil(
maximumPageWidth * PDF_PAGE_CSS_SCALE * displayScale +
inlineGutter * 2
);
}
+23
View File
@@ -2,6 +2,7 @@ import { describe, expect, it } from "vitest";
import { import {
getPdfCanvasRenderScale, getPdfCanvasRenderScale,
getPdfPageCssDimensions, getPdfPageCssDimensions,
getPrecisePdfDocumentWidth,
PDF_PAGE_CSS_SCALE PDF_PAGE_CSS_SCALE
} from "../src/pdf-page-geometry"; } from "../src/pdf-page-geometry";
@@ -31,4 +32,26 @@ describe("精确 PDF 页面尺寸", () => {
); );
expect(getPdfCanvasRenderScale(0, 800, 2)).toBe(0); expect(getPdfCanvasRenderScale(0, 800, 2)).toBe(0);
}); });
it.each([
[50, 457],
[100, 854],
[120, 1013],
[400, 3235]
])("在 %i%% 缩放下把双侧固定留白计入滚动宽度", (zoom, expected) => {
expect(
getPrecisePdfDocumentWidth(
[595.275591],
zoom / 100,
30
)
).toBe(expected);
});
it("按混合纸张中最宽页面计算精确预览滚动宽度", () => {
expect(
getPrecisePdfDocumentWidth([595.275591, 792], 1.2, 30)
).toBe(1328);
expect(getPrecisePdfDocumentWidth([], 1.2, 30)).toBe(0);
});
}); });
+7
View File
@@ -346,6 +346,13 @@ SHA-256;交互模式仅在文件存在且哈希正确时显示默认勾选项
本阶段按版本策略未提前修改应用的 `0.5.1` 版本号;正式 `v0.6.0` 发布 本阶段按版本策略未提前修改应用的 `0.5.1` 版本号;正式 `v0.6.0` 发布
提交升级版本后,字体包才满足其 `minimumAppVersion=0.6.0` 运行时门禁。 提交升级版本后,字体包才满足其 `minimumAppVersion=0.6.0` 运行时门禁。
已修复 `v0.5.1` 遗留的精确预览放大后右侧留白丢失问题。精确 PDF 文档
容器现在按当前缩放下最宽页面加左右各 30px 显式计算自身宽度,页面较小
时仍由 `min-width: 100%` 居中,页面溢出时双侧留白则稳定进入横向
`scrollWidth`。真实 Chromium 在 100%、120% 和 400% 下滚动到最右端,
文档右侧留白分别约为 30.38px、30.05px 和 30.45px120% 与 400%
均准确到达各自最大横向滚动值,快速和连续预览结构未改变。
## 2. 已完成 ## 2. 已完成
### 2.1 项目骨架 ### 2.1 项目骨架