Stamp annotation attach to cursor

Technical Support WebViewer
,
1

WebViewer Version: 8.10.0

Is your issue related to annotations? yes

Please give a brief summary of your issue: trying to attach custom stamp annotations to the cursor position

Please describe your issue and provide steps to reproduce it:
Hi I am looking for an example in the documentation that shows how to attach custom created stamps to the cursor in WebViewer, so that the client can drop them wherever they want instead of having them appear in a fixed position. I have a code sample that works with a fixed position approach, but I want to modify it to work with the cursor. Can you provide an example or guidance on how to achieve this?

function addDynamicStampToDocument(stampData) {
const { Annotations, annotManager, docViewer } = instance;
const stampAnnot = new Annotations.StampAnnotation();
const url = convertXmlToUrlBase64(stampData.svgXml);

        if (stampData) {
            stampAnnot.PageNumber = docViewer.getCurrentPage();
            stampAnnot.X = 100;
            stampAnnot.Y = 250;
            stampAnnot.Width = stampData.width;

            stampAnnot.ImageData = url;
            stampAnnot.Height = stampData.height;

            stampAnnot.Author = annotManager.getCurrentUser();
            annotManager.addAnnotation(stampAnnot);
            annotManager.redrawAnnotation(stampAnnot);
        }
    }
2

Hi, jborroto
Could you try

if (stampData) {
            stampAnnot.PageNumber = docViewer.getCurrentPage();
            stampAnnot.Width = stampData.width;

            stampAnnot.ImageData = url;
            stampAnnot.Height = stampData.height;

            stampAnnot.Author = annotManager.getCurrentUser();
            await stampTool.setRubberStamp(stampAnnot);
            stampTool.showPreview();  
}

Here is more information you could check to set custom stamp annotation. Apryse Documentation | Documentation

Please let me know it does not work for you

Best,
Jack

3

Here is how you get stampTool:

const stampTool = docViewer.getTool('AnnotationCreateRubberStamp')
4

Thanks for the corrections to my code the annotations now are attaching to the cursor instead of been set on a fix position and they move with the cursor, I had some problems after that to make it drop the stamp on click but I finally solve it. This is a simplify function after removing all the extras so if someone in the future can benefit from it

async function addCustomStampToDocument(base64Url, width, height) { 
            const { Annotations, annotManager, docViewer } = instance;
            const stampTool = docViewer.getTool('AnnotationCreateRubberStamp');

            // Create the stamp annotation
            const stampAnnot = new Annotations.StampAnnotation();
            stampAnnot.ImageData = base64Url;
            stampAnnot.Width = width;
            stampAnnot.Height = height;
            stampAnnot.Author = annotManager.getCurrentUser();

            // Add an event listener to the document to create the annotation on click
            const dropStamp = async (e) => {                
                const pagePoint = docViewer.getViewerCoordinatesFromMouseEvent(e);
                
                stampAnnot.PageNumber = pagePoint.pageNumber;
                stampAnnot.X = pagePoint.x - (width/2);//this is to center the stamp to the mouse click otherwise it will be placed on the top left corner of the stamp
                stampAnnot.Y = pagePoint.y - (height/2);
                
                annotManager.addAnnotation(stampAnnot);
                annotManager.redrawAnnotation(stampAnnot);

                //clean up
                stampTool.hidePreview();
                docViewer.removeEventListener('click', dropStamp);   
            };
                
            docViewer.addEventListener('click', dropStamp);            

            // Show the rubber stamp tool preview            
            await stampTool.setRubberStamp(stampAnnot);
            stampTool.showPreview();
        }

if you know a more standard way or recommended way please let me know

5

hi Jborroto
Is that okie you could share your sample code with us and the sample base64URL for me to do a quick investigation? Because I am not sure how you do the implementation, I am not really know the reason why you should implement the drop function

Best
Jack