x,y co-ordinate , height , width values of selected text is varying with the values from backend code

NiharikaSrinivasa commented 7 months ago

Before you start - checklist

[X] I followed instructions in documentation written for my React-PDF version
[X] I have checked if this bug is not already reported
[X] I have checked if an issue is not listed in Known issues
[X] If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

I am using onMouseUp event to select a item in pdf and capture (x,y) positions, height and width property of it. but (x,y) positions, , height and width property is varying a lot with my positions which i am getting from backend code (i am using pdf box to get the positions in backend)

Code :

const [selectedTexts, setSelectedTexts] = useState(""); const [selectedCoords, setSelectedCoords] = useState({ x: 0, y: 0 }); const [selectedData, setSelectedData] = useState({ x_axis: "0", y_axis: "0", width: "0", height: "0", text: null, pageNumber: "1", sequence: "0", });

here is my code of handleMouseUp event:

const handleMouseUp = (event) => { const selection = window.getSelection && window.getSelection(); if (selection && selection.rangeCount > 0) { const selectedText = selection.toString(); const range = selection.getRangeAt(0); const boundingRect = range.getBoundingClientRect(); const pageContainer = document.querySelector(".react-pdf__Page"); const containerRect = pageContainer.getBoundingClientRect(); const calculated_Y_Value = boundingRect.top - containerRect.top; const calculated_height = boundingRect.height / 2; setSelectedTexts(selectedText); setSelectedCoords({ x: boundingRect.left - containerRect.left, y: calculated_Y_Value - calculated_height, }); setSelectedData((prevData) => ({ ...prevData, x_axis: selectedCoords.x, y_axis: selectedCoords.y, width: boundingRect.width, height: boundingRect.height, text: selectedText, pageNumber: "1", sequence: "0", })); } };

  -----------------------

    <Document
  file={file}
  onLoadSuccess={({ numPages }) => setNumPages(numPages)}
>
  <Grid
    style={{
      display: "flex",
      justifyContent: "center",
    }}
  >
    <Page
      onLoadSuccess={(page) => onPageLoadSuccess(page)}
      scale={1}
      dontFlip={true}
      pageNumber={currentPage}
      onMouseUp={handleDoubleClick}
    />
  </Grid>
  <Grid>
    <Button
      color="primary"
      onClick={handlePreviousPage}
      text="Previous"
      isDisabled={currentPage === 1}
    />
    <span style={{ margin: "0 8px" }}>
      Page {currentPage} of {numPages}
    </span>

    <Button color="primary" onClick={handleNextPage} text="Next" />
  </Grid>
</Document>

Steps to reproduce

render a pdf and select a text and check the x and y value position in setSelectedData state

Expected behavior

(x, y) positions should start from top left corner of page and give (x, y) positions of selected text (x, y)

Actual behavior

(x, y) positions are not matching with backends position values which is starting from top left corner (pdf box)

Additional information

I am using this pdf file and this is the backend (x,y) values,, height and width property for page 1 elements File1.pdf

{TEST= [(X=158.1199951171875,Y=220.33001708984375) height=21.964000701904297 width=73.91000366210938], RUN= [(X=242.593994140625,Y=220.33001708984375) height=21.964000701904297 width=69.69198608398438], REPORT= [(X=322.8499755859375,Y=220.33001708984375) height=21.964000701904297 width=114.0379638671875], GENERATED= [(X=158.3699951171875,Y=254.83001708984375) height=7.513999938964844 width=61.42497253417969], ON= [(X=223.40896606445312,Y=254.83001708984375) height=7.513999938964844 width=17.341995239257812], := [(X=244.36495971679688,Y=254.83001708984375) height=7.513999938964844 width=3.6139984130859375], 03= [(X=251.59295654296875,Y=254.83001708984375) height=7.513999938964844 width=14.45599365234375], OCT= [(X=269.6629638671875,Y=254.83001708984375) height=7.513999938964844 width=20.22802734375], 2023= [(X=293.5050048828125,Y=254.83001708984375) height=7.513999938964844 width=28.9119873046875], 15:08:51= [(X=326.031005859375,Y=254.83001708984375) height=7.513999938964844 width=50.59600830078125], GENERATED1= [(X=161.0,Y=274.33001708984375) height=7.513999938964844 width=61.42497253417969], BY= [(X=226.03897094726562,Y=274.33001708984375) height=7.513999938964844 width=15.171005249023438], :1= [(X=244.823974609375,Y=274.33001708984375) height=7.513999938964844 width=3.6139984130859375], RACHANA= [(X=252.05197143554688,Y=274.33001708984375) height=7.513999938964844 width=46.968994140625], P= [(X=306.2489929199219,Y=274.33001708984375) height=7.513999938964844 width=7.227996826171875], }

Environment

Browser (if applicable): Chrome
React-PDF version: "react-pdf": "^5.7.2"
React version: "react": "^17.0.2",
Webpack version (if applicable): v4

NiharikaSrinivasa commented 7 months ago

values from front end for page 1 : { "x_axis": 158.11458587646484, "y_axis": 166.32292938232422, "width": 80.25, "height": 42.666656494140625, "text": "Test ", "pageNumber": 1, } { "x_axis": 158.11458587646484, "y_axis": 166.32292938232422, "width": 69.72915649414062, "height": 42.666656494140625, "text": "Run", "pageNumber": 1,

} { "x_axis": 238.35417938232422, "y_axis": 166.32292938232422, "width": 114.0625, "height": 42.666656494140625, "text": "Report", "pageNumber": 1, } { "x_axis": 318.6250228881836, "y_axis": 166.32292938232422, "width": 61.4375, "height": 14.666656494140625, "text": "Generated", "pageNumber": 1,

} { "x_axis": 158.36458587646484, "y_axis": 235.82292938232422, "width": 17.354171752929688, "height": 14.666656494140625, "text": "On", "pageNumber": 1, }{ "x_axis": 251.59295654296875, "y_axis": 254.83001708984375, "width": 14.46875, "height": 14.666656494140625, "text": "03", "pageNumber": 1, }{ "x_axis": 269.65625762939453, "y_axis": 235.82292938232422, "width": 23.84375, "height": 14.666656494140625, "text": "Oct ", "pageNumber": 1, } { "x_axis": 293.48958587646484, "y_axis": 235.82292938232422, "width": 32.54168701171875, "height": 14.666656494140625, "text": "2023 ", "pageNumber": 1, } { "x_axis": 326.031005859375, "y_axis": 254.83001708984375, "width": 50.614593505859375, "height": 14.666656494140625, "text": "15:08:51", "pageNumber": 1, } { "x_axis": 326.02083587646484, "y_axis": 235.82292938232422, "width": 61.4375, "height": 14.666656494140625, "text": "Generated", "pageNumber": 1, }{ "x_axis": 226.04167938232422, "y_axis": 255.32292938232422, "width": 18.791656494140625, "height": 14.666656494140625, "text": "By ", "pageNumber": 1, } { "x_axis": 252.04167938232422, "y_axis": 255.32292938232422, "width": 50.604156494140625, "height": 14.666656494140625, "text": "rachana ", "pageNumber": 1, }{ "x_axis": 158.11458587646484, "y_axis": 142.82292938232422, "width": 7.239593505859375, "height": 14.666656494140625, "text": "p", "pageNumber": 1, }

github-actions[bot] commented 4 months ago

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

github-actions[bot] commented 3 months ago

This issue was closed because it has been stalled for 14 days with no activity.

wojtekmaj commented 3 months ago

Hi, these values come straight from PDF.js and I think they are correct, but they need to be adjusted for scale if you're using any other scale than default. You also must remember that these top/left values are relative to top-left corner of the PDF, not your window.

wojtekmaj / react-pdf