feat: 盖章时支持批量页码设置

Laomai-codefee · Jul 23, 2024 · 824410d · 824410d
1 parent cc6dbb4
commit 824410d
Show file tree

Hide file tree

Showing 14 changed files with 390 additions and 7,942 deletions.
diff --git a/examples/pdfjs-4.3.136-dist/web/pdfjs-annotation-extension/pdfjs-annotation-extension.js b/examples/pdfjs-4.3.136-dist/web/pdfjs-annotation-extension/pdfjs-annotation-extension.js
diff --git a/src/const/definitions.tsx b/src/const/definitions.tsx
@@ -221,6 +221,7 @@ export interface IAnnotationStyle {
 export interface IAnnotationContent {
     text?: string // 批注的文本内容
     image?: string // 批注的图像内容
+    batchPdfjsAnnotationStorage?: IPdfjsAnnotationStorage[] //批量应用对应的 pdfjs store
 }
 
 // 批注存储接口

diff --git a/src/const/pdfjs.d.ts b/src/const/pdfjs.d.ts
@@ -11,6 +11,7 @@ declare module 'pdfjs' {
         page: number
         eventBus: EventBus
         pdfViewer: PDFPageView
+        pagesCount: number
         [key: string]: any // 其他未知属性的类型定义
     }
     /**

diff --git a/src/painter/editor/editor.ts b/src/painter/editor/editor.ts
@@ -3,11 +3,13 @@ import { AnnotationType, IAnnotationContent, IAnnotationStore, IAnnotationType,
 import { KonvaEventObject } from 'konva/lib/Node'
 import { generateUUID } from '../../utils/utils'
 import { SHAPE_GROUP_NAME } from '../const'
+import { PDFViewerApplication } from 'pdfjs'
 
 /**
  * IEditorOptions 接口定义了编辑器的初始化选项。
  */
 export interface IEditorOptions {
+    pdfViewerApplication: PDFViewerApplication
     konvaStage: Konva.Stage // Konva Stage对象
     pageNumber: number // 页面编号
     annotation: IAnnotationType | null // 当前注解对象，可以为 null
@@ -35,6 +37,7 @@ export interface IShapeGroup {
  * Editor 是一个抽象类，定义了编辑器的基本行为和属性。
  */
 export abstract class Editor {
+    protected pdfViewerApplication: PDFViewerApplication
     public readonly id: string // 编辑器实例的唯一标识符
     public readonly onAdd: (shapeGroup: IShapeGroup, pdfjsAnnotationStorage: IPdfjsAnnotationStorage, annotationContent?: IAnnotationContent) => void // 添加形状组的回调函数
     protected konvaStage: Konva.Stage // Konva Stage对象
@@ -50,7 +53,8 @@ export abstract class Editor {
      * Editor 类的构造函数。
      * @param options 初始化编辑器的选项
      */
-    constructor({ konvaStage, pageNumber, annotation, onAdd, editorType }: IEditorOptions & { editorType: AnnotationType }) {
+    constructor({ konvaStage, pageNumber, annotation, onAdd, editorType, pdfViewerApplication }: IEditorOptions & { editorType: AnnotationType }) {
+        this.pdfViewerApplication = pdfViewerApplication
         this.id = `${pageNumber}_${editorType}` // 构造唯一标识符
         this.konvaStage = konvaStage // 初始化 Konva Stage对象
         this.pageNumber = pageNumber // 初始化页面编号
@@ -226,7 +230,7 @@ export abstract class Editor {
      * @param rawAnnotationStore 原始注解存储对象
      * @returns 返回更新后的 PDF.js 注解存储对象的 Promise
      */
-    public abstract refreshPdfjsAnnotationStorage(groupId: string, groupString: string, rawAnnotationStore: IAnnotationStore): Promise<IPdfjsAnnotationStorage>
+    public abstract refreshPdfjsAnnotationStorage(groupId: string, groupString: string, rawAnnotationStore: IAnnotationStore): Promise<{annotationStorage :IPdfjsAnnotationStorage, batchPdfjsAnnotationStorage?: IPdfjsAnnotationStorage[]}>
 
     /**
      * 处理鼠标按下事件的抽象方法，子类需实现具体逻辑。

diff --git a/src/painter/editor/editor_ellipse.ts b/src/painter/editor/editor_ellipse.ts
@@ -148,18 +148,20 @@ export class EditorEllipse extends Editor {
         const ghostGroup = Konva.Node.create(groupString) // 通过序列化字符串创建临时组
         const ellipse = this.getGroupNodesByClassName(ghostGroup, 'Ellipse')[0] as Konva.Ellipse // 获取椭圆对象
         const { x, y, radiusX, radiusY } = this.fixShapeCoordinateForGroup(ellipse, ghostGroup) // 修正椭圆坐标
-
-        return this.calculateEllipseForStorage({
-            x,
-            y,
-            radiusX,
-            radiusY,
-            annotationType: rawAnnotationStore.pdfjsAnnotationStorage.annotationType,
-            color: rawAnnotationStore.pdfjsAnnotationStorage.color,
-            thickness: rawAnnotationStore.pdfjsAnnotationStorage.thickness,
-            opacity: rawAnnotationStore.pdfjsAnnotationStorage.opacity,
-            pageIndex: rawAnnotationStore.pdfjsAnnotationStorage.pageIndex
-        })
+        return {
+            annotationStorage: this.calculateEllipseForStorage({
+                x,
+                y,
+                radiusX,
+                radiusY,
+                annotationType: rawAnnotationStore.pdfjsAnnotationStorage.annotationType,
+                color: rawAnnotationStore.pdfjsAnnotationStorage.color,
+                thickness: rawAnnotationStore.pdfjsAnnotationStorage.thickness,
+                opacity: rawAnnotationStore.pdfjsAnnotationStorage.opacity,
+                pageIndex: rawAnnotationStore.pdfjsAnnotationStorage.pageIndex
+            })
+        }
+
     }
 
     /**

diff --git a/src/painter/editor/editor_free_hand.ts b/src/painter/editor/editor_free_hand.ts
@@ -144,14 +144,16 @@ export class EditorFreeHand extends Editor {
      */
     public async refreshPdfjsAnnotationStorage(groupId: string, groupString: string, rawAnnotationStore: IAnnotationStore) {
         const ghostGroup = Konva.Node.create(groupString) // 通过序列化字符串创建临时组
-        return this.calculateLinesForStorage({
-            group: ghostGroup,
-            annotationType: rawAnnotationStore.pdfjsAnnotationStorage.annotationType,
-            color: rawAnnotationStore.pdfjsAnnotationStorage.color,
-            thickness: rawAnnotationStore.pdfjsAnnotationStorage.thickness,
-            opacity: rawAnnotationStore.pdfjsAnnotationStorage.opacity,
-            pageIndex: rawAnnotationStore.pdfjsAnnotationStorage.pageIndex
-        })
+        return {
+            annotationStorage: this.calculateLinesForStorage({
+                group: ghostGroup,
+                annotationType: rawAnnotationStore.pdfjsAnnotationStorage.annotationType,
+                color: rawAnnotationStore.pdfjsAnnotationStorage.color,
+                thickness: rawAnnotationStore.pdfjsAnnotationStorage.thickness,
+                opacity: rawAnnotationStore.pdfjsAnnotationStorage.opacity,
+                pageIndex: rawAnnotationStore.pdfjsAnnotationStorage.pageIndex
+            })
+        }
     }
 
     /**

diff --git a/src/painter/editor/editor_free_highlight.ts b/src/painter/editor/editor_free_highlight.ts
@@ -285,14 +285,16 @@ export class EditorFreeHighlight extends Editor {
     public async refreshPdfjsAnnotationStorage(groupId: string, groupString: string, rawAnnotationStore: IAnnotationStore) {
         const ghostGroup = Konva.Node.create(groupString)
         const line = this.getGroupNodesByClassName(ghostGroup, 'Line')[0] as Konva.Line
-        return this.calculateLinesForStorage({
-            group: ghostGroup,
-            line,
-            annotationType: rawAnnotationStore.pdfjsAnnotationStorage.annotationType,
-            color: rawAnnotationStore.pdfjsAnnotationStorage.color,
-            thickness: rawAnnotationStore.pdfjsAnnotationStorage.thickness,
-            opacity: rawAnnotationStore.pdfjsAnnotationStorage.opacity,
-            pageIndex: rawAnnotationStore.pdfjsAnnotationStorage.pageIndex
-        })
+        return {
+            annotationStorage: this.calculateLinesForStorage({
+                group: ghostGroup,
+                line,
+                annotationType: rawAnnotationStore.pdfjsAnnotationStorage.annotationType,
+                color: rawAnnotationStore.pdfjsAnnotationStorage.color,
+                thickness: rawAnnotationStore.pdfjsAnnotationStorage.thickness,
+                opacity: rawAnnotationStore.pdfjsAnnotationStorage.opacity,
+                pageIndex: rawAnnotationStore.pdfjsAnnotationStorage.pageIndex
+            })
+        }
     }
 }
diff --git a/src/painter/editor/editor_free_text.ts b/src/painter/editor/editor_free_text.ts
@@ -237,7 +237,7 @@ export class EditorFreeText extends Editor {
      * @param rawAnnotationStore 原始注解存储对象
      * @returns 返回注解的存储信息 IPdfjsAnnotationStorage 的 Promise
      */
-    public async refreshPdfjsAnnotationStorage(groupId: string, groupString: string, rawAnnotationStore: IAnnotationStore): Promise<IPdfjsAnnotationStorage> {
+    public async refreshPdfjsAnnotationStorage(groupId: string, groupString: string, rawAnnotationStore: IAnnotationStore): Promise<{annotationStorage :IPdfjsAnnotationStorage, batchPdfjsAnnotationStorage?: IPdfjsAnnotationStorage[]}> {
         const ghostGroup = Konva.Node.create(groupString)
         const image = this.getGroupNodesByClassName(ghostGroup, 'Image')[0] as Konva.Image
 
@@ -255,7 +255,7 @@ export class EditorFreeText extends Editor {
             id: groupId
         })
 
-        return annotationStorage
+        return { annotationStorage }
     }
 
     /**

diff --git a/src/painter/editor/editor_rectangle.ts b/src/painter/editor/editor_rectangle.ts
@@ -124,21 +124,27 @@ export class EditorRectangle extends Editor {
      * @param rawAnnotationStore 原始注解存储对象
      * @returns 返回更新后的 PDF.js 注解存储对象的 Promise
      */
-    public async refreshPdfjsAnnotationStorage(groupId: string, groupString: string, rawAnnotationStore: IAnnotationStore): Promise<IPdfjsAnnotationStorage> {
+    public async refreshPdfjsAnnotationStorage(
+        groupId: string,
+        groupString: string,
+        rawAnnotationStore: IAnnotationStore
+    ): Promise<{ annotationStorage: IPdfjsAnnotationStorage; batchPdfjsAnnotationStorage?: IPdfjsAnnotationStorage[] }> {
         const ghostGroup = Konva.Node.create(groupString) // 根据序列化的组字符串创建 Konva 节点
         const rect = this.getGroupNodesByClassName(ghostGroup, 'Rect')[0] as Konva.Rect // 获取组中的矩形对象
         const { x, y, width, height } = this.fixShapeCoordinateForGroup(rect, ghostGroup) // 调整矩形在组中的坐标
-        return this.calculateRectForStorage({
-            x,
-            y,
-            width,
-            height,
-            annotationType: rawAnnotationStore.pdfjsAnnotationStorage.annotationType,
-            color: rawAnnotationStore.pdfjsAnnotationStorage.color,
-            thickness: rawAnnotationStore.pdfjsAnnotationStorage.thickness,
-            opacity: rawAnnotationStore.pdfjsAnnotationStorage.opacity,
-            pageIndex: rawAnnotationStore.pdfjsAnnotationStorage.pageIndex
-        }) // 计算并返回更新后的 PDF.js 注解存储对象
+        return {
+            annotationStorage: this.calculateRectForStorage({
+                x,
+                y,
+                width,
+                height,
+                annotationType: rawAnnotationStore.pdfjsAnnotationStorage.annotationType,
+                color: rawAnnotationStore.pdfjsAnnotationStorage.color,
+                thickness: rawAnnotationStore.pdfjsAnnotationStorage.thickness,
+                opacity: rawAnnotationStore.pdfjsAnnotationStorage.opacity,
+                pageIndex: rawAnnotationStore.pdfjsAnnotationStorage.pageIndex
+            }) // 计算并返回更新后的 PDF.js 注解存储对象
+        }
     }
 
     /**

diff --git a/src/painter/editor/editor_signature.ts b/src/painter/editor/editor_signature.ts
@@ -144,7 +144,11 @@ export class EditorSignature extends Editor {
      * @param rawAnnotationStore 原始注解存储对象
      * @returns 返回更新后的 PDF.js 注解存储对象的 Promise
      */
-    public async refreshPdfjsAnnotationStorage(groupId: string, groupString: string, rawAnnotationStore: IAnnotationStore): Promise<IPdfjsAnnotationStorage> {
+    public async refreshPdfjsAnnotationStorage(
+        groupId: string,
+        groupString: string,
+        rawAnnotationStore: IAnnotationStore
+    ): Promise<{ annotationStorage: IPdfjsAnnotationStorage; batchPdfjsAnnotationStorage?: IPdfjsAnnotationStorage[] }> {
         const ghostGroup = Konva.Node.create(groupString)
         const image = this.getGroupNodesByClassName(ghostGroup, 'Image')[0] as Konva.Image
         const { x, y, width, height } = this.fixImageCoordinateForGroup(image, ghostGroup)
@@ -160,7 +164,7 @@ export class EditorSignature extends Editor {
             signatureUrl: image.getAttr('base64'),
             id: groupId
         })
-        return annotationStorage
+        return { annotationStorage }
     }
 
     /**