Skip to content
Permalink
Browse files
chore(resource): improve still image annotation form (DEV-53) (#549)
* chore(region): do not display "Region of" in region tab of resource

* chore(value): fix type definition

* style(region): better cursor to create region

* fix(region): display the correct properties

* style(region): redesign still image annotation form
  • Loading branch information
kilchenmann committed Oct 8, 2021
1 parent 79abd10 commit 38bbe4192add49171688df230eaa2df8f0aaa633
Show file tree
Hide file tree
Showing 12 changed files with 87 additions and 48 deletions.
@@ -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"
@@ -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:
@@ -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>
@@ -0,0 +1,11 @@
.hidden {
display: none;
}

.form-content {
margin: 0;

.form-panel {
margin-top: 16px;
}
}
@@ -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;
};
@@ -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>
@@ -26,6 +26,10 @@ $bright: #ccc;
background-color: $dark;
height: 100%;

&.drawing {
cursor: crosshair;
}

&.fullscreen {
max-width: 100vw;
}
@@ -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);
}
}
@@ -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>
@@ -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;
@@ -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;
}
@@ -107,3 +107,8 @@ app-color-value {
white-space: pre-line;
}

.mat-form-field.without-border {
.mat-form-field-underline {
display: none;
}
}

0 comments on commit 38bbe41

Please sign in to comment.