Hello community,
we are developing a custom UI for the WebViewer. At the moment I’m trying to add a button to the UI for adding a checkmark to the document.
Wihle initialization we use the following code to add the checkmark to standard stamps:
const stampTool: Core.Tools.RubberStampCreateTool = <any>(docViewer.getTool("AnnotationCreateRubberStamp"));
stampTool.setStandardStamps([Defaults.ANNOTATION_PNG_CHECKMARK]);
stampTool.on("annotationAdded",(annotation: Core.Annotations.Annotation) => {
alert("added");
});
The code at the button to add the checkmark is the following:
const toolName = "AnnotationCreateRubberStamp";
docViewer!.setToolMode(<any>toolName);
const stampTool: Core.Tools.RubberStampCreateTool = <any>(docViewer!.getTool(toolName));
const defaultStamps = await stampTool.getStandardStampAnnotations();
const approvedStamp = defaultStamps[0];
await stampTool.setRubberStamp(approvedStamp, "");
stampTool.showPreview();
If the user executes the above code the checkmark appears at the upper left corner of the document viewer and follows the mouse cursor. If the user clicks with the left button at the document nothing happens.
I tryed to add the following lines of code after “showPreview”:
setTimeout(async () => {
await stampTool.addStamp();
}, 2000);
I execute the code move the mouse to the document and after 2 sec. I get the following error at the debug console:
webviewer-core.min.js?v=1.0.0:2703 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'pageNumber')
at ea.<anonymous> (webviewer-core.min.js?v=1.0.0:2703:141)
at a (webviewer-core.min.js?v=1.0.0:56:89)
at Object.next (webviewer-core.min.js?v=1.0.0:54:398)
at webviewer-core.min.js?v=1.0.0:54:330
at new Promise (<anonymous>)
at fa (webviewer-core.min.js?v=1.0.0:54:111)
at ea.kS (webviewer-core.min.js?v=1.0.0:2702:59)
WebViewer Version: 8.10.0
What I’m doing wrong?
Best regards
Manfred
Hello Manfred,
Thank you for contacting us about WebViewer and for the detailed description of your issue. I think the issue is with the
const toolName = "AnnotationCreateRubberStamp";
docViewer!.setToolMode(<any>toolName);
part of your code. The setToolMode API actually take in a “tool object” instead of a string. So you’ll have to replace it with something like the following instead
const rubberStampTool = instance.docViewer.getToolModeMap()[instance.Tools.ToolNames.RUBBER_STAMP];
instance.docViewer.setToolMode(rubberStampTool)
Please let me know if the above works for you
Best Regards,
Andrew Yip
Software Developer
PDFTron Systems, Inc.
www.pdftron.com
Hello Andrew,
thanks for your reply. With your help the result is a bit better. My code looks like this:
const toolName = "AnnotationCreateRubberStamp"; //this.core.Tools.ToolNames.RUBBER_STAMP;
const stampTool: Core.Tools.RubberStampCreateTool = <any>this.documentViewer.getTool(toolName);
this.documentViewer.setToolMode(stampTool);
const defaultStamps = await stampTool.getStandardStampAnnotations();
const approvedStamp = defaultStamps[0]
await stampTool.setRubberStamp(approvedStamp, "");
stampTool.showPreview();
The const this.core.Tools.ToolNames.RUBBER_STAMP does not exist in my version so I used the string “AnnotationCreateRubberStamp”. Now the situation is:
If I execute the above code, the preview (a checkmark) appears at the upper left corner of the document. If I move the mouse inside the document container the preview immediatelly jumps under the mouse. If I click at the document the annotation is added to the document. The preview is still there but if I click again on the document nothing happens.
My questions:
- Why appears the preview at the upper left corner and how can I hide it until the mouse moves into the document conatiner?
- Why I can’t add the annotation twice? What I have to do to resolve multiple insert of the image?
Best regards
Manfred
Hello Manfred,
For your questions,
Why appears the preview at the upper left corner and how can I hide it until the mouse moves into the document conatiner?
I don’t seem to be able to reproduce this. Normally this is the default behaviour,
Are you still using the “addStamp” code you mention previously, your code could be adding an annotation onto the page. Do you see the upper left icon in your annotation list?
Why I can’t add the annotation twice? What I have to do to resolve multiple insert of the image?
The UI code will automatically switch back to the default tool when a new stamp is added. To prevent this you can do something like the following
// make sure the "stampTool" is the "rubberStampTool" and not another tool
stampTool.on("annotationAdded", () => {
// setTimeout might not be needed, but could be a safe thing to add
setTimeout(() => {
// change the tool back to rubber stamp tool
instance.docViewer.setToolMode(instance.docViewer.getToolModeMap()[instance.Tools.ToolNames.RUBBER_STAMP]);
}, 100);
});
Best Regards,
Andrew Yip
Software Developer
PDFTron Systems, Inc.
www.pdftron.com