stephanrauh / ngx-extended-pdf-viewer

A full-blown PDF viewer for Angular 16, 17, and beyond
https://pdfviewer.net
Apache License 2.0
449 stars 167 forks source link

Annotation are not loading for highlight #2345

Closed karankapadni closed 10 hours ago

karankapadni commented 1 month ago

I need your help! Need your help in loading the annotations which are saved before.

Check this first The pdf Viewer Service has the function to load the annotations addEditorAnnotation()

Describe the bug

  1. Go to Pdf Viewer
  2. Add the highlight using the function addEditorAnnotation(highlight)
  3. highlight is of type HighlightEditorAnnotation
  4. On click of the button once function is fired nothing happens no highlights are loaded

Version info

stephanrauh commented 1 month ago

To be honest, I haven't tried adding highlights programmatically yet. I'm sure it's possible, but that's all I know. My best guess is you've forgotten an attribute, used wrong values, or something like this. Adding annotations programmatically is a low-level API that may change at any point in time, so you're in danger zone if you're using it.

The best way to figure out the correct JSON object is reverse engineering. Add a highlight, export it to a JSON object, and play around with it. Sometimes pdf.js is very capricious - for example, if the coordinate are slightly off, it may refuse to render anything at all.

That said, how did you define your highlight object? Can you send me a reproducer? I can't promise to solve the issue, but at least I can promise to have a look at it.

karankapadni commented 1 month ago

@stephanrauh Thank you so much, I appreciate your acknowledgement. below is some of the information that might help, I'm calling function in NgxExtendedPdfViewerService

addEditorAnnotation(serializedAnnotation: string | EditorAnnotation): void;

where type EditorAnnotationis derived from

export type HighlightEditorAnnotation = {
    annotationType: 9;
    color: Array<number>;
    rect: Array<number>;
    pageIndex: number;
    rotation: 0 | 90 | 180 | 270;
};
export type EditorAnnotation = InkEditorAnnotation | FreeTextEditorAnnotation | StampEditorAnnotation | HighlightEditorAnnotation;

and this is the object we are passing to be rendered

{
      "annotationType": 9,
      "color": [
          255,
          203,
          230
      ],
      "pageIndex": 0,
      "rect": [
          56.902778125604456,
          621.2189030686666,
          130.6876860527253,
          637.6820141616604
      ],
      "rotation": 0,
  }

I have got this from export function we have, which is getSerializedAnnotations(), I would appreciate if you let me know whether there is work around or the params passed are wrong.

DayibBaba commented 3 weeks ago

I am having the same exact problem. Do you also get warning messages such as Warning: paste: "t is not iterable"?

karankapadni commented 3 weeks ago

It is giving me something like Warning:'paste: "boxes is not iterable"'

stephanrauh commented 3 weeks ago

The difference between "t is not iterable" and "boxes is not iterable" may be that one of you is using the minified JavaScript files and the other is not. For debugging or reporting errors, please use the non-minified files. That makes everything a lot easier. The attribute I'm referring to is [minifiedJSLibraries]="false".

stephanrauh commented 3 weeks ago

@DayibBaba Your new ticket (#2355) indicates you've managed to solve this issue. Do you have new insight you can share with us?

DayibBaba commented 3 weeks ago

@DayibBaba Your new ticket (#2355) indicates you've managed to solve this issue. Do you have new insight you can share with us?

The images in ticket #2355 showcase a little trick that uses a different annotation method to mimic a highlight. Its essentially a drawing with adjusted opacity.

stephanrauh commented 3 weeks ago

Oh, ok. Yeah, I already wondered about the squiggly highlight. :)

stephanrauh commented 11 hours ago

I've finally managed to have a look at your issue. I'm afraid I've got bad news. You can't add highlights programmatically because the API I was using simply doesn't work. This, in turn, is because you can't copy and paste highlights, so the programmers didn't care about that and didn't implement the paste API properly. The JSON object you get by exporting the highlight is pretty much useless.

In the long run, I'm not ready to accept that, but in the short term, I'm not able to provide a solution. The only thing I can currently do is documenting that adding highlights is not possible.

stephanrauh commented 10 hours ago

I've reluctantly published that highlights aren't supported yet. Just out of curiosity: would you pay money for this feature? I'm a consultant, so paying me for programming is always an option, even though this project is strictly non-commercial.