Get element position after drag and drop to pdf file (Angular-Nodejs)

Question

I use angular ng2-pdf-viewer and angular material cdkDrag to drag element. In my backend i use hummusJS/hummusRecipe to modify the pdf file.

I look for a way to know where i drop the element on the pdf file and then make a request to backend with coordinate to know where the element need to be on the pdf file.

This is my function on nodejs:

const pdfEditor = async () => {
  const pdfDoc = new HummusRecipe("./pdf/demo.pdf", "./pdf/output.pdf");
  pdfDoc
    // edit 1st page
    .editPage(1)
    .text("Add some texts to an existing pdf file", 150, 500, {
      color: "003240"
    })
    .image("./dest/signature.png", 100, 600, {
      width: 100,
      keepAspectRatio: true
    })
    .endPage()
    .endPDF();
}

My client Angular:

<div class="container">
<div class="otherContainer">
  <button (click)="getEditedPDF()" style="width: 100px;">Save image with signature</button>
  <pdf-viewer *ngIf="pdfSrc" [(page)]="pageVariable" [show-all]="true" [render-text]="true" [original-size]="false" [autoresize]="true" [src]="pdfSrc"> </pdf-viewer>
  <div class="signatureContainer">
    <signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()"></signature-pad>
    <div class="btn-grid">
      <button (click)="submitPad()">Submit</button>
      <button (click)="clearPad()">Clear Pad</button>
      <button (click)="openImage()">Open Image</button>
    </div>
  </div>
</div>
<div class="image">
  <img *ngIf="imageExpress" [src]="imageExpress | safeHtml" cdkDrag>
</div>
<pdf-viewer *ngIf="editedPDF" [(page)]="pageVariable" [show-all]="true" [render-text]="true" [original-size]="false" [autoresize]="true" [src]="editedPDF"> </pdf-viewer>
</div>

Answer 1

import { Component, OnInit, Input } from '@angular/core';
import { CdkDragEnd, CdkDragStart, CdkDragMove, CdkDragDrop } from '@angular/cdk/drag-drop';
@Component({
  selector: 'app-pdf-drag-drop',
  templateUrl: './pdf-drag-drop.component.html',
  styleUrls: ['./pdf-drag-drop.component.scss']
})
export class PdfDragDropComponent implements OnInit {
  dragDroppables: any[];
  state = '';
  position = '';

  @Input() props: [{ [key: string]: object | any }];

  constructor() { }

  ngOnInit(): void {
    this.dragDroppables = this.props;
  }

  public dragStarted(event: CdkDragStart) {
    this.state = 'dragStarted';
  }

  public dragEnded(event: CdkDragEnd) {
    this.state = 'dragEnded';
    console.log(`State: ${this.state} ${this.position}`);
  }

  public dragMoved(event: CdkDragMove) {
    this.position = ` Position X: ${event.pointerPosition.x} - Y: ${event.pointerPosition.y}`;
  }

}

..and in your template add:

  cdkDrag
  (cdkDragStarted)="dragStarted($event)"
  (cdkDragEnded)="dragEnded($event)"
  (cdkDragMoved)="dragMoved($event)"

This works for me.