fix: 修复精确预览放大后右侧留白丢失
This commit is contained in:
@@ -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}
|
||||||
|
|||||||
@@ -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
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
@@ -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);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -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.45px;120% 与 400%
|
||||||
|
均准确到达各自最大横向滚动值,快速和连续预览结构未改变。
|
||||||
|
|
||||||
## 2. 已完成
|
## 2. 已完成
|
||||||
|
|
||||||
### 2.1 项目骨架
|
### 2.1 项目骨架
|
||||||
|
|||||||
Reference in New Issue
Block a user