From d0bb8038abf9d1090c764ad3f31dc3dcce06fc76 Mon Sep 17 00:00:00 2001 From: sealday Date: Wed, 15 May 2024 20:24:06 +0800 Subject: [PATCH] feat: support pdf zoom in mobile (#990) Reviewed-on: https://git.daoyoucloud.com/daoyoucloud/tachybase/pulls/990 --- .../plugins/@hera/plugin-core/package.json | 1 + .../src/client/components/PDFViewer.tsx | 67 ++++++++++++------- .../@hera/plugin-core/src/client/index.tsx | 2 +- .../schema-components/blocks/PDFViewer.tsx | 12 +++- pnpm-lock.yaml | 14 ++++ 5 files changed, 71 insertions(+), 25 deletions(-) diff --git a/packages/plugins/@hera/plugin-core/package.json b/packages/plugins/@hera/plugin-core/package.json index 5a48d9fd3..d770e2fd2 100644 --- a/packages/plugins/@hera/plugin-core/package.json +++ b/packages/plugins/@hera/plugin-core/package.json @@ -36,6 +36,7 @@ "react-pdf": "^7.5.1", "react-router-dom": "^6.11.2", "react-transition-group": "^4.4.5", + "react-zoom-pan-pinch": "^3.4.4", "redis": "^4.6.11", "signature_pad": "4.1.7", "throttle-debounce": "^5.0.0", diff --git a/packages/plugins/@hera/plugin-core/src/client/components/PDFViewer.tsx b/packages/plugins/@hera/plugin-core/src/client/components/PDFViewer.tsx index 6346f5e8e..99bd43bbe 100644 --- a/packages/plugins/@hera/plugin-core/src/client/components/PDFViewer.tsx +++ b/packages/plugins/@hera/plugin-core/src/client/components/PDFViewer.tsx @@ -1,13 +1,14 @@ import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react'; -import { Spin } from 'antd'; +import { Spin, Tag } from 'antd'; import { LoadingOutlined } from '@ant-design/icons'; import { Document, Page, pdfjs } from 'react-pdf'; import { saveAs } from 'file-saver'; import 'react-pdf/dist/Page/AnnotationLayer.css'; import 'react-pdf/dist/Page/TextLayer.css'; import { uid } from '@tachybase/schema'; -import { useRequest } from '@tachybase/client'; +import { css, useRequest } from '@tachybase/client'; import { useTranslation } from '../locale'; +import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch'; const options = { cMapUrl: '/cmaps/', @@ -79,28 +80,48 @@ export const PDFViewer = forwardRef((props, ref) = return ( - ( - -
- - )} - onLoadSuccess={async (doc) => { - setNumPages(doc.numPages); - }} - noData={
} - error={
{t('error')}
} + - {Array.from(new Array(numPages), (el, index) => ( - -

- {index + 1}/{numPages}页 -

- - ))} - + + ( + +
+ + )} + onLoadSuccess={async (doc) => { + setNumPages(doc.numPages); + }} + noData={
} + error={
{t('error')}
} + > + {Array.from(new Array(numPages), (el, index) => ( + +
+ + 第 {index + 1}/{numPages} 页 + +
+ + ))} + + + ); }); diff --git a/packages/plugins/@hera/plugin-core/src/client/index.tsx b/packages/plugins/@hera/plugin-core/src/client/index.tsx index 90c4ebd14..4643cf456 100644 --- a/packages/plugins/@hera/plugin-core/src/client/index.tsx +++ b/packages/plugins/@hera/plugin-core/src/client/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Plugin, EditTitleField } from '@tachybase/client'; +import { Plugin, EditTitleField, CollectionProvider, CollectionRecordProvider } from '@tachybase/client'; import { useFieldSchema } from '@tachybase/schema'; import { isValid } from '@tachybase/schema'; import { autorun } from '@tachybase/schema'; diff --git a/packages/plugins/@hera/plugin-core/src/client/schema-components/blocks/PDFViewer.tsx b/packages/plugins/@hera/plugin-core/src/client/schema-components/blocks/PDFViewer.tsx index 62fc7b323..767b1be30 100644 --- a/packages/plugins/@hera/plugin-core/src/client/schema-components/blocks/PDFViewer.tsx +++ b/packages/plugins/@hera/plugin-core/src/client/schema-components/blocks/PDFViewer.tsx @@ -3,6 +3,7 @@ import { PDFViewer } from '../../components/PDFViewer'; import { Space } from 'antd'; import { css } from '@tachybase/client'; import { usePDFViewerRef } from '../../schema-initializer/blocks/PDFVIewerBlockInitializer'; +import { debounce } from 'lodash'; export const InternalPDFViewer = (props) => { const { usePdfPath: useMaybePdfPath } = props; @@ -10,10 +11,19 @@ export const InternalPDFViewer = (props) => { const [width, setWidth] = useState(0); const [, setHeight] = useState(0); useEffect(() => { - if (containerRef.current) { + const updateUI = debounce(() => { setWidth(containerRef.current.offsetWidth); setHeight(containerRef.current.offsetHeight); + }, 200); + const observer = new ResizeObserver(() => { + updateUI(); + }); + if (containerRef.current) { + observer.observe(containerRef.current); } + return () => { + observer.disconnect(); + }; }, [containerRef]); const ref = usePDFViewerRef(); const usePdfPath = useMaybePdfPath ?? (() => ''); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b968e727c..250778e09 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1610,6 +1610,9 @@ importers: react-transition-group: specifier: ^4.4.5 version: 4.4.5(react-dom@18.2.0)(react@18.2.0) + react-zoom-pan-pinch: + specifier: ^3.4.4 + version: 3.4.4(react-dom@18.2.0)(react@18.2.0) redis: specifier: ^4.6.11 version: 4.6.13 @@ -26700,6 +26703,17 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: true + /react-zoom-pan-pinch@3.4.4(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-lGTu7D9lQpYEQ6sH+NSlLA7gicgKRW8j+D/4HO1AbSV2POvKRFzdWQ8eI0r3xmOsl4dYQcY+teV6MhULeg1xBw==} + engines: {node: '>=8', npm: '>=5'} + peerDependencies: + react: '*' + react-dom: '*' + dependencies: + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: true + /react@18.1.0: resolution: {integrity: sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==} engines: {node: '>=0.10.0'}