Just to share some knowledge, I figure out the problem was happening by a conflict of events, so to fix this I removed the pan events and change the rule of mousedown and touchstart event, instead of checking isDesktop variable that just look the screen size, I change the rule to apply which event if the device has or not touch events, so for desktop it will apply mousedown event and for mobile devices, it will apply touchstart event.
<div class="doc-panel" *ngIf="file" (mousedown)="!isTouch ? createAnnotation($event) : ''"
(touchstart)="isTouch ? createAnnotation($event) : ''"
<gd-document class="gd-document" *ngIf="file" [file]="file" [mode]="htmlModeConfig" gdScrollable
[preloadPageCount]="preloadPageCountConfig" gdRenderPrint [htmlMode]="htmlModeConfig" (onpan)="onPan($event)"></gd-document>
this.isTouch = window.matchMedia("(pointer: coarse)").matches;
It works for me, but I know how pan events work, so maybe you will have a better solution.
And this is the link that helped me to achieve this solution: