feat: add custom annotation renderer for demo purposes

Author: philenius

src/app/app.component.html

@@ -4,18 +4,19 @@ <h1 class="mb-5 display-4">ngx-annotate-text demo</h1>
 
     <ngx-annotate-text
       [(annotations)]="annotations"
-      [removable]="true"
+      [removable]="areAnnotationsRemovable"
       [text]="text"
       annotationClass="my-annotation"
       (clickAnnotation)="onClickAnnotation($event)"
       (removeAnnotation)="onRemoveAnnotation($event)"
+      [annotationRenderComponent]="selectedRendererComponent"
       #annotateText
     >
     </ngx-annotate-text>
   </div>
 </div>
 
-<div class="row mt-3">
+<div class="row mt-3 mb-5">
   <div class="col-12">
     <button type="button" class="btn btn-primary me-2" (click)="addAnnotation('Date', '#0d6efd')">Date</button>
     <button type="button" class="btn btn-secondary me-2" (click)="addAnnotation('Time', '#6c757d')">Time</button>
@@ -24,6 +25,32 @@ <h1 class="mb-5 display-4">ngx-annotate-text demo</h1>
   </div>
 </div>
 
+<div class="row mb-5">
+  <div class="col-12">
+    <h2 class="mb-3 display-5">Settings</h2>
+
+    <label for="annotation-renderer-select">Annotation renderer:</label>
+    <select class="form-control mb-3" id="annotation-renderer-select" [(ngModel)]="selectedRendererComponent">
+      @for (renderer of rendererComponents; track $index) {
+        <option [ngValue]="renderer" [selected]="renderer.name === selectedRendererComponent.name">
+          {{ renderer.name.split("_")[1] }}
+        </option>
+      }
+    </select>
+
+    <div class="form-check form-switch">
+      <input
+        class="form-check-input"
+        type="checkbox"
+        role="switch"
+        id="flexSwitchCheckDefault"
+        [(ngModel)]="areAnnotationsRemovable"
+      />
+      <label class="form-check-label" for="flexSwitchCheckDefault">Removable annotations</label>
+    </div>
+  </div>
+</div>
+
 <div class="row mb-5">
   <div class="col-12 col-lg-6 mt-3">
     <h2 class="mb-3 display-5">Annotations</h2>

src/app/app.component.ts

@@ -1,31 +1,39 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, Type, ViewChild } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { NgxAnnotateTextModule } from '../../projects/ngx-annotate-text/src/lib/ngx-annotate-text.module';
-import { NgxAnnotateTextComponent } from '../../dist/ngx-annotate-text/public-api';
-import { Annotation } from '../../projects/ngx-annotate-text/src/public-api';
+import { Annotation, NgxAnnotateTextComponent } from '../../projects/ngx-annotate-text/src/public-api';
+import { MyAnnotationRendererComponent } from './my-annotation-renderer/my-annotation-renderer.component';
+import { NgxAnnotationRendererComponent } from '../../projects/ngx-annotate-text/src/lib/components/annotation/annotation-renderer.components';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, NgxAnnotateTextModule],
+  imports: [RouterOutlet, NgxAnnotateTextModule, FormsModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
 })
 export class AppComponent {
   @ViewChild('annotateText') ngxAnnotateText?: NgxAnnotateTextComponent;
 
-  text = 'On August 1, we went on vacation to Barcelona, Spain. Our flight took off at 11:00 am.';
-
   annotations: Annotation[] = [
     new Annotation(3, 11, 'Date', '#0d6efd'),
     new Annotation(36, 45, 'City', '#dc3545'),
     new Annotation(47, 52, 'Country', '#198754'),
     new Annotation(77, 85, 'Time', '#6c757d'),
   ];
 
+  areAnnotationsRemovable = true;
+
   events: string[] = [];
 
+  rendererComponents: Type<any>[] = [NgxAnnotationRendererComponent, MyAnnotationRendererComponent];
+
+  selectedRendererComponent: Type<any> = NgxAnnotationRendererComponent;
+
+  text = 'On August 1, we went on vacation to Barcelona, Spain. Our flight took off at 11:00 am.';
+
   addAnnotation(label: string, color: string): void {
     if (!this.ngxAnnotateText) {
       return;

src/app/my-annotation-renderer/my-annotation-renderer.component.css

@@ -0,0 +1,36 @@
+span.container {
+  display: flex;
+  flex-direction: column;
+
+  button.text {
+    background-color: transparent;
+    border: none;
+    border-bottom: 3px solid;
+  }
+
+  span.label {
+    user-select: none;
+    text-align: center;
+    font-weight: bold;
+  }
+
+  span.popup {
+    position: absolute;
+    color: white;
+    padding: 1rem;
+    width: 25rem;
+    box-shadow: 5px 5px 10px gainsboro;
+    border-radius: 0.5rem;
+
+    span.chip-list {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+    }
+
+    button {
+      margin-top: 1rem;
+    }
+  }
+}

src/app/my-annotation-renderer/my-annotation-renderer.component.html

@@ -0,0 +1,40 @@
+<span class="container" (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()">
+  <button class="text" (click)="clickAnnotation(annotation)" [style]="{ 'border-color': annotation.color }">
+    {{ annotation.text }}
+  </button>
+  <span class="label" [style]="{ color: annotation.color }">
+    {{ annotation.label }}
+  </span>
+  @if (popupEnabled) {
+    <span class="popup" [style]="{ 'background-color': annotation.color }">
+      <h2>{{ annotation.text }}</h2>
+      <span class="chip-list">
+        <span class="badge text-bg-light">Label: {{ annotation.label }}</span>
+        <span class="badge text-bg-light">Color: {{ annotation.color }}</span>
+        <span class="badge text-bg-light">Start index: {{ annotation.startIndex }}</span>
+        <span class="badge text-bg-light">End index: {{ annotation.endIndex }}</span>
+      </span>
+      @if (removable) {
+        <button
+          type="button"
+          class="d-flex justify-content-center align-items-center btn btn-outline-light"
+          (click)="removeAnnotation(annotation)"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="bi bi-trash3-fill"
+            viewBox="0 0 16 16"
+          >
+            <path
+              d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06m6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528M8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5"
+            />
+          </svg>
+          Remove annotation
+        </button>
+      }
+    </span>
+  }
+</span>

src/app/my-annotation-renderer/my-annotation-renderer.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MyAnnotationRendererComponent } from './my-annotation-renderer.component';
+
+describe('MyAnnotationRendererComponent', () => {
+  let component: MyAnnotationRendererComponent;
+  let fixture: ComponentFixture<MyAnnotationRendererComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MyAnnotationRendererComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(MyAnnotationRendererComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/my-annotation-renderer/my-annotation-renderer.component.ts

@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+import { Annotation } from '../../../dist/ngx-annotate-text/public-api';
+
+@Component({
+  selector: 'app-my-annotation-renderer',
+  standalone: true,
+  imports: [],
+  templateUrl: './my-annotation-renderer.component.html',
+  styleUrl: './my-annotation-renderer.component.css',
+})
+export class MyAnnotationRendererComponent {
+  @Input({ required: true }) annotation!: Annotation;
+  @Input() removable = true;
+  @Input() clickAnnotation!: (annotation: Annotation) => void;
+  @Input() removeAnnotation!: (annotation: Annotation) => void;
+
+  protected popupEnabled: boolean = false;
+
+  onMouseEnter(): void {
+    this.popupEnabled = true;
+  }
+  onMouseLeave(): void {
+    this.popupEnabled = false;
+  }
+}