ui(components): migrates to new toolbar ui components and Numeric for Input InputRange and InputDoubleRange (#4728)

Co-authored-by: sedghi <ar.sedghi@gmail.com>
This commit is contained in:
Dan Rukasandsedghi authored and GitHub committed 2025-01-29 13:36:52 -05:00
1 parent ac5ae4a29e
commit a8d84443a9
116 files changed
+2930 -1038

No files matched your search

+6 -6
View File
@@ -35,7 +35,7 @@ function _createSetToolActiveCommands(toolName, toolGroupIds = ['default', 'mpr'
const toolbarButtons: Button[] = [
{
id: 'MeasurementTools',
uiType: 'ohif.splitButton',
uiType: 'ohif.toolButtonList',
props: {
groupId: 'MeasurementTools',
evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
@@ -81,7 +81,7 @@ const toolbarButtons: Button[] = [
},
{
id: 'Zoom',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
icon: 'tool-zoom',
label: 'Zoom',
@@ -91,7 +91,7 @@ const toolbarButtons: Button[] = [
},
{
id: 'WindowLevel',
uiType: 'ohif.splitButton',
uiType: 'ohif.toolButtonList',
props: {
groupId: 'WindowLevel',
primary: ToolbarService.createButton({
@@ -118,7 +118,7 @@ const toolbarButtons: Button[] = [
},
{
id: 'Pan',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
icon: 'tool-move',
label: 'Pan',
@@ -128,7 +128,7 @@ const toolbarButtons: Button[] = [
},
{
id: 'Capture',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
icon: 'tool-capture',
label: 'Capture',
@@ -163,7 +163,7 @@ const toolbarButtons: Button[] = [
},
{
id: 'MoreTools',
uiType: 'ohif.splitButton',
uiType: 'ohif.toolButtonList',
props: {
groupId: 'MoreTools',
evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
+1 -1
View File
@@ -14,7 +14,7 @@ const ReferenceLinesListeners: RunCommand = [
const moreTools = [
{
id: 'MoreTools',
uiType: 'ohif.splitButton',
uiType: 'ohif.toolButtonList',
props: {
groupId: 'MoreTools',
evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
+9 -9
View File
@@ -43,7 +43,7 @@ export const setToolActiveToolbar = {
const toolbarButtons: Button[] = [
{
id: 'MeasurementTools',
uiType: 'ohif.splitButton',
uiType: 'ohif.toolButtonList',
props: {
groupId: 'MeasurementTools',
// group evaluate to determine which item should move to the top
@@ -130,7 +130,7 @@ const toolbarButtons: Button[] = [
},
{
id: 'Zoom',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
icon: 'tool-zoom',
label: 'Zoom',
@@ -141,7 +141,7 @@ const toolbarButtons: Button[] = [
// Window Level
{
id: 'WindowLevel',
uiType: 'ohif.splitButton',
uiType: 'ohif.toolButtonList',
props: {
groupId: 'WindowLevel',
primary: createButton({
@@ -170,7 +170,7 @@ const toolbarButtons: Button[] = [
// Pan...
{
id: 'Pan',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
type: 'tool',
icon: 'tool-move',
@@ -181,7 +181,7 @@ const toolbarButtons: Button[] = [
},
{
id: 'MPR',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
icon: 'icon-mpr',
label: 'MPR',
@@ -198,7 +198,7 @@ const toolbarButtons: Button[] = [
},
{
id: 'TrackBallRotate',
type: 'ohif.radioGroup',
type: 'ohif.toolButton',
props: {
type: 'tool',
icon: 'tool-3d-rotate',
@@ -208,7 +208,7 @@ const toolbarButtons: Button[] = [
},
{
id: 'Capture',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
icon: 'tool-capture',
label: 'Capture',
@@ -234,7 +234,7 @@ const toolbarButtons: Button[] = [
},
{
id: 'Crosshairs',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
type: 'tool',
icon: 'tool-crosshair',
@@ -250,4 +250,4 @@ const toolbarButtons: Button[] = [
},
];
export default toolbarButtons;
export default toolbarButtons;
+27 -33
View File
@@ -84,13 +84,7 @@ function modeFactory({ modeConfiguration }) {
* Lifecycle hooks
*/
onModeEnter: function ({ servicesManager, extensionManager, commandsManager }: withAppTypes) {
const {
measurementService,
toolbarService,
toolGroupService,
panelService,
segmentationService,
} = servicesManager.services;
const { measurementService, toolbarService, toolGroupService } = servicesManager.services;
measurementService.clearMeasurements();
@@ -112,32 +106,32 @@ function modeFactory({ modeConfiguration }) {
// // ActivatePanel event trigger for when a segmentation or measurement is added.
// // Do not force activation so as to respect the state the user may have left the UI in.
_activatePanelTriggersSubscriptions = [
...panelService.addActivatePanelTriggers(
cornerstone.segmentation,
[
{
sourcePubSubService: segmentationService,
sourceEvents: [segmentationService.EVENTS.SEGMENTATION_ADDED],
},
],
true
),
...panelService.addActivatePanelTriggers(
tracked.measurements,
[
{
sourcePubSubService: measurementService,
sourceEvents: [
measurementService.EVENTS.MEASUREMENT_ADDED,
measurementService.EVENTS.RAW_MEASUREMENT_ADDED,
],
},
],
true
),
true,
];
// _activatePanelTriggersSubscriptions = [
// ...panelService.addActivatePanelTriggers(
// cornerstone.segmentation,
// [
// {
// sourcePubSubService: segmentationService,
// sourceEvents: [segmentationService.EVENTS.SEGMENTATION_ADDED],
// },
// ],
// true
// ),
// ...panelService.addActivatePanelTriggers(
// tracked.measurements,
// [
// {
// sourcePubSubService: measurementService,
// sourceEvents: [
// measurementService.EVENTS.MEASUREMENT_ADDED,
// measurementService.EVENTS.RAW_MEASUREMENT_ADDED,
// ],
// },
// ],
// true
// ),
// true,
// ];
},
onModeExit: ({ servicesManager }: withAppTypes) => {
const {
+1 -1
View File
@@ -14,7 +14,7 @@ const ReferenceLinesListeners: RunCommand = [
const moreTools = [
{
id: 'MoreTools',
uiType: 'ohif.splitButton',
uiType: 'ohif.toolButtonList',
props: {
groupId: 'MoreTools',
evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
+7 -7
View File
@@ -15,7 +15,7 @@ export const setToolActiveToolbar = {
const toolbarButtons: Button[] = [
{
id: 'MeasurementTools',
uiType: 'ohif.splitButton',
uiType: 'ohif.toolButtonList',
props: {
groupId: 'MeasurementTools',
// group evaluate to determine which item should move to the top
@@ -110,7 +110,7 @@ const toolbarButtons: Button[] = [
},
{
id: 'Zoom',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
icon: 'tool-zoom',
label: 'Zoom',
@@ -121,7 +121,7 @@ const toolbarButtons: Button[] = [
// Window Level
{
id: 'WindowLevel',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
icon: 'tool-window-level',
label: 'Window Level',
@@ -138,7 +138,7 @@ const toolbarButtons: Button[] = [
// Pan...
{
id: 'Pan',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
type: 'tool',
icon: 'tool-move',
@@ -149,7 +149,7 @@ const toolbarButtons: Button[] = [
},
{
id: 'TrackballRotate',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
type: 'tool',
icon: 'tool-3d-rotate',
@@ -163,7 +163,7 @@ const toolbarButtons: Button[] = [
},
{
id: 'Capture',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
icon: 'tool-capture',
label: 'Capture',
@@ -188,7 +188,7 @@ const toolbarButtons: Button[] = [
},
{
id: 'Crosshairs',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
type: 'tool',
icon: 'tool-crosshair',
+4 -4
View File
@@ -3,7 +3,7 @@ import { ToolbarService } from '@ohif/core';
const toolbarButtons = [
{
id: 'MeasurementTools',
uiType: 'ohif.splitButton',
uiType: 'ohif.toolButtonList',
props: {
groupId: 'MeasurementTools',
// group evaluate to determine which item should move to the top
@@ -131,7 +131,7 @@ const toolbarButtons = [
},
{
id: 'dragPan',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
icon: 'tool-move',
label: 'Pan',
@@ -147,7 +147,7 @@ const toolbarButtons = [
},
{
id: 'TagBrowser',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
icon: 'dicom-tag-browser',
label: 'Dicom Tag Browser',
@@ -161,4 +161,4 @@ const toolbarButtons = [
},
];
export default toolbarButtons;
export default toolbarButtons;
@@ -3,9 +3,10 @@ import type { Button } from '@ohif/core/types';
const toolbarButtons: Button[] = [
{
id: 'BrushTools',
uiType: 'ohif.buttonGroup',
uiType: 'ohif.toolBoxButtonGroup',
props: {
groupId: 'BrushTools',
evaluate: 'evaluate.cornerstone.hasSegmentation',
items: [
{
id: 'Brush',
@@ -134,7 +135,7 @@ const toolbarButtons: Button[] = [
},
{
id: 'Shapes',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolBoxButton',
props: {
label: 'Shapes',
evaluate: {
+6 -6
View File
@@ -13,7 +13,7 @@ const setToolActiveToolbar = {
const toolbarButtons = [
{
id: 'MeasurementTools',
uiType: 'ohif.splitButton',
uiType: 'ohif.toolButtonList',
props: {
groupId: 'MeasurementTools',
evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
@@ -67,7 +67,7 @@ const toolbarButtons = [
},
{
id: 'Zoom',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
icon: 'tool-zoom',
label: 'Zoom',
@@ -77,7 +77,7 @@ const toolbarButtons = [
},
{
id: 'WindowLevel',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
icon: 'tool-window-level',
label: 'Window Level',
@@ -87,7 +87,7 @@ const toolbarButtons = [
},
{
id: 'Pan',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
type: 'tool',
icon: 'tool-move',
@@ -98,7 +98,7 @@ const toolbarButtons = [
},
{
id: 'TrackballRotate',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
type: 'tool',
icon: 'tool-3d-rotate',
@@ -134,7 +134,7 @@ const toolbarButtons = [
},
{
id: 'Crosshairs',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
type: 'tool',
icon: 'tool-crosshair',
@@ -3,9 +3,10 @@ import type { Button } from '@ohif/core/types';
const toolbarButtons: Button[] = [
{
id: 'BrushTools',
uiType: 'ohif.buttonGroup',
uiType: 'ohif.toolBoxButtonGroup',
props: {
groupId: 'BrushTools',
evaluate: 'evaluate.cornerstone.hasSegmentation',
items: [
{
id: 'Brush',
@@ -172,14 +173,16 @@ const toolbarButtons: Button[] = [
},
{
id: 'Shapes',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolBoxButton',
props: {
id: 'Shapes',
icon: 'icon-tool-shape',
label: 'Shapes',
evaluate: {
name: 'evaluate.cornerstone.segmentation',
toolNames: ['CircleScissor', 'SphereScissor', 'RectangleScissor'],
disabledText: 'Create new segmentation to enable shapes tool.',
},
icon: 'icon-tool-shape',
options: [
{
name: 'Shape',
+7 -39
View File
@@ -20,7 +20,7 @@ export const setToolActiveToolbar = {
const toolbarButtons: Button[] = [
{
id: 'Zoom',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
icon: 'tool-zoom',
label: 'Zoom',
@@ -30,7 +30,7 @@ const toolbarButtons: Button[] = [
},
{
id: 'WindowLevel',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
icon: 'tool-window-level',
label: 'Window Level',
@@ -40,7 +40,7 @@ const toolbarButtons: Button[] = [
},
{
id: 'Pan',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
icon: 'tool-move',
label: 'Pan',
@@ -50,7 +50,7 @@ const toolbarButtons: Button[] = [
},
{
id: 'TrackballRotate',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
type: 'tool',
icon: 'tool-3d-rotate',
@@ -64,7 +64,7 @@ const toolbarButtons: Button[] = [
},
{
id: 'Capture',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
icon: 'tool-capture',
label: 'Capture',
@@ -90,7 +90,7 @@ const toolbarButtons: Button[] = [
},
{
id: 'Crosshairs',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
icon: 'tool-crosshair',
label: 'Crosshairs',
@@ -108,7 +108,7 @@ const toolbarButtons: Button[] = [
},
{
id: 'MoreTools',
uiType: 'ohif.splitButton',
uiType: 'ohif.toolButtonList',
props: {
groupId: 'MoreTools',
evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
@@ -192,14 +192,6 @@ const toolbarButtons: Button[] = [
commands: 'invertViewport',
evaluate: 'evaluate.viewportProperties.toggle',
}),
createButton({
id: 'Probe',
icon: 'tool-probe',
label: 'Probe',
tooltip: 'Probe',
commands: setToolActiveToolbar,
evaluate: 'evaluate.cornerstoneTool',
}),
createButton({
id: 'Cine',
icon: 'tool-cine',
@@ -214,14 +206,6 @@ const toolbarButtons: Button[] = [
},
],
}),
createButton({
id: 'Angle',
icon: 'tool-angle',
label: 'Angle',
tooltip: 'Angle',
commands: setToolActiveToolbar,
evaluate: 'evaluate.cornerstoneTool',
}),
createButton({
id: 'Magnify',
icon: 'tool-magnify',
@@ -230,22 +214,6 @@ const toolbarButtons: Button[] = [
commands: setToolActiveToolbar,
evaluate: 'evaluate.cornerstoneTool',
}),
createButton({
id: 'RectangleROI',
icon: 'tool-rectangle',
label: 'Rectangle',
tooltip: 'Rectangle',
commands: setToolActiveToolbar,
evaluate: 'evaluate.cornerstoneTool',
}),
createButton({
id: 'CalibrationLine',
icon: 'tool-calibration',
label: 'Calibration',
tooltip: 'Calibration Line',
commands: setToolActiveToolbar,
evaluate: 'evaluate.cornerstoneTool',
}),
createButton({
id: 'TagBrowser',
icon: 'dicom-tag-browser',
+8 -7
View File
@@ -11,7 +11,7 @@ const setToolActiveToolbar = {
const toolbarButtons = [
{
id: 'MeasurementTools',
uiType: 'ohif.splitButton',
uiType: 'ohif.toolButtonList',
props: {
groupId: 'MeasurementTools',
primary: ToolbarService.createButton({
@@ -56,7 +56,7 @@ const toolbarButtons = [
},
{
id: 'Zoom',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
icon: 'tool-zoom',
label: 'Zoom',
@@ -67,7 +67,7 @@ const toolbarButtons = [
// Window Level + Presets
{
id: 'WindowLevel',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
icon: 'tool-window-level',
label: 'Window Level',
@@ -78,7 +78,7 @@ const toolbarButtons = [
// Crosshairs Button
{
id: 'Crosshairs',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
icon: 'tool-crosshair',
label: 'Crosshairs',
@@ -89,7 +89,7 @@ const toolbarButtons = [
// Pan Button
{
id: 'Pan',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolButton',
props: {
icon: 'tool-move',
label: 'Pan',
@@ -100,7 +100,7 @@ const toolbarButtons = [
// Rectangle ROI Start End Threshold Button
{
id: 'RectangleROIStartEndThreshold',
uiType: 'ohif.radioGroup',
uiType: 'ohif.toolBoxButton',
props: {
icon: 'tool-create-threshold',
label: 'Rectangle ROI Threshold',
@@ -119,9 +119,10 @@ const toolbarButtons = [
},
{
id: 'BrushTools',
uiType: 'ohif.buttonGroup',
uiType: 'ohif.toolBoxButtonGroup',
props: {
groupId: 'BrushTools',
evaluate: 'evaluate.cornerstone.hasSegmentation',
items: [
{
id: 'Brush',