Manipulating image annotations

[ankur655]

I was trying to do two things to an image annotation that is programatically added :

1. adding an event handler on clicking the annotation:
   document.querySelector('div.stampEditor')?.addEventListener('click', (evt) => {console.log("clicked annotation")});

2. removing the "Add Alt text" and "remove" icons from the image annotation:
   document.querySelector('div.editToolbar').style.display = "none";

However both these don't seem to work - I spent hours trying to debug this but couldn't get anywhere. Maybe I am missing something very simple - so would appreciate if somebody could point out what's wrong.

[stephanrauh]

Did you check if document.querySelector(...) returns a result? If it doesn't, maybe there's a timing problem. Add the event listener and the inline style after a short timeout.

[stephanrauh]

I have to admit I kept the debugger open all the time. However, I don't believe you need a re-rendering. Quite the contrary, re-rendering replaces the HTML div representing the annotation with a new one, so I'd expect the click listener to be gone.

Maybe you have to play with the z-index to make it work.

BTW, AFAIK, you can get rid of the resizer with CSS.

[ankur655]

Sorry if I was not clear - but what I intended to say was some toggling (either: turning on the inspect tool OR doing a zoom) is needed to make both the click event handler and removing the bottom edit functionality work. The javascript doesn't seem to work as is without doing the toggling.

[stephanrauh]

On my machine, the event listener worked immediately, without having to do anything.

[ankur655]

at what point would the div.stampEditor exist? It seems it doesn't exist onAnnotationLayerRendered event handler for a small file like https://www.orimi.com/pdf-test.pdf . The annotation is created in the onPagesLoaded event handler for the first page. But I guess that still doesn't guarantee that it's already in the DOM tree before the annotatoinLayerRednered is called? On the other hand for a very long PDF with 100 pages, the onAnnotationLayerRendered event handler shows the div.stampEditor element exists. Is there another event handler that can help indicate that the annotation is already done?

Also once the annotation event handler is active, the image becomes draggable - is there a way to prevent this?

[ankur655]

I also tried creating the image annotation in onAnnotationLayerRendered and then waited for an AnnotationEditorEvent but that didn't seem to happen