Repository navigation
Client | Editor
In this section, we will present how the zoom works by breaking down its structure. The zoom feature business logic is inside the service named : canvas-dimension.service.ts. This zoom specialized service is being used by EditorService. It takes care of methods that does transformation and updating top-right zoom component.
The other zoom component takes care of the small top-right image inside the editor.
The zoom get fired from the Editor's event. On every mouse-scroll, a method inside canvas-dimension.service.ts (applyRedraw) will redraw the image after scaling. This method gets fired at a 10fps rate. That's a better solution than the old one because the application will not freeze after zooming on a heavy loaded image.
Biomarkers are annotations of different colour which can be created with the brush or fill brush tools. They are managed in BiomarkerService, BiomarkerVisibilityService and LayersService.
This service includes methods to build the data source for the biomarker menu, to delete biomarkers data, change opacity of biomarkers and other methods to help find biomarkers in data structures.
initJsonRecursive creates a list with all the Biomarkers that were loaded from the server or the local storage.
buildTreeRecursive creates a tree which is used in biomarker.component.ts to create the detailed biomarkers list.
This service includes methods to set the visibility of biomarkers. Its methods are used by the BiomarkerComponent and make it possible to hide biomarker, delete biomarkers and select a biomarker. It also permits to do the hide and delete operations recursively.
This service manages the layers in which the biomarkers are placed and the undo and redo stacks.
In this section, we present the tools architecture.
Tools are services placed in this subdirectory : client/src/app/shared/services/Editor/Tools, and inherit from the Tool service. This service is implemented in tool.service.ts and provides methods which can be implemented or reimplemented in tools that inherit from it.
To make a tool available in the toolbar, it has to be added to the ToolboxService. This service has an attribute named listOfTools which creates an instance of each tool. This services then manages the selected tool and operations that come from it.
To add a new tool, we simply have to create a new service in shared/services/Editor/Tools and then reference it in ToolboxService.
This service implements methods that are used by the ToolPropertiesComponent, which gives the user the possibility to customize the tools. For example, it permits the user to change de stroke size of the brush or eraser. All methods related to that are present in this service.
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 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.
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().
Methods to change brightness, contrast and pretreatment are all implemented in the VisualizationService.
The submission of a work saves for a user the Annotation , the Comments and the Widgets on the DataBase.
The button Submit in bottom of the right menu displays a pop-up when the user clicks on it. The pop-up proposes some options for the user:
- Cancel: Cancels the saving
- Save: Save the work on the DataBase.
- Save & Load Next: Save the work on the DataBase and load the next task to complete
There is also the possibility to mark the current Task as completed or not.