pengjunjie/ragflow
1
0
Fork 1
mirror of https://github.com/infiniflow/ragflow.git synced 2025-12-21 13:32:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
balibabu
2024-03-26 14:51:34 +08:00
committed by GitHub
parent 0dd5b58d03
commit 75f7c6da2f
6 changed files with 167 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,58 +49,67 @@ const Preview = ({ selectedChunkId }: IProps) => {
beforeLoad={<Skeleton active />}
workerSrc="/pdfjs-dist/pdf.worker.min.js"
>
{(pdfDocument) => (
<PdfHighlighter
pdfDocument={pdfDocument}
enableAreaSelection={(event) => event.altKey}
onScrollChange={resetHash}
scrollRef={(scrollTo) => {
ref.current = scrollTo;
}}
onSelectionFinished={() => null}
highlightTransform={(
highlight,
index,
setTip,
hideTip,
viewportToScaled,
screenshot,
isScrolledTo,
) => {
const isTextHighlight = !Boolean(
highlight.content && highlight.content.image,
);
{(pdfDocument) => {
pdfDocument.getPage(1).then((page) => {
const viewport = page.getViewport({ scale: 1 });
const width = viewport.width;
const height = viewport.height;
setWidthAndHeight(width, height);
});
const component = isTextHighlight ? (
<Highlight
isScrolledTo={isScrolledTo}
position={highlight.position}
comment={highlight.comment}
/>
) : (
<AreaHighlight
isScrolledTo={isScrolledTo}
highlight={highlight}
onChange={() => {}}
/>
);
return (
<PdfHighlighter
pdfDocument={pdfDocument}
enableAreaSelection={(event) => event.altKey}
onScrollChange={resetHash}
scrollRef={(scrollTo) => {
ref.current = scrollTo;
}}
onSelectionFinished={() => null}
highlightTransform={(
highlight,
index,
setTip,
hideTip,
viewportToScaled,
screenshot,
isScrolledTo,
) => {
const isTextHighlight = !Boolean(
highlight.content && highlight.content.image,
);
return (
<Popup
popupContent={<HighlightPopup {...highlight} />}
onMouseOver={(popupContent) =>
setTip(highlight, () => popupContent)
}
onMouseOut={hideTip}
key={index}
>
{component}
</Popup>
);
}}
highlights={state}
/>
)}
const component = isTextHighlight ? (
<Highlight
isScrolledTo={isScrolledTo}
position={highlight.position}
comment={highlight.comment}
/>
) : (
<AreaHighlight
isScrolledTo={isScrolledTo}
highlight={highlight}
onChange={() => {}}
/>
);
return (
<Popup
popupContent={<HighlightPopup {...highlight} />}
onMouseOver={(popupContent) =>
setTip(highlight, () => popupContent)
}
onMouseOut={hideTip}
key={index}
>
{component}
</Popup>
);
}}
highlights={state}
/>
);
}}
</PdfLoader>
</div>
);

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

@ -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 = () => {