HXCS 3856 File rotation in ADF Viewer (#9873)

docs/core/components/viewer.component.md

@@ -75,6 +75,7 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
 | originalMimeType | `string` |  | Overload originalMimeType |
 | overlayMode | `boolean` | false | If `true` then show the Viewer as a full page over the current content. Otherwise fit inside the parent div. |
 | readOnly | `boolean` | true | Enable when where is possible the editing functionalities |
+| allowedEditActions | `{ [key: string]: boolean }` | `{ rotate: true, crop: true }` | Controls which editing actions are enabled when not in read-only mode. Allows granular control over actions like rotation and cropping. |
 | showLeftSidebar | `boolean` | false | Toggles left sidebar visibility. Requires `allowLeftSidebar` to be set to `true`. |
 | showRightSidebar | `boolean` | false | Toggles right sidebar visibility. Requires `allowRightSidebar` to be set to `true`. |
 | showToolbar | `boolean` | true | Hide or show the toolbar |

lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html

@@ -24,6 +24,7 @@
     [urlFile]="urlFileContent"
     [tracks]="tracks"
     [readOnly]="readOnly"
+    [allowedEditActions]="allowedEditActions"
     [viewerExtensions]="viewerExtensions"
     (downloadFile)="onDownloadFile()"
     (navigateBefore)="onNavigateBeforeClick($event)"

lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts

@@ -215,6 +215,10 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit, OnDestroy {
     nodeEntry: NodeEntry;
     tracks: Track[] = [];
     readOnly: boolean = true;
+    allowedEditActions: { [key: string]: boolean } = {
+        rotate: true,
+        crop: true
+    };
 
     sidebarRightTemplateContext: { node: Node } = { node: null };
     sidebarLeftTemplateContext: { node: Node } = { node: null };

lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.html

@@ -33,14 +33,14 @@
             <mat-icon>zoom_in</mat-icon>
         </button>
 
-        <button *ngIf="!readOnly" id="viewer-rotate-button"
+        <button *ngIf="!readOnly && allowedEditActions.rotate" id="viewer-rotate-button"
                 title="{{ 'ADF_VIEWER.ARIA.ROTATE' | translate }}"
                 attr.aria-label="{{ 'ADF_VIEWER.ARIA.ROTATE' | translate }}"
                 mat-icon-button
                 (click)="rotateImage()">
             <mat-icon>rotate_left</mat-icon>
         </button>
-        <button *ngIf="!readOnly" id="viewer-crop-button"
+        <button *ngIf="!readOnly && allowedEditActions.crop" id="viewer-crop-button"
                 title="{{ 'ADF_VIEWER.ARIA.CROP' | translate }}"
                 attr.aria-label="{{ 'ADF_VIEWER.ARIA.CROP' | translate }}"
                 mat-icon-button
@@ -58,7 +58,7 @@
 
     </adf-toolbar>
 
-    <adf-toolbar class="adf-secondary-toolbar" *ngIf="!readOnly && isEditing">
+    <adf-toolbar class="adf-secondary-toolbar" *ngIf="isEditing && !readOnly">
         <button id="viewer-cancel-button"
                 title="{{ 'ADF_VIEWER.ARIA.CANCEL' | translate }}"
                 attr.aria-label="{{ 'ADF_VIEWER.ARIA.CANCEL' | translate }}"

lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.spec.ts

@@ -370,4 +370,36 @@ describe('Test Img viewer component ', () => {
             expect(component.reset).toHaveBeenCalled();
         });
     });
+
+    describe('allowedEditActions', () => {
+        beforeEach(() => {
+            fixture = TestBed.createComponent(ImgViewerComponent);
+            element = fixture.nativeElement;
+            component = fixture.componentInstance;
+        });
+
+        it('should conditionally display rotate and crop buttons based on allowedEditActions', () => {
+            component.readOnly = false;
+            component.allowedEditActions = { rotate: true, crop: true };
+            fixture.detectChanges();
+
+            let rotateButton = element.querySelector('#viewer-rotate-button');
+            let cropButton = element.querySelector('#viewer-crop-button');
+
+            // Check both buttons are visible when allowed
+            expect(rotateButton).not.toBeNull('Rotate button should be visible when allowed');
+            expect(cropButton).not.toBeNull('Crop button should be visible when allowed');
+
+            // Change allowedEditActions to disallow both actions
+            component.allowedEditActions = { rotate: false, crop: false };
+            fixture.detectChanges();
+
+            rotateButton = element.querySelector('#viewer-rotate-button');
+            cropButton = element.querySelector('#viewer-crop-button');
+
+            // Check both buttons are not visible when not allowed
+            expect(rotateButton).toBeNull('Rotate button should not be visible when disallowed');
+            expect(cropButton).toBeNull('Crop button should not be visible when disallowed');
+        });
+    });
 });

lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.ts

@@ -54,6 +54,12 @@ export class ImgViewerComponent implements AfterViewInit, OnChanges, OnDestroy {
     @Input()
     readOnly = true;
 
+    @Input()
+    allowedEditActions: { [key: string]: boolean } = {
+        rotate: true,
+        crop: true
+    };
+
     @Input()
     urlFile: string;
 

lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.html

@@ -44,6 +44,7 @@
                 <adf-img-viewer [urlFile]="urlFile"
                                 [readOnly]="readOnly"
                                 [fileName]="internalFileName"
+                                [allowedEditActions]="allowedEditActions"
                                 [blobFile]="blobFile"
                                 (error)="onUnsupportedFile()"
                                 (submit)="onSubmitFile($event)"

lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.ts

@@ -95,6 +95,17 @@ export class ViewerRenderComponent implements OnChanges, OnInit, OnDestroy {
     @Input()
     readOnly = true;
 
+    /**
+     * Controls which actions are enabled in the viewer.
+     * Example:
+     * { rotate: true, crop: false } will enable rotation but disable cropping.
+     */
+    @Input()
+    allowedEditActions: { [key: string]: boolean } = {
+        rotate: true,
+        crop: true
+    };
+
     /** media subtitles for the media player*/
     @Input()
     tracks: Track[] = [];

lib/core/src/lib/viewer/components/viewer.component.html

@@ -167,6 +167,7 @@
                                [blobFile]="blobFile"
                                [readOnly]="readOnly"
                                (submitFile)="onSubmitFile($event)"
+                               [allowedEditActions]="allowedEditActions"
                                [urlFile]="urlFile"
                                (isSaving)="allowNavigate = !$event"
                                [tracks]="tracks"

lib/core/src/lib/viewer/components/viewer.component.ts

@@ -189,6 +189,17 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
     @Input()
     readOnly = true;
 
+    /**
+     * Controls which actions are enabled in the viewer.
+     * Example:
+     * { rotate: true, crop: false } will enable rotation but disable cropping.
+     */
+    @Input()
+    allowedEditActions: { [key: string]: boolean } = {
+        rotate: true,
+        crop: true
+    };
+
     /** media subtitles for the media player*/
     @Input()
     tracks: Track[] = [];