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

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

@@ -0,0 +1,239 @@
+import { ComponentFixture, TestBed} from '@angular/core/testing';
+import { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core';
+import { RectangleComponent } from './rectangle.component';
+import { FormsModule } from '@angular/forms';
+import { MutableDivModule } from 'mutable-div';
+import { By } from '@angular/platform-browser';
+import { HighlightCreateService } from '../../annotation-create/highlight-create/highlight-create.service';
+import { StoreModule } from '@ngrx/store';
+import { reducers } from '../../../../store/reducers/reducers';
+
+describe('RectangleComponent', () => {
+  let component: RectangleComponent;
+  let fixture: ComponentFixture<RectangleComponent>;
+  let rectangleEl: DebugElement;
+  let nativeElement;
+  let mockRectangle;
+
+  beforeEach(() => {
+    mockRectangle = {
+      id: '16d5c513-15f9-4c39-8102-88bdb85d8831',
+      createdBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
+      createdByDetails: {
+        'forename': 'Linus',
+        'surname': 'Norton',
+        'email': 'linus.norton@hmcts.net'
+      },
+      createdDate: '2018-05-28T08:48:33.206Z',
+      lastModifiedBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
+      lastModifiedByDetails: {
+        'forename': 'Jeroen',
+        'surname': 'Rijks',
+        'email': 'jeroen.rijks@hmcts.net'
+      },
+      lastModifiedDate: '2019-05-28T08:48:33.206Z',
+      annotationId: '123annotationId',
+      height: 100,
+      width: 50,
+      x: 5,
+      y: 10,
+    };
+  });
+
+  beforeEach(() => {
+    return TestBed.configureTestingModule({
+      declarations: [RectangleComponent],
+      imports: [
+        FormsModule,
+        MutableDivModule,
+        StoreModule.forFeature('media-viewer', reducers),
+        StoreModule.forRoot({})
+      ],
+      providers: [HighlightCreateService],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA, ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RectangleComponent);
+    component = fixture.componentInstance;
+    component.annoRect = mockRectangle;
+    component.pageHeight = 800;
+    component.pageWidth = 400;
+    component.zoom = 1;
+    component.rotate = 0;
+    component.editable = true;
+    component.selected = false;
+    component.enableGrabNDrag = false;
+    nativeElement = fixture.debugElement.nativeElement;
+    fixture.detectChanges();
+    rectangleEl = fixture.debugElement.query(By.css('.rectangle'));
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set dimentions on annoRect input with 0.5 zoom', () => {
+    component.zoom = 0.5;
+    component.annoRect = mockRectangle;
+
+    expect(component.height).toBe(50);
+    expect(component.width).toBe(25);
+    expect(component.top).toBe(5);
+    expect(component.left).toBe(2.5);
+  });
+
+  it('should maitain dimensions when rotation is zero', () => {
+    component.zoom = 0.5;
+    component.annoRect = mockRectangle;
+    component.adjustForRotation(0);
+
+    expect(component.height).toBe(50);
+    expect(component.width).toBe(25);
+    expect(component.top).toBe(5);
+    expect(component.left).toBe(2.5);
+  });
+
+  it('should adjust dimensions when rotation is 90deg', () => {
+    component.zoom = 0.5;
+    component.annoRect = mockRectangle;
+    component.adjustForRotation(90);
+
+    expect(component.height).toBe(25);
+    expect(component.width).toBe(50);
+    expect(component.top).toBe(2.5);
+    expect(component.left).toBe(345);
+  });
+
+  it('should adjust dimensions when rotation is 180deg', () => {
+    component.zoom = 0.5;
+    component.annoRect = mockRectangle;
+    component.adjustForRotation(180);
+
+    expect(component.height).toBe(50);
+    expect(component.width).toBe(25);
+    expect(component.top).toBe(745);
+    expect(component.left).toBe(372.5);
+  });
+
+  it('should adjust dimensions when rotation is 270deg', () => {
+    component.zoom = 0.5;
+    component.annoRect = mockRectangle;
+    component.adjustForRotation(270);
+
+    expect(component.height).toBe(25);
+    expect(component.width).toBe(50);
+    expect(component.top).toBe(772.5);
+    expect(component.left).toBe(5);
+  });
+
+  it('should emit a click', () => {
+    spyOn(component.selectEvent, 'emit');
+    component.onClick();
+
+    expect(component.selectEvent.emit).toHaveBeenCalledTimes(1);
+  });
+
+  it('should update the rectangle if moved', () => {
+    const oldLeft = rectangleEl.nativeElement.offsetLeft;
+    const oldTop = rectangleEl.nativeElement.offsetTop;
+
+    const pointerDownEvent = createPointerEvent('pointerdown', 500, 500, 500, 500);
+    const pointerMoveEvent = createPointerEvent('pointermove', 750, 750, 900, 900);
+    const pointerUpEvent = createPointerEvent('pointerup', 750, 800, 750, 800);
+
+    rectangleEl.nativeElement.dispatchEvent(pointerDownEvent);
+    rectangleEl.nativeElement.dispatchEvent(pointerMoveEvent);
+    rectangleEl.nativeElement.dispatchEvent(pointerUpEvent);
+
+    fixture.detectChanges();
+    expect(rectangleEl.nativeElement.offsetLeft).not.toEqual(oldLeft);
+    expect(rectangleEl.nativeElement.offsetTop).not.toEqual(oldTop);
+  });
+
+  it('should update the rectangle if resized', () => {
+    const oldWidth = rectangleEl.nativeElement.offsetWidth;
+    const oldHeight = rectangleEl.nativeElement.offsetHeight;
+
+    const pointerDownEvent = createPointerEvent('pointerdown', 500, 500, 500, 500);
+    const pointerMoveEvent = createPointerEvent('pointermove', 750, 750, 900, 900);
+    const pointerUpEvent = createPointerEvent('pointerup', 750, 800, 750, 800);
+
+    rectangleEl.nativeElement.dispatchEvent(new Event('pointerdown'));
+    fixture.detectChanges();
+    const bottomRightHandle = document.querySelector('.BOTTOM-RIGHT');
+    bottomRightHandle.dispatchEvent(pointerDownEvent);
+    bottomRightHandle.dispatchEvent(pointerMoveEvent);
+    bottomRightHandle.dispatchEvent(pointerUpEvent);
+
+    fixture.detectChanges();
+    expect(rectangleEl.nativeElement.offsetWidth).not.toEqual(oldWidth);
+    expect(rectangleEl.nativeElement.offsetHeight).not.toEqual(oldHeight);
+  });
+
+  it('should not update the rectangle if the rectangle did not change', () => {
+    spyOn(component.updateEvent, 'emit');
+    component.left = rectangleEl.nativeElement.offsetLeft;
+    component.top = rectangleEl.nativeElement.offsetTop;
+    component.width = rectangleEl.nativeElement.offsetWidth;
+    component.height = rectangleEl.nativeElement.offsetHeight;
+
+    const pointerDownEvent = createPointerEvent('pointerdown', 500, 500, 500, 500);
+    const pointerMoveEvent = createPointerEvent('pointermove', 500, 500, 500, 500);
+    const pointerUpEvent = createPointerEvent('pointerup', 500, 500, 500, 500);
+
+    rectangleEl.nativeElement.dispatchEvent(pointerDownEvent);
+    rectangleEl.nativeElement.dispatchEvent(pointerMoveEvent);
+    rectangleEl.nativeElement.dispatchEvent(pointerUpEvent);
+
+    fixture.detectChanges();
+    expect(rectangleEl.nativeElement.offsetLeft).toEqual(component.left);
+    expect(rectangleEl.nativeElement.offsetTop).toEqual(component.top);
+    expect(rectangleEl.nativeElement.offsetWidth).toEqual(component.width);
+    expect(rectangleEl.nativeElement.offsetHeight).toEqual(component.height);
+    expect(component.updateEvent.emit).not.toHaveBeenCalled();
+  });
+
+  it('should compare 2 rectangles values and see if its the same', () => {
+    const rect = {
+      offsetLeft: 100,
+      offsetTop: 100,
+      offsetWidth: 100,
+      offsetHeight: 100
+    };
+    let hasRectChanged = component.hasRectangleChanged(rect);
+    expect(hasRectChanged).toEqual(true);
+
+    component.top = 100;
+    component.left = 100;
+    component.height = 100;
+    component.width = 100;
+    hasRectChanged = component.hasRectangleChanged(rect);
+    expect(hasRectChanged).toEqual(false);
+  });
+
+  function createPointerEvent(typeArg: string, screenX: number, screenY: number, clientX: number, clientY: number) {
+    const pointerEvent = document.createEvent('MouseEvents');
+    pointerEvent.initMouseEvent(
+      typeArg,
+      true,
+      true,
+      window,
+      1,
+      screenX,
+      screenY,
+      clientX,
+      clientY,
+      false,
+      false,
+      false,
+      false,
+      0,
+      null
+    );
+    return pointerEvent as PointerEvent;
+  }
+});

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

@@ -0,0 +1,135 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  SimpleChanges,
+  ViewChild
+} from '@angular/core';
+import { Rectangle } from './rectangle.model';
+import { Subscription } from 'rxjs';
+import { ToolbarEventService } from '../../../../toolbar/toolbar-event.service';
+import { HighlightCreateService } from '../../annotation-create/highlight-create/highlight-create.service';
+
+@Component({
+    selector: 'mv-anno-rectangle',
+    templateUrl: './rectangle.component.html',
+    standalone: false
+})
+export class RectangleComponent implements OnChanges, AfterViewInit, OnDestroy {
+
+  @Input() color: String;
+  @Input() zoom: number;
+  @Input() rotate: number;
+  @Input() editable: boolean;
+  @Input() pageHeight: number;
+  @Input() pageWidth: number;
+
+  @Output() selectEvent = new EventEmitter<Rectangle>();
+  @Output() updateEvent = new EventEmitter<Rectangle>();
+
+  @ViewChild('rectElement', {static: false}) viewRect: ElementRef;
+
+  private subscriptions: Subscription[] = [];
+  _selected: boolean;
+  enableGrabNDrag = false;
+
+  height: number;
+  width: number;
+  top: number;
+  left: number;
+
+  _annoRect: Rectangle;
+  @Input()
+  set annoRect(annoRect: Rectangle) {
+    this._annoRect = { ...annoRect };
+    this.height = +(annoRect.height * this.zoom).toFixed(2);
+    this.width = +(annoRect.width * this.zoom).toFixed(2);
+    this.left = +(annoRect.x * this.zoom).toFixed(2);
+    this.top = +(annoRect.y * this.zoom).toFixed(2);
+  }
+
+  get annoRect() {
+    return this._annoRect;
+  }
+
+
+  constructor(private readonly toolbarEvents: ToolbarEventService,
+              private readonly highlightService: HighlightCreateService) {}
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.rotate) {
+      this.adjustForRotation(this.rotate);
+    }
+  }
+
+  ngAfterViewInit() {
+    this.subscriptions.push(
+      this.toolbarEvents.grabNDrag.subscribe(grabNDrag => this.enableGrabNDrag = grabNDrag)
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.filter(subscription => !subscription.closed)
+      .forEach(subscription => subscription.unsubscribe());
+  }
+
+  @Input()
+  set selected(selected: boolean) {
+    this._selected = selected;
+    if (this._selected && this.viewRect) {
+      this.viewRect.nativeElement.focus();
+    }
+  }
+
+  get selected() {
+    return this._selected;
+  }
+
+  onClick() {
+    this.selectEvent.emit(this.annoRect);
+  }
+
+  onUpdate(viewRect: any) {
+    const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = viewRect;
+    if (this.hasRectangleChanged(viewRect)) {
+      let rectangle = this.highlightService
+        .applyRotation(this.pageHeight, this.pageWidth, offsetHeight, offsetWidth, offsetTop, offsetLeft, this.rotate, this.zoom);
+      rectangle = { ...this.annoRect, ...rectangle };
+      this.updateEvent.emit({ ...rectangle });
+    }
+  }
+
+  adjustForRotation(rotation: number) {
+    const { top, left, height, width } = this;
+    switch (rotation) {
+      case 90:
+        this.width = height;
+        this.height = width;
+        this.left = this.pageWidth  - top - height;
+        this.top = left;
+        break;
+      case 180:
+        this.left = this.pageWidth - left - width;
+        this.top = this.pageHeight - top - height;
+        break;
+      case 270:
+        this.width = height;
+        this.height = width;
+        this.left = top;
+        this.top = this.pageHeight - left - width;
+        break;
+    }
+  }
+
+  hasRectangleChanged(viewRect): boolean {
+    return Math.round(this.left) !== viewRect.offsetLeft ||
+      Math.round(this.top) !== viewRect.offsetTop ||
+      Math.round(this.width) !== viewRect.offsetWidth ||
+      Math.round(this.height) !== viewRect.offsetHeight;
+  }
+}

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

@@ -0,0 +1,9 @@
+import { ApiPersisted } from '../../../models/api-persisted.model';
+
+export interface Rectangle extends ApiPersisted {
+  annotationId: string;
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+}

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

@@ -0,0 +1,30 @@
+<div class="toolbar" *ngIf="rectangle"
+     [style.top.px]="top"
+     [style.left.px]="left">
+  <button *ngIf="canHighlight"
+          type="button" title="Highlight"
+          class="aui__toolbar-button aui__toolbar-button--comments contextual-btn leftButton aui__toolbar-button-highlight"
+          (mousedown)="createHighlight()">
+    <span>Highlight</span>
+  </button>
+  <button *ngIf="canDelete"
+          type="button" title="Delete"
+          class="aui__toolbar-button aui__toolbar-button--comments contextual-btn leftButton"
+          (mousedown)="deleteHighlight()">
+    <span>Remove</span>
+  </button>
+  <button *ngIf="canComment"
+          type="button" title="Comment"
+          class="aui__toolbar-button aui__toolbar-button--comments contextual-btn rightButton aui__toolbar-button-comment"
+          (mousedown)="addOrEditComment()">
+    <span>Comment</span></button>
+  <button *ngIf="canBookmark"
+          type="button" title="Bookmark"
+          class="aui__toolbar-button aui__toolbar-button--comments contextual-btn rightButton aui__toolbar-button-bookmark"
+          id="bookmarkButton"
+          (mousedown)="createBookmark()">
+    <span>Bookmark</span></button>
+  <div class="arrow-down">
+    <div class="inner-triangle"></div>
+  </div>
+</div>

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

@@ -0,0 +1,278 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CtxToolbarComponent } from './ctx-toolbar.component';
+import { By } from '@angular/platform-browser';
+import { EventEmitter } from '@angular/core';
+
+describe('CtxToolbarComponent', () => {
+  let component: CtxToolbarComponent;
+  let fixture: ComponentFixture<CtxToolbarComponent>;
+  const mockRectangle = {
+    x: 100, y: 100, width: 100, height: 20,
+    id: '16d5c513-15f9-4c39-8102-88bdb85d8831',
+    annotationId: '4f3f9361-6d17-4689-81dd-5cb2e317b329',
+    createdDate: '2018-05-28T08:48:33.206Z',
+    createdBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
+    createdByDetails: {
+      'forename': 'Linus',
+      'surname': 'Norton',
+      'email': 'linus.norton@hmcts.net'
+    },
+    lastModifiedDate: '2019-05-28T08:48:33.206Z',
+    lastModifiedBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
+    lastModifiedByDetails: {
+      'forename': 'Jeroen',
+      'surname': 'Rijks',
+      'email': 'jeroen.rijks@hmcts.net'
+    },
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CtxToolbarComponent]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(CtxToolbarComponent);
+    component = fixture.componentInstance;
+    component.rectangles = [mockRectangle];
+    component.zoom = 1;
+    component.ngOnChanges({ zoom: { previousValue: undefined, currentValue: 1, firstChange: true, isFirstChange: () => true }});
+
+    fixture.detectChanges();
+  });
+
+  afterEach(() => {
+    if (component.rectangle) {
+      component.rectangle.x = 100;
+      component.rectangle.y = 100;
+    }
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set rectangle', () => {
+    const rectangles = [{ y: 10 }, { y: 20 }] as any;
+    component.rectangles = rectangles;
+
+    expect(component._rectangles).toEqual(rectangles);
+    expect(component.rectangle).toEqual({ y: 10 } as any);
+  });
+
+  it('should create highlight', function () {
+    spyOn(component.createHighlightEvent, 'emit');
+    component.rectangle = { id: 'rectId' } as any;
+
+    component.createHighlight();
+
+    expect(component.createHighlightEvent.emit).toHaveBeenCalled();
+    expect(component.rectangle).toBeUndefined();
+  });
+
+  it('should delete highlight', () => {
+    const mockDeleteEvent = new EventEmitter();
+    spyOn(mockDeleteEvent, 'emit');
+    component.canDelete = true;
+    fixture.detectChanges();
+
+    component.deleteHighlightEvent = mockDeleteEvent;
+    const deleteBtn = fixture.debugElement.query(By.css('button[title=Delete]'));
+    deleteBtn.triggerEventHandler('mousedown', {});
+
+    expect(mockDeleteEvent.emit).toHaveBeenCalledWith();
+  });
+
+  it('should create comment', () => {
+    const mockCommentEvent = new EventEmitter();
+    spyOn(mockCommentEvent, 'emit');
+    component.canComment = true;
+    fixture.detectChanges();
+
+    component.addOrEditCommentEvent = mockCommentEvent;
+    const commentBtn = fixture.debugElement.query(By.css('button[title=Comment]'));
+    commentBtn.triggerEventHandler('mousedown', {});
+
+    expect(mockCommentEvent.emit).toHaveBeenCalledWith();
+  });
+
+  it('adjust its position', () => {
+    const element = fixture.debugElement.query(By.css('div'));
+    expect(element.styles.left).toEqual('0px');
+    expect(element.styles.top).toEqual('30px');
+  });
+
+  it('rotate 90 should align to top and horizontally with highlight', () => {
+    component.rotate = 90;
+    fixture.detectChanges();
+    const element = fixture.debugElement.query(By.css('div'));
+    expect(element.styles.left).toEqual('0px');
+    expect(element.styles.top).toEqual('30px');
+  });
+
+  it('rotate 180 should align to left and horizontally with highlight (accounting for highlight dimensions)', () => {
+    component.rotate = 180;
+    fixture.detectChanges();
+    const element = fixture.debugElement.query(By.css('div'));
+    expect(element.styles.left).toEqual('0px');
+    expect(element.styles.top).toEqual('30px');
+  });
+
+  it('rotate 270 should align to bottom and horizontally with highlight (accounting for highlight dimensions)', () => {
+    component.rotate = 270;
+    fixture.detectChanges();
+    const element = fixture.debugElement.query(By.css('div'));
+    expect(element.styles.left).toEqual('0px');
+    expect(element.styles.top).toEqual('30px');
+  });
+
+  it('top should default to 30px when annotation is at the top of the page', () => {
+    component.rotate = 0;
+    component.rectangle.y = 0;
+    fixture.detectChanges();
+    const element = fixture.debugElement.query(By.css('div'));
+    expect(element.styles.top).toEqual('30px');
+  });
+
+  it('rotate 90 should set top to calculated value when pop-up is not at the edge of the page', () => {
+    component.rotate = 90;
+    component.rectangle.y = 200;
+    fixture.detectChanges();
+    const element = fixture.debugElement.query(By.css('div'));
+    expect(element.styles.top).toEqual('30px');
+  });
+
+  it('rotate 90 should align top to the height of the page when annotation is at far left of page', () => {
+    component.rotate = 90;
+    component.rectangle.y = 600;
+    component.pageHeight = 750;
+    fixture.detectChanges();
+    const element = fixture.debugElement.query(By.css('div'));
+    expect(element.styles.top).toEqual('30px');
+  });
+
+  it('rotate 270 should set top to calculated value when pop-up is not at the edge of the page', () => {
+    component.rotate = 270;
+    component.rectangle.y = 250;
+    fixture.detectChanges();
+    const element = fixture.debugElement.query(By.css('div'));
+    expect(element.styles.top).toEqual('30px');
+  });
+
+  it('rotate 270 should align top to 30px when annotation is at the far right of the page', () => {
+    component.rotate = 270;
+    component.rectangle.y = 900;
+    fixture.detectChanges();
+    const element = fixture.debugElement.query(By.css('div'));
+    expect(element.styles.top).toEqual('30px');
+  });
+
+  it('left should default to 0px when annotation is at the far left of the page', () => {
+    component.rotate = 0;
+    component.rectangle.x = 0;
+    fixture.detectChanges();
+    const element = fixture.debugElement.query(By.css('div'));
+    expect(element.styles.left).toEqual('0px');
+  });
+
+  it('left should default to 0px when annotation is at the far right of the page', () => {
+    component.rotate = 0;
+    component.rectangle.x = 600;
+    fixture.detectChanges();
+    const element = fixture.debugElement.query(By.css('div'));
+    expect(element.styles.left).toEqual('0px');
+  });
+
+  it('left should be set to calculated value when pop-up is not at the edge of the page', () => {
+    component.rotate = 0;
+    component.rectangle.x = 250;
+    fixture.detectChanges();
+    const element = fixture.debugElement.query(By.css('div'));
+    expect(element.styles.left).toEqual('0px');
+  });
+
+  it('rotate 180 should align left to width - defaultWidth when annotation is at the far left of the page', () => {
+    component.rotate = 180;
+    component.rectangle.x = 750;
+    component.pageWidth = 350;
+    fixture.detectChanges();
+    const element = fixture.debugElement.query(By.css('div'));
+    expect(element.styles.left).toEqual('0px');
+  });
+
+  it('rotate 180 should set left to calculated value when pop-up is not at the edge of the page', () => {
+    component.rotate = 180;
+    component.rectangle.x = 250;
+
+    fixture.detectChanges();
+    const element = fixture.debugElement.query(By.css('div'));
+
+    expect(element.styles.left).toEqual('0px');
+  });
+
+  describe('rectangles', () => {
+    it('should call setRectangle, popupTop and popupLeft when rectangles provided', () => {
+      spyOn(component, 'setRectangle').and.callThrough();
+
+      component.rectangles = [mockRectangle];
+      fixture.detectChanges();
+
+      expect(component.setRectangle).toHaveBeenCalled();
+    });
+
+    it('should not call setRectangle, popupTop and popupLeft when rectangles is not provided', () => {
+      spyOn(component, 'setRectangle').and.callThrough();
+      spyOn(component, 'popupTop').and.callThrough();
+      spyOn(component, 'popupLeft').and.callThrough();
+
+      component.rectangles = null;
+      fixture.detectChanges();
+
+      expect(component.setRectangle).not.toHaveBeenCalled();
+      expect(component.popupTop).not.toHaveBeenCalled();
+      expect(component.popupLeft).not.toHaveBeenCalled();
+    });
+  });
+
+  it('should emit an event when createBookmark called', () => {
+    component.rectangle = mockRectangle;
+    fixture.detectChanges();
+
+    spyOn(component.createBookmarkEvent, 'emit').and.callThrough();
+    component.createBookmark();
+
+    expect(component.createBookmarkEvent.emit).toHaveBeenCalledWith(mockRectangle);
+    expect(component.rectangle).toBeUndefined();
+  });
+
+  describe('setRectangle', () => {
+    beforeEach(() => {
+      component.pageWidth = 300;
+      component.pageHeight = 200;
+    });
+
+    [
+      { rotate: 90, zoom: 1, rectangle: { x: 180, y: 100, width: 20, height: 100 } },
+      { rotate: 90, zoom: 2, rectangle: { x: 30, y: 100, width: 20, height: 100 } },
+      { rotate: 180, zoom: 1, rectangle: { x: 100, y: 80, width: 100, height: 20 } },
+      { rotate: 180, zoom: 2, rectangle: { x: -50, y: -20, width: 100, height: 20 } },
+      { rotate: 270, zoom: 1, rectangle: { x: 100, y: 0, width: 20, height: 100 } },
+      { rotate: 270, zoom: 2, rectangle: { x: 100, y: -100, width: 20, height: 100 } }
+    ]
+      .forEach((take: {rotate: number, zoom: number, rectangle: { x: number, y: number, width: number, height: number}}) => {
+        it(`should update the rectangle when rotate ${take.rotate}deg, zoom = ${take.zoom}`, () => {
+          component.rotate = take.rotate;
+          component.zoom = take.zoom;
+          fixture.detectChanges();
+
+          component.setRectangle();
+
+          expect(component.rectangle.x).toEqual(take.rectangle.x);
+          expect(component.rectangle.y).toEqual(take.rectangle.y);
+          expect(component.rectangle.width).toEqual(take.rectangle.width);
+          expect(component.rectangle.height).toEqual(take.rectangle.height);
+        });
+      }
+    );
+  });
+});