143 lines
3.8 KiB
Markdown
143 lines
3.8 KiB
Markdown
|
---
|
|||
|
|
sidebar_position: 1
|
|||
|
|
sidebar_label: 3.7 -> 3.8
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# Migration Guide
|
|||
|
|
|
|||
|
|
There are two main things that need to be taken care of.
|
|||
|
|
|
|||
|
|
|
|||
|
|
## New Toolbar Button definitions
|
|||
|
|
|
|||
|
|
### Update Active Tool Handling
|
|||
|
|
The concept of `activeTool` and its associated getter and setter has been removed. The active tool should now be derived from the toolGroup and the viewport.
|
|||
|
|
|
|||
|
|
|
|||
|
|
**Action Needed**
|
|||
|
|
|
|||
|
|
Remove any code that sets the default tool using `toolbarService.setDefaultTool()` and activates the tool using
|
|||
|
|
`toolbarService.recordInteraction()`. For example, the following code should be removed:
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
let unsubscribe;
|
|||
|
|
toolbarService.setDefaultTool({
|
|||
|
|
groupId: "WindowLevel",
|
|||
|
|
itemId: "WindowLevel",
|
|||
|
|
interactionType: "tool",
|
|||
|
|
commands: [
|
|||
|
|
{
|
|||
|
|
commandName: "setToolActive",
|
|||
|
|
commandOptions: {
|
|||
|
|
toolName: "WindowLevel",
|
|||
|
|
},
|
|||
|
|
context: "CORNERSTONE",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const activateTool = () => {
|
|||
|
|
toolbarService.recordInteraction(toolbarService.getDefaultTool());
|
|||
|
|
|
|||
|
|
unsubscribe();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
({ unsubscribe } = toolGroupService.subscribe(
|
|||
|
|
toolGroupService.EVENTS.VIEWPORT_ADDED,
|
|||
|
|
activateTool
|
|||
|
|
));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
Instead, focus on defining the buttons and their placement in the toolbar using `toolbarService.addButtons()` and `toolbarService.createButtonSection()`. For example:
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
toolbarService.addButtons([...toolbarButtons, ...moreTools]);
|
|||
|
|
toolbarService.createButtonSection("primary", [
|
|||
|
|
"MeasurementTools",
|
|||
|
|
"Zoom",
|
|||
|
|
"WindowLevel",
|
|||
|
|
"Pan",
|
|||
|
|
"Capture",
|
|||
|
|
"Layout",
|
|||
|
|
"MPR",
|
|||
|
|
"Crosshairs",
|
|||
|
|
"MoreTools",
|
|||
|
|
]);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
### Update Button Definitions
|
|||
|
|
The concept of button types (toggle, action, tool) has been removed. Buttons are now defined using a simplified object-based definition.
|
|||
|
|
|
|||
|
|
**Action Needed**
|
|||
|
|
|
|||
|
|
Update your button definitions to use the new object-based format and remove the `type` property. Use the `uiType` property for the top-level UI type definition. For example:
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// Old Implementation
|
|||
|
|
{
|
|||
|
|
id: 'Capture',
|
|||
|
|
type: 'ohif.action',
|
|||
|
|
props: {
|
|||
|
|
icon: 'tool-capture',
|
|||
|
|
label: 'Capture',
|
|||
|
|
type: 'action',
|
|||
|
|
commands: [
|
|||
|
|
{
|
|||
|
|
commandName: 'showDownloadViewportModal',
|
|||
|
|
commandOptions: {},
|
|||
|
|
context: 'CORNERSTONE',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
is now
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// New Implementation
|
|||
|
|
{
|
|||
|
|
id: 'Capture',
|
|||
|
|
uiType: 'ohif.radioGroup',
|
|||
|
|
props: {
|
|||
|
|
icon: 'tool-capture',
|
|||
|
|
label: 'Capture',
|
|||
|
|
commands: [
|
|||
|
|
{
|
|||
|
|
commandName: 'showDownloadViewportModal',
|
|||
|
|
context: 'CORNERSTONE',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
evaluate: 'evaluate.action',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Add Evaluators to Button Definitions
|
|||
|
|
Introduce the evaluate property in your button definitions to determine the state of the button based on the app context.
|
|||
|
|
|
|||
|
|
**Action Needed**
|
|||
|
|
|
|||
|
|
Add the appropriate `evaluate` property to each button definition. For example:
|
|||
|
|
- Use `evaluate.cornerstoneTool` if the button should be highlighted only when it is the active primary tool (left mouse).
|
|||
|
|
- Use `evaluate.cornerstoneTool.toggle` if the tool is a toggle tool (like reference lines or image overlay).
|
|||
|
|
|
|||
|
|
Refer to the `modes/longitudinal/src/toolbarButtons.ts` file for examples of using the `evaluate` property.
|
|||
|
|
|
|||
|
|
Additional Resources
|
|||
|
|
|
|||
|
|
- For more information on the new toolbar module and its usage, refer to the [Toolbar documentation](../platform/extensions/modules/toolbar.md).
|
|||
|
|
- Consult the updated button definitions in `modes/longitudinal/src/toolbarButtons.ts` for examples of the new object-based button definition format and the usage of evaluators.
|
|||
|
|
|
|||
|
|
## leftPanelDefaultClosed and rightPanelDefaultClosed
|
|||
|
|
|
|||
|
|
Now they are renamed to `leftPanelClosed` and `rightPanelClosed` respectively.
|
|||
|
|
|
|||
|
|
|
|||
|
|
## StudyInstanceUID in the URL param
|
|||
|
|
|
|||
|
|
Previously there were two params that you could choose: seriesInstanceUID and seriesInstanceUIDs, they have been replaced with seriesInstanceUIDs so even if you would like to filter one series use ``seriesInstanceUIDs`
|