@hmcts/media-viewer 4.2.0 → 4.2.4-exui-3994-f

package/projects/media-viewer/src/lib/annotations/annotation-set/annotation-set.component.spec.ts

@@ -0,0 +1,168 @@
+import { AnnotationSetComponent } from './annotation-set.component';
+import { ComponentFixture, fakeAsync, inject, TestBed, tick } from '@angular/core/testing';
+import { Observable, of } from 'rxjs';
+import { ToolbarEventService } from '../../toolbar/toolbar-event.service';
+import { CommentService } from '../comment-set/comment/comment.service';
+import { HighlightCreateService } from './annotation-create/highlight-create/highlight-create.service';
+import { Action, Store, StoreModule } from '@ngrx/store';
+import { reducers } from '../../store/reducers/reducers';
+import * as fromActions from '../../store/actions/annotation.actions';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+describe('AnnotationSetComponent', () => {
+  let component: AnnotationSetComponent;
+  let fixture: ComponentFixture<AnnotationSetComponent>;
+  let mockTextLayerRect, mockElement, mockHighlight, mockClientRect, mockClientRects, mockRange;
+  let expectedAction: Action;
+  const mockStore = {
+    select: () => of([{
+      styles: { height: 100, width: 100 },
+      scaleRotation: { scale: 1, rotation: 0 }
+    }]),
+    dispatch: (actualAction) => { expectedAction = actualAction; },
+    pipe: () => of({ annotationSetId: 'annotationSetId', documentId: 'documentId' })
+  } as any;
+
+  const mockCommentService = new CommentService();
+  const mockHighlightService = {
+    getRectangles: () => {},
+    saveAnnotation: () => {},
+    resetHighlight: () => {}
+  } as any;
+
+  beforeEach(() => {
+    mockTextLayerRect = {
+      top: 0,
+      left: 0,
+    };
+
+    mockElement = {
+      parentElement: {
+        getBoundingClientRect(): unknown {
+          return mockTextLayerRect;
+        },
+        childNodes: [{
+          style: {
+            padding: '100px 100px 100px 100px',
+            transform: 'scaleX(0.01) translateX(100px) translateY(-0.1)'
+          }
+        },
+          {
+            style: {
+              padding: '100px 100px 100px 100px',
+              transform: 'scaleX(0.01) translateX(100) translateY(-0.1px)'
+            }
+          }]
+      }
+    };
+
+    mockHighlight = {
+      page: 1,
+      event: {
+        pageY: 10,
+        pageX: 10,
+        target: mockElement,
+        srcElement: mockElement
+      } as any,
+    };
+
+    mockClientRect = {
+      top: 10,
+      bottom: 100,
+      left: 25,
+      right: 100,
+    };
+
+    mockClientRects = [mockClientRect, mockClientRect];
+    mockRange = {
+      cloneRange(): any {
+        return mockRange;
+      },
+      getClientRects(): any {
+        return mockClientRects;
+      }
+    };
+
+  });
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AnnotationSetComponent],
+      imports: [
+        StoreModule.forRoot({}),
+        StoreModule.forFeature('media-viewer' , reducers)
+      ],
+      providers: [
+        { provide: Store, useValue: mockStore },
+        { provide: CommentService, useValue: mockCommentService },
+        { provide: HighlightCreateService, useValue: mockHighlightService },
+        ToolbarEventService
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AnnotationSetComponent);
+    component = fixture.componentInstance;
+    component.rotate = 0;
+    component.pageHeight = 400;
+    component.pageWidth = 200;
+    component.zoom = 1;
+    fixture.detectChanges();
+
+    spyOn(mockHighlight.event, 'target').and.returnValue(mockElement);
+    spyOn(mockHighlight.event, 'srcElement').and.returnValue(mockElement);
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should update annotation', inject([Store],
+    (store) => {
+      spyOn(store, 'dispatch');
+      const mockAnno = { annotationSetId: 'annotationSetId' } as any;
+
+      component.onAnnotationUpdate(mockAnno);
+
+      expect(store.dispatch).toHaveBeenCalledWith(new fromActions.SaveAnnotation(mockAnno));
+    }
+  ));
+
+  describe('onAnnotationDelete', () => {
+    it('should update unsaved comments and dispatch delete annotation action',
+      inject([Store, CommentService], (store: Store<any>, commentService: CommentService) => {
+        spyOn(store, 'dispatch');
+        spyOn(commentService, 'updateUnsavedCommentsStatus');
+        const mockAnno = { comments: ['comments'], id: 'id'} as any;
+
+        component.onAnnotationDelete(mockAnno);
+
+        expect(commentService.updateUnsavedCommentsStatus).toHaveBeenCalledWith(mockAnno, false);
+        expect(store.dispatch).toHaveBeenCalledWith(new fromActions.DeleteAnnotation('id'));
+      })
+    );
+
+    it('should dispatch delete annotation actions and not to call commentService',
+      inject([Store, CommentService], (store: Store<any>, commentService: CommentService) => {
+        spyOn(store, 'dispatch');
+        spyOn(commentService, 'updateUnsavedCommentsStatus');
+        const mockAnno = { comments: [], id: 'id'} as any;
+
+        component.onAnnotationDelete(mockAnno);
+
+        expect(commentService.updateUnsavedCommentsStatus).not.toHaveBeenCalled();
+        expect(store.dispatch).toHaveBeenCalledWith(new fromActions.DeleteAnnotation('id'));
+      })
+    );
+  });
+
+  it('should select annotation', inject([Store],
+    (store) => {
+      spyOn(store, 'dispatch');
+
+      component.selectAnnotation({} as any);
+
+      expect(store.dispatch).toHaveBeenCalledWith(new fromActions.SelectedAnnotation({} as any));
+    }
+  ));
+});

package/projects/media-viewer/src/lib/annotations/annotation-set/annotation-set.component.ts

@@ -0,0 +1,50 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Annotation } from './annotation-view/annotation.model';
+import { Observable } from 'rxjs';
+import { SelectionAnnotation } from '../models/event-select.model';
+import { CommentService } from '../comment-set/comment/comment.service';
+import { select, Store } from '@ngrx/store';
+import * as fromStore from '../../store/reducers/reducers';
+import * as fromActions from '../../store/actions/annotation.actions';
+import * as fromSelectors from '../../store/selectors/annotation.selectors';
+
+@Component({
+    selector: 'mv-annotation-set',
+    templateUrl: './annotation-set.component.html',
+    standalone: false
+})
+export class AnnotationSetComponent implements OnInit {
+
+  @Input() page: number;
+  @Input() annotations: Annotation[] = [];
+  @Input() zoom: number;
+  @Input() rotate: number;
+  @Input() pageHeight: number;
+  @Input() pageWidth: number;
+
+  selectedAnnotation$: Observable<SelectionAnnotation>;
+
+  constructor(
+    private store: Store<fromStore.AnnotationSetState>,
+    private readonly commentService: CommentService
+  ) {}
+
+  ngOnInit(): void {
+    this.selectedAnnotation$ = this.store.pipe(select(fromSelectors.getSelectedAnnotation));
+  }
+
+  public onAnnotationUpdate(annotation: Annotation) {
+    this.store.dispatch(new fromActions.SaveAnnotation(annotation));
+  }
+
+  public onAnnotationDelete(annotation: Annotation) {
+    if (annotation.comments.length > 0) {
+      this.commentService.updateUnsavedCommentsStatus(annotation, false);
+    }
+    this.store.dispatch(new fromActions.DeleteAnnotation(annotation.id));
+  }
+
+  selectAnnotation(selectedAnnotation: SelectionAnnotation) {
+    this.store.dispatch(new fromActions.SelectedAnnotation(selectedAnnotation));
+  }
+}

package/projects/media-viewer/src/lib/annotations/annotation-set/annotation-set.model.ts

@@ -0,0 +1,7 @@
+import { ApiPersisted } from '../models/api-persisted.model';
+import { Annotation } from './annotation-view/annotation.model';
+
+export interface AnnotationSet extends ApiPersisted {
+  documentId: string;
+  annotations: Annotation[];
+}

package/projects/media-viewer/src/lib/annotations/annotation-set/annotation-view/annotation-view.component.html

@@ -0,0 +1,26 @@
+<div #container [tabindex]="anno.id">
+  <mv-ctx-toolbar *ngIf="selected"
+                  [canDelete]="true" [canComment]="true"
+                  [rectangles]="anno.rectangles"
+                  [zoom]="zoom"
+                  [rotate]="rotate"
+                  [pageHeight]="pageHeight"
+                  [pageWidth]="pageWidth"
+                  (deleteHighlightEvent)="deleteHighlight()"
+                  (addOrEditCommentEvent)="addOrEditComment()">
+  </mv-ctx-toolbar>
+  <ng-container *ngFor="let rectangle of anno.rectangles">
+    <mv-anno-rectangle
+      (selectEvent)="onSelect()"
+      (updateEvent)="onRectangleUpdate($event)"
+      [selected]="selected"
+      [zoom]="zoom"
+      [rotate]="rotate"
+      [pageHeight]="pageHeight"
+      [pageWidth]="pageWidth"
+      [editable]="anno.rectangles.length <= 1"
+      [annoRect]="rectangle"
+      [color]="anno.color">
+    </mv-anno-rectangle>
+  </ng-container>
+</div>

package/projects/media-viewer/src/lib/annotations/annotation-set/annotation-view/annotation-view.component.spec.ts

@@ -0,0 +1,219 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { ComponentFixture, inject, TestBed } from '@angular/core/testing';
+import { Store, StoreModule } from '@ngrx/store';
+
+import { Rectangle } from '../annotation-view/rectangle/rectangle.model';
+import { Annotation } from './annotation.model';
+import { reducers } from '../../../store/reducers/reducers';
+import { ToolbarEventService } from '../../../toolbar/toolbar-event.service';
+import { AnnotationViewComponent } from './annotation-view.component';
+
+@Component({
+    selector: 'mv-ctx-toolbar',
+    template: '',
+    standalone: false
+})
+class MockCtxToolbarComponent {
+  @Input() zoom = 1;
+  @Input() rotate = 0;
+  @Input() pageHeight: number;
+  @Input() pageWidth: number;
+
+  @Input() canHighlight: boolean;
+  @Input() canBookmark: boolean;
+  @Input() canComment: boolean;
+  @Input() canDelete: boolean;
+  @Input() rectangles: Rectangle[];
+
+  @Output() createHighlightEvent = new EventEmitter();
+  @Output() deleteHighlightEvent = new EventEmitter();
+  @Output() addOrEditCommentEvent = new EventEmitter();
+  @Output() createBookmarkEvent = new EventEmitter<Rectangle>();
+}
+
+@Component({
+    selector: 'mv-anno-rectangle',
+    template: '',
+    standalone: false
+})
+class MockRectangleComponent {
+  @Input() color: String;
+  @Input() zoom: number;
+  @Input() rotate: number;
+  @Input() editable: boolean;
+  @Input() pageHeight: number;
+  @Input() pageWidth: number;
+  @Input() annoRect: Rectangle;
+  @Input() selected: boolean;
+
+  @Output() selectEvent = new EventEmitter<Rectangle>();
+  @Output() updateEvent = new EventEmitter<Rectangle>();
+}
+
+describe('AnnotationViewComponent', () => {
+  let component: AnnotationViewComponent;
+  let fixture: ComponentFixture<AnnotationViewComponent>;
+
+  const annotation: Annotation = {
+    createdBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
+    createdByDetails: {
+      forename: 'em-showcase',
+      surname: 'testuser',
+      email: 'emshowcase@hmcts.net'
+    },
+    lastModifiedByDetails: {
+      forename: 'em-showcase',
+      surname: 'testuser',
+      email: 'emshowcase@hmcts.net'
+    },
+    createdDate: '2019-05-28T08:48:19.681Z',
+    lastModifiedBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
+    lastModifiedDate: '2019-05-28T08:48:33.206Z',
+    id: '123',
+    page: 1,
+    color: 'FFFF00',
+    annotationSetId: '8f7aa07c-2343-44e3-b3db-bf689066d00e',
+    comments: [],
+    rectangles: [{
+      annotationId: '123',
+      height: 100,
+      width: 100,
+      x: 50,
+      y: 50,
+      id: null,
+      createdBy: null,
+      createdByDetails: null,
+      createdDate: null,
+      lastModifiedBy: null,
+      lastModifiedByDetails: null,
+      lastModifiedDate: null
+    }],
+    type: 'highlight',
+    tags: []
+  };
+
+  beforeEach(() => {
+    return TestBed.configureTestingModule({
+      declarations: [
+        AnnotationViewComponent,
+        MockRectangleComponent,
+        MockCtxToolbarComponent,
+      ],
+      imports: [
+        StoreModule.forRoot({}),
+        StoreModule.forFeature('media-viewer', reducers)
+      ],
+      providers: [{
+        provide: ToolbarEventService,
+        useValue: {
+          toggleCommentsPanel: () => {}
+        }
+      }]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AnnotationViewComponent);
+    component = fixture.componentInstance;
+    component.annotation = annotation;
+    fixture.detectChanges();
+  });
+
+  it('should emit annotataion click event', () => {
+    component.anno = { id: 'annoId' } as any;
+    spyOn(component.annotationClick, 'emit');
+
+    component.onSelect();
+
+    expect(component.annotationClick.emit)
+      .toHaveBeenCalledWith({ annotationId: 'annoId', editable: false, selected: true });
+  });
+
+  it('should update rectangle', () => {
+    spyOn(component.update, 'emit');
+    component.anno = { rectangles: [{ id: 'rectId' }] } as any;
+    const rectangle = { id: 'rectId', height: 100, width: 100 } as any;
+
+    component.onRectangleUpdate(rectangle);
+
+    expect(component.update.emit)
+      .toHaveBeenCalledWith({ rectangles: [{ id: 'rectId', height: 100, width: 100 }] } as any);
+  });
+
+  it('should delete highlight', () => {
+    spyOn(component.delete, 'emit');
+
+    component.deleteHighlight();
+
+    expect(component.delete.emit).toHaveBeenCalled();
+  });
+
+  it('should add or edit comment',
+    inject([Store, ToolbarEventService], (store, toolbarEvents) => {
+      spyOn(store, 'dispatch');
+      spyOn(toolbarEvents, 'toggleCommentsPanel');
+      spyOn(component.annotationClick, 'emit');
+      component.anno = { comments: [], id: 'annoId', createdBy: 'me' } as any;
+
+      component.addOrEditComment();
+
+      expect(store.dispatch).toHaveBeenCalled();
+      expect(component.annotationClick.emit)
+        .toHaveBeenCalledWith({ annotationId: 'annoId', editable: true, selected: true });
+      expect(toolbarEvents.toggleCommentsPanel).toHaveBeenCalledWith(true);
+      expect(component.selected).toBeTrue();
+  }));
+
+  describe('selectedAnnoId', () => {
+    it('should set selected to true when current annotation is selected', () => {
+      const mockAnnotationId = '123';
+      component.selected = undefined;
+      component.selectedAnnoId = { annotationId: mockAnnotationId };
+      fixture.detectChanges();
+
+      expect(component.selected).toEqual(true);
+    });
+
+    it('should set selected to true when current redaction is selected', () => {
+      const mockId = '234';
+      component.selected = undefined;
+      component.anno.id = undefined;
+      component.anno.redactionId = mockId;
+
+      component.selectedAnnoId = { annotationId: mockId };
+      fixture.detectChanges();
+
+      expect(component.selected).toEqual(true);
+    });
+
+    it('should set selected to false when neiter annotation nor redaction is selected', () => {
+      const mockId = '234';
+      component.selected = undefined;
+      component.anno.redactionId = undefined;
+
+      component.selectedAnnoId = { annotationId: mockId };
+      fixture.detectChanges();
+
+      expect(component.selected).toEqual(false);
+    });
+
+    it('should set selected to false when selectedId.annotationId is not provided', () => {
+      component.selected = undefined;
+      component.anno.redactionId = undefined;
+
+      component.selectedAnnoId = { annotationId: null };
+      fixture.detectChanges();
+
+      expect(component.selected).toEqual(false);
+    });
+
+    it('should not set selected when selectedAnnoId is not provided', () => {
+      component.selected = undefined;
+      component.selectedAnnoId = null;
+      fixture.detectChanges();
+
+      expect(component.selected).toBeUndefined();
+    });
+  });
+});

package/projects/media-viewer/src/lib/annotations/annotation-set/annotation-view/annotation-view.component.ts

@@ -0,0 +1,88 @@
+import { Component, EventEmitter, Input, Output, ViewChild, ElementRef } from '@angular/core';
+import { v4 as uuid } from 'uuid';
+import { Annotation } from './annotation.model';
+import { Rectangle } from './rectangle/rectangle.model';
+import moment from 'moment-timezone';
+import { Store } from '@ngrx/store';
+import * as fromStore from '../../../store/reducers/reducers';
+import * as fromActions from '../../../store/actions/annotation.actions';
+import { SelectionAnnotation } from '../../models/event-select.model';
+import { ToolbarEventService } from '../../../toolbar/toolbar-event.service';
+import { Comment } from '../../comment-set/comment/comment.model';
+
+@Component({
+    selector: 'mv-annotation',
+    templateUrl: './annotation-view.component.html',
+    standalone: false
+})
+export class AnnotationViewComponent {  // todo rename this to selection vew c
+
+  @Input() set annotation(value) {
+    this.anno = { ...value };
+  }
+  anno: Annotation;
+  selected: boolean;
+  @Input() zoom: number;
+  @Input() rotate: number;
+  @Input() set selectedAnnoId(selectedId: { annotationId: string }) {
+    if (selectedId) {
+      const id = this.anno.id || this.anno.redactionId; // todo make it unique
+      this.selected = selectedId.annotationId ? (selectedId.annotationId === id) : false;
+    }
+  }
+  @Input() pageHeight: number;
+  @Input() pageWidth: number;
+  @Output() update = new EventEmitter<Annotation>();
+  @Output() delete = new EventEmitter<Annotation>();
+  @Output() annotationClick = new EventEmitter<SelectionAnnotation>();
+
+  @ViewChild('container', { static: false }) container: ElementRef;
+
+  constructor(
+    private readonly toolbarEvents: ToolbarEventService,
+    private store: Store<fromStore.AnnotationSetState>
+  ) { }
+
+  public onSelect() {
+    const annotationId = this.anno.id || this.anno.redactionId;
+    this.annotationClick.emit({ annotationId, editable: false, selected: true });
+  }
+
+  public onRectangleUpdate(rectangle: Rectangle) {
+    const annotation = { ...this.anno };
+    annotation.rectangles = annotation.rectangles.filter(r => r.id !== rectangle.id);
+    annotation.rectangles.push(rectangle);
+    this.update.emit(annotation);
+  }
+
+  public deleteHighlight() {
+    this.delete.emit(this.anno);
+  }
+
+  public addOrEditComment() {
+    if (this.anno.comments.length === 0) {
+      const comment: Comment = {
+        annotationId: this.anno.id,
+        content: '',
+        createdBy: this.anno.createdBy,
+        createdByDetails: undefined,
+        createdDate: moment.utc().tz('Europe/London').toISOString(),
+        id: uuid(),
+        lastModifiedBy: '',
+        lastModifiedByDetails: undefined,
+        lastModifiedDate: '',
+        tags: [],
+        page: null,
+        pages: {},
+        pageHeight: null,
+        selected: false,
+        editable: false
+      };
+      this.store.dispatch(new fromActions.AddOrEditComment(comment));
+
+    }
+    this.selected = true;
+    this.annotationClick.emit({ annotationId: this.anno.id, editable: true, selected: true });
+    this.toolbarEvents.toggleCommentsPanel(true);
+  }
+}

package/projects/media-viewer/src/lib/annotations/annotation-set/annotation-view/annotation.model.ts

@@ -0,0 +1,16 @@
+import { ApiPersisted } from '../../models/api-persisted.model';
+import { Rectangle } from './rectangle/rectangle.model';
+import { Comment } from '../../comment-set/comment/comment.model';
+import {TagsModel} from '../../models/tags.model';
+
+export interface Annotation extends ApiPersisted {
+  annotationSetId?: string;
+  annotationId?: string;
+  page?: number;
+  color?: string;
+  comments?: Comment[];
+  rectangles?: Rectangle[];
+  type?: string;
+  tags: TagsModel[];
+  redactionId?: string;
+}

package/projects/media-viewer/src/lib/annotations/annotation-set/annotation-view/rectangle/rectangle.component.html

@@ -0,0 +1,31 @@
+<div *ngIf="editable; else nonEditable">
+  <div #rectElement
+       class="rectangle"
+       draggable
+       resizable
+       [tabindex]="annoRect.id"
+       [ngClass]="{ 'selected': selected, 'grabNDrag': enableGrabNDrag }"
+       [style.backgroundColor]="'#' + color"
+       [style.width]="width + 'px'"
+       [style.height]="height + 'px'"
+       [style.left]="left + 'px'"
+       [style.top]="top + 'px'"
+       [rotate]="0"
+       [selected]="selected"
+       (click)="onClick()"
+       (stopped)="onUpdate(rectElement)">
+  </div>
+</div>
+<ng-template #nonEditable>
+  <div #rectElement
+       class="rectangle"
+       [tabindex]="annoRect.id"
+       [ngClass]="{ 'selected': selected }"
+       [style.backgroundColor]="'#' + color"
+       [style.width]="width + 'px'"
+       [style.height]="height+ 'px'"
+       [style.left]="left + 'px'"
+       [style.top]="top + 'px'"
+       (click)="onClick()">
+  </div>
+</ng-template>