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

[NiharikaSrinivasa]

Before you start - checklist

• I followed instructions in documentation written for my React-PDF version
• I have checked if this bug is not already reported
• I have checked if an issue is not listed in Known issues
• 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]

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,
}