Reziable & Drag is not working for images.

[dixit-atharva]

I have added code snippets after adding the images by using above method to PDF can not able to resize and drag it over the pdf page also want to add images with the specific height and width.

[dixit-atharva]

async addImagesToPDF(event: MouseEvent) {
    const pdfViewer = document.querySelector('.pdfViewer');
    if (pdfViewer) {
      if (this.selectedStaticImage && this.showTool1) {
        this.pdfService.switchAnnotationEdtorMode(13);

        await this.pdfService.addImageToAnnotationLayer({
          urlOrDataUrl: this.selectedStaticImage,
          page: this.pdfService.currentPageIndex(),
          left: event.clientY,
          top: event.clientX,
        });

        this.selectedStaticImage = '';
      }
      if (this.showTool2 && this.selectedText) {
        this.pdfService.switchAnnotationEdtorMode(3);
        // Create a FreeTextEditorAnnotation object
        const annotationData: FreeTextEditorAnnotation = {
          value: this.selectedText,
          annotationType: 3, // Example value, replace with appropriate annotation type
          color: [0, 0, 255, 1], // Example color value, replace with appropriate color
          fontSize: 12, // Example font size value, replace with appropriate font size
          pageIndex: 0, // Example page index value, replace with appropriate page index
          // Add other required properties here
          rect: [1, event.clientX, event.clientY, 10], // Example rectangle coordinates, replace with appropriate values
          rotation: 0,
        };
        await this.pdfService.addEditorAnnotation(annotationData);

        this.selectedText = '';
      }

Above is the code in angular 17 after some research i managed to get the resizable and draggable but not able to drop the element on specific mouse click position.

Can please guide how can i get that ?

[stephanrauh]

Sorry for answering late - I was in vacation, and on top of it, I was ill.

I suspect the problem is the size of the image. You've omitted the right and bottom attributes, so the default value are used and fill all the avaiable space. It doesn't matter that the image is smaller - the algorithms isn't clever enough to know the size of the image. When I implemented the demo https://pdfviewer.net/extended-pdf-viewer/annotation-layer-api, I observed weird behaviors when using bad parameters.

BTW, dragging the image works in the demo I mentioned, so maybe you can use it as a starting point to find the bug in your code: https://github.com/stephanrauh/extended-pdf-viewer-showcase/tree/main/src/app/extended-pdf-viewer/annotation-layer-api