chore(resource): improve still image annotation form (DEV-53)

src/app/workspace/resource/properties/properties.component.html

@@ -89,15 +89,20 @@ <h3 class="label mat-title">
         <!-- list of properties -->
         <div *ngFor="let prop of resource.resProps; let last = last">
             <!-- show property; all in case of showAll === true or only the ones with prop.values -->
-            <div *ngIf="(showAllProps || ( prop.values && prop.values.length > 0 )) &&
-                        (!prop.propDef['isLinkProperty'] &&
-                        prop.propDef.objectType !== representationConstants.stillImage &&
-                        prop.propDef.objectType !== representationConstants.movingImage &&
-                        prop.propDef.objectType !== representationConstants.audio &&
-                        prop.propDef.objectType !== representationConstants.document &&
-                        prop.propDef.objectType !== representationConstants.text)"
-                [class.border-bottom]="prop.values && !last"
-                class="property">
+            <div *ngIf="(showAllProps || ( prop.values && prop.values.length > 0 )) && (
+                !prop.propDef['isLinkProperty'] &&
+                prop.propDef.objectType !== representationConstants.stillImage &&
+                prop.propDef.objectType !== representationConstants.movingImage &&
+                prop.propDef.objectType !== representationConstants.audio &&
+                prop.propDef.objectType !== representationConstants.document &&
+                prop.propDef.objectType !== representationConstants.text &&
+                !(isAnnotation && (
+                    prop.propDef.subjectType === representationConstants.region &&
+                    prop.propDef.objectType !== representationConstants.color
+                ))
+            )"
+            [class.border-bottom]="prop.values && !last"
+            class="property">
                 <div class="property-label">
                     <!-- label of the property -->
                     <h3 class="label mat-subheading-1"

src/app/workspace/resource/properties/properties.component.ts

@@ -68,17 +68,23 @@ export class PropertiesComponent implements OnInit, OnChanges, OnDestroy {
      * input `displayProjectInfo` of properties component:
      * display project info or not; "This resource belongs to project XYZ"
      */
-    @Input() displayProjectInfo: false;
+    @Input() displayProjectInfo = false;
 
     /**
      * does the logged-in user has system or project admin permissions?
      */
-    @Input() adminPermissions: false;
+    @Input() adminPermissions = false;
 
     /**
      * is the logged-in user project member?
      */
-    @Input() editPermissions: false;
+    @Input() editPermissions = false;
+
+    /**
+     * in case properties belongs to an annotation (e.g. region in still images)
+     * in this case we don't have to display the isRegionOf property
+     */
+    @Input() isAnnotation = false;
 
     /**
      * output `referredProjectClicked` of resource view component:

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

@@ -1,40 +1,32 @@
-<form [formGroup]="regionForm">
-    <mat-form-field>
-        <mat-label>Comment*</mat-label>
-        <textarea matInput formControlName="comment"></textarea>
-    </mat-form-field>
-    <mat-form-field>
-        <mat-label>Label*</mat-label>
+<form [formGroup]="regionForm" class="form-content small-form">
+    <mat-form-field class="medium-field">
+        <mat-label>Label *</mat-label>
         <input matInput formControlName="label">
     </mat-form-field>
-    <mat-form-field>
-        <mat-label>Color*</mat-label>
-        <app-color-picker
-                #colorInput
-                [formControlName]="'color'"
-                class="value">
-            </app-color-picker>
+    <mat-form-field class="medium-field">
+        <mat-label>Comment *</mat-label>
+        <textarea matInput rows="7" formControlName="comment"></textarea>
+    </mat-form-field>
+    <mat-form-field class="medium-field without-border">
+        <mat-label>Color *</mat-label>
+        <app-color-picker #colorInput [formControlName]="'color'" class="value">
+        </app-color-picker>
     </mat-form-field>
-    <mat-form-field>
+    <mat-form-field class="hidden">
         <mat-label>Is Region Of</mat-label>
         <input matInput disabled [value]="resourceIri">
     </mat-form-field>
-<!-- Further inputs would be status, lineColor and lineWidth if we want to have these options-->
-    <div class="form-panel large-field">
+    <!-- Further inputs would be status, lineColor and lineWidth if we want to have these options-->
+    <div class="form-action form-panel medium-field">
         <span>
             <button mat-button type="button" mat-dialog-close>
                 {{ 'appLabels.form.action.cancel' | translate }}
             </button>
         </span>
         <span class="fill-remaining-space"></span>
         <span>
-            <button
-                mat-raised-button
-                [mat-dialog-close]="regionForm.value"
-                type="button"
-                color="primary"
-                [disabled]="!regionForm.valid"
-                 class="form-submit">
+            <button mat-raised-button [mat-dialog-close]="regionForm.value" type="button" color="primary"
+                [disabled]="!regionForm.valid" class="form-submit">
                 Submit
             </button>
         </span>

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

@@ -0,0 +1,11 @@
+.hidden {
+  display: none;
+}
+
+.form-content {
+  margin: 0;
+
+  .form-panel {
+    margin-top: 16px;
+  }
+}

src/app/workspace/resource/representation/file-representation.ts

@@ -32,4 +32,6 @@ export class RepresentationConstants {
     static movingImage = Constants.MovingImageFileValue;
     static stillImage = Constants.StillImageFileValue;
     static text = Constants.TextFileValue;
+    static region = Constants.Region;
+    static color = Constants.ColorValue;
 };

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

@@ -1,5 +1,5 @@
 <!-- openseadragon (osd) viewer -->
-<div class="osd-container">
+<div class="osd-container" [class.drawing]="regionDrawMode">
     <div class="action horizontal top overlay">
         <!-- caption -->
         <span class="caption mat-caption">{{imageCaption}}</span>
@@ -20,7 +20,7 @@
             <button mat-icon-button id="DSP_OSD_FULL_PAGE" matTooltip="Open in fullscreen">
                 <mat-icon>fullscreen</mat-icon>
             </button>
-            <button (click)="drawButtonClicked()" mat-icon-button matTooltip="Draw Region">
+            <button mat-icon-button id="DSP_OSD_DRAW_REGION" matTooltip="Draw Region" (click)="drawButtonClicked()">
                 <mat-icon>edit</mat-icon>
             </button>
         </span>

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

@@ -26,6 +26,10 @@ $bright: #ccc;
     background-color: $dark;
     height: 100%;
 
+    &.drawing {
+      cursor: crosshair;
+    }
+
     &.fullscreen {
       max-width: 100vw;
     }

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

@@ -111,7 +111,7 @@ export class StillImageComponent implements OnChanges, OnDestroy {
 
     @Output() regionAdded = new EventEmitter<string>();
 
-    private _regionDrawMode: Boolean = false; // stores whether viewer is currently drawing a region
+    regionDrawMode: Boolean = false; // stores whether viewer is currently drawing a region
     private _regionDragInfo; // stores the information of the first click for drawing a region
     private _viewer: OpenSeadragon.Viewer;
     private _regions: PolygonsForRegion = {};
@@ -201,7 +201,8 @@ export class StillImageComponent implements OnChanges, OnDestroy {
      * prevents navigation by mouse (so that the region can be accurately drawn).
      */
     drawButtonClicked(): void {
-        this._regionDrawMode = true;
+
+        this.regionDrawMode = true;
         this._viewer.setMouseNavEnabled(false);
     }
 
@@ -211,9 +212,9 @@ export class StillImageComponent implements OnChanges, OnDestroy {
      * @param endPoint the end point of the drawing
      * @param imageSize the image size for calculations
      */
-    private _openRegionDialog(startPoint, endPoint, imageSize, overlay): void{
+    private _openRegionDialog(startPoint: Point2D, endPoint: Point2D, imageSize: Point2D, overlay: Element): void{
         const dialogConfig: MatDialogConfig = {
-            width: '840px',
+            width: '337px',
             maxHeight: '80vh',
             position: {
                 top: '112px'
@@ -243,7 +244,7 @@ export class StillImageComponent implements OnChanges, OnDestroy {
      * @param comment the value for the comment entered in the form
      * @param label the value for the label entered in the form
      */
-    private _uploadRegion(startPoint, endPoint, imageSize, color, comment, label){
+    private _uploadRegion(startPoint: Point2D, endPoint: Point2D, imageSize: Point2D, color: string, comment: string, label: string){
         const x1 = Math.max(Math.min(startPoint.x, imageSize.x), 0)/imageSize.x;
         const x2 = Math.max(Math.min(endPoint.x, imageSize.x), 0)/imageSize.x;
         const y1 = Math.max(Math.min(startPoint.y, imageSize.y), 0)/imageSize.y;
@@ -290,7 +291,7 @@ export class StillImageComponent implements OnChanges, OnDestroy {
         new OpenSeadragon.MouseTracker({
             element: this._viewer.canvas,
             pressHandler: (event) => {
-                if (!this._regionDrawMode){
+                if (!this.regionDrawMode){
                     return;
                 }
                 const overlayElement = document.createElement('div');
@@ -320,13 +321,13 @@ export class StillImageComponent implements OnChanges, OnDestroy {
                 this._regionDragInfo.endPos = viewPortPos;
             },
             releaseHandler: () => {
-                if (this._regionDrawMode) {
+                if (this.regionDrawMode) {
                     const imageSize =  this._viewer.world.getItemAt(0).getContentSize();
                     const startPoint  = this._viewer.viewport.viewportToImageCoordinates(this._regionDragInfo.startPos);
                     const endPoint = this._viewer.viewport.viewportToImageCoordinates(this._regionDragInfo.endPos);
                     this._openRegionDialog(startPoint, endPoint, imageSize, this._regionDragInfo.overlayElement);
                     this._regionDragInfo = null;
-                    this._regionDrawMode = false;
+                    this.regionDrawMode = false;
                     this._viewer.setMouseNavEnabled(true);
                 }
             }

src/app/workspace/resource/resource.component.html

@@ -58,7 +58,7 @@
                 </ng-template>
                 <div class="region-property" *ngFor="let annotation of annotationResources" [id]="annotation.res.id"
                     [class.active]="annotation.res.id === selectedRegion">
-                    <app-properties [resource]="annotation" [displayProjectInfo]="false"
+                    <app-properties [resource]="annotation" [displayProjectInfo]="false" [isAnnotation]="true"
                     [adminPermissions]="adminPermissions" [editPermissions]="editPermissions">
                     </app-properties>
                 </div>

src/app/workspace/resource/values/text-value/text-value-as-string/text-value-as-string.component.ts

@@ -16,7 +16,7 @@ const resolvedPromise = Promise.resolve(null);
 export class TextValueAsStringComponent extends BaseValueDirective implements OnInit, OnChanges, OnDestroy {
 
     @Input() displayValue?: ReadTextValueAsString;
-    @Input() textArea?: false;
+    @Input() textArea?: boolean = false;
 
     valueFormControl: FormControl;
     commentFormControl: FormControl;

src/assets/style/_elements.scss

@@ -496,6 +496,7 @@ a,
 // form
 //
 $form-width: 472px;
+// golden cut (gc) calculation
 $gc-large: decimal-floor($form-width / 1.618, 0) - 2;
 $gc-small: $form-width - $gc-large - 4;
 
@@ -526,6 +527,18 @@ $gc-small: $form-width - $gc-large - 4;
     min-width: $form-width;
   }
 
+  &.small-form {
+    width: $gc-large;
+
+    .x-small-field,
+    .small-field,
+    .medium-field,
+    .large-field {
+      width: 100%;
+      margin-bottom: 0;
+    }
+  }
+
   .input-icon {
     color: $black-60-opacity;
   }

src/assets/style/main.scss

@@ -107,3 +107,8 @@ app-color-value {
   white-space: pre-line;
 }
 
+.mat-form-field.without-border {
+  .mat-form-field-underline {
+    display: none;
+}
+}