At/text tool improvements (#9)

* Checking for touch event only when defined in browser

* Adding multi-line support

input => content-editable div

* Floating-text-entry componentized

* Providing radix parameter in font-string parsing

Using projection factor when dragging text box

* Using hidden input for textbox

Author: drewdaemon

package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build",
+    "build": "ng build && cp LICENSE dist/ && cp README.md dist/",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"

projects/aia-lib/src/lib/aia-lib.module.ts

@@ -1,9 +1,12 @@
 import { NgModule } from '@angular/core';
 import { AiaImageAnnotatorComponent } from './components/aia-image-annotator/aia-image-annotator.component';
+import { FloatingTextEntryComponent } from './components/aia-image-annotator/floating-text-entry/floating-text-entry.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
-  declarations: [AiaImageAnnotatorComponent],
+  declarations: [AiaImageAnnotatorComponent, FloatingTextEntryComponent],
   imports: [
+    FormsModule
   ],
   exports: [AiaImageAnnotatorComponent]
 })

projects/aia-lib/src/lib/components/aia-image-annotator/aia-image-annotator.component.html

@@ -3,6 +3,6 @@
         <canvas class="image-canvas" #imageCanvas [width]="imageWidth" [height]="imageHeight" [style.width.px]="displayWidth" [style.height.px]="displayHeight"></canvas>
         <canvas #drawingCanvas (touchstart)="touchStart($event)" (touchmove)="touchMove($event)" (touchend)="touchEnd($event)"  (mousedown)="mouseDown($event)" (mousemove)="mouseMove($event)" (mouseup)="mouseUp($event)" [width]="imageWidth" [height]="imageHeight" [style.width.px]="displayWidth" [style.height.px]="displayHeight"></canvas>
         <canvas #mergeCanvas class="merge-canvas" [width]="imageWidth" [height]="imageHeight"></canvas>
-        <input (keyup)="keyUp($event)" #textBox autocomplete="off" class="floating-text-entry">
+        <aia-floating-text-entry (mouseup)="mouseUp($event)" (touchend)="touchEnd($event)"></aia-floating-text-entry>
     </div>
 </div>

projects/aia-lib/src/lib/components/aia-image-annotator/aia-image-annotator.component.scss

@@ -17,12 +17,5 @@
                 display: none;
             }
         }
-        .floating-text-entry {
-            position: absolute;
-            padding: 0;
-            margin: 0;
-            background-color: rgba(0,0,0,0);
-            border: 0;
-        }
     }
 }

projects/aia-lib/src/lib/components/aia-image-annotator/aia-image-annotator.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, ViewChild, ElementRef, Input, OnChanges } from '@ang
 import { DrawState, PencilState, TextState, DrawCommand, StateName, ClearCommand } from './helpers/draw-state.interface';
 import { EventTranslator } from './helpers/event-translator';
 import { DEFAULTS } from './helpers/defaults';
+import { FloatingTextEntryComponent } from './floating-text-entry/floating-text-entry.component';
 
 @Component({
   selector: 'aia-image-annotator',
@@ -37,7 +38,7 @@ export class AiaImageAnnotatorComponent implements OnInit, OnChanges {
   @ViewChild('imageCanvas') private imageCanvasRef: ElementRef;
   @ViewChild('drawingCanvas') private drawingCanvasRef: ElementRef;
   @ViewChild('mergeCanvas') private mergeCanvasRef: ElementRef;
-  @ViewChild('textBox') textBoxRef: ElementRef;
+  @ViewChild(FloatingTextEntryComponent) textEntry: FloatingTextEntryComponent;
 
   public imageWidth = 0;
   public imageHeight = 0;
@@ -219,20 +220,20 @@ export class AiaImageAnnotatorComponent implements OnInit, OnChanges {
    * Sets the color and the font
    */
   private setColorAndFont(color: string, fontSize: string, fontFamily: string) {
-    if (!this.drawingCtx || !this.textBoxRef) {
+    if (!this.drawingCtx) {
       return;
     }
 
     this.drawingCtx.strokeStyle = color || DEFAULTS.color;
     this.drawingCtx.fillStyle = color || DEFAULTS.color;
-    this.textBoxRef.nativeElement.style.color = color || DEFAULTS.color;
+    this.textEntry.setColor(color || DEFAULTS.color);
 
     const fontString = `${fontSize || DEFAULTS.fontSize} ${fontFamily || DEFAULTS.fontFamily}`;
     this.drawingCtx.font = fontString;
 
     const fontParts = fontSize.match(/(.*)(px|pt)/);
-    const adjustedFontSize = Math.floor(parseInt(fontParts[1]) / this.projectionFactor) + fontParts[2];
-    this.textBoxRef.nativeElement.style.font = `${adjustedFontSize || DEFAULTS.fontSize} ${fontFamily || DEFAULTS.fontFamily}`;
+    const adjustedFontSize = Math.floor(parseInt(fontParts[1], 10) / this.projectionFactor) + fontParts[2];
+    this.textEntry.setFont(`${adjustedFontSize || DEFAULTS.fontSize} ${fontFamily || DEFAULTS.fontFamily}`);
   }
 
 
@@ -295,7 +296,4 @@ export class AiaImageAnnotatorComponent implements OnInit, OnChanges {
     this._state.contactEnd(this, contactEvent);
   }
 
-  public keyUp(ev: KeyboardEvent) {
-    this._state.keyUp(this, ev);
-  }
 }

projects/aia-lib/src/lib/components/aia-image-annotator/floating-text-entry/floating-text-entry.component.html

@@ -0,0 +1,4 @@
+<div #textBox class="floating-text-entry">
+    <textarea #input [(ngModel)]="currentText"></textarea>
+    <p>{{currentText}}&nbsp;</p>
+</div>

projects/aia-lib/src/lib/components/aia-image-annotator/floating-text-entry/floating-text-entry.component.scss

@@ -0,0 +1,27 @@
+.floating-text-entry {
+    display: none;
+    position: absolute;
+    padding: 0;
+    margin: 0;
+    background-color: rgba(0,0,0,0);
+    border: 1px solid rgb(90, 165, 190);
+    text-align: left;
+    white-space: pre;
+
+    p {
+        padding: 0;
+        margin: 0;
+    }
+
+    textarea {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        height: 0;
+        width: 0;
+        border: 0;
+        padding: 0;
+        background: rgba(0,0,0,0);
+        resize: none;
+    }
+}

projects/aia-lib/src/lib/components/aia-image-annotator/floating-text-entry/floating-text-entry.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FloatingTextEntryComponent } from './floating-text-entry.component';
+
+describe('FloatingTextEntryComponent', () => {
+  let component: FloatingTextEntryComponent;
+  let fixture: ComponentFixture<FloatingTextEntryComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FloatingTextEntryComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FloatingTextEntryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/aia-lib/src/lib/components/aia-image-annotator/floating-text-entry/floating-text-entry.component.ts

@@ -0,0 +1,74 @@
+import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'aia-floating-text-entry',
+  templateUrl: './floating-text-entry.component.html',
+  styleUrls: ['./floating-text-entry.component.scss']
+})
+export class FloatingTextEntryComponent {
+
+    public currentText = '';
+
+    @ViewChild('textBox') textBoxRef: ElementRef;
+    @ViewChild('input') inputRef: ElementRef;
+
+    public getText(): string {
+        return this.currentText;
+    }
+
+    public hide(): void {
+        this.textBoxRef.nativeElement.style.display = 'none';
+    }
+
+    public show(): void {
+        this.textBoxRef.nativeElement.style.display = 'block';
+    }
+
+    public setFont(fontStr: string) {
+        this.textBoxRef.nativeElement.style.font = fontStr;
+    }
+
+    public setColor(color: string) {
+        this.textBoxRef.nativeElement.style.color = color;
+    }
+
+    public setPosition(x: number, y: number) {
+        this.textBoxRef.nativeElement.style.top = y + 'px';
+        this.textBoxRef.nativeElement.style.left = x + 'px';
+    }
+
+    public isEmpty(): boolean {
+        return this.currentText.trim() === '';
+    }
+
+    public focus() {
+        setTimeout(_ => {
+            this.inputRef.nativeElement.focus();
+        }, 0);
+    }
+
+    public clear() {
+        this.currentText = '';
+    }
+
+    public onBlur(): Promise<any> {
+        return new Promise<any>(resolve => {
+            this.inputRef.nativeElement.addEventListener('blur', resolve);
+        });
+    }
+
+    public getLineHeight(): number {
+        return this.getLineHeightHelper(this.textBoxRef.nativeElement);
+    }
+
+    private getLineHeightHelper(el: HTMLDivElement): number {
+        let temp = document.createElement(el.nodeName);
+        temp.setAttribute('style', `margin:0px;padding:0px;font-family:${el.style.fontFamily};font-size:${el.style.fontSize}`);
+        temp.innerHTML = 'test';
+        temp = el.parentNode.appendChild(temp);
+        const ret = temp.clientHeight;
+        temp.parentNode.removeChild(temp);
+        return ret;
+    }
+
+}