diff --git a/diff.txt b/diff.txt new file mode 100644 index 000000000..88c9a6493 --- /dev/null +++ b/diff.txt @@ -0,0 +1,118 @@ +diff --git a/extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenu.tsx b/extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenu.tsx +index 6c1e4f8f6..56dac15b5 100644 +--- a/extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenu.tsx ++++ b/extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenu.tsx +@@ -156,65 +156,65 @@ function ViewportOrientationMenu({ + > + + + + + {/* Divider */} +-
++
+ + + +diff --git a/platform/ui-next/src/components/Icons/Sources/Checked.tsx b/platform/ui-next/src/components/Icons/Sources/Checked.tsx +index 83c8fc57e..c88b75e0d 100644 +--- a/platform/ui-next/src/components/Icons/Sources/Checked.tsx ++++ b/platform/ui-next/src/components/Icons/Sources/Checked.tsx +@@ -4,14 +4,14 @@ import type { IconProps } from '../types'; + export const Checked = (props: IconProps) => ( + + void; disabled?: boolean; }>) { + const { servicesManager, commandsManager } = useSystem(); + const { cornerstoneViewportService, toolbarService } = servicesManager.services; + const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId); + const viewportOrientation = viewportInfo.getOrientation(); + const [gridState] = useViewportGrid(); const viewportIdToUse = viewportId || gridState.activeViewportId; const { IconContainer, className: iconClassName, containerProps } = useIconPresentation(); - const { servicesManager, commandsManager } = useSystem(); - const { cornerstoneViewportService, toolbarService } = servicesManager.services; + const [currentOrientation, setCurrentOrientation] = React.useState( + typeof viewportOrientation === 'string' ? viewportOrientation : 'axial' + ); const handleOrientationChange = (orientation: string) => { + setCurrentOrientation(orientation); const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportIdToUse); const currentViewportType = viewportInfo?.getViewportType(); @@ -56,6 +63,9 @@ function ViewportOrientationMenu({ case 'coronal': orientationEnum = Enums.OrientationAxis.CORONAL; break; + case 'reformat': + orientationEnum = Enums.OrientationAxis.REFORMAT; + break; default: orientationEnum = Enums.OrientationAxis.ACQUISITION; } @@ -106,7 +116,7 @@ function ViewportOrientationMenu({ // Get proper alignment and side based on the location using toolbar service const { align, side } = toolbarService.getAlignAndSide(Number(location)); - const Icon = ; + const Icon = React.createElement(getIcon(currentOrientation), { className: iconClassName }); return ( -
- - - - -
+ + + + + {/* Divider */} +
+ ); } +const getIcon = (orientationName: string) => { + switch (orientationName.toLowerCase()) { + case 'axial': + return Icons.OrientationSwitchA; + case 'sagittal': + return Icons.OrientationSwitchS; + case 'coronal': + return Icons.OrientationSwitchC; + case 'reformat': + return Icons.OrientationSwitchR; + case 'acquisition': + return Icons.OrientationSwitch; + default: + return Icons.OrientationSwitch; + } +}; + export default ViewportOrientationMenu; diff --git a/modes/basic-test-mode/src/toolbarButtons.ts b/modes/basic-test-mode/src/toolbarButtons.ts index fc67692cd..7efc60cc0 100644 --- a/modes/basic-test-mode/src/toolbarButtons.ts +++ b/modes/basic-test-mode/src/toolbarButtons.ts @@ -129,8 +129,7 @@ const toolbarButtons: Button[] = [ props: { icon: 'OrientationSwitch', label: 'Orientation', - tooltip: - 'Change viewport orientation between axial, sagittal, coronal and acquisition planes', + tooltip: 'Change viewport orientation between axial, sagittal, coronal and reformat planes', evaluate: { name: 'evaluate.orientationMenu', }, diff --git a/modes/longitudinal/src/toolbarButtons.ts b/modes/longitudinal/src/toolbarButtons.ts index 58d3fc49c..4129b7248 100644 --- a/modes/longitudinal/src/toolbarButtons.ts +++ b/modes/longitudinal/src/toolbarButtons.ts @@ -98,8 +98,7 @@ const toolbarButtons: Button[] = [ props: { icon: 'OrientationSwitch', label: 'Orientation', - tooltip: - 'Change viewport orientation between axial, sagittal, coronal and acquisition planes', + tooltip: 'Change viewport orientation between axial, sagittal, coronal and reformat planes', evaluate: { name: 'evaluate.orientationMenu', // hideWhenDisabled: true, diff --git a/modes/preclinical-4d/src/toolbarButtons.tsx b/modes/preclinical-4d/src/toolbarButtons.tsx index 80a262ab5..b0feb3b89 100644 --- a/modes/preclinical-4d/src/toolbarButtons.tsx +++ b/modes/preclinical-4d/src/toolbarButtons.tsx @@ -412,8 +412,7 @@ const toolbarButtons = [ props: { icon: 'OrientationSwitch', label: 'Orientation', - tooltip: - 'Change viewport orientation between axial, sagittal, coronal and acquisition planes', + tooltip: 'Change viewport orientation between axial, sagittal, coronal and reformat planes', evaluate: { name: 'evaluate.orientationMenu', // hideWhenDisabled: true, diff --git a/modes/segmentation/src/toolbarButtons.ts b/modes/segmentation/src/toolbarButtons.ts index f92d31895..1263429d2 100644 --- a/modes/segmentation/src/toolbarButtons.ts +++ b/modes/segmentation/src/toolbarButtons.ts @@ -80,8 +80,7 @@ const toolbarButtons: Button[] = [ props: { icon: 'OrientationSwitch', label: 'Orientation', - tooltip: - 'Change viewport orientation between axial, sagittal, coronal and acquisition planes', + tooltip: 'Change viewport orientation between axial, sagittal, coronal and reformat planes', evaluate: { name: 'evaluate.orientationMenu', // hideWhenDisabled: true, diff --git a/modes/tmtv/src/toolbarButtons.ts b/modes/tmtv/src/toolbarButtons.ts index cb28cbb7f..56e41074c 100644 --- a/modes/tmtv/src/toolbarButtons.ts +++ b/modes/tmtv/src/toolbarButtons.ts @@ -375,8 +375,7 @@ const toolbarButtons = [ props: { icon: 'OrientationSwitch', label: 'Orientation', - tooltip: - 'Change viewport orientation between axial, sagittal, coronal and acquisition planes', + tooltip: 'Change viewport orientation between axial, sagittal, coronal and reformat planes', evaluate: { name: 'evaluate.orientationMenu', // hideWhenDisabled: true, diff --git a/modes/usAnnotation/src/toolbarButtons.ts b/modes/usAnnotation/src/toolbarButtons.ts index 02dcf1e04..5ab0cec2a 100644 --- a/modes/usAnnotation/src/toolbarButtons.ts +++ b/modes/usAnnotation/src/toolbarButtons.ts @@ -98,8 +98,7 @@ const toolbarButtons: Button[] = [ props: { icon: 'OrientationSwitch', label: 'Orientation', - tooltip: - 'Change viewport orientation between axial, sagittal, coronal and acquisition planes', + tooltip: 'Change viewport orientation between axial, sagittal, coronal and reformat planes', evaluate: { name: 'evaluate.orientationMenu', // hideWhenDisabled: true, diff --git a/platform/ui-next/src/components/Icons/Icons.tsx b/platform/ui-next/src/components/Icons/Icons.tsx index 6aba39926..ef2bbdd71 100644 --- a/platform/ui-next/src/components/Icons/Icons.tsx +++ b/platform/ui-next/src/components/Icons/Icons.tsx @@ -75,7 +75,12 @@ import IconTransferring from './Sources/IconTransferring'; import Alert from './Sources/Alert'; import AlertOutline from './Sources/AlertOutline'; import Clipboard from './Sources/Clipboard'; +import Checked from './Sources/Checked'; import OrientationSwitch from './Sources/OrientationSwitch'; +import OrientationSwitchA from './Sources/OrientationSwitchA'; +import OrientationSwitchS from './Sources/OrientationSwitchS'; +import OrientationSwitchC from './Sources/OrientationSwitchC'; +import OrientationSwitchR from './Sources/OrientationSwitchR'; import LayerBackground from './Sources/LayerBackground'; import LayerForeground from './Sources/LayerForeground'; import LayerSegmentation from './Sources/LayerSegmentation'; @@ -405,6 +410,11 @@ export const Icons = { LayerForeground, LayerSegmentation, OrientationSwitch, + OrientationSwitchA, + OrientationSwitchS, + OrientationSwitchC, + OrientationSwitchR, + Checked, Clipboard, ActionNewDialog, GroupLayers, diff --git a/platform/ui-next/src/components/Icons/Sources/Checked.tsx b/platform/ui-next/src/components/Icons/Sources/Checked.tsx new file mode 100644 index 000000000..c88b75e0d --- /dev/null +++ b/platform/ui-next/src/components/Icons/Sources/Checked.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import type { IconProps } from '../types'; + +export const Checked = (props: IconProps) => ( + + + +); + +export default Checked; diff --git a/platform/ui-next/src/components/Icons/Sources/OrientationSwitchA.tsx b/platform/ui-next/src/components/Icons/Sources/OrientationSwitchA.tsx new file mode 100644 index 000000000..5cb5101dd --- /dev/null +++ b/platform/ui-next/src/components/Icons/Sources/OrientationSwitchA.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import type { IconProps } from '../types'; + +export const OrientationSwitchA = (props: IconProps) => ( + + + + + + +); + +export default OrientationSwitchA; diff --git a/platform/ui-next/src/components/Icons/Sources/OrientationSwitchC.tsx b/platform/ui-next/src/components/Icons/Sources/OrientationSwitchC.tsx new file mode 100644 index 000000000..7ff8308ca --- /dev/null +++ b/platform/ui-next/src/components/Icons/Sources/OrientationSwitchC.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import type { IconProps } from '../types'; + +export const OrientationSwitchC = (props: IconProps) => ( + + + + + + +); + +export default OrientationSwitchC; diff --git a/platform/ui-next/src/components/Icons/Sources/OrientationSwitchR.tsx b/platform/ui-next/src/components/Icons/Sources/OrientationSwitchR.tsx new file mode 100644 index 000000000..24473214f --- /dev/null +++ b/platform/ui-next/src/components/Icons/Sources/OrientationSwitchR.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import type { IconProps } from '../types'; + +export const OrientationSwitchR = (props: IconProps) => ( + + + + + + +); + +export default OrientationSwitchR; diff --git a/platform/ui-next/src/components/Icons/Sources/OrientationSwitchS.tsx b/platform/ui-next/src/components/Icons/Sources/OrientationSwitchS.tsx new file mode 100644 index 000000000..3343a92bd --- /dev/null +++ b/platform/ui-next/src/components/Icons/Sources/OrientationSwitchS.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import type { IconProps } from '../types'; + +export const OrientationSwitchS = (props: IconProps) => ( + + + + + + +); + +export default OrientationSwitchS;