From 9d8923c5431fbd0cf9610b8fecc33a5c773bf9c5 Mon Sep 17 00:00:00 2001
From: bd <331677620@qq.com>
Date: Wed, 22 May 2024 11:34:19 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20painter=20plugin=20?=
=?UTF-8?q?=E8=AF=86=E5=88=AB=E6=95=B0=E6=8D=AE=E6=B2=A1=E6=9C=89=E5=90=8C?=
=?UTF-8?q?=E6=AD=A5=E7=BC=A9=E6=94=BE=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.changeset/soft-garlics-reply.md | 5 ++
packages/pdf-viewer/demo/DemoDev.tsx | 10 ++-
packages/pdf-viewer/src/index.ts | 3 +
.../PDFPageDebugPlugin.style.ts | 16 +++++
.../PDFPageDebugPlugin/PDFPageDebugPlugin.tsx | 17 +++++
.../src/plugins/PDFPageDebugPlugin/index.ts | 3 +
.../src/plugins/PDFPageDebugPlugin/utils.ts | 65 +++++++++++++++++++
.../PDFPainterPlugin/PDFPainterPlugin.tsx | 33 ++++++++--
.../src/plugins/PDFPainterPlugin/utils.ts | 65 +++++++++++++++++++
pnpm-lock.yaml | 18 ++---
10 files changed, 220 insertions(+), 15 deletions(-)
create mode 100644 .changeset/soft-garlics-reply.md
create mode 100644 packages/pdf-viewer/src/plugins/PDFPageDebugPlugin/PDFPageDebugPlugin.style.ts
create mode 100644 packages/pdf-viewer/src/plugins/PDFPageDebugPlugin/PDFPageDebugPlugin.tsx
create mode 100644 packages/pdf-viewer/src/plugins/PDFPageDebugPlugin/index.ts
create mode 100644 packages/pdf-viewer/src/plugins/PDFPageDebugPlugin/utils.ts
create mode 100644 packages/pdf-viewer/src/plugins/PDFPainterPlugin/utils.ts
diff --git a/.changeset/soft-garlics-reply.md b/.changeset/soft-garlics-reply.md
new file mode 100644
index 0000000..d6f9379
--- /dev/null
+++ b/.changeset/soft-garlics-reply.md
@@ -0,0 +1,5 @@
+---
+'@orca-fe/pdf-viewer': minor
+---
+
+fix: 修复 painter plugin 识别数据没有同步缩放的问题
diff --git a/packages/pdf-viewer/demo/DemoDev.tsx b/packages/pdf-viewer/demo/DemoDev.tsx
index c40d3c9..c933868 100644
--- a/packages/pdf-viewer/demo/DemoDev.tsx
+++ b/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 = () => {
+
);
diff --git a/packages/pdf-viewer/src/index.ts b/packages/pdf-viewer/src/index.ts
index b75e69c..76c4b77 100644
--- a/packages/pdf-viewer/src/index.ts
+++ b/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 };
diff --git a/packages/pdf-viewer/src/plugins/PDFPageDebugPlugin/PDFPageDebugPlugin.style.ts b/packages/pdf-viewer/src/plugins/PDFPageDebugPlugin/PDFPageDebugPlugin.style.ts
new file mode 100644
index 0000000..98cab9f
--- /dev/null
+++ b/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 })],
+ },
+);
diff --git a/packages/pdf-viewer/src/plugins/PDFPageDebugPlugin/PDFPageDebugPlugin.tsx b/packages/pdf-viewer/src/plugins/PDFPageDebugPlugin/PDFPageDebugPlugin.tsx
new file mode 100644
index 0000000..ed09520
--- /dev/null
+++ b/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 }) => (
+ {pageIndex}
+ ))}
+
+ );
+};
+
+export default PDFPageDebugPlugin;
diff --git a/packages/pdf-viewer/src/plugins/PDFPageDebugPlugin/index.ts b/packages/pdf-viewer/src/plugins/PDFPageDebugPlugin/index.ts
new file mode 100644
index 0000000..b4b0df1
--- /dev/null
+++ b/packages/pdf-viewer/src/plugins/PDFPageDebugPlugin/index.ts
@@ -0,0 +1,3 @@
+import PDFPageDebugPlugin from './PDFPageDebugPlugin';
+
+export default PDFPageDebugPlugin;
diff --git a/packages/pdf-viewer/src/plugins/PDFPageDebugPlugin/utils.ts b/packages/pdf-viewer/src/plugins/PDFPageDebugPlugin/utils.ts
new file mode 100644
index 0000000..55b5762
--- /dev/null
+++ b/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;
+}
diff --git a/packages/pdf-viewer/src/plugins/PDFPainterPlugin/PDFPainterPlugin.tsx b/packages/pdf-viewer/src/plugins/PDFPainterPlugin/PDFPainterPlugin.tsx
index 276c1c8..6b77e04 100644
--- a/packages/pdf-viewer/src/plugins/PDFPainterPlugin/PDFPainterPlugin.tsx
+++ b/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((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(props, {
+ const [_dataList = eArr, _setDataList] = useControllableValue(props, {
defaultValuePropName: 'defaultData',
trigger: 'onDataChange',
valuePropName: 'data',
});
+ const dataList = useMemo(() => _dataList.map(shapes => shapes.map(shapePdfToCss)), [_dataList]);
+
+ const setDataList = useMemoizedFn((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 : '',
});
});
diff --git a/packages/pdf-viewer/src/plugins/PDFPainterPlugin/utils.ts b/packages/pdf-viewer/src/plugins/PDFPainterPlugin/utils.ts
new file mode 100644
index 0000000..55b5762
--- /dev/null
+++ b/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;
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8ff2ee6..4e50db5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -151,13 +151,13 @@ importers:
specifier: '>=4.8.0'
version: 5.1.3(react-dom@18.2.0)(react@18.2.0)
'@orca-fe/hooks':
- specifier: ^1.11.1
+ specifier: ^1.12.0
version: link:../hooks
'@orca-fe/jss-plugin-auto-prefix':
specifier: ^0.0.1
version: 0.0.1(jss@10.10.0)(react@18.2.0)
'@orca-fe/pocket':
- specifier: ^3.4.3
+ specifier: ^3.4.4
version: link:../pocket
'@orca-fe/simple-jss':
specifier: ^0.0.3
@@ -291,13 +291,13 @@ importers:
specifier: ^4.7.0
version: 4.7.0(react-dom@18.2.0)(react@18.2.0)
'@orca-fe/hooks':
- specifier: ^1.11.1
+ specifier: ^1.12.0
version: link:../hooks
'@orca-fe/jss-plugin-auto-prefix':
specifier: ^0.0.1
version: 0.0.1(jss@10.10.0)(react@18.2.0)
'@orca-fe/pocket':
- specifier: ^3.4.3
+ specifier: ^3.4.4
version: link:../pocket
'@orca-fe/simple-jss':
specifier: ^0.0.3
@@ -306,7 +306,7 @@ importers:
specifier: ^0.10.1
version: link:../tools
'@orca-fe/transformer':
- specifier: ^0.3.30
+ specifier: ^0.3.31
version: link:../transformer
ahooks:
specifier: ^3.7.8
@@ -346,7 +346,7 @@ importers:
specifier: ^4.7.0
version: 4.7.0(react-dom@18.2.0)(react@18.2.0)
'@orca-fe/hooks':
- specifier: ^1.11.1
+ specifier: ^1.11.0
version: link:../hooks
'@orca-fe/jss-plugin-auto-prefix':
specifier: ^0.0.1
@@ -358,7 +358,7 @@ importers:
specifier: ^3.8.24
version: 3.8.24
'@orca-fe/pocket':
- specifier: ^3.4.3
+ specifier: ^3.2.4
version: link:../pocket
'@orca-fe/simple-jss':
specifier: ^0.0.3
@@ -416,7 +416,7 @@ importers:
specifier: '>=4.7.0'
version: 5.1.3(react-dom@18.2.0)(react@17.0.2)
'@orca-fe/hooks':
- specifier: ^1.11.1
+ specifier: ^1.12.0
version: link:../hooks
'@orca-fe/jss-plugin-auto-prefix':
specifier: ^0.0.1
@@ -534,7 +534,7 @@ importers:
packages/transformer:
dependencies:
'@orca-fe/hooks':
- specifier: ^1.11.1
+ specifier: ^1.12.0
version: link:../hooks
'@orca-fe/jss-plugin-auto-prefix':
specifier: ^0.0.1