RED-5820: fix resizing

apps/red-ui/src/app/models/file/annotation.wrapper.ts

@@ -48,7 +48,6 @@ export class AnnotationWrapper implements IListable, Record<string, unknown> {
     recommendationType: string;
     legalBasisValue: string;
     legalBasisChangeValue?: string;
-    resizing = false;
     rectangle?: boolean;
     section?: string;
     reference: List;

apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.html

@@ -4,10 +4,9 @@
     class="annotation-actions"
 >
     <!-- Resize Mode for annotation -> only resize accept and deny actions are available-->
-    <ng-container *ngIf="resizing">
+    <ng-container *ngIf="resizing && annotationPermissions.canResizeAnnotation">
         <iqser-circle-button
             (action)="acceptResize($event)"
-            *ngIf="annotationPermissions.canResizeAnnotation && annotations.length === 1 && annotations[0].resizing"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'annotation-actions.resize-accept.label' | translate"
             [type]="buttonType"
@@ -16,7 +15,6 @@
 
         <iqser-circle-button
             (action)="cancelResize($event)"
-            *ngIf="annotationPermissions.canResizeAnnotation && annotations.length === 1 && annotations[0].resizing"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'annotation-actions.resize-cancel.label' | translate"
             [type]="buttonType"

apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.ts

@@ -65,7 +65,7 @@ export class AnnotationActionsComponent implements OnChanges {
     }
 
     get resizing() {
-        return this.annotations?.length === 1 && this.annotations?.[0].resizing;
+        return this.annotations?.length === 1 && this.annotations?.[0].id === this._annotationManager.resizingAnnotationId;
     }
 
     ngOnChanges(): void {

apps/red-ui/src/app/modules/file-preview/services/annotation-actions.service.ts

@@ -22,7 +22,7 @@ import {
     AcceptRecommendationDialogComponent,
     AcceptRecommendationReturnType,
 } from '../dialogs/accept-recommendation-dialog/accept-recommendation-dialog.component';
-import { defaultDialogConfig, List } from '@iqser/common-ui';
+import { defaultDialogConfig, isJustOne, List } from '@iqser/common-ui';
 import { filter } from 'rxjs/operators';
 import { MatDialog } from '@angular/material/dialog';
 import { FilePreviewStateService } from './file-preview-state.service';
@@ -175,8 +175,12 @@ export class AnnotationActionsService {
             AcceptRecommendationDialogComponent,
             { ...defaultDialogConfig, autoFocus: true, data: { annotations: recommendations, dossierId } },
         );
+        // TODO: remove observables
         const dialogClosed = dialogRef.afterClosed().pipe(filter(value => !!value && !!value.annotations));
         dialogClosed.subscribe(({ annotations, comment: commentText }) => {
+            if (isJustOne(annotations) && this._annotationManager.resizingAnnotationId === annotations[0].id) {
+                this.cancelResize(null, annotations[0]).then();
+            }
             const comment = commentText ? { text: commentText } : undefined;
             this.#processObsAndEmit(this._manualRedactionService.addRecommendation(annotations, dossierId, fileId, comment));
         });
@@ -185,7 +189,7 @@ export class AnnotationActionsService {
     async resize($event: MouseEvent, annotationWrapper: AnnotationWrapper) {
         $event?.stopPropagation();
 
-        annotationWrapper.resizing = true;
+        this._annotationManager.resizingAnnotationId = annotationWrapper.id;
 
         const viewerAnnotation = this._annotationManager.get(annotationWrapper);
         if (annotationWrapper.rectangle || annotationWrapper.imported || annotationWrapper.isImage) {
@@ -226,6 +230,8 @@ export class AnnotationActionsService {
                 updateDictionary: result.updateDictionary,
             };
 
+            this.cancelResize(null, annotation).then();
+
             const { fileId, dossierId } = this._state;
             const request = this._manualRedactionService.resizeOrSuggestResize([resizeRequest], dossierId, fileId);
             this.#processObsAndEmit(request);
@@ -235,7 +241,7 @@ export class AnnotationActionsService {
     async cancelResize($event: MouseEvent, annotationWrapper: AnnotationWrapper) {
         $event?.stopPropagation();
 
-        annotationWrapper.resizing = false;
+        this._annotationManager.resizingAnnotationId = undefined;
 
         this._annotationManager.delete(annotationWrapper);
         await this._annotationDrawService.draw([annotationWrapper], this._skippedService.hideSkipped, this._state.dossierTemplateId);

apps/red-ui/src/app/modules/file-preview/services/pdf-annotation-actions.service.ts

@@ -9,6 +9,7 @@ import { BASE_HREF_FN, IqserPermissionsService } from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { IHeaderElement } from '@red/domain';
 import { ROLES } from '@users/roles';
+import { REDAnnotationManager } from '../../pdf-viewer/services/annotation-manager.service';
 
 @Injectable()
 export class PdfAnnotationActionsService {
@@ -19,6 +20,7 @@ export class PdfAnnotationActionsService {
     readonly #convertPath = inject(BASE_HREF_FN);
     readonly #annotationActionsService = inject(AnnotationActionsService);
     readonly #iqserPermissionsService = inject(IqserPermissionsService);
+    readonly #annotationManager = inject(REDAnnotationManager);
 
     get(annotations: AnnotationWrapper[]): IHeaderElement[] {
         const availableActions: IHeaderElement[] = [];
@@ -28,7 +30,7 @@ export class PdfAnnotationActionsService {
         if (permissions.canResize) {
             const firstAnnotation = annotations[0];
             // if we already entered resize-mode previously
-            if (firstAnnotation.resizing) {
+            if (firstAnnotation.id === this.#annotationManager.resizingAnnotationId) {
                 const acceptResizeButton = this.#getButton('check', _('annotation-actions.resize-accept.label'), () =>
                     this.#annotationActionsService.acceptResize(null, firstAnnotation),
                 );

apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts

@@ -9,7 +9,7 @@ import {
 } from '@models/file/manual-redaction-entry.wrapper';
 import { AnnotationDrawService } from '../../pdf-viewer/services/annotation-draw.service';
 import { UserPreferenceService } from '@users/user-preference.service';
-import { BASE_HREF_FN, BaseHrefFn, IqserPermissionsService, shareDistinctLast } from '@iqser/common-ui';
+import { BASE_HREF_FN, BaseHrefFn, IqserPermissionsService, isJustOne, shareDistinctLast } from '@iqser/common-ui';
 import { toPosition } from '../utils/pdf-calculation.utils';
 import { MultiSelectService } from './multi-select.service';
 import { FilePreviewStateService } from './file-preview-state.service';
@@ -161,19 +161,24 @@ export class PdfProxyService {
     }
 
     #cancelResizeIfIsResizing(annotations: Annotation[]) {
-        if (annotations.length !== 1) {
+        if (!isJustOne(annotations)) {
             return;
         }
 
         const annotation = annotations[0];
-        const wrapper = this._fileDataService.find(annotation.Id);
+        const isResizing = this._annotationManager.resizingAnnotationId === annotation.Id;
-        if (!wrapper?.resizing) {
+
+        if (!isResizing) {
             return;
         }
 
         // When resizing a rectangle, the original annotation is removed and triggers a deselect event and a new one is created
         // So we want to skip the first deselect event.
-        if ((wrapper.isImage || wrapper.rectangle) && annotation.ToolName !== AnnotationToolNames.AnnotationCreateRectangle) {
+        const wrapper = this._fileDataService.find(annotation.Id);
+        if (
+            (wrapper.rectangle || wrapper.isImage || wrapper.imported) &&
+            annotation.ToolName !== AnnotationToolNames.AnnotationCreateRectangle
+        ) {
             return;
         }
 

apps/red-ui/src/app/modules/pdf-viewer/services/annotation-manager.service.ts

@@ -15,6 +15,7 @@ import Annotation = Core.Annotations.Annotation;
 export class REDAnnotationManager {
     annotationSelected$: Observable<[Annotation[], string]>;
     readonly hidden = new Set<string>();
+    resizingAnnotationId?: string = undefined;
 
     #manager: AnnotationManager;
 

libs/common-ui

@@ -1 +1 @@
-Subproject commit fe9a50d367901bc6b3c21794f5fd189ab69ce2c1
+Subproject commit 3a5c098128f8229aa3b961c0c03d0f9185089fcd