how to make the selected image from panel follow the mouse cursor during drag and drop?

Technical Support WebViewer
, ,
1

WebViewer Version: 10.5

I have a custom panel to select images for the pdf. How to make the selected image from the panel attach stamp annotation to a cursor? Please find attached. Thanks

I have tried the codes below, but they are not working.

const { annotationManager, Annotations, documentViewer } = instance.Core;
const annot = new Annotations.StampAnnotation({
PageNumber: currentPageNumber,
Author: annotationManager.getCurrentUser(),
NoResize: false,
});

const stampTool = documentViewer.getTool(‘AnnotationCreateRubberStamp’);
await stampTool.setRubberStamp(annot);
stampTool.showPreview();

My current look like

Expectation

1 Like
3

Hello waiwai,

To achieve what you want, you could put your images on the StandardsStamp Panels.
You could either replace all the standardsStamps or add your images to the list

const stampTool = documentViewer.getTool(Tools.ToolNames.RUBBER_STAMP)
const svgStamp = `data:image/svg+xml;base64,` + btoa(`<svg width="300" height="130" xmlns="http://www.w3.org/2000/svg">
  <rect width="200" height="100" x="10" y="10" rx="20" ry="20" fill="blue" />
</svg>`)

// to keep the standard one
let standardStamps = await stampTool.getStandardStamps()
standardStamps.push(svgStamp)
stampTool.setStandardStamps(standardStamps)

// to only keep your images
stampTool.setStandardStamps([svgStamp])

Let us know if this works for you!

Best Regards,
Mickaël
Web Development Support Engineer
Apryse Software Inc.

1 Like
4

Thanks for replied, I want to know can I use the standard stamps on my custom panel? My panel has different logic, so I may not be able to use yours panel. Also, I want to know is it possible to duplicate the standard stamps panel since I have multiple panels.

1 Like
5

Hello waiwai,

I would need a bit more information about your current setup and the specific requirements of your custom logic.

Could you please provide:

  1. The WebViewer version you are using?
  2. Details on how your custom panel is implemented and the interactions you expect with the standard stamps within this panel?

In the meantime, you may find our documentation on customizing the UI helpful: Customizing WebViewer UI. This guide covers various aspects of UI customization, including creating custom panels and modifying existing ones.

Best Regards,
Mickaël
Web Development Support Engineer
Apryse Software Inc.

1 Like
6

WebViewer version: 10.5.1

const imageClick = async (e, Id) => { // when image onClick from custom panel

    var stamp = stampList.find(e => e.id === Id);
    const { annotationManager, Annotations } = instance.Core;
    const annot = new Annotations.StampAnnotation({
      PageNumber: currentPageNumber,
      Author: annotationManager.getCurrentUser(),
      NoResize: false,
    });
    annot.Id = 'CustomStamp_' + stamp.id + '_' + annot.Id;
    
    getImageHeightWidth(stamp?.objValue?.previewObjValue?.base64).then(async result => {

        annot.setCustomData('stampData', stampData);
        annot.setCustomData('fieldStyles', fieldStyles);

        imageSource.onload = () => {
          const base64 = drawDynamicStamp({ //draw stamp
            imageSource,
            imageWidth: result.width,
            imageHeight: result.height,
            stampLayers: stamp.objValue.layers,
            fieldValues: stampData,
            fieldStyles,
          });
          annot.setImageData(base64);
          annotationManager.addAnnotation(annot);
          annotationManager.redrawAnnotation(annot);
          imageSource.remove();
        };
        imageSource.src = stamp.objValue.objValue.base64;
        imageSource.hidden = true;
        document.body.appendChild(imageSource);
      }

    });
  };

Currently, when an image is clicked from the custom panel, it creates a stamp annotation and draws directly to the PDF. I want to achieve the ability to drag and drop the image to the PDF instead.

1 Like
7

Hello waiwai6723,

We dont have “Drag and Drop” functionality directly, but since youre using Stamps you can use our showPreview() and hidePreview() functions to show a “ghost” of the annotation under the cursor as you place it.

https://docs.apryse.com/api/web/Core.Tools.RubberStampCreateTool.html#showPreview

Best regards,
Tyler

1 Like