Skip to content

Commit c6fe1c0

Browse files
phileniusphilenius
committed
fix: fix bugs
1 parent 5c7b898 commit c6fe1c0

14 files changed

+73
-75
lines changed

‎.vscode/settings.json‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
{
22
"editor.defaultFormatter": "esbenp.prettier-vscode",
33
"editor.formatOnSave": true,
4-
"eslint.options": {
5-
"extensions": [".ts", ".html"]
6-
},
7-
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "html"]
4+
"eslint.options": { "extensions": [".ts", ".html"] },
5+
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "html"],
6+
"editor.rulers": [150]
87
}

‎README.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -101,13 +101,13 @@ View and edit the live demo Angular app on <a href="https://codesandbox.io/s/ngx
101101

102102
### Inputs
103103

104-
| Input | Description | Type | Default value |
105-
| :------------------------ | ------------------------------------------------------------ | ------------------ | :------------ |
106-
| annotations | Represents the parts of the given text which shall be annotated. | `Annotation[]` | `[]` |
107-
| annotationClass | An optional CSS class applied to all elements which wrap the annotated parts of the given text. | `string|undefined` | `undefined` |
108-
| annotationRenderComponent | An optional Angular component that shall be used for rendering the annotation. By default, it uses the provided `NgxAnnotationRendererComponent`. You can implement your own annotation rendering component to customize the visualization of annotations. The custom component must implement the interface `NgxAnnotationRendererComponentInterface`. | `NgxAnnotationRendererComponentInterface` | `NgxAnnotationRendererComponent` |
109-
| removable | Determines whether annotations shall have a small button in the top right corner so that the user can remove an annotation. | `boolean` | `true` |
110-
| text | The text which shall be displayed and annotated. | `string` | empty string |
104+
| Input | Description | Type | Default value |
105+
| :-------------------------- | ------------------------------------------------------------ | ------------------ | :------------ |
106+
| annotations | Represents the parts of the given text which shall be annotated. | `Annotation[]` | `[]` |
107+
| annotationClass | An optional CSS class applied to all elements which wrap the annotated parts of the given text. | `string|undefined` | `undefined` |
108+
| annotationRendererComponent | An optional Angular component that shall be used for rendering the annotation. By default, it uses the provided `NgxAnnotationRendererComponent`. You can implement your own annotation rendering component to customize the visualization of annotations. The custom component must implement the interface `NgxAnnotationRendererComponentInterface`. | `NgxAnnotationRendererComponentInterface` | `NgxAnnotationRendererComponent` |
109+
| removable | Determines whether annotations shall have a small button in the top right corner so that the user can remove an annotation. | `boolean` | `true` |
110+
| text | The text which shall be displayed and annotated. | `string` | empty string |
111111

112112
### Outputs
113113

projects/ngx-annotate-text/src/lib/components/annotation/annotation-renderer.component.css renamed to projects/ngx-annotate-text/src/lib/components/annotation-renderer/annotation-renderer.component.css

File renamed without changes.

projects/ngx-annotate-text/src/lib/components/annotation/annotation-renderer.component.html renamed to projects/ngx-annotate-text/src/lib/components/annotation-renderer/annotation-renderer.component.html

File renamed without changes.

projects/ngx-annotate-text/src/lib/components/annotation/annotation-renderer.component.spec.ts renamed to projects/ngx-annotate-text/src/lib/components/annotation-renderer/annotation-renderer.component.spec.ts

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,7 @@ describe('AnnotationRendererComponent', () => {
1212
const getAnnotationParentElement = (): HTMLElement => fixture.nativeElement.querySelector('button.annotation-parent');
1313

1414
beforeEach(async () => {
15-
await TestBed.configureTestingModule({
16-
declarations: [NgxAnnotationRendererComponent],
17-
}).compileComponents();
15+
await TestBed.configureTestingModule({ declarations: [NgxAnnotationRendererComponent] }).compileComponents();
1816
});
1917

2018
beforeEach(() => {
@@ -85,8 +83,9 @@ describe('AnnotationRendererComponent', () => {
8583
expect(fixture.nativeElement.querySelector('button.remove-annotation')).toBeNull();
8684
});
8785

88-
it('should remove the annotation on clicking the remove button', async () => {
89-
spyOn(component.removeAnnotation, 'emit');
86+
it("should call the callback function 'removeAnnotation' when a user clicks on the remove button", async () => {
87+
component.removeAnnotation = () => {};
88+
spyOn(component, 'removeAnnotation');
9089

9190
const annotation = new Annotation(0, 13, 'City', 'rgb(60, 65, 75)');
9291
annotation.text = 'San Francisco';
@@ -98,12 +97,13 @@ describe('AnnotationRendererComponent', () => {
9897
fixture.nativeElement.querySelector('button.remove-annotation').click();
9998

10099
fixture.whenStable().then(() => {
101-
expect(component.removeAnnotation.emit).toHaveBeenCalled();
100+
expect(component.removeAnnotation).toHaveBeenCalledWith(annotation);
102101
});
103102
});
104103

105-
it("should emit an event when the user clicks on the annotation's box", async () => {
106-
spyOn(component.clickAnnotation, 'emit');
104+
it("should call the callback function 'clickAnnotation' when a user clicks on the annotation's box", async () => {
105+
component.clickAnnotation = () => {};
106+
spyOn(component, 'clickAnnotation');
107107

108108
const annotation = new Annotation(0, 13, 'City', 'rgb(60, 65, 75)');
109109
annotation.text = 'San Francisco';
@@ -114,12 +114,13 @@ describe('AnnotationRendererComponent', () => {
114114
fixture.nativeElement.querySelector('button.annotation-parent').click();
115115

116116
fixture.whenStable().then(() => {
117-
expect(component.clickAnnotation.emit).toHaveBeenCalledWith(annotation);
117+
expect(component.clickAnnotation).toHaveBeenCalledWith(annotation);
118118
});
119119
});
120120

121-
it("should emit an event when the user clicks on the annotation's text", async () => {
122-
spyOn(component.clickAnnotation, 'emit');
121+
it("should call the callback function 'clickAnnotation' when the user clicks on the annotation's text", async () => {
122+
component.clickAnnotation = () => {};
123+
spyOn(component, 'clickAnnotation');
123124

124125
const annotation = new Annotation(0, 11, 'City', 'rgb(0, 255, 255)');
125126
annotation.text = 'Los Angeles';
@@ -130,12 +131,13 @@ describe('AnnotationRendererComponent', () => {
130131
fixture.nativeElement.querySelector('span.annotation-content').click();
131132

132133
fixture.whenStable().then(() => {
133-
expect(component.clickAnnotation.emit).toHaveBeenCalledWith(annotation);
134+
expect(component.clickAnnotation).toHaveBeenCalledWith(annotation);
134135
});
135136
});
136137

137-
it("should emit an event when the user clicks on the annotation's label", async () => {
138-
spyOn(component.clickAnnotation, 'emit');
138+
it("should call the callback function 'clickAnnotation' when the user clicks on the annotation's label", async () => {
139+
component.clickAnnotation = () => {};
140+
spyOn(component, 'clickAnnotation');
139141

140142
const annotation = new Annotation(0, 9, 'City', 'rgb(255, 255, 0)');
141143
annotation.text = 'Frankfurt';
@@ -146,7 +148,7 @@ describe('AnnotationRendererComponent', () => {
146148
fixture.nativeElement.querySelector('span.annotation-label').click();
147149

148150
fixture.whenStable().then(() => {
149-
expect(component.clickAnnotation.emit).toHaveBeenCalledWith(annotation);
151+
expect(component.clickAnnotation).toHaveBeenCalledWith(annotation);
150152
});
151153
});
152154
});

projects/ngx-annotate-text/src/lib/components/annotation/annotation-renderer.components.ts renamed to projects/ngx-annotate-text/src/lib/components/annotation-renderer/annotation-renderer.components.ts

File renamed without changes.

‎projects/ngx-annotate-text/src/lib/components/ngx-annotate-text/ngx-annotate-text.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<span>
33
@if (isAnnotation(token)) {
44
<ng-container
5-
*ngComponentOutlet="annotationRenderComponent; inputs: toRecord(token)"
5+
*ngComponentOutlet="annotationRendererComponent; inputs: toRecord(token)"
66
[class]="annotationClass || ''"
77
></ng-container>
88
} @else {

‎projects/ngx-annotate-text/src/lib/components/ngx-annotate-text/ngx-annotate-text.component.spec.ts‎

Lines changed: 33 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { SimpleChange } from '@angular/core';
33
import { ComponentFixture, TestBed } from '@angular/core/testing';
44
import { Annotation } from '../../models/annotation.model';
55
import { ISelection } from '../../models/selection.model';
6-
import { NgxAnnotationRendererComponent } from '../annotation/annotation-renderer.components';
6+
import { NgxAnnotationRendererComponent } from '../annotation-renderer/annotation-renderer.components';
77

88
import { NgxAnnotateTextComponent } from './ngx-annotate-text.component';
99

@@ -12,9 +12,7 @@ describe('NgxAnnotateTextComponent', () => {
1212
let fixture: ComponentFixture<NgxAnnotateTextComponent>;
1313

1414
beforeEach(async () => {
15-
await TestBed.configureTestingModule({
16-
declarations: [NgxAnnotateTextComponent, NgxAnnotationRendererComponent],
17-
});
15+
await TestBed.configureTestingModule({ declarations: [NgxAnnotateTextComponent, NgxAnnotationRendererComponent] });
1816

1917
fixture = TestBed.createComponent(NgxAnnotateTextComponent);
2018
component = fixture.componentInstance;
@@ -51,20 +49,36 @@ describe('NgxAnnotateTextComponent', () => {
5149
expect(component.isAnnotation('Hello')).toBeFalse();
5250
});
5351

54-
describe('toAnnotation()', () => {
55-
it('should convert an instance of Annotation', () => {
56-
const annotation: Annotation | string = new Annotation(0, 7, 'Language', 'red');
52+
describe('toRecord()', () => {
53+
it('should convert an instance of Annotation to a record of inputs for the annotation renderer component', () => {
54+
const annotation: Annotation = new Annotation(0, 7, 'Language', 'red');
5755
annotation.text = 'Spanish';
5856

59-
expect(component.toAnnotation(annotation)).toBeInstanceOf(Annotation);
57+
expect(component.toRecord(annotation)).toEqual({
58+
annotation: annotation,
59+
removable: true,
60+
clickAnnotation: jasmine.any(Function),
61+
removeAnnotation: jasmine.any(Function),
62+
});
63+
});
64+
65+
it('should convert an instance of Annotation to a record of inputs for the annotation renderer component when annotations are removable', () => {
66+
component.removable = false;
67+
const annotation: Annotation = new Annotation(0, 7, 'Language', 'red');
68+
annotation.text = 'Spanish';
69+
70+
expect(component.toRecord(annotation)).toEqual({
71+
annotation: annotation,
72+
removable: false,
73+
clickAnnotation: jasmine.any(Function),
74+
removeAnnotation: jasmine.any(Function),
75+
});
6076
});
6177

6278
it('should not convert an instance of string', () => {
6379
const annotation: Annotation | string = 'Hello';
6480

65-
expect(() => component.toAnnotation(annotation)).toThrowError(
66-
'Cannot convert token of type string to type Annotation',
67-
);
81+
expect(() => component.toRecord(annotation)).toThrowError('Cannot convert token of type string to type Record');
6882
});
6983
});
7084

@@ -109,9 +123,7 @@ describe('NgxAnnotateTextComponent', () => {
109123
expect((component.tokens[0] as Annotation).text).toBe('Hello');
110124

111125
component.text = 'Now, with an updated message.';
112-
component.ngOnChanges({
113-
text: new SimpleChange('Hello, world', 'Now, with an updated message.', false),
114-
});
126+
component.ngOnChanges({ text: new SimpleChange('Hello, world', 'Now, with an updated message.', false) });
115127
fixture.detectChanges();
116128

117129
expect(component.tokens.length).toBe(2);
@@ -127,9 +139,7 @@ describe('NgxAnnotateTextComponent', () => {
127139
expect((component.tokens[0] as Annotation).text).toBe('Hello');
128140

129141
component.annotations = [new Annotation(0, 5, 'Token1', 'red'), new Annotation(7, 12, 'Token2', 'red')];
130-
component.ngOnChanges({
131-
annotations: new SimpleChange([], [], false),
132-
});
142+
component.ngOnChanges({ annotations: new SimpleChange([], [], false) });
133143
fixture.detectChanges();
134144

135145
expect(component.tokens.length).toBe(3);
@@ -210,10 +220,7 @@ describe('NgxAnnotateTextComponent', () => {
210220

211221
describe('isOverlappingWithExistingAnnotations()', () => {
212222
it('should return false if there is no annotation that overlaps with the selection', () => {
213-
const selection: ISelection = {
214-
startIndex: 5,
215-
endIndex: 9,
216-
};
223+
const selection: ISelection = { startIndex: 5, endIndex: 9 };
217224

218225
component.annotations = [
219226
new Annotation(0, 5, 'Article', 'yellow'),
@@ -229,10 +236,7 @@ describe('NgxAnnotateTextComponent', () => {
229236
* Selection: ####
230237
*/
231238
it('should return true if there exists an annotation with identical start and end index', () => {
232-
const selection: ISelection = {
233-
startIndex: 5,
234-
endIndex: 12,
235-
};
239+
const selection: ISelection = { startIndex: 5, endIndex: 12 };
236240

237241
component.annotations = [new Annotation(5, 12, 'Noun', 'blue')];
238242

@@ -244,10 +248,7 @@ describe('NgxAnnotateTextComponent', () => {
244248
* Selection: ####
245249
*/
246250
it('should return true if the selection partially overlaps with an existing annotation', () => {
247-
const selection: ISelection = {
248-
startIndex: 0,
249-
endIndex: 6,
250-
};
251+
const selection: ISelection = { startIndex: 0, endIndex: 6 };
251252

252253
component.annotations = [new Annotation(4, 8, 'Verb', 'red')];
253254

@@ -259,10 +260,7 @@ describe('NgxAnnotateTextComponent', () => {
259260
* Selection: ####
260261
*/
261262
it('should return true if the selection partially overlaps with an existing annotation', () => {
262-
const selection: ISelection = {
263-
startIndex: 6,
264-
endIndex: 12,
265-
};
263+
const selection: ISelection = { startIndex: 6, endIndex: 12 };
266264

267265
component.annotations = [new Annotation(4, 8, 'Adjective', 'orange')];
268266

@@ -274,10 +272,7 @@ describe('NgxAnnotateTextComponent', () => {
274272
* Selection: ##
275273
*/
276274
it('should return true if the selection is part of an existing annotation', () => {
277-
const selection: ISelection = {
278-
startIndex: 6,
279-
endIndex: 8,
280-
};
275+
const selection: ISelection = { startIndex: 6, endIndex: 8 };
281276

282277
component.annotations = [new Annotation(4, 10, 'Adjective', 'orange')];
283278

@@ -289,10 +284,7 @@ describe('NgxAnnotateTextComponent', () => {
289284
* Selection: ####
290285
*/
291286
it('should return true if the selection is part of an existing annotation', () => {
292-
const selection: ISelection = {
293-
startIndex: 4,
294-
endIndex: 10,
295-
};
287+
const selection: ISelection = { startIndex: 4, endIndex: 10 };
296288

297289
component.annotations = [new Annotation(6, 8, 'Adjective', 'orange')];
298290

‎projects/ngx-annotate-text/src/lib/components/ngx-annotate-text/ngx-annotate-text.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
import { Annotation } from '../../models/annotation.model';
1313
import { ISelection } from '../../models/selection.model';
1414
import { TokenizerService } from '../../services/tokenizer.service';
15-
import { NgxAnnotationRendererComponent } from '../annotation/annotation-renderer.components';
15+
import { NgxAnnotationRendererComponent } from '../annotation-renderer/annotation-renderer.components';
1616
import { NgxAnnotationRendererComponentInterface } from '../../models/annotation-renderer-component.model';
1717

1818
@Component({
@@ -33,7 +33,7 @@ export class NgxAnnotateTextComponent implements OnInit, OnChanges {
3333
* You can implement your own annotation rendering component to customize the visualization of annotations. The custom component must implement the
3434
* interface `NgxAnnotationRendererComponentInterface`.
3535
*/
36-
@Input() annotationRenderComponent: Type<NgxAnnotationRendererComponentInterface> = NgxAnnotationRendererComponent;
36+
@Input() annotationRendererComponent: Type<NgxAnnotationRendererComponentInterface> = NgxAnnotationRendererComponent;
3737

3838
/**
3939
* Determines whether annotations shall have a small button in the top right corner so that the user can

‎projects/ngx-annotate-text/src/lib/ngx-annotate-text.module.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { NgModule } from '@angular/core';
22
import { CommonModule, NgComponentOutlet } from '@angular/common';
3-
import { NgxAnnotationRendererComponent } from './components/annotation/annotation-renderer.components';
3+
import { NgxAnnotationRendererComponent } from './components/annotation-renderer/annotation-renderer.components';
44
import { NgxAnnotateTextComponent } from './components/ngx-annotate-text/ngx-annotate-text.component';
55

66
@NgModule({

0 commit comments

Comments
 (0)