pdfjs-annotation-extension-for-react 0.1.2

package/dist/index.d.ts

@@ -0,0 +1,439 @@
+import { default as default_2 } from 'react';
+import { EventBus } from 'pdfjs-dist/types/web/pdf_viewer';
+import { IRect } from 'konva/lib/types';
+import { PDFViewer } from 'pdfjs-dist/types/web/pdf_viewer';
+
+declare enum AnnotationType {
+    NONE = -1,// 没有批注类型
+    SELECT = 0,// 选择批注
+    HIGHLIGHT = 1,// 高亮批注
+    STRIKEOUT = 2,// 删除线批注
+    UNDERLINE = 3,// 下划线批注
+    FREETEXT = 4,// 自由文本批注
+    RECTANGLE = 5,// 矩形批注
+    CIRCLE = 6,// 圆形批注
+    FREEHAND = 7,// 自由绘制批注
+    FREE_HIGHLIGHT = 8,// 自由高亮批注
+    SIGNATURE = 9,// 签名批注
+    STAMP = 10,// 盖章批注
+    NOTE = 11,// 注释
+    ARROW = 12,// 箭头批注
+    CLOUD = 13
+}
+
+declare enum CommentStatus {
+    Accepted = "Accepted",
+    Rejected = "Rejected",
+    Cancelled = "Cancelled",
+    Completed = "Completed",
+    None = "None",
+    Closed = "Closed"
+}
+
+declare type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends object ? (T[K] extends Function ? T[K] : DeepPartial<T[K]>) : T[K];
+};
+
+declare interface IAnnotationComment {
+    id: string;
+    title: string;
+    date: string | null;
+    content: string;
+    status?: CommentStatus;
+}
+
+declare interface IAnnotationContentsObj {
+    text: string;
+    image?: string;
+}
+
+export declare interface IAnnotationStore {
+    id: string;
+    pageNumber: number;
+    konvaString: string;
+    konvaClientRect: IRect;
+    title: string;
+    type: AnnotationType;
+    color?: string | null;
+    subtype: PdfjsAnnotationSubtype;
+    pdfjsType: PdfjsAnnotationType;
+    date: string | null;
+    contentsObj?: IAnnotationContentsObj | null;
+    comments: IAnnotationComment[];
+    user: User;
+    native: boolean;
+}
+
+export declare const PdfAnnotator: default_2.FC<PdfAnnotatorProps>;
+
+/**
+ * PDF 注解器配置选项 / PDF Annotator Configuration Options
+ * 定义PDF注解器的所有可配置参数 / Defines all configurable parameters for the PDF annotator
+ */
+export declare type PdfAnnotatorOptions = {
+    /**
+     * 颜色选项 / Color options
+     * 用户在注解工具中可以选择的颜色列表 / List of colors users can select in annotation tools
+     * @default: ['#ff0000', '#ffbe00', '#ffff00', '#83d33c', '#00b445', '#00b2f4', '#1677ff', '#001f63', '#7828a4', '#ff00ff']
+     */
+    colors?: string[];
+    /**
+     * 签名配置 / Signature configuration
+     * 控制签名功能的相关设置 / Settings that control signature functionality
+     */
+    signature?: {
+        /**
+         * 签名颜色选项 / Signature color options
+         * 签名工具可用的颜色 / Colors available for the signature tool
+         * @default: ['#000000', '#ff0000', '#1677ff']
+         */
+        colors?: string[];
+        /**
+         * 默认签名类型 / Default signature type
+         * Draw: 手绘签名 / Draw: Hand-drawn signature
+         * Enter: 键入签名 / Enter: Typed signature
+         * Upload: 上传签名 / Upload: Uploaded signature
+         * @default: 'Draw'
+         */
+        type?: 'Draw' | 'Enter' | 'Upload';
+        /**
+         * 最大文件大小 / Maximum file size
+         * 允许上传的签名文件最大字节数 / Maximum bytes allowed for uploaded signature files
+         * @default: 1024 * 1024 * 5 (5MB)
+         */
+        maxSize?: number;
+        /**
+         * 接受的文件类型 / Accepted file types
+         * 签名上传功能接受的文件扩展名 / File extensions accepted by the signature upload feature
+         * @default: '.png,.jpg,.jpeg,.bmp'
+         */
+        accept?: string;
+        /**
+         * 默认的签名图片 base64 string / Default signature
+         * @default: []
+         */
+        defaultSignature?: string[];
+        /**
+         * 手写字体列表 / Handwriting font list
+         * 特殊的手写字体选项 / Special handwriting font options
+         * @example [
+         {
+         label: '楷体',
+         value: 'STKaiti',
+         external: false,
+         },{
+         label: 'font name',
+         value: 'font value',
+         external: true,
+         url: 'font url'
+         },
+         {
+         label: '平方长安体',
+         value: 'PingFangChangAnTi-2',
+         external: true,
+         url: PingFangChangAnTiFont import url
+         }
+         ]
+         * @default: []
+         */
+        defaultFont?: {
+            /**
+             * 字体显示名称 / Font display name
+             */
+            label: string;
+            /**
+             * 实际CSS字体值 / Actual CSS font value
+             */
+            value: string;
+            /**
+             * 是否为外部字体 / Whether it's an external font
+             * 如果为true，则从url加载字体 / If true, font is loaded from the url
+             */
+            external: boolean;
+            /**
+             * 字体文件URL / Font file URL
+             * 外部字体文件的位置 / Location of the external font file
+             */
+            url?: string;
+        }[];
+    };
+    /**
+     * 盖章配置 / Stamp configuration
+     * 控制盖章功能的相关设置 / Settings that control stamp functionality
+     */
+    stamp?: {
+        /**
+         * 最大文件大小 / Maximum file size
+         * 允许上传的印章文件最大字节数 / Maximum bytes allowed for uploaded stamp files
+         * @default: 1024 * 1024 * 5 (5MB)
+         */
+        maxSize?: number;
+        /**
+         * 接受的文件类型 / Accepted file types
+         * 盖章上传功能接受的文件扩展名 / File extensions accepted by the stamp upload feature
+         * @default: '.png,.jpg,.jpeg,.bmp'
+         */
+        accept?: string;
+        /**
+         * 默认印章 base64 string / Default stamp
+         * @default: []
+         */
+        defaultStamp?: string[];
+        /**
+         * 印章编辑器配置 / Stamp editor configuration
+         * 控制印章编辑器外观的设置 / Settings controlling the appearance of the stamp editor
+         */
+        editor?: {
+            /**
+             * 默认背景颜色 / Default background color
+             * 印章的默认背景颜色 / Default background color for stamps
+             * @default: #00b445
+             */
+            defaultBackgroundColor?: string;
+            /**
+             * 默认边框颜色 / Default border color
+             * 印章的默认边框颜色 / Default border color for stamps
+             * @default: ''
+             */
+            defaultBorderColor?: string;
+            defaultBorderStyle?: 'none' | 'solid' | 'dashed';
+            /**
+             * 默认文字颜色 / Default text color
+             * 印章文字的默认颜色 / Default color for stamp text
+             * @default: '#fff'
+             */
+            defaultTextColor?: string;
+            /**
+             * 默认字体列表 / Default font
+             * 提供的默认字体选项，包含标签和实际CSS字体值 / Provided default font options with labels and actual CSS font values
+             * @default [
+             { label: 'Arial', value: 'Arial' },
+             { label: 'Times New Roman', value: 'Times New Roman' },
+             { label: 'Georgia', value: 'Georgia' },
+             { label: 'Verdana', value: 'Verdana' },
+             { label: 'Tahoma', value: 'Tahoma, Geneva, sans-serif' },
+             { label: 'Trebuchet MS', value: '"Trebuchet MS", sans-serif' },
+             { label: 'Courier New', value: '"Courier New", Courier, monospace' },
+             { label: 'Lucida Console', value: '"Lucida Console", Monaco, monospace' },
+             { label: '宋体', value: 'SimSun, Songti SC, STSong, 宋体, "Noto Serif SC", serif' },
+             { label: '黑体', value: 'Microsoft YaHei, PingFang SC, Heiti SC, SimHei, 黑体, sans-serif' },
+             { label: '楷体', value: 'KaiTi, KaiTi_GB2312, STFangsong, 楷体, "AR PL UKai CN", serif' }
+             ]
+             */
+            defaultFont?: {
+                /**
+                 * 字体显示名称 / Font display name
+                 */
+                label: string;
+                /**
+                 * 实际CSS字体值 / Actual CSS font value
+                 */
+                value: string;
+            }[];
+        };
+    };
+};
+
+/**
+ * PDF 批注组件的配置参数
+ */
+export declare interface PdfAnnotatorProps extends PdfBaseProps {
+    /**
+     * 当前用户信息，用于标注作者标识
+     * @default: { id: 'null', name: 'unknown' }
+     */
+    user?: User;
+    /**
+     * 是否加载PDF自带的批注
+     * @default false
+     */
+    enableNativeAnnotations?: boolean;
+    /**
+     * 默认选项配置
+     * 如果不提供，则使用系统默认配置
+     */
+    defaultOptions?: DeepPartial<PdfAnnotatorUserOptions>;
+    /**
+     * 已有的批注列表，用于在初始化时显示已存在的批注
+     */
+    initialAnnotations?: IAnnotationStore[];
+    /**
+     * 自定义额外按钮区域组件
+     * 可以是一个 React 组件或者 React 元素
+     * 组件会接收到以下属性:
+     * - onSave: () => void 保存当前批注
+     * - getData: () => IAnnotationStore[] 获取当前批注数据
+     * - exportToExcel: () => void 导出到 Excel
+     * - exportToPdf: () => void 导出到 PDF
+     */
+    actions?: React.ReactNode | React.ComponentType<{
+        save: () => void;
+        getAnnotations: () => IAnnotationStore[];
+        exportToExcel: (fileName?: string) => void;
+        exportToPdf: (fileName?: string) => void;
+    }>;
+    /**
+     * 保存回调
+     * @param annotations IAnnotationStore
+     */
+    onSave?: (annotations: IAnnotationStore[]) => void;
+    /**
+     * 加载完成回调
+     */
+    onLoad?: () => void;
+    /**
+     * 添加批注回调
+     * @param annotation
+     * @returns
+     */
+    onAnnotationAdded?: (annotation: IAnnotationStore) => void;
+    /**
+     * 删除批注回调
+     * @param annotation
+     * @returns
+     */
+    onAnnotationDeleted?: (id: string) => void;
+    /**
+     * 选中批注回调
+     * @param annotation
+     * @param isClick
+     * @returns
+     */
+    onAnnotationSelected?: (annotation: IAnnotationStore | null, isClick: boolean) => void;
+    /**
+     * 修改批注回调
+     * @param annotation
+     * @returns
+     */
+    onAnnotationUpdated?: (annotation: IAnnotationStore) => void;
+}
+
+declare type PdfAnnotatorUserOptions = DeepPartial<PdfAnnotatorOptions>;
+
+export declare interface PdfBaseProps {
+    /**
+     * 主题色
+     * @default: 'indigo'
+     */
+    theme?: 'ruby' | 'indigo' | 'gray' | 'gold' | 'bronze' | 'brown' | 'yellow' | 'amber' | 'orange' | 'tomato' | 'red' | 'crimson' | 'pink' | 'plum' | 'purple' | 'violet' | 'iris' | 'blue' | 'cyan' | 'teal' | 'jade' | 'green' | 'grass' | 'lime' | 'mint' | 'sky' | undefined;
+    /**
+     * 页面标题
+     */
+    title?: React.ReactNode;
+    /**
+     * PDF 文件地址，支持字符串 URL 或 URL 对象
+     * @example "https://example.com/doc.pdf"
+     */
+    url: string | URL;
+    /**
+     * 语言区域，用于国际化
+     * @default 'zh-CN'
+     */
+    locale?: 'zh-CN' | 'en-US';
+    /**
+     * 默认选项，用于初始化 PDF 阅读器 缩放
+     * @default 'auto'
+     */
+    initialScale?: PdfScale;
+    /**
+     * pdf viewer 容器的样式
+     * @default { width: '100vw', height: '100vh' }
+     */
+    layoutStyle?: React.CSSProperties;
+    /**
+     * 控制侧边栏是否折叠
+     */
+    isSidebarCollapsed?: boolean;
+}
+
+declare type PdfjsAnnotationSubtype = 'None' | 'Link' | 'Text' | 'Widget' | 'Popup' | 'FreeText' | 'Line' | 'Square' | 'Circle' | 'PolyLine' | 'Polygon' | 'Caret' | 'Ink' | 'Highlight' | 'Underline' | 'Squiggly' | 'StrikeOut' | 'Stamp' | 'FileAttachment' | 'Note' | 'Arrow';
+
+declare enum PdfjsAnnotationType {
+    NONE = 0,
+    TEXT = 1,
+    LINK = 2,
+    FREETEXT = 3,
+    LINE = 4,
+    SQUARE = 5,
+    CIRCLE = 6,
+    POLYGON = 7,
+    POLYLINE = 8,
+    HIGHLIGHT = 9,
+    UNDERLINE = 10,
+    SQUIGGLY = 11,
+    STRIKEOUT = 12,
+    STAMP = 13,
+    CARET = 14,
+    INK = 15,
+    POPUP = 16,
+    FILEATTACHMENT = 17,
+    SOUND = 18,
+    MOVIE = 19,
+    WIDGET = 20,
+    SCREEN = 21,
+    PRINTERMARK = 22,
+    TRAPNET = 23,
+    WATERMARK = 24,
+    THREED = 25,
+    REDACT = 26,
+    NOTE = 27
+}
+
+declare type PdfScale = 'auto' | 'page-actual' | 'page-fit' | 'page-width' | string;
+
+export declare const PdfViewer: default_2.FC<PdfViewerProps>;
+
+declare interface PdfViewerContextValue {
+    pdfViewer: PDFViewer | null;
+    setSidebarCollapsed: (collapsed: boolean) => void;
+    toggleSidebar: () => void;
+}
+
+export declare interface PdfViewerProps extends PdfBaseProps {
+    /**
+     * 自定义额外按钮区域组件
+     * 可以是一个 React 组件或者 React 元素
+     */
+    actions?: default_2.ReactNode | ((context: PdfViewerContextValue) => default_2.ReactNode);
+    /**
+     * 自定义侧边栏组件
+     * 可以是一个 React 组件或者 React 元素
+     */
+    sidebar?: default_2.ReactNode | ((context: PdfViewerContextValue) => default_2.ReactNode);
+    /**
+     * 自定义工具栏组件
+     * 可以是一个 React 组件或者 React 元素
+     * 默认显示 ZoomTool 组件
+     */
+    toolbar?: default_2.ReactNode | ((context: PdfViewerContextValue) => default_2.ReactNode);
+    /**
+     * 是否显示侧边栏触发按钮
+     * @default false
+     */
+    showSidebarTrigger?: boolean;
+    /**
+     * 是否显示文本层（用于选择和搜索文本）
+     * @default true
+     */
+    showTextLayer?: boolean;
+    /**
+     * 文档加载完成回调
+     * @param pdfViewer
+     * @returns
+     */
+    onDocumentLoaded?: (pdfViewer: PDFViewer | null) => void;
+    /**
+     * PDFjs EventBus 完成回调
+     * @param eventBus
+     * @returns
+     */
+    onEventBusReady?: (eventBus: EventBus | null) => void;
+}
+
+export declare interface User {
+    id: string;
+    name: string;
+    avatarUrl?: string;
+}
+
+export { }