OverlayText not showing in preview

Technical Support WebViewer
, ,
1

WebViewer Version:

Do you have an issue with a specific file(s)?
No
Can you reproduce using one of our samples or online demos?
No
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:
Hello, I am having an issue in webviewer where the preview for my redaction annotations doesn’t display the OverlayText when you hover over the redaction. What happens is that our application loads some results and these results by default have an overlayText fontSize of 0pt. I have added a code that updates that to 11pt. However, the preview is still not showing the OverlayText, but When I redact those annotations the overlay text appears.

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)

Please provide a link to a minimal sample where the issue is reproducible:

1 Like
3

Hi there,

What happens is that our application loads some results and these results by default have an overlayText fontSize of 0pt.

Are you using the redaction panel to search for these terms? Could you please share the code snippet of you loading these results and setting the overlay text to 11pts?

Are you able to reproduce this on the redaction demo page here:
https://docs.apryse.com/samples/web/samples/advanced/redaction/

I also suggest redrawing the annotation after setting the overlay text:
https://docs.apryse.com/api/web/Core.AnnotationManager.html#redrawAnnotation

Best regards,
Kevin Kim

1 Like
5

Hello Kim,
Thank you for your quick response. Here is the code. First our application, saves the redaction info in the customData using the “setStyleOnCustomData” function. This saves info like the overlayText, fontSize, …etc. Then we use an external tool to make text replacements. After the text replacement we reload the document again. The external tool seems to affect the OverlayText and its fontSize(The fontSize becomes 0pt), that is why we save them in the first step(because it changes the OverlayText and FontSize but does not change the custom data). Then we load this data back using the “loadStyleFromCustomData” function. The problem is that after the “loadStyleFromCustomData” the preview doesn’t show the OverlayText. I have also tried the redrawAnnotation but it still didn’t update the preview. Note that the overlay text appears if I actually applied the redaction. Here is the code below.

annotationManager.getAnnotationsList()
.filter(annotation => annotation instanceof instance.Core.Annotations.RedactionAnnotation)
.forEach(annotation => {setStyleOnCustomData(annotation, annotation);})
applyTextReplacements();
annotationManager.getAnnotationsList()
.filter(annotation => annotation instanceof instance.Core.Annotations.RedactionAnnotation)
.forEach(annotation => {
loadStyleFromCustomData(annotation, annotation);
annotationManager.redrawAnnotation(annotation)
})

        const setStyleOnCustomData = (sourceAnnotation: any, targetAnnotation: any) => {
            targetAnnotation.setCustomData('RedactionOverlayText', sourceAnnotation.OverlayText);
            targetAnnotation.setCustomData('RedactionFillColor', sourceAnnotation.FillColor);
            targetAnnotation.setCustomData('RedactionTextColor', sourceAnnotation.TextColor);
            targetAnnotation.setCustomData('RedactionStrokeColor', sourceAnnotation.StrokeColor);
            targetAnnotation.setCustomData('fontSize', sourceAnnotation.FontSize);
            targetAnnotation.setCustomData('RedactionOpacity', sourceAnnotation.Opacity);
            targetAnnotation.setCustomData('RedactionStrokeThickness', sourceAnnotation.StrokeThickness);
            targetAnnotation.setCustomData('RedactionTextAlign', sourceAnnotation.TextAlign);

}

 const loadStyleFromCustomData = (sourceAnnotation: any, targetAnnotation: any) => {
            const FillColorObject = JSON.parse(sourceAnnotation.getCustomData('RedactionFillColor'))
            const TextColorObject = JSON.parse(sourceAnnotation.getCustomData('RedactionTextColor'))
            const StrokeColorObject = JSON.parse(sourceAnnotation.getCustomData('RedactionStrokeColor'))
            // @ts-ignore
            targetAnnotation.OverlayText = sourceAnnotation.getCustomData('RedactionOverlayText')
            targetAnnotation.FillColor = convertRgbaToColor(FillColorObject)
            // @ts-ignore
            targetAnnotation.TextColor = convertRgbaToColor(TextColorObject)
            targetAnnotation.StrokeColor = convertRgbaToColor(StrokeColorObject)
            // @ts-ignore
            targetAnnotation.FontSize = sourceAnnotation.getCustomData('RedactionFontSize');
            targetAnnotation.Opacity = sourceAnnotation.getCustomData('RedactionOpacity');
            targetAnnotation.StrokeThickness = sourceAnnotation.getCustomData('RedactionStrokeThickness');
            // @ts-ignore
            targetAnnotation.TextAlign = sourceAnnotation.getCustomData('RedactionTextAlign');
            targetAnnotation.type = sourceAnnotation.getCustomData('trn-redaction-type')
        }
6

Hi there,

What is the FontSize data you are passing into

targetAnnotation.FontSize = sourceAnnotation.getCustomData('RedactionFontSize');

For example, I can manually set the font size via

redactionAnnotation.FontSize = '30pt'

Are there any errors in the console when performing the above operations?

Best regards,
Kevin Kim

7

Hello,

Yes, I also tried hardcoding the values like you have shown and now if I apply the redactionAnnotation, I can see the overlay text with the proper size. However, the preview still doesn’t show the overlay text.

8

Thank you for your response,

Could you please confirm if you are using the latest version of WebViewer? (currently 11.0)
Is there a minimal sample project you can share to reproduce the issue?

Best regards,
Kevin Kim

1 Like
9

Hello,

I am using webviewer 10.9.0

Kind Regards.
Faris

1 Like
10

Hello,

Actually we have upgraded to 11 and still seeing the issue

Kind Regards.
Faris

1 Like
11

Thank you for confirming the version,

It looks like there could be some logic error in the code provided:

annotationManager.getAnnotationsList()
    .filter(annotation => annotation instanceof instance.Core.Annotations.RedactionAnnotation)
    .forEach(annotation => { setStyleOnCustomData(annotation, annotation); })
applyTextReplacements();
annotationManager.getAnnotationsList()
    .filter(annotation => annotation instanceof instance.Core.Annotations.RedactionAnnotation)
    .forEach(annotation => {
        loadStyleFromCustomData(annotation, annotation);
        annotationManager.redrawAnnotation(annotation)
    })

the two ‘annotation’ variable passed onto setStyleOnCustomData & loadStyleFromCustomData, it looks like you would be using the same annotation to set/load the custom data. Is this confirmed working?

Is there a minimal sample you can send to reproduce the issue?

Best regards,
Kevin Kim

1 Like
12

Hello,

how can I setup a sample project for you? Please provide instructions

1 Like
13

Hi there,

You can use either our packaged download available here:
Download | Apryse Documentation
You can modify the viewing/viewing.js file and share that file instead of the entire project

Or use any of our framework sample projects such as our react sample project:

You can modify the src/app.js file and share that file instead of the entire project

Best regards,
Kevin Kim

1 Like