RED-9885: implemented resize file-preview components.

apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.html

@@ -56,7 +56,7 @@
                 </iqser-workflow>
             </div>
 
-            <div *ngIf="dossierAttributes$ | async" [class.collapsed]="collapsedDetails" class="right-container">
+            <div *ngIf="dossierAttributes$ | async" [class.collapsed]="collapsedDetails" class="right-container with-transition">
                 <redaction-dossier-details
                     (toggleCollapse)="collapsedDetails = !collapsedDetails"
                     [dossierAttributes]="dossierAttributes"

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

@@ -172,7 +172,7 @@
                                             translate="file-preview.tabs.annotations.reset"
                                         ></a>
                                         {{ 'file-preview.tabs.annotations.the-filters' | translate }}
-                                    } @else if (state.componentReferenceIds?.length === 0) {
+                                    } @else if (state.componentReferenceIds()?.length === 0) {
                                         {{ 'file-preview.tabs.annotations.no-annotations' | translate }}
                                     }
                                 }

apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html

@@ -3,7 +3,7 @@
 
     <div class="overlay-shadow"></div>
 
-    <div class="content-inner" #container>
+    <div class="content-inner">
         <div class="content-container" [class.documine-content-container]="isDocumine">
             <redaction-structured-component-management
                 *ngIf="isDocumine"
@@ -12,10 +12,18 @@
             ></redaction-structured-component-management>
         </div>
         @if (isDocumine) {
-            <div class="resize" #resize></div>
+            <div
+                class="resize"
+                #resize
+                cdkDrag
+                (cdkDragStarted)="onDragStart($event)"
+                (cdkDragMoved)="onDragMove($event)"
+                (cdkDragEnded)="onDragEnd($event)"
+                cdkDragLockAxis="x"
+                cdkDragBoundary=".content-inner"
+            ></div>
         }
         <!-- Here comes PDF Viewer-->
-
         <div class="right-container" [class.documine-container]="isDocumine">
             <redaction-file-preview-right-container
                 [iqserDisableStopPropagation]="state.isEditingReviewer()"

apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss

@@ -1,14 +1,13 @@
 .content-inner {
     position: absolute;
+
+    &.dragging {
+        pointer-events: none !important;
+    }
 }
 
 .content-container {
     position: relative;
-
-    &.documine-content-container {
-        width: calc(var(--structured-component-management-width) + 14px);
-        transition: width 0.5s ease-in-out;
-    }
 }
 
 .right-container {
@@ -45,7 +44,6 @@
 
     &.documine-container {
         width: calc(100% - var(--structured-component-management-width));
-        transition: width 0.5s ease-in-out;
     }
 }
 

apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts

@@ -1,6 +1,5 @@
 import { ActivatedRouteSnapshot, NavigationExtras, Router } from '@angular/router';
 import {
-    AfterViewInit,
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
@@ -81,6 +80,7 @@ import { DocumentInfoService } from './services/document-info.service';
 import { RectangleAnnotationDialog } from './dialogs/rectangle-annotation-dialog/rectangle-annotation-dialog.component';
 import { ANNOTATION_ACTION_ICONS, ANNOTATION_ACTIONS } from './utils/constants';
 import { ComponentLogService } from '@services/entity-services/component-log.service';
+import { CdkDrag, CdkDragEnd, CdkDragMove, CdkDragStart } from '@angular/cdk/drag-drop';
 
 @Component({
     templateUrl: './file-preview-screen.component.html',
@@ -95,21 +95,16 @@ import { ComponentLogService } from '@services/entity-services/component-log.ser
         TypeFilterComponent,
         FileHeaderComponent,
         StructuredComponentManagementComponent,
+        CdkDrag,
     ],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FilePreviewScreenComponent
+export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnInit, OnDestroy, OnAttach, OnDetach, ComponentCanDeactivate {
-    extends AutoUnsubscribe
-    implements OnInit, OnDestroy, OnAttach, OnDetach, AfterViewInit, ComponentCanDeactivate
-{
     readonly circleButtonTypes = CircleButtonTypes;
     readonly roles = Roles;
     readonly fileId = this.state.fileId;
     readonly dossierId = this.state.dossierId;
     readonly resizeHandle = viewChild<ElementRef>('resize');
-    readonly container = viewChild<ElementRef>('container');
-    drag = false;
-    moveX = 0;
     protected readonly isDocumine = getConfig().IS_DOCUMINE;
     @ViewChild('annotationFilterTemplate', {
         read: TemplateRef,
@@ -242,28 +237,30 @@ export class FilePreviewScreenComponent
         );
     }
 
-    @Bind()
+    onDragStart(event: CdkDragStart) {
-    mouseDown(event: MouseEvent) {
+        event.event.preventDefault();
         if (!this.isDocumine) return;
-        this.drag = true;
+        const contentInnerElement = document.body.getElementsByClassName('content-inner').item(0) as HTMLElement;
+        if (contentInnerElement) {
+            contentInnerElement.classList.add('dragging');
+        }
     }
 
-    @Bind()
+    onDragMove(event: CdkDragMove) {
-    mouseMove(event: MouseEvent) {
         if (!this.isDocumine) return;
-        if (!this.drag) return;
+        const e = event.event as MouseEvent;
-        if (this.#getPixelsInPercentage(event.screenX) <= this.#getPixelsInPercentage(250)) return;
+        const newLeftWidth = `${this.#getPixelsInPercentage(e.clientX - this.resizeHandle().nativeElement.style.width / 2)}%`;
-        this.moveX = event.screenX;
-        const newLeftWidth = this.#convertPixelsToPercent(this.moveX - this.resizeHandle().nativeElement.getBoundingClientRect().width / 2);
-
         document.body.style.setProperty('--structured-component-management-width', newLeftWidth);
-        event.preventDefault();
+        this.resizeHandle().nativeElement.style.transform = 'none';
     }
 
-    @Bind()
+    onDragEnd(event: CdkDragEnd) {
-    mouseUp(event: MouseEvent) {
+        event.event.preventDefault();
         if (!this.isDocumine) return;
-        this.drag = false;
+        const contentInnerElement = document.body.getElementsByClassName('content-inner').item(0) as HTMLElement;
+        if (contentInnerElement) {
+            contentInnerElement.classList.remove('dragging');
+        }
     }
 
     deleteEarmarksOnViewChange$() {
@@ -289,24 +286,12 @@ export class FilePreviewScreenComponent
         super.ngOnDetach();
         this.pdf.instance.UI.hotkeys.off('esc');
         this.pdf.instance.UI.iframeWindow.document.removeEventListener('click', this.handleViewerClick);
-        this.resizeHandle().nativeElement.removeEventListener('mousedown', this.mouseDown);
-        this.pdf.instance.UI.iframeWindow.document.removeEventListener('mousedown', this.mouseDown);
-        this.container().nativeElement.removeEventListener('mousemove', this.mouseMove);
-        this.pdf.instance.UI.iframeWindow.document.removeEventListener('mousemove', this.mouseMove);
-        this.container().nativeElement.removeEventListener('mouseup', this.mouseUp);
-        this.pdf.instance.UI.iframeWindow.document.removeEventListener('mouseup', this.mouseUp);
         this._changeRef.markForCheck();
     }
 
     ngOnDestroy() {
         this.pdf.instance.UI.hotkeys.off('esc');
         this.pdf.instance.UI.iframeWindow.document.removeEventListener('click', this.handleViewerClick);
-        this.resizeHandle().nativeElement.removeEventListener('mousedown', this.mouseDown);
-        this.pdf.instance.UI.iframeWindow.document.removeEventListener('mousedown', this.mouseDown);
-        this.container().nativeElement.removeEventListener('mousemove', this.mouseMove);
-        this.pdf.instance.UI.iframeWindow.document.removeEventListener('mousemove', this.mouseMove);
-        this.container().nativeElement.removeEventListener('mouseup', this.mouseUp);
-        this.pdf.instance.UI.iframeWindow.document.removeEventListener('mouseup', this.mouseUp);
         super.ngOnDestroy();
     }
 
@@ -390,15 +375,6 @@ export class FilePreviewScreenComponent
         this.pdf.instance.UI.iframeWindow.document.addEventListener('click', this.handleViewerClick);
     }
 
-    ngAfterViewInit() {
-        this.resizeHandle().nativeElement.addEventListener('mousedown', this.mouseDown);
-        this.pdf.instance.UI.iframeWindow.document.addEventListener('mousedown', this.mouseDown);
-        this.container().nativeElement.addEventListener('mousemove', this.mouseMove);
-        this.pdf.instance.UI.iframeWindow.document.addEventListener('mousemove', this.mouseMove);
-        this.container().nativeElement.addEventListener('mouseup', this.mouseUp);
-        this.pdf.instance.UI.iframeWindow.document.addEventListener('mouseup', this.mouseUp);
-    }
-
     async openRectangleAnnotationDialog(manualRedactionEntryWrapper: ManualRedactionEntryWrapper) {
         const file = this.state.file();
 
@@ -475,11 +451,7 @@ export class FilePreviewScreenComponent
     }
 
     #getPixelsInPercentage(pixels: number) {
-        return Math.round((100 - ((window.screen.width - pixels) / window.screen.width) * 100 + Number.EPSILON) * 100) / 100;
+        return (pixels / window.screen.width) * 100;
-    }
-
-    #convertPixelsToPercent(pixels: number) {
-        return `${this.#getPixelsInPercentage(pixels)}%`;
     }
 
     async #updateViewMode(): Promise<void> {

libs/common-ui

@@ -1 +1 @@
-Subproject commit ae0eebcc6feceba4fe5c930d79eadd9b9a60b7e9
+Subproject commit 72e760fff8bc1adb72969b1e6e6971cdb88d55fe