Ink Annotation Reapply Consistency

[AeroG81]

Problem:
Facing issue with Ink Annotation not reapplied to the PDF after stored into Storage (DB, LocalStorage) etc and loaded back.
#2355 (comment)
Based on the comment on this issue, may I ask if this has been fixed as of version 25.5.1 ? or issue still persist in this version?

Thanks in advance.

[stephanrauh]

I'm not sure. Basically, I've fixed the feature, but the ink editor is behaving strangely. I failed to create an ink editor demo. Exporting and importing ink editor annotations should work - but I'm not even sure about that.

[AeroG81]

Hi @stephanrauh, I've tried with manually importing annotations per page, but it seems like annotations such as Text, Highlight works perfectly, just that the Ink annotations are not showing up for some reason. I am using something similar to following concept

const annotations = this.ngxPdfViewerService.getSerializedAnnotations();
this.storageService.setItem(storageKey, annotations);

const annotationsByPage: Map<number, EditorAnnotation[]> = this.groupAnnotationsByPage(storedAnnotations);
this.annotationGroupByPage = annotationsByPage;

// On each page when click import annotations
this.currentPageAnnotations = this.annotationGroupByPage.get(this.ngxPdfViewerService.getCurrentPage()) || [];
this.currentPageAnnotations.forEach((annotation) => {
   console.log('RESTORING ANNOTATIONS', annotation);
   this.ngxPdfViewerService.addEditorAnnotation(annotation);
});

Not quite sure what's the exact issue with Ink Annotation, but I noticed there's some error with it when comes to Ink Annotation reimport. Maybe this might gives some idea on the error.

Edited:
After some debugging, it seems like the structure is a bit off?
It's trying to access r[e] which is an object, but trying to .map an object which leads to the error.

Edited v2:
After trying to manually convert the paths lines and points to Array, the InkAnnotation works now.
Not sure why the exported format is not aligned with it's js function logic, but changing it to Array from Object seems to work for me. I will manually add in a new logic to transform for InkAnnotation as a temporary solution.

[stephanrauh]

@AeroG81 It's some time ago, but I faintly remember I've run into the same problem as you did - only I didn't try using an array. That's really strange. Basically you say that the ink editor uses a different format for exporting than for importing. Is that correct?

I'm going to open a new ticket. I was very frustrated by being unable to re-implement the ink editor import feature. Now that I know it can be done, let's give it another try!

[stephanrauh]

As a side remark: debugging gets a lot easier if you set the attribute [minifiedJSLibraries]="false".

[AeroG81]

@stephanrauh Thanks for the tips. After some more debugging, I can confirm it's due to the exported format difference, I've attached the sample data as followed, which the transformed data is able to be reimport without issue.

Here's my sample code with how I transform the data, hope it helps.

  private transformAnnotations(annotations: EditorAnnotation[]): EditorAnnotation[] {
    return annotations.map((annotation) => {
      if (annotation.annotationType === 15) {
        console.log('Before Transforming annotations :  (INK) ', JSON.parse(JSON.stringify(annotation)));
        annotation.paths.lines = annotation.paths.lines.map((line) =>
          Object.values(line as object).map((value: number) => value),
        );
        annotation.paths.points = annotation.paths.points.map((point) =>
          Object.values(point as object).map((value: number) => value),
        );
        console.log('Transformed annotation : (INK) ', JSON.parse(JSON.stringify(annotation)));
      }
      return annotation;
    });
  }

Cheers for all the efforts on this library, thanks.