Doing my own mousemove and mouseclick on annotations

[chitgoks]

Hi. i reached a dead end regarding this. I have a case scenario where i add a new canvas layer on the pdf.js page itself. But i also want to check if the mouse cursor is on top of an annotation.

This is my code on how to get annotations of a page

const pdfJsPage = await PDFViewerApplication.pdfDocument.getPage(PDFViewerApplication.pdfViewer.currentPageNumber);
const pdfJsAnnotations = await pdfJsPage.getAnnotations();
pdfJsAnnotations.forEach(annotation => {
  if (annotation.subtype === 'Link' &&isMouseInsidePdfRect(x, y, annotation.rect, pdfJsPage.getViewport({ 
     scale: PDFViewerApplication.pdfViewer.currentScale
  }).height)) {
    this.canvas.cursor = 'pointer';
  }
});

and this is my code to check if the mouse cursor is on top of the annotation. Now i am aware the pdf coordinate y space is the opposite, so i made a function that will convert it to the html canvas space plus the annotation.rect returns [x1,y1,x2,y2] right?

isMouseInsidePdfRect = (mouseX, mouseY, pdfRect, pageHeight) => {
    const [x1, y1, x2, y2] = pdfRect;
console.log('==',mouseX, mouseY);
console.log('=>',x1,y1,x2,y2);
console.log(pageHeight);
    // Adjust the y-coordinates by flipping them based on the page height
    const adjustedY1 = pageHeight - y1;
    const adjustedY2 = pageHeight - y2;

    // Now check if the mouse is inside the rectangle with the adjusted coordinates
    const minY = Math.min(adjustedY1, adjustedY2);
    const maxY = Math.max(adjustedY1, adjustedY2);

    return mouseX >= x1 && mouseX <= x2 && mouseY >= minY && mouseY <= maxY;
}

im not sure what is wrong. anyone got ideas?

[ruppo-912116]

@chitgoks I am using interactjs for handling click, drag and resize events for annotations.

        interact('.freeTextAnnotation')
            .resizable({
                edges: {
                    top: '.resize-top',
                    left: '.resize-left',
                    right: '.resize-right',
                    bottom: '.resize-bottom',
                },
                listeners: {move: handleResize.resizeInteractionListener},
                modifiers: [
                    // keep the edges inside the parent
                    interact.modifiers.restrictEdges({
                        outer: '.page'
                    }),
                    interact.modifiers.restrictSize({
                        min: {width: 20, height: 10},
                    }),
                ],
                inertia: true
            })
            .draggable({
                listeners: {move: handleDrag.dragMoveListener},
                modifiers: [
                    interact.modifiers.restrictRect({
                        restriction: '.page',
                        endOnly: true
                    })
                ]
            })

[chitgoks]

Hi. thanks man. I am using vanilla javascript. i do not understand this though but thank you still.