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 1/4] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20painter=20plugi?=
 =?UTF-8?q?n=20=E8=AF=86=E5=88=AB=E6=95=B0=E6=8D=AE=E6=B2=A1=E6=9C=89?=
 =?UTF-8?q?=E5=90=8C=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 = () => {
         <PDFPainterPlugin />
         <PDFTooltipPlugin />
         <PDFContextPrintPlugin />
+        <PDFPageDebugPlugin />
       </PdfViewer>
     </div>
   );
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 }) => (
+        <div>{pageIndex}</div>
+      ))}
+    </>
+  );
+};
+
+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<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 : '',
     });
   });
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

From a380251351f73b51c1b3ab24f2fd8efc7e6822e6 Mon Sep 17 00:00:00 2001
From: bd <331677620@qq.com>
Date: Wed, 22 May 2024 13:55:42 +0800
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E5=B0=86=20PDFViewer=20=E7=9A=84?=
 =?UTF-8?q?=20Page=20=E8=B0=83=E6=95=B4=E4=B8=BA=20absolute=20=E5=AE=9A?=
 =?UTF-8?q?=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/green-knives-return.md          |  5 +++
 packages/pdf-viewer/src/PDFViewer.style.ts | 17 ++++++---
 packages/pdf-viewer/src/PDFViewer.tsx      | 41 +++++++++++++++-------
 pnpm-lock.yaml                             | 20 +++++------
 4 files changed, 56 insertions(+), 27 deletions(-)
 create mode 100644 .changeset/green-knives-return.md

diff --git a/.changeset/green-knives-return.md b/.changeset/green-knives-return.md
new file mode 100644
index 0000000..699c358
--- /dev/null
+++ b/.changeset/green-knives-return.md
@@ -0,0 +1,5 @@
+---
+'@orca-fe/pdf-viewer': major
+---
+
+feat: 将 PDFViewer 的 Page 调整为 absolute 定位
diff --git a/packages/pdf-viewer/src/PDFViewer.style.ts b/packages/pdf-viewer/src/PDFViewer.style.ts
index a1db647..cdbcaae 100644
--- a/packages/pdf-viewer/src/PDFViewer.style.ts
+++ b/packages/pdf-viewer/src/PDFViewer.style.ts
@@ -49,16 +49,18 @@ export default createUseStyles(
       position: 'relative',
       height: '100%',
       overflow: 'auto',
-      padding: '24px 0',
+      // padding: '24px 0',
       backgroundColor: '#f0f2f5',
-      paddingBottom: 48,
+      // paddingBottom: 48,
     },
     pageContainer: {
-      position: 'relative',
+      position: 'absolute',
       backgroundColor: '#fff',
-      marginLeft: 'auto',
-      marginRight: 'auto',
+      // marginLeft: 'auto',
+      // marginRight: 'auto',
       boxShadow: [0, 0, 12, 'rgba(0, 0, 0, 0.3)'],
+      left: '50%',
+      transform: 'translateX(-50%)',
     },
     page: {
       width: '100%',
@@ -95,6 +97,11 @@ export default createUseStyles(
         backgroundColor: 'rgba(0,129,255,0.3)',
       },
     },
+    pageBottomPlaceholder: {
+      position: 'absolute',
+      pointerEvents: 'none',
+      visibility: 'hidden',
+    },
   },
   {
     classNamePrefix: prefix,
diff --git a/packages/pdf-viewer/src/PDFViewer.tsx b/packages/pdf-viewer/src/PDFViewer.tsx
index b00997c..4dfd625 100644
--- a/packages/pdf-viewer/src/PDFViewer.tsx
+++ b/packages/pdf-viewer/src/PDFViewer.tsx
@@ -30,6 +30,9 @@ const ef = () => undefined;
 
 const round001 = roundBy(0.001);
 
+const PAGE_PADDING_TOP = 24;
+const PAGE_PADDING_BOTTOM = 60;
+
 const DefaultLoadingTips = () => {
   const [l] = useLocale(zhCN);
   return <div className="pdf-viewer-default-loading-tips">{l.loadingTips}</div>;
@@ -218,27 +221,32 @@ const PDFViewer = React.forwardRef<PDFViewerHandle, PDFViewerProps>((props, pRef
 
   // 根据 viewport 信息生成每一页的实际位置信息
   const {
-    topArr: pageTopArr,
+    topArr: topArrOrigin,
     maxWidth,
-    pageMaxWidth,
-    pageMaxHeight,
+    pageMaxWidth: pageMaxWidthOrigin,
+    pageMaxHeight: pageMaxHeightOrigin,
+    bottom: pageBottomOrigin,
   } = useMemo(() => {
     let top = 0;
     let maxWidth = 0;
     let pageMaxWidth = 0;
     let pageMaxHeight = 0;
     const topArr = viewports.map(({ height: _height, width: _width }) => {
-      const width = _width * PixelsPerInch.PDF_TO_CSS_UNITS;
-      const height = _height * PixelsPerInch.PDF_TO_CSS_UNITS;
+      const width = _width;
+      const height = _height;
       const _top = top;
-      top += Math.floor(height + pageGap) * scale;
-      maxWidth = Math.max(width * scale, maxWidth);
+      top += height + pageGap;
+      maxWidth = Math.max(width, maxWidth);
       pageMaxWidth = Math.max(width, pageMaxWidth);
       pageMaxHeight = Math.max(height, pageMaxHeight);
       return _top;
     });
-    return { topArr, maxWidth, pageMaxWidth, pageMaxHeight };
-  }, [viewports, pageGap, scale]);
+    return { topArr, maxWidth, pageMaxWidth, pageMaxHeight, bottom: top };
+  }, [viewports, pageGap]);
+
+  const pageTopArr = useMemo(() => topArrOrigin.map(top => top * scale * PixelsPerInch.PDF_TO_CSS_UNITS), [scale, topArrOrigin]);
+  const pageMaxWidth = pageMaxWidthOrigin * scale * PixelsPerInch.PDF_TO_CSS_UNITS;
+  const pageMaxHeight = pageMaxHeightOrigin * scale * PixelsPerInch.PDF_TO_CSS_UNITS;
 
   const [zoomMode, setZoomMode] = useState<false | 'autoWidth' | 'autoHeight'>(typeof defaultZoom === 'number' ? false : defaultZoom);
 
@@ -264,7 +272,7 @@ const PDFViewer = React.forwardRef<PDFViewerHandle, PDFViewerProps>((props, pRef
 
   useEffect(() => {
     autoZoomDebounce.run();
-  }, [zoomMode, pageMaxHeight, pageMaxWidth]);
+  }, [zoomMode, pageMaxHeightOrigin, pageMaxWidthOrigin]);
 
   // 自动调整缩放级别
   useSizeListener((size) => {
@@ -719,11 +727,13 @@ const PDFViewer = React.forwardRef<PDFViewerHandle, PDFViewerProps>((props, pRef
                 {viewports.length === 0 && !loading && !pluginLoading && emptyTips}
                 {viewports.map((viewport, pageIndex) => {
                   const shouldRender = pageIndex >= renderRange[0] && pageIndex <= renderRange[1];
+                  const top = `calc(var(--scale-factor) * ${PAGE_PADDING_TOP + Math.floor(topArrOrigin[pageIndex])}px)`;
+                  const left = `calc(var(--scale-factor) * ${Math.floor((maxWidth - viewport.width) * 0.5)}px)`;
                   const width = `calc(var(--scale-factor) * ${Math.floor(viewport.width)}px)`;
                   const height = `calc(var(--scale-factor) * ${Math.floor(viewport.height)}px)`;
-                  const gap = `calc(var(--scale-factor) * ${pageGap}px)`;
+                  // const gap = `calc(var(--scale-factor) * ${pageGap}px)`;
                   return (
-                    <div key={pageIndex} className={styles.pageContainer} style={{ width, height, marginBottom: gap }}>
+                    <div key={pageIndex} className={styles.pageContainer} style={{ top, marginLeft: left, width, height /* , marginBottom: gap*/ }}>
                       {shouldRender && (
                         <>
                           <PDFPage className={styles.page} outputScale={outputScale} index={pageIndex} zoom={zoom} render={shouldRender} />
@@ -734,6 +744,13 @@ const PDFViewer = React.forwardRef<PDFViewerHandle, PDFViewerProps>((props, pRef
                     </div>
                   );
                 })}
+                <div
+                  className={styles.pageBottomPlaceholder}
+                  data-name="page-bottom-place-holder"
+                  style={{ top: `calc(var(--scale-factor) * ${pageBottomOrigin + PAGE_PADDING_BOTTOM}px)` }}
+                >
+                  &nbsp;
+                </div>
               </ContextMenu>
               {(loading || !!pluginLoading) && loadingTips}
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8ff2ee6..b512ab8 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,19 +346,19 @@ 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/painter':
-        specifier: ^1.4.53
+        specifier: ^1.4.55
         version: link:../painter
       '@orca-fe/pdfjs-dist-browserify':
         specifier: ^3.8.24
         version: 3.8.24
       '@orca-fe/pocket':
-        specifier: ^3.4.3
+        specifier: ^3.4.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

From cc5c270b963aa710b81608fccfe99ca49a88847a Mon Sep 17 00:00:00 2001
From: NicoKam <331677620@qq.com>
Date: Sun, 26 May 2024 19:39:36 +0800
Subject: [PATCH 3/4] =?UTF-8?q?chore:=20=E5=8E=BB=E9=99=A4=20changeset=20?=
 =?UTF-8?q?=E7=89=88=E6=9C=AC=E4=BF=A1=E6=81=AF?=
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 | 9 +++++++--
 2 files changed, 7 insertions(+), 7 deletions(-)
 delete mode 100644 .changeset/soft-garlics-reply.md

diff --git a/.changeset/soft-garlics-reply.md b/.changeset/soft-garlics-reply.md
deleted file mode 100644
index d6f9379..0000000
--- a/.changeset/soft-garlics-reply.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@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 c933868..77ff341 100644
--- a/packages/pdf-viewer/demo/DemoDev.tsx
+++ b/packages/pdf-viewer/demo/DemoDev.tsx
@@ -4,7 +4,7 @@
  * debug: true
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import PdfViewer, {
   PDFContextPrintPlugin,
   PDFOpenFileButtonPlugin,
@@ -13,8 +13,11 @@ import PdfViewer, {
   PDFTooltipPlugin,
   usePdfViewerRef,
 } from '@orca-fe/pdf-viewer';
+import { JsonViewer } from '@orca-fe/pocket';
 
 const Demo1 = () => {
+  const [data, setData] = useState<any[]>([]);
+
   const pdfViewerRef = usePdfViewerRef();
   return (
     <div>
@@ -33,11 +36,13 @@ const Demo1 = () => {
       />
       <PdfViewer ref={pdfViewerRef} dropFile pdfJsParams={{ cMapUrl: '/pdfjs-bcmaps/' }} style={{ height: 600 }}>
         <PDFOpenFileButtonPlugin />
-        <PDFPainterPlugin />
+        <PDFPainterPlugin data={data} onDataChange={setData} />
         <PDFTooltipPlugin />
         <PDFContextPrintPlugin />
         <PDFPageDebugPlugin />
       </PdfViewer>
+      <div>绘图数据：</div>
+      <JsonViewer value={data} />
     </div>
   );
 };

From 45a4463fe796fbd849db77274b2822f8723cba1c Mon Sep 17 00:00:00 2001
From: NicoKam <331677620@qq.com>
Date: Sat, 1 Jun 2024 21:56:02 +0800
Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=BC=A0=E6=A0=87?=
 =?UTF-8?q?=E6=BB=9A=E8=BD=AE=E7=BC=A9=E6=94=BE=E6=97=B6=E4=B8=8D=E6=AD=A3?=
 =?UTF-8?q?=E7=A1=AE=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../workflows/changesets-auto-pre-publish.yml |  2 +-
 packages/pdf-viewer/src/PDFViewer.style.ts    |  4 +-
 packages/pdf-viewer/src/PDFViewer.tsx         | 60 +++++++++++--------
 pnpm-lock.yaml                                |  6 +-
 4 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/.github/workflows/changesets-auto-pre-publish.yml b/.github/workflows/changesets-auto-pre-publish.yml
index 02999d3..93a91fd 100644
--- a/.github/workflows/changesets-auto-pre-publish.yml
+++ b/.github/workflows/changesets-auto-pre-publish.yml
@@ -60,7 +60,7 @@ jobs:
                 "msgtype": "markdown",
                 "markdown": {
                     "title":"orca-fe 发布提醒",
-                    "text": "## Orca-Pocket 临时版本已发布\n ${{steps.changesets.outputs.changedPackages}}\n\nTriggered by [PR#${{ github.event.pull_request.number }}](https://github.com/orca-team/pocket/pull/${{ github.event.pull_request.number }})"
+                    "text": "## Orca-Pocket 临时版本已发布\n ${{steps.changesets.outputs.changedPackages}}\n\nTriggered by [PR#${{ github.event.pull_request.number }} {{github.event.pull_request.title}}](https://github.com/orca-team/pocket/pull/${{ github.event.pull_request.number }})"
                 },
                 "at": {
                     "isAtAll": false
diff --git a/packages/pdf-viewer/src/PDFViewer.style.ts b/packages/pdf-viewer/src/PDFViewer.style.ts
index cdbcaae..44f1ed6 100644
--- a/packages/pdf-viewer/src/PDFViewer.style.ts
+++ b/packages/pdf-viewer/src/PDFViewer.style.ts
@@ -59,8 +59,8 @@ export default createUseStyles(
       // marginLeft: 'auto',
       // marginRight: 'auto',
       boxShadow: [0, 0, 12, 'rgba(0, 0, 0, 0.3)'],
-      left: '50%',
-      transform: 'translateX(-50%)',
+      left: '0%',
+      // transform: 'translateX(-50%)',
     },
     page: {
       width: '100%',
diff --git a/packages/pdf-viewer/src/PDFViewer.tsx b/packages/pdf-viewer/src/PDFViewer.tsx
index 4dfd625..9ce3955 100644
--- a/packages/pdf-viewer/src/PDFViewer.tsx
+++ b/packages/pdf-viewer/src/PDFViewer.tsx
@@ -31,6 +31,7 @@ const ef = () => undefined;
 const round001 = roundBy(0.001);
 
 const PAGE_PADDING_TOP = 24;
+const PAGE_PADDING_HORIZONTAL = 24;
 const PAGE_PADDING_BOTTOM = 60;
 
 const DefaultLoadingTips = () => {
@@ -222,13 +223,11 @@ const PDFViewer = React.forwardRef<PDFViewerHandle, PDFViewerProps>((props, pRef
   // 根据 viewport 信息生成每一页的实际位置信息
   const {
     topArr: topArrOrigin,
-    maxWidth,
-    pageMaxWidth: pageMaxWidthOrigin,
-    pageMaxHeight: pageMaxHeightOrigin,
+    pageMaxWidth,
+    pageMaxHeight,
     bottom: pageBottomOrigin,
   } = useMemo(() => {
     let top = 0;
-    let maxWidth = 0;
     let pageMaxWidth = 0;
     let pageMaxHeight = 0;
     const topArr = viewports.map(({ height: _height, width: _width }) => {
@@ -236,29 +235,26 @@ const PDFViewer = React.forwardRef<PDFViewerHandle, PDFViewerProps>((props, pRef
       const height = _height;
       const _top = top;
       top += height + pageGap;
-      maxWidth = Math.max(width, maxWidth);
       pageMaxWidth = Math.max(width, pageMaxWidth);
       pageMaxHeight = Math.max(height, pageMaxHeight);
       return _top;
     });
-    return { topArr, maxWidth, pageMaxWidth, pageMaxHeight, bottom: top };
+    return { topArr, pageMaxWidth, pageMaxHeight, bottom: top };
   }, [viewports, pageGap]);
 
   const pageTopArr = useMemo(() => topArrOrigin.map(top => top * scale * PixelsPerInch.PDF_TO_CSS_UNITS), [scale, topArrOrigin]);
-  const pageMaxWidth = pageMaxWidthOrigin * scale * PixelsPerInch.PDF_TO_CSS_UNITS;
-  const pageMaxHeight = pageMaxHeightOrigin * scale * PixelsPerInch.PDF_TO_CSS_UNITS;
 
   const [zoomMode, setZoomMode] = useState<false | 'autoWidth' | 'autoHeight'>(typeof defaultZoom === 'number' ? false : defaultZoom);
 
   const autoZoomDebounce = useDebounceFn(
     () => {
       let newZoom = zoom;
-      if (zoomMode && _this.size && maxWidth && pageMaxHeight) {
+      if (zoomMode && _this.size && pageMaxWidth && pageMaxHeight) {
         if (zoomMode === 'autoWidth') {
           // 调整缩放级别，使其与容器宽度匹配
-          newZoom = Math.log2((_this.size.width - 32) / pageMaxWidth);
+          newZoom = Math.log2((_this.size.width - 20 - 2 * PAGE_PADDING_HORIZONTAL) / (pageMaxWidth * PixelsPerInch.PDF_TO_CSS_UNITS));
         } else if (zoomMode === 'autoHeight') {
-          newZoom = Math.log2((_this.size.height - 32) / pageMaxHeight);
+          newZoom = Math.log2((_this.size.height - 32) / (pageMaxHeight * PixelsPerInch.PDF_TO_CSS_UNITS));
         }
       }
 
@@ -272,7 +268,7 @@ const PDFViewer = React.forwardRef<PDFViewerHandle, PDFViewerProps>((props, pRef
 
   useEffect(() => {
     autoZoomDebounce.run();
-  }, [zoomMode, pageMaxHeightOrigin, pageMaxWidthOrigin]);
+  }, [zoomMode, pageMaxHeight, pageMaxWidth]);
 
   // 自动调整缩放级别
   useSizeListener((size) => {
@@ -283,8 +279,13 @@ const PDFViewer = React.forwardRef<PDFViewerHandle, PDFViewerProps>((props, pRef
 
     _this.size = size;
 
+    const body = bodyRef;
+    if (body) {
+      body.style.setProperty('--pdf-viewer-page-width', `${size.width}px`);
+    }
+
     autoZoomDebounce.run();
-  }, rootRef);
+  }, bodyRef);
 
   // 翻頁
   const changePage = useMemoizedFn((page: number, anim = false) => {
@@ -495,9 +496,11 @@ const PDFViewer = React.forwardRef<PDFViewerHandle, PDFViewerProps>((props, pRef
         const x = clientX - left;
         const y = clientY - top;
 
+        const pageMaxWidthScale = pageMaxWidth * scale * PixelsPerInch.PDF_TO_CSS_UNITS;
+
         if (!_this.mousePositionBeforeWheel) {
           _this.mousePositionBeforeWheel = {
-            x: x + dom.scrollLeft - 0.5 * (maxWidth < width ? width - maxWidth : 0),
+            x: x + dom.scrollLeft - 0.5 * (pageMaxWidthScale < width ? width - pageMaxWidthScale : 0),
             y: y + dom.scrollTop,
             zoom,
           };
@@ -698,7 +701,17 @@ const PDFViewer = React.forwardRef<PDFViewerHandle, PDFViewerProps>((props, pRef
                 setToolbarRightDom(dom);
               }}
             />
-            <div ref={setBodyRef} className={cn(styles.pagesOuter, { [styles.droppable]: dropFile })}>
+            <div
+              ref={setBodyRef}
+              className={cn(styles.pagesOuter, { [styles.droppable]: dropFile })}
+              style={
+                {
+                  '--scale-factor': scale * PixelsPerInch.PDF_TO_CSS_UNITS,
+                  '--scale-factor-origin': scale,
+                  '--pdf-viewer-page-scale': scale * PixelsPerInch.PDF_TO_CSS_UNITS,
+                } as CSSProperties
+              }
+            >
               <ContextMenu
                 ref={pageContainerRef}
                 className={styles.pages}
@@ -716,24 +729,18 @@ const PDFViewer = React.forwardRef<PDFViewerHandle, PDFViewerProps>((props, pRef
                       },
                     } as ContextMenuItemType,
                   ].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,
-                    '--pdf-viewer-page-scale': scale * PixelsPerInch.PDF_TO_CSS_UNITS,
-                  } as CSSProperties
-                }
               >
                 {viewports.length === 0 && !loading && !pluginLoading && emptyTips}
                 {viewports.map((viewport, pageIndex) => {
                   const shouldRender = pageIndex >= renderRange[0] && pageIndex <= renderRange[1];
                   const top = `calc(var(--scale-factor) * ${PAGE_PADDING_TOP + Math.floor(topArrOrigin[pageIndex])}px)`;
-                  const left = `calc(var(--scale-factor) * ${Math.floor((maxWidth - viewport.width) * 0.5)}px)`;
+                  const marginLeft = `max(${PAGE_PADDING_HORIZONTAL}px, (var(--pdf-viewer-page-width) - var(--scale-factor) * ${pageMaxWidth}px) * 0.5)`;
+                  const left = `calc(${marginLeft} + var(--scale-factor) * ${Math.floor((pageMaxWidth - viewport.width) * 0.5)}px)`;
                   const width = `calc(var(--scale-factor) * ${Math.floor(viewport.width)}px)`;
                   const height = `calc(var(--scale-factor) * ${Math.floor(viewport.height)}px)`;
                   // const gap = `calc(var(--scale-factor) * ${pageGap}px)`;
                   return (
-                    <div key={pageIndex} className={styles.pageContainer} style={{ top, marginLeft: left, width, height /* , marginBottom: gap*/ }}>
+                    <div key={pageIndex} className={styles.pageContainer} style={{ top, left, width, height }}>
                       {shouldRender && (
                         <>
                           <PDFPage className={styles.page} outputScale={outputScale} index={pageIndex} zoom={zoom} render={shouldRender} />
@@ -747,7 +754,10 @@ const PDFViewer = React.forwardRef<PDFViewerHandle, PDFViewerProps>((props, pRef
                 <div
                   className={styles.pageBottomPlaceholder}
                   data-name="page-bottom-place-holder"
-                  style={{ top: `calc(var(--scale-factor) * ${pageBottomOrigin + PAGE_PADDING_BOTTOM}px)` }}
+                  style={{
+                    top: `calc(var(--scale-factor) * ${pageBottomOrigin}px + ${PAGE_PADDING_BOTTOM}px)`,
+                    width: `calc(var(--scale-factor) * ${pageMaxWidth}px + 2 * ${PAGE_PADDING_HORIZONTAL}px)`,
+                  }}
                 >
                   &nbsp;
                 </div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b512ab8..4e50db5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -346,19 +346,19 @@ importers:
         specifier: ^4.7.0
         version: 4.7.0(react-dom@18.2.0)(react@18.2.0)
       '@orca-fe/hooks':
-        specifier: ^1.12.0
+        specifier: ^1.11.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/painter':
-        specifier: ^1.4.55
+        specifier: ^1.4.53
         version: link:../painter
       '@orca-fe/pdfjs-dist-browserify':
         specifier: ^3.8.24
         version: 3.8.24
       '@orca-fe/pocket':
-        specifier: ^3.4.4
+        specifier: ^3.2.4
         version: link:../pocket
       '@orca-fe/simple-jss':
         specifier: ^0.0.3