feat: PDFViewer ContextMenu 插件

packages/antd-plus/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @orca-fe/painter
 
+## 0.3.12
+
+### Patch Changes
+
+- Updated dependencies
+  - @orca-fe/pocket@3.3.0
+
 ## 0.3.11
 
 ### Patch Changes

packages/antd-plus/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orca-fe/antd-plus",
-  "version": "0.3.11",
+  "version": "0.3.12",
   "description": "Transformer Container",
   "keywords": [
     "react",
@@ -38,7 +38,7 @@
   "dependencies": {
     "@orca-fe/hooks": "^1.10.1",
     "@orca-fe/jss-plugin-auto-prefix": "^0.0.1",
-    "@orca-fe/pocket": "^3.2.12",
+    "@orca-fe/pocket": "^3.3.0",
     "@orca-fe/simple-jss": "^0.0.3",
     "@orca-fe/tools": "^0.10.0",
     "ahooks": "^3.7.8",

packages/painter/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @orca-fe/painter
 
+## 1.4.47
+
+### Patch Changes
+
+- Updated dependencies
+  - @orca-fe/pocket@3.3.0
+
 ## 1.4.46
 
 ### Patch Changes

packages/painter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orca-fe/painter",
-  "version": "1.4.46",
+  "version": "1.4.47",
   "description": "Konva Painter",
   "keywords": [
     "react",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@orca-fe/hooks": "^1.10.1",
     "@orca-fe/jss-plugin-auto-prefix": "^0.0.1",
-    "@orca-fe/pocket": "^3.2.12",
+    "@orca-fe/pocket": "^3.3.0",
     "@orca-fe/simple-jss": "^0.0.3",
     "@orca-fe/tools": "^0.10.0",
     "ahooks": "^3.7.8",

packages/pdf-viewer/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @orca-fe/pdf-viewer
 
+## 1.20.0
+
+### Minor Changes
+
+- feat: PDFViewer ContextMenu 插件
+
+### Patch Changes
+
+- Updated dependencies
+  - @orca-fe/pocket@3.3.0
+  - @orca-fe/painter@1.4.47
+
 ## 1.19.10
 
 ### Patch Changes

packages/pdf-viewer/demo/DemoDev.tsx

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import PdfViewer, { PDFOpenFileButtonPlugin, PDFPainterPlugin, PDFTooltipPlugin, usePdfViewerRef } from '@orca-fe/pdf-viewer';
+import PdfViewer, { PDFContextPrintPlugin, PDFOpenFileButtonPlugin, PDFPainterPlugin, PDFTooltipPlugin, usePdfViewerRef } from '@orca-fe/pdf-viewer';
 
 const Demo1 = () => {
   const pdfViewerRef = usePdfViewerRef();
@@ -28,6 +28,7 @@ const Demo1 = () => {
         <PDFOpenFileButtonPlugin />
         <PDFPainterPlugin />
         <PDFTooltipPlugin />
+        <PDFContextPrintPlugin />
       </PdfViewer>
     </div>
   );

packages/pdf-viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orca-fe/pdf-viewer",
-  "version": "1.19.10",
+  "version": "1.20.0",
   "description": "PDF Viewer",
   "keywords": [
     "react",
@@ -40,17 +40,18 @@
   "dependencies": {
     "@orca-fe/hooks": "^1.10.1",
     "@orca-fe/jss-plugin-auto-prefix": "^0.0.1",
-    "@orca-fe/painter": "^1.4.46",
+    "@orca-fe/painter": "^1.4.47",
     "@orca-fe/pdfjs-dist-browserify": "^3.8.24",
-    "@orca-fe/pocket": "^3.2.12",
+    "@orca-fe/pocket": "^3.3.0",
     "@orca-fe/simple-jss": "^0.0.3",
     "@orca-fe/tools": "^0.10.0",
     "ahooks": "^3.7.8",
     "classnames": "^2.3.2",
+    "file-saver": "^2.0.5",
     "immer": "^9.0.21",
-    "tslib": "^2.6.0",
+    "print-js": "^1.6.0",
     "rfdc": "^1.3.0",
-    "file-saver": "^2.0.5"
+    "tslib": "^2.6.0"
   },
   "peerDependencies": {
     "@ant-design/icons": "^4.7.0",

packages/pdf-viewer/src/PDFViewer.tsx

@@ -11,6 +11,7 @@ import type { DocumentInitParameters } from '@orca-fe/pdfjs-dist-browserify/type
 import { ContextMenu } from '@orca-fe/pocket';
 import { saveAs } from 'file-saver';
 import { DownloadOutlined } from '@ant-design/icons';
+import type { ContextMenuItemType } from '@orca-fe/pocket';
 import type { PageViewport, PDFViewerHandle, RenderPageCoverFnType, PDFViewerInternalStateType, SourceType } from './context';
 import PDFViewerContext, { PDFToolbarContext } from './context';
 import PDFPage from './PDFPage';
@@ -21,6 +22,7 @@ import useStyle from './PDFViewer.style';
 import type { LocaleType } from './locale/context';
 import { LocaleContext, useLocale } from './locale/context';
 import zhCN from './locale/zh_CN';
+import useCollector from './useCollector';
 
 const ef = () => undefined;
 
@@ -151,8 +153,10 @@ const PDFViewer = React.forwardRef<PDFViewerHandle, PDFViewerProps>((props, pRef
       height: number;
     };
     file?: SourceType;
+    contextMenu: ContextMenuItemType[];
   }>({
     zooming: false,
+    contextMenu: [],
   });
 
   useEffect(() => {
@@ -632,6 +636,8 @@ const PDFViewer = React.forwardRef<PDFViewerHandle, PDFViewerProps>((props, pRef
     drawingPluginName: '',
   }));
 
+  const menuCollector = useCollector<ContextMenuItemType & { order?: number }>();
+
   return (
     <LocaleContext.Provider value={useLocale(zhCN, locale)[0]}>
       <PDFViewerContext.Provider
@@ -650,6 +656,8 @@ const PDFViewer = React.forwardRef<PDFViewerHandle, PDFViewerProps>((props, pRef
             internalState,
             setInternalState,
             bodyElement: bodyRef,
+            onMenuCollect: menuCollector.on,
+            offMenuCollect: menuCollector.off,
           }),
           [loading, pluginLoading, pages, viewports, zoom, current, pageCoverRefs, internalState, bodyRef],
         )}
@@ -685,19 +693,18 @@ const PDFViewer = React.forwardRef<PDFViewerHandle, PDFViewerProps>((props, pRef
                 className={styles.pages}
                 onScroll={onPageScroll}
                 mainMenuMinWidth={200}
-                data={[
-                  {
-                    key: 'download',
-                    icon: <DownloadOutlined />,
-                    text: '下载当前文档',
-                    disabled: pages.length <= 0,
-                  },
-                ]}
-                onMenuClick={(menu) => {
-                  if (menu.key === 'download') {
-                    downloadPdf();
-                  }
-                }}
+                data={() =>
+                  [
+                    {
+                      key: 'download',
+                      icon: <DownloadOutlined />,
+                      text: '下载当前文档',
+                      disabled: pages.length <= 0,
+                      onClick() {
+                        downloadPdf();
+                      },
+                    },
+                  ].concat(menuCollector.collect().sort((a, b) => (a.order || 0) - (b.order || 0)))}
                 style={{
                   '--scale-factor': scale * PixelsPerInch.PDF_TO_CSS_UNITS,
                   '--scale-factor-origin': scale,

packages/pdf-viewer/src/context.tsx

@@ -104,6 +104,11 @@ export type PDFViewerContextType = {
   viewports: PageViewport[];
   internalState: PDFViewerInternalStateType;
   setInternalState: SetState<PDFViewerInternalStateType>;
+
+  // 注册菜单采集器事件
+  onMenuCollect: (callback: (...args: any[]) => any) => void;
+  // 卸载菜单采集器事件
+  offMenuCollect: (callback: (...args: any[]) => any) => void;
 };
 
 const PDFViewerContext = React.createContext<PDFViewerContextType>({
@@ -120,6 +125,8 @@ const PDFViewerContext = React.createContext<PDFViewerContextType>({
   },
   bodyElement: null,
   setInternalState: () => {},
+  onMenuCollect: () => {},
+  offMenuCollect: () => {},
   pdfViewer: {
     async load() {},
     async close() {},

packages/pdf-viewer/src/index.ts

@@ -5,6 +5,9 @@ import OpenFileButton from './OpenFileButton';
 import PDFViewer from './PDFViewer';
 import PDFPainterPlugin from './plugins/PDFPainterPlugin';
 import PDFTooltipPlugin from './plugins/PDFTooltipPlugin';
+import PDFContextMenuPlugin from './plugins/PDFContextMenuPlugin';
+import PDFContextPrintPlugin from './plugins/PDFContextPrintPlugin';
+
 import PDFOpenFileButtonPlugin from './plugins/PDFOpenFileButtonPlugin';
 import type { ToolbarButtonProps } from './ToolbarButton';
 import ToolbarButton from './ToolbarButton';
@@ -41,3 +44,6 @@ export type * from './plugins/PDFTooltipPlugin';
 export { PDFOpenFileButtonPlugin };
 
 export type * from './plugins/PDFOpenFileButtonPlugin';
+
+export { PDFContextPrintPlugin, PDFContextMenuPlugin };
+export type * from './plugins/PDFContextMenuPlugin';

packages/pdf-viewer/src/plugins/PDFContextMenuPlugin/PDFContextMenuPlugin.tsx

@@ -0,0 +1,25 @@
+import { useContext, useEffect } from 'react';
+import type { ContextMenuItemType } from '@orca-fe/pocket/es/context-menu';
+import { useMemoizedFn } from 'ahooks';
+import PDFViewerContext from '../../context';
+
+type MenuItemType = ContextMenuItemType & { order?: number };
+
+export interface PDFContextMenuPluginProps {
+  menu?: MenuItemType[] | ((page: number) => MenuItemType[]);
+}
+
+const PDFContextMenuPlugin = (props: PDFContextMenuPluginProps) => {
+  const { menu } = props;
+  const collectMenu = useMemoizedFn((page: number) => (typeof menu === 'function' ? menu(page) : menu));
+  const { onMenuCollect, offMenuCollect } = useContext(PDFViewerContext);
+  useEffect(() => {
+    onMenuCollect(collectMenu);
+    return () => {
+      offMenuCollect(collectMenu);
+    };
+  });
+  return null;
+};
+
+export default PDFContextMenuPlugin;

packages/pdf-viewer/src/plugins/PDFContextMenuPlugin/index.ts

@@ -0,0 +1,5 @@
+import PDFContextMenuPlugin from './PDFContextMenuPlugin';
+
+export default PDFContextMenuPlugin;
+
+export * from './PDFContextMenuPlugin';

packages/pdf-viewer/src/plugins/PDFContextPrintPlugin/PdfContextPrintPlugin.tsx

@@ -0,0 +1,31 @@
+import React, { useContext } from 'react';
+import printJS from 'print-js';
+import PDFContextMenuPlugin from '../PDFContextMenuPlugin';
+import PDFViewerContext from '../../context';
+
+export interface PdfContextPrintPluginProps {}
+
+const PdfContextPrintPlugin = (props: PdfContextPrintPluginProps) => {
+  const { pdfViewer } = useContext(PDFViewerContext);
+  return (
+    <PDFContextMenuPlugin
+      menu={[
+        {
+          key: 'print',
+          text: '打印',
+          onClick: async () => {
+            const data = await pdfViewer.getPDFInstance()?.getData();
+            if (data) {
+              const blob = new Blob([data.buffer], { type: 'application/pdf' });
+              const url = URL.createObjectURL(blob);
+              printJS(url);
+              URL.revokeObjectURL(url);
+            }
+          },
+        },
+      ]}
+    />
+  );
+};
+
+export default PdfContextPrintPlugin;

packages/pdf-viewer/src/plugins/PDFContextPrintPlugin/index.ts

@@ -0,0 +1,5 @@
+import PdfContextPrintPlugin from './PdfContextPrintPlugin';
+
+export default PdfContextPrintPlugin;
+
+export * from './PdfContextPrintPlugin';

packages/pdf-viewer/src/useCollector.ts

@@ -0,0 +1,24 @@
+import { useMemorizedFn } from '@orca-fe/hooks';
+import { useState } from 'react';
+
+export default function useCollector<T>() {
+  const [_this] = useState({
+    callbacks: [] as ((...args: any[]) => T[])[],
+  });
+
+  const collect = useMemorizedFn((...args) => _this.callbacks.map(cb => cb(...args)).flat());
+
+  const on = useMemorizedFn((callback: (...args: any[]) => T[]) => {
+    _this.callbacks.push(callback);
+  });
+
+  const off = useMemorizedFn((callback: (...args: any[]) => T[]) => {
+    _this.callbacks = _this.callbacks.filter(cb => cb !== callback);
+  });
+
+  return {
+    collect,
+    on,
+    off,
+  };
+}

packages/pocket/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @orca-fe/pocket
 
+## 3.3.0
+
+### Minor Changes
+
+- feat: PDFViewer ContextMenu 插件
+
 ## 3.2.12
 
 ### Patch Changes

packages/pocket/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orca-fe/pocket",
-  "version": "3.2.12",
+  "version": "3.3.0",
   "description": "UI components by orca-team",
   "keywords": [
     "react",