fix: 修复 painter plugin 识别数据没有同步缩放的问题

.changeset/soft-garlics-reply.md

@@ -0,0 +1,5 @@
+---
+'@orca-fe/pdf-viewer': minor
+---
+
+fix: 修复 painter plugin 识别数据没有同步缩放的问题

packages/pdf-viewer/demo/DemoDev.tsx

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

packages/pdf-viewer/src/index.ts

@@ -12,6 +12,7 @@ import PDFOpenFileButtonPlugin from './plugins/PDFOpenFileButtonPlugin';
 import type { ToolbarButtonProps } from './ToolbarButton';
 import ToolbarButton from './ToolbarButton';
 import ToolbarPortal from './ToolbarPortal';
+import PDFPageDebugPlugin from './plugins/PDFPageDebugPlugin';
 
 export default PDFViewer;
 
@@ -47,3 +48,5 @@ export type * from './plugins/PDFOpenFileButtonPlugin';
 
 export { PDFContextPrintPlugin, PDFContextMenuPlugin };
 export type * from './plugins/PDFContextMenuPlugin';
+
+export { PDFPageDebugPlugin };

packages/pdf-viewer/src/plugins/PDFPageDebugPlugin/PDFPageDebugPlugin.style.ts

@@ -0,0 +1,16 @@
+import { createUseStyles } from '@orca-fe/simple-jss';
+import jssAutoPrefix from '@orca-fe/jss-plugin-auto-prefix';
+
+const prefix = 'pdf-page-debug-plugin';
+
+export default createUseStyles(
+  {
+    root: {
+      position: 'relative',
+    },
+  },
+  {
+    classNamePrefix: prefix,
+    plugins: [jssAutoPrefix({ prefix })],
+  },
+);

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

@@ -0,0 +1,17 @@
+/* eslint-disable react/no-unused-prop-types */
+import React from 'react';
+import { usePageCoverRenderer } from '../../context';
+
+const PDFPageDebugPlugin = () => {
+  const renderPageCover = usePageCoverRenderer();
+
+  return (
+    <>
+      {renderPageCover((pageIndex, { viewport, zoom }) => (
+        <div>{pageIndex}</div>
+      ))}
+    </>
+  );
+};
+
+export default PDFPageDebugPlugin;

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

@@ -0,0 +1,3 @@
+import PDFPageDebugPlugin from './PDFPageDebugPlugin';
+
+export default PDFPageDebugPlugin;

packages/pdf-viewer/src/plugins/PDFPageDebugPlugin/utils.ts

@@ -0,0 +1,65 @@
+import type { Point, ShapeDataType } from '@orca-fe/painter';
+import { isGraphShapeType } from '@orca-fe/painter';
+import { PixelsPerInch } from '../../utils';
+
+/**
+ * 将 GraphShape 的 PDF 坐标转换为 CSS 坐标
+ * @param shape
+ */
+export function shapePdfToCss(shape: ShapeDataType): ShapeDataType {
+  if (isGraphShapeType(shape)) {
+    const newShape = { ...shape };
+    if ('x' in newShape && typeof newShape.x === 'number') {
+      newShape.x *= PixelsPerInch.PDF_TO_CSS_UNITS;
+    }
+    if ('y' in newShape && typeof newShape.y === 'number') {
+      newShape.y *= PixelsPerInch.PDF_TO_CSS_UNITS;
+    }
+    if ('width' in newShape && typeof newShape.width === 'number') {
+      newShape.width *= PixelsPerInch.PDF_TO_CSS_UNITS;
+    }
+    if ('height' in newShape && typeof newShape.height === 'number') {
+      newShape.height *= PixelsPerInch.PDF_TO_CSS_UNITS;
+    }
+    if ('point1' in newShape && Array.isArray(newShape.point1)) {
+      newShape.point1 = newShape.point1.map(v => v * PixelsPerInch.PDF_TO_CSS_UNITS) as Point;
+    }
+    if ('point2' in newShape && Array.isArray(newShape.point2)) {
+      newShape.point2 = newShape.point2.map(v => v * PixelsPerInch.PDF_TO_CSS_UNITS) as Point;
+    }
+
+    return newShape;
+  }
+  return shape;
+}
+
+/**
+ * 将 GraphShape 的 CSS 坐标转换为 PDF 坐标
+ * @param shape
+ */
+export function shapeCssToPdf(shape: ShapeDataType): ShapeDataType {
+  if (isGraphShapeType(shape)) {
+    const newShape = { ...shape };
+    if ('x' in newShape && typeof newShape.x === 'number') {
+      newShape.x /= PixelsPerInch.PDF_TO_CSS_UNITS;
+    }
+    if ('y' in newShape && typeof newShape.y === 'number') {
+      newShape.y /= PixelsPerInch.PDF_TO_CSS_UNITS;
+    }
+    if ('width' in newShape && typeof newShape.width === 'number') {
+      newShape.width /= PixelsPerInch.PDF_TO_CSS_UNITS;
+    }
+    if ('height' in newShape && typeof newShape.height === 'number') {
+      newShape.height /= PixelsPerInch.PDF_TO_CSS_UNITS;
+    }
+    if ('point1' in newShape && Array.isArray(newShape.point1)) {
+      newShape.point1 = newShape.point1.map(v => v / PixelsPerInch.PDF_TO_CSS_UNITS) as Point;
+    }
+    if ('point2' in newShape && Array.isArray(newShape.point2)) {
+      newShape.point2 = newShape.point2.map(v => v / PixelsPerInch.PDF_TO_CSS_UNITS) as Point;
+    }
+
+    return newShape;
+  }
+  return shape;
+}

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

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unused-prop-types */
 import type { CSSProperties } from 'react';
-import React, { useContext, useImperativeHandle, useState } from 'react';
+import React, { useMemo, useContext, useImperativeHandle, useState } from 'react';
 import { IconButton, Trigger } from '@orca-fe/pocket';
 import type { PainterRef, ShapeDataType, ShapeType } from '@orca-fe/painter';
 import Painter from '@orca-fe/painter';
@@ -20,6 +20,7 @@ import type { PropsType } from '../SimplePropsEditor/def';
 import useStyle from './PDFPainterPlugin.style';
 import { useLocale } from '../../locale/context';
 import zhCN from '../../locale/zh_CN';
+import { shapeCssToPdf, shapePdfToCss } from './utils';
 
 const deepClone = rfdc();
 
@@ -36,7 +37,7 @@ export type PDFPainterPluginHandle = {
 
 const eArr = [];
 
-const ef = () => { };
+const ef = () => {};
 
 /**
  * PDFPainterPlugin 绘图插件属性
@@ -93,7 +94,15 @@ const drawingNamePDFPainterPlugin = 'PDFPainterPlugin';
  */
 const PDFPainterPlugin = React.forwardRef<PDFPainterPluginHandle, PDFPainterPluginProps>((props, pRef) => {
   const [l] = useLocale(zhCN);
-  const { disabledButton, autoCheck = true, onChangeStart = ef, buttonName = l.paint, popupVisible = true, drawingVisible = true, drawingPluginId = drawingNamePDFPainterPlugin } = props;
+  const {
+    disabledButton,
+    autoCheck = true,
+    onChangeStart = ef,
+    buttonName = l.paint,
+    popupVisible = true,
+    drawingVisible = true,
+    drawingPluginId = drawingNamePDFPainterPlugin,
+  } = props;
   const styles = useStyle();
 
   const { internalState, setInternalState } = useContext(PDFViewerContext);
@@ -120,17 +129,31 @@ const PDFPainterPlugin = React.forwardRef<PDFPainterPluginHandle, PDFPainterPlug
     valuePropName: 'checked',
   });
 
-  const [dataList = eArr, setDataList] = useControllableValue<ShapeDataType[][]>(props, {
+  const [_dataList = eArr, _setDataList] = useControllableValue<ShapeDataType[][]>(props, {
     defaultValuePropName: 'defaultData',
     trigger: 'onDataChange',
     valuePropName: 'data',
   });
 
+  const dataList = useMemo(() => _dataList.map(shapes => shapes.map(shapePdfToCss)), [_dataList]);
+
+  const setDataList = useMemoizedFn<typeof _setDataList>((data, ...args) => {
+    if (typeof data === 'function') {
+      _setDataList(oData => data(oData).map(shapes => shapes.map(shapeCssToPdf)), ...args);
+    } else {
+      _setDataList(
+        data.map(shapes => shapes.map(shapeCssToPdf)),
+        ...args,
+      );
+    }
+  });
+
   /* 绘图功能 */
   const drawing = internalState.drawingPluginName === drawingPluginId;
 
   const setDrawing = useMemoizedFn((b: boolean) => {
-    setInternalState({ // 这里设置的时候，已经是全局的了
+    setInternalState({
+      // 这里设置的时候，已经是全局的了
       drawingPluginName: b ? drawingPluginId : '',
     });
   });

packages/pdf-viewer/src/plugins/PDFPainterPlugin/utils.ts

@@ -0,0 +1,65 @@
+import type { Point, ShapeDataType } from '@orca-fe/painter';
+import { isGraphShapeType } from '@orca-fe/painter';
+import { PixelsPerInch } from '../../utils';
+
+/**
+ * 将 GraphShape 的 PDF 坐标转换为 CSS 坐标
+ * @param shape
+ */
+export function shapePdfToCss(shape: ShapeDataType): ShapeDataType {
+  if (isGraphShapeType(shape)) {
+    const newShape = { ...shape };
+    if ('x' in newShape && typeof newShape.x === 'number') {
+      newShape.x *= PixelsPerInch.PDF_TO_CSS_UNITS;
+    }
+    if ('y' in newShape && typeof newShape.y === 'number') {
+      newShape.y *= PixelsPerInch.PDF_TO_CSS_UNITS;
+    }
+    if ('width' in newShape && typeof newShape.width === 'number') {
+      newShape.width *= PixelsPerInch.PDF_TO_CSS_UNITS;
+    }
+    if ('height' in newShape && typeof newShape.height === 'number') {
+      newShape.height *= PixelsPerInch.PDF_TO_CSS_UNITS;
+    }
+    if ('point1' in newShape && Array.isArray(newShape.point1)) {
+      newShape.point1 = newShape.point1.map(v => v * PixelsPerInch.PDF_TO_CSS_UNITS) as Point;
+    }
+    if ('point2' in newShape && Array.isArray(newShape.point2)) {
+      newShape.point2 = newShape.point2.map(v => v * PixelsPerInch.PDF_TO_CSS_UNITS) as Point;
+    }
+
+    return newShape;
+  }
+  return shape;
+}
+
+/**
+ * 将 GraphShape 的 CSS 坐标转换为 PDF 坐标
+ * @param shape
+ */
+export function shapeCssToPdf(shape: ShapeDataType): ShapeDataType {
+  if (isGraphShapeType(shape)) {
+    const newShape = { ...shape };
+    if ('x' in newShape && typeof newShape.x === 'number') {
+      newShape.x /= PixelsPerInch.PDF_TO_CSS_UNITS;
+    }
+    if ('y' in newShape && typeof newShape.y === 'number') {
+      newShape.y /= PixelsPerInch.PDF_TO_CSS_UNITS;
+    }
+    if ('width' in newShape && typeof newShape.width === 'number') {
+      newShape.width /= PixelsPerInch.PDF_TO_CSS_UNITS;
+    }
+    if ('height' in newShape && typeof newShape.height === 'number') {
+      newShape.height /= PixelsPerInch.PDF_TO_CSS_UNITS;
+    }
+    if ('point1' in newShape && Array.isArray(newShape.point1)) {
+      newShape.point1 = newShape.point1.map(v => v / PixelsPerInch.PDF_TO_CSS_UNITS) as Point;
+    }
+    if ('point2' in newShape && Array.isArray(newShape.point2)) {
+      newShape.point2 = newShape.point2.map(v => v / PixelsPerInch.PDF_TO_CSS_UNITS) as Point;
+    }
+
+    return newShape;
+  }
+  return shape;
+}