Client | Editor

Visualization Features

Zoom feature

We will present how the zoom works by breaking down its structure

Graphic Bitmap Annotation

Non-Graphic Annotation

Comment feature

In the present section we will present the comments' design and architecture. We will go through their functional mechanism and provide all the necessary information for anyone willing to work on them in the futur.

The comments component architecture is as follow :

• comment-box.component.html
  • Contains the HTML code of the component.
• comment-box.component.ts
  • This is the component class that takes care of managing the comment-box events.
• comment-box.service.ts
  • This class behaves like the MVC's "controller". It takes care of some of the business logic of the comments mechanism such as Subject even handling and communication between sibling components.
• comment-box.singleton.model.ts
  • This model class follows the Singleton pattern. It's the class that will store all of the user's comments before sending them to the server.

Components are being created dynamically in the editor-service component. The reason of such decision is because comments are not defined beforehand (at compilation time) thus the necessary of making their creation dynamic at runtime.

The method that will create comment-boxes is called createCommentBox(textArea?: string)

Widgets

Widgets are a modular non-graphic annotation that can be added or removed from an existing task through the Management page. Their content is saved in their own DB table.

Create a new widget type

Add the new widget type name to the widget model's enum on the server widget.model.ts.

export enum WidgetType {
    multiLine = 'multiLine',
    singleLine = 'singleLine',
    numerical = 'numerical',
    multiButton = 'multiButton',

}

widget.component.html is responsible for displaying the respective widgets in the editor's right-side menu. Create a new component in \client\src\app\editor\right-menu\widget\widgetTypes\ and display it through widget.component.html.

<app-widget-single-line *ngFor="let widget of singleLineWidgets" [widget]="widget" (saveEntryEvent)="saveEntry($event)"></app-widget-single-line>
<app-widget-multiple-lines *ngFor="let widget of multiLineWidgets" ></app-widget-multiple-lines>

Create an array of Widget as an attribute in widget.component.ts and assign it its sorted value in initWidgets().