fix: by obtaining the width and height of the pdf and passing it to b… (#151)

* fix: by obtaining the width and height of the pdf and passing it to boundingRect, the problem of inaccurate positioning of file highlighting is fixed

* feat: remove actualPositions from buildChunkHighlights

web/src/components/pdf-previewer/index.tsx

@@ -35,7 +35,7 @@ const HighlightPopup = ({
 
 const DocumentPreviewer = ({ chunk, documentId, visible }: IProps) => {
   const url = useGetDocumentUrl(documentId);
-  const state = useGetChunkHighlights(chunk);
+  const { highlights: state, setWidthAndHeight } = useGetChunkHighlights(chunk);
   const ref = useRef<(highlight: IHighlight) => void>(() => {});
   const [loaded, setLoaded] = useState(false);
 
@@ -59,7 +59,15 @@ const DocumentPreviewer = ({ chunk, documentId, visible }: IProps) => {
         beforeLoad={<Skeleton active />}
         workerSrc="/pdfjs-dist/pdf.worker.min.js"
       >
-        {(pdfDocument) => (
+        {(pdfDocument) => {
+          pdfDocument.getPage(1).then((page) => {
+            const viewport = page.getViewport({ scale: 1 });
+            const width = viewport.width;
+            const height = viewport.height;
+            setWidthAndHeight(width, height);
+          });
+
+          return (
             <PdfHighlighter
               pdfDocument={pdfDocument}
               enableAreaSelection={(event) => event.altKey}
@@ -111,7 +119,8 @@ const DocumentPreviewer = ({ chunk, documentId, visible }: IProps) => {
               }}
               highlights={state}
             />
-        )}
+          );
+        }}
       </PdfLoader>
     </div>
   );

web/src/hooks/documentHooks.ts

@@ -2,7 +2,7 @@ import { IChunk, IKnowledgeFile } from '@/interfaces/database/knowledge';
 import { IChangeParserConfigRequestBody } from '@/interfaces/request/document';
 import { api_host } from '@/utils/api';
 import { buildChunkHighlights } from '@/utils/documentUtils';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { IHighlight } from 'react-pdf-highlighter';
 import { useDispatch, useSelector } from 'umi';
 import { useGetKnowledgeSearchParams } from './routeHook';
@@ -15,12 +15,23 @@ export const useGetDocumentUrl = (documentId: string) => {
   return url;
 };
 
-export const useGetChunkHighlights = (selectedChunk: IChunk): IHighlight[] => {
-  const highlights: IHighlight[] = useMemo(() => {
-    return buildChunkHighlights(selectedChunk);
-  }, [selectedChunk]);
+export const useGetChunkHighlights = (selectedChunk: IChunk) => {
+  const [size, setSize] = useState({ width: 849, height: 1200 });
 
-  return highlights;
+  const highlights: IHighlight[] = useMemo(() => {
+    return buildChunkHighlights(selectedChunk, size);
+  }, [selectedChunk, size]);
+
+  const setWidthAndHeight = (width: number, height: number) => {
+    setSize((pre) => {
+      if (pre.height !== height || pre.width !== width) {
+        return { height, width };
+      }
+      return pre;
+    });
+  };
+
+  return { highlights, setWidthAndHeight };
 };
 
 export const useFetchDocumentList = () => {

web/src/less/mixins.less

@@ -9,11 +9,11 @@
 
   caption {
     color: @blurBackground;
-    font-size: 20px;
-    height: 50px;
-    line-height: 50px;
+    font-size: 14px;
+    height: 20px;
+    line-height: 20px;
     font-weight: 600;
-    margin-bottom: 10px;
+    margin-bottom: 6px;
   }
 
   th {

web/src/pages/add-knowledge/components/knowledge-chunk/components/document-preview/preview.tsx

@@ -30,7 +30,8 @@ const HighlightPopup = ({
 // TODO: merge with DocumentPreviewer
 const Preview = ({ selectedChunkId }: IProps) => {
   const url = useGetDocumentUrl();
-  const state = useGetChunkHighlights(selectedChunkId);
+  const { highlights: state, setWidthAndHeight } =
+    useGetChunkHighlights(selectedChunkId);
   const ref = useRef<(highlight: IHighlight) => void>(() => {});
 
   const resetHash = () => {};
@@ -48,7 +49,15 @@ const Preview = ({ selectedChunkId }: IProps) => {
         beforeLoad={<Skeleton active />}
         workerSrc="/pdfjs-dist/pdf.worker.min.js"
       >
-        {(pdfDocument) => (
+        {(pdfDocument) => {
+          pdfDocument.getPage(1).then((page) => {
+            const viewport = page.getViewport({ scale: 1 });
+            const width = viewport.width;
+            const height = viewport.height;
+            setWidthAndHeight(width, height);
+          });
+
+          return (
             <PdfHighlighter
               pdfDocument={pdfDocument}
               enableAreaSelection={(event) => event.altKey}
@@ -99,7 +108,8 @@ const Preview = ({ selectedChunkId }: IProps) => {
               }}
               highlights={state}
             />
-        )}
+          );
+        }}
       </PdfLoader>
     </div>
   );

web/src/pages/add-knowledge/components/knowledge-chunk/hooks.ts

@@ -36,16 +36,24 @@ export const useGetSelectedChunk = (selectedChunkId: string) => {
   );
 };
 
-export const useGetChunkHighlights = (
-  selectedChunkId: string,
-): IHighlight[] => {
+export const useGetChunkHighlights = (selectedChunkId: string) => {
+  const [size, setSize] = useState({ width: 849, height: 1200 });
   const selectedChunk: IChunk = useGetSelectedChunk(selectedChunkId);
 
   const highlights: IHighlight[] = useMemo(() => {
-    return buildChunkHighlights(selectedChunk);
-  }, [selectedChunk]);
+    return buildChunkHighlights(selectedChunk, size);
+  }, [selectedChunk, size]);
 
-  return highlights;
+  const setWidthAndHeight = (width: number, height: number) => {
+    setSize((pre) => {
+      if (pre.height !== height || pre.width !== width) {
+        return { height, width };
+      }
+      return pre;
+    });
+  };
+
+  return { highlights, setWidthAndHeight };
 };
 
 export const useSelectChunkListLoading = () => {

web/src/utils/documentUtils.ts

@@ -2,20 +2,20 @@ import { IChunk } from '@/interfaces/database/knowledge';
 import { UploadFile } from 'antd';
 import { v4 as uuid } from 'uuid';
 
-export const buildChunkHighlights = (selectedChunk: IChunk) => {
+export const buildChunkHighlights = (
+  selectedChunk: IChunk,
+  size: { width: number; height: number },
+) => {
   return Array.isArray(selectedChunk?.positions) &&
     selectedChunk.positions.every((x) => Array.isArray(x))
     ? selectedChunk?.positions?.map((x) => {
-        const actualPositions = x.map((y, index) =>
-          index !== 0 ? y / 0.7 : y,
-        );
         const boundingRect = {
-          width: 849,
-          height: 1200,
-          x1: actualPositions[1],
-          x2: actualPositions[2],
-          y1: actualPositions[3],
-          y2: actualPositions[4],
+          width: size.width,
+          height: size.height,
+          x1: x[1],
+          x2: x[2],
+          y1: x[3],
+          y2: x[4],
         };
         return {
           id: uuid(),