WebViewer Version: 10.9.0 and 11.4.0
Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? Yes
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? No
Is your issue related to annotations? Yes
Please give a brief summary of your issue:
(Think of this as an email subject)
No annotations on mouse move event.
Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
I’m trying to place some text highlight annotations and access them as I hover the mouse pointer over them. I can reproduce this using your webviewer-react sample. Here’s the change to src/App.tsx.
import React, { useRef, useEffect } from "react";
import WebViewer, { Core } from "@pdftron/webviewer";
import "./App.css";
const App = () => {
const viewer = useRef(null);
useEffect(() => {
WebViewer(
{
path: "/lib/webviewer",
initialDoc: "/files/WebviewerDemoDoc.pdf",
licenseKey: "your_license_key", // sign up to get a free trial key at https://dev.apryse.com
},
viewer.current!,
).then((instance) => {
const { documentViewer, annotationManager, Annotations } = instance.Core;
documentViewer.addEventListener("documentLoaded", () => {
const doc = instance.Core.documentViewer.getDocument();
doc.getTextPosition(1, 51, 68).then((quads) => {
const annot = new Annotations.TextHighlightAnnotation();
annot.setPageNumber(1);
annot.IsHoverable = true;
annot.Listable = true;
annot.Quads.push(...(quads as Core.Math.Quad[]));
annotationManager.addAnnotation(annot);
annotationManager.redrawAnnotation(annot);
});
});
const onMouseMove = (evt: MouseEvent) => {
// This always returns `null`
const annot = annotationManager.getAnnotationByMouseEvent(evt);
console.log("hovering annotation", annot);
};
documentViewer.addEventListener("mouseMove", onMouseMove);
});
}, []);
return (
<div className="App">
<div className="header">React sample</div>
<div className="webviewer" ref={viewer}></div>
</div>
);
};
export default App;
This highlights the words “Important Factors” on the first page. When I hover the mouse over them, annotationManager.getAnnotationByMouseEvent keeps returning null. So in the console, I only see got annotation null logged over and over as I move the mouse over these annotations.
I’ve been looking through the other available properties but nothing jumps out at me so far. Any idea what I’m missing?
Please provide a link to a minimal sample where the issue is reproducible:
See above.
