feat: add polyline annotation

Author: mhadica

examples/pdfjs-4.3.136-dist/web/pdfjs-annotation-extension/pdfjs-annotation-extension.js

@@ -15,7 +15,7 @@ import { formatPDFDate, getPDFDateTimestamp, getTimestampString } from '../utils
 import { FreeTextParser } from './parse_freetext'
 import { StampParser } from './parse_stamp'
 import { LineParser } from './parse_line'
-import { PolylineParser } from './parse_polyline'
+import { ActualPolylineParser } from './parse_actual_polyline'
 import { t } from 'i18next'
 
 // import { HighlightParser } from './parse_highlight' // future
@@ -32,7 +32,7 @@ const parserMap: {
     [PdfjsAnnotationType.SQUARE]: SquareParser,
     [PdfjsAnnotationType.CIRCLE]: CircleParser,
     [PdfjsAnnotationType.INK]: InkParser,
-    [PdfjsAnnotationType.POLYLINE]: PolylineParser,
+    [PdfjsAnnotationType.POLYLINE]: ActualPolylineParser,
     [PdfjsAnnotationType.FREETEXT]: FreeTextParser,
     [PdfjsAnnotationType.STAMP]: StampParser,
     [PdfjsAnnotationType.LINE]: LineParser
@@ -48,6 +48,7 @@ const parserMap: {
  */
 async function parseAnnotationToPdf(annotation: IAnnotationStore, page: PDFPage, pdfDoc: PDFDocument): Promise<void> {
     const ParserClass = parserMap[annotation.pdfjsType]
+    // Use ActualPolylineParser for all polyline annotations since decoder_polyline now handles both vertices and ink types
     if (ParserClass) {
         const parser = new ParserClass(pdfDoc, page, annotation)
         await parser.parse()
@@ -92,7 +93,7 @@ function clearAllAnnotations(pdfDoc: PDFDocument) {
 }
 
 // 动态加载字体文件，返回 ArrayBuffer
-async function loadFontBuffer(url: string): Promise<ArrayBuffer> {
+export async function loadFontBuffer(url: string): Promise<ArrayBuffer> {
     const response = await fetch(url)
     if (!response.ok) throw new Error(`Failed to load font at ${url}`)
     return await response.arrayBuffer()

src/annot/index.ts

@@ -19,7 +19,8 @@ import {
     NoteIcon,
     ExportIcon,
     ArrowIcon,
-    CloudIcon
+    CloudIcon,
+    PolylineIcon
 } from '../../const/icon'
 import Paragraph from 'antd/es/typography/Paragraph'
 

src/annot/parse_actual_polyline.ts

@@ -12,7 +12,8 @@ import {
     UnderlineIcon,
     NoteIcon,
     ArrowIcon,
-    CloudIcon
+    CloudIcon,
+    PolylineIcon
 } from './icon'
 import { IRect } from 'konva/lib/types'
 import { defaultOptions } from './default_options'
@@ -99,7 +100,8 @@ export enum AnnotationType {
     STAMP = 10, // 盖章批注
     NOTE = 11, // 注释
     ARROW = 12, // 箭头批注
-    CLOUD = 13 // 云线
+    CLOUD = 13, // 云线
+    POLYLINE = 14 // 折线批注
 }
 
 // 定义批注类型的接口
@@ -153,6 +155,8 @@ export enum CommentStatus {
 export interface IAnnotationContentsObj {
     text: string; // 文本内容
     image?: string; // 可选的图片属性
+    points?: number[]; // 可选的点数组，用于描述形状或路径
+    pathData?: string; // 可选的SVG路径数据，用于云线等复杂形状
 }
 
 // 批注存储接口
@@ -299,6 +303,28 @@ export const annotationDefinitions: IAnnotationType[] = [
         draggable: true,
         icon: <NoteIcon />
     },
+    {
+        name: 'polyLine',
+        type: AnnotationType.POLYLINE,
+        pdfjsEditorType: PdfjsAnnotationEditorType.INK,
+        pdfjsAnnotationType: PdfjsAnnotationType.POLYLINE,
+        subtype: 'PolyLine',
+        isOnce: false,
+        resizable: true,
+        draggable: true,
+        icon: <PolylineIcon />, 
+        style: {
+            color: defaultOptions.setting.COLOR, // Default polyline color
+            strokeWidth: defaultOptions.setting.STROKE_WIDTH, // Default line width
+            opacity: defaultOptions.setting.OPACITY // Default opacity
+        },
+        styleEditable: {
+            color: true,
+            opacity: true,
+            strokeWidth: true
+        } // Add this to enable style editing
+    },
+
     {
         name: 'arrow',
         type: AnnotationType.ARROW,

src/components/comment/index.tsx

@@ -136,6 +136,16 @@ const NoteSvg = () => (
     </svg>
 )
 
+const PolylineSvg = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="22" stroke="white" fill="none" strokeWidth="2">
+    <polyline points="4,18 8,10 13,14 20,6" stroke="white" fill="none" />
+    <circle cx="4" cy="18" r="1.5" fill="white" />
+    <circle cx="8" cy="10" r="1.5" fill="white" />
+    <circle cx="13" cy="14" r="1.5" fill="white" />
+    <circle cx="20" cy="6" r="1.5" fill="white" />
+  </svg>
+);
+
 const AnnoSvg = () => (
     <svg height="1em" viewBox="0 0 1024 1024">
         <path d="M658.02666667 432.85333333H347.30666667c-18.77333333 0-34.13333333 15.36-34.13333334 34.13333334s15.36 34.13333333 34.13333334 34.13333333h310.72c18.77333333 0 34.13333333-15.36 34.13333333-34.13333333s-15.36-34.13333333-34.13333333-34.13333334zM571.30666667 557.22666667h-224c-18.77333333 0-34.13333333 15.36-34.13333334 34.13333333s15.36 34.13333333 34.13333334 34.13333333h224c18.77333333 0 34.13333333-15.36 34.13333333-34.13333333s-15.36-34.13333333-34.13333333-34.13333333zM894.29333333 61.12l-621.76-0.10666667c-18.88 0-34.13333333 15.25333333-34.13333333 34.13333334s15.25333333 34.13333333 34.13333333 34.13333333l621.76 0.10666667c15.25333333 0 27.73333333 12.48 27.73333334 27.73333333v431.36c0 18.88 15.25333333 34.13333333 34.13333333 34.13333333s34.13333333-15.25333333 34.13333333-34.13333333V157.12c0-52.8-43.2-96-96-96z" fill="currentColor"></path><path d="M734.4 229.54666667H157.54666667c-67.52 0-122.66666667 55.25333333-122.66666667 122.66666666v368.74666667c0 66.77333333 54.08 121.49333333 120.53333333 122.66666667l0.42666667 66.98666666c8.64 38.4 50.98666667 84.37333333 121.81333333 36.05333334L389.54666667 843.73333333h344.64c67.52 0 122.66666667-55.25333333 122.66666666-122.66666666V352.21333333c0.21333333-67.52-55.04-122.66666667-122.45333333-122.66666666z m54.4 491.30666666c0 14.4-5.65333333 28.05333333-16 38.4s-24 16-38.4 16h-340.26666667v0.10666667H373.33333333l-72.85333333 68.05333333-60.37333333 56.32c-26.88 17.6-24.96-26.66666667-24.96-26.66666666l-0.10666667-29.76v-68.05333334h-58.45333333v-0.21333333c-14.08-0.21333333-27.30666667-5.86666667-37.44-16-10.34666667-10.34666667-16-24-16-38.4V352.21333333c0-14.4 5.65333333-28.05333333 16-38.4s24-16 38.4-16h576.85333333c14.4 0 28.05333333 5.65333333 38.4 16s16 24 16 38.4v368.64z" fill="currentColor"></path><path d="M249.06666667 432.42666667c-18.77333333 0-34.13333333 15.36-34.13333334 34.13333333s15.36 34.13333333 34.13333334 34.13333333 34.13333333-15.36 34.13333333-34.13333333-15.36-34.13333333-34.13333333-34.13333333zM249.06666667 557.22666667c-18.77333333 0-34.13333333 15.36-34.13333334 34.13333333s15.36 34.13333333 34.13333334 34.13333333 34.13333333-15.36 34.13333333-34.13333333-15.36-34.13333333-34.13333333-34.13333333z" fill="currentColor"></path>
@@ -187,6 +197,8 @@ const ExportIcon = (props: Partial<CustomIconComponentProps>) => <Icon component
 
 const NoteIcon = (props: Partial<CustomIconComponentProps>) => <Icon component={NoteSvg} {...props} />
 
+const PolylineIcon = (props: Partial<CustomIconComponentProps>) => <Icon component={PolylineSvg} {...props} />
+
 const AnnoIcon = (props: Partial<CustomIconComponentProps>) => <Icon component={AnnoSvg} {...props} />
 
 const ArrowIcon = (props: Partial<CustomIconComponentProps>) => <Icon component={ArrowSvg} {...props} />
@@ -215,5 +227,6 @@ export {
     AnnoIcon,
     ArrowIcon,
     CloudIcon,
-    DeleteIcon
+    DeleteIcon,
+    PolylineIcon
 }

src/const/definitions.tsx

@@ -11,10 +11,11 @@
         "freeHighlight": "Hervorheben",
         "freeText": "Text",
         "signature": "Unterschrift",
-        "stamp": "Stempel",
+        "stamp": "Stempe",
         "note": "Notiz",
         "arrow": "Pfeil",
-        "cloud": "Wolke"
+        "cloud": "Wolke",
+        "polyLine": "Polylinie"
     },
     "toolbar": {
         "buttons": {

src/const/icon.tsx

@@ -14,7 +14,8 @@
         "stamp": "Stamp",
         "note": "Note",
         "arrow": "Arrow",
-        "cloud": "Cloud"
+        "cloud": "Cloud",
+        "polyLine": "Polyline"
     },
     "toolbar": {
         "buttons": {

src/locale/de-de.json

@@ -14,7 +14,8 @@
         "stamp": "盖章",
         "note": "注解",
         "arrow": "箭头",
-        "cloud": "云线"
+        "cloud": "云线",
+        "polyLine": "折线"
     },
     "toolbar": {
         "buttons": {