菜单

多工具界面

相关源文件

多功能界面提供了一个全面的工作空间,用于在单个会话中通过多个操作来处理 PDF 文档。它作为一个统一的环境,用户可以在导出结果为新文档之前,对一个或多个 PDF 文件中的页面进行重新排列、旋转、删除、分割和合并。

接口概述

多功能界面由模板文件 src/main/resources/templates/multi-tool.html 中定义的几个关键组件构成

来源: src/main/resources/templates/multi-tool.html1-132 src/main/resources/static/css/multi-tool.css1-304

核心组件

多功能界面通过模块化架构实现,其中有几个关键的 JavaScript 类相互作用以提供完整的 funkcionalnost

来源: src/main/resources/static/js/multitool/PdfContainer.js11-890 src/main/resources/static/js/multitool/DragDropManager.js1-210 src/main/resources/static/js/multitool/PdfActionsManager.js6-268 src/main/resources/static/js/multitool/ImageHighlighter.js1-67

命令模式实现

多功能界面使用命令模式来实现带有撤销/重做功能的各种操作。每个操作都封装在一个命令对象中,该对象具有标准的 execute()undo()redo() 方法。

来源: src/main/resources/static/js/multitool/commands/move-page.js1-64 src/main/resources/static/js/multitool/commands/add-page.js1-52 src/main/resources/static/js/multitool/commands/commands-sequence.js1-21 src/main/resources/static/js/multitool/commands/page-break.js1-60

核心功能

文件处理

多功能界面通过不同的处理路径来处理 PDF 文件和图像

  1. PDF 文件:

    • 使用 PDF.js 加载以渲染缩略图
    • 使用 PDF-Lib 进行处理以进行操作
    • 支持带密码解密的加密 PDF 文件
  2. 图像:

    • 直接显示为缩略图
    • 导出时转换为 PDF 页面
    • 支持 PNG、JPEG 和 TIFF 格式

文件处理发生在 PdfContaineraddFilesFromFiles 方法中 src/main/resources/static/js/multitool/PdfContainer.js209-259

页面操作

该界面提供了多种操作 PDF 页面的方式

操作实现用户控件
移动页面拖放或使用按钮每页移动按钮,拖放界面
旋转页面单页或批量旋转全局和每页旋转按钮
删除页面单页或选定页每页删除按钮,批量删除
分割 PDF在页面之间添加分割点分割按钮添加一个类标记
插入空白页添加空页面插入分页符按钮
添加文件在特定位置插入新文件在页面之间添加按钮

来源: src/main/resources/static/js/multitool/PdfContainer.js114-169 src/main/resources/templates/multi-tool.html53-123 src/main/resources/static/js/multitool/PdfActionsManager.js119-218

页面选择模式

多功能界面提供两种操作模式

  1. 单页模式:操作应用于单个页面
  2. 选择模式:操作应用于多个选定页面

选择功能通过以下方式实现

在选择模式激活时,可以仅对选定的页面应用全局操作,例如旋转、分割和导出。

拖放实现

拖放功能是多功能界面的一项关键特性,通过 DragDropManager 类实现 src/main/resources/static/js/multitool/DragDropManager.js1-210

单页拖放

用于单页操作

  1. 用户通过点击页面来开始拖动
  2. 视觉反馈显示拖动的页面,不透明度降低
  3. 悬停在目标位置会高亮显示可能的放置位置
  4. 放置完成移动操作

多页拖放

用于选择模式下的多页操作

  1. 用户使用复选框选择多页
  2. 拖动任何选定的页面即可移动所有选定的页面
  3. 计数器显示正在移动的页面数量
  4. 放置将所有选定的页面放置在目标位置

拖动操作创建 MovePageCommand 实例,这些实例被推送到 UndoManager 以实现撤销/重做功能。

来源: src/main/resources/static/js/multitool/DragDropManager.js37-157 src/main/resources/static/css/dragdrop.css1-100

导出功能

多功能界面可以通过多种方式导出处理后的文档

  1. 导出全部页面:创建一个包含当前顺序的所有页面的PDF
  2. 导出选定页面:创建一个仅包含选定页面的PDF
  3. 拆分导出:当存在拆分点时,创建一个包含多个PDF的ZIP文件

导出过程

  1. 使用PDF-Lib创建新的PDF文档
  2. 按顺序添加当前界面中的页面
  3. 应用所有页面旋转
  4. 保留原始文件的页面内容
  5. 对于图像,将其嵌入到新的PDF中
  6. 通过创建单独的PDF来处理拆分点
  7. 下载生成的文件

来源: src/main/resources/static/js/multitool/PdfContainer.js659-786

撤销/重做功能

多功能界面中的所有操作都支持通过命令模式实现撤销/重做。 UndoManager 类维护着独立的撤销和重做操作堆栈。

  • 键盘快捷键:Ctrl+Z(撤销)和 Ctrl+Y(重做)
  • 操作栏中的UI按钮
  • 执行命令会自动清空重做堆栈

来源: src/main/resources/static/js/multitool/PdfContainer.js77-102

初始化和集成

多功能界面在页面加载过程中进行初始化,并进行一系列组件初始化

此初始化使用 PdfContainer 作为中心控制器来设置组件层次结构,将所有UI元素与其相应的功能连接起来。

来源: src/main/resources/templates/multi-tool.html173-206

多功能界面展示了Stirling PDF的模块化架构,其中专业组件协同工作,提供全面的PDF处理体验。