feat(toolbar): new Toolbar to enable reactive state synchronization (#3983)
This commit is contained in:
Alireza authored and GitHub committed
1 parent
79d5c36bda
commit
566b25a544
155 files changed
+6311
-6577
No files matched your search
+1
-36
@@ -56,39 +56,6 @@ function modeFactory({ modeConfiguration }) {
|
||||
// Init Default and SR ToolGroups
|
||||
initToolGroups(toolNames, Enums, toolGroupService, commandsManager);
|
||||
|
||||
const setWindowLevelActive = () => {
|
||||
toolbarService.recordInteraction({
|
||||
groupId: 'WindowLevel',
|
||||
interactionType: 'tool',
|
||||
commands: [
|
||||
{
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: {
|
||||
toolName: toolNames.WindowLevel,
|
||||
toolGroupId: toolGroupIds.CT,
|
||||
},
|
||||
context: 'CORNERSTONE',
|
||||
},
|
||||
{
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: {
|
||||
toolName: toolNames.WindowLevel,
|
||||
toolGroupId: toolGroupIds.PT,
|
||||
},
|
||||
context: 'CORNERSTONE',
|
||||
},
|
||||
{
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: {
|
||||
toolName: toolNames.WindowLevel,
|
||||
toolGroupId: toolGroupIds.Fusion,
|
||||
},
|
||||
context: 'CORNERSTONE',
|
||||
},
|
||||
],
|
||||
});
|
||||
};
|
||||
|
||||
const { unsubscribe } = toolGroupService.subscribe(
|
||||
toolGroupService.EVENTS.VIEWPORT_ADDED,
|
||||
() => {
|
||||
@@ -110,13 +77,10 @@ function modeFactory({ modeConfiguration }) {
|
||||
toolGroupService,
|
||||
displaySetService
|
||||
);
|
||||
|
||||
setWindowLevelActive();
|
||||
}
|
||||
);
|
||||
|
||||
unsubscriptions.push(unsubscribe);
|
||||
toolbarService.init(extensionManager);
|
||||
toolbarService.addButtons(toolbarButtons);
|
||||
toolbarService.createButtonSection('primary', [
|
||||
'MeasurementTools',
|
||||
@@ -124,6 +88,7 @@ function modeFactory({ modeConfiguration }) {
|
||||
'WindowLevel',
|
||||
'Crosshairs',
|
||||
'Pan',
|
||||
'SyncToggle',
|
||||
'RectangleROIStartEndThreshold',
|
||||
'fusionPTColormap',
|
||||
]);
|
||||
|
||||
@@ -60,6 +60,7 @@ function _initToolGroups(toolNames, Enums, toolGroupService, commandsManager) {
|
||||
toolName: toolNames.Crosshairs,
|
||||
configuration: {
|
||||
viewportIndicators: false,
|
||||
disableOnPassive: true,
|
||||
autoPan: {
|
||||
enabled: false,
|
||||
panSize: 10,
|
||||
|
||||
@@ -1,26 +1,8 @@
|
||||
// TODO: torn, can either bake this here; or have to create a whole new button type
|
||||
// Only ways that you can pass in a custom React component for render :l
|
||||
import { defaults, ToolbarService } from '@ohif/core';
|
||||
import { WindowLevelMenuItem } from '@ohif/ui';
|
||||
import { defaults } from '@ohif/core';
|
||||
import { toolGroupIds } from './initToolGroups';
|
||||
|
||||
const { windowLevelPresets } = defaults;
|
||||
/**
|
||||
*
|
||||
* @param {*} type - 'tool' | 'action' | 'toggle'
|
||||
* @param {*} id
|
||||
* @param {*} icon
|
||||
* @param {*} label
|
||||
*/
|
||||
function _createButton(type, id, icon, label, commands, tooltip) {
|
||||
return {
|
||||
id,
|
||||
icon,
|
||||
label,
|
||||
type,
|
||||
commands,
|
||||
tooltip,
|
||||
};
|
||||
}
|
||||
|
||||
function _createColormap(label, colormap) {
|
||||
return {
|
||||
@@ -38,23 +20,11 @@ function _createColormap(label, colormap) {
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
const _createActionButton = _createButton.bind(null, 'action');
|
||||
const _createToggleButton = _createButton.bind(null, 'toggle');
|
||||
const _createToolButton = _createButton.bind(null, 'tool');
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {*} preset - preset number (from above import)
|
||||
* @param {*} title
|
||||
* @param {*} subtitle
|
||||
*/
|
||||
function _createWwwcPreset(preset, title, subtitle) {
|
||||
return {
|
||||
id: preset.toString(),
|
||||
title,
|
||||
subtitle,
|
||||
type: 'action',
|
||||
commands: [
|
||||
{
|
||||
commandName: 'setWindowLevel',
|
||||
@@ -67,170 +37,103 @@ function _createWwwcPreset(preset, title, subtitle) {
|
||||
};
|
||||
}
|
||||
|
||||
function _createCommands(commandName, toolName, toolGroupIds) {
|
||||
return toolGroupIds.map(toolGroupId => ({
|
||||
/* It's a command that is being run when the button is clicked. */
|
||||
commandName,
|
||||
commandOptions: {
|
||||
toolName,
|
||||
toolGroupId,
|
||||
},
|
||||
context: 'CORNERSTONE',
|
||||
}));
|
||||
}
|
||||
const setToolActiveToolbar = {
|
||||
commandName: 'setToolActiveToolbar',
|
||||
commandOptions: {
|
||||
toolGroupIds: [toolGroupIds.CT, toolGroupIds.PT, toolGroupIds.Fusion],
|
||||
},
|
||||
};
|
||||
|
||||
const toolbarButtons = [
|
||||
// Measurement
|
||||
{
|
||||
id: 'MeasurementTools',
|
||||
type: 'ohif.splitButton',
|
||||
uiType: 'ohif.splitButton',
|
||||
props: {
|
||||
groupId: 'MeasurementTools',
|
||||
isRadio: true, // ?
|
||||
// Switch?
|
||||
primary: _createToolButton(
|
||||
'Length',
|
||||
'tool-length',
|
||||
'Length',
|
||||
[
|
||||
..._createCommands('setToolActive', 'Length', [
|
||||
toolGroupIds.CT,
|
||||
toolGroupIds.PT,
|
||||
toolGroupIds.Fusion,
|
||||
// toolGroupIds.MPR,
|
||||
]),
|
||||
],
|
||||
'Length'
|
||||
),
|
||||
primary: ToolbarService.createButton({
|
||||
id: 'Length',
|
||||
icon: 'tool-length',
|
||||
label: 'Length',
|
||||
tooltip: 'Length Tool',
|
||||
commands: setToolActiveToolbar,
|
||||
evaluate: 'evaluate.cornerstoneTool',
|
||||
}),
|
||||
secondary: {
|
||||
icon: 'chevron-down',
|
||||
label: '',
|
||||
isActive: true,
|
||||
tooltip: 'More Measure Tools',
|
||||
},
|
||||
items: [
|
||||
_createToolButton(
|
||||
'Length',
|
||||
'tool-length',
|
||||
'Length',
|
||||
[
|
||||
..._createCommands('setToolActive', 'Length', [
|
||||
toolGroupIds.CT,
|
||||
toolGroupIds.PT,
|
||||
toolGroupIds.Fusion,
|
||||
// toolGroupIds.MPR,
|
||||
]),
|
||||
],
|
||||
'Length Tool'
|
||||
),
|
||||
_createToolButton(
|
||||
'Bidirectional',
|
||||
'tool-bidirectional',
|
||||
'Bidirectional',
|
||||
[
|
||||
..._createCommands('setToolActive', 'Bidirectional', [
|
||||
toolGroupIds.CT,
|
||||
toolGroupIds.PT,
|
||||
toolGroupIds.Fusion,
|
||||
// toolGroupIds.MPR,
|
||||
]),
|
||||
],
|
||||
'Bidirectional Tool'
|
||||
),
|
||||
_createToolButton(
|
||||
'ArrowAnnotate',
|
||||
'tool-annotate',
|
||||
'Annotation',
|
||||
[
|
||||
..._createCommands('setToolActive', 'ArrowAnnotate', [
|
||||
toolGroupIds.CT,
|
||||
toolGroupIds.PT,
|
||||
toolGroupIds.Fusion,
|
||||
// toolGroupIds.MPR,
|
||||
]),
|
||||
],
|
||||
'Arrow Annotate'
|
||||
),
|
||||
_createToolButton(
|
||||
'EllipticalROI',
|
||||
'tool-elipse',
|
||||
'Ellipse',
|
||||
[
|
||||
..._createCommands('setToolActive', 'EllipticalROI', [
|
||||
toolGroupIds.CT,
|
||||
toolGroupIds.PT,
|
||||
toolGroupIds.Fusion,
|
||||
// toolGroupIds.MPR,
|
||||
]),
|
||||
],
|
||||
'Ellipse Tool'
|
||||
),
|
||||
ToolbarService.createButton({
|
||||
id: 'Bidirectional',
|
||||
icon: 'tool-bidirectional',
|
||||
label: 'Bidirectional',
|
||||
tooltip: 'Bidirectional Tool',
|
||||
commands: setToolActiveToolbar,
|
||||
evaluate: 'evaluate.cornerstoneTool',
|
||||
}),
|
||||
ToolbarService.createButton({
|
||||
id: 'ArrowAnnotate',
|
||||
icon: 'tool-annotate',
|
||||
label: 'Arrow Annotate',
|
||||
tooltip: 'Arrow Annotate Tool',
|
||||
commands: setToolActiveToolbar,
|
||||
evaluate: 'evaluate.cornerstoneTool',
|
||||
}),
|
||||
ToolbarService.createButton({
|
||||
id: 'EllipticalROI',
|
||||
icon: 'tool-ellipse',
|
||||
label: 'Ellipse',
|
||||
tooltip: 'Ellipse Tool',
|
||||
commands: setToolActiveToolbar,
|
||||
evaluate: 'evaluate.cornerstoneTool',
|
||||
}),
|
||||
],
|
||||
},
|
||||
},
|
||||
// Zoom..
|
||||
{
|
||||
id: 'Zoom',
|
||||
type: 'ohif.radioGroup',
|
||||
uiType: 'ohif.radioGroup',
|
||||
props: {
|
||||
type: 'tool',
|
||||
icon: 'tool-zoom',
|
||||
label: 'Zoom',
|
||||
commands: [
|
||||
..._createCommands('setToolActive', 'Zoom', [
|
||||
toolGroupIds.CT,
|
||||
toolGroupIds.PT,
|
||||
toolGroupIds.Fusion,
|
||||
// toolGroupIds.MPR,
|
||||
]),
|
||||
],
|
||||
commands: setToolActiveToolbar,
|
||||
evaluate: 'evaluate.cornerstoneTool',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'MPR',
|
||||
type: 'ohif.action',
|
||||
uiType: 'ohif.radioGroup',
|
||||
props: {
|
||||
type: 'toggle',
|
||||
icon: 'icon-mpr',
|
||||
label: 'MPR',
|
||||
commands: [
|
||||
{
|
||||
commandName: 'toggleHangingProtocol',
|
||||
commandOptions: {
|
||||
protocolId: 'mpr',
|
||||
},
|
||||
commandOptions: { protocolId: 'mpr' },
|
||||
context: 'DEFAULT',
|
||||
},
|
||||
],
|
||||
evaluate: 'evaluate.mpr',
|
||||
},
|
||||
},
|
||||
// Window Level + Presets...
|
||||
// Window Level + Presets
|
||||
{
|
||||
id: 'WindowLevel',
|
||||
type: 'ohif.splitButton',
|
||||
uiType: 'ohif.splitButton',
|
||||
props: {
|
||||
groupId: 'WindowLevel',
|
||||
primary: _createToolButton(
|
||||
'WindowLevel',
|
||||
'tool-window-level',
|
||||
'Window Level',
|
||||
[
|
||||
..._createCommands('setToolActive', 'WindowLevel', [
|
||||
toolGroupIds.CT,
|
||||
toolGroupIds.PT,
|
||||
toolGroupIds.Fusion,
|
||||
// toolGroupIds.MPR,
|
||||
]),
|
||||
],
|
||||
'Window Level'
|
||||
),
|
||||
primary: ToolbarService.createButton({
|
||||
id: 'WindowLevel',
|
||||
icon: 'tool-window-level',
|
||||
label: 'Window Level',
|
||||
tooltip: 'Window Level',
|
||||
commands: setToolActiveToolbar,
|
||||
evaluate: 'evaluate.cornerstoneTool',
|
||||
}),
|
||||
secondary: {
|
||||
icon: 'chevron-down',
|
||||
label: 'W/L Manual',
|
||||
isActive: true,
|
||||
tooltip: 'W/L Presets',
|
||||
},
|
||||
isAction: true, // ?
|
||||
renderer: WindowLevelMenuItem,
|
||||
items: [
|
||||
_createWwwcPreset(1, 'Soft tissue', '400 / 40'),
|
||||
@@ -241,86 +144,57 @@ const toolbarButtons = [
|
||||
],
|
||||
},
|
||||
},
|
||||
// Crosshairs Button
|
||||
{
|
||||
id: 'Crosshairs',
|
||||
type: 'ohif.radioGroup',
|
||||
uiType: 'ohif.radioGroup',
|
||||
props: {
|
||||
type: 'tool',
|
||||
icon: 'tool-crosshair',
|
||||
label: 'Crosshairs',
|
||||
commands: [
|
||||
..._createCommands('setToolActive', 'Crosshairs', [
|
||||
toolGroupIds.CT,
|
||||
toolGroupIds.PT,
|
||||
toolGroupIds.Fusion,
|
||||
// toolGroupIds.MPR,
|
||||
]),
|
||||
],
|
||||
commands: setToolActiveToolbar,
|
||||
evaluate: 'evaluate.cornerstoneTool',
|
||||
},
|
||||
},
|
||||
// Pan...
|
||||
// Pan Button
|
||||
{
|
||||
id: 'Pan',
|
||||
type: 'ohif.radioGroup',
|
||||
uiType: 'ohif.radioGroup',
|
||||
props: {
|
||||
type: 'tool',
|
||||
icon: 'tool-move',
|
||||
label: 'Pan',
|
||||
commands: [
|
||||
..._createCommands('setToolActive', 'Pan', [
|
||||
toolGroupIds.CT,
|
||||
toolGroupIds.PT,
|
||||
toolGroupIds.Fusion,
|
||||
// toolGroupIds.MPR,
|
||||
]),
|
||||
],
|
||||
commands: setToolActiveToolbar,
|
||||
evaluate: 'evaluate.cornerstoneTool',
|
||||
},
|
||||
},
|
||||
// Rectangle ROI Start End Threshold Button
|
||||
{
|
||||
id: 'RectangleROIStartEndThreshold',
|
||||
type: 'ohif.radioGroup',
|
||||
uiType: 'ohif.radioGroup',
|
||||
props: {
|
||||
type: 'tool',
|
||||
icon: 'tool-create-threshold',
|
||||
label: 'Rectangle ROI Threshold',
|
||||
commands: [
|
||||
..._createCommands('setToolActive', 'RectangleROIStartEndThreshold', [toolGroupIds.PT]),
|
||||
{
|
||||
commandName: 'displayNotification',
|
||||
commandOptions: {
|
||||
title: 'RectangleROI Threshold Tip',
|
||||
text: 'RectangleROI Threshold tool should be used on PT Axial Viewport',
|
||||
type: 'info',
|
||||
},
|
||||
},
|
||||
{
|
||||
commandName: 'setViewportActive',
|
||||
commandOptions: {
|
||||
viewportId: 'ptAXIAL',
|
||||
},
|
||||
},
|
||||
],
|
||||
commands: setToolActiveToolbar,
|
||||
evaluate: 'evaluate.cornerstoneTool',
|
||||
},
|
||||
},
|
||||
// Fusion PT Colormap Button
|
||||
{
|
||||
id: 'fusionPTColormap',
|
||||
type: 'ohif.splitButton',
|
||||
uiType: 'ohif.splitButton',
|
||||
props: {
|
||||
groupId: 'fusionPTColormap',
|
||||
primary: _createToolButton(
|
||||
'fusionPTColormap',
|
||||
'tool-fusion-color',
|
||||
'Fusion PT Colormap',
|
||||
[],
|
||||
'Fusion PT Colormap'
|
||||
),
|
||||
primary: ToolbarService.createButton({
|
||||
id: 'fusionPTColormap',
|
||||
icon: 'tool-fusion-color',
|
||||
label: 'Fusion PT Colormap',
|
||||
tooltip: 'Fusion PT Colormap',
|
||||
commands: [],
|
||||
evaluate: 'evaluate.action',
|
||||
}),
|
||||
secondary: {
|
||||
icon: 'chevron-down',
|
||||
label: 'PT Colormap',
|
||||
isActive: true,
|
||||
tooltip: 'PET Image Colormap',
|
||||
},
|
||||
isAction: true, // ?
|
||||
items: [
|
||||
_createColormap('HSV', 'hsv'),
|
||||
_createColormap('Hot Iron', 'hot_iron'),
|
||||
|
||||
Reference in new issue
Block a user