5643f8f6d2
* Added docs with new screenshots * Added doc to architecture * Added documentations to various extension modules * Added more documentation to modes * Added docs to managers * Added docs for services * Fixed deployment docs * Added white labelling documentation * Added i18n docs and measurement export
80 lines
1.9 KiB
Markdown
80 lines
1.9 KiB
Markdown
# Mode: LifeCycle
|
|
|
|
|
|
- [Mode: LifeCycle](#mode-lifecycle)
|
|
- [Overview](#overview)
|
|
- [onModeEnter](#onmodeenter)
|
|
- [onModeExit](#onmodeexit)
|
|
|
|
## Overview
|
|
Currently there are two hooks that are called for modes.
|
|
|
|
## onModeEnter
|
|
This hook gets run after the defined route has been entered by the mode.
|
|
This hook can be used to initialize the data, services and appearance of the viewer upon the first render.
|
|
|
|
For instance, in `longitudinal` mode we are using this hook to initialize the `ToolBarService` and
|
|
set the window level/width tool to be active and add buttons to the toolbar.
|
|
|
|
|
|
```js
|
|
export default function mode() {
|
|
return {
|
|
id: '',
|
|
displayName: '',
|
|
onModeEnter: ({ servicesManager, extensionManager }) => {
|
|
const { ToolBarService } = servicesManager.services
|
|
|
|
const interaction = {
|
|
groupId: 'primary',
|
|
itemId: 'Wwwc',
|
|
interactionType: 'tool',
|
|
commandOptions: undefined,
|
|
}
|
|
|
|
ToolBarService.recordInteraction(interaction)
|
|
|
|
ToolBarService.init(extensionManager)
|
|
ToolBarService.addButtons(toolbarButtons)
|
|
ToolBarService.createButtonSection('primary', [
|
|
'MeasurementTools',
|
|
'Zoom',
|
|
'WindowLevel',
|
|
'Pan',
|
|
'Capture',
|
|
'Layout',
|
|
'MoreTools',
|
|
])
|
|
},
|
|
/*
|
|
...
|
|
*/
|
|
}
|
|
}
|
|
```
|
|
|
|
## onModeExit
|
|
This hook is called when the viewer navigate away from the route in the url. This is the place
|
|
for cleaning up data, and services by unsubscribing to the events.
|
|
|
|
|
|
For instance, it can be used to reset the `ToolbarService` which reset the toggled buttons.
|
|
|
|
|
|
```js
|
|
export default function mode() {
|
|
return {
|
|
id: '',
|
|
displayName: '',
|
|
onModeExit: ({ servicesManager, extensionManager }) => {
|
|
// Turn of the toggled states on exit
|
|
const { ToolBarService } = servicesManager.services;
|
|
ToolBarService.reset();
|
|
},
|
|
/*
|
|
...
|
|
*/
|
|
}
|
|
}
|
|
```
|