Fixed some Humanize issues

apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html

@@ -153,7 +153,7 @@
                                     <strong>{{ annotation.typeLabel | translate }}</strong>
                                 </div>
                                 <div *ngIf="annotation.dictionary && annotation.dictionary !== 'manual'">
-                                    <strong><span translate="dictionary"></span>: </strong>{{ annotation.dictionary | humanize }}
+                                    <strong><span translate="dictionary"></span>: </strong>{{ annotation.dictionary | humanize: false }}
                                 </div>
                                 <div *ngIf="annotation.content">
                                     <strong><span translate="content"></span>: </strong>{{ annotation.content }}
@@ -180,6 +180,6 @@
     <redaction-type-filter *ngIf="filter.topLevelFilter" [filter]="filter"></redaction-type-filter>
     <ng-container *ngIf="!filter.topLevelFilter">
         <redaction-dictionary-annotation-icon [dictionaryKey]="filter.key"></redaction-dictionary-annotation-icon>
-        {{ filter.key | humanize }}
+        {{ filter.key | humanize: false }}
     </ng-container>
 </ng-template>

apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts

@@ -12,6 +12,7 @@ import { FileStatusWrapper } from '../model/file-status.wrapper';
 import { KeycloakService } from 'keycloak-angular';
 import { environment } from '../../../../environments/environment';
 import { AnnotationDrawService } from '../service/annotation-draw.service';
+import { keypress } from '../../../utils/functions';
 
 export interface ViewerState {
     displayMode?: any;
@@ -119,6 +120,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
     private _disableElements() {
         this.instance.disableElements([
             'menuButton',
+            'selectToolButton',
             'textHighlightToolButton',
             'textUnderlineToolButton',
             'textSquigglyToolButton',
@@ -147,6 +149,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
                 type: 'toolGroupButton',
                 toolGroup: 'rectangleTools',
                 dataElement: 'shapeToolGroupButton',
+                img: '/assets/icons/general/rectangle.svg',
                 title: 'annotation.rectangle'
             });
         });
@@ -173,6 +176,11 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
                 const quadsObject = {};
                 quadsObject[activePage] = [quad];
                 const mre = this._getManualRedactionEntry(quadsObject, 'Rectangle');
+                // cleanup selection and button state
+                this.instance.annotManager.deselectAllAnnotations();
+                this.instance.disableElements(['shapeToolGroupButton']);
+                this.instance.enableElements(['shapeToolGroupButton']);
+                // dispatch event
                 this.manualAnnotationRequested.emit(new ManualRedactionEntryWrapper([quad], mre, 'REDACTION', 'RECTANGLE'));
             }
         });

apps/red-ui/src/app/state/app-state.service.ts

@@ -461,7 +461,7 @@ export class AppStateService {
                 virtual: true
             };
             for (const key of Object.keys(this._dictionaryData)) {
-                this._dictionaryData[key].label = humanize(key);
+                this._dictionaryData[key].label = humanize(key, false);
             }
         } else {
             return this._dictionaryData;

apps/red-ui/src/app/utils/functions.ts

@@ -13,11 +13,11 @@ export function computerize(str: string) {
     return frags.join('_');
 }
 
-export function humanize(str: string) {
+export function humanize(str: string, lowercase: boolean = true) {
     if (!str) {
         return undefined;
     }
-    const frags = str.toLowerCase().split(/[ \-_]+/);
+    const frags = (lowercase ? str.toLowerCase() : str).split(/[ \-_]+/);
     for (let i = 0; i < frags.length; i++) {
         frags[i] = frags[i].charAt(0).toUpperCase() + frags[i].slice(1);
     }
@@ -34,3 +34,7 @@ export function hexToRgb(hex) {
           }
         : null;
 }
+
+export function keypress(key: string) {
+    document.dispatchEvent(new KeyboardEvent('keypress', { key: key }));
+}

apps/red-ui/src/app/utils/humanize.pipe.ts

@@ -5,7 +5,7 @@ import { humanize } from './functions';
     name: 'humanize'
 })
 export class HumanizePipe implements PipeTransform {
-    transform(item: string): any {
-        return humanize(item);
+    transform(item: string, lowercase: boolean = false): any {
+        return humanize(item, lowercase);
     }
 }

apps/red-ui/src/assets/icons/general/rectangle.svg

@@ -0,0 +1,10 @@
+<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><title>icon / operation / multi select</title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g fill="#868E96">
+            <g>
+                <path
+                    d="M18.17,13.39 L16.28,13.39 L16.28,16.22 L13.44,16.22 L13.44,18.11 L16.28,18.11 L16.28,21 L18.17,21 L18.17,18.11 L21,18.11 L21,16.22 L18.17,16.22 L18.17,13.39 Z M4,18.11 L6.83,18.11 L6.83,16.22 L4.94,16.22 L4.94,14.34 L3.05,14.34 L3.05,17.17 C3.05,17.4210458 3.15039276,17.6616665 3.32884571,17.838241 C3.50729865,18.0148155 3.74896838,18.1126707 4,18.11 Z M18.17,3.94 C18.1382202,3.41127612 17.6996773,2.99904577 17.17,2.99999835 L14.39,2.99999835 L14.39,4.89 L16.28,4.89 L16.28,6.78 L18.17,6.78 L18.17,3.94 Z M4.94,4.89 L6.83,4.89 L6.83,3 L3.99999804,3 C3.74047377,2.9834001 3.48566705,3.07505767 3.29618264,3.25317302 C3.10669822,3.43128837 2.99946966,3.67994396 2.99999804,3.94 L2.99999804,6.78 L4.94,6.78 L4.94,4.89 Z M3.05,8.67 L4.94,8.67 L4.94,12.45 L3.05,12.45 L3.05,8.67 Z M16.28,8.67 L18.17,8.67 L18.17,11.5 L16.28,11.5 L16.28,8.67 Z M8.72,3 L12.5,3 L12.5,4.89 L8.72,4.89 L8.72,3 Z M8.72,16.22 L11.55,16.22 L11.55,18.11 L8.72,18.11 L8.72,16.22 Z"></path>
+            </g>
+        </g>
+    </g>
+</svg>