feat(still-image): new draw region icon (DEV-569) (#689)

* feat(still-image): new draw region icon (DEV-569)

* test(still-image): refactor tests

* refactor(add-region): remove asterisk from form

src/app/main/header/header.component.ts

@@ -41,7 +41,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
         private _session: SessionService
     ) {
 
-        // create tool icons to use them in mat-icons
+        // create own logo icon to use them in mat-icons
         this._matIconRegistry.addSvgIcon(
             'dasch_icon_black',
             this._domSanitizer.bypassSecurityTrustResourceUrl('/assets/images/dasch-icon-black.svg')

src/app/workspace/resource/representation/add-region-form/add-region-form.component.html

@@ -1,10 +1,10 @@
 <form [formGroup]="regionForm" class="form-content small-form">
     <mat-form-field class="medium-field">
-        <mat-label>Label *</mat-label>
+        <mat-label>Label</mat-label>
         <input matInput formControlName="label">
     </mat-form-field>
     <mat-form-field class="medium-field">
-        <mat-label>Comment *</mat-label>
+        <mat-label>Comment</mat-label>
         <textarea matInput rows="7" formControlName="comment"></textarea>
     </mat-form-field>
     <mat-form-field class="medium-field without-border">

src/app/workspace/resource/representation/still-image/still-image.component.html

@@ -40,7 +40,7 @@
                 <mat-icon>fullscreen</mat-icon>
             </button>
             <button mat-icon-button id="DSP_OSD_DRAW_REGION" matTooltip="Draw Region" (click)="drawButtonClicked()">
-                <mat-icon>edit</mat-icon>
+                <mat-icon svgIcon="draw_region_icon"></mat-icon>
             </button>
         </span>
     </div>

src/app/workspace/resource/representation/still-image/still-image.component.spec.ts

@@ -1,10 +1,12 @@
+import { HttpClientModule } from '@angular/common/http';
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { Constants, ReadGeomValue, ReadResource, ReadValue } from '@dasch-swiss/dsp-js';
 import { AppInitService } from 'src/app/app-init.service';
 import { DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens';
@@ -120,8 +122,13 @@ describe('StillImageComponent', () => {
         };
 
         TestBed.configureTestingModule({
-            declarations: [StillImageComponent, TestHostComponent],
+            declarations: [
+                StillImageComponent,
+                TestHostComponent
+            ],
             imports: [
+                BrowserAnimationsModule,
+                HttpClientModule,
                 MatDialogModule,
                 MatIconModule,
                 MatSnackBarModule,

src/app/workspace/resource/representation/still-image/still-image.component.ts

@@ -10,23 +10,31 @@ import {
     SimpleChanges
 } from '@angular/core';
 import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
 import {
-    Constants, CreateColorValue, CreateGeomValue, CreateLinkValue,
-    CreateResource, CreateTextValueAsString, KnoraApiConnection,
-    Point2D, ReadColorValue, ReadFileValue,
+    Constants,
+    CreateColorValue,
+    CreateGeomValue,
+    CreateLinkValue,
+    CreateResource,
+    CreateTextValueAsString,
+    KnoraApiConnection,
+    Point2D,
+    ReadColorValue,
+    ReadFileValue,
     ReadGeomValue,
     ReadResource,
     ReadStillImageFileValue,
-    ReadValue,
     RegionGeometry
 } from '@dasch-swiss/dsp-js';
+import * as OpenSeadragon from 'openseadragon';
 import { DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens';
 import { DialogComponent } from 'src/app/main/dialog/dialog.component';
 import { ErrorHandlerService } from 'src/app/main/error/error-handler.service';
+import { NotificationService } from 'src/app/main/services/notification.service';
 import { DspCompoundPosition } from '../../dsp-resource';
 import { FileRepresentation } from '../file-representation';
-import * as OpenSeadragon from 'openseadragon';
-import { NotificationService } from 'src/app/main/services/notification.service';
 
 
 /**
@@ -119,15 +127,23 @@ export class StillImageComponent implements OnChanges, OnDestroy {
 
     constructor(
         @Inject(DspApiConnectionToken) private _dspApiConnection: KnoraApiConnection,
-        private _elementRef: ElementRef,
         private _dialog: MatDialog,
+        private _domSanitizer: DomSanitizer,
+        private _elementRef: ElementRef,
         private _errorHandler: ErrorHandlerService,
+        private _matIconRegistry: MatIconRegistry,
         private _notification: NotificationService
     ) {
         OpenSeadragon.setString('Tooltips.Home', '');
         OpenSeadragon.setString('Tooltips.ZoomIn', '');
         OpenSeadragon.setString('Tooltips.ZoomOut', '');
         OpenSeadragon.setString('Tooltips.FullPage', '');
+
+        // own draw region icon; because it does not exist in the material icons
+        this._matIconRegistry.addSvgIcon(
+            'draw_region_icon',
+            this._domSanitizer.bypassSecurityTrustResourceUrl('/assets/images/draw-region-icon.svg')
+        );
     }
     /**
      * calculates the surface of a rectangular region.